AutoSponge/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 -->
</body>
</html>

## index.js
// write ES2015 code and import modules from npm
// and then press "Execute" to run your program
// const yo = require('yo-yo')
var bel = require('bel') // turns template tag into DOM elements
var morphdom = require('morphdom') // efficiently diffs + morphs two DOM elements

const defaultEvents = [
  'onclick',
  'ondblclick',
  'onmousedown',
  'onmouseup',
  'onmouseover',
  'onmousemove',
  'onmouseout',
  'ondragstart',
  'ondrag',
  'ondragenter',
  'ondragleave',
  'ondragover',
  'ondrop',
  'ondragend',
  'onkeydown',
  'onkeypress',
  'onkeyup',
  'onunload',
  'onabort',
  'onerror',
  'onresize',
  'onscroll',
  'onselect',
  'onchange',
  'onsubmit',
  'onreset',
  'onfocus',
  'onblur',
  'oninput',
  // other common events
  'oncontextmenu',
  'onfocusin',
  'onfocusout'
]

const update = function (fromNode, toNode, opts) {
  if (!opts) opts = {}
  if (opts.events !== false) {
    if (!opts.onBeforeElUpdated) opts.onBeforeElUpdated = copier
  }

  return morphdom(fromNode, toNode, opts)

  // morphdom only copies attributes. we decided we also wanted to copy events
  // that can be set via attributes
  function copier (f, t) {
    // copy events:
    var events = opts.events || defaultEvents
    for (var i = 0; i < events.length; i++) {
      var ev = events[i]
      if (t[ev]) { // if new element has a whitelisted attribute
        f[ev] = t[ev] // update existing element
      } else if (f[ev]) { // if existing element has it and new one doesnt
        f[ev] = undefined // remove it from existing element
      }
    }
    // copy values for form elements
    if ((f.nodeName === 'INPUT' && f.type !== 'file') || f.nodeName === 'TEXTAREA' || f.nodeName === 'SELECT') {
      if (t.getAttribute('value') === null) f.value = t.value
    }
  }
}

function textarea (value) {
  return bel`<textarea>${value}</textarea>`
}
const el1 = textarea('foo')
document.body.appendChild(el1)
const el2 = textarea('')
update(el1, el2)

## package.json
{
  "name": "esnextbin-sketch",
  "version": "0.0.0",
  "dependencies": {
    "bel": "4.5.0",
    "morphdom": "2.1.2",
    "babel-runtime": "6.11.6"
  }
}

## transpiled.js
'use strict';

var _taggedTemplateLiteral2 = require('babel-runtime/helpers/taggedTemplateLiteral');

var _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2);

var _templateObject = (0, _taggedTemplateLiteral3.default)(['<textarea>', '</textarea>'], ['<textarea>', '</textarea>']);

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
// const yo = require('yo-yo')
var bel = require('bel'); // turns template tag into DOM elements
var morphdom = require('morphdom'); // efficiently diffs + morphs two DOM elements

var defaultEvents = ['onclick', 'ondblclick', 'onmousedown', 'onmouseup', 'onmouseover', 'onmousemove', 'onmouseout', 'ondragstart', 'ondrag', 'ondragenter', 'ondragleave', 'ondragover', 'ondrop', 'ondragend', 'onkeydown', 'onkeypress', 'onkeyup', 'onunload', 'onabort', 'onerror', 'onresize', 'onscroll', 'onselect', 'onchange', 'onsubmit', 'onreset', 'onfocus', 'onblur', 'oninput',
// other common events
'oncontextmenu', 'onfocusin', 'onfocusout'];

var update = function update(fromNode, toNode, opts) {
  if (!opts) opts = {};
  if (opts.events !== false) {
    if (!opts.onBeforeElUpdated) opts.onBeforeElUpdated = copier;
  }

  return morphdom(fromNode, toNode, opts);

  // morphdom only copies attributes. we decided we also wanted to copy events
  // that can be set via attributes
  function copier(f, t) {
    // copy events:
    var events = opts.events || defaultEvents;
    for (var i = 0; i < events.length; i++) {
      var ev = events[i];
      if (t[ev]) {
        // if new element has a whitelisted attribute
        f[ev] = t[ev]; // update existing element
      } else if (f[ev]) {
          // if existing element has it and new one doesnt
          f[ev] = undefined; // remove it from existing element
        }
    }
    // copy values for form elements
    if (f.nodeName === 'INPUT' && f.type !== 'file' || f.nodeName === 'TEXTAREA' || f.nodeName === 'SELECT') {
      if (t.getAttribute('value') === null) f.value = t.value;
    }
  }
};

