@dooboostore/simple-web-component 1.0.41 → 1.0.43

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dooboostore/simple-web-component",
-  "version": "1.0.41",
+  "version": "1.0.43",
   "license": "MIT",
   "type": "module",
   "main": "./dist/cjs/index.js",
@@ -112,8 +112,6 @@
     "publish:npm": "pnpm run build && cp package.json package.json.back && pnpm pack && TARBALL_NAME=$(ls dooboostore-simple-web-component-*.tgz | head -n 1) && tar -xzf \"$TARBALL_NAME\" -C . --strip-components=1 package/package.json && rm \"$TARBALL_NAME\" && (pnpm publish --no-git-checks || true) && cp package.json.back package.json && rm -rf package.json.back  ",
     "ts:clean": "find . -name '*.js' -o -name '*.map' -o -name '*.d.ts' | xargs rm -f",
     "typecheck": "pnpm exec tsc --noEmit",
-    "generate:is": "tsx generate-is.ts",
-    "generate:is:watch": "node --import tsx --watch --watch-path=./src/elements/SwcIf.ts --watch-path=./src/elements/SwcLoop.ts --watch-path=./src/elements/SwcChoose.ts --watch-path=./src/elements/SwcAsync.ts --watch-path=./src/elements/SwcAppMixin.ts --watch-path=./generate-is.ts generate-is.ts",
     "test": "echo test",
     "test:bundle": "pnpm --filter @dooboostore/simple-web-component-bundle-test dev"
   }

package/src/decorators/addEventListener.ts

