made with esnextbin
Created
November 24, 2016 14:51
-
-
Save andreloureiro/5f6ecf5442978945301fc3fe771bb6a7 to your computer and use it in GitHub Desktop.
esnextbin sketch
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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$); | |
| const tree$ = state$ | |
| .map(state => input('.publish', {props: {type: 'checkbox', checked: state}})); | |
| return { | |
| DOM: tree$, | |
| value: state$ | |
| } | |
| }; | |
| 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).debug('st'); | |
| const tree$ = state$ | |
| .map(([titleDOM, descriptionDOM, publishDOM, published]) => { | |
| return div([ | |
| titleDOM, | |
| descriptionDOM, | |
| publishDOM, | |
| published ? 'published' : 'not published' | |
| ]); | |
| }); | |
| return { | |
| DOM: tree$ | |
| }; | |
| }; | |
| run(main, { | |
| DOM: makeDOMDriver('.application') | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "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" | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| '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$); | |
| var tree$ = state$.map(function (state) { | |
| return (0, _dom.input)('.publish', { props: { type: 'checkbox', checked: state } }); | |
| }); | |
| return { | |
| DOM: tree$, | |
| value: state$ | |
| }; | |
| }; | |
| 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).debug('st'); | |
| 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$ | |
| }; | |
| }; | |
| (0, _xstreamRun.run)(main, { | |
| DOM: (0, _dom.makeDOMDriver)('.application') | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment