andreloureiro/esnextbin.md

## esnextbin.md

      
    Raw
  

              esnextbin.md
            
          
    made with esnextbin

  
## index.html
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>ESNextbin Sketch</title>
  <!-- put additional styles and scripts here -->
</head>
<body>
  <div class="application"></div>
</body>
</html>

## index.js
import xs from 'xstream';
import {run} from '@cycle/xstream-run';
import {makeDOMDriver, h3, div, input} from '@cycle/dom';

const TitleComponent = sources => {
    const tree$ = sources.props.map(
      title => h3(title)
    );

    return {
        DOM: tree$
    }
};

const DescriptionComponent = sources => {
    const tree$ = sources.props.map(
      description => h3(description)
    );

    return {
        DOM: tree$
    }
};

const PublishComponent = sources => {
    const domSource = sources.DOM;
    const props$ = sources.props;

    const newValue$ = domSource
        .select('.publish')
        .events('change')
        .map(ev => ev.target.checked);

    const state$ = xs.merge(props$, newValue$).remember();

    // NEW
    const fnPublish$ = newValue$
        .filter(Boolean);

    const tree$ = state$
        .map(state => input('.publish', {props: {type: 'checkbox', checked: state}}));

    return {
        DOM: tree$,
        value: state$,
        // NEW
        request: fnPublish$
    }
};

const main = sources => {
    const project$ = xs.of({
        id: 1,
        title: 'The Angelic Process',
        description: 'Some cool info about the project itself',
        published: true,
        featured: false
    });

    const title$ = TitleComponent({
        DOM: sources.DOM,
        props: project$.map(project => project.title)
    });

    const description$ = DescriptionComponent({
        DOM: sources.DOM,
        props: project$.map(project => project.description)
    });

    const publish$ = PublishComponent({
        DOM: sources.DOM,
        props: project$.map(project => project.published)
    });

    const state$ = xs.combine(title$.DOM, description$.DOM, publish$.DOM, publish$.value);

    const tree$ = state$
        .map(([titleDOM, descriptionDOM, publishDOM, published]) => {
          return div([
            titleDOM,
            descriptionDOM,
            publishDOM,
            published ? 'published' : 'not published'
          ]);
        });

    return {
        DOM: tree$,
        // NEW
        fakeHTTP: publish$.request
    };
};

run(main, {
  DOM: makeDOMDriver('.application'),
  // NEW
  fakeHTTP: $ => {$.addListener({next(v) {console.log(`send ajax: ${v}`)}})}
});

## package.json
{
  "name": "esnextbin-sketch",
  "version": "0.0.0",
  "dependencies": {
    "xstream": "8.0.0",
    "@cycle/xstream-run": "3.1.0",
    "@cycle/dom": "14.1.0",
    "babel-runtime": "6.18.0"
  }
}

## transpiled.js
'use strict';

var _slicedToArray2 = require('babel-runtime/helpers/slicedToArray');

var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);

var _xstream = require('xstream');

var _xstream2 = _interopRequireDefault(_xstream);

var _xstreamRun = require('@cycle/xstream-run');

var _dom = require('@cycle/dom');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var TitleComponent = function TitleComponent(sources) {
    var tree$ = sources.props.map(function (title) {
        return (0, _dom.h3)(title);
    });

    return {
        DOM: tree$
    };
};

var DescriptionComponent = function DescriptionComponent(sources) {
    var tree$ = sources.props.map(function (description) {
        return (0, _dom.h3)(description);
    });

    return {
        DOM: tree$
    };
};

var PublishComponent = function PublishComponent(sources) {
    var domSource = sources.DOM;
    var props$ = sources.props;

    var newValue$ = domSource.select('.publish').events('change').map(function (ev) {
        return ev.target.checked;
    });

    var state$ = _xstream2.default.merge(props$, newValue$).remember();

    // NEW
    var fnPublish$ = newValue$.filter(Boolean);

    var tree$ = state$.map(function (state) {
        return (0, _dom.input)('.publish', { props: { type: 'checkbox', checked: state } });
    });

    return {
        DOM: tree$,
        value: state$,
        // NEW
        request: fnPublish$
    };
};

var main = function main(sources) {
    var project$ = _xstream2.default.of({
        id: 1,
        title: 'The Angelic Process',
        description: 'Some cool info about the project itself',
        published: true,
        featured: false
    });

    var title$ = TitleComponent({
        DOM: sources.DOM,
        props: project$.map(function (project) {
            return project.title;
        })
    });

    var description$ = DescriptionComponent({
        DOM: sources.DOM,
        props: project$.map(function (project) {
            return project.description;
        })
    });

    var publish$ = PublishComponent({
        DOM: sources.DOM,
        props: project$.map(function (project) {
            return project.published;
        })
    });

    var state$ = _xstream2.default.combine(title$.DOM, description$.DOM, publish$.DOM, publish$.value);

    var tree$ = state$.map(function (_ref) {
        var _ref2 = (0, _slicedToArray3.default)(_ref, 4);

        var titleDOM = _ref2[0];
        var descriptionDOM = _ref2[1];
        var publishDOM = _ref2[2];
        var published = _ref2[3];

        return (0, _dom.div)([titleDOM, descriptionDOM, publishDOM, published ? 'published' : 'not published']);
    });

    return {
        DOM: tree$,
        // NEW
        fakeHTTP: publish$.request
    };
};

