forked from developit/htm
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.mjs
More file actions
85 lines (77 loc) · 2.72 KB
/
Copy pathindex.mjs
File metadata and controls
85 lines (77 loc) · 2.72 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
/**
* Copyright 2018 Google Inc. All Rights Reserved.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
const CACHE = {};
const TEMPLATE = document.createElement('template');
const reg = /(\$_h\[\d+\])/g;
export default function html(statics) {
const tpl = CACHE[statics] || (CACHE[statics] = build(statics));
// eslint-disable-next-line prefer-rest-params
return tpl(this, arguments);
}
/** Create a template function given strings from a tagged template. */
function build(statics) {
let str = statics[0], i = 1;
while (i < statics.length) {
str += '$_h[' + i + ']' + statics[i++];
}
// Template string preprocessing:
// - replace <${Foo}> with <c c@=${Foo}>
// - replace <x /> with <x></x>
// - replace <${Foo}>a<//>b with <c c@=${Foo}>a</c>b
TEMPLATE.innerHTML = str.replace(/<(?:(\/)\/|(\/?)(\$_h\[\d+\]))/g, '<$1$2c c@=$3').replace(/<([\w:-]+)(\s[^<>]*?)?\/>/gi, '<$1$2></$1>').trim();
return Function('h', '$_h', 'return ' + walk((TEMPLATE.content || TEMPLATE).firstChild));
}
/** Traverse a DOM tree and serialize it to hyperscript function calls */
function walk(n) {
if (n.nodeType !== 1) {
if (n.nodeType === 3 && n.data) return field(n.data, ',');
return 'null';
}
let nodeName = `"${n.localName}"`, str = '{', sub='', end='}';
for (let i=0; i<n.attributes.length; i++) {
const { name, value } = n.attributes[i];
if (name=='c@') {
nodeName = value;
continue;
}
if (name.substring(0,3)==='...') {
end = '})';
str = 'Object.assign(' + str + '},' + name.substring(3) + ',{';
sub = '';
continue;
}
str += `${sub}"${name.replace(/:(\w)/g, upper)}":${value ? field(value, '+') : true}`;
sub = ',';
}
str = 'h(' + nodeName + ',' + str + end;
let child = n.firstChild;
while (child) {
str += ',' + walk(child);
child = child.nextSibling;
}
return str + ')';
}
function upper (s, i) {
return i.toUpperCase();
}
/** Serialize a field to a String or reference for use in generated code. */
function field(value, sep) {
const matches = value.match(reg);
let strValue = JSON.stringify(value);
if (matches != null) {
if (matches[0] === value) return value;
strValue = strValue.replace(reg, `"${sep}$1${sep}"`).replace(/"[+,]"/g, '');
if (sep === ',') strValue = `[${strValue}]`;
}
return strValue;
}