[ Add ] Template evaluator

Author: TechQuery

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "dom-renderer",
-    "version": "0.1.0",
+    "version": "0.2.0",
     "description": "Template engine based on HTML 5 & ECMAScript 6",
     "keywords": [
         "template",
@@ -29,7 +29,7 @@
         "lint": "eslint source/ test/ --fix",
         "pack": "amd-bundle source/index dist/dom-renderer -m",
         "build": "npm run format  &&  npm run lint  &&  npm run pack",
-        "debug": "npm run build  &&  mocha --inspect-brk",
+        "debug": "npm run pack  &&  mocha --inspect-brk",
         "test": "npm run build  &&  mocha --exit  &&  esdoc",
         "prepublishOnly": "npm test",
         "help": "esdoc  &&  web-server docs/ -o"
@@ -57,7 +57,9 @@
         "koapache": "^1.0.5",
         "mocha": "^5.2.0",
         "prettier": "^1.15.3",
-        "should": "^13.2.3"
+        "should": "^13.2.3",
+        "should-sinon": "0.0.6",
+        "sinon": "^7.2.3"
     },
     "babel": {
         "presets": [

package.json

@@ -1,3 +1,88 @@
-export default class Template extends Array {}
+const template_raw = Symbol('Template raw'),
+    template_scope = Symbol('Template scope'),
+    template_value = Symbol('Template value');
 
-Template.Expression = /\$\{([^}]+)\}/;
+export default class Template extends Array {
+    /**
+     * @param {String}                           raw
+     * @param {String[]}                         [scope=[]] - Names of Scoped varibles
+     * @param {function(value: *, old: *): void} onChange
+     */
+    constructor(raw, scope, onChange) {
+        Object.assign(super(), {
+            [template_raw]: raw,
+            [template_scope]: scope || [],
+            [template_value]: null,
+            onChange: onChange instanceof Function && onChange
+        });
+
+        this.parse(), this.reset();
+    }
+
+    valueOf() {
+        return this[template_value];
+    }
+
+    toString() {
+        return this[template_value] + '';
+    }
+
+    /**
+     * @param {String} expression - JavaScript expression
+     *
+     * @return {Function}
+     */
+    evaluatorOf(expression) {
+        return new (Function.bind.apply(
+            Function,
+            [null].concat(this[template_scope], `return (${expression});`)
+        ))();
+    }
+
+    /**
+     * @private
+     */
+    parse() {
+        this[template_raw] = this[template_raw].replace(
+            Template.Expression,
+            (_, expression) =>
+                '${' + (this.push(this.evaluatorOf(expression)) - 1) + '}'
+        );
+    }
+
+    /**
+     * @param {?Object}   context - `this` in the expression
+     * @param {...Object} [scope] - Scoped varible objects
+     *
+     * @return {*}
+     */
+    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);
+
+        if (this[template_value] !== value) {
+            if (this.onChange) this.onChange(value, this[template_value]);
+
+            this[template_value] = value;
+        }
+
+        return value;
+    }
+
+    /**
+     * @return {*} {@link Template#evaluate}
+     */
+    reset() {
+        return this.evaluate.apply(
+            this,
+            Array(this[template_scope].length + 1).fill({})
+        );
+    }
+}
+
+Template.Expression = /\$\{([^}]+)\}/g;

source/Template.js

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

source/index.js

@@ -0,0 +1,47 @@
+import { spy } from 'sinon';
+
+import Template from '../source/Template';
+
+var onChange = spy(),
+    template;
+
+describe('Template evaluator', () => {
+    /**
+     * @test {Template#evaluatorOf}
+     */
+    it('Parsing', () => {
+        template = new Template(
+            'test${this.test},example${view.example}',
+            ['view'],
+            onChange
+        );
+
+        template.should.have.length(2);
+
+        template[0].should.be.instanceOf(Function);
+
+        onChange.should.be.calledWith('test,example', null);
+    });
+
+    /**
+     * @test {Template#reset}
+     */
+    it('No changing', () => {
+        template.reset();
+
+        onChange.should.be.calledOnce();
+    });
+
+    /**
+     * @test {Template#evaluate}
+     */
+    it('Evaluating', () => {
+        template.valueOf().should.be.equal('test,example');
+
+        template
+            .evaluate({ test: 1 }, { example: 2 })
+            .should.be.equal('test1,example2');
+
+        onChange.should.be.calledWith('test1,example2', 'test,example');
+    });
+});

test/Template.js

@@ -2,6 +2,7 @@
 --require @babel/polyfill
 --require ./source/DOM-polyfill
 --require should
+--require should-sinon
 --recursive
 --colors
 --inline-diffs