[ Add ] "render" & "rendered" events

[ Optimize ]  Speed up Getter & Setter of View
[ Optimize ]  Reduce Memory usage of Model
[ Optimize ]  stringifyDOM() supports Document-level Nodes
[ Fix ]  Several detail bugs

Author: TechQuery

ReadMe.md

@@ -10,7 +10,7 @@
 
 ## Data binding
 
-[`index.json`](https://github.com/EasyWebApp/DOM-Renderer/blob/master/test/source/index.json)
+[`source/index.json`](https://github.com/EasyWebApp/DOM-Renderer/blob/master/test/source/index.json)
 
 ```JSON
 {
@@ -27,7 +27,7 @@
 }
 ```
 
-[`index.html`](https://github.com/EasyWebApp/DOM-Renderer/blob/master/test/source/index.html)
+[`source/index.html`](https://github.com/EasyWebApp/DOM-Renderer/blob/master/test/source/index.html)
 
 ```HTML
 <template>
@@ -52,23 +52,23 @@
 </template>
 ```
 
-`index.js`
+`source/index.js`
 
 ```JavaScript
-import View from 'dom-renderer';
+import View, { parseDOM } from 'dom-renderer';
 
 import template from './index.html';
 import data from './index.json';
 
-const view = new View( template );
+const view = new View( parseDOM( template ).firstChild.innerHTML );
 
 view.render( data ).then(() => console.log(view + ''));
 ```
 
 **Console output** (formatted)
 
 ```HTML
-<h1>TechQuery</h1>
+<h1>Hello, TechQuery !</h1>
 
 <ul data-view="profile">
     <template>
@@ -112,38 +112,49 @@ import 'dom-renderer/dist/polyfill';
 import View from 'dom-renderer';
 ```
 
-## Babel configuration
+## Compile & bundle
 
 ```Shell
 npm install -D \
-    @babel/cli \
-    @babel/core \
+    web-cell \
     @babel/preset-env \
     babel-plugin-inline-import
 ```
 
-`.babelrc`
+`package.json`
 
 ```JSON
 {
-    "presets": [
-        "@babel/preset-env"
-    ],
-    "plugins": [
-        [
-            "babel-plugin-inline-import",
-            {
-                "extensions": [
-                    ".html",
-                    ".css",
-                    ".json"
-                ]
-            }
+    "directories": {
+        "lib": "source/"
+    },
+    "scripts": {
+        "build": "web-cell pack"
+    },
+    "babel": {
+        "presets": [
+            "@babel/preset-env"
+        ],
+        "plugins": [
+            [
+                "babel-plugin-inline-import",
+                {
+                    "extensions": [
+                        ".html",
+                        ".css",
+                        ".json"
+                    ]
+                }
+            ]
         ]
-    ]
+    }
 }
 ```
 
+```Shell
+npm run build
+```
+
 ## Advanced usage
 
 Follow [the example above](#data-binding)
@@ -181,7 +192,7 @@ view.name = 'tech-query';
 
 nextTick().then(() => {
 
-    console.log( document.querySelector('h1').textContent );  // 'tech-query'
+    console.log( document.querySelector('h1').textContent );  // 'Hello, tech-query !'
 });
 ```
 

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "dom-renderer",
-    "version": "0.6.0",
+    "version": "0.7.0",
     "description": "Template engine based on HTML 5 & ECMAScript 6",
     "keywords": [
         "template",
@@ -19,6 +19,7 @@
         "url": "https://github.com/EasyWebApp/DOM-Renderer/issues"
     },
     "module": "source/index.js",
+    "main": "dist/dom-renderer.js",
     "browser": "dist/dom-renderer.min.js",
     "directories": {
         "lib": "source",
@@ -56,7 +57,7 @@
         "husky": "^1.3.1",
         "jsdom": "^13.2.0",
         "koapache": "^1.0.5",
-        "mocha": "^6.0.0",
+        "mocha": "^6.0.1",
         "prettier": "^1.16.4",
         "should": "^13.2.3",
         "should-sinon": "0.0.6",

package.json

@@ -41,11 +41,41 @@ export default class Model {
             value = {};
 
         for (let key in data)
-            if (data.hasOwnProperty(key)) value[key] = data[key];
+            if (data.hasOwnProperty(key)) {
+                let _data_ = data[key];
+
+                value[key] =
+                    _data_ instanceof Object ? _data_.valueOf() : _data_;
+            }
 
         return value;
     }
 
+    /**
+     * @param {String} key          - Property name of `this`
+     * @param {Object} [descriptor] - More configuration of `key`
+     */
+    watch(key, descriptor) {
+        const meta = Object.assign(
+            Object.getOwnPropertyDescriptor(this, key) || {},
+            descriptor
+        );
+
+        (meta.configurable = true), (meta.enumerable = true);
+
+        if (!meta.get)
+            meta.get = function() {
+                return this.data[key];
+            };
+
+        if (!meta.set)
+            meta.set = function(value) {
+                this.commit(key, value);
+            };
+
+        Object.defineProperty(this, key, meta);
+    }
+
     /**
      * @param {Object} data
      *
@@ -58,21 +88,10 @@ export default class Model {
         Object.assign(_data_, data);
 
         for (let key in _data_) {
-            if (!_data_.hasOwnProperty(key)) continue;
-
-            if (!(key in this))
-                Object.defineProperty(this, key, {
-                    get: function() {
-                        return this.data[key];
-                    },
-                    set: function(value) {
-                        this.commit(key, value);
-                    }
-                });
-
             if (
-                typeof data[key] === 'object' ||
-                typeof _data_[key] !== 'object'
+                _data_.hasOwnProperty(key) &&
+                (typeof data[key] === 'object' ||
+                    typeof _data_[key] !== 'object')
             )
                 update[key] = _data_[key];
         }

source/Model.js

@@ -1,5 +1,6 @@
 const template_raw = Symbol('Template raw'),
     template_scope = Symbol('Template scope'),
+    scope_key = new WeakMap(),
     template_value = Symbol('Template value');
 
 export default class Template extends Array {
@@ -16,6 +17,8 @@ export default class Template extends Array {
             onChange: onChange instanceof Function && onChange
         });
 
+        scope_key.set(this, {});
+
         this.parse(), this.reset();
     }
 
@@ -45,11 +48,37 @@ export default class Template extends Array {
     parse() {
         this[template_raw] = this[template_raw].replace(
             Template.Expression,
-            (_, expression) =>
-                '${' + (this.push(this.evaluatorOf(expression)) - 1) + '}'
+            (_, expression) => {
+                expression.replace(Template.Reference, (_, scope, key) => {
+                    if (
+                        scope !== 'this' &&
+                        !this[template_scope].includes(scope)
+                    )
+                        return;
+
+                    const map = scope_key.get(this);
+
+                    (map[scope] = map[scope] || []).push(key);
+                });
+
+                return (
+                    '${' + (this.push(this.evaluatorOf(expression)) - 1) + '}'
+                );
+            }
         );
     }
 
+    /**
+     * @param {String} scope - Name of a Scoped varible
+     *
+     * @return {String[]} Reference keys
+     */
+    keysOf(scope) {
+        const map = scope_key.get(this);
+
+        return scope ? map[scope] : [].concat.apply([], Object.values(map));
+    }
+
     /**
      * @private
      *
@@ -87,11 +116,12 @@ export default class Template extends Array {
      * @return {*}
      */
     evaluate(context, ...scope) {
-        var value = this[1]
-            ? this[template_raw].replace(/\$\{(\d+)\}/g, (_, index) =>
-                this.eval(index, context, scope)
-            )
-            : this.eval(0, context, scope);
+        var value =
+            this[template_raw] !== '${0}'
+                ? 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]);
@@ -114,3 +144,5 @@ export default class Template extends Array {
 }
 
 Template.Expression = /\$\{([^}]+)\}/g;
+
+Template.Reference = /(\w+)(?:\.|\[['"])([^'"]+)/g;