TylorS/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 id="app"></div>
  <!-- put markup and other contents here -->
</body>
</html>

## index.js
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()

## package.json
{
  "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"
  }
}

## transpiled.js
'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();
	<!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();