made with esnextbin
Last active
June 22, 2017 15:24
-
-
Save TylorS/a72ca0a5b9b22c0400b9c41944480dc7 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 id="app"></div> | |
| <!-- put markup and other contents here --> | |
| </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 { init, div, button, h1, elementToVNode, querySelectorAll } from 'mostly-dom' | |
| import { just } from 'most' | |
| import { sync } from 'most-subject' | |
| const patch = init([]) | |
| const rootElement = document.querySelector('#app') | |
| if (!rootElement) throw new Error(`No root element found`) | |
| const rootVNode = elementToVNode(rootElement) | |
| function component(Component) { | |
| const eventMap = new Map() | |
| const selectorMap = new Map() | |
| function events(selector, eventType) { | |
| const eventStream = sync() | |
| selectorMap.set(selector, eventType) | |
| eventMap.set(selector + `~` + eventType, eventStream) | |
| return eventStream | |
| } | |
| return function (sources) { | |
| const sinks = Component({...sources, events }) | |
| const entries = Array.from(selectorMap.entries()) | |
| return { | |
| ...sinks, | |
| view$: sinks.view$.tap(view => { | |
| entries.forEach(([ selector, eventType ]) => { | |
| const nodes = querySelectorAll(selector) | |
| const event$ = eventMap.get(selector + `~` + eventType) | |
| if (!nodes.length) return | |
| nodes.forEach(node => { | |
| const on = node.props.on || {} | |
| node.props.on = on | |
| on[eventType] = (event) => event$.next(event) | |
| }) | |
| }) | |
| }) | |
| } | |
| } | |
| } | |
| const { view$ } = component(({ events }) => { | |
| const increment$ = events('#increment', 'click') | |
| const decrement$ = events('#decrement', 'click') | |
| const view$ = just(div()) | |
| return { view$ } | |
| })({}) | |
| view$.scan(path, rootVNode).drain() |
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": { | |
| "mostly-dom": "3.4.0", | |
| "most": "1.4.1", | |
| "most-subject": "5.3.0", | |
| "babel-runtime": "6.23.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 _from = require('babel-runtime/core-js/array/from'); | |
| var _from2 = _interopRequireDefault(_from); | |
| var _extends2 = require('babel-runtime/helpers/extends'); | |
| var _extends3 = _interopRequireDefault(_extends2); | |
| var _map = require('babel-runtime/core-js/map'); | |
| var _map2 = _interopRequireDefault(_map); | |
| var _mostlyDom = require('mostly-dom'); | |
| var _most = require('most'); | |
| var _mostSubject = require('most-subject'); | |
| function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
| var patch = (0, _mostlyDom.init)([]); | |
| var rootElement = document.querySelector('#app'); | |
| if (!rootElement) throw new Error('No root element found'); | |
| var rootVNode = (0, _mostlyDom.elementToVNode)(rootElement); | |
| function component(Component) { | |
| var eventMap = new _map2.default(); | |
| var selectorMap = new _map2.default(); | |
| function events(selector, eventType) { | |
| var eventStream = (0, _mostSubject.sync)(); | |
| selectorMap.set(selector, eventType); | |
| eventMap.set(selector + '~' + eventType, eventStream); | |
| return eventStream; | |
| } | |
| return function (sources) { | |
| var sinks = Component((0, _extends3.default)({}, sources, { events: events })); | |
| var entries = (0, _from2.default)(selectorMap.entries()); | |
| return (0, _extends3.default)({}, sinks, { | |
| view$: sinks.view$.tap(function (view) { | |
| entries.forEach(function (_ref) { | |
| var _ref2 = (0, _slicedToArray3.default)(_ref, 2), | |
| selector = _ref2[0], | |
| eventType = _ref2[1]; | |
| var nodes = (0, _mostlyDom.querySelectorAll)(selector); | |
| var event$ = eventMap.get(selector + '~' + eventType); | |
| if (!nodes.length) return; | |
| nodes.forEach(function (node) { | |
| var on = node.props.on || {}; | |
| node.props.on = on; | |
| on[eventType] = function (event) { | |
| return event$.next(event); | |
| }; | |
| }); | |
| }); | |
| }) | |
| }); | |
| }; | |
| } | |
| var _component = component(function (_ref3) { | |
| var events = _ref3.events; | |
| var increment$ = events('#increment', 'click'); | |
| var decrement$ = events('#decrement', 'click'); | |
| var view$ = (0, _most.just)((0, _mostlyDom.div)()); | |
| return { view$: view$ }; | |
| })({}), | |
| view$ = _component.view$; | |
| view$.scan(path, rootVNode).drain(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment