[ Add ] Auto update based on Input events of Form fields

[ Optimize ]  Performance of several methods

Author: TechQuery

.esdoc.json

@@ -22,6 +22,12 @@
             "option": {
                 "enable": true
             }
+        },
+        {
+            "name": "esdoc-ecmascript-proposal-plugin",
+            "option": {
+                "all": true
+            }
         }
     ]
 }

package-lock.json

@@ -1,12 +1,13 @@
 {
     "name": "dom-renderer",
-    "version": "0.7.0",
-    "description": "Template engine based on HTML 5 & ECMAScript 6",
+    "version": "0.8.0",
+    "description": "Template engine based on HTML 5, ECMAScript 6 & MVVM",
     "keywords": [
         "template",
         "html",
         "ecmascript",
-        "render"
+        "render",
+        "mvvm"
     ],
     "license": "LGPL-3.0",
     "author": "shiy2008@gmail.com",
@@ -29,7 +30,8 @@
         "format": "prettier --write \"{,!(node_modules|.git|dist|docs)/**/}*.{html,md,css,less,js,json,yml,yaml}\"",
         "lint": "eslint source/ test/ --fix",
         "pack": "cross-env NODE_ENV=pack  amd-bundle source/index dist/dom-renderer -m",
-        "build": "npm run format  &&  npm run lint  &&  npm run pack",
+        "patch": "babel source/DOM/polyfill.js -o dist/polyfill.js",
+        "build": "npm run format  &&  npm run lint  &&  npm run pack  &&  npm run patch",
         "debug": "npm run pack  &&  mocha --inspect-brk",
         "test": "npm run build  &&  mocha --exit  &&  esdoc",
         "prepublishOnly": "npm test",
@@ -44,13 +46,15 @@
         "@babel/polyfill": "^7.2.5"
     },
     "devDependencies": {
+        "@babel/cli": "^7.2.3",
         "@babel/polyfill": "^7.2.5",
         "@babel/preset-env": "^7.3.1",
         "@babel/register": "^7.0.0",
-        "amd-bundle": "^1.7.4",
+        "amd-bundle": "^1.7.5",
         "babel-plugin-inline-import": "^3.0.0",
         "cross-env": "^5.2.0",
         "esdoc": "^1.1.0",
+        "esdoc-ecmascript-proposal-plugin": "^1.0.0",
         "esdoc-external-webapi-plugin": "^1.0.0",
         "esdoc-standard-plugin": "^1.0.0",
         "eslint": "^5.14.1",

package.json

@@ -0,0 +1,67 @@
+/**
+ * A composite Input Event with Input Method & Clipboard supported
+ */
+export default class CustomInputEvent extends CustomEvent {
+    /**
+     * @type {HTMLElement}
+     */
+    get target() {
+        var node = super.target;
+
+        if (this.composed) {
+            const root = node.getRootNode();
+
+            if (root instanceof DocumentFragment) return root.host;
+        }
+
+        return node;
+    }
+}
+
+function customInput(element, detail) {
+    element.dispatchEvent(
+        new CustomInputEvent('input', {
+            bubbles: true,
+            composed: true,
+            detail
+        })
+    );
+}
+
+/**
+ * @param {HTMLElement} element
+ *
+ * @listens {InputEvent}       - `input` event
+ * @listens {CompositionEvent} - `compositionstart` & `compositionend` event
+ * @listens {ClipboardEvent}   - `paste` event
+ * @listens {ClipboardEvent}   - `cut` event
+ *
+ * @emits {CustomInputEvent}
+ */
+export function watchInput(element) {
+    var IME, clipBoard;
+
+    element.addEventListener('compositionstart', () => (IME = true));
+
+    element.addEventListener(
+        'compositionend',
+        ({ target, data }) => ((IME = false), customInput(target, data))
+    );
+
+    element.addEventListener('input', event => {
+        if (event instanceof CustomInputEvent) return;
+
+        if (clipBoard) clipBoard = false;
+        else if (!IME) customInput(event.target, event.data);
+    });
+
+    element.addEventListener('paste', ({ target, clipboardData }) => {
+        if (!IME)
+            (clipBoard = true),
+            customInput(target, clipboardData.getData('text'));
+    });
+
+    element.addEventListener('cut', ({ target }) => {
+        if (!IME) (clipBoard = true), customInput(target);
+    });
+}

source/DOM/CustomInputEvent.js

@@ -0,0 +1,55 @@
+import { JSDOM } from 'jsdom';
+
+export default JSDOM;
+
+const { window } = new JSDOM('', {
+    url: 'http://test.com/',
+    pretendToBeVisual: true
+});
+
+[
+    'self',
+    'document',
+    'Node',
+    'HTMLElement',
+    'DocumentFragment',
+    'DOMParser',
+    'XMLSerializer',
+    'NodeFilter',
+    'InputEvent',
+    'CustomEvent'
+].forEach(key => (global[key] = window[key]));
+
+/**
+ * @private
+ *
+ * @param {HTMLElement} input
+ * @param {String}      raw
+ *
+ * @emits {InputEvent} `input`
+ *
+ * @return {Promise}
+ */
+export function typeIn(input, raw) {
+    return Promise.all(
+        Array.from(
+            raw,
+            data =>
+                new Promise(resolve =>
+                    setTimeout(() => {
+                        input.value += data;
+
+                        input.dispatchEvent(
+                            new InputEvent('input', {
+                                bubbles: true,
+                                composed: true,
+                                data
+                            })
+                        );
+
+                        resolve();
+                    })
+                )
+        )
+    );
+}

source/DOM/polyfill.js

@@ -4,8 +4,7 @@
 export const attributeMap = {
     class: 'className',
     for: 'htmlFor',
-    readonly: 'readOnly',
-    value: 'defaultValue'
+    readonly: 'readOnly'
 };
 
 const HTML_page = /<!?(DocType|html|head|body|meta|title|base)[\s\S]*?>/,
@@ -83,31 +82,31 @@ export function* walkDOM(root, filter) {
 }
 
 /**
- * @param {Node}                          root
- * @param {RegExp}                        expression
- * @param {String}                        subView          - CSS selector
- * @param {Object}                        parser
- * @param {function(attr: Attr): void}    parser.attribute
- * @param {function(text: Text): void}    parser.text
- * @param {function(node: Element): void} parser.view
+ * @param {Node}                                 root
+ * @param {RegExp}                               expression
+ * @param {Object}                               parser
+ * @param {function(attr: Attr): void}           parser.attribute
+ * @param {function(text: Text): void}           parser.text
+ * @param {... function(node: Element): Boolean} parser.element - Key for CSS selector, Value for Callback
  */
 export function scanTemplate(
     root,
     expression,
-    subView,
-    { attribute, text, view }
+    { attribute, text, ...element }
 ) {
-    const iterator = walkDOM(root, node =>
-        node.matches instanceof Function && node.matches(subView)
-            ? (view(node), NodeFilter.FILTER_REJECT)
-            : NodeFilter.FILTER_ACCEPT
-    );
+    const iterator = walkDOM(root, node => {
+        if (node.matches)
+            for (let selector in element)
+                if (node.matches(selector) && element[selector](node) === false)
+                    return NodeFilter.FILTER_REJECT;
+
+        return NodeFilter.FILTER_ACCEPT;
+    });
 
     Array.from(iterator, node => {
         switch (node.nodeType) {
             case 1:
-                [].forEach.call(
-                    node.attributes,
+                Array.from(node.attributes).forEach(
                     attr => expression.test(attr.value) && attribute(attr)
                 );
                 break;
@@ -123,3 +122,34 @@ export function scanTemplate(
 export function nextTick() {
     return new Promise(resolve => self.requestAnimationFrame(resolve));
 }
+
+/**
+ * @param {HTMLElement} input
+ *
+ * @return {String|String[]}
+ */
+export function valueOf(input) {
+    switch (input.type || input.tagName.toLowerCase()) {
+        case 'radio':
+            return input.checked ? input.value : null;
+        case 'checkbox':
+            return Array.from(
+                input.form
+                    ? input.form.elements[input.name]
+                    : input
+                        .getRootNode()
+                        .querySelectorAll(
+                            `input[type="checkbox"][name="${input.name}"]`
+                        ),
+                node => (node.checked ? node.value : null)
+            );
+        case 'select':
+            return input.multiple
+                ? Array.from(input.options, node =>
+                    node.selected ? node.value : null
+                )
+                : input.value;
+    }
+
+    return input.value;
+}

source/utility.js source/DOM/utility.jssource/utility.js renamed to source/DOM/utility.js

@@ -1,7 +1,9 @@
-export * from './utility';
+export * from './DOM/utility';
 
-export { default as Template } from './Template';
+export * from './DOM/CustomInputEvent';
 
-export { default as Model } from './Model';
+export { default as Template } from './view/Template';
 
-export { default } from './View';
+export { default as Model } from './view/Model';
+
+export { default } from './view/View';

source/index.js

@@ -1,4 +1,4 @@
-import { nextTick } from './utility';
+import { nextTick } from '../DOM/utility';
 
 const view_data = new WeakMap(),
     cache_data = Symbol('Cache data'),