pakyow 0.11.3 → 1.0.0.rc1

data/lib/generators/pakyow/app/templates/public/scripts/ring/components/loader.js

@@ -1,9 +0,0 @@
-pw.component.register('loader', function (view) {
-  this.listen('socket:loading', function () {
-    view.node.classList.add('ui-show');
-  });
-
-  this.listen('socket:loaded', function () {
-    view.node.classList.remove('ui-show');
-  });
-});

data/lib/generators/pakyow/app/templates/public/scripts/ring/components/loader.min.js

@@ -1 +0,0 @@
-pw.component.register("loader",function(o){this.listen("socket:loading",function(){o.node.classList.add("ui-show")}),this.listen("socket:loaded",function(){o.node.classList.remove("ui-show")})});

data/lib/generators/pakyow/app/templates/public/scripts/ring/components/modal.js

@@ -1,98 +0,0 @@
-pw.component.register('modal', function (view, config, name, id) {
-  var self = this;
-  var channel = 'modal:' + id;
-  var blinder, modal;
-  var blinderTemplate;
-
-  if (blinderTemplate = document.querySelector('*[data-template="ui-modal-blinder"]')) {
-    blinderTemplate = blinderTemplate.cloneNode(true);
-  }
-
-  this.listen(channel + ':navigator:enter', function (response) {
-    if (!blinder) {
-      if (blinderTemplate) {
-        blinder = blinderTemplate.cloneNode(true);
-        modal = blinder.querySelector('*[data-template="ui-modal-content"]');
-        document.body.appendChild(blinder);
-
-        blinder.removeAttribute('data-template');
-        modal.removeAttribute('data-template');
-      } else {
-        blinder = document.createElement('DIV');
-        blinder.classList.add('ui-modal-blinder');
-
-        modal = document.createElement('DIV');
-        modal.classList.add('ui-modal');
-
-        blinder.appendChild(modal);
-        document.body.appendChild(blinder);
-      }
-
-      blinder.addEventListener('click', function (evt) {
-        if (evt.target === blinder) {
-          evt.preventDefault();
-          self.close();
-
-          var uri = window.location.pathname;
-
-          var opts = {
-            uri: uri
-          };
-
-          window.history.pushState(opts, uri, uri);
-        }
-      });
-    }
-
-    modal.innerHTML = response.body;
-    pw.component.findAndInit(blinder);
-
-    blinder.classList.add('ui-appear');
-  });
-
-  this.listen(channel + ':navigator:exit', function () {
-    self.close();
-  });
-
-  this.listen(channel + ':navigator:boot', function (uri) {
-    self.load(uri);
-  });
-
-  view.node.addEventListener('click', function (evt) {
-    evt.preventDefault();
-    self.load(config.href || this.href);
-    return false;
-  });
-
-  this.load = function (uri) {
-    if (!window.socket) {
-      document.location = uri;
-      return;
-    }
-
-    var opts = {
-      uri: uri,
-      context: 'modal:' + id
-    }
-
-    if (config.container) {
-      opts.container = config.container;
-    }
-
-    if (config.partial) {
-      opts.partial = config.partial;
-    }
-
-    window.history.pushState(opts, uri, uri);
-  };
-
-  this.close = function () {
-    if (!blinder || !modal) {
-      return;
-    }
-
-    pw.node.remove(blinder);
-    blinder = null;
-    modal = null;
-  };
-});

data/lib/generators/pakyow/app/templates/public/scripts/ring/components/modal.min.js

@@ -1 +0,0 @@
-pw.component.register("modal",function(t,e,n,o){var a,i,d,l=this,r="modal:"+o;(d=document.querySelector('*[data-template="ui-modal-blinder"]'))&&(d=d.cloneNode(!0)),this.listen(r+":navigator:enter",function(t){a||(d?(a=d.cloneNode(!0),i=a.querySelector('*[data-template="ui-modal-content"]'),document.body.appendChild(a),a.removeAttribute("data-template"),i.removeAttribute("data-template")):(a=document.createElement("DIV"),a.classList.add("ui-modal-blinder"),i=document.createElement("DIV"),i.classList.add("ui-modal"),a.appendChild(i),document.body.appendChild(a)),a.addEventListener("click",function(t){if(t.target===a){t.preventDefault(),l.close();var e=window.location.pathname,n={uri:e};window.history.pushState(n,e,e)}})),i.innerHTML=t.body,pw.component.findAndInit(a),a.classList.add("ui-appear")}),this.listen(r+":navigator:exit",function(){l.close()}),this.listen(r+":navigator:boot",function(t){l.load(t)}),t.node.addEventListener("click",function(t){return t.preventDefault(),l.load(e.href||this.href),!1}),this.load=function(t){if(!window.socket)return void(document.location=t);var n={uri:t,context:"modal:"+o};e.container&&(n.container=e.container),e.partial&&(n.partial=e.partial),window.history.pushState(n,t,t)},this.close=function(){a&&i&&(pw.node.remove(a),a=null,i=null)}});

data/lib/generators/pakyow/app/templates/public/scripts/ring/components/mutable.js

@@ -1,70 +0,0 @@
-pw.component.register('mutable', function (view, config) {
-  this.mutation = function (mutation) {
-    // no socket, just submit the form
-    if (!window.socket) {
-      view.node.submit();
-      return;
-    }
-
-    var datum = pw.util.dup(mutation);
-    delete datum.__nested;
-    delete datum.scope;
-    delete datum.id;
-
-    var message = {
-      action: 'call-route'
-    };
-
-    if (view.node.tagName === 'FORM') {
-      if (view.node.querySelector('input[type="file"]')) {
-        // file uploads over websocket are not supported
-        view.node.submit();
-        return;
-      }
-
-      var method;
-      var $methodOverride = view.node.querySelector('input[name="_method"]');
-      if ($methodOverride) {
-        method = $methodOverride.value;
-      } else {
-        method = view.node.getAttribute('method');
-      }
-
-      message.method = method;
-      message.uri = view.node.getAttribute('action');
-      message.input = pw.node.serialize(view.node);
-    } else {
-      //TODO deduce uri / method
-
-      var input = {};
-      input[mutation.scope] = datum;
-      message.input = input;
-    }
-
-    var self = this;
-    window.socket.send(message, function (res) {
-      if (res.status === 302) {
-        var dest = res.headers.Location;
-
-        if (dest == window.location.pathname && (!window.context || window.context.name !== 'default')) {
-          history.pushState({ uri: dest }, dest, dest);
-        } else {
-          //TODO trigger a response:redirect instead and let navigator subscribe
-          history.pushState({ uri: dest }, dest, dest);
-        }
-      } else if (res.status === 400) {
-        // bad request
-        pw.component.broadcast('response:received', { response: res });
-        return;
-      } else {
-        self.state.rollback();
-      }
-
-      pw.component.broadcast('response:received', { response: res });
-
-      if (config.revert !== 'false') {
-        self.revert();
-      }
-    });
-  }
-});

data/lib/generators/pakyow/app/templates/public/scripts/ring/components/mutable.min.js

@@ -1 +0,0 @@
-pw.component.register("mutable",function(e,t){this.mutation=function(o){if(!window.socket)return void e.node.submit();var n=pw.util.dup(o);delete n.__nested,delete n.scope,delete n.id;var i={action:"call-route"};if("FORM"===e.node.tagName){if(e.node.querySelector('input[type="file"]'))return void e.node.submit();var r,s=e.node.querySelector('input[name="_method"]');r=s?s.value:e.node.getAttribute("method"),i.method=r,i.uri=e.node.getAttribute("action"),i.input=pw.node.serialize(e.node)}else{var a={};a[o.scope]=n,i.input=a}var d=this;window.socket.send(i,function(e){if(302===e.status){var o=e.headers.Location;o!=window.location.pathname||window.context&&"default"===window.context.name?history.pushState({uri:o},o,o):history.pushState({uri:o},o,o)}else{if(400===e.status)return void pw.component.broadcast("response:received",{response:e});d.state.rollback()}pw.component.broadcast("response:received",{response:e}),"false"!==t.revert&&d.revert()})}});

