[ Add ] Manual of Template syntax

[ Optimize ]  Update Getting started document

Author: TechQuery

.esdoc.json

@@ -14,6 +14,9 @@
                     "source": "./test",
                     "interfaces": ["describe", "it"],
                     "includes": ["\\.js$"]
+                },
+                "manual": {
+                    "files": ["./manual/Template.md"]
                 }
             }
         },

ReadMe.md

@@ -1,6 +1,6 @@
 # DOM Renderer
 
-**Template engine** based on **HTML 5** & **ECMAScript 6**
+**Template engine** based on **HTML 5**, **ECMAScript 6** & **MVVM**
 
 [![NPM Dependency](https://david-dm.org/EasyWebApp/DOM-Renderer.svg)](https://david-dm.org/EasyWebApp/DOM-Renderer)
 [![Build Status](https://travis-ci.com/EasyWebApp/DOM-Renderer.svg?branch=master)](https://travis-ci.com/EasyWebApp/DOM-Renderer)
@@ -27,7 +27,7 @@
 }
 ```
 
-[`source/index.html`](https://github.com/EasyWebApp/DOM-Renderer/blob/master/test/source/index.html)
+`source/index.html` [**Template syntax**](https://web-cell/DOM-Renderer/manual/Template.html)
 
 ```HTML
 <template>
@@ -49,6 +49,8 @@
             <li>${view.title}</li>
         </template>
     </ol>
+
+    <input type="text" name="name" placeholder="Switch account">
 </template>
 ```
 
@@ -60,7 +62,7 @@ import View, { parseDOM } from 'dom-renderer';
 import template from './index.html';
 import data from './index.json';
 
-const view = new View( parseDOM( template ).firstChild.innerHTML );
+const view = new View( View.getTemplate( parseDOM( template ) ) );
 
 view.render( data ).then(() => console.log(view + ''));
 ```
@@ -89,6 +91,8 @@ view.render( data ).then(() => console.log(view + ''));
     <li>MVP</li>
     <li>KaiYuanShe</li>
 </ol>
+
+<input type="text" name="name" placeholder="Switch account">
 ```
 
 ## Installation
@@ -115,10 +119,7 @@ import View from 'dom-renderer';
 ## Compile & bundle
 
 ```Shell
-npm install -D \
-    web-cell \
-    @babel/preset-env \
-    babel-plugin-inline-import
+npm install web-cell-cli @babel/preset-env -D
 ```
 
 `package.json`
@@ -134,18 +135,6 @@ npm install -D \
     "babel": {
         "presets": [
             "@babel/preset-env"
-        ],
-        "plugins": [
-            [
-                "babel-plugin-inline-import",
-                {
-                    "extensions": [
-                        ".html",
-                        ".css",
-                        ".json"
-                    ]
-                }
-            ]
         ]
     }
 }
@@ -198,4 +187,4 @@ nextTick().then(() => {
 
 ## Typical cases
 
-https://www.npmjs.com/browse/depended/dom-renderer
+1.  [WebCell](https://web-cell.tk/)

manual/Template.md

@@ -0,0 +1,46 @@
+# Template syntax
+
+Source code of **DOM-Renderer** templates is legal [HTML 5 markups][1] with legal [ECMAScript 6 template literals][2] in it.
+
+## Typical example
+
+```HTML
+<template>
+    <h1 hidden="${! view.name}">
+        Hello, ${view.name} !
+    </h1>
+
+    <ul data-view="profile">
+        <template>
+            <li title="${scope.name}">
+                ${view.URL}
+            </li>
+            <li>${view.title}</li>
+        </template>
+    </ul>
+
+    <ol data-view="job">
+        <template>
+            <li>${view.title}</li>
+        </template>
+    </ol>
+
+    <input type="text" name="name" placeholder="Switch account">
+</template>
+```
+
+|            Code            |       Type       |                                      Explanation                                      |
+| :------------------------: | :--------------: | :-----------------------------------------------------------------------------------: |
+|           `this`           |  Local variable  |              The [Element][3] which current Template literals located at              |
+|           `view`           |  Local variable  |      **Data object** of the [View][4] which current Template literals located at      |
+|          `scope`           |  Local variable  |       Data object of the parent View which current Template literals located at       |
+|     `"${! view.name}"`     | Template literal |         Evaluated value of Template literals supports all kinds of Data types         |
+| `hidden="${! view.name}"`  |  HTML attribute  |                 HTML Boolean attributes are treated as DOM Properties                 |
+|     `data-view="job"`      |  HTML attribute  | Attribute value is a key in current View data, Object or Array will map to Sub views  |
+| `<template>...</template>` |     HTML tag     | A `<template />` may map to a View or Sub views, `<!-- -->` is a Compatibility option |
+|   `<input name="name">`    |     HTML tag     |        The same-name value of Data object will be updated by User's inputting         |
+
+[1]: https://developer.mozilla.org/en-US/docs/Web/HTML
+[2]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
+[3]: https://developer.mozilla.org/en-US/docs/Web/API/element
+[4]: https://web-cell.tk/DOM-Renderer/class/source/view/View.js~View.html