@joist/element 3.0.0-next.9 → 3.0.0-rc.2
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 +12 -5
- package/package.json +3 -9
- package/target/lib/attr.js +7 -23
- 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/target/lib/listen.d.ts +1 -1
- package/target/lib/listen.js +2 -5
- package/target/lib/listen.js.map +1 -1
- package/target/lib/shadow.d.ts +1 -1
- package/target/lib/shadow.js +5 -4
- package/target/lib/shadow.js.map +1 -1
- package/target/lib/tag-name.test.d.ts +1 -0
- package/target/lib/tag-name.test.js +20 -1
- package/target/lib/tag-name.test.js.map +1 -1
- package/target/lib/tags.d.ts +2 -2
- package/target/lib/tags.js +18 -17
- package/target/lib/tags.js.map +1 -1
- package/target/lib/tags.test.d.ts +1 -0
- package/target/lib/tags.test.js +23 -0
- package/target/lib/tags.test.js.map +1 -0
package/README.md
CHANGED
|
@@ -2,20 +2,24 @@
|
|
|
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
|
|
8
|
-
npm i @joist/element
|
|
10
|
+
npm i @joist/element@next
|
|
9
11
|
```
|
|
10
12
|
|
|
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 {
|
|
19
|
+
// define a custom element
|
|
17
20
|
@tagName static tagName = 'my-element';
|
|
18
|
-
|
|
21
|
+
|
|
22
|
+
// apply styles to shadow dom
|
|
19
23
|
@shadow styles = css`
|
|
20
24
|
:host {
|
|
21
25
|
display: block;
|
|
@@ -23,12 +27,15 @@ export class MyElement extends HTMLElement {
|
|
|
23
27
|
}
|
|
24
28
|
`;
|
|
25
29
|
|
|
30
|
+
// apply html to shadow dom
|
|
26
31
|
@shadow template = html`
|
|
27
32
|
<slot></slot>
|
|
28
33
|
`;
|
|
29
|
-
|
|
34
|
+
|
|
35
|
+
// define attributes
|
|
30
36
|
@attr accessor value = 0;
|
|
31
|
-
|
|
37
|
+
|
|
38
|
+
// listen for events
|
|
32
39
|
@listen('click') onClick() {
|
|
33
40
|
console.log('clicked!')
|
|
34
41
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@joist/element",
|
|
3
|
-
"version": "3.0.0-
|
|
3
|
+
"version": "3.0.0-rc.2",
|
|
4
|
+
"type": "module",
|
|
4
5
|
"main": "./target/lib.js",
|
|
5
6
|
"module": "./target/lib.js",
|
|
6
7
|
"exports": {
|
|
@@ -35,17 +36,10 @@
|
|
|
35
36
|
"access": "public"
|
|
36
37
|
},
|
|
37
38
|
"scripts": {
|
|
38
|
-
"prepare": "wireit",
|
|
39
39
|
"test": "wireit",
|
|
40
40
|
"build": "wireit"
|
|
41
41
|
},
|
|
42
42
|
"wireit": {
|
|
43
|
-
"prepare": {
|
|
44
|
-
"dependencies": [
|
|
45
|
-
"build",
|
|
46
|
-
"test"
|
|
47
|
-
]
|
|
48
|
-
},
|
|
49
43
|
"build": {
|
|
50
44
|
"command": "tsc --build --pretty",
|
|
51
45
|
"clean": "if-file-deleted",
|
|
@@ -59,7 +53,7 @@
|
|
|
59
53
|
]
|
|
60
54
|
},
|
|
61
55
|
"test": {
|
|
62
|
-
"command": "wtr --config
|
|
56
|
+
"command": "wtr --config wtr.config.mjs --port 8001",
|
|
63
57
|
"files": [
|
|
64
58
|
"target/**"
|
|
65
59
|
],
|
package/target/lib/attr.js
CHANGED
|
@@ -4,34 +4,24 @@ export function attr({ get, set }, ctx) {
|
|
|
4
4
|
if (typeof ctx.name === 'string') {
|
|
5
5
|
if (this.hasAttribute(ctx.name)) {
|
|
6
6
|
const attr = this.getAttribute(ctx.name);
|
|
7
|
-
// treat as boolean
|
|
8
7
|
if (attr === '') {
|
|
9
8
|
return true;
|
|
10
9
|
}
|
|
11
|
-
// treat as number
|
|
12
10
|
if (typeof value === 'number') {
|
|
13
11
|
return Number(attr);
|
|
14
12
|
}
|
|
15
|
-
// treat as string
|
|
16
13
|
return attr;
|
|
17
14
|
}
|
|
18
|
-
// should set attributes AFTER init to allow setup to complete
|
|
19
|
-
// If we do not do this the attributeChangedCallback could fire before init.
|
|
20
|
-
// If the user attempts to read or write to this property it will fail
|
|
21
|
-
// this also normalizes when the attributeChangedCallback is called in different rendering scenarios
|
|
22
15
|
Promise.resolve().then(() => {
|
|
23
16
|
const cached = get.call(this);
|
|
24
17
|
if (cached !== null && cached !== undefined && cached !== '') {
|
|
25
|
-
if (cached ===
|
|
26
|
-
|
|
27
|
-
|
|
18
|
+
if (typeof cached === 'boolean') {
|
|
19
|
+
if (cached === true) {
|
|
20
|
+
this.setAttribute(ctx.name.toString(), '');
|
|
21
|
+
}
|
|
28
22
|
}
|
|
29
23
|
else {
|
|
30
|
-
|
|
31
|
-
const attrValue = String(cached);
|
|
32
|
-
if (attrValue !== this.getAttribute(ctx.name.toString())) {
|
|
33
|
-
this.setAttribute(ctx.name.toString(), String(cached));
|
|
34
|
-
}
|
|
24
|
+
this.setAttribute(ctx.name.toString(), String(cached));
|
|
35
25
|
}
|
|
36
26
|
}
|
|
37
27
|
});
|
|
@@ -58,23 +48,17 @@ export function attr({ get, set }, ctx) {
|
|
|
58
48
|
const ogValue = get.call(this);
|
|
59
49
|
if (typeof ctx.name === 'string') {
|
|
60
50
|
const attr = this.getAttribute(ctx.name);
|
|
61
|
-
if (attr) {
|
|
62
|
-
// treat as attribute
|
|
51
|
+
if (attr !== null) {
|
|
63
52
|
if (attr === '') {
|
|
64
53
|
return true;
|
|
65
54
|
}
|
|
66
|
-
// treat as number
|
|
67
55
|
if (typeof ogValue === 'number') {
|
|
68
56
|
return Number(attr);
|
|
69
57
|
}
|
|
70
|
-
// if not attribute value assume not set yet
|
|
71
58
|
return attr;
|
|
72
59
|
}
|
|
73
|
-
return ogValue;
|
|
74
|
-
}
|
|
75
|
-
else {
|
|
76
|
-
return ogValue;
|
|
77
60
|
}
|
|
61
|
+
return ogValue;
|
|
78
62
|
},
|
|
79
63
|
};
|
|
80
64
|
}
|
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;
|
|
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":";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;;;;;;;;yBAAT,SAAU,SAAQ,WAAW;;0CAChC,IAAI;0CACJ,IAAI;0CACJ,IAAI;oBAFC,uKAAS,MAAM,6BAAN,MAAM,mEAAW;oBAC1B,uKAAS,MAAM,6BAAN,MAAM,mEAAK;oBACpB,uKAAS,MAAM,6BAAN,MAAM,mEAAQ;;gBAFvB,+HAAkB,OAAO,GAAC;gBAA1B,IAAS,MAAM,4CAAW;gBAA1B,IAAS,MAAM,kDAAW;gBAC1B,yEAAkB,CAAC,EAAC;gBAApB,IAAS,MAAM,4CAAK;gBAApB,IAAS,MAAM,kDAAK;gBACpB,yEAAkB,IAAI,EAAC;gBAAvB,IAAS,MAAM,4CAAQ;gBAAvB,IAAS,MAAM,kDAAQ;;;QAG/B,cAAc,CAAC,MAAM,CAAC,aAAa,EAAE,SAAS,CAAC,CAAC;QAEhD,MAAM,EAAE,GAAG,MAAM,OAAO,CAAC,IAAI,CAAA,6BAA6B,CAAC,CAAC;QAE5D,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;QACpD,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QAChD,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;IACjD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,0CAA0C,EAAE,KAAK,IAAI,EAAE;YAClD,SAAS;;;;;;;;;;yBAAT,SAAU,SAAQ,WAAW;;0CAChC,IAAI;0CACJ,IAAI;0CACJ,IAAI;0CACJ,IAAI;oBAHC,uKAAS,MAAM,6BAAN,MAAM,qEAAO;oBACtB,uKAAS,MAAM,6BAAN,MAAM,qEAAK;oBACpB,uKAAS,MAAM,6BAAN,MAAM,qEAAS;oBACxB,uKAAS,MAAM,6BAAN,MAAM,qEAAW;;gBAH1B,iIAAkB,GAAG,GAAC;gBAAtB,IAAS,MAAM,4CAAO;gBAAtB,IAAS,MAAM,kDAAO;gBACtB,yEAAkB,CAAC,EAAC;gBAApB,IAAS,MAAM,4CAAK;gBAApB,IAAS,MAAM,kDAAK;gBACpB,yEAAkB,KAAK,EAAC;gBAAxB,IAAS,MAAM,4CAAS;gBAAxB,IAAS,MAAM,kDAAS;gBACxB,yEAAkB,OAAO,EAAC;gBAA1B,IAAS,MAAM,4CAAW;gBAA1B,IAAS,MAAM,kDAAW;;;QAGlC,cAAc,CAAC,MAAM,CAAC,aAAa,EAAE,SAAS,CAAC,CAAC;QAEhD,MAAM,EAAE,GAAG,MAAM,OAAO,CACtB,IAAI,CAAA,8DAA8D,CACnE,CAAC;QAEF,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QAChC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;QAC9B,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;QACjC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IACtC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,4CAA4C,EAAE,KAAK,IAAI,EAAE;YACpD,SAAS;;;;;;;;yBAAT,SAAU,SAAQ,WAAW;;0CAChC,IAAI;0CACJ,IAAI;0CACJ,IAAI;oBAFC,uKAAS,MAAM,6BAAN,MAAM,qEAAa;oBAC5B,uKAAS,MAAM,6BAAN,MAAM,qEAAQ;oBACvB,uKAAS,MAAM,6BAAN,MAAM,qEAAM;;gBAFrB,iIAAkB,SAAS,GAAC;gBAA5B,IAAS,MAAM,4CAAa;gBAA5B,IAAS,MAAM,kDAAa;gBAC5B,yEAAkB,IAAI,EAAC;gBAAvB,IAAS,MAAM,4CAAQ;gBAAvB,IAAS,MAAM,kDAAQ;gBACvB,yEAAkB,EAAE,EAAC;gBAArB,IAAS,MAAM,4CAAM;gBAArB,IAAS,MAAM,kDAAM;;;QAG7B,cAAc,CAAC,MAAM,CAAC,aAAa,EAAE,SAAS,CAAC,CAAC;QAEhD,MAAM,EAAE,GAAG,MAAM,OAAO,CAAY,IAAI,CAAA,6BAA6B,CAAC,CAAC;QAEvE,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC;QAC9C,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC;QAC9C,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC;IAChD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,iDAAiD,EAAE,KAAK,IAAI,EAAE;YACzD,SAAS;;;;;;;;;;yBAAT,SAAU,SAAQ,WAAW;;0CAChC,IAAI;0CACJ,IAAI;0CACJ,IAAI;0CACJ,IAAI;oBAHC,uKAAS,MAAM,6BAAN,MAAM,qEAAW;oBAC1B,uKAAS,MAAM,6BAAN,MAAM,qEAAK;oBACpB,uKAAS,MAAM,6BAAN,MAAM,qEAAQ;oBACvB,uKAAS,MAAM,6BAAN,MAAM,qEAAS;;gBAHxB,iIAAkB,OAAO,GAAC;gBAA1B,IAAS,MAAM,4CAAW;gBAA1B,IAAS,MAAM,kDAAW;gBAC1B,yEAAkB,CAAC,EAAC;gBAApB,IAAS,MAAM,4CAAK;gBAApB,IAAS,MAAM,kDAAK;gBACpB,yEAAkB,IAAI,EAAC;gBAAvB,IAAS,MAAM,4CAAQ;gBAAvB,IAAS,MAAM,kDAAQ;gBACvB,yEAAkB,KAAK,EAAC;gBAAxB,IAAS,MAAM,4CAAS;gBAAxB,IAAS,MAAM,kDAAS;;;QAGhC,cAAc,CAAC,MAAM,CAAC,aAAa,EAAE,SAAS,CAAC,CAAC;QAEhD,MAAM,EAAE,GAAG,MAAM,OAAO,CAAY,IAAI,CAAA,6BAA6B,CAAC,CAAC;QAEvE,EAAE,CAAC,MAAM,GAAG,OAAO,CAAC;QACpB,EAAE,CAAC,MAAM,GAAG,GAAG,CAAC;QAChB,EAAE,CAAC,MAAM,GAAG,KAAK,CAAC;QAClB,EAAE,CAAC,MAAM,GAAG,IAAI,CAAC;QAEjB,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;QACpD,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QAClD,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC;QAC9C,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC;IAC/C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
|
package/target/lib/listen.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare function listen<This extends HTMLElement>(event: string): (value: (e: Event) => void, ctx: ClassMethodDecoratorContext<This>) => void;
|
|
1
|
+
export declare function listen<This extends HTMLElement>(event: string, root?: (el: This) => ShadowRoot | This): (value: (e: Event) => void, ctx: ClassMethodDecoratorContext<This>) => void;
|
package/target/lib/listen.js
CHANGED
|
@@ -1,11 +1,8 @@
|
|
|
1
|
-
export function listen(event) {
|
|
1
|
+
export function listen(event, root = (el) => el.shadowRoot || el) {
|
|
2
2
|
return (value, ctx) => {
|
|
3
3
|
ctx.addInitializer(function () {
|
|
4
|
-
// method initializers are run before fields and accessors.
|
|
5
|
-
// we want to wait till after all have run so we can check if there is a shadowRoot or not.
|
|
6
4
|
Promise.resolve().then(() => {
|
|
7
|
-
|
|
8
|
-
root.addEventListener(event, value.bind(this));
|
|
5
|
+
root(this).addEventListener(event, value.bind(this));
|
|
9
6
|
});
|
|
10
7
|
});
|
|
11
8
|
};
|
package/target/lib/listen.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"listen.js","sourceRoot":"","sources":["../../src/lib/listen.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,MAAM,
|
|
1
|
+
{"version":3,"file":"listen.js","sourceRoot":"","sources":["../../src/lib/listen.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,MAAM,CACpB,KAAa,EACb,OAAwC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,UAAU,IAAI,EAAE;IAEnE,OAAO,CAAC,KAAyB,EAAE,GAAsC,EAAE,EAAE;QAC3E,GAAG,CAAC,cAAc,CAAC;YAGjB,OAAO,CAAC,OAAO,EAAE,CAAC,IAAI,CAAC,GAAG,EAAE;gBAC1B,IAAI,CAAC,IAAI,CAAC,CAAC,gBAAgB,CAAC,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;YACvD,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;AACJ,CAAC"}
|
package/target/lib/shadow.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { ShadowResult } from './result.js';
|
|
2
|
-
export declare function shadow<This extends HTMLElement, T extends ShadowResult>(_: undefined, ctx: ClassFieldDecoratorContext<This, T>): (result: T) => T;
|
|
2
|
+
export declare function shadow<This extends HTMLElement, T extends ShadowResult>(_: undefined, ctx: ClassFieldDecoratorContext<This, T>): (this: This, result: T) => T;
|
package/target/lib/shadow.js
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
export function shadow(_, ctx) {
|
|
2
|
-
let shadow;
|
|
3
2
|
ctx.addInitializer(function () {
|
|
4
|
-
|
|
3
|
+
if (!this.shadowRoot) {
|
|
4
|
+
this.attachShadow({ mode: 'open' });
|
|
5
|
+
}
|
|
5
6
|
});
|
|
6
|
-
return (result)
|
|
7
|
-
result.execute(
|
|
7
|
+
return function (result) {
|
|
8
|
+
result.execute(this.shadowRoot);
|
|
8
9
|
return result;
|
|
9
10
|
};
|
|
10
11
|
}
|
package/target/lib/shadow.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"shadow.js","sourceRoot":"","sources":["../../src/lib/shadow.ts"],"names":[],"mappings":"AAEA,MAAM,UAAU,MAAM,CACpB,CAAY,EACZ,GAAwC;IAExC,
|
|
1
|
+
{"version":3,"file":"shadow.js","sourceRoot":"","sources":["../../src/lib/shadow.ts"],"names":[],"mappings":"AAEA,MAAM,UAAU,MAAM,CACpB,CAAY,EACZ,GAAwC;IAExC,GAAG,CAAC,cAAc,CAAC;QACjB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;YACpB,IAAI,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC;SACrC;IACH,CAAC,CAAC,CAAC;IAEH,OAAO,UAAsB,MAAS;QACpC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,UAAW,CAAC,CAAC;QAEjC,OAAO,MAAM,CAAC;IAChB,CAAC,CAAC;AACJ,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -1,2 +1,21 @@
|
|
|
1
|
-
|
|
1
|
+
import { __esDecorate, __runInitializers } from "tslib";
|
|
2
|
+
import { tagName } from './tag-name.js';
|
|
3
|
+
describe('tag-name', () => {
|
|
4
|
+
it('should define a custom element', async () => {
|
|
5
|
+
let MyElement = (() => {
|
|
6
|
+
let _staticExtraInitializers = [];
|
|
7
|
+
let _static_tagName_decorators;
|
|
8
|
+
let _static_tagName_initializers = [];
|
|
9
|
+
return class MyElement extends HTMLElement {
|
|
10
|
+
static {
|
|
11
|
+
_static_tagName_decorators = [tagName];
|
|
12
|
+
__esDecorate(null, null, _static_tagName_decorators, { kind: "field", name: "tagName", static: true, private: false, access: { has: obj => "tagName" in obj, get: obj => obj.tagName, set: (obj, value) => { obj.tagName = value; } } }, _static_tagName_initializers, _staticExtraInitializers);
|
|
13
|
+
__runInitializers(this, _staticExtraInitializers);
|
|
14
|
+
}
|
|
15
|
+
static tagName = __runInitializers(this, _static_tagName_initializers, 'tn-test-1');
|
|
16
|
+
};
|
|
17
|
+
})();
|
|
18
|
+
return customElements.whenDefined(MyElement.tagName);
|
|
19
|
+
});
|
|
20
|
+
});
|
|
2
21
|
//# sourceMappingURL=tag-name.test.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tag-name.test.js","sourceRoot":"","sources":["../../src/lib/tag-name.test.ts"],"names":[],"mappings":""}
|
|
1
|
+
{"version":3,"file":"tag-name.test.js","sourceRoot":"","sources":["../../src/lib/tag-name.test.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAExC,QAAQ,CAAC,UAAU,EAAE,GAAG,EAAE;IACxB,EAAE,CAAC,gCAAgC,EAAE,KAAK,IAAI,EAAE;YACxC,SAAS;;;;yBAAT,SAAU,SAAQ,WAAW;;kDAChC,OAAO;oBAAC,6KAAO,OAAO,6BAAP,OAAO,yEAAe;oBADlC,kDAAS;;gBACJ,MAAM,CAAC,OAAO,yDAAG,WAAW,EAAC;;;QAGxC,OAAO,cAAc,CAAC,WAAW,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;IACvD,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
|
package/target/lib/tags.d.ts
CHANGED
|
@@ -2,6 +2,7 @@ import { ShadowResult } from './result.js';
|
|
|
2
2
|
type Tags = keyof HTMLElementTagNameMap;
|
|
3
3
|
type SVGTags = keyof SVGElementTagNameMap;
|
|
4
4
|
type MathTags = keyof MathMLElementTagNameMap;
|
|
5
|
+
export declare const htmlTemplateCache: WeakMap<TemplateStringsArray, HTMLTemplateElement>;
|
|
5
6
|
export declare class HTMLResult extends ShadowResult {
|
|
6
7
|
query<K extends Tags>(selectors: K): HTMLElementTagNameMap[K] | null;
|
|
7
8
|
query<K extends SVGTags>(selectors: K): SVGElementTagNameMap[K] | null;
|
|
@@ -14,9 +15,8 @@ export declare class HTMLResult extends ShadowResult {
|
|
|
14
15
|
apply(root: ShadowRoot): void;
|
|
15
16
|
}
|
|
16
17
|
export declare function html(strings: TemplateStringsArray, ...values: any[]): HTMLResult;
|
|
18
|
+
export declare const styleSheetCache: WeakMap<TemplateStringsArray, CSSStyleSheet>;
|
|
17
19
|
export declare class CSSResult extends ShadowResult {
|
|
18
|
-
constructor(strings: TemplateStringsArray);
|
|
19
|
-
append(result: CSSResult): void;
|
|
20
20
|
apply(root: ShadowRoot): void;
|
|
21
21
|
}
|
|
22
22
|
export declare function css(strings: TemplateStringsArray): CSSResult;
|
package/target/lib/tags.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { ShadowResult } from './result.js';
|
|
2
|
-
const htmlTemplateCache = new WeakMap();
|
|
2
|
+
export const htmlTemplateCache = new WeakMap();
|
|
3
3
|
export class HTMLResult extends ShadowResult {
|
|
4
4
|
query(query) {
|
|
5
5
|
return this.shadow.querySelector(query);
|
|
@@ -14,36 +14,37 @@ export class HTMLResult extends ShadowResult {
|
|
|
14
14
|
}
|
|
15
15
|
else {
|
|
16
16
|
template = document.createElement('template');
|
|
17
|
-
template.innerHTML = this.strings
|
|
17
|
+
template.innerHTML = concat(this.strings);
|
|
18
18
|
htmlTemplateCache.set(this.strings, template);
|
|
19
19
|
}
|
|
20
20
|
root.append(template.content.cloneNode(true));
|
|
21
|
-
console.log(htmlTemplateCache);
|
|
22
21
|
}
|
|
23
22
|
}
|
|
24
23
|
export function html(strings, ...values) {
|
|
25
24
|
return new HTMLResult(strings, ...values);
|
|
26
25
|
}
|
|
26
|
+
export const styleSheetCache = new WeakMap();
|
|
27
27
|
export class CSSResult extends ShadowResult {
|
|
28
|
-
constructor(strings) {
|
|
29
|
-
super(strings);
|
|
30
|
-
}
|
|
31
|
-
append(result) {
|
|
32
|
-
result.apply(this.shadow);
|
|
33
|
-
}
|
|
34
28
|
apply(root) {
|
|
35
|
-
|
|
36
|
-
|
|
29
|
+
let sheet;
|
|
30
|
+
if (styleSheetCache.has(this.strings)) {
|
|
31
|
+
sheet = styleSheetCache.get(this.strings);
|
|
32
|
+
}
|
|
33
|
+
else {
|
|
34
|
+
sheet = new CSSStyleSheet();
|
|
35
|
+
sheet.replaceSync(concat(this.strings));
|
|
36
|
+
}
|
|
37
37
|
root.adoptedStyleSheets = [...root.adoptedStyleSheets, sheet];
|
|
38
38
|
}
|
|
39
39
|
}
|
|
40
|
-
const cssResultCache = new WeakMap();
|
|
41
40
|
export function css(strings) {
|
|
42
|
-
|
|
43
|
-
|
|
41
|
+
return new CSSResult(strings);
|
|
42
|
+
}
|
|
43
|
+
function concat(strings) {
|
|
44
|
+
let res = '';
|
|
45
|
+
for (let i = 0; i < strings.length; i++) {
|
|
46
|
+
res += strings[i];
|
|
44
47
|
}
|
|
45
|
-
|
|
46
|
-
cssResultCache.set(strings, result);
|
|
47
|
-
return result;
|
|
48
|
+
return res;
|
|
48
49
|
}
|
|
49
50
|
//# sourceMappingURL=tags.js.map
|
package/target/lib/tags.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tags.js","sourceRoot":"","sources":["../../src/lib/tags.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"tags.js","sourceRoot":"","sources":["../../src/lib/tags.ts"],"names":[],"mappings":"AAeA,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAM3C,MAAM,CAAC,MAAM,iBAAiB,GAAG,IAAI,OAAO,EAA6C,CAAC;AAE1F,MAAM,OAAO,UAAW,SAAQ,YAAY;IAK1C,KAAK,CAAiB,KAAQ;QAC5B,OAAO,IAAI,CAAC,MAAM,CAAC,aAAa,CAAI,KAAK,CAAC,CAAC;IAC7C,CAAC;IAMD,QAAQ,CAAiB,KAAQ;QAC/B,OAAO,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAI,KAAK,CAAC,CAAC;IAChD,CAAC;IAKD,KAAK,CAAC,IAAgB;QACpB,IAAI,QAA6B,CAAC;QAElC,IAAI,iBAAiB,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE;YACvC,QAAQ,GAAG,iBAAiB,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,CAAwB,CAAC;SACvE;aAAM;YACL,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;YAE9C,QAAQ,CAAC,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YAC1C,iBAAiB,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;SAC/C;QAED,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC;IAChD,CAAC;CACF;AAED,MAAM,UAAU,IAAI,CAAC,OAA6B,EAAE,GAAG,MAAa;IAClE,OAAO,IAAI,UAAU,CAAC,OAAO,EAAE,GAAG,MAAM,CAAC,CAAC;AAC5C,CAAC;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,IAAI,OAAO,EAAuC,CAAC;AAElF,MAAM,OAAO,SAAU,SAAQ,YAAY;IACzC,KAAK,CAAC,IAAgB;QACpB,IAAI,KAAoB,CAAC;QAEzB,IAAI,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE;YACrC,KAAK,GAAG,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,CAAkB,CAAC;SAC5D;aAAM;YACL,KAAK,GAAG,IAAI,aAAa,EAAE,CAAC;YAE5B,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;SACzC;QAED,IAAI,CAAC,kBAAkB,GAAG,CAAC,GAAG,IAAI,CAAC,kBAAkB,EAAE,KAAK,CAAC,CAAC;IAChE,CAAC;CACF;AAED,MAAM,UAAU,GAAG,CAAC,OAA6B;IAC/C,OAAO,IAAI,SAAS,CAAC,OAAO,CAAC,CAAC;AAChC,CAAC;AAED,SAAS,MAAM,CAAC,OAA6B;IAC3C,IAAI,GAAG,GAAG,EAAE,CAAC;IAEb,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QACvC,GAAG,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC;KACnB;IAED,OAAO,GAAG,CAAC;AACb,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { expect } from '@open-wc/testing';
|
|
2
|
+
import { css, html, htmlTemplateCache, styleSheetCache } from './tags.js';
|
|
3
|
+
describe('tags', () => {
|
|
4
|
+
it('should ensure return the same CSSResult', () => {
|
|
5
|
+
class Test {
|
|
6
|
+
styles = css `Hello World`;
|
|
7
|
+
}
|
|
8
|
+
const a = new Test();
|
|
9
|
+
const b = new Test();
|
|
10
|
+
expect(a.styles.strings).to.equal(b.styles.strings);
|
|
11
|
+
expect(styleSheetCache.get(a.styles.strings)).to.equal(styleSheetCache.get(b.styles.strings));
|
|
12
|
+
});
|
|
13
|
+
it('should cache the HTMLTemplateElement', () => {
|
|
14
|
+
class Test {
|
|
15
|
+
dom = html `Hello World`;
|
|
16
|
+
}
|
|
17
|
+
const a = new Test();
|
|
18
|
+
const b = new Test();
|
|
19
|
+
expect(a.dom.strings).to.equal(b.dom.strings);
|
|
20
|
+
expect(htmlTemplateCache.get(a.dom.strings)).to.equal(htmlTemplateCache.get(b.dom.strings));
|
|
21
|
+
});
|
|
22
|
+
});
|
|
23
|
+
//# sourceMappingURL=tags.test.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tags.test.js","sourceRoot":"","sources":["../../src/lib/tags.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAE1E,QAAQ,CAAC,MAAM,EAAE,GAAG,EAAE;IACpB,EAAE,CAAC,yCAAyC,EAAE,GAAG,EAAE;QACjD,MAAM,IAAI;YACR,MAAM,GAAG,GAAG,CAAA,aAAa,CAAC;SAC3B;QAED,MAAM,CAAC,GAAG,IAAI,IAAI,EAAE,CAAC;QACrB,MAAM,CAAC,GAAG,IAAI,IAAI,EAAE,CAAC;QAErB,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;QACpD,MAAM,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC;IAChG,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,sCAAsC,EAAE,GAAG,EAAE;QAC9C,MAAM,IAAI;YACR,GAAG,GAAG,IAAI,CAAA,aAAa,CAAC;SACzB;QAED,MAAM,CAAC,GAAG,IAAI,IAAI,EAAE,CAAC;QACrB,MAAM,CAAC,GAAG,IAAI,IAAI,EAAE,CAAC;QAErB,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;QAC9C,MAAM,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC;IAC9F,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
|