tusharmath/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>
  <!-- put markup and other contents here -->
  <large-button></large-button>
</body>
</html>

## index.js
// write ES2015 code and import modules from npm
// and then press "Execute" to run your program
// write ES2015 code and import modules from npm
// and then press "Execute" to run your program
console.clear()
import xs from 'xstream';
import {run} from '@cycle/xstream-run';
import snabbdom from 'snabbdom'
import h from 'snabbdom/h'
import fromEvent from 'xstream/extra/fromEvent'

const patch = snabbdom.init([
  require('snabbdom/modules/class'),
  require('snabbdom/modules/props'),
  require('snabbdom/modules/style'),
  require('snabbdom/modules/eventlisteners')
])

function virtualDOMPatcher (shadowRoot) {
  // create wrapper element
  let __vNode = shadowRoot.appendChild(document.createElement('div'))
  return function (vNode) {
    __vNode = patch(__vNode, h('div', [vNode]))
  }
}

function registerElement (name, proto) {
  const prototype = Object.assign(Object.create(HTMLElement.prototype), proto)
  document.registerElement(name, {prototype})
}

function registerMain (name, main) {
  const proto = createProto(function (component) {
    var __vNode = document.createElement('div')
    component.shadowRoot.appendChild(__vNode)
    return run(main, {
      DOM: function (node$) {

        node$.addListener({
          next: vNode =>
            __vNode = patch(__vNode, h('div', [vNode])),
          error: err => console.error(err),
          complete: () => console.log('completed'),
        })

        const select = (selector) => {
          const events = (event) => {
            return fromEvent(component.shadowRoot, event)
            .filter(x => x.target.matches(selector))
          }
          return {events}
        }
        const dispose = () => {
          console.log('dispose')
        }
        return {select, dispose}
      }
    })
  })
  registerElement(name, proto)
}

function createProto (run, props = []) {
  return {
    createdCallback () {
      this.shadowRoot = this.attachShadow({mode: 'open'})
      this.dispose = run(this)
    },

    __dispatchEvent (type, detail) {
      this.dispatchEvent(new CustomEvent(type, {detail, bubbles: true}))
    },

    attributeChanged (name, o, value) {
      this.__dispatchEvent(`@@rwc/attr/${name}`, value)
    },

    attachedCallback () {
      this.__dispatchEvent(`@@rwc/attached`, this)
    },

    detachedCallback () {
      this.__dispatchEvent(`@@rwc/detached`, this)
      this.dispose()
    }
  }
}

function LargeButton ({DOM}) {
  const change$ = xs.merge(
    DOM.select('.inc').events('click').mapTo(1),
    DOM.select('.dec').events('click').mapTo(-1)
  ).fold((a, b) => a + b, 0)

  return {
    DOM: change$.map(count =>
      (h('div', [
        h('h1', [count.toString()]),
        h('button.inc', ['INC']),
        h('button.dec', ['DEC'])
      ]))
    )
  }
}

setTimeout(() => {
  console.log('Timeout!')
  document.body.innerHTML = ''
}, 5000)

registerMain('large-button', LargeButton)

## package.json
{
  "name": "rwc-observable-support",
  "dependencies": {
    "xstream": "6.3.2",
    "@cycle/xstream-run": "3.1.0",
    "snabbdom": "0.5.3",
    "babel-runtime": "6.11.6"
  },
  "version": "0.0.0"
}

## transpiled.js
'use strict';

var _create = require('babel-runtime/core-js/object/create');

var _create2 = _interopRequireDefault(_create);

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _xstream = require('xstream');

var _xstream2 = _interopRequireDefault(_xstream);

var _xstreamRun = require('@cycle/xstream-run');

var _snabbdom = require('snabbdom');

var _snabbdom2 = _interopRequireDefault(_snabbdom);

var _h = require('snabbdom/h');

var _h2 = _interopRequireDefault(_h);

var _fromEvent = require('xstream/extra/fromEvent');

var _fromEvent2 = _interopRequireDefault(_fromEvent);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

// write ES2015 code and import modules from npm
// and then press "Execute" to run your program
// write ES2015 code and import modules from npm
// and then press "Execute" to run your program
console.clear();


var patch = _snabbdom2.default.init([require('snabbdom/modules/class'), require('snabbdom/modules/props'), require('snabbdom/modules/style'), require('snabbdom/modules/eventlisteners')]);

function virtualDOMPatcher(shadowRoot) {
  // create wrapper element
  var __vNode = shadowRoot.appendChild(document.createElement('div'));
  return function (vNode) {
    __vNode = patch(__vNode, (0, _h2.default)('div', [vNode]));
  };
}

function registerElement(name, proto) {
  var prototype = (0, _extends3.default)((0, _create2.default)(HTMLElement.prototype), proto);
  document.registerElement(name, { prototype: prototype });
}

