~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.
1e2d6e9c
—
Peter John 4 years ago
fix array rendering
- src/index.js +2 -3
- test/index.test.js +6 -4
src/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { html, render as litRender, directive, NodePart, AttributePart, PropertyPart, isPrimitive } from './lit-html.js';
|
|
1
|
+
import { html, render as litRender, directive, NodePart, AttributePart, PropertyPart, isPrimitive, Template } from './lit-html.js';
|
|
2
2
|
|
|
3
3
|
const registry = {};
|
|
4
4
|
const isBrowser = typeof window !== 'undefined';
|
|
@@ -35,9 +35,8 @@ export const render = isBrowser
|
|
|
35
35
|
}
|
|
36
36
|
if (value === null || !(type === 'object' || type === 'function' || type === 'undefined')) {
|
|
37
37
|
js += wrapAttribute(attrName, suffix, text, type !== 'string' ? String(value) : value);
|
|
38
|
-
} else if (Array.isArray(value)) {
|
|
38
|
+
} else if (Array.isArray(value) && value.find((item) => item && item.strings && item.type === 'html')) {
|
|
39
39
|
js += text;
|
|
40
|
-
// Array of TemplateResult
|
|
41
40
|
value.forEach((v) => {
|
|
42
41
|
js += render(v);
|
|
43
42
|
});
|
test/index.test.js
CHANGED
|
@@ -153,16 +153,17 @@ test('useLocation', async () => {
|
|
|
153
153
|
test('render', async () => {
|
|
154
154
|
const age = 1;
|
|
155
155
|
const data = { name: '123', address: { street: '1' } };
|
|
156
|
+
const items = [1, 2, 3];
|
|
156
157
|
const highlight = 'high';
|
|
157
158
|
const template = html`
|
|
158
159
|
<div>
|
|
159
|
-
<app-counter name="123" class="abc ${highlight}" age=${age} details1=${data}></app-counter>
|
|
160
|
+
<app-counter name="123" class="abc ${highlight}" age=${age} details1=${data} items=${items}></app-counter>
|
|
160
161
|
</div>
|
|
161
162
|
`;
|
|
162
163
|
const res = await render(template);
|
|
163
164
|
expect(res).toEqual(`
|
|
164
165
|
<div>
|
|
165
|
-
<app-counter name="123" class="abc high" age="1" details1="{'name':'123','address':{'street':'1'}}"></app-counter>
|
|
166
|
+
<app-counter name="123" class="abc high" age="1" details1="{'name':'123','address':{'street':'1'}}" items="[1,2,3]"></app-counter>
|
|
166
167
|
</div>
|
|
167
168
|
`);
|
|
168
169
|
});
|
|
@@ -170,16 +171,17 @@ test('render', async () => {
|
|
|
170
171
|
test('render attributes within quotes', async () => {
|
|
171
172
|
const age = 1;
|
|
172
173
|
const data = { name: '123', address: { street: '1' } };
|
|
174
|
+
const items = [1, 2, 3];
|
|
173
175
|
const classes = 'high';
|
|
174
176
|
const template = html`
|
|
175
177
|
<div>
|
|
176
|
-
<app-counter name="123" class=${classes} age="${age}" details1="${data}"></app-counter>
|
|
178
|
+
<app-counter name="123" class=${classes} age="${age}" details1="${data}" items="${items}"></app-counter>
|
|
177
179
|
</div>
|
|
178
180
|
`;
|
|
179
181
|
const res = await render(template);
|
|
180
182
|
expect(res).toEqual(`
|
|
181
183
|
<div>
|
|
182
|
-
<app-counter name="123" class="high" age="1" details1="{'name':'123','address':{'street':'1'}}"></app-counter>
|
|
184
|
+
<app-counter name="123" class="high" age="1" details1="{'name':'123','address':{'street':'1'}}" items="[1,2,3]"></app-counter>
|
|
183
185
|
</div>
|
|
184
186
|
`);
|
|
185
187
|
});
|