requirebin sketch

index.js

var mercury = require("mercury")
var h = mercury.h
var nextTick = require('next-tick')
var rnd_str = require('random-string')

var events = {
  addItem: mercury.input(),
  removeItem: mercury.input()
};

var state = mercury.struct({
  events: events,
  items: mercury.array([Item(rnd_str({length: 10}))])
});

events.addItem(function() {
	state.items.push(Item(rnd_str({length: 10})));
});

function removeItem(item) {
  var index_to_remove;
  state.items.map(function(a_item, i) {
  	if(a_item.desc() === item.desc) index_to_remove = i;
  })
	console.log(index_to_remove);
  state.items.splice(index_to_remove, 1);
}

function Item(desc) {
  var state = mercury.struct({
    desc: mercury.value(desc)
  });

  return state;
}

Item.render = function(state) {
  var removing = false;
  
  return h('li', {
    'class' : new ItemInsertHook('item tr'),
    'ev-transitionend' : function(ev) {
      var item_dom = ev.target;
      if (removing) {
        removing = false;
      	removeItem(state);        
        item_dom.classList.remove('tr');
        item_dom.classList.remove('opaque');
        nextTick(function() {
	        item_dom.classList.add('tr');
        }) 
      }      
    }
  }, [
    h('button.remove', {
      'ev-click' : function(ev) {
        removing = true;
				var item_dom = ev.target.parentNode;
        item_dom.classList.add('opaque');
      },
    }, 'Remove'),
    h('div.desc', state.desc),
  ]);
}
    
function ItemInsertHook(value) {
    this.value = value;
}
    
ItemInsertHook.prototype.hook = function(elem, propName) {
  if (!elem.childNodes.length) {
    elem.setAttribute(propName, this.value + ' opaque');

    nextTick(function () {
      elem.setAttribute(propName, this.value + '');
    }.bind(this))
  }
}

function renderItemsList(state) {  
  return h('ul#item-list', [
    state.items.map(function(item) {return Item.render(item);})
  ]);
}

function render(state) {
  
	return h('#main', [
    h('button', {
      'ev-click' : mercury.event(state.events.addItem)
    }, 'Add item'),
    renderItemsList(state)
  ]);
}

mercury.app(document.body, state, render);

var del = mercury.Delegator();
del.listenTo('transitionend');

var insertCSS = require('insert-css')

var css = 'label {display: block}\n';
css += 'ul {list-style-type: none;}\n';
css += 'li.item {max-width: 300px; height: 30px;' 
    + 'border-radius: 2px;'
    + 'box-shadow: 0 1px 1px #ccc;'
    + 'padding: 0.7em; margin: 0 0 5px}\n';
css += 'li.item.opaque {opacity : 0.01; transform: translateZ(0);}\n';
css += 'li.item.tr {transition: opacity 0.75s ease-in-out;}\n';
css += 'li.item {opacity : 0.99; transform: translateZ(0);}\n';
css += 'li.item .remove {float: right;}\n';
insertCSS(css);

