[ Add ] Common View class

[ Add ]  2 utility methods

Author: TechQuery

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "dom-renderer",
-    "version": "0.2.0",
+    "version": "0.3.0",
     "description": "Template engine based on HTML 5 & ECMAScript 6",
     "keywords": [
         "template",
@@ -56,7 +56,7 @@
         "jsdom": "^13.2.0",
         "koapache": "^1.0.5",
         "mocha": "^5.2.0",
-        "prettier": "^1.15.3",
+        "prettier": "^1.16.4",
         "should": "^13.2.3",
         "should-sinon": "0.0.6",
         "sinon": "^7.2.3"

package.json

@@ -50,6 +50,36 @@ export default class Template extends Array {
         );
     }
 
+    /**
+     * @private
+     *
+     * @param {Number}   index
+     * @param {?Object}  context
+     * @param {Object[]} [scope=[]]
+     *
+     * @return {*}
+     */
+    eval(index, context, scope = []) {
+        try {
+            let value = this[index].apply(context, scope);
+
+            if (value != null) {
+                if (Object(value) instanceof String)
+                    try {
+                        value = JSON.parse(value);
+                    } catch (error) {
+                        //
+                    }
+
+                return value;
+            }
+        } catch (error) {
+            console.warn(error);
+        }
+
+        return '';
+    }
+
     /**
      * @param {?Object}   context - `this` in the expression
      * @param {...Object} [scope] - Scoped varible objects
@@ -58,12 +88,10 @@ export default class Template extends Array {
      */
     evaluate(context, ...scope) {
         var value = this[1]
-            ? this[template_raw].replace(/\$\{(\d+)\}/g, (_, index) => {
-                const value = this[index].apply(context, scope);
-
-                return value != null ? value : '';
-            })
-            : this[0].apply(context, scope);
+            ? this[template_raw].replace(/\$\{(\d+)\}/g, (_, index) =>
+                this.eval(index, context, scope)
+            )
+            : this.eval(0, context, scope);
 
         if (this[template_value] !== value) {
             if (this.onChange) this.onChange(value, this[template_value]);

source/Template.js

@@ -0,0 +1,166 @@
+import { parseDOM, scanTemplate, stringifyDOM, attributeMap } from './utility';
+
+import Template from './Template';
+
+const forEach = [].forEach;
+
+const view_template = Symbol('View template'),
+    view_top = new Map();
+
+export default class View extends Map {
+    /**
+     * @param {String} template
+     */
+    constructor(template) {
+        super()[view_template] = template + '';
+
+        forEach.call(parseDOM(template).childNodes, node => {
+            view_top.set(node, this);
+
+            if (node.nodeType === 1) this.parseTree(node);
+        });
+    }
+
+    /**
+     * @type {Node[]}
+     */
+    get topNodes() {
+        const list = [];
+
+        view_top.forEach((view, node) => view === this && list.push(node));
+
+        return list;
+    }
+
+    /**
+     * @return {String} HTML/XML source code of this View
+     */
+    toString() {
+        return stringifyDOM(this.topNodes);
+    }
+
+    /**
+     * @param {Element} root
+     */
+    static clear(root) {
+        forEach.call(
+            root.childNodes,
+            node => view_top.delete(node) && node.remove()
+        );
+    }
+
+    /**
+     * @return {View}
+     */
+    clone() {
+        return new View(this[view_template]);
+    }
+
+    /**
+     * @param {HTMLElement} root
+     *
+     * @return {String}
+     */
+    static getTemplate(root) {
+        for (let node of root.childNodes)
+            if (node.nodeName.toLowerCase() === 'template')
+                return node.innerHTML;
+            else if (node.nodeType === 8) return node.nodeValue;
+
+        const raw = root.innerHTML;
+
+        return (root.innerHTML = '') || raw;
+    }
+
+    /**
+     * @private
+     *
+     * @param {String}        type
+     * @param {Element}       element
+     * @param {Template|View} renderer
+     */
+    addNode(type, element, renderer) {
+        this.set({ type, element }, renderer);
+    }
+
+    /**
+     * @private
+     *
+     * @param {Element} root
+     */
+    parseTree(root) {
+        scanTemplate(root, Template.Expression, '[data-view]', {
+            attribute: ({ ownerElement, name, value }) => {
+                name = attributeMap[name] || name;
+
+                this.addNode(
+                    'Attr',
+                    ownerElement,
+                    new Template(
+                        value,
+                        ['view'],
+                        name in ownerElement
+                            ? value => (ownerElement[name] = value)
+                            : value => ownerElement.setAttribute(name, value)
+                    )
+                );
+            },
+            text: node => {
+                const { parentNode } = node;
+
+                this.addNode(
+                    'Text',
+                    parentNode,
+                    new Template(
+                        node.nodeValue,
+                        ['view'],
+                        parentNode.firstElementChild
+                            ? value => (node.nodeValue = value)
+                            : value => (parentNode.innerHTML = value)
+                    )
+                );
+            },
+            view: node =>
+                this.addNode(
+                    'View',
+                    node,
+                    new View(View.getTemplate(node).trim())
+                )
+        });
+    }
+
+    /**
+     * @param {Object} data
+     *
+     * @return {View}
+     */
+    render(data) {
+        this.forEach((renderer, { type, element }) => {
+            switch (type) {
+                case 'Attr':
+                case 'Text':
+                    return renderer.evaluate(element, data);
+            }
+
+            var _data_ = data[element.dataset.view];
+
+            if (!_data_ && _data_ !== null) return;
+
+            View.clear(element);
+
+            if (!_data_) return;
+
+            if (!(_data_ instanceof Array)) _data_ = [_data_];
+
+            element.append.apply(
+                element,
+                [].concat.apply(
+                    [],
+                    _data_.map(item => renderer.clone().render(item).topNodes)
+                )
+            );
+        });
+
+        return this;
+    }
+}

source/View.js

@@ -1,3 +1,5 @@
 export * from './utility';
 
 export { default as Template } from './Template';
+
+export { default } from './View';

source/index.js

@@ -1,3 +1,13 @@
+/**
+ * @type {Object}
+ */
+export const attributeMap = {
+    class: 'className',
+    for: 'htmlFor',
+    readonly: 'readOnly',
+    value: 'defaultValue'
+};
+
 const HTML_page = /<!?(DocType|html|head|body|meta|title|base)[\s\S]*?>/,
     parser = new DOMParser();
 
@@ -14,6 +24,19 @@ export function parseDOM(markup) {
         }).content;
 }
 
