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 -->
  <app>

    <x-custom-button></x-custom-button>
  </app>
</body>
</html>

## index.js
// write ES2015 code and import modules from npm
// and then press "Execute" to run your program
console.clear()
import {Observable as O} from 'rx'
import h from 'snabbdom/h'
import hh from 'hyperscript'
import snabbdom from 'snabbdom'
var patch = snabbdom.init([ // Init patch function with choosen modules
  require('snabbdom/modules/class'), // makes it easy to toggle classes
  require('snabbdom/modules/props'), // for setting properties on DOM elements
  require('snabbdom/modules/style'), // handles styling on elements with support for animations
  require('snabbdom/modules/eventlisteners'), // attaches event listeners
]);

class CustomButton extends HTMLElement {
 createdCallback () {
   this.root = this.attachShadow({mode: 'open'})
 }

 view () {

 }

 attachedCallback () {

 }

 attributeChangedCallback () {


 }

 detachedCallback () {

 }
}

document.registerElement('x-custom-button', CustomButton)

## package.json
{
  "name": "rwc-observable-support",
  "dependencies": {
    "rx": "4.1.0",
    "hyperscript": "2.0.2",
    "snabbdom": "0.5.3",
    "babel-runtime": "6.11.6"
  },
  "version": "0.0.0"
}

## transpiled.js
'use strict';

var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _rx = require('rx');

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

var _h2 = _interopRequireDefault(_h);

var _hyperscript = require('hyperscript');

var _hyperscript2 = _interopRequireDefault(_hyperscript);

var _snabbdom = require('snabbdom');

var _snabbdom2 = _interopRequireDefault(_snabbdom);

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
console.clear();

var patch = _snabbdom2.default.init([// Init patch function with choosen modules
require('snabbdom/modules/class'), // makes it easy to toggle classes
require('snabbdom/modules/props'), // for setting properties on DOM elements
require('snabbdom/modules/style'), // handles styling on elements with support for animations
require('snabbdom/modules/eventlisteners')]);

// attaches event listeners

var CustomButton = function (_HTMLElement) {
  (0, _inherits3.default)(CustomButton, _HTMLElement);

  function CustomButton() {
    (0, _classCallCheck3.default)(this, CustomButton);
    return (0, _possibleConstructorReturn3.default)(this, (0, _getPrototypeOf2.default)(CustomButton).apply(this, arguments));
  }

  (0, _createClass3.default)(CustomButton, [{
    key: 'createdCallback',
    value: function createdCallback() {
      this.root = this.attachShadow({ mode: 'open' });
    }
  }, {
    key: 'view',
    value: function view() {}
  }, {
    key: 'attachedCallback',
    value: function attachedCallback() {}
  }, {
    key: 'attributeChangedCallback',
    value: function attributeChangedCallback() {}
  }, {
    key: 'detachedCallback',
    value: function detachedCallback() {}
  }]);
  return CustomButton;
}(HTMLElement);

document.registerElement('x-custom-button', CustomButton);
	<!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 -->
	<app>

	<x-custom-button></x-custom-button>
	</app>
	</body>
	</html>
	// write ES2015 code and import modules from npm
	// and then press "Execute" to run your program
	console.clear()
	import {Observable as O} from 'rx'
	import h from 'snabbdom/h'
	import hh from 'hyperscript'
	import snabbdom from 'snabbdom'
	var patch = snabbdom.init([ // Init patch function with choosen modules
	require('snabbdom/modules/class'), // makes it easy to toggle classes
	require('snabbdom/modules/props'), // for setting properties on DOM elements
	require('snabbdom/modules/style'), // handles styling on elements with support for animations
	require('snabbdom/modules/eventlisteners'), // attaches event listeners
	]);

	class CustomButton extends HTMLElement {
	createdCallback () {
	this.root = this.attachShadow({mode: 'open'})
	}

	view () {

	}

	attachedCallback () {

	}

	attributeChangedCallback () {


	}

	detachedCallback () {

	}
	}

	document.registerElement('x-custom-button', CustomButton)
	{
	"name": "rwc-observable-support",
	"dependencies": {
	"rx": "4.1.0",
	"hyperscript": "2.0.2",
	"snabbdom": "0.5.3",
	"babel-runtime": "6.11.6"
	},
	"version": "0.0.0"
	}
	'use strict';

	var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

	var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

	var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

	var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

	var _createClass2 = require('babel-runtime/helpers/createClass');

	var _createClass3 = _interopRequireDefault(_createClass2);

	var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

	var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

	var _inherits2 = require('babel-runtime/helpers/inherits');

	var _inherits3 = _interopRequireDefault(_inherits2);

	var _rx = require('rx');

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

	var _h2 = _interopRequireDefault(_h);

	var _hyperscript = require('hyperscript');

	var _hyperscript2 = _interopRequireDefault(_hyperscript);

	var _snabbdom = require('snabbdom');

	var _snabbdom2 = _interopRequireDefault(_snabbdom);

	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
	console.clear();

	var patch = _snabbdom2.default.init([// Init patch function with choosen modules
	require('snabbdom/modules/class'), // makes it easy to toggle classes
	require('snabbdom/modules/props'), // for setting properties on DOM elements
	require('snabbdom/modules/style'), // handles styling on elements with support for animations
	require('snabbdom/modules/eventlisteners')]);

	// attaches event listeners

	var CustomButton = function (_HTMLElement) {
	(0, _inherits3.default)(CustomButton, _HTMLElement);

	function CustomButton() {
	(0, _classCallCheck3.default)(this, CustomButton);
	return (0, _possibleConstructorReturn3.default)(this, (0, _getPrototypeOf2.default)(CustomButton).apply(this, arguments));
	}

	(0, _createClass3.default)(CustomButton, [{
	key: 'createdCallback',
	value: function createdCallback() {
	this.root = this.attachShadow({ mode: 'open' });
	}
	}, {
	key: 'view',
	value: function view() {}
	}, {
	key: 'attachedCallback',
	value: function attachedCallback() {}
	}, {
	key: 'attributeChangedCallback',
	value: function attributeChangedCallback() {}
	}, {
	key: 'detachedCallback',
	value: function detachedCallback() {}
	}]);
	return CustomButton;
	}(HTMLElement);

	document.registerElement('x-custom-button', CustomButton);