@@ -59,6 +59,13 @@ export function addEventListenerDelegate(selector: string, type: string, options
 /**
  * @addEventListenerThis decorator - simplified version of @addEventListener for $this selector
  */
+
+// --- Aliases: event... ---
+export const event = addEventListener;
+export const eventDelegateLightDom = addEventListenerDelegateLightDom;
+export const eventDelegateShadowDom = addEventListenerDelegateShadowDom;
+export const eventDelegateAllDom = addEventListenerDelegateAllDom;
+export const eventDelegate = addEventListenerDelegate;
 export function addEventListenerThis(type: string, options?: AddEventListenerBaseOptions & SwcQueryOptions): MethodDecorator {
   return addEventListener('$this', type, options);
 }

package/src/decorators/applyAttribute.ts

@@ -12,6 +12,32 @@ export interface AttributeOptions extends SwcQueryOptions {
   name?: string;
   type?: typeof Number | typeof Boolean | typeof String;
   filter?: (target: HTMLElement, value: any, meta: { currentThis: any, helper: HelperHostSet }) => boolean;
+  /**
+   * Custom key to extract value from return object.
+   * If not provided, uses ATTRIBUTE_METADATA_KEY by default.
+   * Useful when multiple @setAttribute decorators are on the same method.
+   * 
+   * Example:
+   * @setAttribute('selector1', { valueKey: 'attr1' })
+   * @setAttribute('selector2', { valueKey: 'attr2' })
+   * myMethod() {
+   *   return {
+   *     attr1: 'value1',
+   *     attr2: 'value2'
+   *   };
+   * }
+   * 
+   * Or with symbols:
+   * @setAttribute('selector1', { valueKey: Symbol.for('attr1') })
+   * @setAttribute('selector2', { valueKey: Symbol.for('attr2') })
+   * myMethod() {
+   *   return {
+   *     [Symbol.for('attr1')]: 'value1',
+   *     [Symbol.for('attr2')]: 'value2'
+   *   };
+   * }
+   */
+  valueKey?: symbol | string;
 }
 
 export interface AttributeMetadata {
@@ -210,13 +236,43 @@ export function applyAttribute(selector: string, targetAttributeNameOrOptions?:
         ensureInit(this);
         const res = (original as any).apply(this, args);
 
+        /**
+         * Extract value for this decorator from method return value
+         * 
+         * If return value is an object with this decorator's key,
+         * use that value. Otherwise use the entire return value.
+         * 
+         * Uses valueKey from options if provided, otherwise uses ATTRIBUTE_METADATA_KEY.
+         * 
+         * Example:
+         * @setAttribute('selector1', { valueKey: 'attr1' })
+         * @setAttribute('selector2', { valueKey: 'attr2' })
+         * myMethod() {
+         *   return {
+         *     attr1: 'attribute-value1',
+         *     attr2: 'attribute-value2'
+         *   };
+         * }
+         * 
+         * First decorator will use 'attribute-value1', second will use 'attribute-value2'
+         */
+        const extractValue = (v: any) => {
+          const keyToUse = finalOptions.valueKey ?? ATTRIBUTE_METADATA_KEY;
+          if (v && typeof v === 'object' && keyToUse in v) {
+            return v[keyToUse];
+          }
+          return v;
+        };
+
         if (res instanceof Promise) {
           return res.then((v: any) => {
-            applyValueToTargets(this, v);
+            const extracted = extractValue(v);
+            applyValueToTargets(this, extracted);
             return v;
           });
         } else {
-          applyValueToTargets(this, res);
+          const extracted = extractValue(res);
+          applyValueToTargets(this, extracted);
           return res;
         }
       };

package/src/decorators/applyClass.ts

@@ -9,6 +9,12 @@ export type ClassAction = 'set' | 'update' | 'add' | 'remove' | 'toggle';
 
 export interface ClassApplyOptions extends SwcQueryOptions {
   filter?: (target: HTMLElement, value: any, meta: {currentThis: any, helper: HelperHostSet}) => boolean;
+  /**
+   * Custom key to extract value from return object.
+   * If not provided, uses CLASS_METADATA_KEY by default.
+   * Useful when multiple @applyClass decorators are on the same method.
+   */
+  valueKey?: symbol | string;
 }
 
 export interface ClassApplyMetadata {
@@ -44,6 +50,22 @@ function createClassDecorator(action: ClassAction) {
         ensureInit(this);
         const res = (original as any).apply(this, args);
 
+        /**
+         * Extract value for this decorator from method return value
+         * 
+         * If return value is an object with this decorator's key,
+         * use that value. Otherwise use the entire return value.
+         * 
+         * Uses valueKey from options if provided, otherwise uses CLASS_METADATA_KEY.
+         */
+        const extractValue = (v: any) => {
+          const keyToUse = finalOptions.valueKey ?? CLASS_METADATA_KEY;
+          if (v && typeof v === 'object' && keyToUse in v) {
+            return v[keyToUse];
+          }
+          return v;
+        };
+
         const handleResult = (resolvedValue: any) => {
           if (resolvedValue !== undefined) {
             const win = (this as any).ownerDocument?.defaultView || window;
@@ -131,9 +153,9 @@ function createClassDecorator(action: ClassAction) {
         };
 
         if (res instanceof Promise) {
-          return res.then(handleResult);
+          return res.then((v: any) => handleResult(extractValue(v)));
         } else {
-          return handleResult(res);
+          return handleResult(extractValue(res));
         }
       };
       return descriptor;

package/src/decorators/applyNode.ts

@@ -27,6 +27,12 @@ export interface ApplyNodeOptions {
    * Optional loading content to display while an async method is executing.
    */
   fallback?: (helper: HelperHostSet) => any;
+  /**
+   * Custom key to extract value from return object.
+   * If not provided, uses APPLY_NODE_METADATA_KEY by default.
+   * Useful when multiple @applyNode decorators are on the same method.
+   */
+  valueKey?: symbol | string;
 }
 
 export interface ApplyNodeMetadata {
@@ -140,6 +146,22 @@ export function applyNode(selector: string, options: ApplyNodeOptions = {positio
       const targetEl = getTarget();
       const res = original.apply(this, args);
 
+      /**
+       * Extract value for this decorator from method return value
+       * 
+       * If return value is an object with this decorator's key,
+       * use that value. Otherwise use the entire return value.
+       * 
+       * Uses valueKey from options if provided, otherwise uses APPLY_NODE_METADATA_KEY.
+       */
+      const extractValue = (v: any) => {
+        const keyToUse = options.valueKey ?? APPLY_NODE_METADATA_KEY;
+        if (v && typeof v === 'object' && keyToUse in v) {
+          return v[keyToUse];
+        }
+        return v;
+      };
+
       const runApply = (target: any, val: any) => {
         const pos = options.position || 'beforeEnd';
         // Delegate HTML/node processing to applyToDom which centralizes
@@ -163,12 +185,14 @@ export function applyNode(selector: string, options: ApplyNodeOptions = {positio
 
       if (res instanceof Promise) {
         return res.then(finalRes => {
+          const extracted = extractValue(finalRes);
           fallbackNodes.forEach((it: any)=>it.remove());
-          if (finalRes !== undefined && targetEl) runApply(targetEl, finalRes);
+          if (extracted !== undefined && targetEl) runApply(targetEl, extracted);
           return finalRes;
         });
       } else {
-        if (res !== undefined && targetEl) runApply(targetEl, res);
+        const extracted = extractValue(res);
+        if (extracted !== undefined && targetEl) runApply(targetEl, extracted);
         return res;
       }
     };

package/src/decorators/applyProperty.ts

@@ -6,6 +6,32 @@ import { SwcQueryOptions, HelperHostSet } from '../types';
 export interface PropertyOptions extends SwcQueryOptions {
   name?: string | symbol;
   filter?: (target: HTMLElement, value: any, meta: {currentThis: any, helper: HelperHostSet}) => boolean;
+  /**
+   * Custom key to extract value from return object.
+   * If not provided, uses PROPERTY_METADATA_KEY by default.
+   * Useful when multiple @setProperty decorators are on the same method.
+   * 
+   * Example:
+   * @setProperty('selector1', { valueKey: 'prop1' })
+   * @setProperty('selector2', { valueKey: 'prop2' })
+   * myMethod() {
+   *   return {
+   *     prop1: 'value1',
+   *     prop2: 'value2'
+   *   };
+   * }
+   * 
+   * Or with symbols:
+   * @setProperty('selector1', { valueKey: Symbol.for('prop1') })
+   * @setProperty('selector2', { valueKey: Symbol.for('prop2') })
+   * myMethod() {
+   *   return {
+   *     [Symbol.for('prop1')]: 'value1',
+   *     [Symbol.for('prop2')]: 'value2'
+   *   };
+   * }
+   */
+  valueKey?: symbol | string;
 }
 
 export interface PropertyMetadata {
@@ -159,10 +185,39 @@ export function applyProperty(selector: string, targetPropertyKeyOrOptions?: str
         ensureInit(this);
         const res = (original as any).apply(this, args);
 
+        /**
+         * Extract value for this decorator from method return value
+         * 
+         * If return value is an object with this decorator's symbol key,
+         * use that value. Otherwise use the entire return value.
+         * 
+         * Example:
+         * @setProperty('selector')
+         * myMethod() {
+         *   return {
+         *     [PROPERTY_METADATA_KEY]: 'property-value',
+         *     [OTHER_DECORATOR_KEY]: 'other-value'
+         *   };
+         * }
+         * 
+         * This decorator will use 'property-value'
+         */
+        const extractValue = (v: any) => {
+          if (v && typeof v === 'object' && PROPERTY_METADATA_KEY in v) {
+            return v[PROPERTY_METADATA_KEY];
+          }
+          return v;
+        };
+
         if (res instanceof Promise) {
-          return res.then((v: any) => { applyValueToTargets(this, v); return v; });
+          return res.then((v: any) => { 
+            const extracted = extractValue(v);
+            applyValueToTargets(this, extracted); 
+            return v; 
+          });
         } else {
-          applyValueToTargets(this, res);
+          const extracted = extractValue(res);
+          applyValueToTargets(this, extracted);
           return res;
         }
       };

package/src/decorators/applySlot.ts

@@ -17,16 +17,12 @@ export type ApplySlotPosition = 'prepend' | 'prependHtml' | 'prependText' | 'app
 export interface ApplySlotOptions {
   position: ApplySlotPosition;
   fallback?: (helper: HelperHostSet) => string | Node;
-  // root?: SwcRootType;
   /**
-   * Filter function to determine whether to perform DOM operation.
-   * If it returns false, the operation is skipped.
+   * Custom key to extract value from return object.
+   * If not provided, uses APPLY_SLOT_METADATA_KEY by default.
+   * Useful when multiple @applySlot decorators are on the same method.
    */
-  // filter?: (target: HTMLElement | ShadowRoot, newValue: any, meta:{currentThis: any,helper: HelperHostSet}) => boolean;
-  /**
-   * Optional loading content to display while an async method is executing.
-   */
-  // loading?: (helper: HelperHostSet) => any;
+  valueKey?: symbol | string;
 }
 
 export interface ApplySlotMetadata {
@@ -144,15 +140,33 @@ export function applySlot(targetId: string, opt: OptionalType<ApplySlotOptions,
         applyToDom(swcId, targetId, options.position, nodes);
       }
 
+      /**
+       * Extract value for this decorator from method return value
+       * 
+       * If return value is an object with this decorator's key,
+       * use that value. Otherwise use the entire return value.
+       * 
+       * Uses valueKey from options if provided, otherwise uses APPLY_SLOT_METADATA_KEY.
+       */
+      const extractValue = (v: any) => {
+        const keyToUse = options.valueKey ?? APPLY_SLOT_METADATA_KEY;
+        if (v && typeof v === 'object' && keyToUse in v) {
+          return v[keyToUse];
+        }
+        return v;
+      };
+
       let res = original.apply(this, args);
       if (res instanceof Promise) {
         return res.then(asyncRes => {
-          const nodes = resToNodes(asyncRes)
+          const extracted = extractValue(asyncRes);
+          const nodes = resToNodes(extracted)
           fallbackNodes.forEach((it: any) => it.remove());
           applyToDom(swcId, targetId, options.position, nodes);
         })
       } else {
-        const nodes: Node[] = resToNodes(res);
+        const extracted = extractValue(res);
+        const nodes: Node[] = resToNodes(extracted);
         applyToDom(swcId, targetId, options.position, nodes);
       }
     };

package/src/decorators/applyStyle.ts

@@ -7,6 +7,12 @@ export type StyleAction = 'set' | 'update' | 'remove';
 
 export interface StyleApplyOptions extends SwcQueryOptions {
   filter?: (target: HTMLElement, value: any, meta: {currentThis: any, helper: HelperHostSet}) => boolean;
+  /**
+   * Custom key to extract value from return object.
+   * If not provided, uses STYLE_METADATA_KEY by default.
+   * Useful when multiple @applyStyle decorators are on the same method.
+   */
+  valueKey?: symbol | string;
 }
 
 export interface StyleApplyMetadata {
@@ -34,6 +40,22 @@ function createStyleDecorator(action: StyleAction) {
         ensureInit(this);
         const res = (original as any).apply(this, args);
 
+        /**
+         * Extract value for this decorator from method return value
+         * 
+         * If return value is an object with this decorator's key,
+         * use that value. Otherwise use the entire return value.
+         * 
+         * Uses valueKey from options if provided, otherwise uses STYLE_METADATA_KEY.
+         */
+        const extractValue = (v: any) => {
+          const keyToUse = options.valueKey ?? STYLE_METADATA_KEY;
+          if (v && typeof v === 'object' && keyToUse in v) {
+            return v[keyToUse];
+          }
+          return v;
+        };
+
         const handleResult = (resolvedValue: any) => {
           if (resolvedValue !== undefined) {
             const win = (this as any).ownerDocument?.defaultView || window;
@@ -105,9 +127,9 @@ function createStyleDecorator(action: StyleAction) {
         };
 
         if (res instanceof Promise) {
-          return res.then(handleResult);
+          return res.then((v: any) => handleResult(extractValue(v)));
         } else {
-          return handleResult(res);
+          return handleResult(extractValue(res));
         }
       };
       return descriptor;

package/src/decorators/elementDefine.ts

@@ -128,9 +128,7 @@ export const ensureInit = (inst: any) => { // HTMLElement
 
     // Call @onInitialize lifecycle methods
     const cMethods = findAllLifecycleMetadata(inst, ON_INITIALIZE_METADATA_KEY);
-    if (cMethods) {
-      for (const m of cMethods) inst._invokeLifecycleMethod(m, hostSet);
-    }
+    for (const m of cMethods) inst._invokeLifecycleMethod(m.propertyKey, hostSet);
   }
 };
 
@@ -387,9 +385,7 @@ export const elementDefine =
 
           const bMethods = findAllOnConnectedBeforeMetadata(this).filter(it => useSsr ? !it.options.ssrFirst : true);
           // console.log('beforeConnected', bMethods)
-          if (bMethods) {
-            for (const m of bMethods) await (this as any)._invokeLifecycleMethod(m.propertyKey, helperHostSet);
-          }
+          for (const m of bMethods) await (this as any)._invokeLifecycleMethod(m.propertyKey, helperHostSet);
           (this as any)._executeSwcScript('swc-on-before-connected', helperHostSet);
 
           // console.log('vvvvvvvvvvvvvvvu-seSsr-vvvvvvvvvv>', useSsr, this.tagName, this.getAttribute('seq'))
@@ -603,9 +599,7 @@ export const elementDefine =
             return useSsr ? !it.options.ssrFirst : true;
           });
           // console.log('afterConnected', this.tagName, aMethods,  getOnConnectedAfterMetadata(this))
-          if (aMethods) {
-            for (const m of aMethods) await (this as any)._invokeLifecycleMethod(m.propertyKey, helperHostSet);
-          }
+          for (const m of aMethods) await (this as any)._invokeLifecycleMethod(m.propertyKey, helperHostSet);
           (this as any)._executeSwcScript('swc-on-connected', helperHostSet);
           (this as any)._executeSwcScript('swc-on-after-connected', helperHostSet);
           (this as any).__swc_connected = true;
@@ -622,8 +616,8 @@ export const elementDefine =
             }
           }
         } finally {
-          for (let mPropertyKey of findAllLifecycleMetadata(this, ON_CONNECTED_COMPLETED_METADATA_KEY)) {
-            await (this as any)._invokeLifecycleMethod(mPropertyKey, helperHostSet);
+          for (let m of findAllLifecycleMetadata(this, ON_CONNECTED_COMPLETED_METADATA_KEY)) {
+            await (this as any)._invokeLifecycleMethod(m.propertyKey, helperHostSet);
           }
           if (appHost && typeof (appHost as any)._connectedDone === 'function') {
             await (appHost as any)._connectedDone(this);
@@ -643,9 +637,7 @@ export const elementDefine =
 
         (this as any)._executeSwcScript('swc-on-before-disconnected', helperHostSet);
         const bMethods = findAllLifecycleMetadata(this, ON_BEFORE_DISCONNECTED_METADATA_KEY);
-        if (bMethods) {
-          for (const m of bMethods) (this as any)._invokeLifecycleMethod(m, helperHostSet);
-        }
+        for (const m of bMethods) (this as any)._invokeLifecycleMethod(m.propertyKey, helperHostSet);
 
         if ((this as any)._boundListeners) {
           (this as any)._boundListeners.forEach((l: any) => l.target.removeEventListener(l.type, l.handler, l.options));
@@ -669,9 +661,7 @@ export const elementDefine =
         if (originalDisconnected) originalDisconnected.apply(this);
 
         const aMethods = findAllLifecycleMetadata(this, ON_AFTER_DISCONNECTED_METADATA_KEY);
-        if (aMethods) {
-          for (const m of aMethods) (this as any)._invokeLifecycleMethod(m, helperHostSet);
-        }
+        for (const m of aMethods) (this as any)._invokeLifecycleMethod(m.propertyKey, helperHostSet);
         (this as any)._executeSwcScript('swc-on-disconnected', helperHostSet);
         (this as any)._executeSwcScript('swc-on-after-disconnected', helperHostSet);
         (this as any).__swc_connected = false;
@@ -682,16 +672,12 @@ export const elementDefine =
         const hostSet = SwcUtils.getHostSet(this as any);
         (this as any)._executeSwcScript('swc-on-before-adopted', hostSet);
         const bMethods = findAllLifecycleMetadata(this, ON_BEFORE_ADOPTED_METADATA_KEY);
-        if (bMethods) {
-          for (const m of bMethods) (this as any)._invokeLifecycleMethod(m, hostSet);
-        }
+        for (const m of bMethods) (this as any)._invokeLifecycleMethod(m.propertyKey, hostSet);
 
         if (originalAdopted) originalAdopted.apply(this);
 
         const aMethods = findAllLifecycleMetadata(this, ON_AFTER_ADOPTED_METADATA_KEY);
-        if (aMethods) {
-          for (const m of aMethods) (this as any)._invokeLifecycleMethod(m, hostSet);
-        }
+        for (const m of aMethods) (this as any)._invokeLifecycleMethod(m.propertyKey, hostSet);
         (this as any)._executeSwcScript('swc-on-adopted', hostSet);
         (this as any)._executeSwcScript('swc-on-after-adopted', hostSet);
       };

package/src/decorators/emitCustomEvent.ts

@@ -8,6 +8,22 @@ export interface EmitCustomEventBaseOptions {
   composed?: boolean;
   cancelable?: boolean;
   filter?: (target: EventTarget, detail: any, meta: { currentThis: any, helper: HelperHostSet }) => boolean;
+  /**
+   * Custom key to extract value from return object.
+   * If not provided, uses EMIT_CUSTOM_EVENT_METADATA_KEY by default.
+   * Useful when multiple @emitCustomEvent decorators are on the same method.
+   * 
+   * Example:
+   * @emitCustomEvent('$appHost', 'event1', { valueKey: 'detail1' })
+   * @emitCustomEvent('$appHost', 'event2', { valueKey: 'detail2' })
+   * myMethod() {
+   *   return {
+   *     detail1: { type: 'event1', data: 'value1' },
+   *     detail2: { type: 'event2', data: 'value2' }
+   *   };
+   * }
+   */
+  valueKey?: symbol | string;
 }
 
 type Options = (EmitCustomEventBaseOptions & SwcQueryOptions) | (EmitCustomEventBaseOptions & SwcQueryOptions & { attributeName?: string });
@@ -122,6 +138,9 @@ export const getEmitCustomEventMetadataList = (target: any): EmitCustomEventMeta
   return ReflectUtils.getMetadata(EMIT_CUSTOM_EVENT_METADATA_KEY, constructor);
 };
 
+// --- Aliases: emit... ---
+export const emit = emitCustomEvent;
+
 /**
  * @emitCustomEventThis decorator - simplified version of @emitCustomEvent for $this selector
  */