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 {makeDOMDriver, h} from '@cycle/dom';

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) {
    const wrapper = document.createElement('div')
    component.shadowRoot.appendChild(wrapper)
    return run(main, {
      DOM: makeDOMDriver(wrapper)
    })
  })
  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('.inc').events('click').mapTo(-1)
  ).fold((a, b) => a + b, 0)
   .debug(x => console.log(x))

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

registerMain('large-button', LargeButton)

## package.json
{
  "name": "rwc-observable-support",
  "dependencies": {
    "xstream": "6.3.2",
    "@cycle/xstream-run": "3.1.0",
    "@cycle/dom": "12.2.5",
    "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 _dom = require('@cycle/dom');

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();


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 wrapper = document.createElement('div');
    component.shadowRoot.appendChild(wrapper);
    return (0, _xstreamRun.run)(main, {
      DOM: (0, _dom.makeDOMDriver)(wrapper)
    });
  });
  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('.inc').events('click').mapTo(-1)).fold(function (a, b) {
    return a + b;
  }, 0).debug(function (x) {
    return console.log(x);
  });

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

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 {makeDOMDriver, h} from '@cycle/dom';

	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) {
	const wrapper = document.createElement('div')
	component.shadowRoot.appendChild(wrapper)
	return run(main, {
	DOM: makeDOMDriver(wrapper)
	})
	})
	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('.inc').events('click').mapTo(-1)
	).fold((a, b) => a + b, 0)
	.debug(x => console.log(x))

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

	registerMain('large-button', LargeButton)
	{
	"name": "rwc-observable-support",
	"dependencies": {
	"xstream": "6.3.2",
	"@cycle/xstream-run": "3.1.0",
	"@cycle/dom": "12.2.5",
	"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 _dom = require('@cycle/dom');

	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();


	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 wrapper = document.createElement('div');
	component.shadowRoot.appendChild(wrapper);
	return (0, _xstreamRun.run)(main, {
	DOM: (0, _dom.makeDOMDriver)(wrapper)
	});
	});
	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('.inc').events('click').mapTo(-1)).fold(function (a, b) {
	return a + b;
	}, 0).debug(function (x) {
	return console.log(x);
	});

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

	registerMain('large-button', LargeButton);