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 -->
  <x-component>
    <div slot="title">This is a test of Everything</div>
  </x-component>
</body>
</html>

## index.js
// write ES2015 code and import modules from npm
// and then press "Execute" to run your program

import h from 'hyperscript'

const proto = {
  createdCallback () {
    console.log('hi')
    const root = this.attachShadow({mode: 'open'})
    const view = h('div',
      h('slot', {attrs: {name: 'title'}})
    )
    console.log(view)
    root.appendChild(view)
  }
}
const html = Object.create(HTMLElement.prototype)

// extend html element with the created prototype
const prototype = Object.assign(html, proto)

document.registerElement('x-component', {prototype})

## package.json
{
  "name": "esnextbin-sketch",
  "dependencies": {
    "hyperscript": "2.0.2",
    "babel-runtime": "6.11.6"
  },
  "version": "0.0.0"
}

## transpiled.js
'use strict';

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

var _extends3 = _interopRequireDefault(_extends2);

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

var _create2 = _interopRequireDefault(_create);

var _hyperscript = require('hyperscript');

var _hyperscript2 = _interopRequireDefault(_hyperscript);

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

var proto = {
  createdCallback: function createdCallback() {
    console.log('hi');
    var root = this.attachShadow({ mode: 'open' });
    var view = (0, _hyperscript2.default)('div', (0, _hyperscript2.default)('slot', { attrs: { name: 'title' } }));
    console.log(view);
    root.appendChild(view);
  }
}; // write ES2015 code and import modules from npm
// and then press "Execute" to run your program

var html = (0, _create2.default)(HTMLElement.prototype);

// extend html element with the created prototype
var prototype = (0, _extends3.default)(html, proto);

document.registerElement('x-component', { prototype: prototype });
	<!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 -->
	<x-component>
	<div slot="title">This is a test of Everything</div>
	</x-component>
	</body>
	</html>
	// write ES2015 code and import modules from npm
	// and then press "Execute" to run your program

	import h from 'hyperscript'

	const proto = {
	createdCallback () {
	console.log('hi')
	const root = this.attachShadow({mode: 'open'})
	const view = h('div',
	h('slot', {attrs: {name: 'title'}})
	)
	console.log(view)
	root.appendChild(view)
	}
	}
	const html = Object.create(HTMLElement.prototype)

	// extend html element with the created prototype
	const prototype = Object.assign(html, proto)

	document.registerElement('x-component', {prototype})
	{
	"name": "esnextbin-sketch",
	"dependencies": {
	"hyperscript": "2.0.2",
	"babel-runtime": "6.11.6"
	},
	"version": "0.0.0"
	}
	'use strict';

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

	var _extends3 = _interopRequireDefault(_extends2);

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

	var _create2 = _interopRequireDefault(_create);

	var _hyperscript = require('hyperscript');

	var _hyperscript2 = _interopRequireDefault(_hyperscript);

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

	var proto = {
	createdCallback: function createdCallback() {
	console.log('hi');
	var root = this.attachShadow({ mode: 'open' });
	var view = (0, _hyperscript2.default)('div', (0, _hyperscript2.default)('slot', { attrs: { name: 'title' } }));
	console.log(view);
	root.appendChild(view);
	}
	}; // write ES2015 code and import modules from npm
	// and then press "Execute" to run your program

	var html = (0, _create2.default)(HTMLElement.prototype);

	// extend html element with the created prototype
	var prototype = (0, _extends3.default)(html, proto);

	document.registerElement('x-component', { prototype: prototype });