function textarea(value) {
  return bel(_templateObject, value);
}
var el1 = textarea('foo');
document.body.appendChild(el1);
var el2 = textarea('');
update(el1, el2);
	<!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 -->
	</body>
	</html>
	// write ES2015 code and import modules from npm
	// and then press "Execute" to run your program
	// const yo = require('yo-yo')
	var bel = require('bel') // turns template tag into DOM elements
	var morphdom = require('morphdom') // efficiently diffs + morphs two DOM elements

	const defaultEvents = [
	'onclick',
	'ondblclick',
	'onmousedown',
	'onmouseup',
	'onmouseover',
	'onmousemove',
	'onmouseout',
	'ondragstart',
	'ondrag',
	'ondragenter',
	'ondragleave',
	'ondragover',
	'ondrop',
	'ondragend',
	'onkeydown',
	'onkeypress',
	'onkeyup',
	'onunload',
	'onabort',
	'onerror',
	'onresize',
	'onscroll',
	'onselect',
	'onchange',
	'onsubmit',
	'onreset',
	'onfocus',
	'onblur',
	'oninput',
	// other common events
	'oncontextmenu',
	'onfocusin',
	'onfocusout'
	]

	const update = function (fromNode, toNode, opts) {
	if (!opts) opts = {}
	if (opts.events !== false) {
	if (!opts.onBeforeElUpdated) opts.onBeforeElUpdated = copier
	}

	return morphdom(fromNode, toNode, opts)

	// morphdom only copies attributes. we decided we also wanted to copy events
	// that can be set via attributes
	function copier (f, t) {
	// copy events:
	var events = opts.events \|\| defaultEvents
	for (var i = 0; i < events.length; i++) {
	var ev = events[i]
	if (t[ev]) { // if new element has a whitelisted attribute
	f[ev] = t[ev] // update existing element
	} else if (f[ev]) { // if existing element has it and new one doesnt
	f[ev] = undefined // remove it from existing element
	}
	}
	// copy values for form elements
	if ((f.nodeName === 'INPUT' && f.type !== 'file') \|\| f.nodeName === 'TEXTAREA' \|\| f.nodeName === 'SELECT') {
	if (t.getAttribute('value') === null) f.value = t.value
	}
	}
	}

	function textarea (value) {
	return bel`<textarea>${value}</textarea>`
	}
	const el1 = textarea('foo')
	document.body.appendChild(el1)
	const el2 = textarea('')
	update(el1, el2)
	{
	"name": "esnextbin-sketch",
	"version": "0.0.0",
	"dependencies": {
	"bel": "4.5.0",
	"morphdom": "2.1.2",
	"babel-runtime": "6.11.6"
	}
	}
	'use strict';

	var _taggedTemplateLiteral2 = require('babel-runtime/helpers/taggedTemplateLiteral');

	var _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2);

	var _templateObject = (0, _taggedTemplateLiteral3.default)(['<textarea>', '</textarea>'], ['<textarea>', '</textarea>']);

	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
	// const yo = require('yo-yo')
	var bel = require('bel'); // turns template tag into DOM elements
	var morphdom = require('morphdom'); // efficiently diffs + morphs two DOM elements

	var defaultEvents = ['onclick', 'ondblclick', 'onmousedown', 'onmouseup', 'onmouseover', 'onmousemove', 'onmouseout', 'ondragstart', 'ondrag', 'ondragenter', 'ondragleave', 'ondragover', 'ondrop', 'ondragend', 'onkeydown', 'onkeypress', 'onkeyup', 'onunload', 'onabort', 'onerror', 'onresize', 'onscroll', 'onselect', 'onchange', 'onsubmit', 'onreset', 'onfocus', 'onblur', 'oninput',
	// other common events
	'oncontextmenu', 'onfocusin', 'onfocusout'];

	var update = function update(fromNode, toNode, opts) {
	if (!opts) opts = {};
	if (opts.events !== false) {
	if (!opts.onBeforeElUpdated) opts.onBeforeElUpdated = copier;
	}

	return morphdom(fromNode, toNode, opts);

	// morphdom only copies attributes. we decided we also wanted to copy events
	// that can be set via attributes
	function copier(f, t) {
	// copy events:
	var events = opts.events \|\| defaultEvents;
	for (var i = 0; i < events.length; i++) {
	var ev = events[i];
	if (t[ev]) {
	// if new element has a whitelisted attribute
	f[ev] = t[ev]; // update existing element
	} else if (f[ev]) {
	// if existing element has it and new one doesnt
	f[ev] = undefined; // remove it from existing element
	}
	}
	// copy values for form elements
	if (f.nodeName === 'INPUT' && f.type !== 'file' \|\| f.nodeName === 'TEXTAREA' \|\| f.nodeName === 'SELECT') {
	if (t.getAttribute('value') === null) f.value = t.value;
	}
	}
	};

	function textarea(value) {
	return bel(_templateObject, value);
	}
	var el1 = textarea('foo');
	document.body.appendChild(el1);
	var el2 = textarea('');
	update(el1, el2);