decca/lib/dom.js

Render interfaces using pure functions and virtual DOM, kinda

'use strict';

var _diff = require('virtual-dom/diff');

var _diff2 = _interopRequireDefault(_diff);

var _patch = require('virtual-dom/patch');

var _patch2 = _interopRequireDefault(_patch);

var _createElement = require('virtual-dom/create-element');

var _createElement2 = _interopRequireDefault(_createElement);

var _build = require('./build');

var _build2 = _interopRequireDefault(_build);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

/*
 * Creates a renderer function. Returns a function `render(vnode, [context])`
 * where `vnode` is the output of `element()`.
 */

function createRenderer(rootEl, dispatch) {
  var tree, rootNode; // virtual-dom states
  return render;

  /*
   * Renders an element `el` (output of `element()`) with the given `context`
   */

  function render(el, context) {
    var build = (0, _build2.default)(context, dispatch);
    update(build, el); // Update DOM
  }

  /*
   * Internal: Updates the DOM tree with the given element `el`.
   * Either builds the initial tree, or makes a patch on the existing tree.
   */

  function update(build, el) {
    if (!tree) {
      // Build initial tree
      tree = build(el);
      rootNode = (0, _createElement2.default)(tree);
      rootEl.innerHTML = '';
      rootEl.appendChild(rootNode);
    } else {
      // Build diff
      var newTree = build(el);
      var delta = (0, _diff2.default)(tree, newTree);
      rootNode = (0, _patch2.default)(rootNode, delta);
      tree = newTree;
    }
  }
}

module.exports = { createRenderer: createRenderer };