data/lib/generators/pakyow/app/templates/public/scripts/ring/components/navigator.js

@@ -1,154 +0,0 @@
-function boot() {
-  if (!window.socket) {
-    setTimeout(boot, 100);
-    return;
-  }
-
-  if (window.location.hash) {
-    var arr = window.location.hash.split('#:')[1].split('/');
-    var context = arr.shift();
-    var uri = arr.join('/');
-
-    pw.component.broadcast(context + ':navigator:boot', uri);
-  }
-}
-
-(function(history) {
-  pw.init.register(boot);
-
-  if (history) {
-    var hasPushed = false;
-    var pushState = history.pushState;
-
-    history.pushState = function(state, title, uri) {
-      hasPushed = true;
-
-      if (typeof history.onpushstate == "function") {
-        history.onpushstate({ state: state });
-      }
-
-      if (uri == window.location.pathname) {
-        pw.component.broadcast(window.context.name + ':navigator:exit');
-
-        window.context = {
-          _state: state,
-          name: 'default',
-          uri: window.location.href
-        };
-
-        state.r_uri = uri;
-      } else {
-        handleState(state, 'forward');
-      }
-
-      return pushState.apply(history, [state, title, state.r_uri]);
-    }
-
-    window.onpopstate = function (evt) {
-      if (!hasPushed) {
-        return;
-      }
-
-      var state = evt.state;
-
-      if (!state) {
-        state = {};
-      }
-
-      if (!state.uri) {
-        state.uri = window.context.uri;
-      }
-
-      handleState(state, 'back');
-    }
-  } else {
-    // unsupported
-  }
-})(window.history);
-
-window.context = {
-  name: 'default',
-  uri: window.location.href
-};
-
-function handleState(state, direction) {
-  var uri = state.uri || state.url;
-
-  // socket isn't ready, so just send 'em to the url
-  if (!window.socket) {
-    document.location = uri;
-    return;
-  }
-
-  uri = uri.replace(document.location.origin, '');
-  pw.component.broadcast('navigator:change', { uri: uri });
-
-  if (state.context) {
-    state.r_uri = document.location.pathname + '#:' + state.context + '/' + uri;
-
-    window.context = {
-      _state: state,
-      name: state.context,
-      uri: state.r_uri,
-      container: state.container,
-      partial: state.partial
-    };
-  } else {
-    state.r_uri = uri;
-
-    if (window.context.name !== 'default') {
-      if (direction === 'back') {
-        // we are leaving a context
-        pw.component.broadcast(window.context.name + ':navigator:exit');
-
-        window.context = {
-          name: 'default',
-          uri: state.uri
-        };
-
-        return;
-      } else {
-        // navigate in context
-        state.r_uri = document.location.pathname + '#:' + window.context.name + '/' + uri;
-        state.context = window.context.name;
-        state.container = window.context.container;
-        state.partial = window.context.partial;
-      }
-    }
-  }
-
-  var opts = {
-    uri: uri,
-    action: 'call-route',
-    method: 'get'
-  };
-
-  if (state.container) {
-    opts.container = state.container;
-  }
-
-  if (state.partial) {
-    opts.partial = state.partial;
-  }
-
-  window.socket.send(opts, function (payload) {
-    if (state.context) {
-      pw.component.broadcast(state.context + ':navigator:enter', payload);
-    } else {
-      var body = payload.body[0];
-
-      if (body.match(/<title>/)) {
-        var title = body.split(/<title>/)[1].split('</title>')[0];
-        document.querySelector('title').innerHTML = title;
-      }
-
-      var doc = document.documentElement.cloneNode();
-      doc.innerHTML = body;
-
-      document.body.innerHTML = doc.querySelector('body').innerHTML;
-      pw.component.findAndInit(document.querySelectorAll('body')[0]);
-
-      document.body.scrollTop = document.documentElement.scrollTop = 0;
-    }
-  });
-}

data/lib/generators/pakyow/app/templates/public/scripts/ring/components/navigator.min.js

@@ -1 +0,0 @@
-function boot(){if(!window.socket)return void setTimeout(boot,100);if(window.location.hash){var t=window.location.hash.split("#:")[1].split("/"),n=t.shift(),o=t.join("/");pw.component.broadcast(n+":navigator:boot",o)}}function handleState(t,n){var o=t.uri||t.url;if(!window.socket)return void(document.location=o);if(o=o.replace(document.location.origin,""),pw.component.broadcast("navigator:change",{uri:o}),t.context)t.r_uri=document.location.pathname+"#:"+t.context+"/"+o,window.context={_state:t,name:t.context,uri:t.r_uri,container:t.container,partial:t.partial};else if(t.r_uri=o,"default"!==window.context.name){if("back"===n)return pw.component.broadcast(window.context.name+":navigator:exit"),void(window.context={name:"default",uri:t.uri});t.r_uri=document.location.pathname+"#:"+window.context.name+"/"+o,t.context=window.context.name,t.container=window.context.container,t.partial=window.context.partial}var e={uri:o,action:"call-route",method:"get"};t.container&&(e.container=t.container),t.partial&&(e.partial=t.partial),window.socket.send(e,function(n){if(t.context)pw.component.broadcast(t.context+":navigator:enter",n);else{var o=n.body[0];if(o.match(/<title>/)){var e=o.split(/<title>/)[1].split("</title>")[0];document.querySelector("title").innerHTML=e}var i=document.documentElement.cloneNode();i.innerHTML=o,document.body.innerHTML=i.querySelector("body").innerHTML,pw.component.findAndInit(document.querySelectorAll("body")[0]),document.body.scrollTop=document.documentElement.scrollTop=0}})}!function(t){if(pw.init.register(boot),t){var n=!1,o=t.pushState;t.pushState=function(e,i,a){return n=!0,"function"==typeof t.onpushstate&&t.onpushstate({state:e}),a==window.location.pathname?(pw.component.broadcast(window.context.name+":navigator:exit"),window.context={_state:e,name:"default",uri:window.location.href},e.r_uri=a):handleState(e,"forward"),o.apply(t,[e,i,e.r_uri])},window.onpopstate=function(t){if(n){var o=t.state;o||(o={}),o.uri||(o.uri=window.context.uri),handleState(o,"back")}}}}(window.history),window.context={name:"default",uri:window.location.href};

data/lib/generators/pakyow/app/templates/public/scripts/ring/components/notifier.js

@@ -1,29 +0,0 @@
-pw.component.register('notifier', function (view, config) {
-  var that = this;
-
-  this.listen('notification:published', function (payload) {
-    that.show(payload.notification);
-  });
-
-  this.listen('response:received', function (payload) {
-    //TODO support notification type and add a class based on it for styling
-    var notification = payload.response.headers['Pakyow-Notify'];
-
-    if (notification) {
-      that.show(notification);
-    }
-  });
-
-  view.node.addEventListener('click', function (evt) {
-    view.node.classList.add('hide');
-  });
-
-  this.message = function (channel, payload) {
-    that.show(payload.notification);
-  };
-
-  this.show = function (notification) {
-    view.node.innerText = notification;
-    view.node.classList.remove('hide');
-  };
-});

data/lib/generators/pakyow/app/templates/public/scripts/ring/components/notifier.min.js

@@ -1 +0,0 @@
-pw.component.register("notifier",function(i,n){var e=this;this.listen("notification:published",function(i){e.show(i.notification)}),this.listen("response:received",function(i){var n=i.response.headers["Pakyow-Notify"];n&&e.show(n)}),i.node.addEventListener("click",function(n){i.node.classList.add("hide")}),this.message=function(i,n){e.show(n.notification)},this.show=function(n){i.node.innerText=n,i.node.classList.remove("hide")}});

data/lib/generators/pakyow/app/templates/public/scripts/ring/pakyow.js

