made with esnextbin
Last active
November 24, 2016 15:54
-
-
Save andreloureiro/6c30846fc30f13e6f9d459917993c6ab 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$).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}`)}})} | |
| }); |
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$).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); | |
| } | |
| }); | |
| } | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment