Skip to content

Instantly share code, notes, and snippets.

@TylorS

TylorS/esnextbin.md

Last active Jun 22, 2017
Embed
What would you like to do?
esnextbin sketch
<!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>
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()
{
"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"
}
}
'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