~repos /atoms-element
git clone https://pyrossh.dev/repos/atoms-element.git
A simple web component library for defining your custom elements. It works on both client and server.
337cfe75
—
Peter John 4 years ago
fix serializing event handlers and funcs
- src/index.js +17 -2
- test/index.test.js +2 -4
src/index.js
CHANGED
|
@@ -4,6 +4,10 @@ const registry = {};
|
|
|
4
4
|
const isBrowser = typeof window !== 'undefined';
|
|
5
5
|
export { html, isBrowser };
|
|
6
6
|
|
|
7
|
+
const lastAttributeNameRegex =
|
|
8
|
+
// eslint-disable-next-line no-control-regex
|
|
9
|
+
/([ \x09\x0a\x0c\x0d])([^\0-\x1F\x7F-\x9F "'>=/]+)([ \x09\x0a\x0c\x0d]*=[ \x09\x0a\x0c\x0d]*(?:[^ \x09\x0a\x0c\x0d"'`<>=]*|"[^"]*|'[^']*))$/;
|
|
10
|
+
|
|
7
11
|
export const render = isBrowser
|
|
8
12
|
? litRender
|
|
9
13
|
: (template) => {
|
|
@@ -14,15 +18,17 @@ export const render = isBrowser
|
|
|
14
18
|
// either here or in lit-html
|
|
15
19
|
// console.log('text', text);
|
|
16
20
|
const type = typeof value;
|
|
17
|
-
js += text;
|
|
18
21
|
if (value === null || !(type === 'object' || type === 'function' || type === 'undefined')) {
|
|
22
|
+
js += text;
|
|
19
23
|
js += type !== 'string' ? String(value) : value;
|
|
20
24
|
} else if (Array.isArray(value)) {
|
|
25
|
+
js += text;
|
|
21
26
|
// Array of TemplateResult
|
|
22
27
|
value.forEach((v) => {
|
|
23
28
|
js += render(v);
|
|
24
29
|
});
|
|
25
30
|
} else if (type === 'object') {
|
|
31
|
+
js += text;
|
|
26
32
|
// TemplateResult
|
|
27
33
|
if (value.strings && value.type === 'html') {
|
|
28
34
|
js += render(value);
|
|
@@ -30,10 +36,19 @@ export const render = isBrowser
|
|
|
30
36
|
js += JSON.stringify(value).replace(/"/g, `'`);
|
|
31
37
|
}
|
|
32
38
|
} else if (type == 'function') {
|
|
39
|
+
const matchName = lastAttributeNameRegex.exec(text);
|
|
40
|
+
if (matchName) {
|
|
41
|
+
let [, prefix, name, suffix] = matchName;
|
|
42
|
+
js += text.replace(' ' + name + '=', '');
|
|
43
|
+
} else {
|
|
44
|
+
js += text;
|
|
33
|
-
|
|
45
|
+
js += value();
|
|
46
|
+
}
|
|
34
47
|
} else if (type !== 'undefined') {
|
|
48
|
+
js += text;
|
|
35
49
|
js += value.toString();
|
|
36
50
|
} else {
|
|
51
|
+
js += text;
|
|
37
52
|
// console.log('value', value);
|
|
38
53
|
}
|
|
39
54
|
});
|
test/index.test.js
CHANGED
|
@@ -169,12 +169,10 @@ test('render single template', async () => {
|
|
|
169
169
|
expect(res).toEqual(` <div>NoCountry false</div> `);
|
|
170
170
|
});
|
|
171
171
|
|
|
172
|
-
test('render
|
|
172
|
+
test('render multi template', async () => {
|
|
173
173
|
const template = html` <div>${[1, 2].map((v) => html` <app-item meta="${{ index: v }}" @click=${() => {}} .handleClick=${() => {}}></app-item>`)}</div> `;
|
|
174
174
|
const res = await render(template);
|
|
175
|
-
expect(res).toEqual(
|
|
176
|
-
|
|
175
|
+
expect(res).toEqual(` <div> <app-item meta="{'index':1}"></app-item> <app-item meta="{'index':2}"></app-item></div> `);
|
|
177
|
-
);
|
|
178
176
|
});
|
|
179
177
|
|
|
180
178
|
test('defineElement', async () => {
|