requirebin sketch

index.js

const observify = require('observify')

var data = observify({
  "foo": "bar",
  "cats": ["taco", "burrito"],
  "object": { key: 'value' },
  "age": 82
})

data.age(function ageChanged(value) {
  console.log('age changed', value)
})

data.age.set(100)
console.log(data.age)
console.log(data.age())

// you should not overwrite data.age with a value
// console.log('setting age improperly')
// data.age = 12

var ageAgain = data.age(function anotherListener(value) {
  console.log('age again', value)
})
console.log(ageAgain)

data.age.set(10)
data.age.set(11)

console.log('removing second listener on age')
ageAgain()

data.age.set(12)

data.cats(function (cats) {
  console.log('cats changed', cats)
})

console.log('adding leroy to cats')
data.cats.push('leroy')

console.log('new cats', data.cats())

var leroyIndex = data.cats().indexOf('leroy')

console.log('got leroy index', leroyIndex)

console.log('renaming leroy')

data.cats.put(leroyIndex, 'jenkins')

console.log('removing jenkins')

data.cats.splice(leroyIndex, 1)

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}({1:[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._observSet(valueList)})}},{"./lib/set-non-enumerable.js":7}],2:[function(require,module,exports){var addListener=require("./add-listener.js");module.exports=applyPatch;function applyPatch(valueList,args){var obs=this;var valueArgs=args.map(unpack);valueList.splice.apply(valueList,valueArgs);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()}});return valueArgs}function unpack(value,index){if(index===0||index===1){return value}return typeof value==="function"?value():value}},{"./add-listener.js":1}],3:[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=require("./array-reverse.js");obs.sort=require("./array-sort.js");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")}},{"./array-reverse.js":4,"./array-sort.js":5,"./index.js":6}],4:[function(require,module,exports){var applyPatch=require("./apply-patch.js");var setNonEnumerable=require("./lib/set-non-enumerable.js");module.exports=reverse;function reverse(){var obs=this;var changes=fakeDiff(obs._list.slice().reverse());var valueList=obs().slice().reverse();var valueChanges=changes.map(applyPatch.bind(obs,valueList));setNonEnumerable(valueList,"_diff",valueChanges);obs._observSet(valueList);return changes}function fakeDiff(arr){var _diff;var len=arr.length;if(len%2){var midPoint=(len-1)/2;var a=[0,midPoint].concat(arr.slice(0,midPoint));var b=[midPoint+1,midPoint].concat(arr.slice(midPoint+1,len));var _diff=[a,b]}else{_diff=[[0,len].concat(arr)]}return _diff}},{"./apply-patch.js":2,"./lib/set-non-enumerable.js":7}],5:[function(require,module,exports){var applyPatch=require("./apply-patch.js");var setNonEnumerable=require("./lib/set-non-enumerable.js");module.exports=sort;function sort(compare){var obs=this;var list=obs._list.slice();var unpacked=unpack(list);var sorted=unpacked.map(function(it){return it.val}).sort(compare);var packed=repack(sorted,unpacked);var changes=[[0,packed.length].concat(packed)];var valueChanges=changes.map(applyPatch.bind(obs,sorted));setNonEnumerable(sorted,"_diff",valueChanges);obs._observSet(sorted);return changes}function unpack(list){var unpacked=[];for(var i=0;i<list.length;i++){unpacked.push({val:"function"==typeof list[i]?list[i]():list[i],obj:list[i]})}return unpacked}function repack(sorted,unpacked){var packed=[];while(sorted.length){var s=sorted.shift();var indx=indexOf(s,unpacked);if(~indx)packed.push(unpacked.splice(indx,1)[0].obj)}return packed}function indexOf(n,h){for(var i=0;i<h.length;i++){if(n===h[i].val)return i}return-1}},{"./apply-patch.js":2,"./lib/set-non-enumerable.js":7}],6:[function(require,module,exports){var Observ=require("observ");module.exports=ObservArray;var splice=require("./splice.js");var put=require("./put.js");var set=require("./set.js");var transaction=require("./transaction.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._observSet=obs.set;obs.set=set;obs.get=get;obs.getLength=getLength;obs.put=put;obs.transaction=transaction;obs._list=list;var removeListeners=list.map(function(observ){return typeof observ==="function"?addListener(obs,observ):null});obs._removeListeners=removeListeners;obs._type="observ-array";obs._version="3";return ArrayMethods(obs,list)}function get(index){return this._list[index]}function getLength(){return this._list.length}},{"./add-listener.js":1,"./array-methods.js":3,"./put.js":9,"./set.js":10,"./splice.js":11,"./transaction.js":12,observ:15}],7:[function(require,module,exports){module.exports=setNonEnumerable;function setNonEnumerable(object,key,value){Object.defineProperty(object,key,{value:value,writable:true,configurable:true,enumerable:false})}},{}],8:[function(require,module,exports){function head(a){return a[0]}function last(a){return a[a.length-1]}function tail(a){return a.slice(1)}function retreat(e){return e.pop()}function hasLength(e){return e.length}function any(ary,test){for(var i=0;i<ary.length;i++)if(test(ary[i]))return true;return false}function score(a){return a.reduce(function(s,a){return s+a.length+a[1]+1},0)}function best(a,b){return score(a)<=score(b)?a:b}var _rules;function _equal(a,b){if(a&&!b)return false;if(Array.isArray(a))if(a.length!=b.length)return false;if(a&&"object"==typeof a){for(var i in a)if(!_equal(a[i],b[i]))return false;for(var i in b)if(!_equal(a[i],b[i]))return false;return true}return a==b}function getArgs(args){return args.length==1?args[0]:[].slice.call(args)}function oddElement(ary,cmp){var c;function guess(a){var odd=-1;c=0;for(var i=a;i<ary.length;i++){if(!cmp(ary[a],ary[i])){odd=i,c++}}return c>1?-1:odd}var g=guess(0);if(-1!=g)return g;guess(1);return c==0?0:-1}var exports=module.exports=function(deps,exports){var equal=deps&&deps.equal||_equal;exports=exports||{};exports.lcs=function lcs(){var cache={};var args=getArgs(arguments);var a=args[0],b=args[1];function key(a,b){return a.length+":"+b.length}if(args.length>2){args.push(lcs(args.shift(),args.shift()));return lcs(args)}var start=0,end=0;for(var i=0;i<a.length&&i<b.length&&equal(a[i],b[i]);i++)start=i+1;if(a.length===start)return a.slice();for(var i=0;i<a.length-start&&i<b.length-start&&equal(a[a.length-1-i],b[b.length-1-i]);i++)end=i;function recurse(a,b){if(!a.length||!b.length)return[];if(cache[key(a,b)])return cache[key(a,b)];if(equal(a[0],b[0]))return[head(a)].concat(recurse(tail(a),tail(b)));else{var _a=recurse(tail(a),b);var _b=recurse(a,tail(b));return cache[key(a,b)]=_a.length>_b.length?_a:_b}}var middleA=a.slice(start,a.length-end);var middleB=b.slice(start,b.length-end);return a.slice(0,start).concat(recurse(middleA,middleB)).concat(a.slice(a.length-end))};exports.chunk=function(q,build){var q=q.map(function(e){return e.slice()});var lcs=exports.lcs.apply(null,q);var all=[lcs].concat(q);function matchLcs(e){if(e.length&&!lcs.length||!e.length&&lcs.length)return false;return equal(last(e),last(lcs))||e.length+lcs.length===0}while(any(q,hasLength)){while(q.every(matchLcs)&&q.every(hasLength))all.forEach(retreat);var c=false;var unstable=q.map(function(e){var change=[];while(!matchLcs(e)){change.unshift(retreat(e));c=true}return change});if(c)build(q[0].length,unstable)}};exports.optimisticDiff=function(a,b){var M=Math.max(a.length,b.length);var m=Math.min(a.length,b.length);var patch=[];for(var i=0;i<M;i++)if(a[i]!==b[i]){var cur=[i,0],deletes=0;while(a[i]!==b[i]&&i<m){cur[1]=++deletes;cur.push(b[i++])}if(i>=m){if(a.length>b.length)cur[1]+=a.length-b.length;else if(a.length<b.length)cur=cur.concat(b.slice(a.length))}patch.push(cur)}return patch};exports.diff=function(a,b){var optimistic=exports.optimisticDiff(a,b);var changes=[];exports.chunk([a,b],function(index,unstable){var del=unstable.shift().length;var insert=unstable.shift();changes.push([index,del].concat(insert))});return best(optimistic,changes)};exports.patch=function(a,changes,mutate){if(mutate!==true)a=a.slice(a);changes.forEach(function(change){[].splice.apply(a,change)});return a};exports.merge=function(){var args=getArgs(arguments);var patch=exports.diff3(args);return exports.patch(args[0],patch)};exports.diff3=function(){var args=getArgs(arguments);var r=[];exports.chunk(args,function(index,unstable){var mine=unstable[0];var insert=resolve(unstable);if(equal(mine,insert))return;r.push([index,mine.length].concat(insert))});return r};exports.oddOneOut=function oddOneOut(changes){changes=changes.slice();changes.unshift(changes.splice(1,1)[0]);var i=oddElement(changes,equal);if(i==0)return changes[1];if(~i)return changes[i]};exports.insertMergeOverDelete=function insertMergeOverDelete(changes){changes=changes.slice();changes.splice(1,1);for(var i=0,nonempty;i<changes.length;i++)if(changes[i].length)if(!nonempty)nonempty=changes[i];else return;return nonempty};var rules=deps&&deps.rules||[exports.oddOneOut,exports.insertMergeOverDelete];function resolve(changes){var l=rules.length;for(var i in rules){var c=rules[i]&&rules[i](changes);if(c)return c}changes.splice(1,1);return{"?":changes}}return exports};exports(null,exports)},{}],9:[function(require,module,exports){var addListener=require("./add-listener.js");var setNonEnumerable=require("./lib/set-non-enumerable.js");module.exports=put;function put(index,value){var obs=this;var valueList=obs().slice();var originalLength=valueList.length;valueList[index]=typeof value==="function"?value():value;obs._list[index]=value;var removeListener=obs._removeListeners[index];if(removeListener){removeListener()}obs._removeListeners[index]=typeof value==="function"?addListener(obs,value):null;var valueArgs=index<originalLength?[index,1,valueList[index]]:[index,0,valueList[index]];setNonEnumerable(valueList,"_diff",[valueArgs]);obs._observSet(valueList);return value}},{"./add-listener.js":1,"./lib/set-non-enumerable.js":7}],10:[function(require,module,exports){var applyPatch=require("./apply-patch.js");var setNonEnumerable=require("./lib/set-non-enumerable.js");var adiff=require("adiff");module.exports=set;function set(rawList){if(!Array.isArray(rawList))rawList=[];var obs=this;var changes=adiff.diff(obs._list,rawList);var valueList=obs().slice();var valueChanges=changes.map(applyPatch.bind(obs,valueList));setNonEnumerable(valueList,"_diff",valueChanges);obs._observSet(valueList);return changes}},{"./apply-patch.js":2,"./lib/set-non-enumerable.js":7,adiff:8}],11:[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._observSet(valueList);return removed}},{"./add-listener.js":1,"./lib/set-non-enumerable.js":7}],12:[function(require,module,exports){module.exports=transaction;function transaction(func){var obs=this;var rawList=obs._list.slice();if(func(rawList)!==false){return obs.set(rawList)}}},{}],13:[function(require,module,exports){var Observ=require("observ");var extend=require("xtend");var blackList={length:"Clashes with `Function.prototype.length`.\n",name:"Clashes with `Function.prototype.name`.\n",_diff:"_diff is reserved key of observ-struct.\n",_type:"_type is reserved key of observ-struct.\n",_version:"_version is reserved key of observ-struct.\n"};var NO_TRANSACTION={};function setNonEnumerable(object,key,value){Object.defineProperty(object,key,{value:value,writable:true,configurable:true,enumerable:false})}module.exports=ObservStruct;function ObservStruct(struct){var keys=Object.keys(struct);var initialState={};var currentTransaction=NO_TRANSACTION;var nestedTransaction=NO_TRANSACTION;keys.forEach(function(key){if(blackList.hasOwnProperty(key)){throw new Error("cannot create an observ-struct "+"with a key named '"+key+"'.\n"+blackList[key])}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){if(nestedTransaction===value){return}var state=extend(obs());state[key]=value;var diff={};diff[key]=value&&value._diff?value._diff:value;setNonEnumerable(state,"_diff",diff);currentTransaction=state;obs.set(state);currentTransaction=NO_TRANSACTION})}});var _set=obs.set;obs.set=function trackDiff(value){if(currentTransaction===value){return _set(value)}var newState=extend(value);setNonEnumerable(newState,"_diff",value);_set(newState)};obs(function(newState){if(currentTransaction===newState){return}keys.forEach(function(key){var observ=struct[key];var newObservValue=newState[key];if(typeof observ==="function"&&observ()!==newObservValue){nestedTransaction=newObservValue;observ.set(newState[key]);nestedTransaction=NO_TRANSACTION}})});obs._type="observ-struct";obs._version="5";return obs}},{observ:15,xtend:14}],14:[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}},{}],15:[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)}}}},{}],observify:[function(require,module,exports){var array=require("observ-array");var struct=require("observ-struct");var value=require("observ");var blackList={length:true,name:true,_diff:true,_type:true,_version:true};module.exports=function(obj,opts){var result;if(isArray(obj))result=createArray(obj,opts);else if(isObject(obj))result=createObject(obj,opts);else result=value(obj);return result};function createArray(obj,opts){return array(obj.map(function(el){if(isArray(el))return createArray(el,opts);if(isObject(el))return createObject(el,opts);return value(el)}))}function createObject(obj,opts){opts=opts||{};var autoRename=opts.autoRename;if(autoRename&&typeof autoRename==="boolean")autoRename="$";var objectConstructor=opts.objectConstructor||struct;var data={};Object.keys(obj).forEach(function(key){var val=obj[key];var writeKey=blackList[key]&&autoRename?autoRename+key:key;if(isArray(val))return data[writeKey]=createArray(val,opts);if(isObject(val))return data[writeKey]=createObject(val,opts);return data[writeKey]=value(val)});return objectConstructor(data)}function isArray(obj){return Array.isArray(obj)}function isObject(obj){if(typeof obj==="object"&&obj!==null)return true;else return false}},{observ:15,"observ-array":6,"observ-struct":13}]},{},[]);const observify=require("observify");var data=observify({foo:"bar",cats:["taco","burrito"],object:{key:"value"},age:82});data.age(function ageChanged(value){console.log("age changed",value)});data.age.set(100);console.log(data.age);console.log(data.age());var ageAgain=data.age(function anotherListener(value){console.log("age again",value)});console.log(ageAgain);data.age.set(10);data.age.set(11);console.log("removing second listener on age");ageAgain();data.age.set(12);data.cats(function(cats){console.log("cats changed",cats)});console.log("adding leroy to cats");data.cats.push("leroy");console.log("new cats",data.cats());var leroyIndex=data.cats().indexOf("leroy");console.log("got leroy index",leroyIndex);console.log("renaming leroy");data.cats.put(leroyIndex,"jenkins");console.log("removing jenkins");data.cats.splice(leroyIndex,1)},0);

package.json

{
  "name": "requirebin-sketch",
  "version": "1.0.0",
  "dependencies": {
    "observify": "1.1.2"
  }
}

page-body.html

<!-- contents of this file will be placed inside the <body> -->
<div id="#logger"></div>

page-head.html

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

requirebin.md

made with requirebin