@joist/element 3.0.0-next.16 → 3.0.0-next.18
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/README.md +3 -1
- package/package.json +2 -2
- package/target/lib/attr.js +1 -1
- package/target/lib/attr.js.map +1 -1
- package/target/lib/attr.test.js +105 -115
- package/target/lib/attr.test.js.map +1 -1
package/README.md
CHANGED
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
Create a shadow root and apply styles and html as defined
|
|
4
4
|
|
|
5
|
+
## NOTE: This lastest version uses the stage-3 decorator proposal. This requires typescript >= 5.0 and many other tools do not yet support this latest syntax.
|
|
6
|
+
|
|
5
7
|
#### Installation:
|
|
6
8
|
|
|
7
9
|
```BASH
|
|
@@ -11,7 +13,7 @@ npm i @joist/element@next
|
|
|
11
13
|
#### Example:
|
|
12
14
|
|
|
13
15
|
```TS
|
|
14
|
-
import { shadow, css, html,
|
|
16
|
+
import { tagName, shadow, css, html, attr, listen } from '@joist/element';
|
|
15
17
|
|
|
16
18
|
export class MyElement extends HTMLElement {
|
|
17
19
|
// define a custom element
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@joist/element",
|
|
3
|
-
"version": "3.0.0-next.
|
|
3
|
+
"version": "3.0.0-next.18",
|
|
4
4
|
"main": "./target/lib.js",
|
|
5
5
|
"module": "./target/lib.js",
|
|
6
6
|
"exports": {
|
|
@@ -52,7 +52,7 @@
|
|
|
52
52
|
]
|
|
53
53
|
},
|
|
54
54
|
"test": {
|
|
55
|
-
"command": "wtr --config
|
|
55
|
+
"command": "wtr --config wtr.config.mjs --port 8001",
|
|
56
56
|
"files": [
|
|
57
57
|
"target/**"
|
|
58
58
|
],
|
package/target/lib/attr.js
CHANGED
package/target/lib/attr.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"attr.js","sourceRoot":"","sources":["../../src/lib/attr.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,IAAI,CAClB,EAAE,GAAG,EAAE,GAAG,EAA+C,EACzD,GAAwC;IAExC,OAAO;QACL,IAAI,CAAC,KAAc;YACjB,IAAI,OAAO,GAAG,CAAC,IAAI,KAAK,QAAQ,EAAE;gBAChC,IAAI,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;oBAC/B,MAAM,IAAI,GAAG,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;oBAGzC,IAAI,IAAI,KAAK,EAAE,EAAE;wBACf,OAAO,IAAI,CAAC;qBACb;oBAGD,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;wBAC7B,OAAO,MAAM,CAAC,IAAI,CAAC,CAAC;qBACrB;oBAGD,OAAO,IAAI,CAAC;iBACb;
|
|
1
|
+
{"version":3,"file":"attr.js","sourceRoot":"","sources":["../../src/lib/attr.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,IAAI,CAClB,EAAE,GAAG,EAAE,GAAG,EAA+C,EACzD,GAAwC;IAExC,OAAO;QACL,IAAI,CAAC,KAAc;YACjB,IAAI,OAAO,GAAG,CAAC,IAAI,KAAK,QAAQ,EAAE;gBAChC,IAAI,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;oBAC/B,MAAM,IAAI,GAAG,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;oBAGzC,IAAI,IAAI,KAAK,EAAE,EAAE;wBACf,OAAO,IAAI,CAAC;qBACb;oBAGD,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;wBAC7B,OAAO,MAAM,CAAC,IAAI,CAAC,CAAC;qBACrB;oBAGD,OAAO,IAAI,CAAC;iBACb;gBAQD,OAAO,CAAC,OAAO,EAAE,CAAC,IAAI,CAAC,GAAG,EAAE;oBAC1B,MAAM,MAAM,GAAG,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;oBAE9B,IAAI,MAAM,KAAK,IAAI,IAAI,MAAM,KAAK,SAAS,IAAI,MAAM,KAAK,EAAE,EAAE;wBAC5D,IAAI,OAAO,MAAM,KAAK,SAAS,EAAE;4BAC/B,IAAI,MAAM,KAAK,IAAI,EAAE;gCAEnB,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC;6BAC5C;yBACF;6BAAM;4BAEL,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC;yBACxD;qBACF;gBACH,CAAC,CAAC,CAAC;aACJ;YAED,OAAO,KAAK,CAAC;QACf,CAAC;QACD,GAAG,CAAC,KAAc;YAChB,IAAI,OAAO,GAAG,CAAC,IAAI,KAAK,QAAQ,EAAE;gBAChC,IAAI,OAAO,KAAK,KAAK,SAAS,EAAE;oBAC9B,IAAI,KAAK,EAAE;wBACT,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;qBACjC;yBAAM;wBACL,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;qBAChC;iBACF;qBAAM;oBACL,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;iBAC5C;aACF;YAED,OAAO,GAAG,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;QAC/B,CAAC;QACD,GAAG;YACD,MAAM,OAAO,GAAG,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YAE/B,IAAI,OAAO,GAAG,CAAC,IAAI,KAAK,QAAQ,EAAE;gBAChC,MAAM,IAAI,GAAG,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;gBAEzC,IAAI,IAAI,KAAK,IAAI,EAAE;oBAEjB,IAAI,IAAI,KAAK,EAAE,EAAE;wBACf,OAAO,IAAI,CAAC;qBACb;oBAGD,IAAI,OAAO,OAAO,KAAK,QAAQ,EAAE;wBAC/B,OAAO,MAAM,CAAC,IAAI,CAAC,CAAC;qBACrB;oBAGD,OAAO,IAAI,CAAC;iBACb;aACF;YAGD,OAAO,OAAO,CAAC;QACjB,CAAC;KACF,CAAC;AACJ,CAAC"}
|
package/target/lib/attr.test.js
CHANGED
|
@@ -5,122 +5,84 @@ describe('observable: attr()', () => {
|
|
|
5
5
|
it('should write default value to attribute', async () => {
|
|
6
6
|
let MyElement = (() => {
|
|
7
7
|
let _instanceExtraInitializers = [];
|
|
8
|
-
let
|
|
9
|
-
let
|
|
8
|
+
let _value1_decorators;
|
|
9
|
+
let _value1_initializers = [];
|
|
10
|
+
let _value2_decorators;
|
|
11
|
+
let _value2_initializers = [];
|
|
12
|
+
let _value3_decorators;
|
|
13
|
+
let _value3_initializers = [];
|
|
10
14
|
return class MyElement extends HTMLElement {
|
|
11
15
|
static {
|
|
12
|
-
|
|
13
|
-
|
|
16
|
+
_value1_decorators = [attr];
|
|
17
|
+
_value2_decorators = [attr];
|
|
18
|
+
_value3_decorators = [attr];
|
|
19
|
+
__esDecorate(this, null, _value1_decorators, { kind: "accessor", name: "value1", static: false, private: false, access: { has: obj => "value1" in obj, get: obj => obj.value1, set: (obj, value) => { obj.value1 = value; } } }, _value1_initializers, _instanceExtraInitializers);
|
|
20
|
+
__esDecorate(this, null, _value2_decorators, { kind: "accessor", name: "value2", static: false, private: false, access: { has: obj => "value2" in obj, get: obj => obj.value2, set: (obj, value) => { obj.value2 = value; } } }, _value2_initializers, _instanceExtraInitializers);
|
|
21
|
+
__esDecorate(this, null, _value3_decorators, { kind: "accessor", name: "value3", static: false, private: false, access: { has: obj => "value3" in obj, get: obj => obj.value3, set: (obj, value) => { obj.value3 = value; } } }, _value3_initializers, _instanceExtraInitializers);
|
|
14
22
|
}
|
|
15
|
-
#
|
|
16
|
-
get
|
|
17
|
-
set
|
|
23
|
+
#value1_accessor_storage = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _value1_initializers, 'hello'));
|
|
24
|
+
get value1() { return this.#value1_accessor_storage; }
|
|
25
|
+
set value1(value) { this.#value1_accessor_storage = value; }
|
|
26
|
+
#value2_accessor_storage = __runInitializers(this, _value2_initializers, 0);
|
|
27
|
+
get value2() { return this.#value2_accessor_storage; }
|
|
28
|
+
set value2(value) { this.#value2_accessor_storage = value; }
|
|
29
|
+
#value3_accessor_storage = __runInitializers(this, _value3_initializers, true);
|
|
30
|
+
get value3() { return this.#value3_accessor_storage; }
|
|
31
|
+
set value3(value) { this.#value3_accessor_storage = value; }
|
|
18
32
|
};
|
|
19
33
|
})();
|
|
20
34
|
customElements.define('attr-test-1', MyElement);
|
|
21
35
|
const el = await fixture(html `<attr-test-1></attr-test-1>`);
|
|
22
|
-
expect(el.getAttribute('
|
|
36
|
+
expect(el.getAttribute('value1')).to.equal('hello');
|
|
37
|
+
expect(el.getAttribute('value2')).to.equal('0');
|
|
38
|
+
expect(el.getAttribute('value3')).to.equal('');
|
|
23
39
|
});
|
|
24
|
-
it('should read
|
|
40
|
+
it('should read and parse the correct values', async () => {
|
|
25
41
|
let MyElement = (() => {
|
|
26
42
|
let _instanceExtraInitializers_1 = [];
|
|
27
|
-
let
|
|
28
|
-
let
|
|
43
|
+
let _value1_decorators;
|
|
44
|
+
let _value1_initializers = [];
|
|
45
|
+
let _value2_decorators;
|
|
46
|
+
let _value2_initializers = [];
|
|
47
|
+
let _value3_decorators;
|
|
48
|
+
let _value3_initializers = [];
|
|
49
|
+
let _value4_decorators;
|
|
50
|
+
let _value4_initializers = [];
|
|
29
51
|
return class MyElement extends HTMLElement {
|
|
30
52
|
static {
|
|
31
|
-
|
|
32
|
-
|
|
53
|
+
_value1_decorators = [attr];
|
|
54
|
+
_value2_decorators = [attr];
|
|
55
|
+
_value3_decorators = [attr];
|
|
56
|
+
_value4_decorators = [attr];
|
|
57
|
+
__esDecorate(this, null, _value1_decorators, { kind: "accessor", name: "value1", static: false, private: false, access: { has: obj => "value1" in obj, get: obj => obj.value1, set: (obj, value) => { obj.value1 = value; } } }, _value1_initializers, _instanceExtraInitializers_1);
|
|
58
|
+
__esDecorate(this, null, _value2_decorators, { kind: "accessor", name: "value2", static: false, private: false, access: { has: obj => "value2" in obj, get: obj => obj.value2, set: (obj, value) => { obj.value2 = value; } } }, _value2_initializers, _instanceExtraInitializers_1);
|
|
59
|
+
__esDecorate(this, null, _value3_decorators, { kind: "accessor", name: "value3", static: false, private: false, access: { has: obj => "value3" in obj, get: obj => obj.value3, set: (obj, value) => { obj.value3 = value; } } }, _value3_initializers, _instanceExtraInitializers_1);
|
|
60
|
+
__esDecorate(this, null, _value4_decorators, { kind: "accessor", name: "value4", static: false, private: false, access: { has: obj => "value4" in obj, get: obj => obj.value4, set: (obj, value) => { obj.value4 = value; } } }, _value4_initializers, _instanceExtraInitializers_1);
|
|
33
61
|
}
|
|
34
|
-
#
|
|
35
|
-
get
|
|
36
|
-
set
|
|
62
|
+
#value1_accessor_storage = (__runInitializers(this, _instanceExtraInitializers_1), __runInitializers(this, _value1_initializers, 100));
|
|
63
|
+
get value1() { return this.#value1_accessor_storage; }
|
|
64
|
+
set value1(value) { this.#value1_accessor_storage = value; }
|
|
65
|
+
#value2_accessor_storage = __runInitializers(this, _value2_initializers, 0);
|
|
66
|
+
get value2() { return this.#value2_accessor_storage; }
|
|
67
|
+
set value2(value) { this.#value2_accessor_storage = value; }
|
|
68
|
+
#value3_accessor_storage = __runInitializers(this, _value3_initializers, false);
|
|
69
|
+
get value3() { return this.#value3_accessor_storage; }
|
|
70
|
+
set value3(value) { this.#value3_accessor_storage = value; }
|
|
71
|
+
#value4_accessor_storage = __runInitializers(this, _value4_initializers, 'hello');
|
|
72
|
+
get value4() { return this.#value4_accessor_storage; }
|
|
73
|
+
set value4(value) { this.#value4_accessor_storage = value; }
|
|
37
74
|
};
|
|
38
75
|
})();
|
|
39
76
|
customElements.define('attr-test-2', MyElement);
|
|
40
|
-
const el = await fixture(html `<attr-test-2
|
|
41
|
-
expect(el.
|
|
77
|
+
const el = await fixture(html `<attr-test-2 value2="2" value3 value4="world"></attr-test-2>`);
|
|
78
|
+
expect(el.value1).to.equal(100);
|
|
79
|
+
expect(el.value2).to.equal(2);
|
|
80
|
+
expect(el.value3).to.equal(true);
|
|
81
|
+
expect(el.value4).to.equal('world');
|
|
42
82
|
});
|
|
43
|
-
it('should write
|
|
83
|
+
it('should not write falsy props to attributes', async () => {
|
|
44
84
|
let MyElement = (() => {
|
|
45
85
|
let _instanceExtraInitializers_2 = [];
|
|
46
|
-
let _hello_decorators;
|
|
47
|
-
let _hello_initializers = [];
|
|
48
|
-
return class MyElement extends HTMLElement {
|
|
49
|
-
static {
|
|
50
|
-
_hello_decorators = [attr];
|
|
51
|
-
__esDecorate(this, null, _hello_decorators, { kind: "accessor", name: "hello", static: false, private: false, access: { has: obj => "hello" in obj, get: obj => obj.hello, set: (obj, value) => { obj.hello = value; } } }, _hello_initializers, _instanceExtraInitializers_2);
|
|
52
|
-
}
|
|
53
|
-
#hello_accessor_storage = (__runInitializers(this, _instanceExtraInitializers_2), __runInitializers(this, _hello_initializers, true));
|
|
54
|
-
get hello() { return this.#hello_accessor_storage; }
|
|
55
|
-
set hello(value) { this.#hello_accessor_storage = value; }
|
|
56
|
-
};
|
|
57
|
-
})();
|
|
58
|
-
customElements.define('attr-test-3', MyElement);
|
|
59
|
-
const el = await fixture(html `<attr-test-3></attr-test-3>`);
|
|
60
|
-
expect(el.getAttribute('hello')).to.equal('');
|
|
61
|
-
el.hello = false;
|
|
62
|
-
expect(el.getAttribute('hello')).to.equal(null);
|
|
63
|
-
});
|
|
64
|
-
it('should parse to boolean values', async () => {
|
|
65
|
-
let MyElement = (() => {
|
|
66
|
-
let _instanceExtraInitializers_3 = [];
|
|
67
|
-
let _hello_decorators;
|
|
68
|
-
let _hello_initializers = [];
|
|
69
|
-
return class MyElement extends HTMLElement {
|
|
70
|
-
static {
|
|
71
|
-
_hello_decorators = [attr];
|
|
72
|
-
__esDecorate(this, null, _hello_decorators, { kind: "accessor", name: "hello", static: false, private: false, access: { has: obj => "hello" in obj, get: obj => obj.hello, set: (obj, value) => { obj.hello = value; } } }, _hello_initializers, _instanceExtraInitializers_3);
|
|
73
|
-
}
|
|
74
|
-
#hello_accessor_storage = (__runInitializers(this, _instanceExtraInitializers_3), __runInitializers(this, _hello_initializers, false));
|
|
75
|
-
get hello() { return this.#hello_accessor_storage; }
|
|
76
|
-
set hello(value) { this.#hello_accessor_storage = value; }
|
|
77
|
-
};
|
|
78
|
-
})();
|
|
79
|
-
customElements.define('attr-test-4', MyElement);
|
|
80
|
-
const el = await fixture(html `<attr-test-4 hello></attr-test-4>`);
|
|
81
|
-
expect(el.hello).to.equal(true);
|
|
82
|
-
});
|
|
83
|
-
it('should read attributes as number if prop is of type number', async () => {
|
|
84
|
-
let MyElement = (() => {
|
|
85
|
-
let _instanceExtraInitializers_4 = [];
|
|
86
|
-
let _value_decorators;
|
|
87
|
-
let _value_initializers = [];
|
|
88
|
-
return class MyElement extends HTMLElement {
|
|
89
|
-
static {
|
|
90
|
-
_value_decorators = [attr];
|
|
91
|
-
__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; } } }, _value_initializers, _instanceExtraInitializers_4);
|
|
92
|
-
}
|
|
93
|
-
#value_accessor_storage = (__runInitializers(this, _instanceExtraInitializers_4), __runInitializers(this, _value_initializers, 0));
|
|
94
|
-
get value() { return this.#value_accessor_storage; }
|
|
95
|
-
set value(value) { this.#value_accessor_storage = value; }
|
|
96
|
-
};
|
|
97
|
-
})();
|
|
98
|
-
customElements.define('attr-test-5', MyElement);
|
|
99
|
-
const el = await fixture(html `<attr-test-5 value="100"></attr-test-5>`);
|
|
100
|
-
expect(el.value).to.equal(100);
|
|
101
|
-
});
|
|
102
|
-
it('should NOT read attributes as number if prop is of type string', async () => {
|
|
103
|
-
let MyElement = (() => {
|
|
104
|
-
let _instanceExtraInitializers_5 = [];
|
|
105
|
-
let _value_decorators;
|
|
106
|
-
let _value_initializers = [];
|
|
107
|
-
return class MyElement extends HTMLElement {
|
|
108
|
-
static {
|
|
109
|
-
_value_decorators = [attr];
|
|
110
|
-
__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; } } }, _value_initializers, _instanceExtraInitializers_5);
|
|
111
|
-
}
|
|
112
|
-
#value_accessor_storage = (__runInitializers(this, _instanceExtraInitializers_5), __runInitializers(this, _value_initializers, '0'));
|
|
113
|
-
get value() { return this.#value_accessor_storage; }
|
|
114
|
-
set value(value) { this.#value_accessor_storage = value; }
|
|
115
|
-
};
|
|
116
|
-
})();
|
|
117
|
-
customElements.define('attr-test-6', MyElement);
|
|
118
|
-
const el = await fixture(html `<attr-test-6 value="100"></attr-test-6>`);
|
|
119
|
-
expect(el.value).to.equal('100');
|
|
120
|
-
});
|
|
121
|
-
it('should not write undefined props to attributes', async () => {
|
|
122
|
-
let MyElement = (() => {
|
|
123
|
-
let _instanceExtraInitializers_6 = [];
|
|
124
86
|
let _value1_decorators;
|
|
125
87
|
let _value1_initializers = [];
|
|
126
88
|
let _value2_decorators;
|
|
@@ -132,11 +94,11 @@ describe('observable: attr()', () => {
|
|
|
132
94
|
_value1_decorators = [attr];
|
|
133
95
|
_value2_decorators = [attr];
|
|
134
96
|
_value3_decorators = [attr];
|
|
135
|
-
__esDecorate(this, null, _value1_decorators, { kind: "accessor", name: "value1", static: false, private: false, access: { has: obj => "value1" in obj, get: obj => obj.value1, set: (obj, value) => { obj.value1 = value; } } }, _value1_initializers,
|
|
136
|
-
__esDecorate(this, null, _value2_decorators, { kind: "accessor", name: "value2", static: false, private: false, access: { has: obj => "value2" in obj, get: obj => obj.value2, set: (obj, value) => { obj.value2 = value; } } }, _value2_initializers,
|
|
137
|
-
__esDecorate(this, null, _value3_decorators, { kind: "accessor", name: "value3", static: false, private: false, access: { has: obj => "value3" in obj, get: obj => obj.value3, set: (obj, value) => { obj.value3 = value; } } }, _value3_initializers,
|
|
97
|
+
__esDecorate(this, null, _value1_decorators, { kind: "accessor", name: "value1", static: false, private: false, access: { has: obj => "value1" in obj, get: obj => obj.value1, set: (obj, value) => { obj.value1 = value; } } }, _value1_initializers, _instanceExtraInitializers_2);
|
|
98
|
+
__esDecorate(this, null, _value2_decorators, { kind: "accessor", name: "value2", static: false, private: false, access: { has: obj => "value2" in obj, get: obj => obj.value2, set: (obj, value) => { obj.value2 = value; } } }, _value2_initializers, _instanceExtraInitializers_2);
|
|
99
|
+
__esDecorate(this, null, _value3_decorators, { kind: "accessor", name: "value3", static: false, private: false, access: { has: obj => "value3" in obj, get: obj => obj.value3, set: (obj, value) => { obj.value3 = value; } } }, _value3_initializers, _instanceExtraInitializers_2);
|
|
138
100
|
}
|
|
139
|
-
#value1_accessor_storage = (__runInitializers(this,
|
|
101
|
+
#value1_accessor_storage = (__runInitializers(this, _instanceExtraInitializers_2), __runInitializers(this, _value1_initializers, undefined));
|
|
140
102
|
get value1() { return this.#value1_accessor_storage; }
|
|
141
103
|
set value1(value) { this.#value1_accessor_storage = value; }
|
|
142
104
|
#value2_accessor_storage = __runInitializers(this, _value2_initializers, null);
|
|
@@ -147,30 +109,58 @@ describe('observable: attr()', () => {
|
|
|
147
109
|
set value3(value) { this.#value3_accessor_storage = value; }
|
|
148
110
|
};
|
|
149
111
|
})();
|
|
150
|
-
customElements.define('attr-test-
|
|
151
|
-
const el = await fixture(html `<attr-test-
|
|
112
|
+
customElements.define('attr-test-3', MyElement);
|
|
113
|
+
const el = await fixture(html `<attr-test-3></attr-test-3>`);
|
|
152
114
|
expect(el.hasAttribute('value1')).to.be.false;
|
|
153
115
|
expect(el.hasAttribute('value2')).to.be.false;
|
|
154
116
|
expect(el.hasAttribute('value3')).to.be.false;
|
|
155
117
|
});
|
|
156
|
-
it('should
|
|
118
|
+
it('should update attributes when props are changed', async () => {
|
|
157
119
|
let MyElement = (() => {
|
|
158
|
-
let
|
|
159
|
-
let
|
|
160
|
-
let
|
|
120
|
+
let _instanceExtraInitializers_3 = [];
|
|
121
|
+
let _value1_decorators;
|
|
122
|
+
let _value1_initializers = [];
|
|
123
|
+
let _value2_decorators;
|
|
124
|
+
let _value2_initializers = [];
|
|
125
|
+
let _value3_decorators;
|
|
126
|
+
let _value3_initializers = [];
|
|
127
|
+
let _value4_decorators;
|
|
128
|
+
let _value4_initializers = [];
|
|
161
129
|
return class MyElement extends HTMLElement {
|
|
162
130
|
static {
|
|
163
|
-
|
|
164
|
-
|
|
131
|
+
_value1_decorators = [attr];
|
|
132
|
+
_value2_decorators = [attr];
|
|
133
|
+
_value3_decorators = [attr];
|
|
134
|
+
_value4_decorators = [attr];
|
|
135
|
+
__esDecorate(this, null, _value1_decorators, { kind: "accessor", name: "value1", static: false, private: false, access: { has: obj => "value1" in obj, get: obj => obj.value1, set: (obj, value) => { obj.value1 = value; } } }, _value1_initializers, _instanceExtraInitializers_3);
|
|
136
|
+
__esDecorate(this, null, _value2_decorators, { kind: "accessor", name: "value2", static: false, private: false, access: { has: obj => "value2" in obj, get: obj => obj.value2, set: (obj, value) => { obj.value2 = value; } } }, _value2_initializers, _instanceExtraInitializers_3);
|
|
137
|
+
__esDecorate(this, null, _value3_decorators, { kind: "accessor", name: "value3", static: false, private: false, access: { has: obj => "value3" in obj, get: obj => obj.value3, set: (obj, value) => { obj.value3 = value; } } }, _value3_initializers, _instanceExtraInitializers_3);
|
|
138
|
+
__esDecorate(this, null, _value4_decorators, { kind: "accessor", name: "value4", static: false, private: false, access: { has: obj => "value4" in obj, get: obj => obj.value4, set: (obj, value) => { obj.value4 = value; } } }, _value4_initializers, _instanceExtraInitializers_3);
|
|
165
139
|
}
|
|
166
|
-
#
|
|
167
|
-
get
|
|
168
|
-
set
|
|
140
|
+
#value1_accessor_storage = (__runInitializers(this, _instanceExtraInitializers_3), __runInitializers(this, _value1_initializers, 'hello'));
|
|
141
|
+
get value1() { return this.#value1_accessor_storage; }
|
|
142
|
+
set value1(value) { this.#value1_accessor_storage = value; }
|
|
143
|
+
#value2_accessor_storage = __runInitializers(this, _value2_initializers, 0);
|
|
144
|
+
get value2() { return this.#value2_accessor_storage; }
|
|
145
|
+
set value2(value) { this.#value2_accessor_storage = value; }
|
|
146
|
+
#value3_accessor_storage = __runInitializers(this, _value3_initializers, true);
|
|
147
|
+
get value3() { return this.#value3_accessor_storage; }
|
|
148
|
+
set value3(value) { this.#value3_accessor_storage = value; }
|
|
149
|
+
#value4_accessor_storage = __runInitializers(this, _value4_initializers, false);
|
|
150
|
+
get value4() { return this.#value4_accessor_storage; }
|
|
151
|
+
set value4(value) { this.#value4_accessor_storage = value; }
|
|
169
152
|
};
|
|
170
153
|
})();
|
|
171
|
-
customElements.define('attr-test-
|
|
172
|
-
const el = await fixture(html `<attr-test-
|
|
173
|
-
|
|
154
|
+
customElements.define('attr-test-4', MyElement);
|
|
155
|
+
const el = await fixture(html `<attr-test-4></attr-test-4>`);
|
|
156
|
+
el.value1 = 'world';
|
|
157
|
+
el.value2 = 100;
|
|
158
|
+
el.value3 = false;
|
|
159
|
+
el.value4 = true;
|
|
160
|
+
expect(el.getAttribute('value1')).to.equal('world');
|
|
161
|
+
expect(el.getAttribute('value2')).to.equal('100');
|
|
162
|
+
expect(el.hasAttribute('value3')).to.be.false;
|
|
163
|
+
expect(el.hasAttribute('value4')).to.be.true;
|
|
174
164
|
});
|
|
175
165
|
});
|
|
176
166
|
//# 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,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAEzD,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAEjC,QAAQ,CAAC,oBAAoB,EAAE,GAAG,EAAE;IAClC,EAAE,CAAC,yCAAyC,EAAE,KAAK,IAAI,EAAE;YACjD,SAAS
|
|
1
|
+
{"version":3,"file":"attr.test.js","sourceRoot":"","sources":["../../src/lib/attr.test.ts"],"names":[],"mappings":"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"}
|