@joist/element 4.0.0-next.4 → 4.0.0-next.6
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 +2 -2
- package/package.json +4 -3
- package/src/lib/attr.test.ts +107 -98
- package/src/lib/attr.ts +2 -2
- package/src/lib/element.test.ts +84 -80
- package/src/lib/element.ts +5 -13
- package/src/lib/lifecycle.test.ts +31 -0
- package/src/lib/lifecycle.ts +9 -0
- package/src/lib/listen.ts +1 -1
- package/src/lib/metadata.ts +1 -0
- package/src/lib/query.test.ts +43 -44
- package/src/lib/query.ts +1 -1
- package/src/lib/result.ts +2 -22
- package/src/lib/tags.ts +28 -13
- package/src/lib/template.test.ts +65 -0
- package/src/lib/template.ts +132 -0
- package/src/lib.ts +3 -2
- package/target/lib/attr.d.ts +1 -1
- package/target/lib/attr.js +1 -1
- package/target/lib/attr.js.map +1 -1
- package/target/lib/attr.test.js +258 -252
- package/target/lib/attr.test.js.map +1 -1
- package/target/lib/element.d.ts +2 -5
- package/target/lib/element.js +3 -9
- package/target/lib/element.js.map +1 -1
- package/target/lib/element.test.js +181 -179
- package/target/lib/element.test.js.map +1 -1
- package/target/lib/lifecycle.d.ts +1 -0
- package/target/lib/lifecycle.js +8 -0
- package/target/lib/lifecycle.js.map +1 -0
- package/target/lib/lifecycle.test.d.ts +1 -0
- package/target/lib/lifecycle.test.js +48 -0
- package/target/lib/lifecycle.test.js.map +1 -0
- package/target/lib/listen.d.ts +1 -1
- package/target/lib/listen.js.map +1 -1
- package/target/lib/metadata.d.ts +1 -0
- package/target/lib/metadata.js +1 -0
- package/target/lib/metadata.js.map +1 -1
- package/target/lib/query.d.ts +1 -1
- package/target/lib/query.test.js +72 -74
- package/target/lib/query.test.js.map +1 -1
- package/target/lib/result.d.ts +2 -9
- package/target/lib/result.js +1 -14
- package/target/lib/result.js.map +1 -1
- package/target/lib/tags.d.ts +11 -7
- package/target/lib/tags.js +20 -11
- package/target/lib/tags.js.map +1 -1
- package/target/lib/template.d.ts +6 -0
- package/target/lib/template.js +91 -0
- package/target/lib/template.js.map +1 -0
- package/target/lib/template.test.d.ts +1 -0
- package/target/lib/template.test.js +47 -0
- package/target/lib/template.test.js.map +1 -0
- package/target/lib.d.ts +3 -2
- package/target/lib.js +3 -2
- package/target/lib.js.map +1 -1
package/target/lib/element.d.ts
CHANGED
|
@@ -1,11 +1,8 @@
|
|
|
1
1
|
import { ShadowResult } from './result.js';
|
|
2
|
-
export interface ElementOpts<T> {
|
|
2
|
+
export interface ElementOpts<T extends HTMLElement> {
|
|
3
3
|
tagName?: string;
|
|
4
|
-
shadow?: Array<ShadowResult | ((el: T) => void)>;
|
|
4
|
+
shadow?: Array<ShadowResult<T> | ((el: T) => void)>;
|
|
5
5
|
}
|
|
6
|
-
export declare const LifeCycle: {
|
|
7
|
-
onInit: symbol;
|
|
8
|
-
};
|
|
9
6
|
export declare function element<Target extends CustomElementConstructor, Instance extends InstanceType<Target>>(opts?: ElementOpts<Instance>): (Base: Target, ctx: ClassDecoratorContext<Target>) => {
|
|
10
7
|
new (...args: any[]): {
|
|
11
8
|
connectedCallback(): void;
|
package/target/lib/element.js
CHANGED
|
@@ -1,7 +1,4 @@
|
|
|
1
1
|
import { metadataStore } from './metadata.js';
|
|
2
|
-
export const LifeCycle = {
|
|
3
|
-
onInit: Symbol('onInit')
|
|
4
|
-
};
|
|
5
2
|
export function element(opts) {
|
|
6
3
|
return function elementDecorator(Base, ctx) {
|
|
7
4
|
const meta = metadataStore.read(ctx.metadata);
|
|
@@ -27,18 +24,15 @@ export function element(opts) {
|
|
|
27
24
|
res(this);
|
|
28
25
|
}
|
|
29
26
|
else {
|
|
30
|
-
res.
|
|
27
|
+
res.apply(this);
|
|
31
28
|
}
|
|
32
29
|
}
|
|
33
30
|
}
|
|
34
31
|
for (let [event, { cb, root }] of meta.listeners) {
|
|
35
32
|
root(this).addEventListener(event, cb.bind(this));
|
|
36
33
|
}
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
if (typeof onInit === 'function') {
|
|
40
|
-
onInit();
|
|
41
|
-
}
|
|
34
|
+
for (let cb of meta.onReady) {
|
|
35
|
+
cb.call(this);
|
|
42
36
|
}
|
|
43
37
|
}
|
|
44
38
|
connectedCallback() {
|
|
@@ -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,
|
|
1
|
+
{"version":3,"file":"element.js","sourceRoot":"","sources":["../../src/lib/element.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,189 +1,191 @@
|
|
|
1
1
|
import { __esDecorate, __runInitializers } from "tslib";
|
|
2
|
-
import { expect
|
|
2
|
+
import { expect } from 'chai';
|
|
3
3
|
import { attr } from './attr.js';
|
|
4
4
|
import { element } from './element.js';
|
|
5
5
|
import { css, html } from './tags.js';
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
let
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
}
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
6
|
+
it('should write default value to attribute', async () => {
|
|
7
|
+
let MyElement = (() => {
|
|
8
|
+
let _classDecorators = [element({
|
|
9
|
+
tagName: 'element-1'
|
|
10
|
+
})];
|
|
11
|
+
let _classDescriptor;
|
|
12
|
+
let _classExtraInitializers = [];
|
|
13
|
+
let _classThis;
|
|
14
|
+
let _classSuper = HTMLElement;
|
|
15
|
+
let _value1_decorators;
|
|
16
|
+
let _value1_initializers = [];
|
|
17
|
+
let _value1_extraInitializers = [];
|
|
18
|
+
let _value2_decorators;
|
|
19
|
+
let _value2_initializers = [];
|
|
20
|
+
let _value2_extraInitializers = [];
|
|
21
|
+
let _value3_decorators;
|
|
22
|
+
let _value3_initializers = [];
|
|
23
|
+
let _value3_extraInitializers = [];
|
|
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
|
+
_value1_decorators = [attr()];
|
|
29
|
+
_value2_decorators = [attr()];
|
|
30
|
+
_value3_decorators = [attr()];
|
|
31
|
+
__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; } }, metadata: _metadata }, _value1_initializers, _value1_extraInitializers);
|
|
32
|
+
__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; } }, metadata: _metadata }, _value2_initializers, _value2_extraInitializers);
|
|
33
|
+
__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; } }, metadata: _metadata }, _value3_initializers, _value3_extraInitializers);
|
|
34
|
+
__esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
|
|
35
|
+
MyElement = _classThis = _classDescriptor.value;
|
|
36
|
+
if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
|
|
37
|
+
__runInitializers(_classThis, _classExtraInitializers);
|
|
38
|
+
}
|
|
39
|
+
#value1_accessor_storage = __runInitializers(this, _value1_initializers, 'hello');
|
|
40
|
+
get value1() { return this.#value1_accessor_storage; }
|
|
41
|
+
set value1(value) { this.#value1_accessor_storage = value; }
|
|
42
|
+
#value2_accessor_storage = (__runInitializers(this, _value1_extraInitializers), __runInitializers(this, _value2_initializers, 0));
|
|
43
|
+
get value2() { return this.#value2_accessor_storage; }
|
|
44
|
+
set value2(value) { this.#value2_accessor_storage = value; }
|
|
45
|
+
#value3_accessor_storage = (__runInitializers(this, _value2_extraInitializers), __runInitializers(this, _value3_initializers, true));
|
|
46
|
+
get value3() { return this.#value3_accessor_storage; }
|
|
47
|
+
set value3(value) { this.#value3_accessor_storage = value; }
|
|
48
|
+
constructor() {
|
|
49
|
+
super(...arguments);
|
|
50
|
+
__runInitializers(this, _value3_extraInitializers);
|
|
51
|
+
}
|
|
52
|
+
};
|
|
53
|
+
return MyElement = _classThis;
|
|
54
|
+
})();
|
|
55
|
+
const el = new MyElement();
|
|
56
|
+
document.body.append(el);
|
|
57
|
+
expect(el.getAttribute('value1')).to.equal('hello');
|
|
58
|
+
expect(el.getAttribute('value2')).to.equal('0');
|
|
59
|
+
expect(el.getAttribute('value3')).to.equal('');
|
|
60
|
+
el.remove();
|
|
61
|
+
});
|
|
62
|
+
it('should register attributes', async () => {
|
|
63
|
+
let MyElement = (() => {
|
|
64
|
+
let _classDecorators = [element({
|
|
65
|
+
tagName: 'element-2'
|
|
66
|
+
})];
|
|
67
|
+
let _classDescriptor;
|
|
68
|
+
let _classExtraInitializers = [];
|
|
69
|
+
let _classThis;
|
|
70
|
+
let _classSuper = HTMLElement;
|
|
71
|
+
let _value1_decorators;
|
|
72
|
+
let _value1_initializers = [];
|
|
73
|
+
let _value1_extraInitializers = [];
|
|
74
|
+
let _value2_decorators;
|
|
75
|
+
let _value2_initializers = [];
|
|
76
|
+
let _value2_extraInitializers = [];
|
|
77
|
+
let _value3_decorators;
|
|
78
|
+
let _value3_initializers = [];
|
|
79
|
+
let _value3_extraInitializers = [];
|
|
80
|
+
let _value4_decorators;
|
|
81
|
+
let _value4_initializers = [];
|
|
82
|
+
let _value4_extraInitializers = [];
|
|
83
|
+
var MyElement = class extends _classSuper {
|
|
84
|
+
static { _classThis = this; }
|
|
85
|
+
static {
|
|
86
|
+
const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
|
|
87
|
+
_value1_decorators = [attr()];
|
|
88
|
+
_value2_decorators = [attr()];
|
|
89
|
+
_value3_decorators = [attr()];
|
|
90
|
+
_value4_decorators = [attr({ observed: false })];
|
|
91
|
+
__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; } }, metadata: _metadata }, _value1_initializers, _value1_extraInitializers);
|
|
92
|
+
__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; } }, metadata: _metadata }, _value2_initializers, _value2_extraInitializers);
|
|
93
|
+
__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; } }, metadata: _metadata }, _value3_initializers, _value3_extraInitializers);
|
|
94
|
+
__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; } }, metadata: _metadata }, _value4_initializers, _value4_extraInitializers);
|
|
95
|
+
__esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
|
|
96
|
+
MyElement = _classThis = _classDescriptor.value;
|
|
97
|
+
if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
|
|
98
|
+
__runInitializers(_classThis, _classExtraInitializers);
|
|
99
|
+
}
|
|
100
|
+
#value1_accessor_storage = __runInitializers(this, _value1_initializers, 'hello');
|
|
101
|
+
get value1() { return this.#value1_accessor_storage; }
|
|
102
|
+
set value1(value) { this.#value1_accessor_storage = value; }
|
|
103
|
+
#value2_accessor_storage = (__runInitializers(this, _value1_extraInitializers), __runInitializers(this, _value2_initializers, 0));
|
|
104
|
+
get value2() { return this.#value2_accessor_storage; }
|
|
105
|
+
set value2(value) { this.#value2_accessor_storage = value; }
|
|
106
|
+
#value3_accessor_storage = (__runInitializers(this, _value2_extraInitializers), __runInitializers(this, _value3_initializers, true));
|
|
107
|
+
get value3() { return this.#value3_accessor_storage; }
|
|
108
|
+
set value3(value) { this.#value3_accessor_storage = value; }
|
|
109
|
+
#value4_accessor_storage = (__runInitializers(this, _value3_extraInitializers), __runInitializers(this, _value4_initializers, 'hello world'));
|
|
110
|
+
get value4() { return this.#value4_accessor_storage; }
|
|
111
|
+
set value4(value) { this.#value4_accessor_storage = value; }
|
|
112
|
+
constructor() {
|
|
113
|
+
super(...arguments);
|
|
114
|
+
__runInitializers(this, _value4_extraInitializers);
|
|
115
|
+
}
|
|
116
|
+
};
|
|
117
|
+
return MyElement = _classThis;
|
|
118
|
+
})();
|
|
119
|
+
expect(Reflect.get(MyElement, 'observedAttributes')).to.deep.equal([
|
|
120
|
+
'value1',
|
|
121
|
+
'value2',
|
|
122
|
+
'value3'
|
|
123
|
+
]);
|
|
124
|
+
});
|
|
125
|
+
it('should attach shadow root when the shadow property exists', async () => {
|
|
126
|
+
let MyElement = (() => {
|
|
127
|
+
let _classDecorators = [element({
|
|
128
|
+
tagName: 'element-3',
|
|
129
|
+
shadow: []
|
|
130
|
+
})];
|
|
131
|
+
let _classDescriptor;
|
|
132
|
+
let _classExtraInitializers = [];
|
|
133
|
+
let _classThis;
|
|
134
|
+
let _classSuper = HTMLElement;
|
|
135
|
+
var MyElement = class extends _classSuper {
|
|
136
|
+
static { _classThis = this; }
|
|
137
|
+
static {
|
|
138
|
+
const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
|
|
139
|
+
__esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
|
|
140
|
+
MyElement = _classThis = _classDescriptor.value;
|
|
141
|
+
if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
|
|
142
|
+
__runInitializers(_classThis, _classExtraInitializers);
|
|
143
|
+
}
|
|
144
|
+
};
|
|
145
|
+
return MyElement = _classThis;
|
|
146
|
+
})();
|
|
147
|
+
const el = new MyElement();
|
|
148
|
+
expect(el.shadowRoot).to.be.instanceOf(ShadowRoot);
|
|
149
|
+
});
|
|
150
|
+
it('should apply html and css', async () => {
|
|
151
|
+
let MyElement = (() => {
|
|
152
|
+
let _classDecorators = [element({
|
|
153
|
+
tagName: 'element-4',
|
|
154
|
+
shadow: [
|
|
155
|
+
css `
|
|
156
|
+
:host {
|
|
157
|
+
display: contents;
|
|
158
|
+
}
|
|
159
|
+
`,
|
|
160
|
+
html `<slot></slot>`,
|
|
161
|
+
{
|
|
162
|
+
apply(el) {
|
|
161
163
|
const div = document.createElement('div');
|
|
162
164
|
div.innerHTML = 'hello world';
|
|
163
165
|
el.append(div);
|
|
164
166
|
}
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
}
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
167
|
+
}
|
|
168
|
+
]
|
|
169
|
+
})];
|
|
170
|
+
let _classDescriptor;
|
|
171
|
+
let _classExtraInitializers = [];
|
|
172
|
+
let _classThis;
|
|
173
|
+
let _classSuper = HTMLElement;
|
|
174
|
+
var MyElement = class extends _classSuper {
|
|
175
|
+
static { _classThis = this; }
|
|
176
|
+
static {
|
|
177
|
+
const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
|
|
178
|
+
__esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
|
|
179
|
+
MyElement = _classThis = _classDescriptor.value;
|
|
180
|
+
if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
|
|
181
|
+
__runInitializers(_classThis, _classExtraInitializers);
|
|
182
|
+
}
|
|
183
|
+
};
|
|
184
|
+
return MyElement = _classThis;
|
|
185
|
+
})();
|
|
186
|
+
const el = new MyElement();
|
|
187
|
+
expect(el.shadowRoot.adoptedStyleSheets.length).to.equal(1);
|
|
188
|
+
expect(el.shadowRoot.innerHTML).to.equal(`<slot></slot>`);
|
|
189
|
+
expect(el.innerHTML).to.equal(`<div>hello world</div>`);
|
|
188
190
|
});
|
|
189
191
|
//# sourceMappingURL=element.test.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"element.test.js","sourceRoot":"","sources":["../../src/lib/element.test.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,
|
|
1
|
+
{"version":3,"file":"element.test.js","sourceRoot":"","sources":["../../src/lib/element.test.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function ready(): (val: Function, ctx: ClassMethodDecoratorContext) => void;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"lifecycle.js","sourceRoot":"","sources":["../../src/lib/lifecycle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAE9C,MAAM,UAAU,KAAK;IACnB,OAAO,SAAS,cAAc,CAAC,GAAa,EAAE,GAAgC;QAC5E,MAAM,QAAQ,GAAG,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;QAElD,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAC5B,CAAC,CAAC;AACJ,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import { __esDecorate, __runInitializers } from "tslib";
|
|
2
|
+
import { assert } from 'chai';
|
|
3
|
+
import { element } from './element.js';
|
|
4
|
+
import { ready } from './lifecycle';
|
|
5
|
+
it('should call all callbacks when template is ready', () => {
|
|
6
|
+
let MyElement = (() => {
|
|
7
|
+
let _classDecorators = [element({
|
|
8
|
+
tagName: 'template-ready-1'
|
|
9
|
+
})];
|
|
10
|
+
let _classDescriptor;
|
|
11
|
+
let _classExtraInitializers = [];
|
|
12
|
+
let _classThis;
|
|
13
|
+
let _classSuper = HTMLElement;
|
|
14
|
+
let _instanceExtraInitializers = [];
|
|
15
|
+
let _onTemplateReady1_decorators;
|
|
16
|
+
let _onTemplateReady2_decorators;
|
|
17
|
+
var MyElement = class extends _classSuper {
|
|
18
|
+
static { _classThis = this; }
|
|
19
|
+
static {
|
|
20
|
+
const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
|
|
21
|
+
_onTemplateReady1_decorators = [ready()];
|
|
22
|
+
_onTemplateReady2_decorators = [ready()];
|
|
23
|
+
__esDecorate(this, null, _onTemplateReady1_decorators, { kind: "method", name: "onTemplateReady1", static: false, private: false, access: { has: obj => "onTemplateReady1" in obj, get: obj => obj.onTemplateReady1 }, metadata: _metadata }, null, _instanceExtraInitializers);
|
|
24
|
+
__esDecorate(this, null, _onTemplateReady2_decorators, { kind: "method", name: "onTemplateReady2", static: false, private: false, access: { has: obj => "onTemplateReady2" in obj, get: obj => obj.onTemplateReady2 }, metadata: _metadata }, null, _instanceExtraInitializers);
|
|
25
|
+
__esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
|
|
26
|
+
MyElement = _classThis = _classDescriptor.value;
|
|
27
|
+
if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
|
|
28
|
+
__runInitializers(_classThis, _classExtraInitializers);
|
|
29
|
+
}
|
|
30
|
+
callCount = (__runInitializers(this, _instanceExtraInitializers), {});
|
|
31
|
+
onTemplateReady1() {
|
|
32
|
+
this.callCount['onTemplateReady1'] ??= 0;
|
|
33
|
+
this.callCount['onTemplateReady1']++;
|
|
34
|
+
}
|
|
35
|
+
onTemplateReady2() {
|
|
36
|
+
this.callCount['onTemplateReady2'] ??= 0;
|
|
37
|
+
this.callCount['onTemplateReady2']++;
|
|
38
|
+
}
|
|
39
|
+
};
|
|
40
|
+
return MyElement = _classThis;
|
|
41
|
+
})();
|
|
42
|
+
const el = new MyElement();
|
|
43
|
+
assert.deepEqual(el.callCount, {
|
|
44
|
+
onTemplateReady1: 1,
|
|
45
|
+
onTemplateReady2: 1
|
|
46
|
+
});
|
|
47
|
+
});
|
|
48
|
+
//# sourceMappingURL=lifecycle.test.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"lifecycle.test.js","sourceRoot":"","sources":["../../src/lib/lifecycle.test.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,MAAM,CAAC;AAC9B,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC,EAAE,CAAC,kDAAkD,EAAE,GAAG,EAAE;QAIpD,SAAS;gCAHd,OAAO,CAAC;gBACP,OAAO,EAAE,kBAAkB;aAC5B,CAAC;;;;0BACsB,WAAW;;;;6BAAnB,SAAQ,WAAW;;;;gDAGhC,KAAK,EAAE;gDAMP,KAAK,EAAE;gBALR,mMAAA,gBAAgB,6DAGf;gBAGD,mMAAA,gBAAgB,6DAGf;gBAbH,6KAcC;;;gBAdK,uDAAS;;YACb,SAAS,IADL,mDAAS,EACuB,EAAE,EAAC;YAGvC,gBAAgB;gBACd,IAAI,CAAC,SAAS,CAAC,kBAAkB,CAAC,KAAK,CAAC,CAAC;gBACzC,IAAI,CAAC,SAAS,CAAC,kBAAkB,CAAC,EAAE,CAAC;YACvC,CAAC;YAGD,gBAAgB;gBACd,IAAI,CAAC,SAAS,CAAC,kBAAkB,CAAC,KAAK,CAAC,CAAC;gBACzC,IAAI,CAAC,SAAS,CAAC,kBAAkB,CAAC,EAAE,CAAC;YACvC,CAAC;;;;IAGH,MAAM,EAAE,GAAG,IAAI,SAAS,EAAE,CAAC;IAE3B,MAAM,CAAC,SAAS,CAAC,EAAE,CAAC,SAAS,EAAE;QAC7B,gBAAgB,EAAE,CAAC;QACnB,gBAAgB,EAAE,CAAC;KACpB,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
|
package/target/lib/listen.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { ListenerRootSelector } from './metadata.js';
|
|
2
|
-
export declare function listen<This extends HTMLElement>(event: string, root?: ListenerRootSelector): (value: (e:
|
|
2
|
+
export declare function listen<This extends HTMLElement>(event: string, root?: ListenerRootSelector): (value: <T extends Event>(e: T) => void, ctx: ClassMethodDecoratorContext<This>) => void;
|
package/target/lib/listen.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"listen.js","sourceRoot":"","sources":["../../src/lib/listen.ts"],"names":[],"mappings":"AAAA,OAAO,EAAwB,aAAa,EAAE,MAAM,eAAe,CAAC;AAEpE,MAAM,UAAU,MAAM,CAA2B,KAAa,EAAE,IAA2B;IACzF,OAAO,SAAS,eAAe,CAC7B,
|
|
1
|
+
{"version":3,"file":"listen.js","sourceRoot":"","sources":["../../src/lib/listen.ts"],"names":[],"mappings":"AAAA,OAAO,EAAwB,aAAa,EAAE,MAAM,eAAe,CAAC;AAEpE,MAAM,UAAU,MAAM,CAA2B,KAAa,EAAE,IAA2B;IACzF,OAAO,SAAS,eAAe,CAC7B,KAAsC,EACtC,GAAsC;QAEtC,MAAM,QAAQ,GAAG,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;QAElD,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,EAAE;YAC5B,EAAE,EAAE,KAAK;YACT,IAAI,EAAE,IAAI,IAAI,CAAC,CAAC,EAAe,EAAE,EAAE,CAAC,EAAE,CAAC,UAAU,IAAI,EAAE,CAAC;SACzD,CAAC,CAAC;IACL,CAAC,CAAC;AACJ,CAAC"}
|
package/target/lib/metadata.d.ts
CHANGED
package/target/lib/metadata.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"metadata.js","sourceRoot":"","sources":["../../src/lib/metadata.ts"],"names":[],"mappings":"AAAC,MAAc,CAAC,QAAQ,KAAK,MAAM,CAAC,iBAAiB,CAAC,CAAC;AAUvD,MAAM,OAAO,eAAe;IAC1B,KAAK,GAAc,EAAE,CAAC;IACtB,SAAS,GAAG,IAAI,GAAG,EAAkE,CAAC;
|
|
1
|
+
{"version":3,"file":"metadata.js","sourceRoot":"","sources":["../../src/lib/metadata.ts"],"names":[],"mappings":"AAAC,MAAc,CAAC,QAAQ,KAAK,MAAM,CAAC,iBAAiB,CAAC,CAAC;AAUvD,MAAM,OAAO,eAAe;IAC1B,KAAK,GAAc,EAAE,CAAC;IACtB,SAAS,GAAG,IAAI,GAAG,EAAkE,CAAC;IACtF,OAAO,GAAG,IAAI,GAAG,EAAY,CAAC;CAC/B;AAED,MAAM,OAAO,aAAc,SAAQ,OAAgC;IACjE,IAAI,CAAC,KAAa;QAChB,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC;YACrB,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,IAAI,eAAe,EAAE,CAAC,CAAC;QACzC,CAAC;QAED,OAAO,IAAI,CAAC,GAAG,CAAC,KAAK,CAAE,CAAC;IAC1B,CAAC;CACF;AAED,MAAM,CAAC,MAAM,aAAa,GAAG,IAAI,aAAa,EAAE,CAAC"}
|
package/target/lib/query.d.ts
CHANGED
|
@@ -5,5 +5,5 @@ type QueryResult<T> = (updates?: Partial<T>) => T;
|
|
|
5
5
|
export declare function query<K extends Tags>(selectors: K): QueryResult<HTMLElementTagNameMap[K]>;
|
|
6
6
|
export declare function query<K extends SVGTags>(selectors: K): QueryResult<SVGElementTagNameMap[K]>;
|
|
7
7
|
export declare function query<K extends MathTags>(selectors: K): QueryResult<MathMLElementTagNameMap[K]>;
|
|
8
|
-
export declare function query<E extends
|
|
8
|
+
export declare function query<E extends HTMLElement = HTMLElement>(selectors: string): QueryResult<E>;
|
|
9
9
|
export {};
|