requirebin sketch

index.js

var IncrementalDOM = require('incremental-dom'),
    elementOpen = IncrementalDOM.elementOpen,
    elementClose = IncrementalDOM.elementClose,
    elementVoid = IncrementalDOM.elementVoid,
    text = IncrementalDOM.text,
    patch = IncrementalDOM.patch;

function render(data) {
  elementOpen('p');
  	text('The input in this form loses focus when you press ENTER because of ');
  	elementOpen('a', '', [ 'href', 'https://github.com/google/incremental-dom/blob/cb946099aa25196e369d6c3d9b94dddbe0837ffc/src/core.js#L220' ]);
    	text('this line of code');
  	elementClose('a');
  elementClose('p');
  form(data, list.bind(null, 'div'));
  elementVoid('hr');
  elementOpen('p');
  	text('The input in this form does not lose focus because it is not a sibling of a node with a key that gets mutated.');
  elementClose('p');
  form(data, function(values) {
    elementOpen('ul', 'list');
    	list('li', values);
    elementClose('ul');
  });
}

function list(nodeName, values) {
  values.forEach(function(value) {
    elementOpen(nodeName, value.key);
	    text(value.text);
    elementClose(nodeName);
  });
}

function form(data, list) {
  elementOpen('form');
    list(data.values);
  	elementVoid('input', 'input', [ 'type', 'text', 'name', 'userinput', 'placeholder', 'enter a value' ]);
  	elementVoid('input', '', [ 'type', 'submit', 'value', 'Add' ]);
  elementClose('form');
}
  
var data = {
  values: []
};

document.documentElement.addEventListener('submit', function(e) {
  e.preventDefault();
  var form = e.target;
  var input = form.elements.userinput;
  data.values.push({ 
    key: String(Date.now()), 
    text: input.value
  });
  form.reset();
  draw(data);
});

document.documentElement.addEventListener('blur', function(e) {
  if (e.target.name === 'userinput') {
    console.log('input blurred!');
  }
}, true);

function draw(data) {
  patch(document.body, render.bind(null, data));
}
draw(data);

minified.js

