@dooboostore/simple-web-component 1.0.30 → 1.0.32
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 +220 -1
- package/dist/cjs/decorators/applyStyle.js +1 -1
- package/dist/cjs/decorators/applyStyle.js.map +2 -2
- package/dist/cjs/decorators/attribute.js +17 -1
- package/dist/cjs/decorators/attribute.js.map +2 -2
- package/dist/cjs/decorators/elementDefine.js +29 -12
- package/dist/cjs/decorators/elementDefine.js.map +3 -3
- package/dist/cjs/elements/SwcAppEngine.js +3 -3
- package/dist/cjs/elements/SwcAppEngine.js.map +2 -2
- package/dist/cjs/elements/SwcAppMixin.js +1 -8
- package/dist/cjs/elements/SwcAppMixin.js.map +2 -2
- package/dist/cjs/elements/SwcAsync.js +71 -78
- package/dist/cjs/elements/SwcAsync.js.map +2 -2
- package/dist/cjs/elements/SwcChoose.js +66 -81
- package/dist/cjs/elements/SwcChoose.js.map +2 -2
- package/dist/cjs/elements/SwcIf.js +52 -96
- package/dist/cjs/elements/SwcIf.js.map +2 -2
- package/dist/cjs/elements/SwcLoop.js +60 -103
- package/dist/cjs/elements/SwcLoop.js.map +2 -2
- package/dist/cjs/elements/SwcSubTemplates.js +0 -27
- package/dist/cjs/elements/SwcSubTemplates.js.map +2 -2
- package/dist/cjs/elements/register.js +314 -343
- package/dist/cjs/elements/register.js.map +2 -2
- package/dist/cjs/router/ElementRouter.js +1 -8
- package/dist/cjs/router/ElementRouter.js.map +2 -2
- package/dist/cjs/types.js.map +1 -1
- package/dist/cjs/utils/Utils.js +31 -24
- package/dist/cjs/utils/Utils.js.map +2 -2
- package/dist/esm/decorators/applyStyle.js +1 -1
- package/dist/esm/decorators/applyStyle.js.map +2 -2
- package/dist/esm/decorators/attribute.js +18 -2
- package/dist/esm/decorators/attribute.js.map +2 -2
- package/dist/esm/decorators/elementDefine.js +27 -10
- package/dist/esm/decorators/elementDefine.js.map +3 -3
- package/dist/esm/elements/SwcAppEngine.js +3 -3
- package/dist/esm/elements/SwcAppEngine.js.map +2 -2
- package/dist/esm/elements/SwcAppMixin.js +1 -8
- package/dist/esm/elements/SwcAppMixin.js.map +2 -2
- package/dist/esm/elements/SwcAsync.js +72 -60
- package/dist/esm/elements/SwcAsync.js.map +2 -2
- package/dist/esm/elements/SwcChoose.js +67 -63
- package/dist/esm/elements/SwcChoose.js.map +2 -2
- package/dist/esm/elements/SwcIf.js +53 -78
- package/dist/esm/elements/SwcIf.js.map +2 -2
- package/dist/esm/elements/SwcLoop.js +61 -85
- package/dist/esm/elements/SwcLoop.js.map +2 -2
- package/dist/esm/elements/SwcSubTemplates.js +0 -8
- package/dist/esm/elements/SwcSubTemplates.js.map +2 -2
- package/dist/esm/elements/register.js +246 -275
- package/dist/esm/elements/register.js.map +2 -2
- package/dist/esm/router/ElementRouter.js +1 -8
- package/dist/esm/router/ElementRouter.js.map +2 -2
- package/dist/esm/types.js.map +1 -1
- package/dist/esm/utils/Utils.js +31 -24
- package/dist/esm/utils/Utils.js.map +2 -2
- package/dist/esm-bundle/dooboostore-simple-web-component.esm.js +2223 -2009
- package/dist/esm-bundle/dooboostore-simple-web-component.esm.js.map +4 -4
- package/dist/types/decorators/attribute.d.ts.map +1 -1
- package/dist/types/decorators/elementDefine.d.ts.map +1 -1
- package/dist/types/elements/SwcAppMixin.d.ts.map +1 -1
- package/dist/types/elements/SwcAsync.d.ts +1 -11
- package/dist/types/elements/SwcAsync.d.ts.map +1 -1
- package/dist/types/elements/SwcChoose.d.ts +1 -13
- package/dist/types/elements/SwcChoose.d.ts.map +1 -1
- package/dist/types/elements/SwcIf.d.ts +1 -13
- package/dist/types/elements/SwcIf.d.ts.map +1 -1
- package/dist/types/elements/SwcLoop.d.ts +1 -13
- package/dist/types/elements/SwcLoop.d.ts.map +1 -1
- package/dist/types/elements/SwcSubTemplates.d.ts +6 -6
- package/dist/types/elements/SwcSubTemplates.d.ts.map +1 -1
- package/dist/types/elements/register.d.ts.map +1 -1
- package/dist/types/router/ElementRouter.d.ts.map +1 -1
- package/dist/types/types.d.ts +11 -1
- package/dist/types/types.d.ts.map +1 -1
- package/dist/types/utils/Utils.d.ts +10 -0
- package/dist/types/utils/Utils.d.ts.map +1 -1
- package/dist/umd-bundle/dooboostore-simple-web-component.umd.js +2223 -2009
- package/dist/umd-bundle/dooboostore-simple-web-component.umd.js.map +4 -4
- package/package.json +3 -3
- package/src/decorators/applyStyle.ts +1 -1
- package/src/decorators/attribute.ts +35 -30
- package/src/decorators/elementDefine.ts +32 -10
- package/src/elements/SwcAppEngine.ts +3 -3
- package/src/elements/SwcAppMixin.ts +6 -27
- package/src/elements/SwcAsync.ts +75 -57
- package/src/elements/SwcChoose.ts +69 -77
- package/src/elements/SwcIf.ts +50 -75
- package/src/elements/SwcLoop.ts +56 -82
- package/src/elements/SwcSubTemplates.ts +6 -6
- package/src/elements/register.ts +234 -285
- package/src/router/ElementRouter.ts +1 -12
- package/src/types.ts +9 -2
- package/src/utils/Utils.ts +48 -37
package/README.md
CHANGED
|
@@ -247,7 +247,226 @@ onAppReady(router: Router) {
|
|
|
247
247
|
}
|
|
248
248
|
```
|
|
249
249
|
|
|
250
|
-
### 8. **
|
|
250
|
+
### 8. **Structural Directives**
|
|
251
|
+
|
|
252
|
+
Structural Directives allow declarative conditional rendering, list iteration, async handling, and routing with automatic attribute substitution and dynamic expressions.
|
|
253
|
+
|
|
254
|
+
#### 8.1 **SwcChoose - Multi-Condition Rendering**
|
|
255
|
+
|
|
256
|
+
Switch-case style conditional rendering with `swc-when` and `swc-otherwise` sub-templates.
|
|
257
|
+
|
|
258
|
+
```typescript
|
|
259
|
+
// Component with conditional rendering logic
|
|
260
|
+
@elementDefine('status-display')
|
|
261
|
+
class StatusDisplay extends HTMLElement {
|
|
262
|
+
@attributeHost('status')
|
|
263
|
+
status: string = 'pending';
|
|
264
|
+
|
|
265
|
+
@setProperty('#status-template', 'value')
|
|
266
|
+
getStatus() {
|
|
267
|
+
return this.status;
|
|
268
|
+
}
|
|
269
|
+
|
|
270
|
+
@onConnectedInnerHtml
|
|
271
|
+
render() {
|
|
272
|
+
return `
|
|
273
|
+
<template id="status-template" is="swc-choose">
|
|
274
|
+
<!-- Pending State -->
|
|
275
|
+
<template is="swc-when" value="{{ $value === 'pending' }}">
|
|
276
|
+
<div style="color: orange;">⏳ Processing...</div>
|
|
277
|
+
</template>
|
|
278
|
+
|
|
279
|
+
<!-- Success State -->
|
|
280
|
+
<template is="swc-when" value="{{ $value === 'success' }}">
|
|
281
|
+
<div style="color: green;">✓ Completed</div>
|
|
282
|
+
</template>
|
|
283
|
+
|
|
284
|
+
<!-- Error State -->
|
|
285
|
+
<template is="swc-when" value="{{ $value === 'error' }}">
|
|
286
|
+
<div style="color: red;">✗ Failed</div>
|
|
287
|
+
</template>
|
|
288
|
+
|
|
289
|
+
<!-- Fallback -->
|
|
290
|
+
<template is="swc-otherwise">
|
|
291
|
+
<div style="color: gray;">Unknown status</div>
|
|
292
|
+
</template>
|
|
293
|
+
</template>
|
|
294
|
+
`;
|
|
295
|
+
}
|
|
296
|
+
}
|
|
297
|
+
```
|
|
298
|
+
|
|
299
|
+
**Features:**
|
|
300
|
+
- `{{ }} braces` for dynamic condition evaluation
|
|
301
|
+
- `$value` contains the value passed to `swc-choose`
|
|
302
|
+
- `skip-if-same` attribute prevents re-render when same template selected
|
|
303
|
+
- Attribute substitution: `attribute-name="{{ expression }}"` automatically evaluated
|
|
304
|
+
|
|
305
|
+
---
|
|
306
|
+
|
|
307
|
+
#### 8.2 **SwcIf - Binary Conditional**
|
|
308
|
+
|
|
309
|
+
If-then-else rendering with optional `swc-default` fallback.
|
|
310
|
+
|
|
311
|
+
```typescript
|
|
312
|
+
@elementDefine('user-profile')
|
|
313
|
+
class UserProfile extends HTMLElement {
|
|
314
|
+
private isLoggedIn = false;
|
|
315
|
+
|
|
316
|
+
@setProperty('#content', 'value')
|
|
317
|
+
checkAuth() {
|
|
318
|
+
return this.isLoggedIn;
|
|
319
|
+
}
|
|
320
|
+
|
|
321
|
+
@onConnectedInnerHtml
|
|
322
|
+
render() {
|
|
323
|
+
return `
|
|
324
|
+
<!-- True condition: renders main template -->
|
|
325
|
+
<template id="content" is="swc-if" value="{{ $host.isLoggedIn }}">
|
|
326
|
+
<div>
|
|
327
|
+
<h2>Welcome, {{ $host.userName }}</h2>
|
|
328
|
+
<button on-click="logout">Logout</button>
|
|
329
|
+
</div>
|
|
330
|
+
|
|
331
|
+
<!-- Fallback template: renders if condition is false -->
|
|
332
|
+
<template is="swc-default">
|
|
333
|
+
<div>
|
|
334
|
+
<p>Please log in</p>
|
|
335
|
+
<button on-click="login">Login</button>
|
|
336
|
+
</div>
|
|
337
|
+
</template>
|
|
338
|
+
</template>
|
|
339
|
+
`;
|
|
340
|
+
}
|
|
341
|
+
}
|
|
342
|
+
```
|
|
343
|
+
|
|
344
|
+
**Features:**
|
|
345
|
+
- Binary true/false logic
|
|
346
|
+
- Main template renders when `value` is truthy
|
|
347
|
+
- `swc-default` sub-template renders when value is falsy
|
|
348
|
+
- Dynamic attribute substitution supported
|
|
349
|
+
- Access `$host`, `$value`, and other context variables
|
|
350
|
+
|
|
351
|
+
---
|
|
352
|
+
|
|
353
|
+
#### 8.3 **SwcAsync - Promise/Loading State**
|
|
354
|
+
|
|
355
|
+
Automatically handle async operations with loading, success, and error states.
|
|
356
|
+
|
|
357
|
+
```typescript
|
|
358
|
+
@elementDefine('data-loader')
|
|
359
|
+
class DataLoader extends HTMLElement {
|
|
360
|
+
private data: any = null;
|
|
361
|
+
|
|
362
|
+
async fetchData() {
|
|
363
|
+
return new Promise((resolve, reject) => {
|
|
364
|
+
setTimeout(() => {
|
|
365
|
+
resolve({ id: 1, name: 'Sample Data' });
|
|
366
|
+
}, 2000);
|
|
367
|
+
});
|
|
368
|
+
}
|
|
369
|
+
|
|
370
|
+
@setProperty('#async-content', 'value')
|
|
371
|
+
loadData() {
|
|
372
|
+
return this.fetchData();
|
|
373
|
+
}
|
|
374
|
+
|
|
375
|
+
@onConnectedInnerHtml
|
|
376
|
+
render() {
|
|
377
|
+
return `
|
|
378
|
+
<template id="async-content" is="swc-async" value="{{ $host.fetchData() }}">
|
|
379
|
+
<!-- Loading State: Shows while Promise is pending -->
|
|
380
|
+
<template is="swc-loading">
|
|
381
|
+
<div>🔄 Loading data...</div>
|
|
382
|
+
</template>
|
|
383
|
+
|
|
384
|
+
<!-- Success State: Shows when Promise resolves -->
|
|
385
|
+
<template is="swc-success">
|
|
386
|
+
<div>
|
|
387
|
+
<p>Data ID: {{ $value.id }}</p>
|
|
388
|
+
<p>Data Name: {{ $value.name }}</p>
|
|
389
|
+
</div>
|
|
390
|
+
</template>
|
|
391
|
+
|
|
392
|
+
<!-- Error State: Shows if Promise rejects -->
|
|
393
|
+
<template is="swc-error">
|
|
394
|
+
<div style="color: red;">❌ Failed to load data</div>
|
|
395
|
+
</template>
|
|
396
|
+
</template>
|
|
397
|
+
`;
|
|
398
|
+
}
|
|
399
|
+
}
|
|
400
|
+
```
|
|
401
|
+
|
|
402
|
+
**Features:**
|
|
403
|
+
- Automatically manages Promise lifecycle
|
|
404
|
+
- `swc-loading` - displays during pending state
|
|
405
|
+
- `swc-success` - displays on successful resolution, `$value` contains result
|
|
406
|
+
- `swc-error` - displays on Promise rejection
|
|
407
|
+
- Dynamic attribute substitution in all states
|
|
408
|
+
- `on-clone-node` and `on-clone-nodes` callbacks for DOM manipulation
|
|
409
|
+
|
|
410
|
+
---
|
|
411
|
+
|
|
412
|
+
#### 8.4 **SwcLoop - List Rendering**
|
|
413
|
+
|
|
414
|
+
Iterate over arrays and render templates for each item.
|
|
415
|
+
|
|
416
|
+
```typescript
|
|
417
|
+
@elementDefine('product-list')
|
|
418
|
+
class ProductList extends HTMLElement {
|
|
419
|
+
private products = [
|
|
420
|
+
{ id: 1, name: 'Laptop', price: 1200 },
|
|
421
|
+
{ id: 2, name: 'Phone', price: 800 },
|
|
422
|
+
{ id: 3, name: 'Tablet', price: 500 }
|
|
423
|
+
];
|
|
424
|
+
|
|
425
|
+
@setProperty('#products-list', 'value')
|
|
426
|
+
getProducts() {
|
|
427
|
+
return this.products;
|
|
428
|
+
}
|
|
429
|
+
|
|
430
|
+
@onConnectedInnerHtml
|
|
431
|
+
render() {
|
|
432
|
+
return `
|
|
433
|
+
<template id="products-list" is="swc-loop" value="{{ $host.products }}">
|
|
434
|
+
<div style="margin: 10px; padding: 10px; border: 1px solid #ddd;">
|
|
435
|
+
<h3>{{ $item.name }}</h3>
|
|
436
|
+
<p>Price: ${{ $item.price }}</p>
|
|
437
|
+
<p>ID: {{ $item.id }} (Index: {{ $index }})</p>
|
|
438
|
+
<button data-id="{{ $item.id }}">Add to Cart</button>
|
|
439
|
+
</div>
|
|
440
|
+
|
|
441
|
+
<!-- Empty fallback: renders when array is empty -->
|
|
442
|
+
<template is="swc-default">
|
|
443
|
+
<p>No products available</p>
|
|
444
|
+
</template>
|
|
445
|
+
</template>
|
|
446
|
+
`;
|
|
447
|
+
}
|
|
448
|
+
}
|
|
449
|
+
```
|
|
450
|
+
|
|
451
|
+
**Context variables:**
|
|
452
|
+
- `$item` - current item in iteration
|
|
453
|
+
- `$index` - zero-based index
|
|
454
|
+
- `$value` - entire array
|
|
455
|
+
- `$nodes` - cloned DOM nodes
|
|
456
|
+
- `$elements` - cloned HTML elements
|
|
457
|
+
- `$firstElement` - first element in cloned nodes
|
|
458
|
+
|
|
459
|
+
**Features:**
|
|
460
|
+
- Efficient DOM cloning for each item
|
|
461
|
+
- `swc-default` fallback renders when array is empty
|
|
462
|
+
- All cloned attributes support `{{ }}` substitution
|
|
463
|
+
- `on-clone-node` callback fires for each cloned node
|
|
464
|
+
- `on-clone-nodes` callback fires after all nodes cloned
|
|
465
|
+
|
|
466
|
+
---
|
|
467
|
+
|
|
468
|
+
#### 8.5 **Declarative Routing with swc-choose**
|
|
469
|
+
|
|
251
470
|
Combine `@subscribeSwcAppRouteChange` with `swc-choose` for clean, declarative routing without boilerplate.
|
|
252
471
|
|
|
253
472
|
```typescript
|
|
@@ -50,7 +50,7 @@ function createStyleDecorator(action) {
|
|
|
50
50
|
if (res !== void 0) {
|
|
51
51
|
const win = this.ownerDocument?.defaultView || window;
|
|
52
52
|
const host = this;
|
|
53
|
-
const hostSet =
|
|
53
|
+
const hostSet = import_Utils.SwcUtils.getHelperAndHostSet(win, host);
|
|
54
54
|
const r = options.root || "auto";
|
|
55
55
|
const targetEls = [];
|
|
56
56
|
const applyRoot = (t) => {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/decorators/applyStyle.ts"],
|
|
4
|
-
"sourcesContent": ["import { ReflectUtils } from '@dooboostore/core';\nimport { ensureInit } from './elementDefine';\nimport { SwcUtils } from '../utils/Utils';\nimport { SwcQueryOptions, HelperHostSet } from '../types';\n\nexport type StyleAction = 'set' | 'update' | 'remove';\n\nexport interface StyleApplyOptions extends SwcQueryOptions {}\n\nexport interface StyleApplyMetadata {\n propertyKey: string | symbol;\n selector: string;\n action: StyleAction;\n options: StyleApplyOptions;\n}\n\nexport const STYLE_METADATA_KEY = Symbol.for('simple-web-component:style');\n\nfunction createStyleDecorator(action: StyleAction) {\n return (selector: string, options: StyleApplyOptions = {}): MethodDecorator => {\n return (target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor) => {\n const constructor = target.constructor;\n let metaList = ReflectUtils.getOwnMetadata(STYLE_METADATA_KEY, constructor) as Map<string | symbol, StyleApplyMetadata>;\n if (!metaList) {\n metaList = new Map<string | symbol, StyleApplyMetadata>();\n ReflectUtils.defineMetadata(STYLE_METADATA_KEY, metaList, constructor);\n }\n metaList.set(propertyKey, { propertyKey, selector, action, options });\n\n const original = descriptor.value;\n descriptor.value = async function (...args: any[]) {\n ensureInit(this);\n const res = await (original as any).apply(this, args);\n if (res !== undefined) {\n const win = (this as any).ownerDocument?.defaultView || window;\n const host = this as unknown as HTMLElement;\n const hostSet =
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAA6B;AAC7B,2BAA2B;AAC3B,mBAAyB;AAclB,MAAM,qBAAqB,OAAO,IAAI,4BAA4B;AAEzE,SAAS,qBAAqB,QAAqB;AACjD,SAAO,CAAC,UAAkB,UAA6B,CAAC,MAAuB;AAC7E,WAAO,CAAC,QAAgB,aAA8B,eAAmC;AACvF,YAAM,cAAc,OAAO;AAC3B,UAAI,WAAW,yBAAa,eAAe,oBAAoB,WAAW;AAC1E,UAAI,CAAC,UAAU;AACb,mBAAW,oBAAI,IAAyC;AACxD,iCAAa,eAAe,oBAAoB,UAAU,WAAW;AAAA,MACvE;AACA,eAAS,IAAI,aAAa,EAAE,aAAa,UAAU,QAAQ,QAAQ,CAAC;AAEpE,YAAM,WAAW,WAAW;AAC5B,iBAAW,QAAQ,kBAAmB,MAAa;AACjD,6CAAW,IAAI;AACf,cAAM,MAAM,MAAO,SAAiB,MAAM,MAAM,IAAI;AACpD,YAAI,QAAQ,QAAW;AACrB,gBAAM,MAAO,KAAa,eAAe,eAAe;AACxD,gBAAM,OAAO;AACb,gBAAM,UAAU,
|
|
4
|
+
"sourcesContent": ["import { ReflectUtils } from '@dooboostore/core';\nimport { ensureInit } from './elementDefine';\nimport { SwcUtils } from '../utils/Utils';\nimport { SwcQueryOptions, HelperHostSet } from '../types';\n\nexport type StyleAction = 'set' | 'update' | 'remove';\n\nexport interface StyleApplyOptions extends SwcQueryOptions {}\n\nexport interface StyleApplyMetadata {\n propertyKey: string | symbol;\n selector: string;\n action: StyleAction;\n options: StyleApplyOptions;\n}\n\nexport const STYLE_METADATA_KEY = Symbol.for('simple-web-component:style');\n\nfunction createStyleDecorator(action: StyleAction) {\n return (selector: string, options: StyleApplyOptions = {}): MethodDecorator => {\n return (target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor) => {\n const constructor = target.constructor;\n let metaList = ReflectUtils.getOwnMetadata(STYLE_METADATA_KEY, constructor) as Map<string | symbol, StyleApplyMetadata>;\n if (!metaList) {\n metaList = new Map<string | symbol, StyleApplyMetadata>();\n ReflectUtils.defineMetadata(STYLE_METADATA_KEY, metaList, constructor);\n }\n metaList.set(propertyKey, { propertyKey, selector, action, options });\n\n const original = descriptor.value;\n descriptor.value = async function (...args: any[]) {\n ensureInit(this);\n const res = await (original as any).apply(this, args);\n if (res !== undefined) {\n const win = (this as any).ownerDocument?.defaultView || window;\n const host = this as unknown as HTMLElement;\n const hostSet = SwcUtils.getHelperAndHostSet(win, host);\n const r = options.root || 'auto';\n const targetEls: HTMLElement[] = [];\n\n const applyRoot = (t: any) => {\n if (!t || !(t instanceof win.HTMLElement)) return;\n targetEls.push(t);\n };\n\n if (selector === ':parentHost') applyRoot(hostSet.$parentHost);\n else if (selector === ':appHost') applyRoot(hostSet.$appHost);\n else if (selector === ':firstHost') applyRoot(hostSet.$firstHost);\n else if (selector === ':lastHost') applyRoot(hostSet.$lastHost);\n else if (selector === ':firstAppHost') applyRoot(hostSet.$firstAppHost);\n else if (selector === ':lastAppHost') applyRoot(hostSet.$lastAppHost);\n else if (selector === ':hosts') hostSet.$hosts.forEach(applyRoot);\n else if (selector === ':appHosts') hostSet.$appHosts.forEach(applyRoot);\n else if (selector === ':host' || !selector) applyRoot(host);\n else {\n const targetRoot = r === 'auto' ? (host.shadowRoot || host) : (r === 'shadow' ? host.shadowRoot : host);\n if (targetRoot) {\n const found = targetRoot.querySelectorAll(selector);\n if (found) targetEls.push(...(Array.from(found) as HTMLElement[]));\n }\n }\n\n targetEls.forEach(targetEl => {\n const resolvedRes = typeof res === 'function' ? (res as any)(targetEl, hostSet) : res;\n\n if (action === 'set' || action === 'update') {\n if (action === 'set') targetEl.style.cssText = '';\n \n if (typeof resolvedRes === 'object' && resolvedRes !== null && !Array.isArray(resolvedRes)) {\n Object.entries(resolvedRes as any).forEach(([prop, val]) => {\n const finalVal = typeof val === 'function' ? val(targetEl, hostSet) : val;\n if (finalVal === null || finalVal === undefined) {\n targetEl.style.removeProperty(prop);\n } else {\n targetEl.style[prop as any] = String(finalVal);\n }\n });\n } else if (typeof resolvedRes === 'string') {\n targetEl.style.cssText = resolvedRes;\n }\n } else if (action === 'remove') {\n if (typeof resolvedRes === 'object' && resolvedRes !== null && !Array.isArray(resolvedRes)) {\n Object.entries(resolvedRes as any).forEach(([prop, val]) => {\n const shouldRemove = typeof val === 'function' ? val(targetEl, hostSet) : !!val;\n if (shouldRemove) {\n targetEl.style.removeProperty(prop);\n }\n });\n } else {\n const props = Array.isArray(resolvedRes) ? resolvedRes : [resolvedRes];\n props.forEach(p => targetEl.style.removeProperty(String(p)));\n }\n }\n });\n }\n return res;\n };\n return descriptor;\n };\n };\n}\n\nexport function applyStyle(selector: string, action: StyleAction = 'update', options: StyleApplyOptions = {}): MethodDecorator {\n return createStyleDecorator(action)(selector, options);\n}\n\nexport const setStyle = (selector: string, options: StyleApplyOptions = {}) => createStyleDecorator('set')(selector, options);\nexport const updateStyle = (selector: string, options: StyleApplyOptions = {}) => createStyleDecorator('update')(selector, options);\nexport const removeStyle = (selector: string, options: StyleApplyOptions = {}) => createStyleDecorator('remove')(selector, options);\n\n// Host versions\nexport function applyStyleHost(action: StyleAction = 'update', options: StyleApplyOptions = {}): MethodDecorator {\n return createStyleDecorator(action)(':host', options);\n}\nexport const setStyleHost = (options: StyleApplyOptions = {}) => createStyleDecorator('set')(':host', options);\nexport const updateStyleHost = (options: StyleApplyOptions = {}) => createStyleDecorator('update')(':host', options);\nexport const removeStyleHost = (options: StyleApplyOptions = {}) => createStyleDecorator('remove')(':host', options);\n\nexport const findAllStyleMetadata = (target: any): Map<string | symbol, StyleApplyMetadata> => {\n const result = new Map<string | symbol, StyleApplyMetadata>();\n const maps = ReflectUtils.findAllMetadata<Map<string | symbol, StyleApplyMetadata>>(STYLE_METADATA_KEY, target);\n maps.forEach(map => {\n if (map instanceof Map) {\n map.forEach((v, k) => result.set(k, v));\n }\n });\n return result;\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -27,6 +27,7 @@ module.exports = __toCommonJS(attribute_exports);
|
|
|
27
27
|
var import_core = require("@dooboostore/core");
|
|
28
28
|
var import_elementDefine = require("./elementDefine");
|
|
29
29
|
var import_Utils = require("../utils/Utils");
|
|
30
|
+
var import_core_web = require("@dooboostore/core-web");
|
|
30
31
|
const ATTRIBUTE_FIELD_METADATA_KEY = Symbol.for("simple-web-component:attribute-field");
|
|
31
32
|
const convertValue = (val, type) => {
|
|
32
33
|
if (val === null || val === void 0) return val;
|
|
@@ -115,7 +116,22 @@ function attribute(selector, options = {}) {
|
|
|
115
116
|
const primaryTarget = targets[0];
|
|
116
117
|
if (primaryTarget && typeof primaryTarget.hasAttribute === "function") {
|
|
117
118
|
if (primaryTarget.hasAttribute(attrName)) {
|
|
118
|
-
|
|
119
|
+
let domVal = primaryTarget.getAttribute(attrName);
|
|
120
|
+
const ae = new import_core.ActionExpression(domVal);
|
|
121
|
+
const expr = ae.getFirstExpression("call-return");
|
|
122
|
+
if (expr) {
|
|
123
|
+
try {
|
|
124
|
+
const result = import_core.FunctionUtils.executeReturn({
|
|
125
|
+
script: import_core_web.ConvertUtils.decodeHtmlEntity(expr.script, currentWin.document),
|
|
126
|
+
context: this,
|
|
127
|
+
args: import_Utils.SwcUtils.getHelperAndHostSet(currentWin, this)
|
|
128
|
+
});
|
|
129
|
+
return convertValue(result, targetType);
|
|
130
|
+
} catch (e) {
|
|
131
|
+
console.error(`[SWC] Failed to execute directive {{= ${expr.script} }}:`, e);
|
|
132
|
+
return convertValue(domVal, targetType);
|
|
133
|
+
}
|
|
134
|
+
}
|
|
119
135
|
return convertValue(domVal, targetType);
|
|
120
136
|
}
|
|
121
137
|
return null;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/decorators/attribute.ts"],
|
|
4
|
-
"sourcesContent": ["import {ReflectUtils} from '@dooboostore/core';\nimport {ensureInit, getElementConfig} from './elementDefine';\nimport {SwcUtils} from '../utils/Utils';\nimport {SpecialSelector, SwcQueryOptions} from '../types';\nexport interface AttributeFieldOptions extends SwcQueryOptions {\n name?: string;\n // connectedInitialize?: boolean;\n type?: typeof Number | typeof Boolean | typeof String;\n}\n\nexport interface AttributeFieldMetadata {\n propertyKey: string | symbol;\n selector: string;\n options: AttributeFieldOptions;\n privateKey: symbol;\n}\n\nexport const ATTRIBUTE_FIELD_METADATA_KEY = Symbol.for('simple-web-component:attribute-field');\n\nconst convertValue = (val: string | null, type: any): any => {\n if (val === null || val === undefined) return val;\n if (type === Number) return Number(val);\n if (type === Boolean) return val === 'false' || val === '0' ? false : true;\n return val;\n};\n\nexport const resolveTargetEls = (inst: any, selector: string, options: AttributeFieldOptions, currentWin: any): HTMLElement[] => {\n const r = options.root || 'auto';\n const results: HTMLElement[] = [];\n\n const applyRoot = (target: any) => {\n if (!target) return;\n if (r === 'auto') {\n results.push(target);\n } else {\n if (r === 'light' || r === 'all') results.push(target);\n if ((r === 'shadow' || r === 'all') && target.shadowRoot) results.push(target.shadowRoot);\n }\n };\n\n if (selector === ':host' || !selector) {\n applyRoot(inst);\n } else if (selector === ':window') {\n results.push(currentWin);\n } else if (selector === ':document') {\n results.push(currentWin.document);\n } else {\n const hostSet = SwcUtils.getHostSet(inst);\n if (selector === ':parentHost') applyRoot(hostSet.$parentHost);\n else if (selector === ':appHost') applyRoot(hostSet.$appHost as any);\n else if (selector === ':firstHost') applyRoot(hostSet.$firstHost);\n else if (selector === ':lastHost') applyRoot(hostSet.$lastHost);\n else if (selector === ':firstAppHost') applyRoot(hostSet.$firstAppHost as any);\n else if (selector === ':lastAppHost') applyRoot(hostSet.$lastAppHost as any);\n else {\n if (r === 'shadow') {\n const found = inst.shadowRoot?.querySelectorAll(selector);\n if (found) results.push(...found);\n } else if (r === 'light') {\n const found = inst.querySelectorAll(selector);\n if (found) results.push(...found);\n } else if (r === 'all') {\n const sMatch = inst.shadowRoot?.querySelectorAll(selector);\n const lMatch = inst.querySelectorAll(selector);\n if (sMatch) results.push(...sMatch);\n if (lMatch) results.push(...lMatch);\n } else {\n const found = (inst.shadowRoot || inst).querySelectorAll(selector);\n if (found) results.push(...found);\n }\n }\n }\n return results;\n};\n\n/**\n * @attribute decorator to sync a field value with an element's attribute.\n */\nexport function attribute(selector: string, options: AttributeFieldOptions = {}): PropertyDecorator {\n return (target: Object, propertyKey: string | symbol) => {\n const constructor = target.constructor;\n const privateKey = Symbol(String(propertyKey));\n //\n const designType = (Reflect as any).getMetadata('design:type', target, propertyKey);\n //\n let metaList = ReflectUtils.getOwnMetadata(ATTRIBUTE_FIELD_METADATA_KEY, constructor) as AttributeFieldMetadata[];\n if (!metaList) {\n metaList = [];\n ReflectUtils.defineMetadata(ATTRIBUTE_FIELD_METADATA_KEY, metaList, constructor);\n }\n metaList.push({propertyKey, selector, options, privateKey});\n\n const applySetAttribute = (inst: any, targets: HTMLElement[], attrName: string, nv: any) => {\n targets.forEach(it => {\n // console.log('sssssssssssss', it, attrName, nv);\n if (it && typeof (it as any).setAttribute === 'function') {\n if (nv === null) {\n (it as any).removeAttribute(attrName);\n } else {\n (it as any).setAttribute(attrName, String(nv));\n }\n } else {\n inst[privateKey] = nv;\n }\n });\n };\n\n try {\n // Own property\uB97C \uC0AD\uC81C\uD558\uC5EC getter\uAC00 \uC791\uB3D9\uD558\uB3C4\uB85D \uD568\n // delete target[propertyKey];\n\n // const defineTarget = target instanceof Function ? target : (target as any).constructor;\n \n Object.defineProperty(target, propertyKey, {\n get(this: any) {\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,
|
|
4
|
+
"sourcesContent": ["import {ReflectUtils, FunctionUtils, ActionExpression} from '@dooboostore/core';\nimport {ensureInit, getElementConfig} from './elementDefine';\nimport {SwcUtils} from '../utils/Utils';\nimport {SpecialSelector, SwcQueryOptions} from '../types';\nimport { ConvertUtils } from '@dooboostore/core-web';\nexport interface AttributeFieldOptions extends SwcQueryOptions {\n name?: string;\n // connectedInitialize?: boolean;\n type?: typeof Number | typeof Boolean | typeof String;\n}\n\nexport interface AttributeFieldMetadata {\n propertyKey: string | symbol;\n selector: string;\n options: AttributeFieldOptions;\n privateKey: symbol;\n}\n\nexport const ATTRIBUTE_FIELD_METADATA_KEY = Symbol.for('simple-web-component:attribute-field');\n\nconst convertValue = (val: string | null, type: any): any => {\n if (val === null || val === undefined) return val;\n if (type === Number) return Number(val);\n if (type === Boolean) return val === 'false' || val === '0' ? false : true;\n return val;\n};\n\nexport const resolveTargetEls = (inst: any, selector: string, options: AttributeFieldOptions, currentWin: any): HTMLElement[] => {\n const r = options.root || 'auto';\n const results: HTMLElement[] = [];\n\n const applyRoot = (target: any) => {\n if (!target) return;\n if (r === 'auto') {\n results.push(target);\n } else {\n if (r === 'light' || r === 'all') results.push(target);\n if ((r === 'shadow' || r === 'all') && target.shadowRoot) results.push(target.shadowRoot);\n }\n };\n\n if (selector === ':host' || !selector) {\n applyRoot(inst);\n } else if (selector === ':window') {\n results.push(currentWin);\n } else if (selector === ':document') {\n results.push(currentWin.document);\n } else {\n const hostSet = SwcUtils.getHostSet(inst);\n if (selector === ':parentHost') applyRoot(hostSet.$parentHost);\n else if (selector === ':appHost') applyRoot(hostSet.$appHost as any);\n else if (selector === ':firstHost') applyRoot(hostSet.$firstHost);\n else if (selector === ':lastHost') applyRoot(hostSet.$lastHost);\n else if (selector === ':firstAppHost') applyRoot(hostSet.$firstAppHost as any);\n else if (selector === ':lastAppHost') applyRoot(hostSet.$lastAppHost as any);\n else {\n if (r === 'shadow') {\n const found = inst.shadowRoot?.querySelectorAll(selector);\n if (found) results.push(...found);\n } else if (r === 'light') {\n const found = inst.querySelectorAll(selector);\n if (found) results.push(...found);\n } else if (r === 'all') {\n const sMatch = inst.shadowRoot?.querySelectorAll(selector);\n const lMatch = inst.querySelectorAll(selector);\n if (sMatch) results.push(...sMatch);\n if (lMatch) results.push(...lMatch);\n } else {\n const found = (inst.shadowRoot || inst).querySelectorAll(selector);\n if (found) results.push(...found);\n }\n }\n }\n return results;\n};\n\n/**\n * @attribute decorator to sync a field value with an element's attribute.\n */\nexport function attribute(selector: string, options: AttributeFieldOptions = {}): PropertyDecorator {\n return (target: Object, propertyKey: string | symbol) => {\n const constructor = target.constructor;\n const privateKey = Symbol(String(propertyKey));\n //\n const designType = (Reflect as any).getMetadata('design:type', target, propertyKey);\n //\n let metaList = ReflectUtils.getOwnMetadata(ATTRIBUTE_FIELD_METADATA_KEY, constructor) as AttributeFieldMetadata[];\n if (!metaList) {\n metaList = [];\n ReflectUtils.defineMetadata(ATTRIBUTE_FIELD_METADATA_KEY, metaList, constructor);\n }\n metaList.push({propertyKey, selector, options, privateKey});\n\n const applySetAttribute = (inst: any, targets: HTMLElement[], attrName: string, nv: any) => {\n targets.forEach(it => {\n // console.log('sssssssssssss', it, attrName, nv);\n if (it && typeof (it as any).setAttribute === 'function') {\n if (nv === null) {\n (it as any).removeAttribute(attrName);\n } else {\n (it as any).setAttribute(attrName, String(nv));\n }\n } else {\n inst[privateKey] = nv;\n }\n });\n };\n\n try {\n // Own property\uB97C \uC0AD\uC81C\uD558\uC5EC getter\uAC00 \uC791\uB3D9\uD558\uB3C4\uB85D \uD568\n // delete target[propertyKey];\n\n // const defineTarget = target instanceof Function ? target : (target as any).constructor;\n \n Object.defineProperty(target, propertyKey, {\n get(this: any) {\n const attrName = options.name || String(propertyKey);\n const conf = getElementConfig(this);\n const currentWin = this._resolveWindow?.(conf) || ((typeof window !== 'undefined' ? window : undefined) as any);\n const targetType = options.type || designType;\n\n const targets = resolveTargetEls(this, selector, options, currentWin);\n const primaryTarget = targets[0];\n\n if (primaryTarget && typeof (primaryTarget as any).hasAttribute === 'function') {\n if ((primaryTarget as any).hasAttribute(attrName)) {\n let domVal = (primaryTarget as any).getAttribute(attrName);\n \n // \uD45C\uD604\uC2DD \uCCB4\uD06C\n const ae = new ActionExpression(domVal);\n const expr = ae.getFirstExpression('call-return');\n if (expr) {\n try {\n const result = FunctionUtils.executeReturn({\n script: ConvertUtils.decodeHtmlEntity(expr.script, currentWin.document),\n context: this,\n args: SwcUtils.getHelperAndHostSet(currentWin, this)\n });\n return convertValue(result, targetType);\n } catch (e) {\n console.error(`[SWC] Failed to execute directive {{= ${expr.script} }}:`, e);\n return convertValue(domVal, targetType);\n }\n }\n \n return convertValue(domVal, targetType);\n }\n return null;\n }\n\n const data = convertValue(this[privateKey], targetType);\n return data;\n },\n set(this: any, nv: any) {\n // this[propertyKey] = nv;\n // console.log('------>??settttt', this, nv, propertyKey);\n const attrName = options.name || String(propertyKey);\n const conf = getElementConfig(this);\n const currentWin = this._resolveWindow?.(conf) || ((typeof window !== 'undefined' ? window : undefined) as any);\n\n\n // if (!this.__swc_connected) {\n // this[privateKey] = nv;\n // return;\n // }\n\n const targets = resolveTargetEls(this, selector, options, currentWin);\n applySetAttribute(this, targets, attrName, nv);\n },\n enumerable: true,\n configurable: true\n });\n } catch (err) {\n console.error('[SWC] defineProperty error:', err);\n }\n };\n}\n\n/**\n * @attributeHost decorator to sync a field value with the :host element's attribute.\n */\nexport function attributeHost(target: Object, propertyKey: string | symbol): void;\nexport function attributeHost(options: AttributeFieldOptions): PropertyDecorator;\nexport function attributeHost(attrName: string): PropertyDecorator;\nexport function attributeHost(attrName: string, options: AttributeFieldOptions): PropertyDecorator;\nexport function attributeHost(targetOrAttrOrOptions?: any, propertyKeyOrOptions?: any): any {\n if (propertyKeyOrOptions !== undefined && (typeof propertyKeyOrOptions === 'string' || typeof propertyKeyOrOptions === 'symbol')) {\n return attribute(':host', { name: String(propertyKeyOrOptions) })(targetOrAttrOrOptions, propertyKeyOrOptions);\n }\n\n if (typeof targetOrAttrOrOptions === 'string') {\n const attrName = targetOrAttrOrOptions;\n const options = (typeof propertyKeyOrOptions === 'object' ? propertyKeyOrOptions : {}) as AttributeFieldOptions;\n return attribute(':host', { ...options, name: attrName });\n } else if (typeof targetOrAttrOrOptions === 'object') {\n const options = targetOrAttrOrOptions as AttributeFieldOptions;\n return (target: Object, propertyKey: string | symbol) => {\n return attribute(':host', { ...options, name: String(propertyKey) })(target, propertyKey);\n };\n } else {\n return (target: Object, propertyKey: string | symbol) => {\n return attribute(':host', { name: String(propertyKey) })(target, propertyKey);\n };\n }\n}\n\nexport const findAllAttributeMetadata = (target: any): AttributeFieldMetadata[] => {\n const actualTarget = target instanceof Function ? target : target.constructor;\n return ReflectUtils.findAllMetadata<AttributeFieldMetadata[]>(ATTRIBUTE_FIELD_METADATA_KEY, actualTarget).flat();\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -24,7 +24,6 @@ __export(elementDefine_exports, {
|
|
|
24
24
|
});
|
|
25
25
|
module.exports = __toCommonJS(elementDefine_exports);
|
|
26
26
|
var import_core = require("@dooboostore/core");
|
|
27
|
-
var import_core2 = require("@dooboostore/core");
|
|
28
27
|
var import_addEventListener = require("./addEventListener");
|
|
29
28
|
var import_lifecycles = require("./lifecycles");
|
|
30
29
|
var import_emitCustomEvent = require("./emitCustomEvent");
|
|
@@ -37,6 +36,7 @@ var import_Utils = require("../utils/Utils");
|
|
|
37
36
|
var import_config = require("../config/config");
|
|
38
37
|
var import_Inject = require("@dooboostore/simple-boot/decorators/inject/Inject");
|
|
39
38
|
var import_types = require("../types");
|
|
39
|
+
var import_core_web = require("@dooboostore/core-web");
|
|
40
40
|
const ELEMENT_CONFIG_KEY = Symbol.for("simple-web-component:element-config");
|
|
41
41
|
const getElementConfig = (target) => {
|
|
42
42
|
const constructor = target instanceof Function ? target : target.constructor;
|
|
@@ -119,7 +119,7 @@ const setupPrototype = (proto) => {
|
|
|
119
119
|
const currentWin = this._resolveWindow(conf);
|
|
120
120
|
const helpers = import_Utils.SwcUtils.getHelperSet(currentWin);
|
|
121
121
|
const args = { ...hostSet, ...helpers, ...extraArgs, $el: this, $root: this.getRootNode() };
|
|
122
|
-
|
|
122
|
+
import_core.FunctionUtils.execute({ script, context: this, args });
|
|
123
123
|
} catch (e) {
|
|
124
124
|
console.error(`[SWC] Failed to execute ${attrName}:`, e);
|
|
125
125
|
}
|
|
@@ -139,12 +139,12 @@ const setupPrototype = (proto) => {
|
|
|
139
139
|
ensureInit(this);
|
|
140
140
|
if (typeof this[methodName] !== "function") return;
|
|
141
141
|
const useHostSet = hostSet ?? import_Utils.SwcUtils.getHostSet(this);
|
|
142
|
-
const app = useHostSet?.$appHost
|
|
142
|
+
const app = useHostSet?.$appHost?.simpleApplication;
|
|
143
143
|
if (app) {
|
|
144
144
|
const otherStorage = /* @__PURE__ */ new Map();
|
|
145
145
|
const situations = new import_Inject.SituationTypeContainers([new import_Inject.SituationTypeContainer({ situationType: import_types.InjectSituationType.HOST_SET, data: useHostSet }), new import_Inject.SituationTypeContainer({ situationType: import_types.InjectSituationType.APP_HOST, data: useHostSet.$appHost }), new import_Inject.SituationTypeContainer({ situationType: import_types.InjectSituationType.APP_HOSTS, data: useHostSet.$appHosts }), new import_Inject.SituationTypeContainer({ situationType: import_types.InjectSituationType.HOST, data: useHostSet.$host }), new import_Inject.SituationTypeContainer({ situationType: import_types.InjectSituationType.HOSTS, data: useHostSet.$hosts }), new import_Inject.SituationTypeContainer({ situationType: import_types.InjectSituationType.FIRST_HOST, data: useHostSet.$firstHost }), new import_Inject.SituationTypeContainer({ situationType: import_types.InjectSituationType.LAST_HOST, data: useHostSet.$lastHost }), new import_Inject.SituationTypeContainer({ situationType: import_types.InjectSituationType.FIRST_APP_HOST, data: useHostSet.$firstAppHost }), new import_Inject.SituationTypeContainer({ situationType: import_types.InjectSituationType.LAST_APP_HOST, data: useHostSet.$lastAppHost })]);
|
|
146
146
|
otherStorage.set(import_Inject.SituationTypeContainers, situations);
|
|
147
|
-
return app.simstanceManager.
|
|
147
|
+
return app.simstanceManager.executeBindParameterSim(
|
|
148
148
|
{
|
|
149
149
|
target: this,
|
|
150
150
|
targetKey: methodName,
|
|
@@ -171,8 +171,7 @@ const setupPrototype = (proto) => {
|
|
|
171
171
|
const oldHandler = handlers.get(attrName);
|
|
172
172
|
if (oldHandler) el.removeEventListener(eventName, oldHandler);
|
|
173
173
|
const handler = async (event) => {
|
|
174
|
-
const
|
|
175
|
-
const hostSet = import_Utils.SwcUtils.getHostSet(parent || el);
|
|
174
|
+
const hostSet = import_Utils.SwcUtils.getHostSet(el);
|
|
176
175
|
const conf = getElementConfig(this);
|
|
177
176
|
const currentWin = this._resolveWindow(conf);
|
|
178
177
|
const helpers = import_Utils.SwcUtils.getHelperSet(currentWin);
|
|
@@ -184,15 +183,14 @@ const setupPrototype = (proto) => {
|
|
|
184
183
|
$el: el,
|
|
185
184
|
$root: this.getRootNode()
|
|
186
185
|
};
|
|
187
|
-
await
|
|
186
|
+
await import_core.FunctionUtils.execute({ script, context: el, args });
|
|
188
187
|
};
|
|
189
188
|
el.addEventListener(eventName, handler);
|
|
190
189
|
handlers.set(attrName, handler);
|
|
191
190
|
};
|
|
192
191
|
proto.__swc_executeAttributeEvent = async function(el, attrName, script, event) {
|
|
193
192
|
ensureInit(this);
|
|
194
|
-
const
|
|
195
|
-
const hostSet = import_Utils.SwcUtils.getHostSet(parent || el);
|
|
193
|
+
const hostSet = import_Utils.SwcUtils.getHostSet(el);
|
|
196
194
|
const conf = getElementConfig(this);
|
|
197
195
|
const currentWin = this._resolveWindow(conf);
|
|
198
196
|
const currentHelpers = import_Utils.SwcUtils.getHelperSet(currentWin);
|
|
@@ -207,7 +205,7 @@ const setupPrototype = (proto) => {
|
|
|
207
205
|
$el: el,
|
|
208
206
|
$root: this.getRootNode()
|
|
209
207
|
};
|
|
210
|
-
await
|
|
208
|
+
await import_core.FunctionUtils.execute({ script, context: el, args });
|
|
211
209
|
};
|
|
212
210
|
};
|
|
213
211
|
const elementDefine = (name, config = {}) => (constructor) => {
|
|
@@ -267,7 +265,7 @@ const elementDefine = (name, config = {}) => (constructor) => {
|
|
|
267
265
|
if (connectedInnerHtmlList.length > 0) {
|
|
268
266
|
let sContent = "", lContent = "";
|
|
269
267
|
for (const meta of connectedInnerHtmlList) {
|
|
270
|
-
const res = this
|
|
268
|
+
const res = this._invokeLifecycleMethod(meta.propertyKey, hostSet);
|
|
271
269
|
if (res !== void 0) {
|
|
272
270
|
if (meta.options.useShadow) sContent += res;
|
|
273
271
|
else lContent += res;
|
|
@@ -464,6 +462,25 @@ const elementDefine = (name, config = {}) => (constructor) => {
|
|
|
464
462
|
proto.attributeChangedCallback = function(name2, old, newVal) {
|
|
465
463
|
if (originalAttributeChanged) originalAttributeChanged.apply(this, [name2, old, newVal]);
|
|
466
464
|
const hSet = import_Utils.SwcUtils.getHostSet(this);
|
|
465
|
+
let processedVal = newVal;
|
|
466
|
+
if (newVal !== null) {
|
|
467
|
+
const ae = new import_core.ActionExpression(newVal);
|
|
468
|
+
const expr = ae.getFirstExpression("call-return");
|
|
469
|
+
if (expr) {
|
|
470
|
+
const win2 = this._resolveWindow?.() || (typeof window !== "undefined" ? window : void 0);
|
|
471
|
+
try {
|
|
472
|
+
const result = import_core.FunctionUtils.executeReturn({
|
|
473
|
+
script: import_core_web.ConvertUtils.decodeHtmlEntity(expr.script, win2.document),
|
|
474
|
+
context: this,
|
|
475
|
+
args: import_Utils.SwcUtils.getHelperAndHostSet(win2, this)
|
|
476
|
+
});
|
|
477
|
+
processedVal = String(result);
|
|
478
|
+
} catch (e) {
|
|
479
|
+
console.error(`[SWC] Failed to execute directive {{= ${expr.script} }} on attribute ${name2}:`, e);
|
|
480
|
+
processedVal = newVal;
|
|
481
|
+
}
|
|
482
|
+
}
|
|
483
|
+
}
|
|
467
484
|
if (name2.startsWith("swc-on-") && !swcLifecycleAttributes.includes(name2)) {
|
|
468
485
|
if (newVal !== null) {
|
|
469
486
|
const eventName = name2.substring(7);
|
|
@@ -476,7 +493,7 @@ const elementDefine = (name, config = {}) => (constructor) => {
|
|
|
476
493
|
}
|
|
477
494
|
const mKeys = attrChangeMap.get(name2);
|
|
478
495
|
if (mKeys && Array.isArray(mKeys)) {
|
|
479
|
-
for (const key of mKeys) this[key](
|
|
496
|
+
for (const key of mKeys) this[key](processedVal, old, name2, hSet);
|
|
480
497
|
}
|
|
481
498
|
};
|
|
482
499
|
Object.defineProperty(constructor, "observedAttributes", {
|