Simple virtual dom loop

flux.js

'use strict';

var create = require('virtual-dom/create-element');
var diff = require('virtual-dom/diff');
var patch = require('virtual-dom/patch');
var h = require('virtual-dom/virtual-hyperscript');
var raf = require('raf');

var el = void 0;
var previousVTree = void 0;

var render = function render(vTree) {
  if (el === void 0) {
    el = create(vTree);
    document.getElementsByTagName('body')[0].appendChild(el);
  } else {
    patch(el, diff(previousVTree, vTree));
  }
  previousVTree = vTree;
};

function Widget(initValue) {
  return { text: initValue || '' };
}

Widget.q = function (initValue) {
  return initValue ? [initValue] : [];
};

Widget.formatter = function (state) {
  return state;
};

Widget.render = function (state, q) {
  return h('input', { value: state.text, onkeyup: function onkeyup(e) {
      return q.push(['value', e.target.value]);
    } });
};

Widget.parser = function (state, q) {
  return q.length > 0 ? { text: q.shift()[1].toUpperCase() } : state;
};

function App() {
  return { widget: Widget() };
}

App.q = function () {
  var q = { widget: Widget.q(['value', '']) };
  Object.defineProperty(q, 'length', {
    get: function get() {
      return Object.keys(q).reduce(function (sum, k) {
        return sum + q[k].length;
      }, 0);
    }
  });
  return q;
};

App.render = function (state, q) {
  return h('div', [Widget.render(state.widget, q.widget)]);
};

App.formatter = function (state) {
  return { widget: Widget.formatter(state.widget) };
};

App.parser = function (state, q) {
  return { widget: Widget.parser(state.widget, q.widget) };
};

var loop = function loop(oldState, q) {
  var length = q.length;

  var newState = App.parser(oldState, q);
  if (length > 0) render(App.render(App.formatter(newState), q));

  return raf(function () {
    return loop(newState, q);
  });
};

loop(App(), App.q());