function registerMain(name, main) {
  var proto = createProto(function (component) {
    var __vNode = document.createElement('div');
    component.shadowRoot.appendChild(__vNode);
    return (0, _xstreamRun.run)(main, {
      DOM: function DOM(node$) {

        node$.addListener({
          next: function next(vNode) {
            return __vNode = patch(__vNode, (0, _h2.default)('div', [vNode]));
          },
          error: function error(err) {
            return console.error(err);
          },
          complete: function complete() {
            return console.log('completed');
          }
        });

        var select = function select(selector) {
          var events = function events(event) {
            return (0, _fromEvent2.default)(component.shadowRoot, event).filter(function (x) {
              return x.target.matches(selector);
            });
          };
          return { events: events };
        };
        var dispose = function dispose() {
          console.log('dispose');
        };
        return { select: select, dispose: dispose };
      }
    });
  });
  registerElement(name, proto);
}

function createProto(run) {
  var props = arguments.length <= 1 || arguments[1] === undefined ? [] : arguments[1];

  return {
    createdCallback: function createdCallback() {
      this.shadowRoot = this.attachShadow({ mode: 'open' });
      this.dispose = run(this);
    },
    __dispatchEvent: function __dispatchEvent(type, detail) {
      this.dispatchEvent(new CustomEvent(type, { detail: detail, bubbles: true }));
    },
    attributeChanged: function attributeChanged(name, o, value) {
      this.__dispatchEvent('@@rwc/attr/' + name, value);
    },
    attachedCallback: function attachedCallback() {
      this.__dispatchEvent('@@rwc/attached', this);
    },
    detachedCallback: function detachedCallback() {
      this.__dispatchEvent('@@rwc/detached', this);
      this.dispose();
    }
  };
}

function LargeButton(_ref) {
  var DOM = _ref.DOM;

  var change$ = _xstream2.default.merge(DOM.select('.inc').events('click').mapTo(1), DOM.select('.dec').events('click').mapTo(-1)).fold(function (a, b) {
    return a + b;
  }, 0);

  return {
    DOM: change$.map(function (count) {
      return (0, _h2.default)('div', [(0, _h2.default)('h1', [count.toString()]), (0, _h2.default)('button.inc', ['INC']), (0, _h2.default)('button.dec', ['DEC'])]);
    })
  };
}

setTimeout(function () {
  console.log('Timeout!');
  document.body.innerHTML = '';
}, 5000);