+/**
+ * @param {Node[]} list
+ *
+ * @return {String} HTML/XML source code
+ */
+export function stringifyDOM(list) {
+    const box = document.createElement('div');
+
+    box.append.apply(box, Array.from(list, node => node.cloneNode(true)));
+
+    return box.innerHTML;
+}
+
 /**
  * @param {Node}                          root
  * @param {function(node: Node): Number} [filter] - https://developer.mozilla.org/en-US/docs/Web/API/NodeFilter/acceptNode
@@ -56,7 +79,7 @@ export function scanTemplate(
     Array.from(iterator, node => {
         switch (node.nodeType) {
             case 1:
-                Array.from(
+                [].forEach.call(
                     node.attributes,
                     attr => expression.test(attr.value) && attribute(attr)
                 );

source/DOM-polyfill.js source/polyfill.jssource/DOM-polyfill.js renamed to source/polyfill.js

@@ -0,0 +1,74 @@
+import { readFileSync, readJSONSync } from 'fs-extra';
+
+import { parseDOM } from '../source/utility';
+
+import View from '../source/View';
+
+var view = parseDOM(readFileSync('test/source/index.html')).firstElementChild
+        .innerHTML,
+    data = readJSONSync('test/source/index.json');
+
+describe('DOM View', () => {
+    /**
+     * @test {View#parseTree}
+     */
+    it('Parsing', () => {
+        view = new View(view);
+
+        Array.from(view.keys(), ({ type }) => type).should.match([
+            'Attr',
+            'Text',
+            'View',
+            'View'
+        ]);
+    });
+
+    /**
+     * @test {View#render}
+     */
+    it('Rendering', () => {
+        (view.render(data) + '').should.be.equal(`
+    <h1>TechQuery</h1>
+
+    <ul data-view="profile">
+        <template>
+            <li>\${view.URL}</li>
+            <li>\${view.title}</li>
+        </template>
+    <li>https://tech-query.me/</li>
+            <li>Web/JavaScript full-stack engineer</li></ul>
+
+    <ol data-view="job">
+        <template>
+            <li>\${view.title}</li>
+        </template>
+    <li>freeCodeCamp</li><li>MVP</li><li>KaiYuanShe</li></ol>
+`);
+    });
+
+    /**
+     * @test {View#render}
+     */
+    it('Updating', () => {
+        function getLasts() {
+            return view.topNodes
+                .map(node => node.nodeType === 1 && node.lastChild)
+                .filter(Boolean);
+        }
+
+        const last = getLasts(),
+            _data_ = Object.assign({}, data);
+
+        _data_.name = 'tech-query';
+        _data_.profile = null;
+        delete _data_.job;
+
+        view.render(_data_);
+
+        const now = getLasts();
+
+        now[0].should.not.be.equal(last[0]);
+        now[1].nodeName.should.not.be.equal('LI');
+        now[2].should.be.equal(last[2]);
+    });
+});

source/utility.js

@@ -1,6 +1,6 @@
 --require @babel/register
 --require @babel/polyfill
---require ./source/DOM-polyfill
+--require ./source/polyfill
 --require should
 --require should-sinon
 --recursive