[ Refactor ] Sub View rendering is based on ViewList class now

[ Add ]  3 inserting utility methods

Author: TechQuery

ReadMe.md

@@ -27,7 +27,7 @@
 }
 ```
 
-`source/index.html` [**Template syntax**](https://web-cell.tk/DOM-Renderer/manual/Template.html)
+`source/index.html` [**Template syntax**](https://web-cell.dev/DOM-Renderer/manual/Template.html)
 
 ```HTML
 <template>
@@ -167,7 +167,7 @@ console.log( view.name );     // 'TechQuery'
 
 console.log( view.profile );  // View {}
 
-console.log( view.job );      // [View {}, View {}, View {}]
+console.log( view.job );      // ViewList [View {}, View {}, View {}]
 ```
 
 ### Setter
@@ -187,4 +187,4 @@ nextTick().then(() => {
 
 ## Typical cases
 
-1.  [WebCell](https://web-cell.tk/)
+1.  [WebCell](https://web-cell.dev/)

manual/Template.md

@@ -43,4 +43,4 @@ Source code of **DOM-Renderer** templates is legal [HTML 5 markups][1] with lega
 [1]: https://developer.mozilla.org/en-US/docs/Web/HTML
 [2]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
 [3]: https://developer.mozilla.org/en-US/docs/Web/API/element
-[4]: https://web-cell.tk/DOM-Renderer/class/source/view/View.js~View.html
+[4]: https://web-cell.dev/DOM-Renderer/class/source/view/View.js~View.html

package.json

@@ -1,6 +1,6 @@
 {
     "name": "dom-renderer",
-    "version": "0.9.0",
+    "version": "1.0.0-alpha",
     "description": "Template engine based on HTML 5, ECMAScript 6 & MVVM",
     "keywords": [
         "template",
@@ -11,7 +11,7 @@
     ],
     "license": "LGPL-3.0",
     "author": "shiy2008@gmail.com",
-    "homepage": "https://web-cell.tk/DOM-Renderer/",
+    "homepage": "https://web-cell.dev/DOM-Renderer/",
     "repository": {
         "type": "git",
         "url": "git+https://github.com/EasyWebApp/DOM-Renderer.git"
@@ -35,7 +35,7 @@
         "debug": "npm run pack  &&  mocha --inspect-brk --no-timeouts",
         "test": "npm run build  &&  mocha --exit  &&  esdoc",
         "prepublishOnly": "npm test",
-        "help": "esdoc  &&  opn docs/index.html"
+        "help": "esdoc  &&  open-cli docs/index.html"
     },
     "husky": {
         "hooks": {
@@ -58,11 +58,11 @@
         "esdoc-external-webapi-plugin": "^1.0.0",
         "esdoc-standard-plugin": "^1.0.0",
         "eslint": "^5.16.0",
-        "husky": "^2.1.0",
-        "jsdom": "^15.0.0",
+        "husky": "^2.3.0",
+        "jsdom": "^15.1.0",
         "mocha": "^6.1.4",
-        "opn-cli": "^4.1.0",
-        "prettier": "^1.17.0",
+        "open-cli": "^5.0.0",
+        "prettier": "^1.17.1",
         "should": "^13.2.3",
         "should-sinon": "0.0.6",
         "sinon": "^7.3.2"

source/DOM/insert.js

@@ -0,0 +1,72 @@
+import { parseDOM } from './parser';
+
+/**
+ * @param {Node}    node
+ * @param {Boolean} [inNodes] - Seek in all kinds of `Node`
+ *
+ * @return {Number} The index of `node` in its siblings
+ */
+export function indexOf(node, inNodes) {
+    var key = `previous${inNodes ? '' : 'Element'}Sibling`,
+        index = 0;
+
+    while ((node = node[key])) index++;
+
+    return index;
+}
+
+/**
+ * @param {Node[]} list
+ * @param {Number} [index]
+ *
+ * @return {Number}
+ */
+export function insertableIndexOf(list, index) {
+    return !(index != null) || index > list.length
+        ? list.length
+        : index < 0
+            ? list.length + index
+            : index;
+}
+
+/**
+ * @param {ParentNode}  parent
+ * @param {Node|String} child      - https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/append#Parameters
+ * @param {Number|Node} [position]
+ * @param {Boolean}     [inNodes]  - Seek in all kinds of `Node`
+ */
+export function insertTo(parent, child, position, inNodes) {
+    const list = Array.from(parent[`child${inNodes ? 'Nodes' : 'ren'}`]);
+
+    position =
+        position instanceof Node
+            ? indexOf(position, inNodes)
+            : insertableIndexOf(list, position);
+
+    const point = list.slice(position)[0];
+
+    if (point) point.before(child);
+    else parent.append(child);
+}
+
+/**
+ * @param {String|Node[]} fragment
+ *
+ * @return {?DocumentFragment}
+ */
+export function makeNode(fragment) {
+    if (fragment instanceof Node) return fragment;
+
+    if (Object(fragment) instanceof String) return parseDOM(fragment);
+
+    let node = document.createDocumentFragment();
+
+    node.append.apply(
+        node,
+        Array.from(fragment, item =>
+            item.parentNode ? item.cloneNode(true) : item
+        )
+    );
+
+    return node;
+}

source/DOM/polyfill.js

@@ -11,6 +11,7 @@ const { window } = new JSDOM('', {
     'self',
     'document',
     'Node',
+    'Element',
     'HTMLElement',
     'DocumentFragment',
     'DOMParser',

source/view/View.js

@@ -10,6 +10,8 @@ import {
 
 import Template from './Template';
 
+import ViewList from './ViewList';
+
 import { debounce, nextTick } from '../DOM/timer';
 
 import CustomInputEvent, { watchInput } from '../DOM/CustomInputEvent';
@@ -22,7 +24,6 @@ const view_template = Symbol('View template'),
     view_top = new Map(),
     view_injection = Symbol('View injection'),
     view_varible = ['view', 'scope'],
-    element_view = new WeakMap(),
     top_input = new WeakMap();
 
 export default class View extends Model {
@@ -79,7 +80,7 @@ export default class View extends Model {
      * @return {String} HTML/XML source code of this View
      */
     toString() {
-        return stringifyDOM(this.topNodes);
+        return stringifyDOM(this.topNodes).replace(/\s+$/gm, '');
     }
 
     /**
@@ -125,12 +126,14 @@ export default class View extends Model {
             return;
         }
 
-        const sub_view = [];
-
-        element_view.set(element, sub_view);
+        const view_list = new ViewList(
+            element,
+            this.data,
+            this[view_injection]
+        );
 
         this.watch(name, {
-            get: () => (sub_view[1] ? sub_view : sub_view[0])
+            get: () => (view_list[1] ? view_list : view_list[0])
         });
     }
 
@@ -272,11 +275,18 @@ export default class View extends Model {
                 template.evaluate.apply(template, [element].concat(injection));
         });
 
-        for (let { type, element, template, name } of this)
+        for (let { type, element, name } of this)
             if (type === 'View') {
                 await nextTick();
 
-                await this.renderSub(temp[name], name, element, template);
+                const view_list = new ViewList(element),
+                    data = temp[name];
+
+                if (data === null) view_list.clear();
+                else if (data)
+                    await view_list.render(
+                        data instanceof Array ? data : [data]
+                    );
             }
 
         if (root)
@@ -293,40 +303,4 @@ export default class View extends Model {
 
         view_top.delete(this);
     }
-
-    /**
-     * @protected
-     *
-     * @param {Object}  data
-     * @param {String}  name
-     * @param {Element} element
-     * @param {String}  template
-     */
-    async renderSub(data, name, element, template) {
-        if (!data && data !== null) return;
-
-        const sub = element_view.get(element),
-            isArray = data instanceof Array,
-            _data_ = this.data;
-
-        data = isArray ? Array.from(data) : data ? [data] : [];
-
-        sub.splice(data.length, Infinity).forEach(view => view.destroy());
-
-        for (let i = 0; data[i]; i++) {
-            sub[i] =
-                sub[i] || new View(template, this.data, this[view_injection]);
-
-            if (isArray) _data_[name][i] = sub[i].data;
-            else _data_[name] = sub[i].data;
-
-            await sub[i].render(data[i]);
-        }
-
-        if (data[0])
-            element.append.apply(
-                element,
-                concat.apply([], sub.map(view => view.topNodes))
-            );
-    }
 }

source/view/ViewList.js

@@ -0,0 +1,118 @@
+import View from './View';
+
+import { insertableIndexOf, insertTo, makeNode } from '../DOM/insert';
+
+const root_list = new WeakMap(),
+    list_root = new WeakMap(),
+    template = Symbol('View template'),
+    child_offset = Symbol('Child offset');
+
+export default class ViewList extends Array {
+    /**
+     * @param {Element}  root
+     * @param {Object}   scope
+     * @param {String[]} injection
+     */
+    constructor(root, scope, injection) {
+        super();
+
+        if (!(root instanceof Element)) return;
+
+        const that = root_list.get(root);
+
+        if (that) return that;
+
+        root_list.set(root, this), list_root.set(this, root);
+
+        this[template] = [View.getTemplate(root), scope, injection];
+
+        this[child_offset] = root.childNodes.length;
+    }
+
+    /**
+     * @param {Number} [from=0] - View index
+     */
+    clear(from = 0) {
+        this.splice(from, Infinity).forEach(view => view.destroy());
+    }
+
+    set length(value) {
+        this.clear(value);
+    }
+
+    /**
+     * @type {Element}
+     */
+    get root() {
+        return list_root.get(this);
+    }
+
+    /**
+     * @type {String}
+     */
+    get name() {
+        return this.root.dataset.view;
+    }
+
+    /**
+     * @type {Object}
+     */
+    get data() {
+        return (this[template][1] || '')[this.name];
+    }
+
+    /**
+     * @return {String} HTML source
+     */
+    toString() {
+        return this.join('').replace(/\s+$/gm, '');
+    }
+
+    /**
+     * @return {Object[]} JSON data
+     */
+    valueOf() {
+        return Array.from(this, view => view.valueOf());
+    }
+
+    /**
+     * @param {Object}  item
+     * @param {?Number} index
+     *
+     * @return {View}
+     */
+    async insert(item, index) {
+        index = insertableIndexOf(this, index);
+
+        const view = new View(...this[template]),
+            { data } = this;
+
+        this.splice(index, 0, view);
+
+        await view.render(item);
+
+        if (data instanceof Array) data[index] = view.data;
+        else if (data) this[template][1][this.name] = view.data;
+
+        const { topNodes } = view;
+
+        insertTo(
+            this.root,
+            makeNode(topNodes),
+            topNodes.length * index + this[child_offset],
+            true
+        );
+
+        return view;
+    }
+
+    /**
+     * @param {Object[]} list
+     */
+    async render(list) {
+        this.clear(list.length);
+
+        for (let i = 0; list[i]; i++)
+            await (this[i] ? this[i].render(list[i]) : this.insert(list[i], i));
+    }
+}