~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.
c80c7c22
—
Peter John 4 years ago
v1.2.1 Fix observedAttributes
- package-lock.json +2 -2
- package.json +1 -1
- src/index.js +1 -1
- test/index.test.js +23 -4
package-lock.json
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "atoms-element",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.1",
|
|
4
4
|
"lockfileVersion": 2,
|
|
5
5
|
"requires": true,
|
|
6
6
|
"packages": {
|
|
7
7
|
"": {
|
|
8
|
-
"version": "1.2.
|
|
8
|
+
"version": "1.2.1",
|
|
9
9
|
"license": "MIT",
|
|
10
10
|
"dependencies": {
|
|
11
11
|
"parse5": "^6.0.1"
|
package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "atoms-element",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.1",
|
|
4
4
|
"description": "A simple web component library for defining your custom elements. It works on both client and server. It supports hooks and follows the same principles of react.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"pyros.sh",
|
src/index.js
CHANGED
|
@@ -483,7 +483,7 @@ export function defineElement(name, fn, attrTypes = {}) {
|
|
|
483
483
|
}
|
|
484
484
|
|
|
485
485
|
static get observedAttributes() {
|
|
486
|
-
return keys;
|
|
486
|
+
return keys.map((k) => k.toLowerCase());
|
|
487
487
|
}
|
|
488
488
|
},
|
|
489
489
|
};
|
test/index.test.js
CHANGED
|
@@ -168,6 +168,20 @@ test('render', async () => {
|
|
|
168
168
|
`);
|
|
169
169
|
});
|
|
170
170
|
|
|
171
|
+
test('render attribute keys', async () => {
|
|
172
|
+
const template = html`
|
|
173
|
+
<div>
|
|
174
|
+
<app-counter name="123" perPage="1"></app-counter>
|
|
175
|
+
</div>
|
|
176
|
+
`;
|
|
177
|
+
const res = await render(template);
|
|
178
|
+
expect(res).toEqual(`
|
|
179
|
+
<div>
|
|
180
|
+
<app-counter name="123" perPage="1"></app-counter>
|
|
181
|
+
</div>
|
|
182
|
+
`);
|
|
183
|
+
});
|
|
184
|
+
|
|
171
185
|
test('render attributes within quotes', async () => {
|
|
172
186
|
const age = 1;
|
|
173
187
|
const data = { name: '123', address: { street: '1' } };
|
|
@@ -221,14 +235,15 @@ test('render multi template', async () => {
|
|
|
221
235
|
|
|
222
236
|
test('defineElement', async () => {
|
|
223
237
|
const attrTypes = {
|
|
238
|
+
perPage: string.isRequired,
|
|
224
239
|
address: object({
|
|
225
240
|
street: string.isRequired,
|
|
226
241
|
}).isRequired,
|
|
227
242
|
};
|
|
228
|
-
const AppItem = ({ address: { street } }) => {
|
|
243
|
+
const AppItem = ({ perPage, address: { street } }) => {
|
|
229
244
|
const [count] = useState(0);
|
|
230
245
|
return html`
|
|
231
|
-
<div>
|
|
246
|
+
<div perPage=${perPage}>
|
|
232
247
|
<p>street: ${street}</p>
|
|
233
248
|
<p>count: ${count}</p>
|
|
234
249
|
</div>
|
|
@@ -236,10 +251,14 @@ test('defineElement', async () => {
|
|
|
236
251
|
};
|
|
237
252
|
defineElement('app-item', AppItem, attrTypes);
|
|
238
253
|
const { Clazz } = getElement('app-item');
|
|
254
|
+
const instance = new Clazz([
|
|
239
|
-
|
|
255
|
+
{ name: 'address', value: JSON.stringify({ street: '123' }).replace(/"/g, `'`) },
|
|
256
|
+
{ name: 'perpage', value: '1' },
|
|
257
|
+
]);
|
|
258
|
+
expect(Clazz.observedAttributes).toEqual(['perpage', 'address']);
|
|
240
259
|
const res = await instance.render();
|
|
241
260
|
expect(res).toEqual(`
|
|
242
|
-
<div>
|
|
261
|
+
<div perPage="1">
|
|
243
262
|
<p>street: 123</p>
|
|
244
263
|
<p>count: 0</p>
|
|
245
264
|
</div>
|