@dooboostore/simple-web-component 1.0.43 → 1.0.44
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 +298 -49
- package/dist/cjs/SwcAppEngine.js +3 -1
- package/dist/cjs/SwcAppEngine.js.map +2 -2
- package/dist/cjs/decorators/addEventListener.js.map +2 -2
- package/dist/cjs/decorators/applyAttribute.js +30 -28
- package/dist/cjs/decorators/applyAttribute.js.map +2 -2
- package/dist/cjs/decorators/applyClass.js +57 -21
- package/dist/cjs/decorators/applyClass.js.map +3 -3
- package/dist/cjs/decorators/applyNode.js +165 -105
- package/dist/cjs/decorators/applyNode.js.map +2 -2
- package/dist/cjs/decorators/applyProperty.js +11 -28
- package/dist/cjs/decorators/applyProperty.js.map +2 -2
- package/dist/cjs/decorators/applyStyle.js +39 -15
- package/dist/cjs/decorators/applyStyle.js.map +3 -3
- package/dist/cjs/decorators/{changedAttributeThis.js → changedAttribute.js} +6 -6
- package/dist/cjs/decorators/changedAttribute.js.map +7 -0
- package/dist/cjs/decorators/elementDefine.js +37 -6
- package/dist/cjs/decorators/elementDefine.js.map +3 -3
- package/dist/cjs/decorators/emitCustomEvent.js +56 -42
- package/dist/cjs/decorators/emitCustomEvent.js.map +2 -2
- package/dist/cjs/decorators/index.js +1 -1
- package/dist/cjs/decorators/index.js.map +2 -2
- package/dist/cjs/decorators/publishSwcAppMessage.js +5 -5
- package/dist/cjs/decorators/publishSwcAppMessage.js.map +3 -3
- package/dist/cjs/decorators/query.js +96 -145
- package/dist/cjs/decorators/query.js.map +3 -3
- package/dist/cjs/decorators/queryAll.js +104 -131
- package/dist/cjs/decorators/queryAll.js.map +3 -3
- package/dist/cjs/decorators/subscribeSwcAppMessageWhileConnected.js +2 -0
- package/dist/cjs/decorators/subscribeSwcAppMessageWhileConnected.js.map +2 -2
- package/dist/cjs/decorators/subscribeSwcAppRouteChangeWhileConnected.js +2 -0
- package/dist/cjs/decorators/subscribeSwcAppRouteChangeWhileConnected.js.map +2 -2
- package/dist/cjs/elements/SwcAppMixin.js +17 -2
- package/dist/cjs/elements/SwcAppMixin.js.map +2 -2
- package/dist/cjs/examples/RxJSOperatorsExample.js +285 -0
- package/dist/cjs/examples/RxJSOperatorsExample.js.map +7 -0
- package/dist/cjs/index.js +1 -0
- package/dist/cjs/index.js.map +2 -2
- package/dist/cjs/router/ElementRouter.js +4 -0
- package/dist/cjs/router/ElementRouter.js.map +2 -2
- package/dist/esm/SwcAppEngine.js +3 -1
- package/dist/esm/SwcAppEngine.js.map +2 -2
- package/dist/esm/decorators/addEventListener.js.map +2 -2
- package/dist/esm/decorators/applyAttribute.js +30 -28
- package/dist/esm/decorators/applyAttribute.js.map +2 -2
- package/dist/esm/decorators/applyClass.js +57 -21
- package/dist/esm/decorators/applyClass.js.map +3 -3
- package/dist/esm/decorators/applyNode.js +165 -105
- package/dist/esm/decorators/applyNode.js.map +2 -2
- package/dist/esm/decorators/applyProperty.js +11 -28
- package/dist/esm/decorators/applyProperty.js.map +2 -2
- package/dist/esm/decorators/applyStyle.js +39 -15
- package/dist/esm/decorators/applyStyle.js.map +3 -3
- package/dist/esm/decorators/{changedAttributeThis.js → changedAttribute.js} +3 -3
- package/dist/esm/decorators/changedAttribute.js.map +7 -0
- package/dist/esm/decorators/elementDefine.js +35 -4
- package/dist/esm/decorators/elementDefine.js.map +2 -2
- package/dist/esm/decorators/emitCustomEvent.js +56 -42
- package/dist/esm/decorators/emitCustomEvent.js.map +2 -2
- package/dist/esm/decorators/index.js +1 -1
- package/dist/esm/decorators/index.js.map +1 -1
- package/dist/esm/decorators/publishSwcAppMessage.js +5 -5
- package/dist/esm/decorators/publishSwcAppMessage.js.map +3 -3
- package/dist/esm/decorators/query.js +96 -145
- package/dist/esm/decorators/query.js.map +3 -3
- package/dist/esm/decorators/queryAll.js +104 -131
- package/dist/esm/decorators/queryAll.js.map +3 -3
- package/dist/esm/decorators/subscribeSwcAppMessageWhileConnected.js +2 -0
- package/dist/esm/decorators/subscribeSwcAppMessageWhileConnected.js.map +2 -2
- package/dist/esm/decorators/subscribeSwcAppRouteChangeWhileConnected.js +2 -0
- package/dist/esm/decorators/subscribeSwcAppRouteChangeWhileConnected.js.map +2 -2
- package/dist/esm/elements/SwcAppMixin.js +18 -3
- package/dist/esm/elements/SwcAppMixin.js.map +2 -2
- package/dist/esm/examples/RxJSOperatorsExample.js +266 -0
- package/dist/esm/examples/RxJSOperatorsExample.js.map +7 -0
- package/dist/esm/index.js +1 -0
- package/dist/esm/index.js.map +2 -2
- package/dist/esm/router/ElementRouter.js +4 -0
- package/dist/esm/router/ElementRouter.js.map +2 -2
- package/dist/esm-bundle/dooboostore-simple-web-component.esm.js +759 -512
- package/dist/esm-bundle/dooboostore-simple-web-component.esm.js.map +4 -4
- package/dist/types/SwcAppEngine.d.ts.map +1 -1
- package/dist/types/decorators/addEventListener.d.ts +17 -14
- package/dist/types/decorators/addEventListener.d.ts.map +1 -1
- package/dist/types/decorators/applyAttribute.d.ts +35 -20
- package/dist/types/decorators/applyAttribute.d.ts.map +1 -1
- package/dist/types/decorators/applyClass.d.ts +16 -36
- package/dist/types/decorators/applyClass.d.ts.map +1 -1
- package/dist/types/decorators/applyNode.d.ts +172 -30
- package/dist/types/decorators/applyNode.d.ts.map +1 -1
- package/dist/types/decorators/applyProperty.d.ts +27 -18
- package/dist/types/decorators/applyProperty.d.ts.map +1 -1
- package/dist/types/decorators/applyStyle.d.ts +7 -7
- package/dist/types/decorators/applyStyle.d.ts.map +1 -1
- package/dist/types/decorators/{changedAttributeThis.d.ts → changedAttribute.d.ts} +2 -2
- package/dist/types/decorators/changedAttribute.d.ts.map +1 -0
- package/dist/types/decorators/elementDefine.d.ts.map +1 -1
- package/dist/types/decorators/emitCustomEvent.d.ts +3 -10
- package/dist/types/decorators/emitCustomEvent.d.ts.map +1 -1
- package/dist/types/decorators/index.d.ts +1 -1
- package/dist/types/decorators/index.d.ts.map +1 -1
- package/dist/types/decorators/publishSwcAppMessage.d.ts +1 -1
- package/dist/types/decorators/publishSwcAppMessage.d.ts.map +1 -1
- package/dist/types/decorators/query.d.ts +3 -26
- package/dist/types/decorators/query.d.ts.map +1 -1
- package/dist/types/decorators/queryAll.d.ts +3 -20
- package/dist/types/decorators/queryAll.d.ts.map +1 -1
- package/dist/types/decorators/subscribeSwcAppMessageWhileConnected.d.ts +1 -0
- package/dist/types/decorators/subscribeSwcAppMessageWhileConnected.d.ts.map +1 -1
- package/dist/types/decorators/subscribeSwcAppRouteChangeWhileConnected.d.ts +2 -0
- package/dist/types/decorators/subscribeSwcAppRouteChangeWhileConnected.d.ts.map +1 -1
- package/dist/types/elements/SwcAppMixin.d.ts +4 -4
- package/dist/types/elements/SwcAppMixin.d.ts.map +1 -1
- package/dist/types/examples/RxJSOperatorsExample.d.ts +94 -0
- package/dist/types/examples/RxJSOperatorsExample.d.ts.map +1 -0
- package/dist/types/index.d.ts +1 -0
- package/dist/types/index.d.ts.map +1 -1
- package/dist/types/router/ElementRouter.d.ts.map +1 -1
- package/dist/umd-bundle/dooboostore-simple-web-component.umd.js +759 -512
- package/dist/umd-bundle/dooboostore-simple-web-component.umd.js.map +4 -4
- package/package.json +3 -3
- package/src/SwcAppEngine.ts +3 -1
- package/src/decorators/addEventListener.ts +28 -24
- package/src/decorators/applyAttribute.ts +109 -63
- package/src/decorators/applyClass.ts +89 -15
- package/src/decorators/applyNode.ts +357 -100
- package/src/decorators/applyProperty.ts +42 -63
- package/src/decorators/applyStyle.ts +59 -11
- package/src/decorators/{changedAttributeThis.ts → changedAttribute.ts} +1 -1
- package/src/decorators/elementDefine.ts +47 -4
- package/src/decorators/emitCustomEvent.ts +44 -36
- package/src/decorators/index.ts +1 -1
- package/src/decorators/publishSwcAppMessage.ts +1 -1
- package/src/decorators/query.ts +90 -159
- package/src/decorators/queryAll.ts +92 -134
- package/src/decorators/subscribeSwcAppMessageWhileConnected.ts +1 -0
- package/src/decorators/subscribeSwcAppRouteChangeWhileConnected.ts +3 -1
- package/src/elements/SwcAppMixin.ts +43 -24
- package/src/examples/RxJSOperatorsExample.ts +279 -0
- package/src/index.ts +2 -0
- package/src/router/ElementRouter.ts +4 -0
- package/dist/cjs/decorators/changedAttributeThis.js.map +0 -7
- package/dist/esm/decorators/changedAttributeThis.js.map +0 -7
- package/dist/types/decorators/changedAttributeThis.d.ts.map +0 -1
|
@@ -2,150 +2,106 @@ import { ReflectUtils } from "@dooboostore/core";
|
|
|
2
2
|
import { getElementConfig, ensureInit } from "./elementDefine.js";
|
|
3
3
|
import { SwcUtils } from "../utils/Utils.js";
|
|
4
4
|
const QUERY_METADATA_KEY = Symbol.for("simple-web-component:query");
|
|
5
|
-
function query(selectorOrTarget,
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
5
|
+
function query(selectorOrTarget, optionsOrPropertyKey, descriptor) {
|
|
6
|
+
if (descriptor !== void 0 && (typeof optionsOrPropertyKey === "string" || typeof optionsOrPropertyKey === "symbol")) {
|
|
7
|
+
throw new Error(`@query decorator cannot be used on methods. (Method: ${String(optionsOrPropertyKey)})`);
|
|
8
|
+
}
|
|
9
|
+
if (typeof selectorOrTarget === "string") {
|
|
10
|
+
return (targetObj, propertyKey, descriptor2) => {
|
|
11
|
+
if (descriptor2 !== void 0) {
|
|
12
|
+
throw new Error(`@query decorator cannot be used on methods. (Method: ${String(propertyKey)})`);
|
|
13
|
+
}
|
|
14
|
+
const constructor = targetObj.constructor;
|
|
15
|
+
let queries = ReflectUtils.getMetadata(QUERY_METADATA_KEY, constructor);
|
|
16
|
+
if (!queries) {
|
|
17
|
+
queries = [];
|
|
18
|
+
ReflectUtils.defineMetadata(QUERY_METADATA_KEY, queries, constructor);
|
|
19
|
+
}
|
|
20
|
+
queries.push({ propertyKey, selector: selectorOrTarget, options: optionsOrPropertyKey || {} });
|
|
21
|
+
Object.defineProperty(targetObj, propertyKey, {
|
|
22
|
+
get() {
|
|
23
|
+
ensureInit(this);
|
|
24
|
+
const selector = selectorOrTarget;
|
|
25
|
+
const r = optionsOrPropertyKey?.root || "auto";
|
|
26
|
+
const applyRoot = (t) => {
|
|
27
|
+
if (!t || !(t instanceof HTMLElement))
|
|
28
|
+
return t;
|
|
29
|
+
if (r === "auto")
|
|
30
|
+
return t.shadowRoot || t;
|
|
31
|
+
if (r === "shadow")
|
|
32
|
+
return t.shadowRoot;
|
|
33
|
+
if (r === "light")
|
|
34
|
+
return t;
|
|
35
|
+
if (r === "all")
|
|
36
|
+
return t.shadowRoot || t;
|
|
24
37
|
return t;
|
|
25
|
-
|
|
26
|
-
|
|
38
|
+
};
|
|
39
|
+
const hostSet = SwcUtils.getHostSet(this);
|
|
40
|
+
if (selector === "$this")
|
|
41
|
+
return applyRoot(this);
|
|
42
|
+
if (selector === "$host")
|
|
43
|
+
return applyRoot(hostSet.$host);
|
|
44
|
+
if (selector === "$parentHost")
|
|
45
|
+
return applyRoot(hostSet.$parentHost);
|
|
46
|
+
if (selector === "$appHost")
|
|
47
|
+
return applyRoot(hostSet.$appHost);
|
|
48
|
+
if (selector === "$firstHost")
|
|
49
|
+
return applyRoot(hostSet.$firstHost);
|
|
50
|
+
if (selector === "$lastHost")
|
|
51
|
+
return applyRoot(hostSet.$lastHost);
|
|
52
|
+
if (selector === "$firstAppHost")
|
|
53
|
+
return applyRoot(hostSet.$firstAppHost);
|
|
54
|
+
if (selector === "$lastAppHost")
|
|
55
|
+
return applyRoot(hostSet.$lastAppHost);
|
|
56
|
+
const config = getElementConfig(this);
|
|
57
|
+
const win = config?.window || window;
|
|
58
|
+
if (selector === "$window")
|
|
59
|
+
return win;
|
|
60
|
+
if (selector === "$document")
|
|
61
|
+
return win.document;
|
|
27
62
|
if (r === "shadow")
|
|
28
|
-
return
|
|
63
|
+
return this.shadowRoot ? this.shadowRoot.querySelector(selector) : null;
|
|
29
64
|
if (r === "light")
|
|
30
|
-
return
|
|
31
|
-
if (r === "all")
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
};
|
|
35
|
-
const hostSet = SwcUtils.getHostSet(this);
|
|
36
|
-
if (selector === "$this")
|
|
37
|
-
return applyRoot(this);
|
|
38
|
-
if (selector === "$host")
|
|
39
|
-
return applyRoot(hostSet.$host);
|
|
40
|
-
if (selector === "$parentHost")
|
|
41
|
-
return applyRoot(hostSet.$parentHost);
|
|
42
|
-
if (selector === "$appHost")
|
|
43
|
-
return applyRoot(hostSet.$appHost);
|
|
44
|
-
if (selector === "$firstHost")
|
|
45
|
-
return applyRoot(hostSet.$firstHost);
|
|
46
|
-
if (selector === "$lastHost")
|
|
47
|
-
return applyRoot(hostSet.$lastHost);
|
|
48
|
-
if (selector === "$firstAppHost")
|
|
49
|
-
return applyRoot(hostSet.$firstAppHost);
|
|
50
|
-
if (selector === "$lastAppHost")
|
|
51
|
-
return applyRoot(hostSet.$lastAppHost);
|
|
52
|
-
const config = getElementConfig(this);
|
|
53
|
-
const win = config?.window || window;
|
|
54
|
-
if (selector === "$window")
|
|
55
|
-
return win;
|
|
56
|
-
if (selector === "$document")
|
|
57
|
-
return win.document;
|
|
58
|
-
if (r === "shadow")
|
|
59
|
-
return this.shadowRoot ? this.shadowRoot.querySelector(selector) : null;
|
|
60
|
-
if (r === "light")
|
|
61
|
-
return this.querySelector(selector);
|
|
62
|
-
if (r === "all") {
|
|
63
|
-
const shadowMatch = this.shadowRoot ? this.shadowRoot.querySelector(selector) : null;
|
|
64
|
-
return shadowMatch || this.querySelector(selector);
|
|
65
|
-
}
|
|
66
|
-
return (this.shadowRoot || this).querySelector(selector);
|
|
67
|
-
},
|
|
68
|
-
set(nv) {
|
|
69
|
-
ensureInit(this);
|
|
70
|
-
if (nv === null || nv === void 0) {
|
|
71
|
-
const selector = selectorOrTarget;
|
|
72
|
-
if (selector.startsWith("$") && selector !== "$this")
|
|
73
|
-
return;
|
|
74
|
-
const r = options.root || "auto";
|
|
75
|
-
const targets = [];
|
|
76
|
-
if (r === "shadow") {
|
|
77
|
-
if (this.shadowRoot?.querySelector(selector))
|
|
78
|
-
targets.push(this.shadowRoot.querySelector(selector));
|
|
79
|
-
} else if (r === "light") {
|
|
80
|
-
if (this.querySelector(selector))
|
|
81
|
-
targets.push(this.querySelector(selector));
|
|
82
|
-
} else if (r === "all") {
|
|
83
|
-
if (this.shadowRoot?.querySelector(selector))
|
|
84
|
-
targets.push(this.shadowRoot.querySelector(selector));
|
|
85
|
-
if (this.querySelector(selector))
|
|
86
|
-
targets.push(this.querySelector(selector));
|
|
87
|
-
} else {
|
|
88
|
-
const el = (this.shadowRoot || this).querySelector(selector);
|
|
89
|
-
if (el)
|
|
90
|
-
targets.push(el);
|
|
65
|
+
return this.querySelector(selector);
|
|
66
|
+
if (r === "all") {
|
|
67
|
+
const shadowMatch = this.shadowRoot ? this.shadowRoot.querySelector(selector) : null;
|
|
68
|
+
return shadowMatch || this.querySelector(selector);
|
|
91
69
|
}
|
|
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
|
-
return query("$document", targetOrOptions);
|
|
126
|
-
} else {
|
|
127
|
-
return query("$document", {});
|
|
128
|
-
}
|
|
129
|
-
}
|
|
130
|
-
function queryHost(targetOrOptions, propertyKey) {
|
|
131
|
-
if (propertyKey !== void 0 && (typeof propertyKey === "string" || typeof propertyKey === "symbol")) {
|
|
132
|
-
return query("$host", {})(targetOrOptions, propertyKey);
|
|
133
|
-
}
|
|
134
|
-
if (typeof targetOrOptions === "object" && targetOrOptions !== null) {
|
|
135
|
-
return query("$host", targetOrOptions);
|
|
136
|
-
} else {
|
|
137
|
-
return query("$host", {});
|
|
138
|
-
}
|
|
139
|
-
}
|
|
140
|
-
function queryAppHost(targetOrOptions, propertyKey) {
|
|
141
|
-
if (propertyKey !== void 0 && (typeof propertyKey === "string" || typeof propertyKey === "symbol")) {
|
|
142
|
-
return query("$appHost", {})(targetOrOptions, propertyKey);
|
|
143
|
-
}
|
|
144
|
-
if (typeof targetOrOptions === "object" && targetOrOptions !== null) {
|
|
145
|
-
return query("$appHost", targetOrOptions);
|
|
146
|
-
} else {
|
|
147
|
-
return query("$appHost", {});
|
|
70
|
+
return (this.shadowRoot || this).querySelector(selector);
|
|
71
|
+
},
|
|
72
|
+
set(nv) {
|
|
73
|
+
ensureInit(this);
|
|
74
|
+
if (nv === null || nv === void 0) {
|
|
75
|
+
const selector = selectorOrTarget;
|
|
76
|
+
if (selector.startsWith("$") && selector !== "$this")
|
|
77
|
+
return;
|
|
78
|
+
const r = optionsOrPropertyKey?.root || "auto";
|
|
79
|
+
const targets = [];
|
|
80
|
+
if (r === "shadow") {
|
|
81
|
+
if (this.shadowRoot?.querySelector(selector))
|
|
82
|
+
targets.push(this.shadowRoot.querySelector(selector));
|
|
83
|
+
} else if (r === "light") {
|
|
84
|
+
if (this.querySelector(selector))
|
|
85
|
+
targets.push(this.querySelector(selector));
|
|
86
|
+
} else if (r === "all") {
|
|
87
|
+
if (this.shadowRoot?.querySelector(selector))
|
|
88
|
+
targets.push(this.shadowRoot.querySelector(selector));
|
|
89
|
+
if (this.querySelector(selector))
|
|
90
|
+
targets.push(this.querySelector(selector));
|
|
91
|
+
} else {
|
|
92
|
+
const el = (this.shadowRoot || this).querySelector(selector);
|
|
93
|
+
if (el)
|
|
94
|
+
targets.push(el);
|
|
95
|
+
}
|
|
96
|
+
targets.forEach((t) => t.remove());
|
|
97
|
+
}
|
|
98
|
+
},
|
|
99
|
+
enumerable: true,
|
|
100
|
+
configurable: true
|
|
101
|
+
});
|
|
102
|
+
};
|
|
148
103
|
}
|
|
104
|
+
return query("$this", selectorOrTarget);
|
|
149
105
|
}
|
|
150
106
|
const getQueryMetadata = (target) => {
|
|
151
107
|
const constructor = target instanceof Function ? target : target.constructor;
|
|
@@ -154,11 +110,6 @@ const getQueryMetadata = (target) => {
|
|
|
154
110
|
export {
|
|
155
111
|
QUERY_METADATA_KEY,
|
|
156
112
|
getQueryMetadata,
|
|
157
|
-
query
|
|
158
|
-
queryAppHost,
|
|
159
|
-
queryDocument,
|
|
160
|
-
queryHost,
|
|
161
|
-
queryThis,
|
|
162
|
-
queryWindow
|
|
113
|
+
query
|
|
163
114
|
};
|
|
164
115
|
//# sourceMappingURL=query.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/decorators/query.ts"],
|
|
4
|
-
"sourcesContent": ["import { ReflectUtils } from '@dooboostore/core';\nimport { getElementConfig, ensureInit } from './elementDefine';\nimport { SwcUtils } from '../utils/Utils';\nimport { SpecialSelector, SwcQueryOptions, HelperHostSet } from '../types';\n\nexport interface QueryMetadata {\n propertyKey: string | symbol;\n selector: string;\n options: SwcQueryOptions ;\n}\n\nexport const QUERY_METADATA_KEY = Symbol.for('simple-web-component:query');\n\nexport function query(target:
|
|
5
|
-
"mappings": "AAAA,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB,kBAAkB;AAC7C,SAAS,gBAAgB;AASlB,MAAM,qBAAqB,OAAO,IAAI,4BAA4B;
|
|
6
|
-
"names": []
|
|
4
|
+
"sourcesContent": ["import { ReflectUtils } from '@dooboostore/core';\nimport { getElementConfig, ensureInit } from './elementDefine';\nimport { SwcUtils } from '../utils/Utils';\nimport { SpecialSelector, SwcQueryOptions, HelperHostSet } from '../types';\n\nexport interface QueryMetadata {\n propertyKey: string | symbol;\n selector: string;\n options: SwcQueryOptions ;\n}\n\nexport const QUERY_METADATA_KEY = Symbol.for('simple-web-component:query');\n\nexport function query(target: Object, propertyKey: string | symbol, descriptor?: PropertyDescriptor): PropertyDescriptor | void;\nexport function query(selector: string, options?: SwcQueryOptions): PropertyDecorator;\nexport function query(options?: SwcQueryOptions): PropertyDecorator;\n/**\n * @query decorator to inject a single element into a class property.\n */\nexport function query(selectorOrTarget?: string | Object, optionsOrPropertyKey?: SwcQueryOptions | string | symbol, descriptor?: PropertyDescriptor): any {\n // Bare decorator: @query\n if (descriptor !== undefined && (typeof optionsOrPropertyKey === 'string' || typeof optionsOrPropertyKey === 'symbol')) {\n throw new Error(`@query decorator cannot be used on methods. (Method: ${String(optionsOrPropertyKey)})`);\n }\n // With selector\n if (typeof selectorOrTarget === 'string') {\n return (targetObj: Object, propertyKey: string | symbol, descriptor?: never): void => {\n if (descriptor !== undefined) {\n throw new Error(`@query decorator cannot be used on methods. (Method: ${String(propertyKey)})`);\n }\n\n const constructor = targetObj.constructor;\n let queries = ReflectUtils.getMetadata<QueryMetadata[]>(QUERY_METADATA_KEY, constructor);\n if (!queries) {\n queries = [];\n ReflectUtils.defineMetadata(QUERY_METADATA_KEY, queries, constructor);\n }\n queries.push({ propertyKey, selector: selectorOrTarget, options: optionsOrPropertyKey as SwcQueryOptions || {} });\n\n Object.defineProperty(targetObj, propertyKey, {\n get(this: HTMLElement) {\n ensureInit(this);\n const selector = selectorOrTarget;\n\n const r = (optionsOrPropertyKey as SwcQueryOptions)?.root || 'auto';\n const applyRoot = (t: any) => {\n if (!t || !(t instanceof HTMLElement)) return t;\n if (r === 'auto') return t.shadowRoot || t;\n if (r === 'shadow') return t.shadowRoot;\n if (r === 'light') return t;\n if (r === 'all') return t.shadowRoot || t; \n return t;\n };\n\n // --- Special Selectors: HostSet ---\n const hostSet = SwcUtils.getHostSet(this);\n if (selector === '$this') return applyRoot(this);\n if (selector === '$host') return applyRoot(hostSet.$host);\n if (selector === '$parentHost') return applyRoot(hostSet.$parentHost);\n if (selector === '$appHost') return applyRoot(hostSet.$appHost);\n if (selector === '$firstHost') return applyRoot(hostSet.$firstHost);\n if (selector === '$lastHost') return applyRoot(hostSet.$lastHost);\n if (selector === '$firstAppHost') return applyRoot(hostSet.$firstAppHost);\n if (selector === '$lastAppHost') return applyRoot(hostSet.$lastAppHost);\n\n // --- Special Selectors: Env ---\n const config = getElementConfig(this);\n const win = config?.window || window;\n if (selector === '$window') return win;\n if (selector === '$document') return win.document;\n\n // --- Standard Selectors ---\n if (r === 'shadow') return this.shadowRoot ? this.shadowRoot.querySelector(selector) : null;\n if (r === 'light') return this.querySelector(selector);\n if (r === 'all') {\n const shadowMatch = this.shadowRoot ? this.shadowRoot.querySelector(selector) : null;\n return shadowMatch || this.querySelector(selector);\n }\n return (this.shadowRoot || this).querySelector(selector);\n },\n set(this: HTMLElement, nv: any) {\n ensureInit(this);\n if (nv === null || nv === undefined) {\n const selector = selectorOrTarget;\n if (selector.startsWith('$') && selector !== '$this') return;\n\n const r = (optionsOrPropertyKey as SwcQueryOptions)?.root || 'auto';\n const targets: Element[] = [];\n\n if (r === 'shadow') {\n if (this.shadowRoot?.querySelector(selector)) targets.push(this.shadowRoot.querySelector(selector)!);\n } else if (r === 'light') {\n if (this.querySelector(selector)) targets.push(this.querySelector(selector)!);\n } else if (r === 'all') {\n if (this.shadowRoot?.querySelector(selector)) targets.push(this.shadowRoot.querySelector(selector)!);\n if (this.querySelector(selector)) targets.push(this.querySelector(selector)!);\n } else {\n const el = (this.shadowRoot || this).querySelector(selector);\n if (el) targets.push(el);\n }\n\n targets.forEach(t => t.remove());\n }\n },\n enumerable: true,\n configurable: true\n });\n };\n }\n // Without selector (defaults to $this)\n return query('$this', selectorOrTarget as SwcQueryOptions);\n}\n\nexport const getQueryMetadata = (target: any): QueryMetadata[] => {\n const constructor = target instanceof Function ? target : target.constructor;\n return ReflectUtils.getMetadata(QUERY_METADATA_KEY, constructor) ?? [];\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["descriptor"]
|
|
7
7
|
}
|
|
@@ -2,139 +2,115 @@ import { ReflectUtils } from "@dooboostore/core";
|
|
|
2
2
|
import { getElementConfig, ensureInit } from "./elementDefine.js";
|
|
3
3
|
import { SwcUtils } from "../utils/Utils.js";
|
|
4
4
|
const QUERY_ALL_METADATA_KEY = Symbol.for("simple-web-component:query-all");
|
|
5
|
-
function queryAll(selectorOrTarget,
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
return [];
|
|
25
|
-
const items = Array.isArray(t) ? t : [t];
|
|
26
|
-
const results = [];
|
|
27
|
-
items.forEach((it) => {
|
|
28
|
-
if (!(it instanceof HTMLElement)) {
|
|
29
|
-
results.push(it);
|
|
30
|
-
return;
|
|
31
|
-
}
|
|
32
|
-
if (r === "auto")
|
|
33
|
-
results.push(it.shadowRoot || it);
|
|
34
|
-
else {
|
|
35
|
-
if (r === "light" || r === "all")
|
|
36
|
-
results.push(it);
|
|
37
|
-
if ((r === "shadow" || r === "all") && it.shadowRoot)
|
|
38
|
-
results.push(it.shadowRoot);
|
|
39
|
-
}
|
|
40
|
-
});
|
|
41
|
-
return results;
|
|
42
|
-
};
|
|
43
|
-
const hostSet = SwcUtils.getHostSet(this);
|
|
44
|
-
if (selector === "$hosts")
|
|
45
|
-
return applyRoot(hostSet.$hosts);
|
|
46
|
-
if (selector === "$appHosts")
|
|
47
|
-
return applyRoot(hostSet.$appHosts);
|
|
48
|
-
if (selector === "$host")
|
|
49
|
-
return applyRoot(hostSet.$host);
|
|
50
|
-
if (selector === "$parentHost")
|
|
51
|
-
return applyRoot(hostSet.$parentHost);
|
|
52
|
-
if (selector === "$appHost")
|
|
53
|
-
return applyRoot(hostSet.$appHost);
|
|
54
|
-
if (selector === "$firstHost")
|
|
55
|
-
return applyRoot(hostSet.$firstHost);
|
|
56
|
-
if (selector === "$lastHost")
|
|
57
|
-
return applyRoot(hostSet.$lastHost);
|
|
58
|
-
if (selector === "$firstAppHost")
|
|
59
|
-
return applyRoot(hostSet.$firstAppHost);
|
|
60
|
-
if (selector === "$lastAppHost")
|
|
61
|
-
return applyRoot(hostSet.$lastAppHost);
|
|
62
|
-
const config = getElementConfig(this);
|
|
63
|
-
const win = config?.window || window;
|
|
64
|
-
if (selector === "$window")
|
|
65
|
-
return [win];
|
|
66
|
-
if (selector === "$document")
|
|
67
|
-
return [win.document];
|
|
68
|
-
if (selector === "$this")
|
|
69
|
-
return applyRoot(this);
|
|
70
|
-
if (r === "shadow")
|
|
71
|
-
return this.shadowRoot ? Array.from(this.shadowRoot.querySelectorAll(selector)) : [];
|
|
72
|
-
if (r === "light")
|
|
73
|
-
return Array.from(this.querySelectorAll(selector));
|
|
74
|
-
if (r === "all") {
|
|
75
|
-
const sNodes = this.shadowRoot ? Array.from(this.shadowRoot.querySelectorAll(selector)) : [];
|
|
76
|
-
const lNodes = Array.from(this.querySelectorAll(selector));
|
|
77
|
-
return [...sNodes, ...lNodes];
|
|
78
|
-
}
|
|
79
|
-
const root = this.shadowRoot || this;
|
|
80
|
-
return Array.from(root.querySelectorAll(selector));
|
|
81
|
-
},
|
|
82
|
-
set(nv) {
|
|
83
|
-
ensureInit(this);
|
|
84
|
-
if (nv === null || nv === void 0 || Array.isArray(nv) && nv.length === 0) {
|
|
5
|
+
function queryAll(selectorOrTarget, optionsOrPropertyKey, descriptor) {
|
|
6
|
+
if (descriptor !== void 0 && (typeof optionsOrPropertyKey === "string" || typeof optionsOrPropertyKey === "symbol")) {
|
|
7
|
+
throw new Error(`@queryAll decorator cannot be used on methods. (Method: ${String(optionsOrPropertyKey)})`);
|
|
8
|
+
}
|
|
9
|
+
if (typeof selectorOrTarget === "string") {
|
|
10
|
+
return (targetObj, propertyKey, descriptor2) => {
|
|
11
|
+
if (descriptor2 !== void 0) {
|
|
12
|
+
throw new Error(`@queryAll decorator cannot be used on methods. (Method: ${String(propertyKey)})`);
|
|
13
|
+
}
|
|
14
|
+
const constructor = targetObj.constructor;
|
|
15
|
+
let queries = ReflectUtils.getMetadata(QUERY_ALL_METADATA_KEY, constructor);
|
|
16
|
+
if (!queries) {
|
|
17
|
+
queries = [];
|
|
18
|
+
ReflectUtils.defineMetadata(QUERY_ALL_METADATA_KEY, queries, constructor);
|
|
19
|
+
}
|
|
20
|
+
queries.push({ propertyKey, selector: selectorOrTarget, options: optionsOrPropertyKey || {} });
|
|
21
|
+
Object.defineProperty(targetObj, propertyKey, {
|
|
22
|
+
get() {
|
|
23
|
+
ensureInit(this);
|
|
85
24
|
const selector = selectorOrTarget;
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
25
|
+
const r = optionsOrPropertyKey?.root || "auto";
|
|
26
|
+
const applyRoot = (t) => {
|
|
27
|
+
if (!t)
|
|
28
|
+
return [];
|
|
29
|
+
const items = Array.isArray(t) ? t : [t];
|
|
30
|
+
const results = [];
|
|
31
|
+
items.forEach((it) => {
|
|
32
|
+
if (!(it instanceof HTMLElement)) {
|
|
33
|
+
results.push(it);
|
|
34
|
+
return;
|
|
35
|
+
}
|
|
36
|
+
if (r === "auto")
|
|
37
|
+
results.push(it.shadowRoot || it);
|
|
38
|
+
else {
|
|
39
|
+
if (r === "light" || r === "all")
|
|
40
|
+
results.push(it);
|
|
41
|
+
if ((r === "shadow" || r === "all") && it.shadowRoot)
|
|
42
|
+
results.push(it.shadowRoot);
|
|
43
|
+
}
|
|
44
|
+
});
|
|
45
|
+
return results;
|
|
46
|
+
};
|
|
47
|
+
const hostSet = SwcUtils.getHostSet(this);
|
|
48
|
+
if (selector === "$hosts")
|
|
49
|
+
return applyRoot(hostSet.$hosts);
|
|
50
|
+
if (selector === "$appHosts")
|
|
51
|
+
return applyRoot(hostSet.$appHosts);
|
|
52
|
+
if (selector === "$host")
|
|
53
|
+
return applyRoot(hostSet.$host);
|
|
54
|
+
if (selector === "$parentHost")
|
|
55
|
+
return applyRoot(hostSet.$parentHost);
|
|
56
|
+
if (selector === "$appHost")
|
|
57
|
+
return applyRoot(hostSet.$appHost);
|
|
58
|
+
if (selector === "$firstHost")
|
|
59
|
+
return applyRoot(hostSet.$firstHost);
|
|
60
|
+
if (selector === "$lastHost")
|
|
61
|
+
return applyRoot(hostSet.$lastHost);
|
|
62
|
+
if (selector === "$firstAppHost")
|
|
63
|
+
return applyRoot(hostSet.$firstAppHost);
|
|
64
|
+
if (selector === "$lastAppHost")
|
|
65
|
+
return applyRoot(hostSet.$lastAppHost);
|
|
66
|
+
const config = getElementConfig(this);
|
|
67
|
+
const win = config?.window || window;
|
|
68
|
+
if (selector === "$window")
|
|
69
|
+
return [win];
|
|
70
|
+
if (selector === "$document")
|
|
71
|
+
return [win.document];
|
|
72
|
+
if (selector === "$this")
|
|
73
|
+
return applyRoot(this);
|
|
90
74
|
if (r === "shadow")
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
75
|
+
return this.shadowRoot ? Array.from(this.shadowRoot.querySelectorAll(selector)) : [];
|
|
76
|
+
if (r === "light")
|
|
77
|
+
return Array.from(this.querySelectorAll(selector));
|
|
78
|
+
if (r === "all") {
|
|
95
79
|
const sNodes = this.shadowRoot ? Array.from(this.shadowRoot.querySelectorAll(selector)) : [];
|
|
96
80
|
const lNodes = Array.from(this.querySelectorAll(selector));
|
|
97
|
-
|
|
98
|
-
} else {
|
|
99
|
-
targets = Array.from((this.shadowRoot || this).querySelectorAll(selector));
|
|
81
|
+
return [...sNodes, ...lNodes];
|
|
100
82
|
}
|
|
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
|
-
if (propertyKey !== void 0 && (typeof propertyKey === "string" || typeof propertyKey === "symbol")) {
|
|
131
|
-
return queryAll("$appHost", {})(targetOrOptions, propertyKey);
|
|
132
|
-
}
|
|
133
|
-
if (typeof targetOrOptions === "object" && targetOrOptions !== null) {
|
|
134
|
-
return queryAll("$appHost", targetOrOptions);
|
|
135
|
-
} else {
|
|
136
|
-
return queryAll("$appHost", {});
|
|
83
|
+
const root = this.shadowRoot || this;
|
|
84
|
+
return Array.from(root.querySelectorAll(selector));
|
|
85
|
+
},
|
|
86
|
+
set(nv) {
|
|
87
|
+
ensureInit(this);
|
|
88
|
+
if (nv === null || nv === void 0 || Array.isArray(nv) && nv.length === 0) {
|
|
89
|
+
const selector = selectorOrTarget;
|
|
90
|
+
if (selector.startsWith("$") && selector !== "$this")
|
|
91
|
+
return;
|
|
92
|
+
const r = optionsOrPropertyKey?.root || "auto";
|
|
93
|
+
let targets = [];
|
|
94
|
+
if (r === "shadow")
|
|
95
|
+
targets = this.shadowRoot ? Array.from(this.shadowRoot.querySelectorAll(selector)) : [];
|
|
96
|
+
else if (r === "light")
|
|
97
|
+
targets = Array.from(this.querySelectorAll(selector));
|
|
98
|
+
else if (r === "all") {
|
|
99
|
+
const sNodes = this.shadowRoot ? Array.from(this.shadowRoot.querySelectorAll(selector)) : [];
|
|
100
|
+
const lNodes = Array.from(this.querySelectorAll(selector));
|
|
101
|
+
targets = [...sNodes, ...lNodes];
|
|
102
|
+
} else {
|
|
103
|
+
targets = Array.from((this.shadowRoot || this).querySelectorAll(selector));
|
|
104
|
+
}
|
|
105
|
+
targets.forEach((t) => t.remove());
|
|
106
|
+
}
|
|
107
|
+
},
|
|
108
|
+
enumerable: true,
|
|
109
|
+
configurable: true
|
|
110
|
+
});
|
|
111
|
+
};
|
|
137
112
|
}
|
|
113
|
+
return queryAll("$this", selectorOrTarget);
|
|
138
114
|
}
|
|
139
115
|
const getQueryAllMetadata = (target) => {
|
|
140
116
|
const constructor = target instanceof Function ? target : target.constructor;
|
|
@@ -142,10 +118,7 @@ const getQueryAllMetadata = (target) => {
|
|
|
142
118
|
};
|
|
143
119
|
export {
|
|
144
120
|
QUERY_ALL_METADATA_KEY,
|
|
145
|
-
allAppHost,
|
|
146
|
-
allParentHost,
|
|
147
121
|
getQueryAllMetadata,
|
|
148
|
-
queryAll
|
|
149
|
-
queryAllThis
|
|
122
|
+
queryAll
|
|
150
123
|
};
|
|
151
124
|
//# sourceMappingURL=queryAll.js.map
|