h5-cli/build/libs/vTemplate.js

hello

"use strict";

var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };

;(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) {
    // shim for using process in browser

    //define("libs/vTemplate", function (require, exports, module) {

    var process = module.exports = {};
    var queue = [];
    var draining = false;
    var currentQueue;
    var queueIndex = -1;

    function cleanUpNextTick() {
      draining = false;
      if (currentQueue.length) {
        queue = currentQueue.concat(queue);
      } else {
        queueIndex = -1;
      }
      if (queue.length) {
        drainQueue();
      }
    }

    function drainQueue() {
      if (draining) {
        return;
      }
      var timeout = setTimeout(cleanUpNextTick);
      draining = true;

      var len = queue.length;
      while (len) {
        currentQueue = queue;
        queue = [];
        while (++queueIndex < len) {
          if (currentQueue) {
            currentQueue[queueIndex].run();
          }
        }
        queueIndex = -1;
        len = queue.length;
      }
      currentQueue = null;
      draining = false;
      clearTimeout(timeout);
    }

    process.nextTick = function (fun) {
      var args = new Array(arguments.length - 1);
      if (arguments.length > 1) {
        for (var i = 1; i < arguments.length; i++) {
          args[i - 1] = arguments[i];
        }
      }
      queue.push(new Item(fun, args));
      if (queue.length === 1 && !draining) {
        setTimeout(drainQueue, 0);
      }
    };

    // v8 likes predictible objects
    function Item(fun, array) {
      this.fun = fun;
      this.array = array;
    }
    Item.prototype.run = function () {
      this.fun.apply(null, this.array);
    };
    process.title = 'browser';
    process.browser = true;
    process.env = {};
    process.argv = [];
    process.version = ''; // empty string to avoid regexp issues
    process.versions = {};

    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');
    };
    process.umask = function () {
      return 0;
    };
  }, {}], 2: [function (require, module, exports) {
    window.vTemplate = require('./lib/virtual-template');
  }, { "./lib/virtual-template": 5 }], 3: [function (require, module, exports) {
    (function (process) {
      /**
       * Convert HTML string to simple-virtual-dom
       */

      var svd = require('simple-virtual-dom');
      var el = svd.el;

      function h2v(html) {
        var root = document.createElement('div');
        root.innerHTML = html;
        root = root.childNodes.length === 1 ? root.childNodes[0] : root;
        return {
          vdom: toVirtualDOM(root),
          dom: root
        };
      }

      function toVirtualDOM(dom) {
        var tagName = dom.tagName.toLowerCase();
        var props = attrsToObj(dom);
        var children = [];
        for (var i = 0, len = dom.childNodes.length; i < len; i++) {
          var node = dom.childNodes[i];
          // TEXT node
          if (node.nodeType === 3) {
            if (node.nodeValue) {
              children.push(node.nodeValue);
            } else {
              children.push(node.textContent);
            }
          } else {
            children.push(toVirtualDOM(node));
          }
        }
        return el(tagName, props, children);
      }

      function attrsToObj(dom) {
        var attrs = dom.attributes;
        var props = {};
        for (var i = 0, len = attrs.length; i < len; i++) {
          var name = attrs[i].name;
          var value = attrs[i].value;
          if (value && value !== 'null') {
            props[name] = value;
          }
        }
        if (dom.style.cssText) {
          props.style = dom.style.cssText;
        }
        return props;
      }

      if (process.env.NODE_ENV) {
        h2v.toVirtualDOM = toVirtualDOM;
      }

      module.exports = h2v;
    }).call(this, require('_process'));
  }, { "_process": 1, "simple-virtual-dom": 6 }], 4: [function (require, module, exports) {
    (function (process) {
      var _ = {};

      /**
       * Shallowly copy properties to object
       * @param {Object} dest
       * @param {Object} src
       * @return {Object} - The result of extending `src` to `dest`.
       */

      _.extend = function (dest, src) {
        for (var key in src) {
          if (src.hasOwnProperty(key)) {
            dest[key] = src[key];
          }
        }
        return dest;
      };

      if (process.env.NODE_ENV) {
        _.nextTick = process.nextTick;
      } else {
        var nextTick = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame;

        if (nextTick) {
          _.nextTick = function () {
            nextTick.apply(window, arguments);
          };
        } else {
          _.nextTick = function (func) {
            // for IE, setTimeout is a cool object instead of function
            // so you cannot simply use nextTick.apply
            setTimeout(func);
          };
        }
      }

      module.exports = _;
    }).call(this, require('_process'));
  }, { "_process": 1 }], 5: [function (require, module, exports) {
    var _ = require('./utils');
    var h2v = require('./h2v');
    var svd = require('simple-virtual-dom');

    var diff = svd.diff;
    var patch = svd.patch;

    function makeTemplateClass(compileFn) {
      function VirtualTemplate(data) {
        this.data = data;
        var domAndVdom = this.makeVirtualDOM();
        this.vdom = domAndVdom.vdom;
        this.dom = domAndVdom.dom;
        this.isDirty = false;
        this.flushCallbacks = [];
      }

      _.extend(VirtualTemplate.prototype, {
        compileFn: compileFn,
        setData: setData,
        makeVirtualDOM: makeVirtualDOM,
        flush: flush
      });

      return VirtualTemplate;
    }

    function setData(data, isSync) {
      _.extend(this.data, data);
      if (typeof isSync === 'boolean' && isSync) {
        this.flush();
      } else if (!this.isDirty) {
        this.isDirty = true;
        var self = this;
        // cache all data change, and only refresh dom before browser's repainting
        _.nextTick(function () {
          self.flush();
        });
      }
      if (typeof isSync === 'function') {
        var callback = isSync;
        this.flushCallbacks.push(callback);
      }
    }

    function flush() {
      // run virtual-dom algorithm
      var newVdom = this.makeVirtualDOM().vdom;
      var patches = diff(this.vdom, newVdom);
      patch(this.dom, patches);
      this.vdom = newVdom;
      this.isDirty = false;
      var callbacks = this.flushCallbacks;
      for (var i = 0, len = callbacks.length; i < len; i++) {
        if (callbacks[i]) {
          callbacks[i]();
        }
      }
      this.flushCallbacks = [];
    }

    function makeVirtualDOM() {
      var html = this.compileFn(this.data);
      return h2v(html);
    }

    module.exports = function (compileFn, data) {
      var VirtualTemplate = makeTemplateClass(compileFn);
      return data ? new VirtualTemplate(data) : VirtualTemplate;
    };
  }, { "./h2v": 3, "./utils": 4, "simple-virtual-dom": 6 }], 6: [function (require, module, exports) {
    exports.el = require('./lib/element');
    exports.diff = require('./lib/diff');
    exports.patch = require('./lib/patch');
  }, { "./lib/diff": 7, "./lib/element": 8, "./lib/patch": 9 }], 7: [function (require, module, exports) {
    var _ = require('./util');
    var patch = require('./patch');
    var listDiff = require('list-diff2');

    function diff(oldTree, newTree) {
      var index = 0;
      var patches = {};
      dfsWalk(oldTree, newTree, index, patches);
      return patches;
    }

    function dfsWalk(oldNode, newNode, index, patches) {
      var currentPatch = [];

      // Node is removed.
      if (newNode === null) {
        // Real DOM node will be removed when perform reordering, so has no needs to do anthings in here
        // TextNode content replacing
      } else if (_.isString(oldNode) && _.isString(newNode)) {
        if (newNode !== oldNode) {
          currentPatch.push({ type: patch.TEXT, content: newNode });
        }
        // Nodes are the same, diff old node's props and children
      } else if (oldNode.tagName === newNode.tagName && oldNode.key === newNode.key) {
        // Diff props
        var propsPatches = diffProps(oldNode, newNode);
        if (propsPatches) {
          currentPatch.push({ type: patch.PROPS, props: propsPatches });
        }
        // Diff children. If the node has a `ignore` property, do not diff children
        if (!isIgnoreChildren(newNode)) {
          diffChildren(oldNode.children, newNode.children, index, patches, currentPatch);
        }
        // Nodes are not the same, replace the old node with new node
      } else {
        currentPatch.push({ type: patch.REPLACE, node: newNode });
      }

      if (currentPatch.length) {
        patches[index] = currentPatch;
      }
    }

    function diffChildren(oldChildren, newChildren, index, patches, currentPatch) {
      var diffs = listDiff(oldChildren, newChildren, 'key');
      newChildren = diffs.children;

      if (diffs.moves.length) {
        var reorderPatch = { type: patch.REORDER, moves: diffs.moves };
        currentPatch.push(reorderPatch);
      }

      var leftNode = null;
      var currentNodeIndex = index;
      _.each(oldChildren, function (child, i) {
        var newChild = newChildren[i];
        currentNodeIndex = leftNode && leftNode.count ? currentNodeIndex + leftNode.count + 1 : currentNodeIndex + 1;
        dfsWalk(child, newChild, currentNodeIndex, patches);
        leftNode = child;
      });
    }

    function diffProps(oldNode, newNode) {
      var count = 0;
      var oldProps = oldNode.props;
      var newProps = newNode.props;

      var key, value;
      var propsPatches = {};

      // Find out different properties
      for (key in oldProps) {
        value = oldProps[key];
        if (newProps[key] !== value) {
          count++;
          propsPatches[key] = newProps[key];
        }
      }

      // Find out new property
      for (key in newProps) {
        value = newProps[key];
        if (!oldProps.hasOwnProperty(key)) {
          count++;
          propsPatches[key] = newProps[key];
        }
      }

      // If properties all are identical
      if (count === 0) {
        return null;
      }

      return propsPatches;
    }

    function isIgnoreChildren(node) {
      return node.props && node.props.hasOwnProperty('ignore');
    }

    module.exports = diff;
  }, { "./patch": 9, "./util": 10, "list-diff2": 11 }], 8: [function (require, module, exports) {
    var _ = require('./util');

    /**
     * Virtual-dom Element.
     * @param {String} tagName
     * @param {Object} props - Element's properties,
     *                       - using object to store key-value pair
     * @param {Array<Element|String>} - This element's children elements.
     *                                - Can be Element instance or just a piece plain text.
     */
    function Element(tagName, props, children) {
      if (!(this instanceof Element)) {
        return new Element(tagName, props, children);
      }

      if (_.isArray(props)) {
        children = props;
        props = {};
      }

      this.tagName = tagName;
      this.props = props || {};
      this.children = children || [];
      this.key = props ? props.key : void 666;

      var count = 0;

      _.each(this.children, function (child, i) {
        if (child instanceof Element) {
          count += child.count;
        } else {
          children[i] = '' + child;
        }
        count++;
      });

      this.count = count;
    }

    /**
     * Render the hold element tree.
     */
    Element.prototype.render = function () {
      var el = document.createElement(this.tagName);
      var props = this.props;

      for (var propName in props) {
        var propValue = props[propName];
        _.setAttr(el, propName, propValue);
      }

      _.each(this.children, function (child) {
        var childEl = child instanceof Element ? child.render() : document.createTextNode(child);
        el.appendChild(childEl);
      });

      return el;
    };

    module.exports = Element;
  }, { "./util": 10 }], 9: [function (require, module, exports) {
    var _ = require('./util');

    var REPLACE = 0;
    var REORDER = 1;
    var PROPS = 2;
    var TEXT = 3;

    function patch(node, patches) {
      var walker = { index: 0 };
      dfsWalk(node, walker, patches);
    }

    function dfsWalk(node, walker, patches) {
      var currentPatches = patches[walker.index];

      var len = node.childNodes ? node.childNodes.length : 0;
      for (var i = 0; i < len; i++) {
        var child = node.childNodes[i];
        walker.index++;
        dfsWalk(child, walker, patches);
      }

      if (currentPatches) {
        applyPatches(node, currentPatches);
      }
    }

    function applyPatches(node, currentPatches) {
      _.each(currentPatches, function (currentPatch) {
        switch (currentPatch.type) {
          case REPLACE:
            var newNode = typeof currentPatch.node === 'string' ? document.createTextNode(currentPatch.node) : currentPatch.node.render();
            node.parentNode.replaceChild(newNode, node);
            break;
          case REORDER:
            reorderChildren(node, currentPatch.moves);
            break;
          case PROPS:
            setProps(node, currentPatch.props);
            break;
          case TEXT:
            if (node.textContent) {
              node.textContent = currentPatch.content;
            } else {
              // fuck ie
              node.nodeValue = currentPatch.content;
            }
            break;
          default:
            throw new Error('Unknown patch type ' + currentPatch.type);
        }
      });
    }

    function setProps(node, props) {
      for (var key in props) {
        if (props[key] === void 666) {
          node.removeAttribute(key);
        } else {
          var value = props[key];
          _.setAttr(node, key, value);
        }
      }
    }

    function reorderChildren(node, moves) {
      var staticNodeList = _.toArray(node.childNodes);
      var maps = {};

      _.each(staticNodeList, function (node) {
        if (node.nodeType === 1) {
          var key = node.getAttribute('key');
          if (key) {
            maps[key] = node;
          }
        }
      });

      _.each(moves, function (move) {
        var index = move.index;
        if (move.type === 0) {
          // remove item
          if (staticNodeList[index] === node.childNodes[index]) {
            // maybe have been removed for inserting
            node.removeChild(node.childNodes[index]);
          }
          staticNodeList.splice(index, 1);
        } else if (move.type === 1) {
          // insert item
          var insertNode = maps[move.item.key] ? maps[move.item.key] // reuse old item
          : _typeof(move.item) === 'object' ? move.item.render() : document.createTextNode(move.item);
          staticNodeList.splice(index, 0, insertNode);
          node.insertBefore(insertNode, node.childNodes[index] || null);
        }
      });
    }

    patch.REPLACE = REPLACE;
    patch.REORDER = REORDER;
    patch.PROPS = PROPS;
    patch.TEXT = TEXT;

    module.exports = patch;
  }, { "./util": 10 }], 10: [function (require, module, exports) {
    var _ = exports;

    _.type = function (obj) {
      return Object.prototype.toString.call(obj).replace(/\[object\s|\]/g, '');
    };

    _.isArray = function isArray(list) {
      return _.type(list) === 'Array';
    };

    _.isString = function isString(list) {
      return _.type(list) === 'String';
    };

    _.each = function each(array, fn) {
      for (var i = 0, len = array.length; i < len; i++) {
        fn(array[i], i);
      }
    };

    _.toArray = function toArray(listLike) {
      if (!listLike) {
        return [];
      }

      var list = [];

      for (var i = 0, len = listLike.length; i < len; i++) {
        list.push(listLike[i]);
      }

      return list;
    };

    _.setAttr = function setAttr(node, key, value) {
      switch (key) {
        case 'style':
          node.style.cssText = value;
          break;
        case 'value':
          var tagName = node.tagName || '';
          tagName = tagName.toLowerCase();
          if (tagName === 'input' || tagName === 'textarea') {
            node.value = value;
          } else {
            // if it is not a input or textarea, use `setAttribute` to set
            node.setAttribute(key, value);
          }
          break;
        default:
          node.setAttribute(key, value);
          break;
      }
    };
  }, {}], 11: [function (require, module, exports) {
    module.exports = require('./lib/diff').diff;
  }, { "./lib/diff": 12 }], 12: [function (require, module, exports) {
    /**
     * Diff two list in O(N).
     * @param {Array} oldList - Original List
     * @param {Array} newList - List After certain insertions, removes, or moves
     * @return {Object} - {moves: <Array>}
     *                  - moves is a list of actions that telling how to remove and insert
     */
    function diff(oldList, newList, key) {
      var oldMap = makeKeyIndexAndFree(oldList, key);
      var newMap = makeKeyIndexAndFree(newList, key);

      var newFree = newMap.free;

      var oldKeyIndex = oldMap.keyIndex;
      var newKeyIndex = newMap.keyIndex;

      var moves = [];

      // a simulate list to manipulate
      var children = [];
      var i = 0;
      var item;
      var itemKey;
      var freeIndex = 0;

      // fist pass to check item in old list: if it's removed or not
      while (i < oldList.length) {
        item = oldList[i];
        itemKey = getItemKey(item, key);
        if (itemKey) {
          if (!newKeyIndex.hasOwnProperty(itemKey)) {
            children.push(null);
          } else {
            var newItemIndex = newKeyIndex[itemKey];
            children.push(newList[newItemIndex]);
          }
        } else {
          var freeItem = newFree[freeIndex++];
          children.push(freeItem || null);
        }
        i++;
      }

      var simulateList = children.slice(0);

      // remove items no longer exist
      i = 0;
      while (i < simulateList.length) {
        if (simulateList[i] === null) {
          remove(i);
          removeSimulate(i);
        } else {
          i++;
        }
      }

      // i is cursor pointing to a item in new list
      // j is cursor pointing to a item in simulateList
      var j = i = 0;
      while (i < newList.length) {
        item = newList[i];
        itemKey = getItemKey(item, key);

        var simulateItem = simulateList[j];
        var simulateItemKey = getItemKey(simulateItem, key);

        if (simulateItem) {
          if (itemKey === simulateItemKey) {
            j++;
          } else {
            // new item, just inesrt it
            if (!oldKeyIndex.hasOwnProperty(itemKey)) {
              insert(i, item);
            } else {
              // if remove current simulateItem make item in right place
              // then just remove it
              var nextItemKey = getItemKey(simulateList[j + 1], key);
              if (nextItemKey === itemKey) {
                remove(i);
                removeSimulate(j);
                j++; // after removing, current j is right, just jump to next one
              } else {
                // else insert item
                insert(i, item);
              }
            }
          }
        } else {
          insert(i, item);
        }

        i++;
      }

      function remove(index) {
        var move = { index: index, type: 0 };
        moves.push(move);
      }

      function insert(index, item) {
        var move = { index: index, item: item, type: 1 };
        moves.push(move);
      }

      function removeSimulate(index) {
        simulateList.splice(index, 1);
      }

      return {
        moves: moves,
        children: children
      };
    }

    /**
     * Convert list to key-item keyIndex object.
     * @param {Array} list
     * @param {String|Function} key
     */
    function makeKeyIndexAndFree(list, key) {
      var keyIndex = {};
      var free = [];
      for (var i = 0, len = list.length; i < len; i++) {
        var item = list[i];
        var itemKey = getItemKey(item, key);
        if (itemKey) {
          keyIndex[itemKey] = i;
        } else {
          free.push(item);
        }
      }
      return {
        keyIndex: keyIndex,
        free: free
      };
    }

    function getItemKey(item, key) {
      if (!item || !key) return void 666;
      return typeof key === 'string' ? item[key] : key(item);
    }

    exports.makeKeyIndexAndFree = makeKeyIndexAndFree; // exports for test
    exports.diff = diff;
  }, {}] }, {}, [2]);

define("libs/vTemplate", function (require, exports, module) {
  module.exports = vTemplate;
});