Skip to content

Commit eb04939

Browse files
TechQueryTechQuery
committed
[ Refactor ] Support Re-parsing
[ Add ] Manual of ViewList class
1 parent ba4dfd6 commit eb04939

File tree

12 files changed

+327
-174
lines changed

12 files changed

+327
-174
lines changed

‎ReadMe.md‎

Lines changed: 46 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,9 @@ import data from './index.json';
6464

6565
const view = new View( View.getTemplate( parseDOM( template ) ) );
6666

67-
view.render( data ).then(() => console.log(view + ''));
67+
await view.render( data );
68+
69+
console.log(view + '');
6870
```
6971

7072
**Console output** (formatted)
@@ -179,12 +181,52 @@ document.body.append(... view.topNodes);
179181

180182
view.name = 'tech-query';
181183

182-
nextTick().then(() => {
184+
await nextTick();
183185

184-
console.log( document.querySelector('h1').textContent ); // 'Hello, tech-query !'
185-
});
186+
console.log( document.querySelector('h1').textContent ); // 'Hello, tech-query !'
186187
```
187188

189+
### Inserting
190+
191+
```javascript
192+
await view.job.insert({ title: 'ThoughtWorks' });
193+
194+
console.log(view.job + '');
195+
```
196+
197+
**Console output** (formatted)
198+
199+
```html
200+
<ol data-view="job">
201+
<template>
202+
<li>${view.title}</li>
203+
</template>
204+
<li>FYClub</li>
205+
<li>freeCodeCamp</li>
206+
<li>MVP</li>
207+
<li>KaiYuanShe</li>
208+
<li>ThoughtWorks</li>
209+
</ol>
210+
```
211+
212+
### Re-parsing
213+
214+
```javascript
215+
const textNode = document.createTextNode('${view.test}');
216+
217+
view.parse(textNode);
218+
219+
await view.render({ test: 'example' });
220+
221+
document.body.append(textNode);
222+
223+
console.log(textNode.nodeValue); // 'example'
224+
```
225+
226+
## Developer manual
227+
228+
https://web-cell.dev/DOM-Renderer/manual/
229+
188230
## Typical cases
189231

190232
1. [WebCell](https://web-cell.dev/)

‎manual/Render-existed-DOM.md‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
# Render existed DOM trees
2+
3+
`index.html`
4+
5+
```html
6+
<body>
7+
<ol>
8+
<template>
9+
<li>${view.name}</li>
10+
<li>${view.URL}</li>
11+
</template>
12+
</ol>
13+
<ul>
14+
<template>
15+
<li>${view.name}</li>
16+
</template>
17+
</ul>
18+
19+
<script>
20+
const { ViewList } = self['dom-renderer'],
21+
views = document.body.children;
22+
23+
const single = new ViewList(views[0]),
24+
multiple = new ViewList(views[1]);
25+
26+
await single.render([
27+
{
28+
name: 'TechQuery',
29+
URL: 'https://tech-query.me/'
30+
}
31+
]);
32+
33+
await multiple.render([
34+
{ name: 'freeCodeCamp' },
35+
{ name: 'KaiYuanShe' }
36+
]);
37+
</script>
38+
</body>
39+
```

‎package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "dom-renderer",
3-
"version": "1.0.0-beta",
3+
"version": "1.0.0",
44
"description": "Template engine based on HTML 5, ECMAScript 6 & MVVM",
55
"keywords": [
66
"template",
@@ -48,7 +48,7 @@
4848
"devDependencies": {
4949
"@babel/cli": "^7.4.4",
5050
"@babel/polyfill": "^7.4.4",
51-
"@babel/preset-env": "^7.4.4",
51+
"@babel/preset-env": "^7.4.5",
5252
"@babel/register": "^7.4.4",
5353
"amd-bundle": "^1.7.8",
5454
"babel-plugin-inline-import": "^3.0.0",
@@ -59,7 +59,7 @@
5959
"esdoc-standard-plugin": "^1.0.0",
6060
"eslint": "^5.16.0",
6161
"husky": "^2.3.0",
62-
"jsdom": "^15.1.0",
62+
"jsdom": "^15.1.1",
6363
"mocha": "^6.1.4",
6464
"open-cli": "^5.0.0",
6565
"prettier": "^1.17.1",

‎source/DOM/CustomInputEvent.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ export default class CustomInputEvent extends CustomEvent {
66
* @type {HTMLElement}
77
*/
88
get target() {
9-
var node = super.target;
9+
const node = super.target;
1010

1111
if (this.composed) {
1212
const root = node.getRootNode();

‎source/DOM/parser.js‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,13 @@ export const attributeMap = {
77
readonly: 'readOnly'
88
};
99

10+
/**
11+
* @type {Object}
12+
*/
13+
export const attributeOnly = {
14+
list: 1
15+
};
16+
1017
const HTML_page = /<!?(DocType|html|head|body|meta|title|base)[\s\S]*?>/,
1118
parser = new DOMParser();
1219

@@ -28,7 +35,7 @@ const Document_Level = ['#document', 'html', 'head', 'body'],
2835
documentXML = document.implementation.createDocument(null, 'xml', null);
2936

3037
function stringOf(node) {
31-
if (node.querySelectorAll)
38+
if (node instanceof HTMLElement)
3239
Array.from(
3340
node.querySelectorAll('style:not(:empty), script:not(:empty)'),
3441
({ textContent, firstChild }) =>
@@ -107,7 +114,7 @@ export function scanDOM(root, expression, { attribute, text, ...element }) {
107114
}
108115

109116
const iterator = walkDOM(root, node => {
110-
if (node.matches) {
117+
if (node instanceof HTMLElement) {
111118
scanAttr(node);
112119

113120
for (let selector in element)

‎source/view/Model.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,13 @@ const view_data = new WeakMap(),
44
cache_data = Symbol('Cache data'),
55
next_tick = Symbol('Next tick');
66

7-
export default class Model {
7+
export default class Model extends Map {
88
/**
99
* @param {Object} parent - Scope of this Model
1010
* @param {function(data: Object): void} [onCommit] - Async updater (Key in `this` is acceptable)
1111
*/
1212
constructor(parent, onCommit) {
13-
view_data.set(this, parent ? Object.setPrototypeOf({}, parent) : {});
13+
view_data.set(super(), parent ? Object.setPrototypeOf({}, parent) : {});
1414

1515
Object.assign(this, {
1616
[cache_data]: null,

0 commit comments

Comments
 (0)