@joist/element 4.2.3-next.8 → 4.2.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +4 -1
- package/src/lib/attr.test.ts +69 -18
- package/src/lib/attr.ts +22 -6
- package/src/lib/element.ts +12 -15
- package/src/lib/metadata.ts +5 -7
- package/target/lib/attr.d.ts +1 -1
- package/target/lib/attr.js +16 -4
- package/target/lib/attr.js.map +1 -1
- package/target/lib/attr.test.js +90 -17
- package/target/lib/attr.test.js.map +1 -1
- package/target/lib/element.js +10 -16
- package/target/lib/element.js.map +1 -1
- package/target/lib/metadata.d.ts +4 -2
- package/target/lib/metadata.js.map +1 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@joist/element",
|
|
3
|
-
"version": "4.2.3
|
|
3
|
+
"version": "4.2.3",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "./target/lib.js",
|
|
6
6
|
"module": "./target/lib.js",
|
|
@@ -51,6 +51,9 @@
|
|
|
51
51
|
"output": [
|
|
52
52
|
"target/**",
|
|
53
53
|
"tsconfig.tsbuildinfo"
|
|
54
|
+
],
|
|
55
|
+
"dependencies": [
|
|
56
|
+
"../observable:build"
|
|
54
57
|
]
|
|
55
58
|
},
|
|
56
59
|
"test": {
|
package/src/lib/attr.test.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import { expect } from "chai";
|
|
1
|
+
import { expect, assert } from "chai";
|
|
2
|
+
import { effect, observe } from "@joist/observable";
|
|
2
3
|
|
|
3
4
|
import { attr } from "./attr.js";
|
|
4
5
|
import { element } from "./element.js";
|
|
@@ -138,23 +139,6 @@ it("should throw an error for symbols with no description", async () => {
|
|
|
138
139
|
}).to.throw("Cannot handle Symbol property without description");
|
|
139
140
|
});
|
|
140
141
|
|
|
141
|
-
it("should not reflect property to attribute", async () => {
|
|
142
|
-
@element({
|
|
143
|
-
tagName: "attr-test-5",
|
|
144
|
-
})
|
|
145
|
-
class MyElement extends HTMLElement {
|
|
146
|
-
@attr({ reflect: false })
|
|
147
|
-
accessor value = "foo";
|
|
148
|
-
}
|
|
149
|
-
|
|
150
|
-
const el = new MyElement();
|
|
151
|
-
el.value = "bar";
|
|
152
|
-
|
|
153
|
-
expect(el.value).to.equal("bar");
|
|
154
|
-
|
|
155
|
-
expect(el.hasAttribute("value")).to.be.false;
|
|
156
|
-
});
|
|
157
|
-
|
|
158
142
|
it("non reflective attributes should still read new attribute values", async () => {
|
|
159
143
|
@element({
|
|
160
144
|
tagName: "attr-test-6",
|
|
@@ -190,3 +174,70 @@ it("should allow a manually defined attribute name", async () => {
|
|
|
190
174
|
|
|
191
175
|
el.remove();
|
|
192
176
|
});
|
|
177
|
+
|
|
178
|
+
it("should update property when attribute changes", async () => {
|
|
179
|
+
@element({
|
|
180
|
+
tagName: "attr-test-8",
|
|
181
|
+
})
|
|
182
|
+
class MyElement extends HTMLElement {
|
|
183
|
+
@attr()
|
|
184
|
+
accessor value = "foo";
|
|
185
|
+
|
|
186
|
+
@attr()
|
|
187
|
+
accessor count = 0;
|
|
188
|
+
|
|
189
|
+
@attr()
|
|
190
|
+
accessor enabled = false;
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
const el = new MyElement();
|
|
194
|
+
document.body.append(el);
|
|
195
|
+
|
|
196
|
+
// Test string property
|
|
197
|
+
el.setAttribute("value", "bar");
|
|
198
|
+
expect(el.value).to.equal("bar");
|
|
199
|
+
|
|
200
|
+
// Test number property
|
|
201
|
+
el.setAttribute("count", "42");
|
|
202
|
+
expect(el.count).to.equal(42);
|
|
203
|
+
|
|
204
|
+
// Test boolean property
|
|
205
|
+
el.setAttribute("enabled", "");
|
|
206
|
+
expect(el.enabled).to.equal(true);
|
|
207
|
+
|
|
208
|
+
el.removeAttribute("enabled");
|
|
209
|
+
expect(el.enabled).to.equal(false);
|
|
210
|
+
|
|
211
|
+
el.remove();
|
|
212
|
+
});
|
|
213
|
+
|
|
214
|
+
it("setters should be called when attributes change", async () => {
|
|
215
|
+
let callCount = 0;
|
|
216
|
+
|
|
217
|
+
@element({
|
|
218
|
+
tagName: "attr-test-9",
|
|
219
|
+
})
|
|
220
|
+
class MyElement extends HTMLElement {
|
|
221
|
+
@attr()
|
|
222
|
+
@observe()
|
|
223
|
+
accessor value = "foo";
|
|
224
|
+
|
|
225
|
+
@effect()
|
|
226
|
+
onValueChange() {
|
|
227
|
+
callCount++;
|
|
228
|
+
}
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
const el = new MyElement();
|
|
232
|
+
document.body.append(el);
|
|
233
|
+
|
|
234
|
+
el.setAttribute("value", "bar");
|
|
235
|
+
|
|
236
|
+
// needs to wait for the mutation observer to run
|
|
237
|
+
await Promise.resolve();
|
|
238
|
+
await Promise.resolve();
|
|
239
|
+
|
|
240
|
+
assert.equal(callCount, 1);
|
|
241
|
+
|
|
242
|
+
el.remove();
|
|
243
|
+
});
|
package/src/lib/attr.ts
CHANGED
|
@@ -6,9 +6,9 @@ export interface AttrOpts {
|
|
|
6
6
|
reflect?: boolean;
|
|
7
7
|
}
|
|
8
8
|
|
|
9
|
-
export function attr(opts?: AttrOpts) {
|
|
10
|
-
return function attrDecorator
|
|
11
|
-
|
|
9
|
+
export function attr<This extends HTMLElement>(opts?: AttrOpts) {
|
|
10
|
+
return function attrDecorator(
|
|
11
|
+
base: ClassAccessorDecoratorTarget<This, unknown>,
|
|
12
12
|
ctx: ClassAccessorDecoratorContext<This>,
|
|
13
13
|
): ClassAccessorDecoratorResult<This, any> {
|
|
14
14
|
const attrName = opts?.name ?? parseAttrName(ctx.name);
|
|
@@ -19,11 +19,27 @@ export function attr(opts?: AttrOpts) {
|
|
|
19
19
|
propName: ctx.name,
|
|
20
20
|
observe: opts?.observed ?? true,
|
|
21
21
|
reflect,
|
|
22
|
-
|
|
23
|
-
setPropValue: set,
|
|
22
|
+
access: base,
|
|
24
23
|
});
|
|
25
24
|
|
|
26
25
|
return {
|
|
26
|
+
init(value: unknown) {
|
|
27
|
+
if (typeof value === "boolean") {
|
|
28
|
+
return value;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
const attrValue = this.getAttribute(attrName);
|
|
32
|
+
|
|
33
|
+
if (attrValue === null) {
|
|
34
|
+
return value;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
if (typeof value === "number") {
|
|
38
|
+
return Number(attrValue);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
return attrValue;
|
|
42
|
+
},
|
|
27
43
|
set(value: unknown) {
|
|
28
44
|
if (reflect) {
|
|
29
45
|
if (value === true) {
|
|
@@ -43,7 +59,7 @@ export function attr(opts?: AttrOpts) {
|
|
|
43
59
|
}
|
|
44
60
|
}
|
|
45
61
|
|
|
46
|
-
set.call(this, value);
|
|
62
|
+
base.set.call(this, value);
|
|
47
63
|
},
|
|
48
64
|
};
|
|
49
65
|
};
|
package/src/lib/element.ts
CHANGED
|
@@ -53,22 +53,18 @@ export function element<T extends ElementConstructor>(opts?: ElementOpts) {
|
|
|
53
53
|
|
|
54
54
|
if (attr) {
|
|
55
55
|
if (oldValue !== newValue) {
|
|
56
|
-
const
|
|
56
|
+
const sourceValue = attr.access.get.call(this);
|
|
57
|
+
let value: string | number | boolean = newValue;
|
|
57
58
|
|
|
58
|
-
if (typeof
|
|
59
|
+
if (typeof sourceValue === "boolean") {
|
|
59
60
|
// treat as boolean
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
} else if (newValue === "false") {
|
|
63
|
-
attr.setPropValue.call(this, false);
|
|
64
|
-
}
|
|
65
|
-
} else if (typeof ogValue === "number") {
|
|
61
|
+
value = newValue !== null;
|
|
62
|
+
} else if (typeof sourceValue === "number") {
|
|
66
63
|
// treat as number
|
|
67
|
-
|
|
68
|
-
} else {
|
|
69
|
-
// treat as string
|
|
70
|
-
attr.setPropValue.call(this, newValue);
|
|
64
|
+
value = Number(newValue);
|
|
71
65
|
}
|
|
66
|
+
|
|
67
|
+
attr.access.set.call(this, value);
|
|
72
68
|
}
|
|
73
69
|
|
|
74
70
|
if (cbs) {
|
|
@@ -127,9 +123,9 @@ export function element<T extends ElementConstructor>(opts?: ElementOpts) {
|
|
|
127
123
|
}
|
|
128
124
|
|
|
129
125
|
function reflectAttributeValues<T extends HTMLElement>(el: T, attrs: AttrMetadata) {
|
|
130
|
-
for (const [attrName, {
|
|
126
|
+
for (const [attrName, { access, reflect }] of attrs) {
|
|
131
127
|
if (reflect) {
|
|
132
|
-
const value =
|
|
128
|
+
const value = access.get.call(el);
|
|
133
129
|
|
|
134
130
|
// reflect values back to attributes
|
|
135
131
|
if (value !== null && value !== undefined && value !== "") {
|
|
@@ -140,7 +136,8 @@ function reflectAttributeValues<T extends HTMLElement>(el: T, attrs: AttrMetadat
|
|
|
140
136
|
el.setAttribute(attrName, "");
|
|
141
137
|
}
|
|
142
138
|
}
|
|
143
|
-
} else {
|
|
139
|
+
} else if (!el.hasAttribute(attrName)) {
|
|
140
|
+
// only set parent attribute if it doesn't exist
|
|
144
141
|
// set key/value attribute
|
|
145
142
|
const strValue = String(value);
|
|
146
143
|
|
package/src/lib/metadata.ts
CHANGED
|
@@ -4,8 +4,10 @@ export interface AttrDef {
|
|
|
4
4
|
propName: string | symbol;
|
|
5
5
|
observe: boolean;
|
|
6
6
|
reflect: boolean;
|
|
7
|
-
|
|
8
|
-
|
|
7
|
+
access: {
|
|
8
|
+
get: () => unknown;
|
|
9
|
+
set: (value: unknown) => void;
|
|
10
|
+
};
|
|
9
11
|
}
|
|
10
12
|
|
|
11
13
|
export type ListenerSelector<T> = (el: T) => EventTarget | null;
|
|
@@ -16,11 +18,7 @@ export interface Listener<T> {
|
|
|
16
18
|
selector: ListenerSelector<T>;
|
|
17
19
|
}
|
|
18
20
|
|
|
19
|
-
export type AttrChangedCallback = (
|
|
20
|
-
name: string,
|
|
21
|
-
oldValue: string,
|
|
22
|
-
newValue: string,
|
|
23
|
-
) => void;
|
|
21
|
+
export type AttrChangedCallback = (name: string, oldValue: string, newValue: string) => void;
|
|
24
22
|
|
|
25
23
|
export class AttrMetadata extends Map<string, AttrDef> {}
|
|
26
24
|
export class AttrChangeMetadata extends Map<string, Set<AttrChangedCallback>> {}
|
package/target/lib/attr.d.ts
CHANGED
|
@@ -3,4 +3,4 @@ export interface AttrOpts {
|
|
|
3
3
|
observed?: boolean;
|
|
4
4
|
reflect?: boolean;
|
|
5
5
|
}
|
|
6
|
-
export declare function attr
|
|
6
|
+
export declare function attr<This extends HTMLElement>(opts?: AttrOpts): (base: ClassAccessorDecoratorTarget<This, unknown>, ctx: ClassAccessorDecoratorContext<This>) => ClassAccessorDecoratorResult<This, any>;
|
package/target/lib/attr.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { metadataStore } from "./metadata.js";
|
|
2
2
|
export function attr(opts) {
|
|
3
|
-
return function attrDecorator(
|
|
3
|
+
return function attrDecorator(base, ctx) {
|
|
4
4
|
const attrName = opts?.name ?? parseAttrName(ctx.name);
|
|
5
5
|
const meta = metadataStore.read(ctx.metadata);
|
|
6
6
|
const reflect = opts?.reflect ?? true;
|
|
@@ -8,10 +8,22 @@ export function attr(opts) {
|
|
|
8
8
|
propName: ctx.name,
|
|
9
9
|
observe: opts?.observed ?? true,
|
|
10
10
|
reflect,
|
|
11
|
-
|
|
12
|
-
setPropValue: set,
|
|
11
|
+
access: base,
|
|
13
12
|
});
|
|
14
13
|
return {
|
|
14
|
+
init(value) {
|
|
15
|
+
if (typeof value === "boolean") {
|
|
16
|
+
return value;
|
|
17
|
+
}
|
|
18
|
+
const attrValue = this.getAttribute(attrName);
|
|
19
|
+
if (attrValue === null) {
|
|
20
|
+
return value;
|
|
21
|
+
}
|
|
22
|
+
if (typeof value === "number") {
|
|
23
|
+
return Number(attrValue);
|
|
24
|
+
}
|
|
25
|
+
return attrValue;
|
|
26
|
+
},
|
|
15
27
|
set(value) {
|
|
16
28
|
if (reflect) {
|
|
17
29
|
if (value === true) {
|
|
@@ -31,7 +43,7 @@ export function attr(opts) {
|
|
|
31
43
|
}
|
|
32
44
|
}
|
|
33
45
|
}
|
|
34
|
-
set.call(this, value);
|
|
46
|
+
base.set.call(this, value);
|
|
35
47
|
},
|
|
36
48
|
};
|
|
37
49
|
};
|
package/target/lib/attr.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"attr.js","sourceRoot":"","sources":["../../src/lib/attr.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAQ9C,MAAM,UAAU,IAAI,
|
|
1
|
+
{"version":3,"file":"attr.js","sourceRoot":"","sources":["../../src/lib/attr.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAQ9C,MAAM,UAAU,IAAI,CAA2B,IAAe;IAC5D,OAAO,SAAS,aAAa,CAC3B,IAAiD,EACjD,GAAwC;QAExC,MAAM,QAAQ,GAAG,IAAI,EAAE,IAAI,IAAI,aAAa,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;QACvD,MAAM,IAAI,GAAG,aAAa,CAAC,IAAI,CAAO,GAAG,CAAC,QAAQ,CAAC,CAAC;QACpD,MAAM,OAAO,GAAG,IAAI,EAAE,OAAO,IAAI,IAAI,CAAC;QAEtC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,QAAQ,EAAE;YACvB,QAAQ,EAAE,GAAG,CAAC,IAAI;YAClB,OAAO,EAAE,IAAI,EAAE,QAAQ,IAAI,IAAI;YAC/B,OAAO;YACP,MAAM,EAAE,IAAI;SACb,CAAC,CAAC;QAEH,OAAO;YACL,IAAI,CAAC,KAAc;gBACjB,IAAI,OAAO,KAAK,KAAK,SAAS,EAAE,CAAC;oBAC/B,OAAO,KAAK,CAAC;gBACf,CAAC;gBAED,MAAM,SAAS,GAAG,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;gBAE9C,IAAI,SAAS,KAAK,IAAI,EAAE,CAAC;oBACvB,OAAO,KAAK,CAAC;gBACf,CAAC;gBAED,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;oBAC9B,OAAO,MAAM,CAAC,SAAS,CAAC,CAAC;gBAC3B,CAAC;gBAED,OAAO,SAAS,CAAC;YACnB,CAAC;YACD,GAAG,CAAC,KAAc;gBAChB,IAAI,OAAO,EAAE,CAAC;oBACZ,IAAI,KAAK,KAAK,IAAI,EAAE,CAAC;wBACnB,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,EAAE,CAAC;4BACjC,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;wBAClC,CAAC;oBACH,CAAC;yBAAM,IAAI,KAAK,KAAK,KAAK,EAAE,CAAC;wBAC3B,IAAI,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,EAAE,CAAC;4BAChC,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC;wBACjC,CAAC;oBACH,CAAC;yBAAM,CAAC;wBACN,MAAM,QAAQ,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;wBAE/B,IAAI,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,KAAK,QAAQ,EAAE,CAAC;4BAC7C,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;wBACxC,CAAC;oBACH,CAAC;gBACH,CAAC;gBAED,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;YAC7B,CAAC;SACF,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC;AAED,SAAS,aAAa,CAAC,GAAoB;IACzC,IAAI,KAAa,CAAC;IAElB,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE,CAAC;QAC5B,IAAI,GAAG,CAAC,WAAW,EAAE,CAAC;YACpB,KAAK,GAAG,GAAG,CAAC,WAAW,CAAC;QAC1B,CAAC;aAAM,CAAC;YACN,MAAM,IAAI,KAAK,CAAC,mDAAmD,CAAC,CAAC;QACvE,CAAC;IACH,CAAC;SAAM,CAAC;QACN,KAAK,GAAG,GAAG,CAAC;IACd,CAAC;IAED,OAAO,KAAK,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;AAClD,CAAC"}
|
package/target/lib/attr.test.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { __esDecorate, __propKey, __runInitializers } from "tslib";
|
|
2
|
-
import { expect } from "chai";
|
|
2
|
+
import { expect, assert } from "chai";
|
|
3
|
+
import { effect, observe } from "@joist/observable";
|
|
3
4
|
import { attr } from "./attr.js";
|
|
4
5
|
import { element } from "./element.js";
|
|
5
6
|
it("should read and parse the correct values", () => {
|
|
@@ -288,10 +289,10 @@ it("should throw an error for symbols with no description", async () => {
|
|
|
288
289
|
new MyElement();
|
|
289
290
|
}).to.throw("Cannot handle Symbol property without description");
|
|
290
291
|
});
|
|
291
|
-
it("should
|
|
292
|
+
it("non reflective attributes should still read new attribute values", async () => {
|
|
292
293
|
let MyElement = (() => {
|
|
293
294
|
let _classDecorators = [element({
|
|
294
|
-
tagName: "attr-test-
|
|
295
|
+
tagName: "attr-test-6",
|
|
295
296
|
})];
|
|
296
297
|
let _classDescriptor;
|
|
297
298
|
let _classExtraInitializers = [];
|
|
@@ -322,14 +323,13 @@ it("should not reflect property to attribute", async () => {
|
|
|
322
323
|
return MyElement = _classThis;
|
|
323
324
|
})();
|
|
324
325
|
const el = new MyElement();
|
|
325
|
-
el.value
|
|
326
|
+
el.setAttribute("value", "bar");
|
|
326
327
|
expect(el.value).to.equal("bar");
|
|
327
|
-
expect(el.hasAttribute("value")).to.be.false;
|
|
328
328
|
});
|
|
329
|
-
it("
|
|
329
|
+
it("should allow a manually defined attribute name", async () => {
|
|
330
330
|
let MyElement = (() => {
|
|
331
331
|
let _classDecorators = [element({
|
|
332
|
-
tagName: "attr-test-
|
|
332
|
+
tagName: "attr-test-7",
|
|
333
333
|
})];
|
|
334
334
|
let _classDescriptor;
|
|
335
335
|
let _classExtraInitializers = [];
|
|
@@ -342,14 +342,16 @@ it("non reflective attributes should still read new attribute values", async ()
|
|
|
342
342
|
static { _classThis = this; }
|
|
343
343
|
static {
|
|
344
344
|
const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
|
|
345
|
-
_value_decorators = [attr({
|
|
345
|
+
_value_decorators = [attr({
|
|
346
|
+
name: "aria-label",
|
|
347
|
+
})];
|
|
346
348
|
__esDecorate(this, null, _value_decorators, { kind: "accessor", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_extraInitializers);
|
|
347
349
|
__esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
|
|
348
350
|
MyElement = _classThis = _classDescriptor.value;
|
|
349
351
|
if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
|
|
350
352
|
__runInitializers(_classThis, _classExtraInitializers);
|
|
351
353
|
}
|
|
352
|
-
#value_accessor_storage = __runInitializers(this, _value_initializers, "
|
|
354
|
+
#value_accessor_storage = __runInitializers(this, _value_initializers, "");
|
|
353
355
|
get value() { return this.#value_accessor_storage; }
|
|
354
356
|
set value(value) { this.#value_accessor_storage = value; }
|
|
355
357
|
constructor() {
|
|
@@ -360,37 +362,106 @@ it("non reflective attributes should still read new attribute values", async ()
|
|
|
360
362
|
return MyElement = _classThis;
|
|
361
363
|
})();
|
|
362
364
|
const el = new MyElement();
|
|
365
|
+
el.setAttribute("aria-label", "TEST");
|
|
366
|
+
document.body.append(el);
|
|
367
|
+
expect(el.value).to.equal("TEST");
|
|
368
|
+
el.remove();
|
|
369
|
+
});
|
|
370
|
+
it("should update property when attribute changes", async () => {
|
|
371
|
+
let MyElement = (() => {
|
|
372
|
+
let _classDecorators = [element({
|
|
373
|
+
tagName: "attr-test-8",
|
|
374
|
+
})];
|
|
375
|
+
let _classDescriptor;
|
|
376
|
+
let _classExtraInitializers = [];
|
|
377
|
+
let _classThis;
|
|
378
|
+
let _classSuper = HTMLElement;
|
|
379
|
+
let _value_decorators;
|
|
380
|
+
let _value_initializers = [];
|
|
381
|
+
let _value_extraInitializers = [];
|
|
382
|
+
let _count_decorators;
|
|
383
|
+
let _count_initializers = [];
|
|
384
|
+
let _count_extraInitializers = [];
|
|
385
|
+
let _enabled_decorators;
|
|
386
|
+
let _enabled_initializers = [];
|
|
387
|
+
let _enabled_extraInitializers = [];
|
|
388
|
+
var MyElement = class extends _classSuper {
|
|
389
|
+
static { _classThis = this; }
|
|
390
|
+
static {
|
|
391
|
+
const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
|
|
392
|
+
_value_decorators = [attr()];
|
|
393
|
+
_count_decorators = [attr()];
|
|
394
|
+
_enabled_decorators = [attr()];
|
|
395
|
+
__esDecorate(this, null, _value_decorators, { kind: "accessor", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_extraInitializers);
|
|
396
|
+
__esDecorate(this, null, _count_decorators, { kind: "accessor", name: "count", static: false, private: false, access: { has: obj => "count" in obj, get: obj => obj.count, set: (obj, value) => { obj.count = value; } }, metadata: _metadata }, _count_initializers, _count_extraInitializers);
|
|
397
|
+
__esDecorate(this, null, _enabled_decorators, { kind: "accessor", name: "enabled", static: false, private: false, access: { has: obj => "enabled" in obj, get: obj => obj.enabled, set: (obj, value) => { obj.enabled = value; } }, metadata: _metadata }, _enabled_initializers, _enabled_extraInitializers);
|
|
398
|
+
__esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
|
|
399
|
+
MyElement = _classThis = _classDescriptor.value;
|
|
400
|
+
if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
|
|
401
|
+
__runInitializers(_classThis, _classExtraInitializers);
|
|
402
|
+
}
|
|
403
|
+
#value_accessor_storage = __runInitializers(this, _value_initializers, "foo");
|
|
404
|
+
get value() { return this.#value_accessor_storage; }
|
|
405
|
+
set value(value) { this.#value_accessor_storage = value; }
|
|
406
|
+
#count_accessor_storage = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _count_initializers, 0));
|
|
407
|
+
get count() { return this.#count_accessor_storage; }
|
|
408
|
+
set count(value) { this.#count_accessor_storage = value; }
|
|
409
|
+
#enabled_accessor_storage = (__runInitializers(this, _count_extraInitializers), __runInitializers(this, _enabled_initializers, false));
|
|
410
|
+
get enabled() { return this.#enabled_accessor_storage; }
|
|
411
|
+
set enabled(value) { this.#enabled_accessor_storage = value; }
|
|
412
|
+
constructor() {
|
|
413
|
+
super(...arguments);
|
|
414
|
+
__runInitializers(this, _enabled_extraInitializers);
|
|
415
|
+
}
|
|
416
|
+
};
|
|
417
|
+
return MyElement = _classThis;
|
|
418
|
+
})();
|
|
419
|
+
const el = new MyElement();
|
|
420
|
+
document.body.append(el);
|
|
363
421
|
el.setAttribute("value", "bar");
|
|
364
422
|
expect(el.value).to.equal("bar");
|
|
423
|
+
el.setAttribute("count", "42");
|
|
424
|
+
expect(el.count).to.equal(42);
|
|
425
|
+
el.setAttribute("enabled", "");
|
|
426
|
+
expect(el.enabled).to.equal(true);
|
|
427
|
+
el.removeAttribute("enabled");
|
|
428
|
+
expect(el.enabled).to.equal(false);
|
|
429
|
+
el.remove();
|
|
365
430
|
});
|
|
366
|
-
it("should
|
|
431
|
+
it("setters should be called when attributes change", async () => {
|
|
432
|
+
let callCount = 0;
|
|
367
433
|
let MyElement = (() => {
|
|
368
434
|
let _classDecorators = [element({
|
|
369
|
-
tagName: "attr-test-
|
|
435
|
+
tagName: "attr-test-9",
|
|
370
436
|
})];
|
|
371
437
|
let _classDescriptor;
|
|
372
438
|
let _classExtraInitializers = [];
|
|
373
439
|
let _classThis;
|
|
374
440
|
let _classSuper = HTMLElement;
|
|
441
|
+
let _instanceExtraInitializers = [];
|
|
375
442
|
let _value_decorators;
|
|
376
443
|
let _value_initializers = [];
|
|
377
444
|
let _value_extraInitializers = [];
|
|
445
|
+
let _onValueChange_decorators;
|
|
378
446
|
var MyElement = class extends _classSuper {
|
|
379
447
|
static { _classThis = this; }
|
|
380
448
|
static {
|
|
381
449
|
const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
|
|
382
|
-
_value_decorators = [attr(
|
|
383
|
-
|
|
384
|
-
})];
|
|
450
|
+
_value_decorators = [attr(), observe()];
|
|
451
|
+
_onValueChange_decorators = [effect()];
|
|
385
452
|
__esDecorate(this, null, _value_decorators, { kind: "accessor", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_extraInitializers);
|
|
453
|
+
__esDecorate(this, null, _onValueChange_decorators, { kind: "method", name: "onValueChange", static: false, private: false, access: { has: obj => "onValueChange" in obj, get: obj => obj.onValueChange }, metadata: _metadata }, null, _instanceExtraInitializers);
|
|
386
454
|
__esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
|
|
387
455
|
MyElement = _classThis = _classDescriptor.value;
|
|
388
456
|
if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
|
|
389
457
|
__runInitializers(_classThis, _classExtraInitializers);
|
|
390
458
|
}
|
|
391
|
-
#value_accessor_storage = __runInitializers(this, _value_initializers, "");
|
|
459
|
+
#value_accessor_storage = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _value_initializers, "foo"));
|
|
392
460
|
get value() { return this.#value_accessor_storage; }
|
|
393
461
|
set value(value) { this.#value_accessor_storage = value; }
|
|
462
|
+
onValueChange() {
|
|
463
|
+
callCount++;
|
|
464
|
+
}
|
|
394
465
|
constructor() {
|
|
395
466
|
super(...arguments);
|
|
396
467
|
__runInitializers(this, _value_extraInitializers);
|
|
@@ -399,9 +470,11 @@ it("should allow a manually defined attribute name", async () => {
|
|
|
399
470
|
return MyElement = _classThis;
|
|
400
471
|
})();
|
|
401
472
|
const el = new MyElement();
|
|
402
|
-
el.setAttribute("aria-label", "TEST");
|
|
403
473
|
document.body.append(el);
|
|
404
|
-
|
|
474
|
+
el.setAttribute("value", "bar");
|
|
475
|
+
await Promise.resolve();
|
|
476
|
+
await Promise.resolve();
|
|
477
|
+
assert.equal(callCount, 1);
|
|
405
478
|
el.remove();
|
|
406
479
|
});
|
|
407
480
|
//# sourceMappingURL=attr.test.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"attr.test.js","sourceRoot":"","sources":["../../src/lib/attr.test.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"attr.test.js","sourceRoot":"","sources":["../../src/lib/attr.test.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,MAAM,CAAC;AACtC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAEpD,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,EAAE,CAAC,0CAA0C,EAAE,GAAG,EAAE;QAI5C,SAAS;gCAHd,OAAO,CAAC;gBACP,OAAO,EAAE,aAAa;aACvB,CAAC;;;;0BACsB,WAAW;;;;;;;;;;;;;6BAAnB,SAAQ,WAAW;;;;sCAChC,IAAI,EAAE;sCAGN,IAAI,EAAE;sCAGN,IAAI,EAAE;sCAGN,IAAI,EAAE;gBARP,uKAAS,MAAM,6BAAN,MAAM,uFAAO;gBAGtB,uKAAS,MAAM,6BAAN,MAAM,uFAAK;gBAGpB,uKAAS,MAAM,6BAAN,MAAM,uFAAS;gBAGxB,uKAAS,MAAM,6BAAN,MAAM,uFAAW;gBAX5B,6KAYC;;;gBAZK,uDAAS;;YAEb,yEAAkB,GAAG,EAAC;YAAtB,IAAS,MAAM,4CAAO;YAAtB,IAAS,MAAM,kDAAO;YAGtB,8HAAkB,CAAC,GAAC;YAApB,IAAS,MAAM,4CAAK;YAApB,IAAS,MAAM,kDAAK;YAGpB,8HAAkB,KAAK,GAAC;YAAxB,IAAS,MAAM,4CAAS;YAAxB,IAAS,MAAM,kDAAS;YAGxB,8HAAkB,OAAO,GAAC;YAA1B,IAAS,MAAM,4CAAW;YAA1B,IAAS,MAAM,kDAAW;;;;;;;;IAG5B,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAChD,SAAS,CAAC,SAAS,GAAY;;GAE9B,CAAC;IAEF,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;IAEhC,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAc,CAAC;IAE9D,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IAChC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;IAC9B,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IACjC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAEpC,SAAS,CAAC,MAAM,EAAE,CAAC;AACrB,CAAC,CAAC,CAAC;AAEH,EAAE,CAAC,4CAA4C,EAAE,KAAK,IAAI,EAAE;QAIpD,SAAS;gCAHd,OAAO,CAAC;gBACP,OAAO,EAAE,aAAa;aACvB,CAAC;;;;0BACsB,WAAW;;;;;;;;;;6BAAnB,SAAQ,WAAW;;;;sCAChC,IAAI,EAAE;sCAGN,IAAI,EAAE;sCAGN,IAAI,EAAE;gBALP,uKAAS,MAAM,6BAAN,MAAM,uFAAa;gBAG5B,uKAAS,MAAM,6BAAN,MAAM,uFAAQ;gBAGvB,uKAAS,MAAM,6BAAN,MAAM,uFAAM;gBARvB,6KASC;;;gBATK,uDAAS;;YAEb,yEAAkB,SAAS,EAAC;YAA5B,IAAS,MAAM,4CAAa;YAA5B,IAAS,MAAM,kDAAa;YAG5B,8HAAkB,IAAI,GAAC;YAAvB,IAAS,MAAM,4CAAQ;YAAvB,IAAS,MAAM,kDAAQ;YAGvB,8HAAkB,EAAE,GAAC;YAArB,IAAS,MAAM,4CAAM;YAArB,IAAS,MAAM,kDAAM;;;;;;;;IAGvB,MAAM,EAAE,GAAG,IAAI,SAAS,EAAE,CAAC;IAE3B,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC;IAC9C,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC;IAC9C,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC;AAChD,CAAC,CAAC,CAAC;AAEH,EAAE,CAAC,iDAAiD,EAAE,KAAK,IAAI,EAAE;QAIzD,SAAS;gCAHd,OAAO,CAAC;gBACP,OAAO,EAAE,aAAa;aACvB,CAAC;;;;0BACsB,WAAW;;;;;;;;;;;;;6BAAnB,SAAQ,WAAW;;;;sCAChC,IAAI,EAAE;sCAGN,IAAI,EAAE;sCAGN,IAAI,EAAE;sCAGN,IAAI,EAAE;gBARP,uKAAS,MAAM,6BAAN,MAAM,uFAAW;gBAG1B,uKAAS,MAAM,6BAAN,MAAM,uFAAK;gBAGpB,uKAAS,MAAM,6BAAN,MAAM,uFAAQ;gBAGvB,uKAAS,MAAM,6BAAN,MAAM,uFAAS;gBAX1B,6KAYC;;;gBAZK,uDAAS;;YAEb,yEAAkB,OAAO,EAAC;YAA1B,IAAS,MAAM,4CAAW;YAA1B,IAAS,MAAM,kDAAW;YAG1B,8HAAkB,CAAC,GAAC;YAApB,IAAS,MAAM,4CAAK;YAApB,IAAS,MAAM,kDAAK;YAGpB,8HAAkB,IAAI,GAAC;YAAvB,IAAS,MAAM,4CAAQ;YAAvB,IAAS,MAAM,kDAAQ;YAGvB,8HAAkB,KAAK,GAAC;YAAxB,IAAS,MAAM,4CAAS;YAAxB,IAAS,MAAM,kDAAS;;;;;;;;IAG1B,MAAM,EAAE,GAAG,IAAI,SAAS,EAAE,CAAC;IAE3B,EAAE,CAAC,MAAM,GAAG,OAAO,CAAC;IACpB,EAAE,CAAC,MAAM,GAAG,GAAG,CAAC;IAChB,EAAE,CAAC,MAAM,GAAG,KAAK,CAAC;IAClB,EAAE,CAAC,MAAM,GAAG,IAAI,CAAC;IAEjB,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IACpD,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IAClD,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC;IAC9C,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC;AAC/C,CAAC,CAAC,CAAC;AAEH,EAAE,CAAC,kCAAkC,EAAE,KAAK,IAAI,EAAE;IAChD,MAAM,MAAM,GAAG,SAAS,CAAC;IACzB,MAAM,MAAM,GAAG,MAAM,CAAC,mBAAmB,CAAC,CAAC;QAKrC,SAAS;;gCAHd,OAAO,CAAC;gBACP,OAAO,EAAE,aAAa;aACvB,CAAC;;;;0BACsB,WAAW;;;;;;;;;;6BAAnB,SAAQ,WAAW;;;;gBAEjC,uKAAS,MAAM,6BAAN,MAAM,uFAAW;gBAG1B,qRAAsB;gBAGtB,2RAAyB;gBAR3B,6KASC;;;gBATK,uDAAS;;YAEb,yEAAkB,OAAO,EAAC;YAA1B,IAAS,MAAM,4CAAW;YAA1B,IAAS,MAAM,kDAAW;YAG1B,0HAAoB,CAAC,GAAC;YAAtB,IAAS,wBAJR,IAAI,EAAE,yBAGN,IAAI,EAAE,kBACG,MAAM,GAAC,wCAAK;YAAtB,IAAS,IAAQ,8CAAK;YAGtB,4HAAoB,IAAI,GAAC;YAAzB,IAAS,0BADR,IAAI,EAAE,kBACG,MAAM,GAAC,wCAAQ;YAAzB,IAAS,IAAQ,8CAAQ;;;;;;;;IAG3B,MAAM,EAAE,GAAG,IAAI,SAAS,EAAE,CAAC;IAE3B,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;IAEzB,MAAM,CAAC,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC;QAChE,QAAQ;QACR,SAAS;QACT,mBAAmB;KACpB,CAAC,CAAC;IAEH,EAAE,CAAC,MAAM,EAAE,CAAC;AACd,CAAC,CAAC,CAAC;AAEH,EAAE,CAAC,uDAAuD,EAAE,KAAK,IAAI,EAAE;IACrE,MAAM,CAAC,GAAG,EAAE;QACV,MAAM,KAAK,GAAG,MAAM,EAAE,CAAC;YAKjB,SAAS;;oCAHd,OAAO,CAAC;oBACP,OAAO,EAAE,aAAa;iBACvB,CAAC;;;;8BACsB,WAAW;;;;iCAAnB,SAAQ,WAAW;;;;oBAEjC,qRAAwB;oBAF1B,6KAGC;;;oBAHK,uDAAS;;gBAEb,qEAAmB,IAAI,EAAC;gBAAxB,IAAS,wBADR,IAAI,EAAE,kBACG,KAAK,GAAC,wCAAQ;gBAAxB,IAAS,IAAO,8CAAQ;;;;;;;;QAG1B,IAAI,SAAS,EAAE,CAAC;IAClB,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,mDAAmD,CAAC,CAAC;AACnE,CAAC,CAAC,CAAC;AAEH,EAAE,CAAC,kEAAkE,EAAE,KAAK,IAAI,EAAE;QAI1E,SAAS;gCAHd,OAAO,CAAC;gBACP,OAAO,EAAE,aAAa;aACvB,CAAC;;;;0BACsB,WAAW;;;;6BAAnB,SAAQ,WAAW;;;;qCAChC,IAAI,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;gBACzB,oKAAS,KAAK,6BAAL,KAAK,qFAAS;gBAFzB,6KAGC;;;gBAHK,uDAAS;;YAEb,uEAAiB,KAAK,EAAC;YAAvB,IAAS,KAAK,2CAAS;YAAvB,IAAS,KAAK,iDAAS;;;;;;;;IAGzB,MAAM,EAAE,GAAG,IAAI,SAAS,EAAE,CAAC;IAC3B,EAAE,CAAC,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;IAEhC,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;AACnC,CAAC,CAAC,CAAC;AAEH,EAAE,CAAC,gDAAgD,EAAE,KAAK,IAAI,EAAE;QAIxD,SAAS;gCAHd,OAAO,CAAC;gBACP,OAAO,EAAE,aAAa;aACvB,CAAC;;;;0BACsB,WAAW;;;;6BAAnB,SAAQ,WAAW;;;;qCAChC,IAAI,CAAC;wBACJ,IAAI,EAAE,YAAY;qBACnB,CAAC;gBACF,oKAAS,KAAK,6BAAL,KAAK,qFAAM;gBAJtB,6KAKC;;;gBALK,uDAAS;;YAIb,uEAAiB,EAAE,EAAC;YAApB,IAAS,KAAK,2CAAM;YAApB,IAAS,KAAK,iDAAM;;;;;;;;IAGtB,MAAM,EAAE,GAAG,IAAI,SAAS,EAAE,CAAC;IAC3B,EAAE,CAAC,YAAY,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;IAEtC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;IAEzB,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IAElC,EAAE,CAAC,MAAM,EAAE,CAAC;AACd,CAAC,CAAC,CAAC;AAEH,EAAE,CAAC,+CAA+C,EAAE,KAAK,IAAI,EAAE;QAIvD,SAAS;gCAHd,OAAO,CAAC;gBACP,OAAO,EAAE,aAAa;aACvB,CAAC;;;;0BACsB,WAAW;;;;;;;;;;6BAAnB,SAAQ,WAAW;;;;qCAChC,IAAI,EAAE;qCAGN,IAAI,EAAE;uCAGN,IAAI,EAAE;gBALP,oKAAS,KAAK,6BAAL,KAAK,qFAAS;gBAGvB,oKAAS,KAAK,6BAAL,KAAK,qFAAK;gBAGnB,0KAAS,OAAO,6BAAP,OAAO,yFAAS;gBAR3B,6KASC;;;gBATK,uDAAS;;YAEb,uEAAiB,KAAK,EAAC;YAAvB,IAAS,KAAK,2CAAS;YAAvB,IAAS,KAAK,iDAAS;YAGvB,2HAAiB,CAAC,GAAC;YAAnB,IAAS,KAAK,2CAAK;YAAnB,IAAS,KAAK,iDAAK;YAGnB,+HAAmB,KAAK,GAAC;YAAzB,IAAS,OAAO,6CAAS;YAAzB,IAAS,OAAO,mDAAS;;;;;;;;IAG3B,MAAM,EAAE,GAAG,IAAI,SAAS,EAAE,CAAC;IAC3B,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;IAGzB,EAAE,CAAC,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;IAChC,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IAGjC,EAAE,CAAC,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;IAC/B,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;IAG9B,EAAE,CAAC,YAAY,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;IAC/B,MAAM,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IAElC,EAAE,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC;IAC9B,MAAM,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IAEnC,EAAE,CAAC,MAAM,EAAE,CAAC;AACd,CAAC,CAAC,CAAC;AAEH,EAAE,CAAC,iDAAiD,EAAE,KAAK,IAAI,EAAE;IAC/D,IAAI,SAAS,GAAG,CAAC,CAAC;QAKZ,SAAS;gCAHd,OAAO,CAAC;gBACP,OAAO,EAAE,aAAa;aACvB,CAAC;;;;0BACsB,WAAW;;;;;;6BAAnB,SAAQ,WAAW;;;;qCAChC,IAAI,EAAE,EACN,OAAO,EAAE;6CAGT,MAAM,EAAE;gBAFT,oKAAS,KAAK,6BAAL,KAAK,qFAAS;gBAGvB,0LAAA,aAAa,6DAEZ;gBARH,6KASC;;;gBATK,uDAAS;;YAGb,2BAHI,mDAAS,+CAGI,KAAK,GAAC;YAAvB,IAAS,KAAK,2CAAS;YAAvB,IAAS,KAAK,iDAAS;YAGvB,aAAa;gBACX,SAAS,EAAE,CAAC;YACd,CAAC;;;;;;;;IAGH,MAAM,EAAE,GAAG,IAAI,SAAS,EAAE,CAAC;IAC3B,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;IAEzB,EAAE,CAAC,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;IAGhC,MAAM,OAAO,CAAC,OAAO,EAAE,CAAC;IACxB,MAAM,OAAO,CAAC,OAAO,EAAE,CAAC;IAExB,MAAM,CAAC,KAAK,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC;IAE3B,EAAE,CAAC,MAAM,EAAE,CAAC;AACd,CAAC,CAAC,CAAC"}
|
package/target/lib/element.js
CHANGED
|
@@ -32,21 +32,15 @@ export function element(opts) {
|
|
|
32
32
|
const cbs = meta.attrChanges.get(name);
|
|
33
33
|
if (attr) {
|
|
34
34
|
if (oldValue !== newValue) {
|
|
35
|
-
const
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
}
|
|
40
|
-
else if (newValue === "false") {
|
|
41
|
-
attr.setPropValue.call(this, false);
|
|
42
|
-
}
|
|
35
|
+
const sourceValue = attr.access.get.call(this);
|
|
36
|
+
let value = newValue;
|
|
37
|
+
if (typeof sourceValue === "boolean") {
|
|
38
|
+
value = newValue !== null;
|
|
43
39
|
}
|
|
44
|
-
else if (typeof
|
|
45
|
-
|
|
46
|
-
}
|
|
47
|
-
else {
|
|
48
|
-
attr.setPropValue.call(this, newValue);
|
|
40
|
+
else if (typeof sourceValue === "number") {
|
|
41
|
+
value = Number(newValue);
|
|
49
42
|
}
|
|
43
|
+
attr.access.set.call(this, value);
|
|
50
44
|
}
|
|
51
45
|
if (cbs) {
|
|
52
46
|
for (const cb of cbs) {
|
|
@@ -95,9 +89,9 @@ export function element(opts) {
|
|
|
95
89
|
};
|
|
96
90
|
}
|
|
97
91
|
function reflectAttributeValues(el, attrs) {
|
|
98
|
-
for (const [attrName, {
|
|
92
|
+
for (const [attrName, { access, reflect }] of attrs) {
|
|
99
93
|
if (reflect) {
|
|
100
|
-
const value =
|
|
94
|
+
const value = access.get.call(el);
|
|
101
95
|
if (value !== null && value !== undefined && value !== "") {
|
|
102
96
|
if (typeof value === "boolean") {
|
|
103
97
|
if (value === true) {
|
|
@@ -106,7 +100,7 @@ function reflectAttributeValues(el, attrs) {
|
|
|
106
100
|
}
|
|
107
101
|
}
|
|
108
102
|
}
|
|
109
|
-
else {
|
|
103
|
+
else if (!el.hasAttribute(attrName)) {
|
|
110
104
|
const strValue = String(value);
|
|
111
105
|
if (el.getAttribute(attrName) !== strValue) {
|
|
112
106
|
el.setAttribute(attrName, strValue);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"element.js","sourceRoot":"","sources":["../../src/lib/element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,aAAa,EAAE,MAAM,eAAe,CAAC;AAajE,MAAM,UAAU,OAAO,CAA+B,IAAkB;IACtE,OAAO,SAAS,gBAAgB,CAAC,IAAO,EAAE,GAA6B;QACrE,MAAM,IAAI,GAAG,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;QAE9C,GAAG,CAAC,cAAc,CAAC;YACjB,IAAI,IAAI,EAAE,OAAO,EAAE,CAAC;gBAClB,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC;oBACtC,cAAc,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;gBAC5C,CAAC;YACH,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,MAAM,GAAG,GAAG;YACV,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,KAAM,SAAQ,IAAI;gBAC7B,MAAM,CAAC,kBAAkB,GAAa,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC;gBAEpE,gBAAgB,GAA2B,IAAI,CAAC;gBAEhD,YAAY,GAAG,IAAW;oBACxB,KAAK,CAAC,GAAG,IAAI,CAAC,CAAC;oBAEf,IAAI,IAAI,EAAE,SAAS,EAAE,CAAC;wBACpB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;4BACrB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,aAAa,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC;wBAC5D,CAAC;wBAED,KAAK,MAAM,GAAG,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;4BACjC,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;wBAClB,CAAC;oBACH,CAAC;oBAED,KAAK,MAAM,EAAE,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;wBAC9B,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;oBAChB,CAAC;gBACH,CAAC;gBAED,wBAAwB,CAAC,IAAY,EAAE,QAAgB,EAAE,QAAgB;oBACvE,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;oBAClC,MAAM,GAAG,GAAG,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;oBAEvC,IAAI,IAAI,EAAE,CAAC;wBACT,IAAI,QAAQ,KAAK,QAAQ,EAAE,CAAC;4BAC1B,MAAM,
|
|
1
|
+
{"version":3,"file":"element.js","sourceRoot":"","sources":["../../src/lib/element.ts"],"names":[],"mappings":"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"}
|
package/target/lib/metadata.d.ts
CHANGED
|
@@ -2,8 +2,10 @@ export interface AttrDef {
|
|
|
2
2
|
propName: string | symbol;
|
|
3
3
|
observe: boolean;
|
|
4
4
|
reflect: boolean;
|
|
5
|
-
|
|
6
|
-
|
|
5
|
+
access: {
|
|
6
|
+
get: () => unknown;
|
|
7
|
+
set: (value: unknown) => void;
|
|
8
|
+
};
|
|
7
9
|
}
|
|
8
10
|
export type ListenerSelector<T> = (el: T) => EventTarget | null;
|
|
9
11
|
export interface Listener<T> {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"metadata.js","sourceRoot":"","sources":["../../src/lib/metadata.ts"],"names":[],"mappings":"AAAC,MAAc,CAAC,QAAQ,KAAK,MAAM,CAAC,iBAAiB,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"metadata.js","sourceRoot":"","sources":["../../src/lib/metadata.ts"],"names":[],"mappings":"AAAC,MAAc,CAAC,QAAQ,KAAK,MAAM,CAAC,iBAAiB,CAAC,CAAC;AAsBvD,MAAM,OAAO,YAAa,SAAQ,GAAoB;CAAG;AACzD,MAAM,OAAO,kBAAmB,SAAQ,GAAqC;CAAG;AAEhF,MAAM,OAAO,eAAe;IAC1B,KAAK,GAAiB,IAAI,YAAY,EAAE,CAAC;IACzC,WAAW,GAAuB,IAAI,kBAAkB,EAAE,CAAC;IAC3D,SAAS,GAAkB,EAAE,CAAC;IAC9B,OAAO,GAAoB,IAAI,GAAG,EAAE,CAAC;CACtC;AAED,MAAM,OAAO,aAAc,SAAQ,OAAyC;IAC1E,IAAI,CAAI,KAAa;QACnB,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC;YACrB,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,IAAI,eAAe,EAAE,CAAC,CAAC;QACzC,CAAC;QAED,OAAO,IAAI,CAAC,GAAG,CAAC,KAAK,CAA6B,CAAC;IACrD,CAAC;CACF;AAED,MAAM,CAAC,MAAM,aAAa,GAAkB,IAAI,aAAa,EAAE,CAAC"}
|