setTimeout(function(){require=function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}({"incremental-dom":[function(require,module,exports){"use strict";var hasOwnProperty=Object.prototype.hasOwnProperty;var create=Object.create;var has=function(map,property){return hasOwnProperty.call(map,property)};var createMap=function(){return create(null)};function NodeData(nodeName,key){this.attrs=createMap();this.attrsArr=[];this.newAttrs=createMap();this.key=key;this.keyMap=null;this.keyMapValid=true;this.nodeName=nodeName;this.text=null}var initData=function(node,nodeName,key){var data=new NodeData(nodeName,key);node["__incrementalDOMData"]=data;return data};var getData=function(node){var data=node["__incrementalDOMData"];if(!data){var nodeName=node.nodeName.toLowerCase();var key=null;if(node instanceof Element){key=node.getAttribute("key")}data=initData(node,nodeName,key)}return data};var symbols={"default":"__default",placeholder:"__placeholder"};var getNamespace=function(name){if(name.lastIndexOf("xml:",0)===0){return"http://www.w3.org/XML/1998/namespace"}if(name.lastIndexOf("xlink:",0)===0){return"http://www.w3.org/1999/xlink"}};var applyAttr=function(el,name,value){if(value==null){el.removeAttribute(name)}else{var attrNS=getNamespace(name);if(attrNS){el.setAttributeNS(attrNS,name,value)}else{el.setAttribute(name,value)}}};var applyProp=function(el,name,value){el[name]=value};var applyStyle=function(el,name,style){if(typeof style==="string"){el.style.cssText=style}else{el.style.cssText="";var elStyle=el.style;var obj=style;for(var prop in obj){if(has(obj,prop)){elStyle[prop]=obj[prop]}}}};var applyAttributeTyped=function(el,name,value){var type=typeof value;if(type==="object"||type==="function"){applyProp(el,name,value)}else{applyAttr(el,name,value)}};var updateAttribute=function(el,name,value){var data=getData(el);var attrs=data.attrs;if(attrs[name]===value){return}var mutator=attributes[name]||attributes[symbols.default];mutator(el,name,value);attrs[name]=value};var attributes=createMap();attributes[symbols.default]=applyAttributeTyped;attributes[symbols.placeholder]=function(){};attributes["style"]=applyStyle;var getNamespaceForTag=function(tag,parent){if(tag==="svg"){return"http://www.w3.org/2000/svg"}if(getData(parent).nodeName==="foreignObject"){return null}return parent.namespaceURI};var createElement=function(doc,parent,tag,key,statics){var namespace=getNamespaceForTag(tag,parent);var el=undefined;if(namespace){el=doc.createElementNS(namespace,tag)}else{el=doc.createElement(tag)}initData(el,tag,key);if(statics){for(var i=0;i<statics.length;i+=2){updateAttribute(el,statics[i],statics[i+1])}}return el};var createText=function(doc){var node=doc.createTextNode("");initData(node,"#text",null);return node};var createKeyMap=function(el){var map=createMap();var child=el.firstElementChild;while(child){var key=getData(child).key;if(key){map[key]=child}child=child.nextElementSibling}return map};var getKeyMap=function(el){var data=getData(el);if(!data.keyMap){data.keyMap=createKeyMap(el)}return data.keyMap};var getChild=function(parent,key){return key?getKeyMap(parent)[key]:null};var registerChild=function(parent,key,child){getKeyMap(parent)[key]=child};var notifications={nodesCreated:null,nodesDeleted:null};function Context(){this.created=notifications.nodesCreated&&[];this.deleted=notifications.nodesDeleted&&[]}Context.prototype.markCreated=function(node){if(this.created){this.created.push(node)}};Context.prototype.markDeleted=function(node){if(this.deleted){this.deleted.push(node)}};Context.prototype.notifyChanges=function(){if(this.created&&this.created.length>0){notifications.nodesCreated(this.created)}if(this.deleted&&this.deleted.length>0){notifications.nodesDeleted(this.deleted)}};var assertKeyedTagMatches=function(nodeName,tag,key){if(nodeName!==tag){throw new Error('Was expecting node with key "'+key+'" to be a '+tag+", not a "+nodeName+".")}};var context=null;var currentNode=null;var currentParent=null;var root=null;var doc=null;var patchFactory=function(run){var f=function(node,fn,data){var prevContext=context;var prevRoot=root;var prevDoc=doc;var prevCurrentNode=currentNode;var prevCurrentParent=currentParent;var previousInAttributes=false;var previousInSkip=false;context=new Context;root=node;doc=node.ownerDocument;currentParent=node.parentNode;if("production"!=="production"){}run(node,fn,data);if("production"!=="production"){}context.notifyChanges();context=prevContext;root=prevRoot;doc=prevDoc;currentNode=prevCurrentNode;currentParent=prevCurrentParent};return f};var patchInner=patchFactory(function(node,fn,data){currentNode=node;enterNode();fn(data);exitNode();if("production"!=="production"){}});var patchOuter=patchFactory(function(node,fn,data){currentNode={nextSibling:node};fn(data);if("production"!=="production"){}});var matches=function(nodeName,key){var data=getData(currentNode);return nodeName===data.nodeName&&key==data.key};var alignWithDOM=function(nodeName,key,statics){if(currentNode&&matches(nodeName,key)){return}var node=undefined;if(key){node=getChild(currentParent,key);if(node&&"production"!=="production"){assertKeyedTagMatches(getData(node).nodeName,nodeName,key)}}if(!node){if(nodeName==="#text"){node=createText(doc)}else{node=createElement(doc,currentParent,nodeName,key,statics)}if(key){registerChild(currentParent,key,node)}context.markCreated(node)}if(currentNode&&getData(currentNode).key){currentParent.replaceChild(node,currentNode);getData(currentParent).keyMapValid=false}else{currentParent.insertBefore(node,currentNode)}currentNode=node};var clearUnvisitedDOM=function(){var node=currentParent;var data=getData(node);var keyMap=data.keyMap;var keyMapValid=data.keyMapValid;var child=node.lastChild;var key=undefined;if(child===currentNode&&keyMapValid){return}if(data.attrs[symbols.placeholder]&&node!==root){if("production"!=="production"){}return}while(child!==currentNode){node.removeChild(child);context.markDeleted(child);key=getData(child).key;if(key){delete keyMap[key]}child=node.lastChild}if(!keyMapValid){for(key in keyMap){child=keyMap[key];if(child.parentNode!==node){context.markDeleted(child);delete keyMap[key]}}data.keyMapValid=true}};var enterNode=function(){currentParent=currentNode;currentNode=null};var nextNode=function(){if(currentNode){currentNode=currentNode.nextSibling}else{currentNode=currentParent.firstChild}};var exitNode=function(){clearUnvisitedDOM();currentNode=currentParent;currentParent=currentParent.parentNode};var coreElementOpen=function(tag,key,statics){nextNode();alignWithDOM(tag,key,statics);enterNode();return currentParent};var coreElementClose=function(){if("production"!=="production"){}exitNode();return currentNode};var coreText=function(){nextNode();alignWithDOM("#text",null,null);return currentNode};var currentElement=function(){if("production"!=="production"){}return currentParent};var skip=function(){if("production"!=="production"){}currentNode=currentParent.lastChild};var ATTRIBUTES_OFFSET=3;var argsBuilder=[];var elementOpen=function(tag,key,statics,const_args){if("production"!=="production"){}var node=coreElementOpen(tag,key,statics);var data=getData(node);var attrsArr=data.attrsArr;var newAttrs=data.newAttrs;var attrsChanged=false;var i=ATTRIBUTES_OFFSET;var j=0;for(;i<arguments.length;i+=1,j+=1){if(attrsArr[j]!==arguments[i]){attrsChanged=true;break}}for(;i<arguments.length;i+=1,j+=1){attrsArr[j]=arguments[i]}if(j<attrsArr.length){attrsChanged=true;attrsArr.length=j}if(attrsChanged){for(i=ATTRIBUTES_OFFSET;i<arguments.length;i+=2){newAttrs[arguments[i]]=arguments[i+1]}for(var _attr in newAttrs){updateAttribute(node,_attr,newAttrs[_attr]);newAttrs[_attr]=undefined}}return node};var elementOpenStart=function(tag,key,statics){if("production"!=="production"){}argsBuilder[0]=tag;argsBuilder[1]=key;argsBuilder[2]=statics};var attr=function(name,value){if("production"!=="production"){}argsBuilder.push(name,value)};var elementOpenEnd=function(){if("production"!=="production"){}var node=elementOpen.apply(null,argsBuilder);argsBuilder.length=0;return node};var elementClose=function(tag){if("production"!=="production"){}var node=coreElementClose();if("production"!=="production"){}return node};var elementVoid=function(tag,key,statics,const_args){elementOpen.apply(null,arguments);return elementClose(tag)};var elementPlaceholder=function(tag,key,statics,const_args){if("production"!=="production"){}elementOpen.apply(null,arguments);skip();return elementClose(tag)};var text=function(value,const_args){if("production"!=="production"){}var node=coreText();var data=getData(node);if(data.text!==value){data.text=value;var formatted=value;for(var i=1;i<arguments.length;i+=1){var fn=arguments[i];formatted=fn(formatted)}node.data=formatted}return node};exports.patch=patchInner;exports.patchInner=patchInner;exports.patchOuter=patchOuter;exports.currentElement=currentElement;exports.skip=skip;exports.elementVoid=elementVoid;exports.elementOpenStart=elementOpenStart;exports.elementOpenEnd=elementOpenEnd;exports.elementOpen=elementOpen;exports.elementClose=elementClose;exports.elementPlaceholder=elementPlaceholder;exports.text=text;exports.attr=attr;exports.symbols=symbols;exports.attributes=attributes;exports.applyAttr=applyAttr;exports.applyProp=applyProp;exports.notifications=notifications},{}]},{},[]);var IncrementalDOM=require("incremental-dom"),elementOpen=IncrementalDOM.elementOpen,elementClose=IncrementalDOM.elementClose,elementVoid=IncrementalDOM.elementVoid,text=IncrementalDOM.text,patch=IncrementalDOM.patch;function render(data){elementOpen("p");text("The input in this form loses focus when you press ENTER because of ");elementOpen("a","",["href","https://github.com/google/incremental-dom/blob/cb946099aa25196e369d6c3d9b94dddbe0837ffc/src/core.js#L220"]);text("this line of code");elementClose("a");elementClose("p");form(data,list.bind(null,"div"));elementVoid("hr");elementOpen("p");text("The input in this form does not lose focus because it is not a sibling of a node with a key that gets mutated.");elementClose("p");form(data,function(values){elementOpen("ul","list");list("li",values);elementClose("ul")})}function list(nodeName,values){values.forEach(function(value){elementOpen(nodeName,value.key);text(value.text);elementClose(nodeName)})}function form(data,list){elementOpen("form");list(data.values);elementVoid("input","input",["type","text","name","userinput","placeholder","enter a value"]);elementVoid("input","",["type","submit","value","Add"]);elementClose("form")}var data={values:[]};document.documentElement.addEventListener("submit",function(e){e.preventDefault();var form=e.target;var input=form.elements.userinput;data.values.push({key:String(Date.now()),text:input.value});form.reset();draw(data)});document.documentElement.addEventListener("blur",function(e){if(e.target.name==="userinput"){console.log("input blurred!")}},true);function draw(data){patch(document.body,render.bind(null,data))}draw(data)},0);

package.json

{
  "name": "requirebin-sketch",
  "version": "1.0.0",
  "dependencies": {
    "incremental-dom": "0.4.1"
  }
}

page-body.html

<!-- contents of this file will be placed inside the <body> -->

page-head.html

<!-- contents of this file will be placed inside the <head> -->

requirebin.md

made with requirebin