[ Add ] Data store & scope

Author: TechQuery

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "dom-renderer",
-    "version": "0.3.0",
+    "version": "0.4.0",
     "description": "Template engine based on HTML 5 & ECMAScript 6",
     "keywords": [
         "template",

package.json

@@ -0,0 +1,52 @@
+const view_data = new WeakMap();
+
+/**
+ * @abstract
+ */
+export default class Model {
+    /**
+     * @param {Object} parent - Scope of this Model
+     */
+    constructor(parent) {
+        if (this.constructor === Model)
+            throw TypeError('Model() is an abstract class');
+
+        view_data.set(this, parent ? Object.setPrototypeOf({}, parent) : {});
+    }
+
+    /**
+     * @type {Object}
+     */
+    get data() {
+        return view_data.get(this);
+    }
+
+    /**
+     * @type {Object}
+     */
+    get scope() {
+        return Object.getPrototypeOf(view_data.get(this));
+    }
+
+    /**
+     * @param {Object} data
+     *
+     * @return {Object}
+     */
+    patch(data) {
+        const _data_ = this.data,
+            update = Object.setPrototypeOf({}, this.scope);
+
+        Object.assign(_data_, data);
+
+        for (let key in _data_)
+            if (
+                _data_.hasOwnProperty(key) &&
+                (typeof data[key] === 'object' ||
+                    typeof _data_[key] !== 'object')
+            )
+                update[key] = _data_[key];
+
+        return update;
+    }
+}

source/Model.js

@@ -1,18 +1,27 @@
+import Model from './Model';
+
 import { parseDOM, scanTemplate, stringifyDOM, attributeMap } from './utility';
 
 import Template from './Template';
 
-const forEach = [].forEach;
+const { forEach, push } = Array.prototype;
 
 const view_template = Symbol('View template'),
-    view_top = new Map();
+    view_top = new Map(),
+    view_injection = Symbol('View injection'),
+    view_varible = ['view', 'scope'];
 
-export default class View extends Map {
+export default class View extends Model {
     /**
-     * @param {String} template
+     * @param {String}  template
+     * @param {?Object} scope          - Data of parent View
+     * @param {Object}  [injection={}] - Key for Template varible
      */
-    constructor(template) {
-        super()[view_template] = template + '';
+    constructor(template, scope, injection = {}) {
+        super(scope);
+
+        (this[view_template] = template + ''),
+        (this[view_injection] = injection);
 
         forEach.call(parseDOM(template).childNodes, node => {
             view_top.set(node, this);
@@ -43,17 +52,16 @@ export default class View extends Map {
      * @param {Element} root
      */
     static clear(root) {
-        forEach.call(
-            root.childNodes,
-            node => view_top.delete(node) && node.remove()
-        );
+        Array.from(view_top.keys())
+            .filter(node => root.compareDocumentPosition(node) & 16)
+            .forEach(node => (view_top.delete(node), node.remove()));
     }
 
     /**
      * @return {View}
      */
     clone() {
-        return new View(this[view_template]);
+        return new View(this[view_template], this.scope, this[view_injection]);
     }
 
     /**
@@ -73,59 +81,52 @@ export default class View extends Map {
     }
 
     /**
-     * @private
-     *
-     * @param {String}        type
-     * @param {Element}       element
-     * @param {Template|View} renderer
-     */
-    addNode(type, element, renderer) {
-        this.set({ type, element }, renderer);
-    }
-
-    /**
-     * @private
+     * @protected
      *
      * @param {Element} root
      */
     parseTree(root) {
+        const injection = view_varible.concat(
+            Object.keys(this[view_injection])
+        );
+
         scanTemplate(root, Template.Expression, '[data-view]', {
             attribute: ({ ownerElement, name, value }) => {
                 name = attributeMap[name] || name;
 
-                this.addNode(
-                    'Attr',
-                    ownerElement,
-                    new Template(
+                push.call(this, {
+                    type: 'Attr',
+                    element: ownerElement,
+                    renderer: new Template(
                         value,
-                        ['view'],
+                        injection,
                         name in ownerElement
                             ? value => (ownerElement[name] = value)
                             : value => ownerElement.setAttribute(name, value)
                     )
-                );
+                });
             },
             text: node => {
                 const { parentNode } = node;
 
-                this.addNode(
-                    'Text',
-                    parentNode,
-                    new Template(
+                push.call(this, {
+                    type: 'Text',
+                    element: parentNode,
+                    renderer: new Template(
                         node.nodeValue,
-                        ['view'],
+                        injection,
                         parentNode.firstElementChild
                             ? value => (node.nodeValue = value)
                             : value => (parentNode.innerHTML = value)
                     )
-                );
+                });
             },
             view: node =>
-                this.addNode(
-                    'View',
-                    node,
-                    new View(View.getTemplate(node).trim())
-                )
+                push.call(this, {
+                    type: 'View',
+                    element: node,
+                    renderer: new View(View.getTemplate(node).trim(), this.data)
+                })
         });
     }
 
@@ -135,11 +136,20 @@ export default class View extends Map {
      * @return {View}
      */
     render(data) {
-        this.forEach((renderer, { type, element }) => {
+        data = this.patch(data);
+
+        const injection = [data, this.scope].concat(
+            Object.values(this[view_injection])
+        );
+
+        forEach.call(this, ({ type, element, renderer }) => {
             switch (type) {
                 case 'Attr':
                 case 'Text':
-                    return renderer.evaluate(element, data);
+                    return renderer.evaluate.apply(
+                        renderer,
+                        [element].concat(injection)
+                    );
             }
 
             var _data_ = data[element.dataset.view];

source/View.js

@@ -15,7 +15,7 @@ describe('DOM View', () => {
     it('Parsing', () => {
         view = new View(view);
 
-        Array.from(view.keys(), ({ type }) => type).should.match([
+        Array.from(view, ({ type }) => type).should.match([
             'Attr',
             'Text',
             'View',
@@ -32,10 +32,12 @@ describe('DOM View', () => {
 
     <ul data-view="profile">
         <template>
-            <li>\${view.URL}</li>
+            <li title="\${scope.name}">
+                \${view.URL}
+            </li>
             <li>\${view.title}</li>
         </template>
-    <li>https://tech-query.me/</li>
+    <li title="TechQuery">https://tech-query.me/</li>
             <li>Web/JavaScript full-stack engineer</li></ul>
 
     <ol data-view="job">
@@ -46,29 +48,49 @@ describe('DOM View', () => {
 `);
     });
 
+    function getLasts() {
+        return view.topNodes
+            .map(node => node.nodeType === 1 && node.lastChild)
+            .filter(Boolean);
+    }
+
     /**
-     * @test {View#render}
+     * @test {Model#patch}
      */
     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;
+        delete _data_.profile;
+        _data_.job = null;
 
         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]);
+        now[1].should.be.equal(last[1]);
+        now[2].nodeName.should.not.be.equal('LI');
+
+        (view + '').should.be.equal(`
+    <h1>tech-query</h1>
+
+    <ul data-view="profile">
+        <template>
+            <li title="\${scope.name}">
+                \${view.URL}
+            </li>
+            <li>\${view.title}</li>
+        </template>
+    <li title="TechQuery">https://tech-query.me/</li>
+            <li>Web/JavaScript full-stack engineer</li></ul>
+
+    <ol data-view="job">
+        <template>
+            <li>\${view.title}</li>
+        </template>
+    </ol>
+`);
     });
 });

test/View.js

@@ -5,7 +5,9 @@ <h1 hidden="${! view.name}">
 
     <ul data-view="profile">
         <template>
-            <li>${view.URL}</li>
+            <li title="${scope.name}">
+                ${view.URL}
+            </li>
             <li>${view.title}</li>
         </template>
     </ul>