(0, _xstreamRun.run)(main, {
    DOM: (0, _dom.makeDOMDriver)('.application'),
    // NEW
    fakeHTTP: function fakeHTTP($) {
        $.addListener({
            next: function next(v) {
                console.log('send ajax: ' + v);
            }
        });
    }
});
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>ESNextbin Sketch</title>
	<!-- put additional styles and scripts here -->
	</head>
	<body>
	<div class="application"></div>
	</body>
	</html>
	import xs from 'xstream';
	import {run} from '@cycle/xstream-run';
	import {makeDOMDriver, h3, div, input} from '@cycle/dom';

	const TitleComponent = sources => {
	const tree$ = sources.props.map(
	title => h3(title)
	);

	return {
	DOM: tree$
	}
	};

	const DescriptionComponent = sources => {
	const tree$ = sources.props.map(
	description => h3(description)
	);

	return {
	DOM: tree$
	}
	};

	const PublishComponent = sources => {
	const domSource = sources.DOM;
	const props$ = sources.props;

	const newValue$ = domSource
	.select('.publish')
	.events('change')
	.map(ev => ev.target.checked);

	const state$ = xs.merge(props$, newValue$).remember();

	// NEW
	const fnPublish$ = newValue$
	.filter(Boolean);

	const tree$ = state$
	.map(state => input('.publish', {props: {type: 'checkbox', checked: state}}));

	return {
	DOM: tree$,
	value: state$,
	// NEW
	request: fnPublish$
	}
	};

	const main = sources => {
	const project$ = xs.of({
	id: 1,
	title: 'The Angelic Process',
	description: 'Some cool info about the project itself',
	published: true,
	featured: false
	});

	const title$ = TitleComponent({
	DOM: sources.DOM,
	props: project$.map(project => project.title)
	});

	const description$ = DescriptionComponent({
	DOM: sources.DOM,
	props: project$.map(project => project.description)
	});

	const publish$ = PublishComponent({
	DOM: sources.DOM,
	props: project$.map(project => project.published)
	});

	const state$ = xs.combine(title$.DOM, description$.DOM, publish$.DOM, publish$.value);

	const tree$ = state$
	.map(([titleDOM, descriptionDOM, publishDOM, published]) => {
	return div([
	titleDOM,
	descriptionDOM,
	publishDOM,
	published ? 'published' : 'not published'
	]);
	});

	return {
	DOM: tree$,
	// NEW
	fakeHTTP: publish$.request
	};
	};

	run(main, {
	DOM: makeDOMDriver('.application'),
	// NEW
	fakeHTTP: $ => {$.addListener({next(v) {console.log(`send ajax: ${v}`)}})}
	});
	{
	"name": "esnextbin-sketch",
	"version": "0.0.0",
	"dependencies": {
	"xstream": "8.0.0",
	"@cycle/xstream-run": "3.1.0",
	"@cycle/dom": "14.1.0",
	"babel-runtime": "6.18.0"
	}
	}
	'use strict';

	var _slicedToArray2 = require('babel-runtime/helpers/slicedToArray');

	var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);

	var _xstream = require('xstream');

	var _xstream2 = _interopRequireDefault(_xstream);

	var _xstreamRun = require('@cycle/xstream-run');

	var _dom = require('@cycle/dom');

	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

	var TitleComponent = function TitleComponent(sources) {
	var tree$ = sources.props.map(function (title) {
	return (0, _dom.h3)(title);
	});

	return {
	DOM: tree$
	};
	};

	var DescriptionComponent = function DescriptionComponent(sources) {
	var tree$ = sources.props.map(function (description) {
	return (0, _dom.h3)(description);
	});

	return {
	DOM: tree$
	};
	};

	var PublishComponent = function PublishComponent(sources) {
	var domSource = sources.DOM;
	var props$ = sources.props;

	var newValue$ = domSource.select('.publish').events('change').map(function (ev) {
	return ev.target.checked;
	});

	var state$ = _xstream2.default.merge(props$, newValue$).remember();

	// NEW
	var fnPublish$ = newValue$.filter(Boolean);

	var tree$ = state$.map(function (state) {
	return (0, _dom.input)('.publish', { props: { type: 'checkbox', checked: state } });
	});

	return {
	DOM: tree$,
	value: state$,
	// NEW
	request: fnPublish$
	};
	};

	var main = function main(sources) {
	var project$ = _xstream2.default.of({
	id: 1,
	title: 'The Angelic Process',
	description: 'Some cool info about the project itself',
	published: true,
	featured: false
	});

	var title$ = TitleComponent({
	DOM: sources.DOM,
	props: project$.map(function (project) {
	return project.title;
	})
	});

	var description$ = DescriptionComponent({
	DOM: sources.DOM,
	props: project$.map(function (project) {
	return project.description;
	})
	});

	var publish$ = PublishComponent({
	DOM: sources.DOM,
	props: project$.map(function (project) {
	return project.published;
	})
	});

	var state$ = _xstream2.default.combine(title$.DOM, description$.DOM, publish$.DOM, publish$.value);

	var tree$ = state$.map(function (_ref) {
	var _ref2 = (0, _slicedToArray3.default)(_ref, 4);

	var titleDOM = _ref2[0];
	var descriptionDOM = _ref2[1];
	var publishDOM = _ref2[2];
	var published = _ref2[3];

	return (0, _dom.div)([titleDOM, descriptionDOM, publishDOM, published ? 'published' : 'not published']);
	});

	return {
	DOM: tree$,
	// NEW
	fakeHTTP: publish$.request
	};
	};

	(0, _xstreamRun.run)(main, {
	DOM: (0, _dom.makeDOMDriver)('.application'),
	// NEW
	fakeHTTP: function fakeHTTP($) {
	$.addListener({
	next: function next(v) {
	console.log('send ajax: ' + v);
	}
	});
	}
	});