@joist/element 4.0.0-next.3 → 4.0.0-next.4
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 +1 -1
- package/src/lib/element.test.ts +8 -1
- package/src/lib/element.ts +20 -4
- package/src/lib/query.test.ts +54 -0
- package/src/lib/query.ts +37 -0
- package/src/lib.ts +2 -1
- package/target/lib/element.d.ts +3 -0
- package/target/lib/element.js +17 -4
- package/target/lib/element.js.map +1 -1
- package/target/lib/element.test.js +7 -1
- package/target/lib/element.test.js.map +1 -1
- package/target/lib/query.d.ts +9 -0
- package/target/lib/query.js +24 -0
- package/target/lib/query.js.map +1 -0
- package/target/lib/query.test.js +80 -0
- package/target/lib/query.test.js.map +1 -0
- package/target/lib/result.d.ts +0 -2
- package/target/lib/result.js +1 -9
- package/target/lib/result.js.map +1 -1
- package/target/lib/tags.d.ts +0 -2
- package/target/lib/tags.js +4 -19
- package/target/lib/tags.js.map +1 -1
- package/target/lib.d.ts +2 -1
- package/target/lib.js +2 -1
- package/target/lib.js.map +1 -1
- package/src/lib/tags.test.ts +0 -28
- package/target/lib/tags.test.js +0 -23
- package/target/lib/tags.test.js.map +0 -1
- /package/target/lib/{tags.test.d.ts → query.test.d.ts} +0 -0
package/package.json
CHANGED
package/src/lib/element.test.ts
CHANGED
|
@@ -73,7 +73,13 @@ describe('@element()', () => {
|
|
|
73
73
|
display: contents;
|
|
74
74
|
}
|
|
75
75
|
`,
|
|
76
|
-
html`<slot></slot
|
|
76
|
+
html`<slot></slot>`,
|
|
77
|
+
(el) => {
|
|
78
|
+
const div = document.createElement('div');
|
|
79
|
+
div.innerHTML = 'hello world';
|
|
80
|
+
|
|
81
|
+
el.append(div);
|
|
82
|
+
}
|
|
77
83
|
]
|
|
78
84
|
})
|
|
79
85
|
class MyElement extends HTMLElement {}
|
|
@@ -82,5 +88,6 @@ describe('@element()', () => {
|
|
|
82
88
|
|
|
83
89
|
expect(el.shadowRoot!.adoptedStyleSheets.length).to.equal(1);
|
|
84
90
|
expect(el.shadowRoot!.innerHTML).to.equal(`<slot></slot>`);
|
|
91
|
+
expect(el.innerHTML).to.equal(`<div>hello world</div>`);
|
|
85
92
|
});
|
|
86
93
|
});
|
package/src/lib/element.ts
CHANGED
|
@@ -6,6 +6,10 @@ export interface ElementOpts<T> {
|
|
|
6
6
|
shadow?: Array<ShadowResult | ((el: T) => void)>;
|
|
7
7
|
}
|
|
8
8
|
|
|
9
|
+
export const LifeCycle = {
|
|
10
|
+
onInit: Symbol('onInit')
|
|
11
|
+
};
|
|
12
|
+
|
|
9
13
|
export function element<
|
|
10
14
|
Target extends CustomElementConstructor,
|
|
11
15
|
Instance extends InstanceType<Target>
|
|
@@ -30,7 +34,9 @@ export function element<
|
|
|
30
34
|
super(...args);
|
|
31
35
|
|
|
32
36
|
if (opts?.shadow) {
|
|
33
|
-
this.
|
|
37
|
+
if (!this.shadowRoot) {
|
|
38
|
+
this.attachShadow({ mode: 'open' });
|
|
39
|
+
}
|
|
34
40
|
|
|
35
41
|
for (let res of opts.shadow) {
|
|
36
42
|
if (typeof res === 'function') {
|
|
@@ -44,13 +50,23 @@ export function element<
|
|
|
44
50
|
for (let [event, { cb, root }] of meta.listeners) {
|
|
45
51
|
root(this).addEventListener(event, cb.bind(this));
|
|
46
52
|
}
|
|
53
|
+
|
|
54
|
+
if (LifeCycle.onInit in this) {
|
|
55
|
+
const onInit = Reflect.get(this, LifeCycle.onInit);
|
|
56
|
+
|
|
57
|
+
if (typeof onInit === 'function') {
|
|
58
|
+
onInit();
|
|
59
|
+
}
|
|
60
|
+
}
|
|
47
61
|
}
|
|
48
62
|
|
|
49
63
|
connectedCallback() {
|
|
50
|
-
|
|
64
|
+
if (this.isConnected) {
|
|
65
|
+
reflectAttributeValues(this, meta.attrs);
|
|
51
66
|
|
|
52
|
-
|
|
53
|
-
|
|
67
|
+
if (super.connectedCallback) {
|
|
68
|
+
super.connectedCallback();
|
|
69
|
+
}
|
|
54
70
|
}
|
|
55
71
|
}
|
|
56
72
|
};
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import { expect } from '@open-wc/testing';
|
|
2
|
+
import { element } from './element.js';
|
|
3
|
+
import { query } from './query.js';
|
|
4
|
+
import { html } from './tags.js';
|
|
5
|
+
|
|
6
|
+
describe('query', () => {
|
|
7
|
+
it('should work', () => {
|
|
8
|
+
@element({
|
|
9
|
+
tagName: 'query-test-1',
|
|
10
|
+
shadow: [
|
|
11
|
+
html`
|
|
12
|
+
<form>
|
|
13
|
+
<input id="fname" name="fname" />
|
|
14
|
+
<input id="lname" name="lname" />
|
|
15
|
+
</form>
|
|
16
|
+
`
|
|
17
|
+
]
|
|
18
|
+
})
|
|
19
|
+
class MyElement extends HTMLElement {
|
|
20
|
+
fname = query<HTMLInputElement>('#fname');
|
|
21
|
+
lname = query<HTMLInputElement>('#lname');
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
const el = new MyElement();
|
|
25
|
+
|
|
26
|
+
expect(el.fname()).to.equal(el.shadowRoot?.querySelector('#fname'));
|
|
27
|
+
expect(el.lname()).to.equal(el.shadowRoot?.querySelector('#lname'));
|
|
28
|
+
});
|
|
29
|
+
|
|
30
|
+
it('should patch the selected item', () => {
|
|
31
|
+
@element({
|
|
32
|
+
tagName: 'query-test-2',
|
|
33
|
+
shadow: [
|
|
34
|
+
html`
|
|
35
|
+
<form>
|
|
36
|
+
<input id="fname" name="fname" />
|
|
37
|
+
<input id="lname" name="lname" />
|
|
38
|
+
</form>
|
|
39
|
+
`
|
|
40
|
+
]
|
|
41
|
+
})
|
|
42
|
+
class MyElement extends HTMLElement {
|
|
43
|
+
fname = query<HTMLInputElement>('#fname');
|
|
44
|
+
lname = query<HTMLInputElement>('#lname');
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
const el = new MyElement();
|
|
48
|
+
el.fname({ value: 'Foo' });
|
|
49
|
+
el.lname({ value: 'Bar' });
|
|
50
|
+
|
|
51
|
+
expect(el.shadowRoot?.querySelector<HTMLInputElement>('#fname')?.value).to.equal('Foo');
|
|
52
|
+
expect(el.shadowRoot?.querySelector<HTMLInputElement>('#lname')?.value).to.equal('Bar');
|
|
53
|
+
});
|
|
54
|
+
});
|
package/src/lib/query.ts
ADDED
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
type Tags = keyof HTMLElementTagNameMap;
|
|
2
|
+
type SVGTags = keyof SVGElementTagNameMap;
|
|
3
|
+
type MathTags = keyof MathMLElementTagNameMap;
|
|
4
|
+
|
|
5
|
+
type QueryResult<T> = (updates?: Partial<T>) => T;
|
|
6
|
+
|
|
7
|
+
export function query<K extends Tags>(selectors: K): QueryResult<HTMLElementTagNameMap[K]>;
|
|
8
|
+
export function query<K extends SVGTags>(selectors: K): QueryResult<SVGElementTagNameMap[K]>;
|
|
9
|
+
export function query<K extends MathTags>(selectors: K): QueryResult<MathMLElementTagNameMap[K]>;
|
|
10
|
+
export function query<E extends Element = Element>(selectors: string): QueryResult<E>;
|
|
11
|
+
export function query<K extends Tags>(query: K): QueryResult<HTMLElementTagNameMap[K]> {
|
|
12
|
+
let res: HTMLElementTagNameMap[K] | null = null;
|
|
13
|
+
|
|
14
|
+
return function (this: HTMLElement, updates?: Partial<HTMLElementTagNameMap[K]>) {
|
|
15
|
+
if (res) {
|
|
16
|
+
return res;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
if (this.shadowRoot) {
|
|
20
|
+
res = this.shadowRoot.querySelector<K>(query);
|
|
21
|
+
} else {
|
|
22
|
+
res = this.querySelector<K>(query);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
if (!res) {
|
|
26
|
+
throw new Error('could not find element');
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
if (updates) {
|
|
30
|
+
for (let update in updates) {
|
|
31
|
+
Reflect.set(res, update, updates[update]);
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
return res;
|
|
36
|
+
};
|
|
37
|
+
}
|
package/src/lib.ts
CHANGED
|
@@ -2,4 +2,5 @@ export { JoistShadowResult as TemplateResult } from './lib/result.js';
|
|
|
2
2
|
export { css, html, HTMLResult, CSSResult } from './lib/tags.js';
|
|
3
3
|
export { attr } from './lib/attr.js';
|
|
4
4
|
export { listen } from './lib/listen.js';
|
|
5
|
-
export { element } from './lib/element.js';
|
|
5
|
+
export { element, LifeCycle } from './lib/element.js';
|
|
6
|
+
export { query } from './lib/query.js';
|
package/target/lib/element.d.ts
CHANGED
|
@@ -3,6 +3,9 @@ export interface ElementOpts<T> {
|
|
|
3
3
|
tagName?: string;
|
|
4
4
|
shadow?: Array<ShadowResult | ((el: T) => void)>;
|
|
5
5
|
}
|
|
6
|
+
export declare const LifeCycle: {
|
|
7
|
+
onInit: symbol;
|
|
8
|
+
};
|
|
6
9
|
export declare function element<Target extends CustomElementConstructor, Instance extends InstanceType<Target>>(opts?: ElementOpts<Instance>): (Base: Target, ctx: ClassDecoratorContext<Target>) => {
|
|
7
10
|
new (...args: any[]): {
|
|
8
11
|
connectedCallback(): void;
|
package/target/lib/element.js
CHANGED
|
@@ -1,4 +1,7 @@
|
|
|
1
1
|
import { metadataStore } from './metadata.js';
|
|
2
|
+
export const LifeCycle = {
|
|
3
|
+
onInit: Symbol('onInit')
|
|
4
|
+
};
|
|
2
5
|
export function element(opts) {
|
|
3
6
|
return function elementDecorator(Base, ctx) {
|
|
4
7
|
const meta = metadataStore.read(ctx.metadata);
|
|
@@ -16,7 +19,9 @@ export function element(opts) {
|
|
|
16
19
|
constructor(...args) {
|
|
17
20
|
super(...args);
|
|
18
21
|
if (opts?.shadow) {
|
|
19
|
-
this.
|
|
22
|
+
if (!this.shadowRoot) {
|
|
23
|
+
this.attachShadow({ mode: 'open' });
|
|
24
|
+
}
|
|
20
25
|
for (let res of opts.shadow) {
|
|
21
26
|
if (typeof res === 'function') {
|
|
22
27
|
res(this);
|
|
@@ -29,11 +34,19 @@ export function element(opts) {
|
|
|
29
34
|
for (let [event, { cb, root }] of meta.listeners) {
|
|
30
35
|
root(this).addEventListener(event, cb.bind(this));
|
|
31
36
|
}
|
|
37
|
+
if (LifeCycle.onInit in this) {
|
|
38
|
+
const onInit = Reflect.get(this, LifeCycle.onInit);
|
|
39
|
+
if (typeof onInit === 'function') {
|
|
40
|
+
onInit();
|
|
41
|
+
}
|
|
42
|
+
}
|
|
32
43
|
}
|
|
33
44
|
connectedCallback() {
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
super.connectedCallback
|
|
45
|
+
if (this.isConnected) {
|
|
46
|
+
reflectAttributeValues(this, meta.attrs);
|
|
47
|
+
if (super.connectedCallback) {
|
|
48
|
+
super.connectedCallback();
|
|
49
|
+
}
|
|
37
50
|
}
|
|
38
51
|
}
|
|
39
52
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"element.js","sourceRoot":"","sources":["../../src/lib/element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAW,aAAa,EAAE,MAAM,eAAe,CAAC;AAQvD,MAAM,UAAU,OAAO,CAGrB,IAA4B;IAC5B,OAAO,SAAS,gBAAgB,CAAC,IAAY,EAAE,GAAkC;QAC/E,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,OAAO,MAAM,YAAa,SAAQ,IAAI;YACpC,MAAM,CAAC,kBAAkB,GAAG,IAAI,CAAC,KAAK;iBACnC,MAAM,CAAC,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,OAAO,CAAC;iBAChC,GAAG,CAAC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC;YAEnC,YAAY,GAAG,IAAW;gBACxB,KAAK,CAAC,GAAG,IAAI,CAAC,CAAC;gBAEf,IAAI,IAAI,EAAE,MAAM,EAAE,CAAC;oBACjB,IAAI,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"element.js","sourceRoot":"","sources":["../../src/lib/element.ts"],"names":[],"mappings":"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"}
|
|
@@ -156,7 +156,12 @@ describe('@element()', () => {
|
|
|
156
156
|
display: contents;
|
|
157
157
|
}
|
|
158
158
|
`,
|
|
159
|
-
html `<slot></slot
|
|
159
|
+
html `<slot></slot>`,
|
|
160
|
+
(el) => {
|
|
161
|
+
const div = document.createElement('div');
|
|
162
|
+
div.innerHTML = 'hello world';
|
|
163
|
+
el.append(div);
|
|
164
|
+
}
|
|
160
165
|
]
|
|
161
166
|
})];
|
|
162
167
|
let _classDescriptor;
|
|
@@ -178,6 +183,7 @@ describe('@element()', () => {
|
|
|
178
183
|
const el = new MyElement();
|
|
179
184
|
expect(el.shadowRoot.adoptedStyleSheets.length).to.equal(1);
|
|
180
185
|
expect(el.shadowRoot.innerHTML).to.equal(`<slot></slot>`);
|
|
186
|
+
expect(el.innerHTML).to.equal(`<div>hello world</div>`);
|
|
181
187
|
});
|
|
182
188
|
});
|
|
183
189
|
//# sourceMappingURL=element.test.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"element.test.js","sourceRoot":"","sources":["../../src/lib/element.test.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"element.test.js","sourceRoot":"","sources":["../../src/lib/element.test.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
type Tags = keyof HTMLElementTagNameMap;
|
|
2
|
+
type SVGTags = keyof SVGElementTagNameMap;
|
|
3
|
+
type MathTags = keyof MathMLElementTagNameMap;
|
|
4
|
+
type QueryResult<T> = (updates?: Partial<T>) => T;
|
|
5
|
+
export declare function query<K extends Tags>(selectors: K): QueryResult<HTMLElementTagNameMap[K]>;
|
|
6
|
+
export declare function query<K extends SVGTags>(selectors: K): QueryResult<SVGElementTagNameMap[K]>;
|
|
7
|
+
export declare function query<K extends MathTags>(selectors: K): QueryResult<MathMLElementTagNameMap[K]>;
|
|
8
|
+
export declare function query<E extends Element = Element>(selectors: string): QueryResult<E>;
|
|
9
|
+
export {};
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
export function query(query) {
|
|
2
|
+
let res = null;
|
|
3
|
+
return function (updates) {
|
|
4
|
+
if (res) {
|
|
5
|
+
return res;
|
|
6
|
+
}
|
|
7
|
+
if (this.shadowRoot) {
|
|
8
|
+
res = this.shadowRoot.querySelector(query);
|
|
9
|
+
}
|
|
10
|
+
else {
|
|
11
|
+
res = this.querySelector(query);
|
|
12
|
+
}
|
|
13
|
+
if (!res) {
|
|
14
|
+
throw new Error('could not find element');
|
|
15
|
+
}
|
|
16
|
+
if (updates) {
|
|
17
|
+
for (let update in updates) {
|
|
18
|
+
Reflect.set(res, update, updates[update]);
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
return res;
|
|
22
|
+
};
|
|
23
|
+
}
|
|
24
|
+
//# sourceMappingURL=query.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"query.js","sourceRoot":"","sources":["../../src/lib/query.ts"],"names":[],"mappings":"AAUA,MAAM,UAAU,KAAK,CAAiB,KAAQ;IAC5C,IAAI,GAAG,GAAoC,IAAI,CAAC;IAEhD,OAAO,UAA6B,OAA2C;QAC7E,IAAI,GAAG,EAAE,CAAC;YACR,OAAO,GAAG,CAAC;QACb,CAAC;QAED,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,GAAG,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAI,KAAK,CAAC,CAAC;QAChD,CAAC;aAAM,CAAC;YACN,GAAG,GAAG,IAAI,CAAC,aAAa,CAAI,KAAK,CAAC,CAAC;QACrC,CAAC;QAED,IAAI,CAAC,GAAG,EAAE,CAAC;YACT,MAAM,IAAI,KAAK,CAAC,wBAAwB,CAAC,CAAC;QAC5C,CAAC;QAED,IAAI,OAAO,EAAE,CAAC;YACZ,KAAK,IAAI,MAAM,IAAI,OAAO,EAAE,CAAC;gBAC3B,OAAO,CAAC,GAAG,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC;YAC5C,CAAC;QACH,CAAC;QAED,OAAO,GAAG,CAAC;IACb,CAAC,CAAC;AACJ,CAAC"}
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
import { __esDecorate, __runInitializers } from "tslib";
|
|
2
|
+
import { expect } from '@open-wc/testing';
|
|
3
|
+
import { element } from './element.js';
|
|
4
|
+
import { query } from './query.js';
|
|
5
|
+
import { html } from './tags.js';
|
|
6
|
+
describe('query', () => {
|
|
7
|
+
it('should work', () => {
|
|
8
|
+
let MyElement = (() => {
|
|
9
|
+
let _classDecorators = [element({
|
|
10
|
+
tagName: 'query-test-1',
|
|
11
|
+
shadow: [
|
|
12
|
+
html `
|
|
13
|
+
<form>
|
|
14
|
+
<input id="fname" name="fname" />
|
|
15
|
+
<input id="lname" name="lname" />
|
|
16
|
+
</form>
|
|
17
|
+
`
|
|
18
|
+
]
|
|
19
|
+
})];
|
|
20
|
+
let _classDescriptor;
|
|
21
|
+
let _classExtraInitializers = [];
|
|
22
|
+
let _classThis;
|
|
23
|
+
let _classSuper = HTMLElement;
|
|
24
|
+
var MyElement = class extends _classSuper {
|
|
25
|
+
static { _classThis = this; }
|
|
26
|
+
static {
|
|
27
|
+
const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
|
|
28
|
+
__esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
|
|
29
|
+
MyElement = _classThis = _classDescriptor.value;
|
|
30
|
+
if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
|
|
31
|
+
__runInitializers(_classThis, _classExtraInitializers);
|
|
32
|
+
}
|
|
33
|
+
fname = query('#fname');
|
|
34
|
+
lname = query('#lname');
|
|
35
|
+
};
|
|
36
|
+
return MyElement = _classThis;
|
|
37
|
+
})();
|
|
38
|
+
const el = new MyElement();
|
|
39
|
+
expect(el.fname()).to.equal(el.shadowRoot?.querySelector('#fname'));
|
|
40
|
+
expect(el.lname()).to.equal(el.shadowRoot?.querySelector('#lname'));
|
|
41
|
+
});
|
|
42
|
+
it('should patch the selected item', () => {
|
|
43
|
+
let MyElement = (() => {
|
|
44
|
+
let _classDecorators = [element({
|
|
45
|
+
tagName: 'query-test-2',
|
|
46
|
+
shadow: [
|
|
47
|
+
html `
|
|
48
|
+
<form>
|
|
49
|
+
<input id="fname" name="fname" />
|
|
50
|
+
<input id="lname" name="lname" />
|
|
51
|
+
</form>
|
|
52
|
+
`
|
|
53
|
+
]
|
|
54
|
+
})];
|
|
55
|
+
let _classDescriptor;
|
|
56
|
+
let _classExtraInitializers = [];
|
|
57
|
+
let _classThis;
|
|
58
|
+
let _classSuper = HTMLElement;
|
|
59
|
+
var MyElement = class extends _classSuper {
|
|
60
|
+
static { _classThis = this; }
|
|
61
|
+
static {
|
|
62
|
+
const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
|
|
63
|
+
__esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
|
|
64
|
+
MyElement = _classThis = _classDescriptor.value;
|
|
65
|
+
if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
|
|
66
|
+
__runInitializers(_classThis, _classExtraInitializers);
|
|
67
|
+
}
|
|
68
|
+
fname = query('#fname');
|
|
69
|
+
lname = query('#lname');
|
|
70
|
+
};
|
|
71
|
+
return MyElement = _classThis;
|
|
72
|
+
})();
|
|
73
|
+
const el = new MyElement();
|
|
74
|
+
el.fname({ value: 'Foo' });
|
|
75
|
+
el.lname({ value: 'Bar' });
|
|
76
|
+
expect(el.shadowRoot?.querySelector('#fname')?.value).to.equal('Foo');
|
|
77
|
+
expect(el.shadowRoot?.querySelector('#lname')?.value).to.equal('Bar');
|
|
78
|
+
});
|
|
79
|
+
});
|
|
80
|
+
//# sourceMappingURL=query.test.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"query.test.js","sourceRoot":"","sources":["../../src/lib/query.test.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAEjC,QAAQ,CAAC,OAAO,EAAE,GAAG,EAAE;IACrB,EAAE,CAAC,aAAa,EAAE,GAAG,EAAE;YAYf,SAAS;oCAXd,OAAO,CAAC;oBACP,OAAO,EAAE,cAAc;oBACvB,MAAM,EAAE;wBACN,IAAI,CAAA;;;;;SAKH;qBACF;iBACF,CAAC;;;;8BACsB,WAAW;iCAAnB,SAAQ,WAAW;;;;oBAAnC,6KAGC;;;oBAHK,uDAAS;;gBACb,KAAK,GAAG,KAAK,CAAmB,QAAQ,CAAC,CAAC;gBAC1C,KAAK,GAAG,KAAK,CAAmB,QAAQ,CAAC,CAAC;;;;QAG5C,MAAM,EAAE,GAAG,IAAI,SAAS,EAAE,CAAC;QAE3B,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,UAAU,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC;QACpE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,UAAU,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC;IACtE,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,gCAAgC,EAAE,GAAG,EAAE;YAYlC,SAAS;oCAXd,OAAO,CAAC;oBACP,OAAO,EAAE,cAAc;oBACvB,MAAM,EAAE;wBACN,IAAI,CAAA;;;;;SAKH;qBACF;iBACF,CAAC;;;;8BACsB,WAAW;iCAAnB,SAAQ,WAAW;;;;oBAAnC,6KAGC;;;oBAHK,uDAAS;;gBACb,KAAK,GAAG,KAAK,CAAmB,QAAQ,CAAC,CAAC;gBAC1C,KAAK,GAAG,KAAK,CAAmB,QAAQ,CAAC,CAAC;;;;QAG5C,MAAM,EAAE,GAAG,IAAI,SAAS,EAAE,CAAC;QAC3B,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC;QAC3B,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC;QAE3B,MAAM,CAAC,EAAE,CAAC,UAAU,EAAE,aAAa,CAAmB,QAAQ,CAAC,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QACxF,MAAM,CAAC,EAAE,CAAC,UAAU,EAAE,aAAa,CAAmB,QAAQ,CAAC,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IAC1F,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
|
package/target/lib/result.d.ts
CHANGED
|
@@ -2,10 +2,8 @@ export interface ShadowResult {
|
|
|
2
2
|
run(el: HTMLElement): void;
|
|
3
3
|
}
|
|
4
4
|
export declare abstract class JoistShadowResult implements ShadowResult {
|
|
5
|
-
#private;
|
|
6
5
|
strings: TemplateStringsArray;
|
|
7
6
|
values: any[];
|
|
8
|
-
get shadow(): ShadowRoot;
|
|
9
7
|
constructor(raw: TemplateStringsArray, ...values: any[]);
|
|
10
8
|
run(el: HTMLElement): void;
|
|
11
9
|
abstract setup(root: ShadowRoot): void;
|
package/target/lib/result.js
CHANGED
|
@@ -1,13 +1,6 @@
|
|
|
1
1
|
export class JoistShadowResult {
|
|
2
2
|
strings;
|
|
3
3
|
values;
|
|
4
|
-
#shadow = undefined;
|
|
5
|
-
get shadow() {
|
|
6
|
-
if (!this.#shadow) {
|
|
7
|
-
throw new Error('ShadowResult has not been applied');
|
|
8
|
-
}
|
|
9
|
-
return this.#shadow;
|
|
10
|
-
}
|
|
11
4
|
constructor(raw, ...values) {
|
|
12
5
|
this.strings = raw;
|
|
13
6
|
this.values = values;
|
|
@@ -16,8 +9,7 @@ export class JoistShadowResult {
|
|
|
16
9
|
if (!el.shadowRoot) {
|
|
17
10
|
throw new Error('ShadowResult has not been applied');
|
|
18
11
|
}
|
|
19
|
-
this
|
|
20
|
-
this.setup(this.#shadow);
|
|
12
|
+
this.setup(el.shadowRoot);
|
|
21
13
|
}
|
|
22
14
|
}
|
|
23
15
|
//# sourceMappingURL=result.js.map
|
package/target/lib/result.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"result.js","sourceRoot":"","sources":["../../src/lib/result.ts"],"names":[],"mappings":"AAIA,MAAM,OAAgB,iBAAiB;IACrC,OAAO,CAAC;IACR,MAAM,CAAC;IAEP,
|
|
1
|
+
{"version":3,"file":"result.js","sourceRoot":"","sources":["../../src/lib/result.ts"],"names":[],"mappings":"AAIA,MAAM,OAAgB,iBAAiB;IACrC,OAAO,CAAC;IACR,MAAM,CAAC;IAEP,YAAY,GAAyB,EAAE,GAAG,MAAa;QACrD,IAAI,CAAC,OAAO,GAAG,GAAG,CAAC;QACnB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;IACvB,CAAC;IAED,GAAG,CAAC,EAAe;QACjB,IAAI,CAAC,EAAE,CAAC,UAAU,EAAE,CAAC;YACnB,MAAM,IAAI,KAAK,CAAC,mCAAmC,CAAC,CAAC;QACvD,CAAC;QAED,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC;IAC5B,CAAC;CAGF"}
|
package/target/lib/tags.d.ts
CHANGED
|
@@ -1,10 +1,8 @@
|
|
|
1
1
|
import { JoistShadowResult } from './result.js';
|
|
2
|
-
export declare const htmlTemplateCache: WeakMap<TemplateStringsArray, HTMLTemplateElement>;
|
|
3
2
|
export declare class HTMLResult extends JoistShadowResult {
|
|
4
3
|
setup(root: ShadowRoot): void;
|
|
5
4
|
}
|
|
6
5
|
export declare function html(strings: TemplateStringsArray, ...values: any[]): HTMLResult;
|
|
7
|
-
export declare const styleSheetCache: WeakMap<TemplateStringsArray, CSSStyleSheet>;
|
|
8
6
|
export declare class CSSResult extends JoistShadowResult {
|
|
9
7
|
setup(root: ShadowRoot): void;
|
|
10
8
|
}
|
package/target/lib/tags.js
CHANGED
|
@@ -1,33 +1,18 @@
|
|
|
1
1
|
import { JoistShadowResult } from './result.js';
|
|
2
|
-
export const htmlTemplateCache = new WeakMap();
|
|
3
2
|
export class HTMLResult extends JoistShadowResult {
|
|
4
3
|
setup(root) {
|
|
5
|
-
let template;
|
|
6
|
-
|
|
7
|
-
template = htmlTemplateCache.get(this.strings);
|
|
8
|
-
}
|
|
9
|
-
else {
|
|
10
|
-
template = document.createElement('template');
|
|
11
|
-
template.innerHTML = concat(this.strings);
|
|
12
|
-
htmlTemplateCache.set(this.strings, template);
|
|
13
|
-
}
|
|
4
|
+
let template = document.createElement('template');
|
|
5
|
+
template.innerHTML = concat(this.strings);
|
|
14
6
|
root.append(template.content.cloneNode(true));
|
|
15
7
|
}
|
|
16
8
|
}
|
|
17
9
|
export function html(strings, ...values) {
|
|
18
10
|
return new HTMLResult(strings, ...values);
|
|
19
11
|
}
|
|
20
|
-
export const styleSheetCache = new WeakMap();
|
|
21
12
|
export class CSSResult extends JoistShadowResult {
|
|
22
13
|
setup(root) {
|
|
23
|
-
let sheet;
|
|
24
|
-
|
|
25
|
-
sheet = styleSheetCache.get(this.strings);
|
|
26
|
-
}
|
|
27
|
-
else {
|
|
28
|
-
sheet = new CSSStyleSheet();
|
|
29
|
-
sheet.replaceSync(concat(this.strings));
|
|
30
|
-
}
|
|
14
|
+
let sheet = new CSSStyleSheet();
|
|
15
|
+
sheet.replaceSync(concat(this.strings));
|
|
31
16
|
root.adoptedStyleSheets = [...root.adoptedStyleSheets, sheet];
|
|
32
17
|
}
|
|
33
18
|
}
|
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":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAEhD,MAAM,OAAO,UAAW,SAAQ,iBAAiB;IAC/C,KAAK,CAAC,IAAgB;QACpB,IAAI,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;QAClD,QAAQ,CAAC,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAE1C,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,OAAO,SAAU,SAAQ,iBAAiB;IAC9C,KAAK,CAAC,IAAgB;QACpB,IAAI,KAAK,GAAG,IAAI,aAAa,EAAE,CAAC;QAChC,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;QAExC,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,CAAC;QACxC,GAAG,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC;IACpB,CAAC;IAED,OAAO,GAAG,CAAC;AACb,CAAC"}
|
package/target/lib.d.ts
CHANGED
|
@@ -2,4 +2,5 @@ export { JoistShadowResult as TemplateResult } from './lib/result.js';
|
|
|
2
2
|
export { css, html, HTMLResult, CSSResult } from './lib/tags.js';
|
|
3
3
|
export { attr } from './lib/attr.js';
|
|
4
4
|
export { listen } from './lib/listen.js';
|
|
5
|
-
export { element } from './lib/element.js';
|
|
5
|
+
export { element, LifeCycle } from './lib/element.js';
|
|
6
|
+
export { query } from './lib/query.js';
|
package/target/lib.js
CHANGED
|
@@ -2,5 +2,6 @@ export { JoistShadowResult as TemplateResult } from './lib/result.js';
|
|
|
2
2
|
export { css, html, HTMLResult, CSSResult } from './lib/tags.js';
|
|
3
3
|
export { attr } from './lib/attr.js';
|
|
4
4
|
export { listen } from './lib/listen.js';
|
|
5
|
-
export { element } from './lib/element.js';
|
|
5
|
+
export { element, LifeCycle } from './lib/element.js';
|
|
6
|
+
export { query } from './lib/query.js';
|
|
6
7
|
//# sourceMappingURL=lib.js.map
|
package/target/lib.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"lib.js","sourceRoot":"","sources":["../src/lib.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,IAAI,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACtE,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AACjE,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC"}
|
|
1
|
+
{"version":3,"file":"lib.js","sourceRoot":"","sources":["../src/lib.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,IAAI,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACtE,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AACjE,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC"}
|
package/src/lib/tags.test.ts
DELETED
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import { expect } from '@open-wc/testing';
|
|
2
|
-
import { css, html, htmlTemplateCache, styleSheetCache } from './tags.js';
|
|
3
|
-
|
|
4
|
-
describe('tags', () => {
|
|
5
|
-
it('should ensure return the same CSSResult', () => {
|
|
6
|
-
class Test {
|
|
7
|
-
styles = css`Hello World`;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
const a = new Test();
|
|
11
|
-
const b = new Test();
|
|
12
|
-
|
|
13
|
-
expect(a.styles.strings).to.equal(b.styles.strings);
|
|
14
|
-
expect(styleSheetCache.get(a.styles.strings)).to.equal(styleSheetCache.get(b.styles.strings));
|
|
15
|
-
});
|
|
16
|
-
|
|
17
|
-
it('should cache the HTMLTemplateElement', () => {
|
|
18
|
-
class Test {
|
|
19
|
-
dom = html`Hello World`;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
const a = new Test();
|
|
23
|
-
const b = new Test();
|
|
24
|
-
|
|
25
|
-
expect(a.dom.strings).to.equal(b.dom.strings);
|
|
26
|
-
expect(htmlTemplateCache.get(a.dom.strings)).to.equal(htmlTemplateCache.get(b.dom.strings));
|
|
27
|
-
});
|
|
28
|
-
});
|
package/target/lib/tags.test.js
DELETED
|
@@ -1,23 +0,0 @@
|
|
|
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
|
|
@@ -1 +0,0 @@
|
|
|
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"}
|
|
File without changes
|