@dooboostore/simple-web-component 1.0.33 → 1.0.35
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 +23 -30
- package/dist/cjs/decorators/addEventListener.js.map +1 -1
- package/dist/cjs/decorators/applyAttribute.js +67 -57
- package/dist/cjs/decorators/applyAttribute.js.map +2 -2
- package/dist/cjs/decorators/applyClass.js +80 -70
- package/dist/cjs/decorators/applyClass.js.map +2 -2
- package/dist/cjs/decorators/applyNode.js +5 -8
- package/dist/cjs/decorators/applyNode.js.map +2 -2
- package/dist/cjs/decorators/applyStyle.js +66 -56
- package/dist/cjs/decorators/applyStyle.js.map +2 -2
- package/dist/cjs/decorators/attribute.js +35 -29
- package/dist/cjs/decorators/attribute.js.map +2 -2
- package/dist/cjs/decorators/changedAttributeHost.js +32 -12
- package/dist/cjs/decorators/changedAttributeHost.js.map +2 -2
- package/dist/cjs/decorators/elementDefine.js +238 -180
- package/dist/cjs/decorators/elementDefine.js.map +2 -2
- package/dist/cjs/decorators/emitCustomEvent.js +67 -48
- package/dist/cjs/decorators/emitCustomEvent.js.map +2 -2
- package/dist/cjs/decorators/lifecycles.js +15 -17
- package/dist/cjs/decorators/lifecycles.js.map +2 -2
- package/dist/cjs/decorators/setProperty.js +50 -39
- package/dist/cjs/decorators/setProperty.js.map +2 -2
- package/dist/cjs/decorators/subscribeSwcAppMessageWhileConnected.js.map +1 -1
- package/dist/cjs/decorators/subscribeSwcAppRouteChangeWhileConnected.js +2 -2
- package/dist/cjs/decorators/subscribeSwcAppRouteChangeWhileConnected.js.map +2 -2
- package/dist/cjs/elements/SwcAppEngine.js +14 -8
- package/dist/cjs/elements/SwcAppEngine.js.map +3 -3
- package/dist/cjs/elements/SwcAppMixin.js +154 -81
- package/dist/cjs/elements/SwcAppMixin.js.map +2 -2
- package/dist/cjs/elements/SwcAsync.js +28 -18
- package/dist/cjs/elements/SwcAsync.js.map +2 -2
- package/dist/cjs/elements/SwcChoose.js +68 -45
- package/dist/cjs/elements/SwcChoose.js.map +2 -2
- package/dist/cjs/elements/SwcIf.js +52 -30
- package/dist/cjs/elements/SwcIf.js.map +2 -2
- package/dist/cjs/elements/SwcLoop.js +109 -35
- package/dist/cjs/elements/SwcLoop.js.map +2 -2
- package/dist/cjs/elements/register.js +263 -131
- package/dist/cjs/elements/register.js.map +2 -2
- package/dist/cjs/router/ElementRouter.js +4 -2
- package/dist/cjs/router/ElementRouter.js.map +1 -1
- package/dist/cjs/types.js.map +1 -1
- package/dist/cjs/utils/Utils.js +25 -7
- package/dist/cjs/utils/Utils.js.map +2 -2
- package/dist/esm/decorators/addEventListener.js.map +1 -1
- package/dist/esm/decorators/applyAttribute.js +67 -57
- package/dist/esm/decorators/applyAttribute.js.map +2 -2
- package/dist/esm/decorators/applyClass.js +80 -70
- package/dist/esm/decorators/applyClass.js.map +2 -2
- package/dist/esm/decorators/applyNode.js +5 -8
- package/dist/esm/decorators/applyNode.js.map +2 -2
- package/dist/esm/decorators/applyStyle.js +66 -56
- package/dist/esm/decorators/applyStyle.js.map +2 -2
- package/dist/esm/decorators/attribute.js +35 -29
- package/dist/esm/decorators/attribute.js.map +2 -2
- package/dist/esm/decorators/changedAttributeHost.js +32 -12
- package/dist/esm/decorators/changedAttributeHost.js.map +2 -2
- package/dist/esm/decorators/elementDefine.js +240 -182
- package/dist/esm/decorators/elementDefine.js.map +2 -2
- package/dist/esm/decorators/emitCustomEvent.js +67 -48
- package/dist/esm/decorators/emitCustomEvent.js.map +2 -2
- package/dist/esm/decorators/lifecycles.js +15 -17
- package/dist/esm/decorators/lifecycles.js.map +2 -2
- package/dist/esm/decorators/setProperty.js +50 -39
- package/dist/esm/decorators/setProperty.js.map +2 -2
- package/dist/esm/decorators/subscribeSwcAppMessageWhileConnected.js.map +1 -1
- package/dist/esm/decorators/subscribeSwcAppRouteChangeWhileConnected.js +2 -2
- package/dist/esm/decorators/subscribeSwcAppRouteChangeWhileConnected.js.map +2 -2
- package/dist/esm/elements/SwcAppEngine.js +14 -7
- package/dist/esm/elements/SwcAppEngine.js.map +2 -2
- package/dist/esm/elements/SwcAppMixin.js +156 -82
- package/dist/esm/elements/SwcAppMixin.js.map +2 -2
- package/dist/esm/elements/SwcAsync.js +28 -18
- package/dist/esm/elements/SwcAsync.js.map +2 -2
- package/dist/esm/elements/SwcChoose.js +69 -46
- package/dist/esm/elements/SwcChoose.js.map +2 -2
- package/dist/esm/elements/SwcIf.js +53 -31
- package/dist/esm/elements/SwcIf.js.map +2 -2
- package/dist/esm/elements/SwcLoop.js +110 -36
- package/dist/esm/elements/SwcLoop.js.map +2 -2
- package/dist/esm/elements/register.js +264 -132
- package/dist/esm/elements/register.js.map +2 -2
- package/dist/esm/router/ElementRouter.js +5 -2
- package/dist/esm/router/ElementRouter.js.map +1 -1
- package/dist/esm/types.js.map +1 -1
- package/dist/esm/utils/Utils.js +25 -7
- package/dist/esm/utils/Utils.js.map +2 -2
- package/dist/esm-bundle/dooboostore-simple-web-component.esm.js +728 -595
- package/dist/esm-bundle/dooboostore-simple-web-component.esm.js.map +4 -4
- package/dist/types/decorators/addEventListener.d.ts +4 -1
- package/dist/types/decorators/addEventListener.d.ts.map +1 -1
- package/dist/types/decorators/applyAttribute.d.ts +5 -1
- package/dist/types/decorators/applyAttribute.d.ts.map +1 -1
- package/dist/types/decorators/applyClass.d.ts +4 -0
- package/dist/types/decorators/applyClass.d.ts.map +1 -1
- package/dist/types/decorators/applyNode.d.ts +5 -1
- package/dist/types/decorators/applyNode.d.ts.map +1 -1
- package/dist/types/decorators/applyStyle.d.ts +5 -1
- package/dist/types/decorators/applyStyle.d.ts.map +1 -1
- package/dist/types/decorators/attribute.d.ts +5 -0
- package/dist/types/decorators/attribute.d.ts.map +1 -1
- package/dist/types/decorators/changedAttributeHost.d.ts +14 -3
- package/dist/types/decorators/changedAttributeHost.d.ts.map +1 -1
- package/dist/types/decorators/elementDefine.d.ts +1 -1
- package/dist/types/decorators/elementDefine.d.ts.map +1 -1
- package/dist/types/decorators/emitCustomEvent.d.ts +15 -7
- package/dist/types/decorators/emitCustomEvent.d.ts.map +1 -1
- package/dist/types/decorators/lifecycles.d.ts +10 -7
- package/dist/types/decorators/lifecycles.d.ts.map +1 -1
- package/dist/types/decorators/setProperty.d.ts +5 -1
- package/dist/types/decorators/setProperty.d.ts.map +1 -1
- package/dist/types/decorators/subscribeSwcAppMessageWhileConnected.d.ts +2 -2
- package/dist/types/decorators/subscribeSwcAppMessageWhileConnected.d.ts.map +1 -1
- package/dist/types/decorators/subscribeSwcAppRouteChangeWhileConnected.d.ts +5 -6
- package/dist/types/decorators/subscribeSwcAppRouteChangeWhileConnected.d.ts.map +1 -1
- package/dist/types/elements/SwcAppEngine.d.ts +9 -3
- package/dist/types/elements/SwcAppEngine.d.ts.map +1 -1
- package/dist/types/elements/SwcAppMixin.d.ts +12 -7
- package/dist/types/elements/SwcAppMixin.d.ts.map +1 -1
- package/dist/types/elements/register.d.ts.map +1 -1
- package/dist/types/types.d.ts +1 -0
- package/dist/types/types.d.ts.map +1 -1
- package/dist/types/utils/Utils.d.ts +4 -1
- package/dist/types/utils/Utils.d.ts.map +1 -1
- package/dist/umd-bundle/dooboostore-simple-web-component.umd.js +728 -595
- package/dist/umd-bundle/dooboostore-simple-web-component.umd.js.map +4 -4
- package/package.json +5 -5
- package/src/decorators/addEventListener.ts +1 -1
- package/src/decorators/applyAttribute.ts +74 -61
- package/src/decorators/applyClass.ts +91 -77
- package/src/decorators/applyNode.ts +16 -13
- package/src/decorators/applyStyle.ts +75 -61
- package/src/decorators/attribute.ts +55 -43
- package/src/decorators/changedAttributeHost.ts +49 -15
- package/src/decorators/elementDefine.ts +401 -340
- package/src/decorators/emitCustomEvent.ts +92 -62
- package/src/decorators/lifecycles.ts +11 -10
- package/src/decorators/setProperty.ts +58 -44
- package/src/decorators/subscribeSwcAppMessageWhileConnected.ts +2 -2
- package/src/decorators/subscribeSwcAppRouteChangeWhileConnected.ts +11 -11
- package/src/elements/SwcAppEngine.ts +19 -13
- package/src/elements/SwcAppMixin.ts +214 -102
- package/src/elements/SwcAsync.ts +28 -17
- package/src/elements/SwcChoose.ts +94 -36
- package/src/elements/SwcIf.ts +59 -22
- package/src/elements/SwcLoop.ts +140 -27
- package/src/elements/register.ts +319 -100
- package/src/types.ts +1 -0
- package/src/utils/Utils.ts +38 -10
- package/tsconfig.json +2 -2
|
@@ -133,22 +133,38 @@ const registerAllElements = (w) => {
|
|
|
133
133
|
(0, import_decorators.elementDefine)("swc-app", { window: w })
|
|
134
134
|
], SwcApp);
|
|
135
135
|
let SwcIf = class SwcIf extends HTMLTemplateElement {
|
|
136
|
-
constructor() {
|
|
137
|
-
super(...arguments);
|
|
138
|
-
this._nodes = [];
|
|
139
|
-
}
|
|
140
136
|
get value() {
|
|
141
137
|
return this._value;
|
|
142
138
|
}
|
|
143
139
|
set value(nv) {
|
|
144
140
|
this.refresh(nv);
|
|
145
141
|
}
|
|
142
|
+
constructor() {
|
|
143
|
+
super();
|
|
144
|
+
this._nodes = [];
|
|
145
|
+
}
|
|
146
|
+
setValue(value, o, n) {
|
|
147
|
+
this._value = value;
|
|
148
|
+
this.refresh(this._value);
|
|
149
|
+
}
|
|
150
|
+
// @changedAttributeHost('replace-wrap')
|
|
151
|
+
// private setReplaceWrap(replaceWrapAttr?: string | null) {
|
|
152
|
+
// this.refresh();
|
|
153
|
+
// }
|
|
146
154
|
replaceExpressions(html, groupArgs, context, wrap) {
|
|
147
|
-
|
|
155
|
+
let config = void 0;
|
|
156
|
+
if (wrap) {
|
|
157
|
+
config = {
|
|
158
|
+
expression: {
|
|
159
|
+
replace: { start: `${wrap.start}`, end: `${wrap.end}` },
|
|
160
|
+
callReturn: { start: `${wrap.start}=`, end: `${wrap.end}` },
|
|
161
|
+
call: { start: `${wrap.start}@`, end: `${wrap.end}` }
|
|
162
|
+
}
|
|
163
|
+
};
|
|
164
|
+
}
|
|
148
165
|
const ae = new import_core.ActionExpression(html, config);
|
|
149
|
-
const filterOptions = wrap ? { type: "replace", wrap } : "replace";
|
|
150
166
|
const win = this.ownerDocument?.defaultView || window;
|
|
151
|
-
for (const expr of ae.getExpressions(
|
|
167
|
+
for (const expr of ae.getExpressions("replace")) {
|
|
152
168
|
try {
|
|
153
169
|
const value = import_core.FunctionUtils.executeReturn({
|
|
154
170
|
script: import_core_web.ConvertUtils.decodeHtmlEntity(expr.script, win.document),
|
|
@@ -162,30 +178,38 @@ const registerAllElements = (w) => {
|
|
|
162
178
|
}
|
|
163
179
|
return ae.getUnprocessedTemplate();
|
|
164
180
|
}
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
}
|
|
171
|
-
refresh(value = this._value) {
|
|
181
|
+
refresh(value) {
|
|
182
|
+
const targetValue = value !== void 0 ? value : (0, import_decorators.getAttributeValue)(this, "value") ?? this._value;
|
|
183
|
+
if (this.hasAttribute("skip-if-same") && this._value === targetValue && this._nodes.length > 0) {
|
|
184
|
+
return;
|
|
185
|
+
}
|
|
172
186
|
this.cleanup();
|
|
187
|
+
this._value = targetValue;
|
|
173
188
|
const portal = this.parentElement;
|
|
174
|
-
if (!portal || !
|
|
189
|
+
if (!portal || !this._value)
|
|
175
190
|
return;
|
|
176
191
|
const win = this.ownerDocument?.defaultView || window;
|
|
177
192
|
const helperSet = import_Utils.SwcUtils.getHelperAndHostSet(win, this);
|
|
178
193
|
let htmlString = this.innerHTML;
|
|
179
|
-
const groupArgs = { ...helperSet, $value:
|
|
180
|
-
htmlString = this.replaceExpressions(htmlString, groupArgs, this, this.
|
|
194
|
+
const groupArgs = { ...helperSet, $value: this._value, $templateHost: this };
|
|
195
|
+
htmlString = this.replaceExpressions(htmlString, groupArgs, this, { start: this._replaceWrapStart ?? "{#{", end: this._replaceWrapEnd ?? "}#}" });
|
|
181
196
|
const result = this.ownerDocument?.createElement("template") || document.createElement("template");
|
|
182
197
|
result.innerHTML = htmlString;
|
|
183
198
|
const processedFragment = result.content;
|
|
184
199
|
this._nodes = Array.from(processedFragment.childNodes);
|
|
200
|
+
this._nodes.forEach((node) => {
|
|
201
|
+
if (node instanceof HTMLElement)
|
|
202
|
+
node.__swc_template_host = this;
|
|
203
|
+
});
|
|
185
204
|
portal.insertBefore(processedFragment, this.nextSibling);
|
|
186
205
|
}
|
|
187
206
|
cleanup() {
|
|
188
|
-
this._nodes.forEach((n) =>
|
|
207
|
+
this._nodes.forEach((n) => {
|
|
208
|
+
const realNode = n.__upgraded_instance || n;
|
|
209
|
+
if (realNode.parentElement) {
|
|
210
|
+
realNode.parentElement.removeChild(realNode);
|
|
211
|
+
}
|
|
212
|
+
});
|
|
189
213
|
this._nodes = [];
|
|
190
214
|
}
|
|
191
215
|
disconnectedCallback() {
|
|
@@ -193,54 +217,68 @@ const registerAllElements = (w) => {
|
|
|
193
217
|
}
|
|
194
218
|
};
|
|
195
219
|
__decorate([
|
|
196
|
-
(0, import_decorators.attributeHost)("
|
|
197
|
-
__metadata("design:type",
|
|
198
|
-
], SwcIf.prototype, "
|
|
220
|
+
(0, import_decorators.attributeHost)("replace-wrap-start"),
|
|
221
|
+
__metadata("design:type", String)
|
|
222
|
+
], SwcIf.prototype, "_replaceWrapStart", void 0);
|
|
199
223
|
__decorate([
|
|
200
|
-
(0, import_decorators.attributeHost)("replace-wrap"),
|
|
224
|
+
(0, import_decorators.attributeHost)("replace-wrap-end"),
|
|
201
225
|
__metadata("design:type", String)
|
|
202
|
-
], SwcIf.prototype, "
|
|
226
|
+
], SwcIf.prototype, "_replaceWrapEnd", void 0);
|
|
227
|
+
__decorate([
|
|
228
|
+
(0, import_decorators.attributeHost)("skip-if-same"),
|
|
229
|
+
__metadata("design:type", String)
|
|
230
|
+
], SwcIf.prototype, "_skipIfSame", void 0);
|
|
203
231
|
__decorate([
|
|
204
232
|
(0, import_decorators.changedAttributeHost)("value"),
|
|
205
233
|
__metadata("design:type", Function),
|
|
206
|
-
__metadata("design:paramtypes", [String]),
|
|
234
|
+
__metadata("design:paramtypes", [Object, String, String]),
|
|
207
235
|
__metadata("design:returntype", void 0)
|
|
208
236
|
], SwcIf.prototype, "setValue", null);
|
|
209
|
-
__decorate([
|
|
210
|
-
(0, import_decorators.changedAttributeHost)("replace-wrap"),
|
|
211
|
-
__metadata("design:type", Function),
|
|
212
|
-
__metadata("design:paramtypes", [String]),
|
|
213
|
-
__metadata("design:returntype", void 0)
|
|
214
|
-
], SwcIf.prototype, "setReplaceWrap", null);
|
|
215
237
|
SwcIf = __decorate([
|
|
216
|
-
(0, import_decorators.elementDefine)("swc-if", { extends: "template", window: w })
|
|
238
|
+
(0, import_decorators.elementDefine)("swc-if", { extends: "template", window: w }),
|
|
239
|
+
__metadata("design:paramtypes", [])
|
|
217
240
|
], SwcIf);
|
|
218
241
|
let SwcLoop = class SwcLoop extends HTMLTemplateElement {
|
|
219
|
-
constructor() {
|
|
220
|
-
super(...arguments);
|
|
221
|
-
this._nodeGroups = [];
|
|
222
|
-
}
|
|
223
242
|
get value() {
|
|
224
243
|
return this._value;
|
|
225
244
|
}
|
|
226
245
|
set value(nv) {
|
|
246
|
+
this._value = nv;
|
|
227
247
|
this.refresh(nv);
|
|
228
248
|
}
|
|
229
|
-
|
|
230
|
-
this.
|
|
249
|
+
getValue(index) {
|
|
250
|
+
return this._value?.[index];
|
|
251
|
+
}
|
|
252
|
+
constructor() {
|
|
253
|
+
super();
|
|
254
|
+
this._value = [];
|
|
255
|
+
this._nodeGroups = [];
|
|
231
256
|
}
|
|
232
|
-
|
|
233
|
-
this.
|
|
257
|
+
setValue(value, o, n) {
|
|
258
|
+
this._value = value;
|
|
259
|
+
this.refresh(this._value);
|
|
234
260
|
}
|
|
261
|
+
// @changedAttributeHost('replace-wrap')
|
|
262
|
+
// private setReplaceWrap(replaceWrapAttr?: string | null) {
|
|
263
|
+
// this.refresh();
|
|
264
|
+
// }
|
|
235
265
|
replaceExpressions(html, groupArgs, context, wrap) {
|
|
236
|
-
|
|
266
|
+
let config = void 0;
|
|
267
|
+
config = {
|
|
268
|
+
expression: {
|
|
269
|
+
replace: { start: `${wrap.start}`, end: `${wrap.end}` },
|
|
270
|
+
callReturn: { start: `${wrap.start}=`, end: `${wrap.end}` },
|
|
271
|
+
call: { start: `${wrap.start}@`, end: `${wrap.end}` }
|
|
272
|
+
}
|
|
273
|
+
};
|
|
237
274
|
const ae = new import_core.ActionExpression(html, config);
|
|
238
|
-
const filterOptions = wrap ? { type: "replace", wrap } : "replace";
|
|
239
275
|
const win = this.ownerDocument?.defaultView || window;
|
|
240
|
-
|
|
276
|
+
const expressions = ae.getExpressions("replace");
|
|
277
|
+
for (const expr of expressions) {
|
|
278
|
+
const script = import_core_web.ConvertUtils.decodeHtmlEntity(expr.script, win.document);
|
|
241
279
|
try {
|
|
242
280
|
const value = import_core.FunctionUtils.executeReturn({
|
|
243
|
-
script
|
|
281
|
+
script,
|
|
244
282
|
context,
|
|
245
283
|
args: groupArgs
|
|
246
284
|
});
|
|
@@ -251,30 +289,95 @@ const registerAllElements = (w) => {
|
|
|
251
289
|
}
|
|
252
290
|
return ae.getUnprocessedTemplate();
|
|
253
291
|
}
|
|
254
|
-
|
|
255
|
-
this.cleanup();
|
|
256
|
-
if (value?.length <= 0)
|
|
257
|
-
return;
|
|
258
|
-
const portal = this.parentElement;
|
|
259
|
-
if (!portal)
|
|
260
|
-
return;
|
|
292
|
+
createFragmentAndNodes(items, helperSet, startIndex = 0) {
|
|
261
293
|
const win = this.ownerDocument?.defaultView || window;
|
|
262
|
-
const helperSet = import_Utils.SwcUtils.getHelperAndHostSet(win, this);
|
|
263
294
|
const fragment = win.document.createDocumentFragment();
|
|
264
|
-
|
|
295
|
+
const newNodesGroup = [];
|
|
296
|
+
items.forEach((item, i) => {
|
|
297
|
+
const index = startIndex + i;
|
|
265
298
|
let htmlString = this.innerHTML;
|
|
266
299
|
const groupArgs = { ...helperSet, $item: item, $index: index, $value: this._value };
|
|
267
|
-
htmlString = this.replaceExpressions(htmlString, groupArgs, this, this.
|
|
300
|
+
htmlString = this.replaceExpressions(htmlString, groupArgs, this, { start: this._replaceWrapStart ?? "{#{", end: this._replaceWrapEnd ?? "}#}" });
|
|
268
301
|
const temp = this.ownerDocument?.createElement("template") || document.createElement("template");
|
|
269
302
|
temp.innerHTML = htmlString;
|
|
270
303
|
const content = temp.content;
|
|
271
304
|
const nodes = Array.from(content.childNodes);
|
|
272
|
-
|
|
305
|
+
const setTemplateHost = (element) => {
|
|
306
|
+
element.__swc_template_host = this;
|
|
307
|
+
Array.from(element.children).forEach((child) => {
|
|
308
|
+
if (child instanceof HTMLElement) {
|
|
309
|
+
setTemplateHost(child);
|
|
310
|
+
}
|
|
311
|
+
});
|
|
312
|
+
};
|
|
313
|
+
nodes.forEach((node) => {
|
|
314
|
+
if (node instanceof HTMLElement) {
|
|
315
|
+
setTemplateHost(node);
|
|
316
|
+
}
|
|
317
|
+
});
|
|
318
|
+
newNodesGroup.push(nodes);
|
|
273
319
|
fragment.appendChild(content);
|
|
274
320
|
});
|
|
321
|
+
return { fragment, newNodesGroup };
|
|
322
|
+
}
|
|
323
|
+
appendItem(...items) {
|
|
324
|
+
if (!items || items.length <= 0)
|
|
325
|
+
return;
|
|
326
|
+
const portal = import_Utils.SwcUtils.getParentContainer(this);
|
|
327
|
+
if (!portal)
|
|
328
|
+
return;
|
|
329
|
+
const win = this.ownerDocument?.defaultView || window;
|
|
330
|
+
const helperSet = import_Utils.SwcUtils.getHelperAndHostSet(win, this);
|
|
331
|
+
const startIndex = this._value ? this._value.length : 0;
|
|
332
|
+
if (this._value !== items) {
|
|
333
|
+
this._value = [...this._value || [], ...items];
|
|
334
|
+
}
|
|
335
|
+
const { fragment, newNodesGroup } = this.createFragmentAndNodes(items, helperSet, startIndex);
|
|
336
|
+
this._nodeGroups.push(...newNodesGroup);
|
|
337
|
+
console.log("\uBB50\uC57C \uC528\uBC1C");
|
|
338
|
+
let insertReference = this.nextSibling;
|
|
339
|
+
if (this._nodeGroups.length > items.length) {
|
|
340
|
+
const lastExistingGroup = this._nodeGroups[this._nodeGroups.length - items.length - 1];
|
|
341
|
+
if (lastExistingGroup && lastExistingGroup.length > 0) {
|
|
342
|
+
const lastNode = lastExistingGroup[lastExistingGroup.length - 1];
|
|
343
|
+
insertReference = lastNode.nextSibling;
|
|
344
|
+
}
|
|
345
|
+
}
|
|
346
|
+
portal.insertBefore(fragment, insertReference);
|
|
347
|
+
}
|
|
348
|
+
async prependItem(...items) {
|
|
349
|
+
if (!items || items.length <= 0)
|
|
350
|
+
return;
|
|
351
|
+
const portal = import_Utils.SwcUtils.getParentContainer(this);
|
|
352
|
+
if (!portal)
|
|
353
|
+
return;
|
|
354
|
+
const win = this.ownerDocument?.defaultView || window;
|
|
355
|
+
const helperSet = import_Utils.SwcUtils.getHelperAndHostSet(win, this);
|
|
356
|
+
if (this._value !== items) {
|
|
357
|
+
this._value = [...items, ...this._value || []];
|
|
358
|
+
}
|
|
359
|
+
const { fragment, newNodesGroup } = this.createFragmentAndNodes(items, helperSet, 0);
|
|
360
|
+
this._nodeGroups = [...newNodesGroup, ...this._nodeGroups];
|
|
275
361
|
portal.insertBefore(fragment, this.nextSibling);
|
|
276
362
|
}
|
|
363
|
+
refresh(value) {
|
|
364
|
+
const targetValue = value !== void 0 ? value : (0, import_decorators.getAttributeValue)(this, "value") ?? this._value ?? [];
|
|
365
|
+
this.cleanup();
|
|
366
|
+
this._value = targetValue;
|
|
367
|
+
if (!this._value || this._value.length <= 0)
|
|
368
|
+
return;
|
|
369
|
+
const win = this.ownerDocument?.defaultView || window;
|
|
370
|
+
const helperSet = import_Utils.SwcUtils.getHelperAndHostSet(win, this);
|
|
371
|
+
helperSet.$templateHost = this;
|
|
372
|
+
const { fragment, newNodesGroup } = this.createFragmentAndNodes(this._value, helperSet, 0);
|
|
373
|
+
this._nodeGroups = newNodesGroup;
|
|
374
|
+
const portal = import_Utils.SwcUtils.getParentContainer(this);
|
|
375
|
+
if (portal) {
|
|
376
|
+
portal.insertBefore(fragment, this.nextSibling);
|
|
377
|
+
}
|
|
378
|
+
}
|
|
277
379
|
cleanup() {
|
|
380
|
+
console.log("\uB204\uAC00 cleanup");
|
|
278
381
|
this._nodeGroups.forEach((nodes) => nodes.forEach((n) => n.parentElement?.removeChild(n)));
|
|
279
382
|
this._nodeGroups = [];
|
|
280
383
|
}
|
|
@@ -283,52 +386,64 @@ const registerAllElements = (w) => {
|
|
|
283
386
|
}
|
|
284
387
|
};
|
|
285
388
|
__decorate([
|
|
286
|
-
(0, import_decorators.attributeHost)("
|
|
287
|
-
__metadata("design:type",
|
|
288
|
-
], SwcLoop.prototype, "
|
|
389
|
+
(0, import_decorators.attributeHost)("replace-wrap-start"),
|
|
390
|
+
__metadata("design:type", String)
|
|
391
|
+
], SwcLoop.prototype, "_replaceWrapStart", void 0);
|
|
289
392
|
__decorate([
|
|
290
|
-
(0, import_decorators.attributeHost)("replace-wrap"),
|
|
393
|
+
(0, import_decorators.attributeHost)("replace-wrap-end"),
|
|
291
394
|
__metadata("design:type", String)
|
|
292
|
-
], SwcLoop.prototype, "
|
|
395
|
+
], SwcLoop.prototype, "_replaceWrapEnd", void 0);
|
|
293
396
|
__decorate([
|
|
294
397
|
(0, import_decorators.changedAttributeHost)("value"),
|
|
295
398
|
__metadata("design:type", Function),
|
|
296
|
-
__metadata("design:paramtypes", []),
|
|
399
|
+
__metadata("design:paramtypes", [Object, String, String]),
|
|
297
400
|
__metadata("design:returntype", void 0)
|
|
298
401
|
], SwcLoop.prototype, "setValue", null);
|
|
299
|
-
__decorate([
|
|
300
|
-
(0, import_decorators.changedAttributeHost)("replace-wrap"),
|
|
301
|
-
__metadata("design:type", Function),
|
|
302
|
-
__metadata("design:paramtypes", []),
|
|
303
|
-
__metadata("design:returntype", void 0)
|
|
304
|
-
], SwcLoop.prototype, "setReplaceWrap", null);
|
|
305
402
|
SwcLoop = __decorate([
|
|
306
|
-
(0, import_decorators.elementDefine)("swc-loop", { extends: "template", window: w })
|
|
403
|
+
(0, import_decorators.elementDefine)("swc-loop", { extends: "template", window: w }),
|
|
404
|
+
__metadata("design:paramtypes", [])
|
|
307
405
|
], SwcLoop);
|
|
308
406
|
let SwcChoose = class SwcChoose extends HTMLTemplateElement {
|
|
309
|
-
constructor() {
|
|
310
|
-
super(...arguments);
|
|
311
|
-
this._nodes = [];
|
|
312
|
-
this._previousTemplate = null;
|
|
313
|
-
}
|
|
314
407
|
get value() {
|
|
315
408
|
return this._value;
|
|
316
409
|
}
|
|
317
410
|
set value(nv) {
|
|
318
|
-
this.
|
|
411
|
+
this._value = nv;
|
|
412
|
+
this.refresh(this._value);
|
|
319
413
|
}
|
|
320
|
-
|
|
321
|
-
|
|
414
|
+
constructor() {
|
|
415
|
+
super();
|
|
416
|
+
this._nodes = [];
|
|
417
|
+
this._previousTemplate = null;
|
|
322
418
|
}
|
|
323
|
-
|
|
324
|
-
|
|
419
|
+
// static get observedAttributes() {
|
|
420
|
+
// return ['value'];
|
|
421
|
+
// }
|
|
422
|
+
attributeChangedCallback(na, o, n) {
|
|
325
423
|
}
|
|
424
|
+
setValue(value, o, n) {
|
|
425
|
+
console.log("chooooooose value", value);
|
|
426
|
+
this._value = value;
|
|
427
|
+
this.refresh(this._value);
|
|
428
|
+
}
|
|
429
|
+
// @changedAttributeHost('replace-wrap')
|
|
430
|
+
// private setReplaceWrap(replaceWrapAttr?: string | null) {
|
|
431
|
+
// this.refresh();
|
|
432
|
+
// }
|
|
326
433
|
replaceExpressions(html, groupArgs, context, wrap) {
|
|
327
|
-
|
|
434
|
+
let config = void 0;
|
|
435
|
+
if (wrap) {
|
|
436
|
+
config = {
|
|
437
|
+
expression: {
|
|
438
|
+
replace: { start: `${wrap.start}`, end: `${wrap.end}` },
|
|
439
|
+
callReturn: { start: `${wrap.start}=`, end: `${wrap.end}` },
|
|
440
|
+
call: { start: `${wrap.start}@`, end: `${wrap.end}` }
|
|
441
|
+
}
|
|
442
|
+
};
|
|
443
|
+
}
|
|
328
444
|
const ae = new import_core.ActionExpression(html, config);
|
|
329
|
-
const filterOptions = wrap ? { type: "replace", wrap } : "replace";
|
|
330
445
|
const win = this.ownerDocument?.defaultView || window;
|
|
331
|
-
for (const expr of ae.getExpressions(
|
|
446
|
+
for (const expr of ae.getExpressions("replace")) {
|
|
332
447
|
try {
|
|
333
448
|
const value = import_core.FunctionUtils.executeReturn({
|
|
334
449
|
script: import_core_web.ConvertUtils.decodeHtmlEntity(expr.script, win.document),
|
|
@@ -342,32 +457,29 @@ const registerAllElements = (w) => {
|
|
|
342
457
|
}
|
|
343
458
|
return ae.getUnprocessedTemplate();
|
|
344
459
|
}
|
|
345
|
-
refresh(value
|
|
346
|
-
|
|
347
|
-
|
|
460
|
+
refresh(value) {
|
|
461
|
+
value = (0, import_decorators.getAttributeValue)(this, "value") ?? this._value;
|
|
462
|
+
console.log("[DEBUG] SwcChoose.refresh called, value:", value);
|
|
463
|
+
const portal = import_Utils.SwcUtils.getParentContainer(this);
|
|
464
|
+
if (!portal) {
|
|
465
|
+
console.log("[DEBUG] SwcChoose portal is null!");
|
|
348
466
|
return;
|
|
349
|
-
|
|
467
|
+
}
|
|
468
|
+
const win = ((0, import_decorators.getElementConfig)(this).window ?? this.ownerDocument?.defaultView) || window;
|
|
350
469
|
const helperSet = import_Utils.SwcUtils.getHelperAndHostSet(win, this);
|
|
351
|
-
const groupArgs = { ...helperSet, $value: value };
|
|
470
|
+
const groupArgs = { ...helperSet, $value: value, $templateHost: this };
|
|
352
471
|
const templates = Array.from(this.content.querySelectorAll("template"));
|
|
353
472
|
let selected = null;
|
|
354
473
|
for (const t of templates) {
|
|
355
474
|
if (t.getAttribute("is") === "swc-when") {
|
|
356
|
-
const attrVal = t.getAttribute("
|
|
475
|
+
const attrVal = t.getAttribute("test") || "";
|
|
357
476
|
let matches = false;
|
|
358
|
-
const
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
context: t,
|
|
365
|
-
args: groupArgs
|
|
366
|
-
});
|
|
367
|
-
matches = !!result;
|
|
368
|
-
} else {
|
|
369
|
-
matches = String(attrVal) === String(value);
|
|
370
|
-
}
|
|
477
|
+
const result = import_core.FunctionUtils.executeReturn({
|
|
478
|
+
script: attrVal,
|
|
479
|
+
context: t,
|
|
480
|
+
args: groupArgs
|
|
481
|
+
});
|
|
482
|
+
matches = !!result;
|
|
371
483
|
if (matches) {
|
|
372
484
|
selected = t;
|
|
373
485
|
break;
|
|
@@ -386,12 +498,27 @@ const registerAllElements = (w) => {
|
|
|
386
498
|
this._previousTemplate = target;
|
|
387
499
|
if (target) {
|
|
388
500
|
let htmlString = target.innerHTML;
|
|
389
|
-
htmlString = this.replaceExpressions(htmlString, groupArgs, this, this.
|
|
501
|
+
htmlString = this.replaceExpressions(htmlString, groupArgs, this, { start: this._replaceWrapStart ?? "{#{", end: this._replaceWrapEnd ?? "}#}" });
|
|
390
502
|
const result = this.ownerDocument?.createElement("template") || document.createElement("template");
|
|
391
503
|
result.innerHTML = htmlString;
|
|
392
504
|
const processedFragment = result.content;
|
|
393
505
|
this._nodes = Array.from(processedFragment.childNodes);
|
|
506
|
+
const setTemplateHost = (element) => {
|
|
507
|
+
element.__swc_template_host = this;
|
|
508
|
+
Array.from(element.children).forEach((child) => {
|
|
509
|
+
if (child instanceof HTMLElement) {
|
|
510
|
+
setTemplateHost(child);
|
|
511
|
+
}
|
|
512
|
+
});
|
|
513
|
+
};
|
|
514
|
+
this._nodes.forEach((node) => {
|
|
515
|
+
if (node instanceof HTMLElement) {
|
|
516
|
+
setTemplateHost(node);
|
|
517
|
+
}
|
|
518
|
+
});
|
|
519
|
+
console.log(`[DEBUG] SwcChoose before insertBefore, portal: ${portal?.tagName}, isConnected: ${portal?.isConnected}`);
|
|
394
520
|
portal.insertBefore(processedFragment, this.nextSibling);
|
|
521
|
+
console.log("[DEBUG] SwcChoose after insertBefore");
|
|
395
522
|
}
|
|
396
523
|
}
|
|
397
524
|
cleanup() {
|
|
@@ -403,27 +530,22 @@ const registerAllElements = (w) => {
|
|
|
403
530
|
}
|
|
404
531
|
};
|
|
405
532
|
__decorate([
|
|
406
|
-
(0, import_decorators.attributeHost)("
|
|
407
|
-
__metadata("design:type",
|
|
408
|
-
], SwcChoose.prototype, "
|
|
533
|
+
(0, import_decorators.attributeHost)("replace-wrap-start"),
|
|
534
|
+
__metadata("design:type", String)
|
|
535
|
+
], SwcChoose.prototype, "_replaceWrapStart", void 0);
|
|
409
536
|
__decorate([
|
|
410
|
-
(0, import_decorators.attributeHost)("replace-wrap"),
|
|
537
|
+
(0, import_decorators.attributeHost)("replace-wrap-end"),
|
|
411
538
|
__metadata("design:type", String)
|
|
412
|
-
], SwcChoose.prototype, "
|
|
539
|
+
], SwcChoose.prototype, "_replaceWrapEnd", void 0);
|
|
413
540
|
__decorate([
|
|
414
541
|
(0, import_decorators.changedAttributeHost)("value"),
|
|
415
542
|
__metadata("design:type", Function),
|
|
416
|
-
__metadata("design:paramtypes", []),
|
|
543
|
+
__metadata("design:paramtypes", [Object, String, String]),
|
|
417
544
|
__metadata("design:returntype", void 0)
|
|
418
545
|
], SwcChoose.prototype, "setValue", null);
|
|
419
|
-
__decorate([
|
|
420
|
-
(0, import_decorators.changedAttributeHost)("replace-wrap"),
|
|
421
|
-
__metadata("design:type", Function),
|
|
422
|
-
__metadata("design:paramtypes", [String]),
|
|
423
|
-
__metadata("design:returntype", void 0)
|
|
424
|
-
], SwcChoose.prototype, "setReplaceWrap", null);
|
|
425
546
|
SwcChoose = __decorate([
|
|
426
|
-
(0, import_decorators.elementDefine)("swc-choose", { extends: "template", window: w })
|
|
547
|
+
(0, import_decorators.elementDefine)("swc-choose", { extends: "template", window: w }),
|
|
548
|
+
__metadata("design:paramtypes", [])
|
|
427
549
|
], SwcChoose);
|
|
428
550
|
let SwcAsync = class SwcAsync extends HTMLTemplateElement {
|
|
429
551
|
constructor() {
|
|
@@ -439,9 +561,10 @@ const registerAllElements = (w) => {
|
|
|
439
561
|
setValue(valueAttr) {
|
|
440
562
|
this.executeAsync(this._value);
|
|
441
563
|
}
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
564
|
+
// @changedAttributeHost('replace-wrap')
|
|
565
|
+
// private setReplaceWrap() {
|
|
566
|
+
// this.executeAsync(this._value);
|
|
567
|
+
// }
|
|
445
568
|
executeAsync(result = this._value) {
|
|
446
569
|
if (result === void 0 || result === null) {
|
|
447
570
|
this.refresh("default");
|
|
@@ -463,11 +586,19 @@ const registerAllElements = (w) => {
|
|
|
463
586
|
}
|
|
464
587
|
}
|
|
465
588
|
replaceExpressions(html, groupArgs, context, wrap) {
|
|
466
|
-
|
|
589
|
+
let config = void 0;
|
|
590
|
+
if (wrap) {
|
|
591
|
+
config = {
|
|
592
|
+
expression: {
|
|
593
|
+
replace: { start: `${wrap.start}`, end: `${wrap.end}` },
|
|
594
|
+
callReturn: { start: `${wrap.start}=`, end: `${wrap.end}` },
|
|
595
|
+
call: { start: `${wrap.start}@`, end: `${wrap.end}` }
|
|
596
|
+
}
|
|
597
|
+
};
|
|
598
|
+
}
|
|
467
599
|
const ae = new import_core.ActionExpression(html, config);
|
|
468
|
-
const filterOptions = wrap ? { type: "replace", wrap } : "replace";
|
|
469
600
|
const win = this.ownerDocument?.defaultView || window;
|
|
470
|
-
for (const expr of ae.getExpressions(
|
|
601
|
+
for (const expr of ae.getExpressions("replace")) {
|
|
471
602
|
try {
|
|
472
603
|
const value = import_core.FunctionUtils.executeReturn({
|
|
473
604
|
script: import_core_web.ConvertUtils.decodeHtmlEntity(expr.script, win.document),
|
|
@@ -482,9 +613,8 @@ const registerAllElements = (w) => {
|
|
|
482
613
|
return ae.getUnprocessedTemplate();
|
|
483
614
|
}
|
|
484
615
|
refresh(state = "default") {
|
|
485
|
-
console.log("rrrrrrrrrrrrrrrrr", state);
|
|
486
616
|
this.cleanup();
|
|
487
|
-
const portal = this
|
|
617
|
+
const portal = import_Utils.SwcUtils.getParentContainer(this);
|
|
488
618
|
if (!portal)
|
|
489
619
|
return;
|
|
490
620
|
const win = this.ownerDocument?.defaultView || window;
|
|
@@ -492,12 +622,16 @@ const registerAllElements = (w) => {
|
|
|
492
622
|
const t = this.content.querySelector(`template[is="swc-${state}"]`);
|
|
493
623
|
if (t) {
|
|
494
624
|
let htmlString = t.innerHTML;
|
|
495
|
-
const groupArgs = { ...helperSet, $value: this._value, $state: state };
|
|
496
|
-
htmlString = this.replaceExpressions(htmlString, groupArgs, this, this.
|
|
625
|
+
const groupArgs = { ...helperSet, $value: this._value, $state: state, $templateHost: this };
|
|
626
|
+
htmlString = this.replaceExpressions(htmlString, groupArgs, this, { start: this._replaceWrapStart ?? "{#{", end: this._replaceWrapEnd ?? "}#}" });
|
|
497
627
|
const temp = this.ownerDocument?.createElement("template") || document.createElement("template");
|
|
498
628
|
temp.innerHTML = htmlString;
|
|
499
629
|
const content = temp.content;
|
|
500
630
|
this._nodes = Array.from(content.childNodes);
|
|
631
|
+
this._nodes.forEach((node) => {
|
|
632
|
+
if (node instanceof HTMLElement)
|
|
633
|
+
node.__template_swc_host = this;
|
|
634
|
+
});
|
|
501
635
|
portal.insertBefore(content, this.nextSibling);
|
|
502
636
|
}
|
|
503
637
|
}
|
|
@@ -514,21 +648,19 @@ const registerAllElements = (w) => {
|
|
|
514
648
|
__metadata("design:type", Object)
|
|
515
649
|
], SwcAsync.prototype, "_value", void 0);
|
|
516
650
|
__decorate([
|
|
517
|
-
(0, import_decorators.attributeHost)("replace-wrap"),
|
|
651
|
+
(0, import_decorators.attributeHost)("replace-wrap-start"),
|
|
652
|
+
__metadata("design:type", String)
|
|
653
|
+
], SwcAsync.prototype, "_replaceWrapStart", void 0);
|
|
654
|
+
__decorate([
|
|
655
|
+
(0, import_decorators.attributeHost)("replace-wrap-end"),
|
|
518
656
|
__metadata("design:type", String)
|
|
519
|
-
], SwcAsync.prototype, "
|
|
657
|
+
], SwcAsync.prototype, "_replaceWrapEnd", void 0);
|
|
520
658
|
__decorate([
|
|
521
659
|
(0, import_decorators.changedAttributeHost)("value"),
|
|
522
660
|
__metadata("design:type", Function),
|
|
523
661
|
__metadata("design:paramtypes", [String]),
|
|
524
662
|
__metadata("design:returntype", void 0)
|
|
525
663
|
], SwcAsync.prototype, "setValue", null);
|
|
526
|
-
__decorate([
|
|
527
|
-
(0, import_decorators.changedAttributeHost)("replace-wrap"),
|
|
528
|
-
__metadata("design:type", Function),
|
|
529
|
-
__metadata("design:paramtypes", []),
|
|
530
|
-
__metadata("design:returntype", void 0)
|
|
531
|
-
], SwcAsync.prototype, "setReplaceWrap", null);
|
|
532
664
|
SwcAsync = __decorate([
|
|
533
665
|
(0, import_decorators.elementDefine)("swc-async", { extends: "template", window: w })
|
|
534
666
|
], SwcAsync);
|