registerMain('large-button', LargeButton);
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>ESNextbin Sketch</title>
	<!-- put additional styles and scripts here -->
	</head>
	<body>
	<!-- put markup and other contents here -->
	<large-button></large-button>
	</body>
	</html>
	// write ES2015 code and import modules from npm
	// and then press "Execute" to run your program
	// write ES2015 code and import modules from npm
	// and then press "Execute" to run your program
	console.clear()
	import xs from 'xstream';
	import {run} from '@cycle/xstream-run';
	import snabbdom from 'snabbdom'
	import h from 'snabbdom/h'
	import fromEvent from 'xstream/extra/fromEvent'

	const patch = snabbdom.init([
	require('snabbdom/modules/class'),
	require('snabbdom/modules/props'),
	require('snabbdom/modules/style'),
	require('snabbdom/modules/eventlisteners')
	])

	function virtualDOMPatcher (shadowRoot) {
	// create wrapper element
	let __vNode = shadowRoot.appendChild(document.createElement('div'))
	return function (vNode) {
	__vNode = patch(__vNode, h('div', [vNode]))
	}
	}

	function registerElement (name, proto) {
	const prototype = Object.assign(Object.create(HTMLElement.prototype), proto)
	document.registerElement(name, {prototype})
	}

	function registerMain (name, main) {
	const proto = createProto(function (component) {
	var __vNode = document.createElement('div')
	component.shadowRoot.appendChild(__vNode)
	return run(main, {
	DOM: function (node$) {

	node$.addListener({
	next: vNode =>
	__vNode = patch(__vNode, h('div', [vNode])),
	error: err => console.error(err),
	complete: () => console.log('completed'),
	})

	const select = (selector) => {
	const events = (event) => {
	return fromEvent(component.shadowRoot, event)
	.filter(x => x.target.matches(selector))
	}
	return {events}
	}
	const dispose = () => {
	console.log('dispose')
	}
	return {select, dispose}
	}
	})
	})
	registerElement(name, proto)
	}

	function createProto (run, props = []) {
	return {
	createdCallback () {
	this.shadowRoot = this.attachShadow({mode: 'open'})
	this.dispose = run(this)
	},

	__dispatchEvent (type, detail) {
	this.dispatchEvent(new CustomEvent(type, {detail, bubbles: true}))
	},

	attributeChanged (name, o, value) {
	this.__dispatchEvent(`@@rwc/attr/${name}`, value)
	},

	attachedCallback () {
	this.__dispatchEvent(`@@rwc/attached`, this)
	},

	detachedCallback () {
	this.__dispatchEvent(`@@rwc/detached`, this)
	this.dispose()
	}
	}
	}

	function LargeButton ({DOM}) {
	const change$ = xs.merge(
	DOM.select('.inc').events('click').mapTo(1),
	DOM.select('.dec').events('click').mapTo(-1)
	).fold((a, b) => a + b, 0)

	return {
	DOM: change$.map(count =>
	(h('div', [
	h('h1', [count.toString()]),
	h('button.inc', ['INC']),
	h('button.dec', ['DEC'])
	]))
	)
	}
	}

	setTimeout(() => {
	console.log('Timeout!')
	document.body.innerHTML = ''
	}, 5000)

	registerMain('large-button', LargeButton)
	{
	"name": "rwc-observable-support",
	"dependencies": {
	"xstream": "6.3.2",
	"@cycle/xstream-run": "3.1.0",
	"snabbdom": "0.5.3",
	"babel-runtime": "6.11.6"
	},
	"version": "0.0.0"
	}
	'use strict';

	var _create = require('babel-runtime/core-js/object/create');

	var _create2 = _interopRequireDefault(_create);

	var _extends2 = require('babel-runtime/helpers/extends');

	var _extends3 = _interopRequireDefault(_extends2);

	var _xstream = require('xstream');

	var _xstream2 = _interopRequireDefault(_xstream);

	var _xstreamRun = require('@cycle/xstream-run');

	var _snabbdom = require('snabbdom');

	var _snabbdom2 = _interopRequireDefault(_snabbdom);

	var _h = require('snabbdom/h');

	var _h2 = _interopRequireDefault(_h);

	var _fromEvent = require('xstream/extra/fromEvent');

	var _fromEvent2 = _interopRequireDefault(_fromEvent);

	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

	// write ES2015 code and import modules from npm
	// and then press "Execute" to run your program
	// write ES2015 code and import modules from npm
	// and then press "Execute" to run your program
	console.clear();


	var patch = _snabbdom2.default.init([require('snabbdom/modules/class'), require('snabbdom/modules/props'), require('snabbdom/modules/style'), require('snabbdom/modules/eventlisteners')]);

	function virtualDOMPatcher(shadowRoot) {
	// create wrapper element
	var __vNode = shadowRoot.appendChild(document.createElement('div'));
	return function (vNode) {
	__vNode = patch(__vNode, (0, _h2.default)('div', [vNode]));
	};
	}

	function registerElement(name, proto) {
	var prototype = (0, _extends3.default)((0, _create2.default)(HTMLElement.prototype), proto);
	document.registerElement(name, { prototype: prototype });
	}

	function registerMain(name, main) {
	var proto = createProto(function (component) {
	var __vNode = document.createElement('div');
	component.shadowRoot.appendChild(__vNode);
	return (0, _xstreamRun.run)(main, {
	DOM: function DOM(node$) {

	node$.addListener({
	next: function next(vNode) {
	return __vNode = patch(__vNode, (0, _h2.default)('div', [vNode]));
	},
	error: function error(err) {
	return console.error(err);
	},
	complete: function complete() {
	return console.log('completed');
	}
	});

	var select = function select(selector) {
	var events = function events(event) {
	return (0, _fromEvent2.default)(component.shadowRoot, event).filter(function (x) {
	return x.target.matches(selector);
	});
	};
	return { events: events };
	};
	var dispose = function dispose() {
	console.log('dispose');
	};
	return { select: select, dispose: dispose };
	}
	});
	});
	registerElement(name, proto);
	}

	function createProto(run) {
	var props = arguments.length <= 1 \|\| arguments[1] === undefined ? [] : arguments[1];

	return {
	createdCallback: function createdCallback() {
	this.shadowRoot = this.attachShadow({ mode: 'open' });
	this.dispose = run(this);
	},
	__dispatchEvent: function __dispatchEvent(type, detail) {
	this.dispatchEvent(new CustomEvent(type, { detail: detail, bubbles: true }));
	},
	attributeChanged: function attributeChanged(name, o, value) {
	this.__dispatchEvent('@@rwc/attr/' + name, value);
	},
	attachedCallback: function attachedCallback() {
	this.__dispatchEvent('@@rwc/attached', this);
	},
	detachedCallback: function detachedCallback() {
	this.__dispatchEvent('@@rwc/detached', this);
	this.dispose();
	}
	};
	}

	function LargeButton(_ref) {
	var DOM = _ref.DOM;

	var change$ = _xstream2.default.merge(DOM.select('.inc').events('click').mapTo(1), DOM.select('.dec').events('click').mapTo(-1)).fold(function (a, b) {
	return a + b;
	}, 0);

	return {
	DOM: change$.map(function (count) {
	return (0, _h2.default)('div', [(0, _h2.default)('h1', [count.toString()]), (0, _h2.default)('button.inc', ['INC']), (0, _h2.default)('button.dec', ['DEC'])]);
	})
	};
	}

	setTimeout(function () {
	console.log('Timeout!');
	document.body.innerHTML = '';
	}, 5000);

	registerMain('large-button', LargeButton);