minified.js

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);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.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}({1:[function(require,module,exports){},{}],mercury:[function(require,module,exports){module.exports=require("MNaJAE")},{}],MNaJAE:[function(require,module,exports){var SingleEvent=require("geval/single");var MultipleEvent=require("geval/multiple");var mercury=module.exports={main:require("main-loop"),app:app,Delegator:require("dom-delegator"),input:input,event:require("value-event/event"),valueEvent:require("value-event/value"),submitEvent:require("value-event/submit"),changeEvent:require("value-event/change"),keyEvent:require("value-event/key"),array:require("observ-array"),struct:require("observ-struct"),hash:require("observ-struct"),varhash:require("observ-varhash"),value:require("observ"),diff:require("virtual-dom/diff"),patch:require("virtual-dom/patch"),partial:require("vdom-thunk"),create:require("virtual-dom/create-element"),h:require("virtual-hyperscript"),svg:require("virtual-hyperscript/svg"),computed:require("observ/computed"),watch:require("observ/watch")};function input(names){if(!names){return SingleEvent()}return MultipleEvent(names)}function app(elem,observ,render,opts){mercury.Delegator(opts);var loop=mercury.main(observ(),render,opts);if(elem){elem.appendChild(loop.target)}return observ(loop.update)}},{"dom-delegator":6,"geval/multiple":18,"geval/single":19,"main-loop":20,observ:33,"observ-array":24,"observ-struct":27,"observ-varhash":30,"observ/computed":32,"observ/watch":34,"value-event/change":35,"value-event/event":36,"value-event/key":37,"value-event/submit":43,"value-event/value":44,"vdom-thunk":45,"virtual-dom/create-element":46,"virtual-dom/diff":47,"virtual-dom/patch":51,"virtual-hyperscript":71,"virtual-hyperscript/svg":78}],4:[function(require,module,exports){var DataSet=require("data-set");module.exports=addEvent;function addEvent(target,type,handler){var ds=DataSet(target);var events=ds[type];if(!events){ds[type]=handler}else if(Array.isArray(events)){if(events.indexOf(handler)===-1){events.push(handler)}}else if(events!==handler){ds[type]=[events,handler]}}},{"data-set":9}],5:[function(require,module,exports){var globalDocument=require("global/document");var DataSet=require("data-set");var addEvent=require("./add-event.js");var removeEvent=require("./remove-event.js");var ProxyEvent=require("./proxy-event.js");module.exports=DOMDelegator;function DOMDelegator(document){document=document||globalDocument;this.target=document.documentElement;this.events={};this.rawEventListeners={};this.globalListeners={}}DOMDelegator.prototype.addEventListener=addEvent;DOMDelegator.prototype.removeEventListener=removeEvent;DOMDelegator.prototype.addGlobalEventListener=function addGlobalEventListener(eventName,fn){var listeners=this.globalListeners[eventName];if(!listeners){listeners=this.globalListeners[eventName]=[]}if(listeners.indexOf(fn)===-1){listeners.push(fn)}};DOMDelegator.prototype.removeGlobalEventListener=function removeGlobalEventListener(eventName,fn){var listeners=this.globalListeners[eventName];if(!listeners){return}var index=listeners.indexOf(fn);if(index!==-1){listeners.splice(index,1)}};DOMDelegator.prototype.listenTo=function listenTo(eventName){if(this.events[eventName]){return}this.events[eventName]=true;listen(this,eventName)};DOMDelegator.prototype.unlistenTo=function unlistenTo(eventName){if(!this.events[eventName]){return}this.events[eventName]=false;unlisten(this,eventName)};function listen(delegator,eventName){var listener=delegator.rawEventListeners[eventName];if(!listener){listener=delegator.rawEventListeners[eventName]=createHandler(eventName,delegator.globalListeners)}delegator.target.addEventListener(eventName,listener,true)}function unlisten(delegator,eventName){var listener=delegator.rawEventListeners[eventName];if(!listener){throw new Error("dom-delegator#unlistenTo: cannot "+"unlisten to "+eventName)}delegator.target.removeEventListener(eventName,listener,true)}function createHandler(eventName,globalListeners){return handler;function handler(ev){var globalHandlers=globalListeners[eventName]||[];var listener=getListener(ev.target,eventName);var handlers=globalHandlers.concat(listener?listener.handlers:[]);if(handlers.length===0){return}var arg=new ProxyEvent(ev,listener);handlers.forEach(function(handler){typeof handler==="function"?handler(arg):handler.handleEvent(arg)})}}function getListener(target,type){if(target===null){return null}var ds=DataSet(target);var handler=ds[type];var allHandler=ds.event;if(!handler&&!allHandler){return getListener(target.parentNode,type)}var handlers=[].concat(handler||[],allHandler||[]);return new Listener(target,handlers)}function Listener(target,handlers){this.currentTarget=target;this.handlers=handlers}},{"./add-event.js":4,"./proxy-event.js":15,"./remove-event.js":16,"data-set":9,"global/document":12}],6:[function(require,module,exports){var Individual=require("individual");var cuid=require("cuid");var globalDocument=require("global/document");var DOMDelegator=require("./dom-delegator.js");var delegatorCache=Individual("__DOM_DELEGATOR_CACHE@9",{delegators:{}});var commonEvents=["blur","change","click","contextmenu","dblclick","error","focus","focusin","focusout","input","keydown","keypress","keyup","load","mousedown","mouseup","resize","scroll","select","submit","unload"];module.exports=Delegator;function Delegator(opts){opts=opts||{};var document=opts.document||globalDocument;var cacheKey=document["__DOM_DELEGATOR_CACHE_TOKEN@9"];if(!cacheKey){cacheKey=document["__DOM_DELEGATOR_CACHE_TOKEN@9"]=cuid()}var delegator=delegatorCache.delegators[cacheKey];if(!delegator){delegator=delegatorCache.delegators[cacheKey]=new DOMDelegator(document)}if(opts.defaultEvents!==false){for(var i=0;i<commonEvents.length;i++){delegator.listenTo(commonEvents[i])}}return delegator}},{"./dom-delegator.js":5,cuid:7,"global/document":12,individual:13}],7:[function(require,module,exports){(function(app){"use strict";var namespace="cuid",c=0,blockSize=4,base=36,discreteValues=Math.pow(base,blockSize),pad=function pad(num,size){var s="000000000"+num;return s.substr(s.length-size)},randomBlock=function randomBlock(){return pad((Math.random()*discreteValues<<0).toString(base),blockSize)},safeCounter=function(){c=c<discreteValues?c:0;c++;return c-1},api=function cuid(){var letter="c",timestamp=(new Date).getTime().toString(base),counter,fingerprint=api.fingerprint(),random=randomBlock()+randomBlock();counter=pad(safeCounter().toString(base),blockSize);return letter+timestamp+counter+fingerprint+random};api.slug=function slug(){var date=(new Date).getTime().toString(36),counter,print=api.fingerprint().slice(0,1)+api.fingerprint().slice(-1),random=randomBlock().slice(-2);counter=safeCounter().toString(36).slice(-4);return date.slice(-2)+counter+print+random};api.globalCount=function globalCount(){var cache=function calc(){var i,count=0;for(i in window){count++}return count}();api.globalCount=function(){return cache};return cache};api.fingerprint=function browserPrint(){return pad((navigator.mimeTypes.length+navigator.userAgent.length).toString(36)+api.globalCount().toString(36),4)};if(app.register){app.register(namespace,api)}else if(typeof module!=="undefined"){module.exports=api}else{app[namespace]=api}})(this.applitude||this)},{}],8:[function(require,module,exports){module.exports=createHash;function createHash(elem){var attributes=elem.attributes;var hash={};if(attributes===null||attributes===undefined){return hash}for(var i=0;i<attributes.length;i++){var attr=attributes[i];if(attr.name.substr(0,5)!=="data-"){continue}hash[attr.name.substr(5)]=attr.value}return hash}},{}],9:[function(require,module,exports){var createStore=require("weakmap-shim/create-store");var Individual=require("individual");var createHash=require("./create-hash.js");var hashStore=Individual("__DATA_SET_WEAKMAP@3",createStore());module.exports=DataSet;function DataSet(elem){var store=hashStore(elem);if(!store.hash){store.hash=createHash(elem)}return store.hash}},{"./create-hash.js":8,individual:13,"weakmap-shim/create-store":10}],10:[function(require,module,exports){var hiddenStore=require("./hidden-store.js");module.exports=createStore;function createStore(){var key={};return function(obj){if(typeof obj!=="object"||obj===null){throw new Error("Weakmap-shim: Key must be object")}var store=obj.valueOf(key);return store&&store.identity===key?store:hiddenStore(obj,key)}}},{"./hidden-store.js":11}],11:[function(require,module,exports){module.exports=hiddenStore;function hiddenStore(obj,key){var store={identity:key};var valueOf=obj.valueOf;Object.defineProperty(obj,"valueOf",{value:function(value){return value!==key?valueOf.apply(this,arguments):store},writable:true});return store}},{}],12:[function(require,module,exports){(function(global){var topLevel=typeof global!=="undefined"?global:typeof window!=="undefined"?window:{};var minDoc=require("min-document");if(typeof document!=="undefined"){module.exports=document}else{var doccy=topLevel["__GLOBAL_DOCUMENT_CACHE@4"];if(!doccy){doccy=topLevel["__GLOBAL_DOCUMENT_CACHE@4"]=minDoc}module.exports=doccy}}).call(this,typeof self!=="undefined"?self:typeof window!=="undefined"?window:{})},{"min-document":1}],13:[function(require,module,exports){(function(global){var root=typeof window!=="undefined"?window:typeof global!=="undefined"?global:{};module.exports=Individual;function Individual(key,value){if(root[key]){return root[key]}Object.defineProperty(root,key,{value:value,configurable:true});return value}}).call(this,typeof self!=="undefined"?self:typeof window!=="undefined"?window:{})},{}],14:[function(require,module,exports){if(typeof Object.create==="function"){module.exports=function inherits(ctor,superCtor){ctor.super_=superCtor;ctor.prototype=Object.create(superCtor.prototype,{constructor:{value:ctor,enumerable:false,writable:true,configurable:true}})}}else{module.exports=function inherits(ctor,superCtor){ctor.super_=superCtor;var TempCtor=function(){};TempCtor.prototype=superCtor.prototype;ctor.prototype=new TempCtor;ctor.prototype.constructor=ctor}}},{}],15:[function(require,module,exports){var inherits=require("inherits");var ALL_PROPS=["altKey","bubbles","cancelable","ctrlKey","eventPhase","metaKey","relatedTarget","shiftKey","target","timeStamp","type","view","which"];var KEY_PROPS=["char","charCode","key","keyCode"];var MOUSE_PROPS=["button","buttons","clientX","clientY","layerX","layerY","offsetX","offsetY","pageX","pageY","screenX","screenY","toElement"];var rkeyEvent=/^key|input/;var rmouseEvent=/^(?:mouse|pointer|contextmenu)|click/;module.exports=ProxyEvent;function ProxyEvent(ev,listener){if(!(this instanceof ProxyEvent)){return new ProxyEvent(ev,listener)}if(rkeyEvent.test(ev.type)){return new KeyEvent(ev,listener)}else if(rmouseEvent.test(ev.type)){return new MouseEvent(ev,listener)}for(var i=0;i<ALL_PROPS.length;i++){var propKey=ALL_PROPS[i];this[propKey]=ev[propKey]}this._rawEvent=ev;this.currentTarget=listener?listener.currentTarget:null}ProxyEvent.prototype.preventDefault=function(){this._rawEvent.preventDefault()};function MouseEvent(ev,listener){for(var i=0;i<ALL_PROPS.length;i++){var propKey=ALL_PROPS[i];this[propKey]=ev[propKey]}for(var j=0;j<MOUSE_PROPS.length;j++){var mousePropKey=MOUSE_PROPS[j];this[mousePropKey]=ev[mousePropKey]}this._rawEvent=ev;this.currentTarget=listener?listener.currentTarget:null}inherits(MouseEvent,ProxyEvent);function KeyEvent(ev,listener){for(var i=0;i<ALL_PROPS.length;i++){var propKey=ALL_PROPS[i];this[propKey]=ev[propKey]}for(var j=0;j<KEY_PROPS.length;j++){var keyPropKey=KEY_PROPS[j];this[keyPropKey]=ev[keyPropKey]}this._rawEvent=ev;this.currentTarget=listener?listener.currentTarget:null}inherits(KeyEvent,ProxyEvent)},{inherits:14}],16:[function(require,module,exports){var DataSet=require("data-set");module.exports=removeEvent;function removeEvent(target,type,handler){var ds=DataSet(target);var events=ds[type];if(!events){return}else if(Array.isArray(events)){var index=events.indexOf(handler);if(index!==-1){events.splice(index,1)}}else if(events===handler){ds[type]=null}}},{"data-set":9}],17:[function(require,module,exports){module.exports=Event;function Event(){var listeners=[];return{broadcast:broadcast,listen:event};function broadcast(value){for(var i=0;i<listeners.length;i++){listeners[i](value)}}function event(listener){listeners.push(listener);return removeListener;function removeListener(){var index=listeners.indexOf(listener);if(index!==-1){listeners.splice(index,1)}}}}},{}],18:[function(require,module,exports){var event=require("./single.js");module.exports=multiple;function multiple(names){return names.reduce(function(acc,name){acc[name]=event();return acc},{})}},{"./single.js":19}],19:[function(require,module,exports){var Event=require("./event.js");module.exports=Single;function Single(){var tuple=Event();return function event(value){if(typeof value==="function"){return tuple.listen(value)}else{return tuple.broadcast(value)}}}},{"./event.js":17}],20:[function(require,module,exports){var raf=require("raf/polyfill");var vdomCreate=require("virtual-dom/create-element");var vdomDiff=require("virtual-dom/diff");var vdomPatch=require("virtual-dom/patch");module.exports=main;function main(initialState,view,opts){opts=opts||{};var currentState=initialState;var create=opts.create||vdomCreate;var diff=opts.diff||vdomDiff;var patch=opts.patch||vdomPatch;var redrawScheduled=false;var tree=opts.initialTree||view(currentState);var target=opts.target||create(tree,opts);currentState=null;return{target:target,update:update};function update(state){if(currentState===null&&!redrawScheduled){redrawScheduled=true;raf(redraw)}currentState=state}function redraw(){redrawScheduled=false;if(currentState===null){return}var newTree=view(currentState);if(opts.createOnly){create(newTree,opts)}else{var patches=diff(tree,newTree,opts);target=patch(target,patches,opts)}tree=newTree;currentState=null}}},{"raf/polyfill":21,"virtual-dom/create-element":46,"virtual-dom/diff":47,"virtual-dom/patch":51}],21:[function(require,module,exports){var global=typeof window==="undefined"?this:window;var _raf=global.requestAnimationFrame||global.webkitRequestAnimationFrame||global.mozRequestAnimationFrame||global.msRequestAnimationFrame||global.oRequestAnimationFrame||(global.setImmediate?function(fn,el){setImmediate(fn)}:function(fn,el){setTimeout(fn,0)});module.exports=_raf},{}],22:[function(require,module,exports){var setNonEnumerable=require("./lib/set-non-enumerable.js");module.exports=addListener;function addListener(observArray,observ){var list=observArray._list;return observ(function(value){var valueList=observArray().slice();var index=list.indexOf(observ);if(index===-1){var message="observ-array: Unremoved observ listener";var err=new Error(message);err.list=list;err.index=index;err.observ=observ;throw err}valueList.splice(index,1,value);setNonEnumerable(valueList,"_diff",[index,1,value]);observArray.set(valueList)})}},{"./lib/set-non-enumerable.js":25}],23:[function(require,module,exports){var ObservArray=require("./index.js");var slice=Array.prototype.slice;var ARRAY_METHODS=["concat","slice","every","filter","forEach","indexOf","join","lastIndexOf","map","reduce","reduceRight","some","toString","toLocaleString"];var methods=ARRAY_METHODS.map(function(name){return[name,function(){var res=this._list[name].apply(this._list,arguments);if(res&&Array.isArray(res)){res=ObservArray(res)}return res}]});module.exports=ArrayMethods;function ArrayMethods(obs){obs.push=observArrayPush;obs.pop=observArrayPop;obs.shift=observArrayShift;obs.unshift=observArrayUnshift;obs.reverse=notImplemented;obs.sort=notImplemented;methods.forEach(function(tuple){obs[tuple[0]]=tuple[1]});return obs}function observArrayPush(){var args=slice.call(arguments);args.unshift(this._list.length,0);this.splice.apply(this,args);return this._list.length}function observArrayPop(){return this.splice(this._list.length-1,1)[0]}function observArrayShift(){return this.splice(0,1)[0]}function observArrayUnshift(){var args=slice.call(arguments);args.unshift(0,0);this.splice.apply(this,args);return this._list.length}function notImplemented(){throw new Error("Pull request welcome")}},{"./index.js":24}],24:[function(require,module,exports){var Observ=require("observ");module.exports=ObservArray;var splice=require("./splice.js");var ArrayMethods=require("./array-methods.js");var addListener=require("./add-listener.js");function ObservArray(initialList){var list=initialList;var initialState=[];list.forEach(function(observ,index){initialState[index]=typeof observ==="function"?observ():observ});var obs=Observ(initialState);obs.splice=splice;obs.get=get;obs.getLength=getLength;obs.put=put;obs._list=list;var removeListeners=list.map(function(observ){return typeof observ==="function"?addListener(obs,observ):null});obs._removeListeners=removeListeners;return ArrayMethods(obs,list)}function get(index){return this._list[index]}function put(index,value){this.splice(index,1,value)}function getLength(){return this._list.length}},{"./add-listener.js":22,"./array-methods.js":23,"./splice.js":26,observ:33}],25:[function(require,module,exports){module.exports=setNonEnumerable;function setNonEnumerable(object,key,value){Object.defineProperty(object,key,{value:value,writable:true,configurable:true,enumerable:false})}},{}],26:[function(require,module,exports){var slice=Array.prototype.slice;var addListener=require("./add-listener.js");var setNonEnumerable=require("./lib/set-non-enumerable.js");module.exports=splice;function splice(index,amount){var obs=this;var args=slice.call(arguments,0);var valueList=obs().slice();var valueArgs=args.map(function(value,index){if(index===0||index===1){return value}return typeof value==="function"?value():value});valueList.splice.apply(valueList,valueArgs);var removed=obs._list.splice.apply(obs._list,args);var extraRemoveListeners=args.slice(2).map(function(observ){return typeof observ==="function"?addListener(obs,observ):null});extraRemoveListeners.unshift(args[0],args[1]);var removedListeners=obs._removeListeners.splice.apply(obs._removeListeners,extraRemoveListeners);removedListeners.forEach(function(removeObservListener){if(removeObservListener){removeObservListener()}});setNonEnumerable(valueList,"_diff",valueArgs);obs.set(valueList);return removed}},{"./add-listener.js":22,"./lib/set-non-enumerable.js":25}],27:[function(require,module,exports){var Observ=require("observ");var extend=require("xtend");module.exports=ObservStruct;function ObservStruct(struct){var keys=Object.keys(struct);var initialState={};keys.forEach(function(key){if(key==="name"){throw new Error("cannot create an observ-struct "+"with a key named 'name'. Clashes with "+"`Function.prototype.name`.")}var observ=struct[key];initialState[key]=typeof observ==="function"?observ():observ});var obs=Observ(initialState);keys.forEach(function(key){var observ=struct[key];obs[key]=observ;if(typeof observ==="function"){observ(function(value){var state=extend(obs());state[key]=value;var diff={};diff[key]=value&&value._diff?value._diff:value;state._diff=diff;obs.set(state)})}});return obs}},{observ:28,xtend:29}],28:[function(require,module,exports){module.exports=Observable;function Observable(value){var listeners=[];value=value===undefined?null:value;observable.set=function(v){value=v;listeners.forEach(function(f){f(v)})};return observable;function observable(listener){if(!listener){return value}listeners.push(listener);return function remove(){listeners.splice(listeners.indexOf(listener),1)}}}},{}],29:[function(require,module,exports){module.exports=extend;function extend(){var target={};for(var i=0;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(source.hasOwnProperty(key)){target[key]=source[key]}}}return target}},{}],30:[function(require,module,exports){var Observ=require("observ");var extend=require("xtend");var NO_TRANSACTION={};ObservVarhash.Tombstone=new Tombstone;module.exports=ObservVarhash;function ObservVarhash(hash,createValue){createValue=createValue||function(obj){return obj};var initialState={};var currentTransaction=NO_TRANSACTION;for(var key in hash){var observ=hash[key];checkKey(key);initialState[key]=isFunc(observ)?observ():observ}var obs=Observ(initialState);obs._removeListeners={};var actions=methods(createValue);for(var k in actions){obs[k]=actions[k]}for(key in hash){obs[key]=createValue(hash[key],key);if(isFunc(obs[key])){obs._removeListeners[key]=obs[key](watch(obs,key,currentTransaction))}}obs(function(newState){if(currentTransaction===newState){return}for(var key in hash){var observ=hash[key];if(isFunc(observ)&&observ()!==newState[key]){observ.set(newState[key])}}});return obs}function methods(createValue){return{get:function(key){return this[key]},put:function(key,val){checkKey(key);var observ=createValue(val,key);var state=extend(this());state[key]=isFunc(observ)?observ():observ;if(isFunc(this._removeListeners[key])){this._removeListeners[key]()}this._removeListeners[key]=isFunc(observ)?observ(watch(this,key)):null;state._diff=diff(key,state[key]);this.set(state);this[key]=observ;return this},"delete":function(key){var state=extend(this());if(isFunc(this._removeListeners[key])){this._removeListeners[key]()}delete this._removeListeners[key];delete state[key];state._diff=diff(key,ObservVarhash.Tombstone);this.set(state);return this}}}function watch(obs,key,currentTransaction){return function(value){var state=extend(obs());state[key]=value;state._diff=diff(key,value);currentTransaction=state;obs.set(state);currentTransaction=NO_TRANSACTION}}function diff(key,value){var obj={};obj[key]=value&&value._diff?value._diff:value;return obj}function checkKey(key){var msg=getKeyError(key);if(msg){throw new Error(msg)}}function getKeyError(key){switch(key){case"name":{return formatError(key,"Clashes with `Function.prototype.name`.")}case"get":case"put":case"delete":case"_diff":case"_removeListeners":{return formatError(key,"Clashes with observ-varhash method")}default:{return""}}}function formatError(key,reason){return"cannot create an observ-varhash with key `"+key+"`, "+reason}function isFunc(obj){return typeof obj==="function"}function Tombstone(){}Tombstone.prototype.toJSON=nameTombstone;Tombstone.prototype.inspect=nameTombstone;Tombstone.prototype.toString=nameTombstone;function nameTombstone(){return"[object Tombstone]"}},{observ:33,xtend:31}],31:[function(require,module,exports){module.exports=require(29)},{}],32:[function(require,module,exports){var Observable=require("./index.js");module.exports=computed;function computed(observables,lambda){var values=observables.map(function(o){return o()});var result=Observable(lambda.apply(null,values));observables.forEach(function(o,index){o(function(newValue){values[index]=newValue;result.set(lambda.apply(null,values))})});return result}},{"./index.js":33}],33:[function(require,module,exports){module.exports=require(28)},{}],34:[function(require,module,exports){module.exports=watch;function watch(observable,listener){var remove=observable(listener);listener(observable());return remove}},{}],35:[function(require,module,exports){var extend=require("xtend");var getFormData=require("form-data-set/element");module.exports=ChangeSinkHandler;function ChangeSinkHandler(sink,data){if(!(this instanceof ChangeSinkHandler)){return new ChangeSinkHandler(sink,data)}this.sink=sink;this.data=data;this.type="change";this.id=sink.id}ChangeSinkHandler.prototype.handleEvent=handleEvent;function handleEvent(ev){var target=ev.target;var isValid=ev.type==="change"&&target.type==="checkbox"||ev.type==="input"&&target.type==="text"||ev.type==="change"&&target.type==="range"||ev.type==="change"&&target.type==="file";if(!isValid){return}var value=getFormData(ev.currentTarget);var data=extend(value,this.data);if(typeof this.sink==="function"){this.sink(data)}else{this.sink.write(data)}}},{"form-data-set/element":39,xtend:42}],36:[function(require,module,exports){module.exports=SinkEventHandler;function SinkEventHandler(sink,data){if(!(this instanceof SinkEventHandler)){return new SinkEventHandler(sink,data)}this.sink=sink;this.id=sink.id;this.data=data}SinkEventHandler.prototype.handleEvent=handleEvent;function handleEvent(ev){if(typeof this.sink==="function"){this.sink(this.data)}else{this.sink.write(this.data)}}},{}],37:[function(require,module,exports){module.exports=KeyEventHandler;function KeyEventHandler(fn,key,data){if(!(this instanceof KeyEventHandler)){return new KeyEventHandler(fn,key,data)}this.fn=fn;this.data=data;this.key=key}KeyEventHandler.prototype.handleEvent=handleEvent;function handleEvent(ev){if(ev.keyCode===this.key){this.fn(this.data)}}},{}],38:[function(require,module,exports){var slice=Array.prototype.slice;module.exports=iterativelyWalk;function iterativelyWalk(nodes,cb){if(!("length"in nodes)){nodes=[nodes]}nodes=slice.call(nodes);while(nodes.length){var node=nodes.shift(),ret=cb(node);if(ret){return ret}if(node.childNodes&&node.childNodes.length){nodes=slice.call(node.childNodes).concat(nodes)}}}},{}],39:[function(require,module,exports){var walk=require("dom-walk");var FormData=require("./index.js");module.exports=getFormData;function buildElems(rootElem){var hash={};walk(rootElem,function(child){if(child.name){hash[child.name]=child}});return hash}function getFormData(rootElem){var elements=buildElems(rootElem);return FormData(elements)}},{"./index.js":40,"dom-walk":38}],40:[function(require,module,exports){module.exports=FormData;function FormData(elements){return Object.keys(elements).reduce(function(acc,key){var elem=elements[key];acc[key]=valueOfElement(elem);return acc},{})}function valueOfElement(elem){if(typeof elem==="function"){return elem()}else if(containsRadio(elem)){var elems=toList(elem);var checked=elems.filter(function(elem){return elem.checked})[0]||null;return checked?checked.value:null}else if(Array.isArray(elem)){return elem.map(valueOfElement).filter(filterNull)}else if(elem.tagName===undefined&&elem.nodeType===undefined){return FormData(elem)}else if(elem.tagName==="INPUT"&&isChecked(elem)){if(elem.hasAttribute("value")){return elem.checked?elem.value:null}else{return elem.checked}}else if(elem.tagName==="INPUT"){return elem.value}else if(elem.tagName==="TEXTAREA"){return elem.value}else if(elem.tagName==="SELECT"){return elem.value}}function isChecked(elem){return elem.type==="checkbox"||elem.type==="radio"}function containsRadio(value){if(value.tagName||value.nodeType){return false}var elems=toList(value);return elems.some(function(elem){return elem.tagName==="INPUT"&&elem.type==="radio"})}function toList(value){if(Array.isArray(value)){return value}return Object.keys(value).map(prop,value)}function prop(x){return this[x]}function filterNull(val){return val!==null}},{}],41:[function(require,module,exports){module.exports=hasKeys;function hasKeys(source){return source!==null&&(typeof source==="object"||typeof source==="function")}},{}],42:[function(require,module,exports){var hasKeys=require("./has-keys");module.exports=extend;function extend(){var target={};for(var i=0;i<arguments.length;i++){var source=arguments[i];if(!hasKeys(source)){continue}for(var key in source){if(source.hasOwnProperty(key)){target[key]=source[key]}}}return target}},{"./has-keys":41}],43:[function(require,module,exports){var extend=require("xtend");var getFormData=require("form-data-set/element");var ENTER=13;module.exports=SubmitSinkHandler;function SubmitSinkHandler(sink,data){if(!(this instanceof SubmitSinkHandler)){return new SubmitSinkHandler(sink,data)}this.sink=sink;this.data=data;this.id=sink.id;this.type="submit"}SubmitSinkHandler.prototype.handleEvent=handleEvent;function handleEvent(ev){var target=ev.target;var isValid=ev.type==="click"&&target.tagName==="BUTTON"||ev.type==="click"&&target.type==="submit"||target.type==="text"&&(ev.keyCode===ENTER&&ev.type==="keydown");if(ev.type==="submit"){ev.preventDefualt()}if(!isValid){return}var value=getFormData(ev.currentTarget);var data=extend(value,this.data);if(typeof this.sink==="function"){this.sink(data)}else{this.sink.write(data)}}},{"form-data-set/element":39,xtend:42}],44:[function(require,module,exports){var extend=require("xtend");var getFormData=require("form-data-set/element");module.exports=ValueEventHandler;function ValueEventHandler(sink,data){if(!(this instanceof ValueEventHandler)){return new ValueEventHandler(sink,data)}this.sink=sink;this.data=data;this.id=sink.id}ValueEventHandler.prototype.handleEvent=handleEvent;function handleEvent(ev){var value=getFormData(ev.currentTarget);var data=extend(value,this.data);if(ev.type==="submit"){ev.preventDefault()}if(typeof this.sink==="function"){this.sink(data)}else{this.sink.write(data)}}},{"form-data-set/element":39,xtend:42}],45:[function(require,module,exports){var createElement=require("virtual-dom/create-element");var diff=require("virtual-dom/diff");var patch=require("virtual-dom/patch");var MESSAGE="partial() cannot cache on values. "+"You must specify object arguments. partial(";function copyOver(list,offset){var newList=[];for(var i=offset;i<list.length;i++){newList[i-offset]=list[i]}return newList}module.exports=partial;function partial(fn){var args=copyOver(arguments,1);var firstArg=args[0];var hasObjects=args.length===0;var key;if(typeof firstArg==="object"&&firstArg!==null){hasObjects=true;if("key"in firstArg){key=firstArg.key}else if("id"in firstArg){key=firstArg.id}}for(var i=1;!hasObjects&&i<args.length;i++){var arg=args[i];if(typeof arg==="object"&&arg!==null){hasObjects=true}}if(!hasObjects){throw new Error(MESSAGE+args+")")}return new Thunk(fn,args,key)}function Thunk(fn,args,key){this.fn=fn;this.args=args;this.vnode=null;this.key=key}Thunk.prototype.type="immutable-thunk";Thunk.prototype.update=update;Thunk.prototype.init=init;function shouldUpdate(current,previous){if(current.fn!==previous.fn){return true}var cargs=current.args;var pargs=previous.args;if(cargs.length===0&&pargs.length===0){return false}if(cargs.length!==pargs.length){return true}var max=cargs.length>pargs.length?cargs.length:pargs.length;for(var i=0;i<max;i++){if(cargs[i]!==pargs[i]){return true}}return false}function update(previous,domNode){if(!shouldUpdate(this,previous)){this.vnode=previous.vnode;return}if(!this.vnode){this.vnode=this.fn.apply(null,this.args)}var patches=diff(previous.vnode,this.vnode);patch(domNode,patches)}function init(){this.vnode=this.fn.apply(null,this.args);return createElement(this.vnode)}},{"virtual-dom/create-element":46,"virtual-dom/diff":47,"virtual-dom/patch":51}],46:[function(require,module,exports){var createElement=require("./vdom/create-element");module.exports=createElement},{"./vdom/create-element":53}],47:[function(require,module,exports){var diff=require("./vtree/diff");module.exports=diff},{"./vtree/diff":58}],48:[function(require,module,exports){if(typeof document!=="undefined"){module.exports=document}else{module.exports=require("min-document")}},{"min-document":1}],49:[function(require,module,exports){module.exports=isObject;function isObject(x){return typeof x==="object"&&x!==null}},{}],50:[function(require,module,exports){var nativeIsArray=Array.isArray;var toString=Object.prototype.toString;module.exports=nativeIsArray||isArray;function isArray(obj){return toString.call(obj)==="[object Array]"}},{}],51:[function(require,module,exports){var patch=require("./vdom/patch");module.exports=patch},{"./vdom/patch":56}],52:[function(require,module,exports){var isObject=require("is-object");var isHook=require("../vtree/is-vhook");module.exports=applyProperties;function applyProperties(node,props,previous){for(var propName in props){var propValue=props[propName];
if(isHook(propValue)){propValue.hook(node,propName,previous?previous[propName]:undefined)}else{if(isObject(propValue)){if(!isObject(node[propName])){node[propName]={}}for(var k in propValue){node[propName][k]=propValue[k]}}else if(propValue!==undefined){node[propName]=propValue}}}}},{"../vtree/is-vhook":59,"is-object":49}],53:[function(require,module,exports){var document=require("global/document");var applyProperties=require("./apply-properties");var isVNode=require("../vtree/is-vnode");var isVText=require("../vtree/is-vtext");var isWidget=require("../vtree/is-widget");module.exports=createElement;function createElement(vnode,opts){var doc=opts?opts.document||document:document;var warn=opts?opts.warn:null;if(isWidget(vnode)){return vnode.init()}else if(isVText(vnode)){return doc.createTextNode(vnode.text)}else if(!isVNode(vnode)){if(warn){warn("Item is not a valid virtual dom node",vnode)}return null}var node=vnode.namespace===null?doc.createElement(vnode.tagName):doc.createElementNS(vnode.namespace,vnode.tagName);var props=vnode.properties;applyProperties(node,props);var children=vnode.children;for(var i=0;i<children.length;i++){var childNode=createElement(children[i],opts);if(childNode){node.appendChild(childNode)}}return node}},{"../vtree/is-vnode":60,"../vtree/is-vtext":61,"../vtree/is-widget":62,"./apply-properties":52,"global/document":48}],54:[function(require,module,exports){var noChild={};module.exports=domIndex;function domIndex(rootNode,tree,indices,nodes){if(!indices||indices.length===0){return{}}else{indices.sort(ascending);return recurse(rootNode,tree,indices,nodes,0)}}function recurse(rootNode,tree,indices,nodes,rootIndex){nodes=nodes||{};if(rootNode){if(indexInRange(indices,rootIndex,rootIndex)){nodes[rootIndex]=rootNode}var vChildren=tree.children;if(vChildren){var childNodes=rootNode.childNodes;for(var i=0;i<tree.children.length;i++){rootIndex+=1;var vChild=vChildren[i]||noChild;var nextIndex=rootIndex+(vChild.count||0);if(indexInRange(indices,rootIndex,nextIndex)){recurse(childNodes[i],vChild,indices,nodes,rootIndex)}rootIndex=nextIndex}}}return nodes}function indexInRange(indices,left,right){if(indices.length===0){return false}var minIndex=0;var maxIndex=indices.length-1;var currentIndex;var currentItem;while(minIndex<=maxIndex){currentIndex=(maxIndex+minIndex)/2>>0;currentItem=indices[currentIndex];if(minIndex===maxIndex){return currentItem>=left&&currentItem<=right}else if(currentItem<left){minIndex=currentIndex+1}else if(currentItem>right){maxIndex=currentIndex-1}else{return true}}return false}function ascending(a,b){return a>b?1:-1}},{}],55:[function(require,module,exports){var applyProperties=require("./apply-properties");var isWidget=require("../vtree/is-widget");var VPatch=require("../vtree/vpatch");var render=require("./create-element");var updateWidget=require("./update-widget");module.exports=applyPatch;function applyPatch(vpatch,domNode,renderOptions){var type=vpatch.type;var vNode=vpatch.vNode;var patch=vpatch.patch;switch(type){case VPatch.REMOVE:return removeNode(domNode,vNode);case VPatch.INSERT:return insertNode(domNode,patch,renderOptions);case VPatch.VTEXT:return stringPatch(domNode,vNode,patch,renderOptions);case VPatch.WIDGET:return widgetPatch(domNode,vNode,patch,renderOptions);case VPatch.VNODE:return vNodePatch(domNode,vNode,patch,renderOptions);case VPatch.ORDER:reorderChildren(domNode,patch);return domNode;case VPatch.PROPS:applyProperties(domNode,patch,vNode.propeties);return domNode;default:return domNode}}function removeNode(domNode,vNode){var parentNode=domNode.parentNode;if(parentNode){parentNode.removeChild(domNode)}destroyWidget(domNode,vNode);return null}function insertNode(parentNode,vNode,renderOptions){var newNode=render(vNode,renderOptions);if(parentNode){parentNode.appendChild(newNode)}return parentNode}function stringPatch(domNode,leftVNode,vText,renderOptions){var newNode;if(domNode.nodeType===3){domNode.replaceData(0,domNode.length,vText.text);newNode=domNode}else{var parentNode=domNode.parentNode;newNode=render(vText,renderOptions);if(parentNode){parentNode.replaceChild(newNode,domNode)}}destroyWidget(domNode,leftVNode);return newNode}function widgetPatch(domNode,leftVNode,widget,renderOptions){if(updateWidget(leftVNode,widget)){return widget.update(leftVNode,domNode)||domNode}var parentNode=domNode.parentNode;var newWidget=render(widget,renderOptions);if(parentNode){parentNode.replaceChild(newWidget,domNode)}destroyWidget(domNode,leftVNode);return newWidget}function vNodePatch(domNode,leftVNode,vNode,renderOptions){var parentNode=domNode.parentNode;var newNode=render(vNode,renderOptions);if(parentNode){parentNode.replaceChild(newNode,domNode)}destroyWidget(domNode,leftVNode);return newNode}function destroyWidget(domNode,w){if(typeof w.destroy==="function"&&isWidget(w)){w.destroy(domNode)}}function reorderChildren(domNode,bIndex){var children=[];var childNodes=domNode.childNodes;var len=childNodes.length;var i;for(i=0;i<len;i++){children.push(domNode.childNodes[i])}for(i=0;i<len;i++){var move=bIndex[i];if(move!==undefined){var node=children[move];domNode.removeChild(node);domNode.insertBefore(node,childNodes[i])}}}},{"../vtree/is-widget":62,"../vtree/vpatch":65,"./apply-properties":52,"./create-element":53,"./update-widget":57}],56:[function(require,module,exports){var document=require("global/document");var isArray=require("x-is-array");var domIndex=require("./dom-index");var patchOp=require("./patch-op");module.exports=patch;function patch(rootNode,patches){var indices=patchIndices(patches);if(indices.length===0){return rootNode}var index=domIndex(rootNode,patches.a,indices);var ownerDocument=rootNode.ownerDocument;var renderOptions;if(ownerDocument!==document){renderOptions={document:ownerDocument}}for(var i=0;i<indices.length;i++){var nodeIndex=indices[i];rootNode=applyPatch(rootNode,index[nodeIndex],patches[nodeIndex],renderOptions)}return rootNode}function applyPatch(rootNode,domNode,patchList,renderOptions){if(!domNode){return rootNode}var newNode;if(isArray(patchList)){for(var i=0;i<patchList.length;i++){newNode=patchOp(patchList[i],domNode,renderOptions);if(domNode===rootNode){rootNode=newNode}}}else{newNode=patchOp(patchList,domNode,renderOptions);if(domNode===rootNode){rootNode=newNode}}return rootNode}function patchIndices(patches){var indices=[];for(var key in patches){if(key!=="a"){indices.push(Number(key))}}return indices}},{"./dom-index":54,"./patch-op":55,"global/document":48,"x-is-array":50}],57:[function(require,module,exports){var isWidget=require("../vtree/is-widget");module.exports=updateWidget;function updateWidget(a,b){if(isWidget(a)&&isWidget(b)){if("type"in a&&"type"in b){return a.type===b.type}else{return a.init===b.init}}return false}},{"../vtree/is-widget":62}],58:[function(require,module,exports){var isArray=require("x-is-array");var isObject=require("is-object");var VPatch=require("./vpatch");var isVNode=require("./is-vnode");var isVText=require("./is-vtext");var isWidget=require("./is-widget");module.exports=diff;function diff(a,b){var patch={a:a};walk(a,b,patch,0);return patch}function walk(a,b,patch,index){if(a===b){hooks(b,patch,index);return}var apply=patch[index];if(isWidget(b)){apply=appendPatch(apply,new VPatch(VPatch.WIDGET,a,b));if(!isWidget(a)){destroyWidgets(a,patch,index)}}else if(isVText(b)){if(!isVText(a)){apply=appendPatch(apply,new VPatch(VPatch.VTEXT,a,b));destroyWidgets(a,patch,index)}else if(a.text!==b.text){apply=appendPatch(apply,new VPatch(VPatch.VTEXT,a,b))}}else if(isVNode(b)){if(isVNode(a)){if(a.tagName===b.tagName&&a.namespace===b.namespace&&a.key===b.key){var propsPatch=diffProps(a.properties,b.properties,b.hooks);if(propsPatch){apply=appendPatch(apply,new VPatch(VPatch.PROPS,a,propsPatch))}}else{apply=appendPatch(apply,new VPatch(VPatch.VNODE,a,b));destroyWidgets(a,patch,index)}apply=diffChildren(a,b,patch,apply,index)}else{apply=appendPatch(apply,new VPatch(VPatch.VNODE,a,b));destroyWidgets(a,patch,index)}}else if(b==null){apply=appendPatch(apply,new VPatch(VPatch.REMOVE,a,b));destroyWidgets(a,patch,index)}if(apply){patch[index]=apply}}function diffProps(a,b,hooks){var diff;for(var aKey in a){if(!(aKey in b)){continue}var aValue=a[aKey];var bValue=b[aKey];if(hooks&&aKey in hooks){diff=diff||{};diff[aKey]=bValue}else{if(isObject(aValue)&&isObject(bValue)){if(getPrototype(bValue)!==getPrototype(aValue)){diff=diff||{};diff[aKey]=bValue}else{var objectDiff=diffProps(aValue,bValue);if(objectDiff){diff=diff||{};diff[aKey]=objectDiff}}}else if(aValue!==bValue&&bValue!==undefined){diff=diff||{};diff[aKey]=bValue}}}for(var bKey in b){if(!(bKey in a)){diff=diff||{};diff[bKey]=b[bKey]}}return diff}function getPrototype(value){if(Object.getPrototypeOf){return Object.getPrototypeOf(value)}else if(value.__proto__){return value.__proto__}else if(value.constructor){return value.constructor.prototype}}function diffChildren(a,b,patch,apply,index){var aChildren=a.children;var bChildren=reorder(aChildren,b.children);var aLen=aChildren.length;var bLen=bChildren.length;var len=aLen>bLen?aLen:bLen;for(var i=0;i<len;i++){var leftNode=aChildren[i];var rightNode=bChildren[i];index+=1;if(!leftNode){if(rightNode){apply=appendPatch(apply,new VPatch(VPatch.INSERT,null,rightNode))}}else if(!rightNode){if(leftNode){patch[index]=new VPatch(VPatch.REMOVE,leftNode,null);destroyWidgets(leftNode,patch,index)}}else{walk(leftNode,rightNode,patch,index)}if(isVNode(leftNode)&&leftNode.count){index+=leftNode.count}}if(bChildren.moves){apply=appendPatch(apply,new VPatch(VPatch.ORDER,a,bChildren.moves))}return apply}function destroyWidgets(vNode,patch,index){if(isWidget(vNode)){if(typeof vNode.destroy==="function"){patch[index]=new VPatch(VPatch.REMOVE,vNode,null)}}else if(isVNode(vNode)&&vNode.hasWidgets){var children=vNode.children;var len=children.length;for(var i=0;i<len;i++){var child=children[i];index+=1;destroyWidgets(child,patch,index);if(isVNode(child)&&child.count){index+=child.count}}}}function hooks(vNode,patch,index){if(isVNode(vNode)){if(vNode.hooks){patch[index]=new VPatch(VPatch.PROPS,vNode.hooks,vNode.hooks)}if(vNode.descendantHooks){var children=vNode.children;var len=children.length;for(var i=0;i<len;i++){var child=children[i];index+=1;hooks(child,patch,index);if(isVNode(child)&&child.count){index+=child.count}}}}}function reorder(aChildren,bChildren){var bKeys=keyIndex(bChildren);if(!bKeys){return bChildren}var aKeys=keyIndex(aChildren);if(!aKeys){return bChildren}var bMatch={},aMatch={};for(var key in bKeys){bMatch[bKeys[key]]=aKeys[key]}for(var key in aKeys){aMatch[aKeys[key]]=bKeys[key]}var aLen=aChildren.length;var bLen=bChildren.length;var len=aLen>bLen?aLen:bLen;var shuffle=[];var freeIndex=0;var i=0;var moveIndex=0;var moves=shuffle.moves={};while(freeIndex<len){var move=aMatch[i];if(move!==undefined){shuffle[i]=bChildren[move];moves[move]=moveIndex++}else if(i in aMatch){shuffle[i]=undefined}else{while(bMatch[freeIndex]!==undefined){freeIndex++}if(freeIndex<len){moves[freeIndex]=moveIndex++;shuffle[i]=bChildren[freeIndex];freeIndex++}}i++}return shuffle}function keyIndex(children){var i,keys;for(i=0;i<children.length;i++){var child=children[i];if(child.key!==undefined){keys=keys||{};keys[child.key]=i}}return keys}function appendPatch(apply,patch){if(apply){if(isArray(apply)){apply.push(patch)}else{apply=[apply,patch]}return apply}else{return patch}}},{"./is-vnode":60,"./is-vtext":61,"./is-widget":62,"./vpatch":65,"is-object":49,"x-is-array":50}],59:[function(require,module,exports){module.exports=isHook;function isHook(hook){return hook&&typeof hook.hook==="function"&&!hook.hasOwnProperty("hook")}},{}],60:[function(require,module,exports){var version=require("./version");module.exports=isVirtualNode;function isVirtualNode(x){if(!x){return false}return x.type==="VirtualNode"&&x.version===version}},{"./version":63}],61:[function(require,module,exports){var version=require("./version");module.exports=isVirtualText;function isVirtualText(x){if(!x){return false}return x.type==="VirtualText"&&x.version===version}},{"./version":63}],62:[function(require,module,exports){module.exports=isWidget;function isWidget(w){return w&&typeof w.init==="function"&&typeof w.update==="function"}},{}],63:[function(require,module,exports){module.exports="1"},{}],64:[function(require,module,exports){var version=require("./version");var isVNode=require("./is-vnode");var isWidget=require("./is-widget");var isVHook=require("./is-vhook");module.exports=VirtualNode;var noProperties={};var noChildren=[];function VirtualNode(tagName,properties,children,key,namespace){this.tagName=tagName;this.properties=properties||noProperties;this.children=children||noChildren;this.key=key!=null?String(key):undefined;this.namespace=typeof namespace==="string"?namespace:null;var count=children&&children.length||0;var descendants=0;var hasWidgets=false;var descendantHooks=false;var hooks;for(var propName in properties){if(properties.hasOwnProperty(propName)){var property=properties[propName];if(isVHook(property)){if(!hooks){hooks={}}hooks[propName]=property}}}for(var i=0;i<count;i++){var child=children[i];if(isVNode(child)){descendants+=child.count||0;if(!hasWidgets&&child.hasWidgets){hasWidgets=true}if(!descendantHooks&&(child.hooks||child.descendantHooks)){descendantHooks=true}}else if(!hasWidgets&&isWidget(child)){if(typeof child.destroy==="function"){hasWidgets=true}}}this.count=count+descendants;this.hasWidgets=hasWidgets;this.hooks=hooks;this.descendantHooks=descendantHooks}VirtualNode.prototype.version=version;VirtualNode.prototype.type="VirtualNode"},{"./is-vhook":59,"./is-vnode":60,"./is-widget":62,"./version":63}],65:[function(require,module,exports){var version=require("./version");VirtualPatch.NONE=0;VirtualPatch.VTEXT=1;VirtualPatch.VNODE=2;VirtualPatch.WIDGET=3;VirtualPatch.PROPS=4;VirtualPatch.ORDER=5;VirtualPatch.INSERT=6;VirtualPatch.REMOVE=7;module.exports=VirtualPatch;function VirtualPatch(type,vNode,patch){this.type=Number(type);this.vNode=vNode;this.patch=patch}VirtualPatch.prototype.version=version.split(".");VirtualPatch.prototype.type="VirtualPatch"},{"./version":63}],66:[function(require,module,exports){var version=require("./version");module.exports=VirtualText;function VirtualText(text){this.text=String(text)}VirtualText.prototype.version=version;VirtualText.prototype.type="VirtualText"},{"./version":63}],67:[function(require,module,exports){module.exports=AttributeHook;function AttributeHook(value){if(!(this instanceof AttributeHook)){return new AttributeHook(value)}this.value=value}AttributeHook.prototype.hook=function(node,prop,prev){if(prev&&prev.value===this.value){return}node.setAttributeNS(null,prop,this.value)}},{}],68:[function(require,module,exports){var DataSet=require("data-set");module.exports=DataSetHook;function DataSetHook(value){if(!(this instanceof DataSetHook)){return new DataSetHook(value)}this.value=value}DataSetHook.prototype.hook=function(node,propertyName){var ds=DataSet(node);var propName=propertyName.substr(5);ds[propName]=this.value}},{"data-set":73}],69:[function(require,module,exports){var DataSet=require("data-set");module.exports=DataSetHook;function DataSetHook(value){if(!(this instanceof DataSetHook)){return new DataSetHook(value)}this.value=value}DataSetHook.prototype.hook=function(node,propertyName){var ds=DataSet(node);var propName=propertyName.substr(3);ds[propName]=this.value}},{"data-set":73}],70:[function(require,module,exports){module.exports=SoftSetHook;function SoftSetHook(value){if(!(this instanceof SoftSetHook)){return new SoftSetHook(value)}this.value=value}SoftSetHook.prototype.hook=function(node,propertyName){if(node[propertyName]!==this.value){node[propertyName]=this.value}}},{}],71:[function(require,module,exports){var VNode=require("virtual-dom/vtree/vnode.js");var VText=require("virtual-dom/vtree/vtext.js");var isVNode=require("virtual-dom/vtree/is-vnode");var isVText=require("virtual-dom/vtree/is-vtext");var isWidget=require("virtual-dom/vtree/is-widget");var isHook=require("virtual-dom/vtree/is-vhook");var parseTag=require("./parse-tag.js");var softSetHook=require("./hooks/soft-set-hook.js");var dataSetHook=require("./hooks/data-set-hook.js");var evHook=require("./hooks/ev-hook.js");module.exports=h;function h(tagName,properties,children){var childNodes=[];var tag,props,key,namespace;if(!children&&isChildren(properties)){children=properties;props={}}props=props||properties||{};tag=parseTag(tagName,props);if(children){addChild(children,childNodes)}if("key"in props){key=props.key;props.key=undefined}if("namespace"in props){namespace=props.namespace;props.namespace=undefined}if(tag==="input"&&"value"in props&&props.value!==undefined&&!isHook(props.value)){props.value=softSetHook(props.value)}var keys=Object.keys(props);var propName,value;for(var j=0;j<keys.length;j++){propName=keys[j];value=props[propName];if(isHook(value)){continue}if(propName.substr(0,5)==="data-"){props[propName]=dataSetHook(value)}if(propName.substr(0,3)==="ev-"){props[propName]=evHook(value)}}return new VNode(tag,props,childNodes,key,namespace)}function addChild(c,childNodes){if(typeof c==="string"){childNodes.push(new VText(c))}else if(isChild(c)){childNodes.push(c)}else if(Array.isArray(c)){for(var i=0;i<c.length;i++){addChild(c[i],childNodes)}}}function isChild(x){return isVNode(x)||isVText(x)||isWidget(x)}function isChildren(x){return typeof x==="string"||Array.isArray(x)||isChild(x)}},{"./hooks/data-set-hook.js":68,"./hooks/ev-hook.js":69,"./hooks/soft-set-hook.js":70,"./parse-tag.js":77,"virtual-dom/vtree/is-vhook":59,"virtual-dom/vtree/is-vnode":60,"virtual-dom/vtree/is-vtext":61,"virtual-dom/vtree/is-widget":62,"virtual-dom/vtree/vnode.js":64,"virtual-dom/vtree/vtext.js":66}],72:[function(require,module,exports){module.exports=require(8)},{}],73:[function(require,module,exports){module.exports=require(9)},{"./create-hash.js":72,individual:74,"weakmap-shim/create-store":75}],74:[function(require,module,exports){module.exports=require(13)},{}],75:[function(require,module,exports){module.exports=require(10)},{"./hidden-store.js":76}],76:[function(require,module,exports){module.exports=require(11)},{}],77:[function(require,module,exports){var classIdSplit=/([\.#]?[a-zA-Z0-9_:-]+)/;var notClassId=/^\.|#/;module.exports=parseTag;function parseTag(tag,props){if(!tag){return"div"}var noId=!("id"in props);var tagParts=tag.split(classIdSplit);var tagName=null;if(notClassId.test(tagParts[1])){tagName="div"}var classes,part,type,i;for(i=0;i<tagParts.length;i++){part=tagParts[i];if(!part){continue}type=part.charAt(0);if(!tagName){tagName=part}else if(type==="."){classes=classes||[];classes.push(part.substring(1,part.length))}else if(type==="#"&&noId){props.id=part.substring(1,part.length)}}if(classes){if(props.className){classes.push(props.className)}props.className=classes.join(" ")}return tagName?tagName.toLowerCase():"div"}},{}],78:[function(require,module,exports){var attributeHook=require("./hooks/attribute-hook.js");var h=require("./index.js");var BLACKLISTED_KEYS={style:true,namespace:true,key:true};var SVG_NAMESPACE="http://www.w3.org/2000/svg";module.exports=svg;function svg(tagName,properties,children){if(!children&&isChildren(properties)){children=properties;properties={}}properties=properties||{};properties.namespace=SVG_NAMESPACE;for(var key in properties){if(!properties.hasOwnProperty(key)){continue}if(BLACKLISTED_KEYS[key]){continue}var value=properties[key];if(typeof value!=="string"&&typeof value!=="number"&&typeof value!=="boolean"){continue}properties[key]=attributeHook(value)}return h(tagName,properties,children)}function isChildren(x){return typeof x==="string"||Array.isArray(x)}},{"./hooks/attribute-hook.js":67,"./index.js":71}]},{},[]);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}({1:[function(require,module,exports){var process=module.exports={};process.nextTick=function(){var canSetImmediate=typeof window!=="undefined"&&window.setImmediate;var canPost=typeof window!=="undefined"&&window.postMessage&&window.addEventListener;if(canSetImmediate){return function(f){return window.setImmediate(f)}}if(canPost){var queue=[];window.addEventListener("message",function(ev){var source=ev.source;if((source===window||source===null)&&ev.data==="process-tick"){ev.stopPropagation();if(queue.length>0){var fn=queue.shift();fn()}}},true);return function nextTick(fn){queue.push(fn);window.postMessage("process-tick","*")}}return function nextTick(fn){setTimeout(fn,0)}}();process.title="browser";process.browser=true;process.env={};process.argv=[];function noop(){}process.on=noop;process.addListener=noop;process.once=noop;process.off=noop;process.removeListener=noop;process.removeAllListeners=noop;process.emit=noop;process.binding=function(name){throw new Error("process.binding is not supported")};process.cwd=function(){return"/"};process.chdir=function(dir){throw new Error("process.chdir is not supported")}},{}],"next-tick":[function(require,module,exports){(function(process){"use strict";var callable,byObserver;callable=function(fn){if(typeof fn!=="function")throw new TypeError(fn+" is not a function");return fn};byObserver=function(Observer){var node=document.createTextNode(""),queue,i=0;new Observer(function(){var data;if(!queue)return;data=queue;queue=null;if(typeof data==="function"){data();return}data.forEach(function(fn){fn()})}).observe(node,{characterData:true});return function(fn){callable(fn);if(queue){if(typeof queue==="function")queue=[queue,fn];else queue.push(fn);return}queue=fn;node.data=i=++i%2}};module.exports=function(){if(typeof process!=="undefined"&&process&&typeof process.nextTick==="function"){return process.nextTick}if(typeof document==="object"&&document){if(typeof MutationObserver==="function"){return byObserver(MutationObserver)}if(typeof WebKitMutationObserver==="function"){return byObserver(WebKitMutationObserver)}}if(typeof setImmediate==="function"){return function(cb){setImmediate(callable(cb))}}if(typeof setTimeout==="function"){return function(cb){setTimeout(callable(cb),0)}}return null}()}).call(this,require("_process"))},{_process:1}]},{},[]);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}({"random-string":[function(require,module,exports){"use strict";var numbers="0123456789",letters="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz",specials="!$%^&*()_+|~-=`{}[]:;<>?,./";function _defaults(opts){opts||(opts={});return{length:opts.length||8,numeric:typeof opts.numeric==="boolean"?opts.numeric:true,letters:typeof opts.letters==="boolean"?opts.letters:true,special:typeof opts.special==="boolean"?opts.special:false}}function _buildChars(opts){var chars="";if(opts.numeric){chars+=numbers}if(opts.letters){chars+=letters}if(opts.special){chars+=specials}return chars}module.exports=function randomString(opts){opts=_defaults(opts);var i,rn,rnd="",len=opts.length,randomChars=_buildChars(opts);for(i=1;i<=len;i++){rnd+=randomChars.substring(rn=Math.floor(Math.random()*randomChars.length),rn+1)}return rnd}},{}]},{},[]);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);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.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}({XxGlWs:[function(require,module,exports){var inserted={};module.exports=function(css,options){if(inserted[css])return;inserted[css]=true;var elem=document.createElement("style");elem.setAttribute("type","text/css");if("textContent"in elem){elem.textContent=css}else{elem.styleSheet.cssText=css}var head=document.getElementsByTagName("head")[0];if(options&&options.prepend){head.insertBefore(elem,head.childNodes[0])}else{head.appendChild(elem)}}},{}],"insert-css":[function(require,module,exports){module.exports=require("XxGlWs")},{}]},{},[]);var mercury=require("mercury");var h=mercury.h;var nextTick=require("next-tick");var rnd_str=require("random-string");var events={addItem:mercury.input(),removeItem:mercury.input()};var state=mercury.struct({events:events,items:mercury.array([Item(rnd_str({length:10}))])});events.addItem(function(){state.items.push(Item(rnd_str({length:10})))});function removeItem(item){var index_to_remove;state.items.map(function(a_item,i){if(a_item.desc()===item.desc)index_to_remove=i});console.log(index_to_remove);state.items.splice(index_to_remove,1)}function Item(desc){var state=mercury.struct({desc:mercury.value(desc)});return state}Item.render=function(state){var removing=false;return h("li",{"class":new ItemInsertHook("item tr"),"ev-transitionend":function(ev){var item_dom=ev.target;if(removing){removing=false;removeItem(state);item_dom.classList.remove("tr");item_dom.classList.remove("opaque");nextTick(function(){item_dom.classList.add("tr")})}}},[h("button.remove",{"ev-click":function(ev){removing=true;var item_dom=ev.target.parentNode;item_dom.classList.add("opaque")}},"Remove"),h("div.desc",state.desc)])};function ItemInsertHook(value){this.value=value}ItemInsertHook.prototype.hook=function(elem,propName){if(!elem.childNodes.length){elem.setAttribute(propName,this.value+" opaque");nextTick(function(){elem.setAttribute(propName,this.value+"")}.bind(this))}};function renderItemsList(state){return h("ul#item-list",[state.items.map(function(item){return Item.render(item)})])}function render(state){return h("#main",[h("button",{"ev-click":mercury.event(state.events.addItem)},"Add item"),renderItemsList(state)])}mercury.app(document.body,state,render);var del=mercury.Delegator();del.listenTo("transitionend");var insertCSS=require("insert-css");var css="label {display: block}\n";css+="ul {list-style-type: none;}\n";css+="li.item {max-width: 300px; height: 30px;"+"border-radius: 2px;"+"box-shadow: 0 1px 1px #ccc;"+"padding: 0.7em; margin: 0 0 5px}\n";css+="li.item.opaque {opacity : 0.01; transform: translateZ(0);}\n";css+="li.item.tr {transition: opacity 0.75s ease-in-out;}\n";css+="li.item {opacity : 0.99; transform: translateZ(0);}\n";css+="li.item .remove {float: right;}\n";insertCSS(css);

package.json

{
  "name": "requirebin-sketch",
  "version": "1.0.0",
  "dependencies": {
    "mercury": "5.2.1",
    "next-tick": "0.2.2",
    "random-string": "0.1.2",
    "insert-css": "0.2.0"
  }
}

page-head.html

<style type='text/css'>html, body { margin: 0; padding: 0; border: 0; }
body, html { height: 100%; width: 100%; }</style>

requirebin.md

made with requirebin