@@ -1,1936 +0,0 @@
-var pw = {
-  version: '0.2.4'
-};
-
-(function() {
-pw.util = {
-  guid: function () {
-    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
-      var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
-      return v.toString(16);
-    });
-  },
-
-  dup: function (object) {
-    return JSON.parse(JSON.stringify(object));
-  }
-};
-var fns = [];
-
-pw.init = {
-  register: function (fn) {
-    fns.push(fn);
-  }
-};
-
-document.addEventListener("DOMContentLoaded", function() {
-  fns.forEach(function (fn) {
-    fn();
-  });
-});
-var sigAttrs = ['data-scope', 'data-prop'];
-var valuelessTags = ['SELECT'];
-var selfClosingTags = ['AREA', 'BASE', 'BASEFONT', 'BR', 'HR', 'INPUT', 'IMG', 'LINK', 'META'];
-
-pw.node = {
-  // returns the value of the node
-  value: function (node) {
-    if (node.tagName === 'INPUT') {
-      if (node.type === 'checkbox') {
-        if (node.checked) {
-          return node.value ? node.value : true;
-        } else {
-          return false;
-        }
-      }
-
-      return node.value;
-    } else if (node.tagName === 'TEXTAREA') {
-      return node.value;
-    } else if (node.tagName === 'SELECT') {
-      return node.value;
-    }
-
-    return node.textContent.trim();
-  },
-
-  /*
-    Returns a representation of the node's state. Example:
-
-    <div data-scope="list" data-id="1">
-      <div data-scope="task" data-id="1">
-        <label data-prop="desc">
-          foo
-        </label>
-      </div>
-    </div>
-
-    [ [ { node: ..., id: '1', scope: 'list' }, [ { node: ..., id: '1', scope: 'task' }, [ { node: ..., prop: 'body' } ] ] ] ]
-  */
-
-  significant: function(node, arr) {
-    if(node === document) {
-      node = document.getElementsByTagName('body')[0];
-    }
-
-    if(arr === undefined) {
-      arr = [];
-    }
-
-    var sig, nArr;
-
-    if(sig = pw.node.isSignificant(node)) {
-      nArr = [];
-      arr.push([{ node: sig[0], type: sig[1] }, nArr]);
-    } else {
-      nArr = arr;
-    }
-
-    pw.node.toA(node.children).forEach(function (child) {
-      pw.node.significant(child, nArr);
-    });
-
-    return arr;
-  },
-
-  // returns node and an indication of it's significance
-  // (e.g value of scope/prop); returns false otherwise
-  isSignificant: function(node) {
-    var attr = sigAttrs.find(function (a) {
-      return node.hasAttribute(a);
-    });
-
-    if (attr) {
-      return [node, attr.split('-')[1]];
-    } else {
-      return false;
-    }
-  },
-
-  mutable: function (node) {
-    pw.node.significant(node).flatten().filter(function (n) {
-      return pw.node.isMutable(n.node);
-    }).map(function (n) {
-      return n.node;
-    });
-  },
-
-  // returns true if the node can mutate via interaction
-  isMutable: function(node) {
-    var tag = node.tagName;
-    return tag === 'FORM' || (tag === 'INPUT' && !node.disabled);
-  },
-
-  // triggers event name on node with data
-  trigger: function (evtName, node, data) {
-    var evt = document.createEvent('Event');
-    evt.initEvent(evtName, true, true);
-
-    node._evtData = data;
-    node.dispatchEvent(evt);
-  },
-
-  // replaces an event listener's callback for node by name
-  replaceEventListener: function (eventName, node, cb) {
-    node.removeEventListener(eventName);
-    node.addEventListener(eventName, cb);
-  },
-
-  inForm: function (node) {
-    if (node.tagName === 'FORM') {
-      return true;
-    }
-
-    var next = node.parentNode;
-    if (next && next !== document) {
-      return pw.node.inForm(next);
-    }
-  },
-
-  // finds and returns component for node
-  component: function (node) {
-    if (node.getAttribute('data-ui')) {
-      return node;
-    }
-
-    var next = node.parentNode;
-    if (next && next !== document) {
-      return pw.node.component(next);
-    }
-  },
-
-  // finds and returns scope for node
-  scope: function (node) {
-    if (node.getAttribute('data-scope')) {
-      return node;
-    }
-
-    var next = node.parentNode;
-    if (next && next !== document) {
-      return pw.node.scope(next);
-    }
-  },
-
-  // returns the name of the scope for node
-  scopeName: function (node) {
-    if (node.getAttribute('data-scope')) {
-      return node.getAttribute('data-scope');
-    }
-
-    var next = node.parentNode;
-    if (next && next !== document) {
-      return pw.node.scopeName(next);
-    }
-  },
-
-  // finds and returns prop for node
-  prop: function (node) {
-    if (node.getAttribute('data-prop')) {
-      return node;
-    }
-
-    var next = node.parentNode;
-    if (next && next !== document) {
-      return pw.node.prop(next);
-    }
-  },
-
-  // returns the name of the prop for node
-  propName: function (node) {
-    if (node.getAttribute('data-prop')) {
-      return node.getAttribute('data-prop');
-    }
-
-    var next = node.parentNode;
-    if (next && next !== document) {
-      return pw.node.propName(next);
-    }
-  },
-
-  // returns the name of the version for node
-  versionName: function (node) {
-    if (node.hasAttribute('data-version')) {
-      return node.getAttribute('data-version');
-    }
-  },
-
-  // creates a context in which view manipulations can occur
-  invoke: function(node, cb) {
-    cb.call(node);
-  },
-
-  invokeWithData: function(node, data, cb) {
-    if (pw.node.isNodeList(node)) {
-      node = pw.node.toA(node);
-    }
-
-    node = Array.ensure(node);
-    data = Array.ensure(data);
-
-    node.forEach(function (e, i) {
-      cb.call(e, data[i]);
-    });
-  },
-
-  match: function(node, data) {
-    if (pw.node.isNodeList(node)) {
-      node = pw.node.toA(node);
-    }
-
-    node = Array.ensure(node);
-    data = Array.ensure(data);
-
-    var collection = data.reduce(function (c, dm, i) {
-      // get the view, or if we're out just use the last one
-      var v = n[i] || n[n.length - 1];
-
-      var dv = v.cloneNode(true);
-      v.parentNode.insertBefore(dv);
-      return c.concat([dv])
-    }, []);
-
-    node.forEach(function (o) {
-      o.parentNode.removeChild(o);
-    });
-
-    return collection;
-  },
-
-  repeat: function(node, data, cb) {
-    pw.node.invokeWithData(pw.node.match(node, data), data, cb);
-  },
-
-  // binds an object to a node
-  bind: function (data, node, cb) {
-    var scope = pw.node.findBindings(node)[0];
-
-    pw.node.invokeWithData(node, data, function(dm) {
-      if (!dm) {
-        return;
-      }
-
-      if(dm.id) {
-        this.setAttribute('data-id', dm.id);
-      }
-
-      pw.node.bindDataToScope(dm, scope, node);
-
-      if(!(typeof cb === 'undefined')) {
-        cb.call(this, dm);
-      }
-    });
-  },
-
-  apply: function (data, node, cb) {
-    var c = pw.node.match(node, data);
-    pw.node.bind(data, c, cb);
-    return c;
-  },
-
-  findBindings: function (node) {
-    var bindings = [];
-    pw.node.breadthFirst(node, function() {
-      var o = this;
-
-      var scope = o.getAttribute('data-scope');
-
-      if(!scope) {
-        return;
-      }
-
-      var props = [];
-      pw.node.breadthFirst(o, function() {
-        var so = this;
-
-        // don't go into deeper scopes
-        if(o != so && so.getAttribute('data-scope')) {
-          return;
-        }
-
-        var prop = so.getAttribute('data-prop');
-
-        if(!prop) {
-          return;
-        }
-
-        props.push({
-          prop: prop,
-          doc: so
-        });
-      });
-
-      bindings.push({
-        scope: scope,
-        props: props,
-        doc: o,
-      });
-    });
-
-    return bindings;
-  },
-
-  bindDataToScope: function (data, scope, node) {
-    if(!data || !scope) {
-      return;
-    }
-
-    scope['props'].forEach(function (p) {
-      k = p['prop'];
-      v = data[k];
-
-      if(!v) {
-        v = '';
-      }
-
-      if(typeof v === 'object') {
-        pw.node.bindValueToNode(v['__content'], p['doc']);
-        pw.node.bindAttributesToNode(v['__attrs'], p['doc']);
-      } else {
-        pw.node.bindValueToNode(v, p['doc']);
-      }
-    });
-  },
-
-  bindAttributesToNode: function (attrs, node) {
-    var nAtrs = pw.attrs.init(pw.view.init(node));
-
-    for(var attr in attrs) {
-      var v = attrs[attr];
-      if(typeof v === 'function') {
-        v = v.call(node.getAttribute(attr));
-      }
-
-      if (v) {
-        if (v instanceof Array) {
-          v.forEach(function (attrInstruction) {
-            nAtrs[attrInstruction[0]](attr, attrInstruction[1]);
-          });
-        } else {
-          nAtrs.set(attr, v);
-        }
-      } else {
-        nAtrs.remove(attr);
-      }
-    }
-  },
-
-  bindValueToNode: function (value, node) {
-    if(pw.node.isTagWithoutValue(node)) {
-      return;
-    }
-
-    //TODO handle other form fields (port from pakyow-presenter)
-    if (node.tagName === 'INPUT' && node.type === 'checkbox') {
-      if (value === true || (node.value && value === node.value)) {
-        node.checked = true;
-      } else {
-        node.checked = false;
-      }
-    } else if (node.tagName === 'TEXTAREA' || pw.node.isSelfClosingTag(node)) {
-      node.value = value;
-    } else {
-      if (value) {
-        node.innerHTML = value;
-      }
-    }
-  },
-
-  isTagWithoutValue: function(node) {
-    return valuelessTags.indexOf(node.tagName) != -1 ? true : false;
-  },
-
-  isSelfClosingTag: function(node) {
-    return selfClosingTags.indexOf(node.tagName) != -1 ? true : false;
-  },
-
-  breadthFirst: function (node, cb) {
-    var queue = [node];
-    while (queue.length > 0) {
-      var subNode = queue.shift();
-      if (!subNode) continue;
-      if(typeof subNode == "object" && "nodeType" in subNode && subNode.nodeType === 1 && subNode.cloneNode) {
-        cb.call(subNode);
-      }
-
-      var children = subNode.childNodes;
-      if (children) {
-        for(var i = 0; i < children.length; i++) {
-          queue.push(children[i]);
-        }
-      }
-    }
-  },
-
-  isNodeList: function(nodes) {
-    return typeof nodes.length !== 'undefined';
-  },
-
-  byAttr: function (node, attr, value) {
-    return pw.node.all(node).filter(function (o) {
-      var ov = o.getAttribute(attr);
-      return ov !== null && ((typeof value) === 'undefined' || ov == value);
-    });
-  },
-
-  setAttr: function (node, attr, value) {
-    if (attr === 'style') {
-      value.pairs().forEach(function (kv) {
-        node.style[kv[0]] = kv[1];
-      });
-    } else {
-      if (attr === 'class') {
-        value = value.join(' ');
-      }
-
-      if (attr === 'checked') {
-        if (value) {
-          value = 'checked';
-        } else {
-          value = '';
-        }
-
-        node.checked = value;
-      }
-
-      node.setAttribute(attr, value);
-    }
-  },
-
-  all: function (node) {
-    var arr = [];
-
-    if (!node) {
-      return arr;
-    }
-
-    if(document !== node) {
-      arr.push(node);
-    }
-
-    return arr.concat(pw.node.toA(node.getElementsByTagName('*')));
-  },
-
-  before: function (node, newNode) {
-    node.parentNode.insertBefore(newNode, node);
-  },
-
-  after: function (node, newNode) {
-    node.parentNode.insertBefore(newNode, this.nextSibling);
-  },
-
-  replace: function (node, newNode) {
-    node.parentNode.replaceChild(newNode, node);
-  },
-
-  append: function (node, newNode) {
-    node.appendChild(newNode);
-  },
-
-  prepend: function (node, newNode) {
-    node.insertBefore(newNode, node.firstChild);
-  },
-
-  remove: function (node) {
-    node.parentNode.removeChild(node);
-  },
-
-  clear: function (node) {
-    while (node.firstChild) {
-      pw.node.remove(node.firstChild);
-    }
-  },
-
-  title: function (node, value) {
-    var titleNode;
-    if (titleNode = node.getElementsByTagName('title')[0]) {
-      titleNode.innerText = value;
-    }
-  },
-
-  toA: function (nodeSet) {
-    return Array.prototype.slice.call(nodeSet);
-  },
-
-  serialize: function (node) {
-    var json = {};
-    var working;
-    var value;
-    var split, last;
-    var previous, previous_name;
-    node.querySelectorAll('input, select, textarea').forEach(function (input) {
-      working = json;
-      split = input.name.split('[');
-      last = split[split.length - 1];
-      split.forEach(function (name) {
-        value = pw.node.value(input);
-
-        if (name == ']') {
-          if (!(previous[previous_name] instanceof Array)) {
-            previous[previous_name] = [];
-          }
-
-          if (value) {
-            previous[previous_name].push(value);
-          }
-        }
-
-        if (name != last) {
-          value = {};
-        }
-
-        name = name.replace(']', '');
-
-        if (name == '' || name == '_method') {
-          return;
-        }
-
-        if (!working[name]) {
-          working[name] = value;
-        }
-
-        previous = working;
-        previous_name = name;
-        working = working[name];
-      });
-    });
-
-    return json;
-  }
-};
-pw.attrs = {
-  init: function (v_or_vs) {
-    return new pw_Attrs(pw.collection.init(v_or_vs));
-  }
-};
-
-var attrTypes = {
-  hash: ['style'],
-  bool: ['selected', 'checked', 'disabled', 'readonly', 'multiple'],
-  mult: ['class']
-};
-
-var pw_Attrs = function (collection) {
-  this.views = collection.views;
-};
-
-pw_Attrs.prototype = {
-  findType: function (attr) {
-    if (attrTypes.hash.indexOf(attr) > -1) return 'hash';
-    if (attrTypes.bool.indexOf(attr) > -1) return 'bool';
-    if (attrTypes.mult.indexOf(attr) > -1) return 'mult';
-    return 'text';
-  },
-
-  findValue: function (view, attr) {
-    switch (attr) {
-      case 'class':
-        return view.node.classList;
-      case 'style':
-        return view.node.style;
-    }
-
-    if (this.findType(attr) === 'bool') {
-      return view.node.hasAttribute(attr);
-    } else {
-      return view.node.getAttribute(attr);
-    }
-  },
-
-  set: function (attr, value) {
-    this.views.forEach(function (view) {
-      pw.node.setAttr(view.node, attr, value);
-    });
-  },
-
-  remove: function (attr) {
-    this.views.forEach(function (view) {
-      view.node.removeAttribute(attr);
-    });
-  },
-
-  ensure: function (attr, value) {
-    this.views.forEach(function (view) {
-      var currentValue = this.findValue(view, attr);
-
-      if (attr === 'class') {
-        if (!currentValue.contains(value)) {
-          currentValue.add(value);
-        }
-      } else if (attr === 'style') {
-        value.pairs().forEach(function (kv) {
-          view.node.style[kv[0]] = kv[1];
-        });
-      } else if (this.findType(attr) === 'bool') {
-        if (!view.node.hasAttribute(attr)) {
-          pw.node.setAttr(view.node, attr, attr);
-        }
-      } else { // just a text attr
-        var currentValue = view.node.getAttribute(attr) || '';
-        if (!currentValue.match(value)) {
-          pw.node.setAttr(view.node, attr, currentValue + value);
-        }
-      }
-    }, this);
-  },
-
-  deny: function (attr, value) {
-    this.views.forEach(function (view) {
-      var currentValue = this.findValue(view, attr);
-      if (attr === 'class') {
-        if (currentValue.contains(value)) {
-          currentValue.remove(value);
-        }
-      } else if (attr === 'style') {
-        value.pairs().forEach(function (kv) {
-          view.node.style[kv[0]] = view.node.style[kv[0]].replace(kv[1], '');
-        });
-      } else if (this.findType(attr) === 'bool') {
-        if (view.node.hasAttribute(attr)) {
-          view.node.removeAttribute(attr);
-        }
-      } else { // just a text attr
-        pw.node.setAttr(view.node, attr, view.node.getAttribute(attr).replace(value, ''));
-      }
-    }, this);
-  },
-
-  insert: function (attr, value) {
-    this.views.forEach(function (view) {
-      var currentValue = this.findValue(view, attr);
-
-      switch (attr) {
-        case 'class':
-          currentValue.add(value);
-          break;
-        default:
-          pw.node.setAttr(view.node, attr, currentValue + value);
-          break;
-      }
-    }, this);
-  }
-};
-/*
-  State related functions.
-*/
-
-pw.state = {
-  build: function (sigArr, parentObj) {
-    var nodeState;
-    return sigArr.reduce(function (acc, sig) {
-      if (nodeState = pw.state.buildForNode(sig, parentObj)) {
-        acc.push(nodeState);
-      }
-
-      return acc;
-    }, []);
-  },
-
-  buildForNode: function (sigTuple, parentObj) {
-    var sig = sigTuple[0];
-    var obj = {};
-
-    if (sig.type === 'scope') {
-      obj.id = sig.node.getAttribute('data-id');
-      obj.scope = sig.node.getAttribute('data-scope');
-    } else if (sig.type === 'prop' && parentObj) {
-      parentObj[sig.node.getAttribute('data-prop')] = pw.node.value(sig.node);
-      return;
-    }
-
-    obj['__nested'] = pw.state.build(sigTuple[1], obj);
-
-    return obj;
-  },
-
-  // creates and returns a new pw_State for the document or node
-  init: function (node, observer) {
-    return new pw_State(node, observer);
-  }
-};
-
-
-/*
-  pw_State represents the state for a document or node.
-*/
-
-var pw_State = function (node) {
-  this.node = node;
-  //FIXME storing diffs is probably better than full snapshots
-  this.snapshots = [];
-  this.update();
-}
-
-pw_State.prototype = {
-  update: function () {
-    this.snapshots.push(pw.state.build(pw.node.significant(this.node)));
-  },
-
-  // gets the current represented state from the node and diffs it with the current state
-  diffNode: function (node) {
-    if (node.hasAttribute('data-ui')) {
-      return {
-        '__nested': pw.state.build(pw.node.significant(node))
-      };
-    }
-
-    return pw.state.build(pw.node.significant(pw.node.scope(node)))[0];
-  },
-
-  revert: function () {
-    var initial = pw.util.dup(this.snapshots[0]);
-    this.snapshots = [initial];
-    return initial;
-  },
-
-  rollback: function () {
-    this.snapshots.pop();
-    return this.current();
-  },
-
-  // returns the current state for a node
-  node: function (nodeState) {
-    return this.current.flatten().find(function (state) {
-      return state.scope === nodeState.scope && state.id === nodeState.id;
-    });
-  },
-
-  append: function (state) {
-    var copy = this.copy();
-    copy.push(state);
-    this.snapshots.push(copy);
-  },
-
-  prepend: function (state) {
-    var copy = this.copy();
-    copy.unshift(state);
-    this.snapshots.push(copy);
-  },
-
-  remove: function (state) {
-    var copy = this.copy();
-    var match = copy.find(function (s) {
-      return s.id === state.id;
-    });
-
-    if (match) {
-      copy.splice(copy.indexOf(match), 1);
-      this.snapshots.push(copy);
-    }
-  },
-
-  copy: function () {
-    return pw.util.dup(this.current());
-  },
-
-  current: function () {
-    return this.snapshots[this.snapshots.length - 1];
-  },
-
-  initial: function () {
-    return this.snapshots[0];
-  }
-};
-/*
-  View related functions.
-*/
-
-pw.view = {
-  // creates and returns a new pw_View for the document or node
-  init: function (node) {
-    return new pw_View(node);
-  },
-
-  fromStr: function (str) {
-    var nodeType = 'div';
-
-    if (str.match(/^<tr/) || str.match(/^<tbody/)) {
-      nodeType = 'table';
-    }
-
-    var e = document.createElement(nodeType);
-    e.innerHTML = str;
-
-    return pw.view.init(e.childNodes[0]);
-  }
-};
-
-/*
-  pw_View contains a document with state. It watches for
-  interactions with the document that trigger mutations
-  in state. It can also apply state to the view.
-*/
-
-var pw_View = function (node) {
-  this.node = node;
-}
-
-pw_View.prototype = {
-  clone: function () {
-    return pw.view.init(this.node.cloneNode(true));
-  },
-
-  // pakyow api
-
-  title: function (value) {
-    pw.node.title(this.node, value);
-  },
-
-  text: function (value) {
-    this.node.innerText = value;
-  },
-
-  html: function (value) {
-    this.node.innerHTML = value
-  },
-
-  component: function (name) {
-    return pw.collection.init(
-      pw.node.byAttr(this.node, 'data-ui', name).reduce(function (views, node) {
-        return views.concat(pw.view.init(node));
-      }, []), this);
-  },
-
-  attrs: function () {
-    return pw.attrs.init(this);
-  },
-
-  invoke: function (cb) {
-    pw.node.invoke(this.node, cb);
-  },
-
-  match: function (data) {
-    pw.node.match(this.node, data);
-  },
-
-  invokeWithData: function (data, cb) {
-    pw.node.invokeWithData(this.node, data, cb);
-  },
-
-  repeat: function (data, cb) {
-    pw.node.repeat(this.node, data, cb);
-  },
-
-  bind: function (data, cb) {
-    pw.node.bind(data, this.node, cb);
-  },
-
-  apply: function (data, cb) {
-    pw.node.apply(data, this.node, cb);
-  },
-
-  use: function (version, cb) {
-    var self = this;
-
-    if (this.node.getAttribute('data-version') != version) {
-      this.node.setAttribute('data-version', version);
-
-      var lookup = {
-        scope: this.node.getAttribute('data-scope'),
-        version: version
-      };
-
-      window.socket.fetchView(lookup, function (view) {
-        view.node.setAttribute('data-channel', self.node.getAttribute('data-channel'));
-        pw.node.replace(self.node, view.node);
-        self.node = view.node;
-        cb();
-      });
-    } else {
-      cb();
-    }
-  },
-
-  setEndpoint: function (endpoint) {
-    this.endpoint = endpoint;
-    return this;
-  },
-
-  first: function () {
-    return this;
-  },
-
-  length: function () {
-    return 1;
-  }
-};
-
-// pass through lookups
-['scope', 'prop'].forEach(function (method) {
-  pw_View.prototype[method] = function (name) {
-    return pw.collection.init(
-      pw.node.byAttr(this.node, 'data-' + method, name).reduce(function (views, node) {
-        return views.concat(pw.view.init(node));
-      }, []), this, name);
-  };
-});
-
-// pass through functions without view
-['remove', 'clear', 'versionName'].forEach(function (method) {
-  pw_View.prototype[method] = function () {
-    return pw.node[method](this.node);
-  };
-});
-
-// pass through functions with view
-['after', 'before', 'replace', 'append', 'prepend', 'insert'].forEach(function (method) {
-  pw_View.prototype[method] = function (view) {
-    return pw.node[method](this.node, view.node);
-  };
-});
-pw.collection = {
-  init: function (view_or_views, parent, scope) {
-    if (view_or_views instanceof pw_Collection) {
-      return view_or_views
-    } else if (view_or_views.constructor !== Array) {
-      view_or_views = [view_or_views];
-    }
-
-    return new pw_Collection(view_or_views, parent, scope);
-  },
-
-  fromNodes: function (nodes, parent, scope) {
-    return pw.collection.init(nodes.map(function (node) {
-      return pw.view.init(node);
-    }), parent, scope);
-  }
-};
-
-var pw_Collection = function (views, parent, scope) {
-  this.views = views;
-  this.parent = parent;
-  this._scope = scope;
-};
-
-pw_Collection.prototype = {
-  clone: function () {
-    return pw.collection.init(this.views.map(function (view) {
-      return view.clone();
-    }));
-  },
-
-  last: function () {
-    return this.views[this.length() - 1];
-  },
-
-  first: function () {
-    return this.views[0];
-  },
-
-  removeView: function(view) {
-    var index = this.views.indexOf(view);
-
-    if (index > -1) {
-      this.views.splice(index, 1)[0].remove();
-    }
-  },
-
-  addView: function(view_or_views) {
-    var views = [];
-
-    if (view_or_views instanceof pw_Collection) {
-      views = view_or_views.views;
-    } else {
-      views.push(view_or_views);
-    }
-
-    if (this.length() > 0) {
-      views.forEach(function (view) {
-        pw.node.after(this.last().node, view.node);
-      }, this);
-    } else if (this.parent) {
-      views.forEach(function (view) {
-        this.parent.append(view);
-      }, this);
-    }
-
-    this.views = this.views.concat(views);
-  },
-
-  order: function (orderedIds) {
-    orderedIds.forEach(function (id) {
-      if (!id) {
-        return;
-      }
-
-      var match = this.views.find(function (view) {
-        return view.node.getAttribute('data-id') == id.toString();
-      });
-
-      if (match) {
-        match.node.parentNode.appendChild(match.node);
-
-        // also reorder the list of views
-        var i = this.views.indexOf(match);
-        this.views.splice(i, 1);
-        this.views.push(match);
-      }
-    }, this);
-  },
-
-  length: function () {
-    return this.views.length;
-  },
-
-  // pakyow api
-
-  attrs: function () {
-    return pw.attrs.init(this.views);
-  },
-
-  append: function (data) {
-    data = Array.ensure(data);
-
-    var last = this.last();
-    this.views.push(last.append(data));
-    return last;
-  },
-
-  prepend: function(data) {
-    data = Array.ensure(data);
-
-    var prependedViews = data.map(function (datum) {
-      var view = this.first().prepend(datum);
-      this.views.push(view);
-      return view;
-    }, this);
-
-    return pw.collection.init(prependedViews);
-  },
-
-  invoke: function (cb) {
-    pw.node.invoke(this.views, cb);
-  },
-
-  invokeWithData: function(data, fn) {
-    data = Array.ensure(data);
-
-    this.views.forEach(function (view, i) {
-      fn.call(view, data[i]);
-    });
-  },
-
-  match: function (data, fn) {
-    data = Array.ensure(data);
-
-    if (data.length === 0) {
-      this.remove();
-      return fn.call(this);
-    } else {
-      var firstView;
-      var firstParent;
-
-      if (this.views[0]) {
-        firstView = this.views[0].clone();
-        firstParent = this.views[0].node.parentNode;
-      }
-
-      this.views.slice(0).forEach(function (view) {
-        var id = view.node.getAttribute('data-id');
-
-        if (!id && data[0].id) {
-          this.removeView(view);
-          return;
-        } else if (id) {
-          if (!data.find(function (datum) { return datum.id && datum.id.toString() === id })) {
-            this.removeView(view);
-          }
-        }
-      }, this);
-
-      if (data.length > this.length()) {
-        var self = this;
-        this.endpoint.template(this, function (view) {
-          if (!view) {
-            view = firstView.clone();
-            self.parent = pw.view.init(firstParent);
-          }
-
-          data.forEach(function (datum) {
-            if (!self.views.find(function (view) {
-              return view.node.getAttribute('data-id') === (datum.id || '').toString()
-            })) {
-              var viewToAdd = view.clone();
-
-              if (viewToAdd instanceof pw_Collection) {
-                viewToAdd = viewToAdd.views[0];
-              }
-
-              viewToAdd.node.setAttribute('data-id', datum.id);
-              self.addView(viewToAdd);
-
-              pw.component.findAndInit(viewToAdd.node);
-            }
-          }, self);
-
-          return fn.call(self);
-        });
-      } else {
-        return fn.call(this);
-      }
-    }
-
-    return this;
-  },
-
-  repeat: function (data, fn) {
-    this.match(data, function () {
-      this.invokeWithData(data, fn);
-    });
-  },
-
-  bind: function (data, fn) {
-    this.invokeWithData(data, function(datum) {
-      this.bind(datum);
-
-      if(!(typeof fn === 'undefined')) {
-        fn.call(this, datum);
-      }
-    });
-
-    return this;
-  },
-
-  apply: function (data, fn) {
-    this.match(data, function () {
-      var id;
-
-      this.order(data.map(function (datum) {
-        if (id = datum.id) {
-          return id.toString();
-        }
-      }));
-
-      this.bind(data, fn);
-    });
-  },
-
-  version: function (data, fn) {
-    var self = this;
-    this.match(data, function () {
-      this.invokeWithData(data, fn);
-    });
-  },
-
-  setEndpoint: function (endpoint) {
-    this.endpoint = endpoint;
-    return this;
-  }
-};
-
-// lookup functions
-['scope', 'prop', 'component'].forEach(function (method) {
-  pw_Collection.prototype[method] = function (name) {
-    return pw.collection.init(
-      this.views.reduce(function (views, view) {
-        return views.concat(view[method](name).views);
-      }, [])
-    );
-  };
-});
-
-// pass through functions
-['remove', 'clear', 'text', 'html'].forEach(function (method) {
-  pw_Collection.prototype[method] = function (arg) {
-    this.views.forEach(function (view) {
-      view[method](arg);
-    });
-  };
-});
-/*
-  Component init.
-*/
-
-pw.init.register(function () {
-  pw.component.findAndInit(document.querySelectorAll('body')[0]);
-});
-
-/*
-  Component related functions.
-*/
-
-// stores component functions by name
-var components = {};
-
-// stores component instances by channel
-var channelComponents = {};
-var channelBroadcasts = {};
-
-// component instances
-var componentInstances = {};
-
-pw.component = {
-  init: function (view, config) {
-    return new pw_Component(view, config);
-  },
-
-  resetChannels: function () {
-    channelComponents = {};
-  },
-
-  findAndInit: function (node) {
-    pw.node.byAttr(node, 'data-ui').forEach(function (uiNode) {
-      if (uiNode._ui) {
-        return;
-      }
-
-      var name = uiNode.getAttribute('data-ui');
-      var cfn = components[name] || pw.component.init;
-
-      if (!componentInstances[name]) {
-        componentInstances[name] = [];
-      }
-
-      var channel = uiNode.getAttribute('data-channel');
-      var config = uiNode.getAttribute('data-config');
-      var view = pw.view.init(uiNode);
-      var id = componentInstances[name].length;
-
-      var component = new cfn(view, pw.component.buildConfigObject(config), name, id);
-      component.init(view, config, name);
-
-      pw.component.registerForChannel(component, channel);
-      componentInstances[name].push(component);
-
-      uiNode._ui = true;
-    });
-  },
-
-  push: function (packet) {
-    var channel = packet.channel;
-    var payload = packet.payload;
-    var instruct = payload.instruct;
-
-    (channelComponents[channel] || []).forEach(function (component) {
-      if (instruct) {
-        component.instruct(channel, instruct);
-      } else {
-        component.message(channel, payload);
-      }
-    });
-  },
-
-  register: function (name, fn) {
-    var proto = pw_Component.prototype;
-
-    Object.getOwnPropertyNames(proto).forEach(function (method) {
-      fn.prototype[method] = proto[method];
-    });
-
-    components[name] = fn;
-  },
-
-  buildConfigObject: function(configString) {
-    if (!configString) {
-      return {};
-    }
-
-    return configString.split(';').reduce(function (config, option) {
-      var kv = option.trim().split(':');
-      config[kv[0].trim()] = kv[1].trim();
-      return config;
-    }, {});
-  },
-
-  registerForChannel: function (component, channel) {
-    // store component instance by channel for messaging
-    if (!channelComponents[channel]) {
-      channelComponents[channel] = [];
-    }
-
-    channelComponents[channel].push(component);
-  },
-
-  registerForBroadcast: function (channel, cb, component) {
-    if (!channelBroadcasts[channel]) {
-      channelBroadcasts[channel] = [];
-    }
-
-    channelBroadcasts[channel].push([cb, component]);
-  },
-
-  deregisterForBroadcast: function (channel, component) {
-    var components = channelBroadcasts[channel];
-
-    var instanceTuple = components.find(function (tuple) {
-      return tuple[1] == component;
-    });
-
-    var i = components.indexOf(instanceTuple);
-    components.splice(i, 1);
-  },
-
-  broadcast: function (channel, payload) {
-    (channelBroadcasts[channel] || []).forEach(function (cbTuple) {
-      cbTuple[0].call(cbTuple[1], payload);
-    });
-  }
-};
-
-/*
-  pw_Component makes it possible to build custom controls.
-*/
-
-var pw_Component = function (view, config, name) {
-  // placeholder
-};
-
-pw_Component.prototype = {
-  init: function (view, config, name) {
-    var node = view.node;
-    this.view = view;
-    this.node = node;
-    this.config = config;
-    this.name = name;
-    this.templates = {};
-    var self = this;
-
-    // setup templates
-    pw.node.toA(node.querySelectorAll(':scope > *[data-template]')).forEach(function (templateNode) {
-      var cloned = templateNode.cloneNode(true);
-      pw.node.remove(templateNode);
-
-      var scope = cloned.getAttribute('data-scope');
-
-      if (this.templates[scope]) {
-        this.templates[scope].views.push(pw.view.init(cloned));
-      } else {
-        this.templates[scope] = pw.collection.init(pw.view.init(cloned));
-      }
-
-      cloned.removeAttribute('data-template');
-    }, this);
-
-    // setup our initial state
-    this.state = pw.state.init(this.node);
-
-    // register as a dependent to the parent component
-    if (this.dCb) {
-      var parentComponent = pw.node.component(this.node.parentNode);
-
-      if (parentComponent) {
-        parentComponent.addEventListener('mutated', function (evt) {
-          self.transform(self.dCb(evt.target._evtData));
-        });
-
-        self.transform(self.dCb(pw.state.init(parentComponent).current()));
-      }
-    }
-
-    // make it mutable
-    var mutableCb = function (evt) {
-      var scope = pw.node.scope(evt.target);
-
-      if (scope) {
-        evt.preventDefault();
-        self.mutated(scope);
-      }
-    };
-
-    node.addEventListener('submit', mutableCb);
-    node.addEventListener('change', function (evt) {
-      if (!pw.node.inForm(evt.target)) {
-        mutableCb(evt);
-      }
-    });
-
-    //TODO define other mutable things
-
-    if (this.inited) {
-      this.inited();
-    }
-  },
-
-  listen: function (channel, cb) {
-    pw.component.registerForBroadcast(channel, cb, this);
-  },
-
-  ignore: function (channel) {
-    pw.component.deregisterForBroadcast(channel, this);
-  },
-
-  // Bubbles an event up to a parent component. Intended to be used
-  // as an alternative to `broadcast` in cases where child components
-  // have an impact on their parents.
-  bubble: function (channel, payload) {
-    var parentComponent = pw.node.component(this.node.parentNode);
-
-    (channelBroadcasts[channel] || []).forEach(function (cbTuple) {
-      if (cbTuple[1].node == parentComponent) {
-        cbTuple[0].call(cbTuple[1], payload);
-      }
-    });
-  },
-
-  // Trickles an event down to child components. Intended to be used
-  // as an alternative to `broadcast` in cases where parent components
-  // have an impact on their children.
-  trickle: function (channel, payload) {
-    var channels = (channelBroadcasts[channel] || []);
-    pw.node.toA(this.node.getElementsByTagName('*')).forEach(function (node) {
-      channels.forEach(function (cbTuple) {
-        if (cbTuple[1].node == node) {
-          cbTuple[0].call(cbTuple[1], payload);
-        }
-      });
-    })
-  },
-
-  //TODO this is pretty similary to processing instructions
-  // for views in that we also have to handle the empty case
-  //
-  // there might be an opportunity for some refactoring
-  instruct: function (channel, instructions) {
-    this.endpoint = pw.instruct;
-
-    var current = this.state.current();
-    if (current.length === 1) {
-      var view = this.view.scope(current[0].scope);
-      var node = view.views[0].node;
-      if (node.getAttribute('data-version') === 'empty') {
-        var self = this;
-        pw.instruct.template(view, function (rview) {
-          var parent = node.parentNode;
-          parent.replaceChild(rview.node, node);
-
-          instructions.forEach(function (instruction) {
-            self[instruction[0]](instruction[1]);
-          });
-        });
-
-        return;
-      }
-    }
-
-    instructions.forEach(function (instruction) {
-      this[instruction[0]](instruction[1]);
-    }, this);
-  },
-
-  message: function (channel, payload) {
-    // placeholder
-  },
-
-  mutated: function (node) {
-    this.mutation(this.state.diffNode(node));
-    this.state.update();
-
-    pw.node.trigger('mutated', this.node, this.state.current());
-  },
-
-  mutation: function (mutation) {
-    // placeholder
-  },
-
-  transform: function (state) {
-    this._transform(state);
-  },
-
-  _transform: function (state) {
-    if (!state) {
-      return;
-    }
-
-    if (state.length > 0) {
-      this.view.scope(state[0].scope).setEndpoint(this.endpoint || this).apply(state);
-    } else {
-      pw.node.breadthFirst(this.view.node, function () {
-        if (this.hasAttribute('data-scope')) {
-          pw.node.remove(this);
-        }
-      });
-    }
-
-    pw.node.trigger('mutated', this.node, this.state.current());
-  },
-
-  revert: function () {
-    this.transform(this.state.revert());
-  },
-
-  rollback: function () {
-    this.transform(this.state.rollback());
-  },
-
-  template: function (view, cb) {
-    var template;
-
-    if (template = this.templates[view.scope]) {
-      cb(template);
-    }
-  },
-
-  remove: function (data) {
-    this.state.remove(data);
-    this.transform(this.state.current());
-  },
-
-  append: function (data) {
-    this.state.append(data);
-    this.transform(this.state.current());
-  },
-
-  prepend: function (data) {
-    this.state.prepend(data);
-    this.transform(this.state.current());
-  },
-
-  parent: function () {
-    var parent = pw.node.scope(this.node);
-
-    if (parent) {
-      return pw.state.init(parent).current()[0];
-    }
-  },
-
-  dependent: function (cb) {
-    this.dCb = cb;
-  }
-};
-/*
-  Socket init.
-*/
-
-pw.init.register(function () {
-  pw.socket.init({
-    cb: function (socket) {
-      window.socket = socket;
-      pw.component.broadcast('socket:available');
-    }
-  });
-});
-
-/*
-  Socket related functions.
-*/
-
-pw.socket = {
-  init: function (options) {
-    return pw.socket.connect(
-      options.host,
-      options.port,
-      options.protocol,
-      options.connId,
-      options.cb
-    );
-  },
-
-  connect: function (host, port, protocol, connId, cb) {
-    if(typeof host === 'undefined') host = window.location.hostname;
-    if(typeof port === 'undefined') port = window.location.port;
-    if(typeof protocol === 'undefined') protocol = window.location.protocol;
-    if(typeof connId === 'undefined') connId = document.getElementsByTagName('body')[0].getAttribute('data-socket-connection-id');
-
-    if (!connId) {
-      return;
-    }
-
-    var wsUrl = '';
-
-    if (protocol === 'http:') {
-      wsUrl += 'ws://';
-    } else if (protocol === 'https:') {
-      wsUrl += 'wss://';
-    }
-
-    wsUrl += host;
-
-    if (port) {
-      wsUrl += ':' + port;
-    }
-
-    wsUrl += '/?socket_connection_id=' + connId;
-
-    return new pw_Socket(wsUrl, cb);
-  }
-};
-
-var pw_Socket = function (url, cb) {
-  var self = this;
-
-  this.callbacks = {};
-
-  this.url = url;
-  this.initCb = cb;
-
-  this.ws = new WebSocket(url);
-
-  this.id = url.split('socket_connection_id=')[1];
-
-  var pingInterval;
-
-  this.ws.onmessage = function (evt) {
-    pw.component.broadcast('socket:loaded');
-
-    var data = JSON.parse(evt.data);
-    if (data.id) {
-      var cb = self.callbacks[data.id];
-      if (cb) {
-        cb.call(this, data);
-        return;
-      }
-    }
-
-    self.message(data);
-  };
-
-  this.ws.onclose = function (evt) {
-    console.log('socket closed');
-    clearInterval(pingInterval);
-    self.reconnect();
-  };
-
-  this.ws.onopen = function (evt) {
-    console.log('socket open');
-
-    if(self.initCb) {
-      self.initCb(self);
-    }
-
-    pingInterval = setInterval(function () {
-      self.send({ action: 'ping' });
-    }, 30000);
-  }
-};
-
-pw_Socket.prototype = {
-  send: function (message, cb) {
-    pw.component.broadcast('socket:loading');
-
-    message.id = pw.util.guid();
-    if (!message.input) {
-      message.input = {};
-    }
-    message.input.socket_connection_id = this.id;
-    this.callbacks[message.id] = cb;
-    this.ws.send(JSON.stringify(message));
-  },
-
-  //TODO handle custom messages (e.g. not pakyow specific)
-  message: function (packet) {
-    console.log('received message');
-    console.log(packet);
-
-    var selector = '*[data-channel="' + packet.channel + '"]';
-
-    if (packet.channel && packet.channel.split(':')[0] === 'component') {
-      pw.component.push(packet);
-      return;
-    }
-
-    var nodes = pw.node.toA(document.querySelectorAll(selector));
-
-    if (nodes.length === 0) {
-      //TODO decide how to handle this condition; there are times where this
-      // is going to be the case and not an error; at one point we were simply
-      // reloading the page, but that doesn't work in all cases
-      return;
-    }
-
-    pw.instruct.process(pw.collection.fromNodes(nodes, selector), packet, this);
-  },
-
-  reconnect: function () {
-    var self = this;
-
-    if (!self.wait) {
-      self.wait = 100;
-    } else {
-      self.wait *= 1.25;
-    }
-
-    console.log('reconnecting socket in ' + self.wait + 'ms');
-
-    setTimeout(function () {
-      pw.socket.init({ cb: self.initCb });
-    }, self.wait);
-  },
-
-  fetchView: function (lookup, cb) {
-    var uri;
-
-    if (window.location.hash) {
-      var arr = window.location.hash.split('#:')[1].split('/');
-      arr.shift();
-      uri = arr.join('/');
-    } else {
-      uri = window.location.pathname + window.location.search;
-    }
-
-    this.send({
-      action: 'fetch-view',
-      lookup: lookup,
-      uri: uri
-    }, function (res) {
-      var view = pw.view.fromStr(res.body);
-
-      if (view.node) {
-        view.node.removeAttribute('data-id');
-        cb(view);
-      } else {
-        cb();
-      }
-    });
-  }
-};
-pw.instruct = {
-  process: function (collection, packet, socket) {
-    if (collection.length() === 1 && collection.views[0].node.getAttribute('data-version') === 'empty') {
-      pw.instruct.fetchView(packet, socket, collection.views[0].node);
-    } else {
-      pw.instruct.perform(collection, packet.payload);
-    }
-  },
-
-  fetchView: function (packet, socket, node) {
-    socket.fetchView({ channel: packet.channel }, function (view) {
-      if (view) {
-        var parent = node.parentNode;
-        parent.replaceChild(view.node, node);
-
-        var selector = '*[data-channel="' + packet.channel + '"]';
-        var nodes = pw.node.toA(parent.querySelectorAll(selector));
-        pw.instruct.perform(pw.collection.fromNodes(nodes, selector), packet.payload);
-      } else {
-        console.log('trouble fetching view :(');
-      }
-    });
-  },
-
-  // TODO: make this smart and cache results, invalidating
-  // if the websocket connection reconnects (since that means
-  // the server probably restarted)
-  template: function (view, cb) {
-    var lookup = {};
-
-    if (!view || !view.first()) {
-      return cb();
-    }
-
-    var node = view.first().node;
-
-    if (node.hasAttribute('data-channel')) {
-      lookup.channel = view.first().node.getAttribute('data-channel');
-    } else if (node.hasAttribute('data-ui') && node.hasAttribute('data-scope')) {
-      lookup.component = pw.node.component(node).getAttribute('data-ui');
-      lookup.scope = node.getAttribute('data-scope');
-    } else {
-      cb();
-      return;
-    }
-
-    window.socket.fetchView(lookup, function (view) {
-      cb(view);
-    });
-  },
-
-  perform: function (collection, instructions, cb) {
-    var self = this;
-    instructions = instructions || [];
-
-    function instruct (subject, instruction) {
-      var method = instruction[0];
-      var value = instruction[1];
-      var nested = instruction[2];
-
-      // remap instructions to the ring name
-      if (method === 'with') {
-        method = 'invoke';
-      }
-
-      if (method === 'for') {
-        method = 'invokeWithData';
-      }
-
-      if (collection[method]) {
-        if (method == 'invoke' || method == 'invokeWithData' || method == 'bind' || method == 'repeat' || method == 'apply' || method == 'version') {
-          var cbLength = collection.length();
-          var cbCount = 0;
-          var nestedCb = function () {
-            cbCount++;
-
-            if (cbCount == cbLength) {
-              next();
-            }
-          }
-          collection.setEndpoint(self)[method].call(collection, value, function (datum) {
-            pw.instruct.perform(this, nested[value.indexOf(datum)], nestedCb);
-          });
-          return;
-        } else if (method == 'attrs') {
-          self.performAttr(collection.attrs(), nested);
-          return;
-        } else if (method == 'use') {
-          collection.setEndpoint(self);
-          collection.use(value, next);
-          return;
-        } else {
-          var mutatedViews = collection[method].call(collection, value);
-        }
-      } else {
-        console.log('could not find method named: ' + method);
-        return;
-      }
-
-      if (nested instanceof Array) {
-        pw.instruct.perform(mutatedViews, nested, next);
-        return;
-      } else if (mutatedViews) {
-        collection = mutatedViews;
-      }
-
-      next();
-    };
-
-    var i = 0;
-    function next() {
-      if (i < instructions.length) {
-        instruct(collection, instructions[i++]);
-      } else {
-        done();
-      }
-    };
-
-    function done() {
-      if (cb) {
-        cb();
-      } else {
-        pw.component.findAndInit(collection.node);
-      }
-    };
-
-    next();
-  },
-
-  performAttr: function (context, attrInstructions) {
-    attrInstructions.forEach(function (attrInstruct) {
-      var attr = attrInstruct[0];
-      var value = attrInstruct[1];
-      var nested = attrInstruct[2];
-
-      if (value) {
-        context.set(attr, value);
-      } else {
-        context[nested[0][0]](attr, nested[0][1]);
-      }
-    });
-  }
-};
-if (!Array.prototype.flatten) {
-  Array.prototype.flatten = function () {
-    return this.reduce(function (flat, toFlatten) {
-      return flat.concat(Array.isArray(toFlatten) ? toFlatten.flatten() : toFlatten);
-    }, []);
-  };
-}
-
-if (!Array.prototype.find) {
-  Array.prototype.find = function(predicate) {
-    if (this == null) {
-      throw new TypeError('Array.prototype.find called on null or undefined');
-    }
-    if (typeof predicate !== 'function') {
-      throw new TypeError('predicate must be a function');
-    }
-    var list = Object(this);
-    var length = list.length >>> 0;
-    var thisArg = arguments[1];
-    var value;
-
-    for (var i = 0; i < length; i++) {
-      value = list[i];
-      if (predicate.call(thisArg, value, i, list)) {
-        return value;
-      }
-    }
-    return undefined;
-  };
-}
-
-Array.ensure = function (value) {
-  if(!(value instanceof Array)) {
-    return [value];
-  }
-
-  return value
-}
-
-NodeList.prototype.forEach = Array.prototype.forEach;
-if (!Object.prototype.pairs) {
-  Object.defineProperty(Object.prototype, "pairs", {
-    value: function() {
-      return Object.keys(this).map(function (key) {
-        return [key, this[key]];
-      }, this);
-    },
-    enumerable: false
-  });
-}
-
-  if (typeof define === "function" && define.amd) {
-    define(pw);
-  } else if (typeof module === "object" && module.exports) {
-    module.exports = pw;
-  } else {
-    this.pw = pw;
-  }
-})();