-
Notifications
You must be signed in to change notification settings - Fork 88
/
index.js
65 lines (51 loc) · 1.61 KB
/
index.js
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
import { compileTemplate } from "./core.js";
import { getPlaceholder } from "./utils.js";
import * as helpers from "./helpers/index.js";
const PLACEHOLDER = getPlaceholder();
const PLACEHOLDER_SVG = getPlaceholder("svg");
const PLACEHOLDER_MSG = getPlaceholder("msg");
const PLACEHOLDER_LAYOUT = getPlaceholder("layout");
const methods = {
key(id) {
this.id = id;
return this;
},
style(...styles) {
this.styleSheets = this.styleSheets || [];
this.styleSheets.push(...styles);
return this;
},
css(parts, ...args) {
this.styleSheets = this.styleSheets || [];
let result = parts[0];
for (let index = 1; index < parts.length; index++) {
result +=
(args[index - 1] !== undefined ? args[index - 1] : "") + parts[index];
}
this.styleSheets.push(result);
return this;
},
};
const templates = new Map();
export function compile(parts, args, isSVG, isMsg) {
function template(host, target = host) {
let id = isMsg ? parts + PLACEHOLDER_MSG : parts.join(PLACEHOLDER);
if (isSVG) id += PLACEHOLDER_SVG;
const useLayout = template.useLayout;
if (useLayout) id += PLACEHOLDER_LAYOUT;
let render = templates.get(id);
if (!render) {
render = compileTemplate(parts, isSVG, isMsg, useLayout);
templates.set(id, render);
}
render(host, target, args, template.styleSheets);
}
return Object.assign(template, methods);
}
export function html(parts, ...args) {
return compile(parts, args, false, false);
}
export function svg(parts, ...args) {
return compile(parts, args, true, false);
}
Object.freeze(Object.assign(html, helpers));