@dooboostore/simple-web-component 1.0.41 → 1.0.42

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dooboostore/simple-web-component",
-  "version": "1.0.41",
+  "version": "1.0.42",
   "license": "MIT",
   "type": "module",
   "main": "./dist/cjs/index.js",
@@ -67,7 +67,11 @@
   },
   "author": "dooboostore <dooboostore@gmail.com> (https://github.com/dooboostore)",
   "peerDependencies": {
-    "reflect-metadata": "^0.2.2"
+    "reflect-metadata": "^0.2.2",
+    "@dooboostore/core": "1.0.32",
+    "@dooboostore/simple-boot": "1.0.56",
+    "@dooboostore/core-web": "1.0.12",
+    "@dooboostore/core-node": "1.0.12"
   },
   "devDependencies": {
     "@babel/core": "^7.24.0",
@@ -91,11 +95,7 @@
     "typescript": "^5.9.2",
     "webpack": "^5.93.0",
     "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^5.2.0",
-    "@dooboostore/core": "1.0.32",
-    "@dooboostore/core-node": "1.0.12",
-    "@dooboostore/core-web": "1.0.12",
-    "@dooboostore/simple-boot": "1.0.56"
+    "webpack-dev-server": "^5.2.0"
   },
   "scripts": {
     "clean": "rm -rf dist",

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/lifecycles.ts

@@ -26,12 +26,21 @@ export interface InnerHtmlMetadata {
 
 export interface OnConnectedOptions {
   ssrFirst?: boolean;
+  order?: number;
 }
 export interface OnConnectedMetadata {
   propertyKey: string | symbol;
   options: OnConnectedOptions;
 }
 
+export interface LifecycleOptions {
+  order?: number;
+}
+export interface LifecycleMetadata {
+  propertyKey: string | symbol;
+  order?: number;
+}
+
 
 export function onConnectedBefore(options: OnConnectedOptions): MethodDecorator;
 export function onConnectedBefore(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
@@ -78,35 +87,107 @@ export function onConnectedAfter(arg1?: OnConnectedOptions | Object, arg2?: stri
 }
 
 
-function createLifecycleDecorator(metadataKey: symbol): MethodDecorator {
-  return (target: Object, propertyKey: string | symbol) => {
-    const constructor = target.constructor;
-    let list = ReflectUtils.getOwnMetadata(metadataKey, constructor) as (string | symbol)[];
-    if (!list) {
-      list = [];
-      ReflectUtils.defineMetadata(metadataKey, list, constructor);
+function createLifecycleDecorator(metadataKey: symbol): ((options?: LifecycleOptions) => MethodDecorator) & MethodDecorator {
+  const decorator = (options?: LifecycleOptions): MethodDecorator => {
+    return (target: Object, propertyKey: string | symbol) => {
+      const constructor = target.constructor;
+      let list = ReflectUtils.getOwnMetadata(metadataKey, constructor) as LifecycleMetadata[];
+      if (!list) {
+        list = [];
+        ReflectUtils.defineMetadata(metadataKey, list, constructor);
+      }
+      list.push({ propertyKey, order: options?.order ?? 0 });
+    };
+  };
+
+  // Support both @decorator and @decorator() syntax
+  return Object.assign(
+    (target: Object, propertyKey: string | symbol) => {
+      const constructor = target.constructor;
+      let list = ReflectUtils.getOwnMetadata(metadataKey, constructor) as LifecycleMetadata[];
+      if (!list) {
+        list = [];
+        ReflectUtils.defineMetadata(metadataKey, list, constructor);
+      }
+      list.push({ propertyKey, order: 0 });
+    },
+    { __isDecorator: true, __decorator: decorator }
+  ) as any;
+}
+
+// Helper to handle both @decorator and @decorator() syntax
+function createLifecycleDecoratorWithOptions(metadataKey: symbol) {
+  return function(optionOrTarget?: LifecycleOptions | Object, propertyKey?: string | symbol): MethodDecorator | void {
+    if (propertyKey) {
+      // Direct decorator usage: @decorator
+      const constructor = (optionOrTarget as Object).constructor;
+      let list = ReflectUtils.getOwnMetadata(metadataKey, constructor) as LifecycleMetadata[];
+      if (!list) {
+        list = [];
+        ReflectUtils.defineMetadata(metadataKey, list, constructor);
+      }
+      list.push({ propertyKey, order: 0 });
+      return;
     }
-    list.push(propertyKey);
+
+    // Decorator with options: @decorator({ order: 1 })
+    return (target: Object, propertyKey: string | symbol) => {
+      const constructor = target.constructor;
+      let list = ReflectUtils.getOwnMetadata(metadataKey, constructor) as LifecycleMetadata[];
+      if (!list) {
+        list = [];
+        ReflectUtils.defineMetadata(metadataKey, list, constructor);
+      }
+      list.push({ propertyKey, order: (optionOrTarget as LifecycleOptions)?.order ?? 0 });
+    };
   };
 }
 
-export const onInitialize = createLifecycleDecorator(ON_INITIALIZE_METADATA_KEY);
-// export const onConnectedBefore = createLifecycleDecorator(ON_BEFORE_CONNECTED_METADATA_KEY);
-// export const onConnectedAfter = createLifecycleDecorator(ON_AFTER_CONNECTED_METADATA_KEY);
-// export const onConnected = onConnectedAfter;
+export function onInitialize(options?: LifecycleOptions): MethodDecorator;
+export function onInitialize(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
+export function onInitialize(optionOrTarget?: LifecycleOptions | Object, propertyKey?: string | symbol): MethodDecorator | void {
+  return createLifecycleDecoratorWithOptions(ON_INITIALIZE_METADATA_KEY)(optionOrTarget, propertyKey);
+}
+
+export function onDisconnectedBefore(options?: LifecycleOptions): MethodDecorator;
+export function onDisconnectedBefore(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
+export function onDisconnectedBefore(optionOrTarget?: LifecycleOptions | Object, propertyKey?: string | symbol): MethodDecorator | void {
+  return createLifecycleDecoratorWithOptions(ON_BEFORE_DISCONNECTED_METADATA_KEY)(optionOrTarget, propertyKey);
+}
+
+export function onDisconnectedAfter(options?: LifecycleOptions): MethodDecorator;
+export function onDisconnectedAfter(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
+export function onDisconnectedAfter(optionOrTarget?: LifecycleOptions | Object, propertyKey?: string | symbol): MethodDecorator | void {
+  return createLifecycleDecoratorWithOptions(ON_AFTER_DISCONNECTED_METADATA_KEY)(optionOrTarget, propertyKey);
+}
 
-export const onDisconnectedBefore = createLifecycleDecorator(ON_BEFORE_DISCONNECTED_METADATA_KEY);
-export const onDisconnectedAfter = createLifecycleDecorator(ON_AFTER_DISCONNECTED_METADATA_KEY);
 export const onDisconnected = onDisconnectedAfter;
 
-export const onAdoptedBefore = createLifecycleDecorator(ON_BEFORE_ADOPTED_METADATA_KEY);
-export const onAdoptedAfter = createLifecycleDecorator(ON_AFTER_ADOPTED_METADATA_KEY);
+export function onAdoptedBefore(options?: LifecycleOptions): MethodDecorator;
+export function onAdoptedBefore(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
+export function onAdoptedBefore(optionOrTarget?: LifecycleOptions | Object, propertyKey?: string | symbol): MethodDecorator | void {
+  return createLifecycleDecoratorWithOptions(ON_BEFORE_ADOPTED_METADATA_KEY)(optionOrTarget, propertyKey);
+}
+
+export function onAdoptedAfter(options?: LifecycleOptions): MethodDecorator;
+export function onAdoptedAfter(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
+export function onAdoptedAfter(optionOrTarget?: LifecycleOptions | Object, propertyKey?: string | symbol): MethodDecorator | void {
+  return createLifecycleDecoratorWithOptions(ON_AFTER_ADOPTED_METADATA_KEY)(optionOrTarget, propertyKey);
+}
+
 export const onAdopted = onAdoptedAfter;
 
-export const onAddEventListener = createLifecycleDecorator(ON_ADD_EVENT_LISTENER_METADATA_KEY);
+export function onConnectedSwcApp(options?: LifecycleOptions): MethodDecorator;
+export function onConnectedSwcApp(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
+export function onConnectedSwcApp(optionOrTarget?: LifecycleOptions | Object, propertyKey?: string | symbol): MethodDecorator | void {
+  return createLifecycleDecoratorWithOptions(ON_CONNECTED_SWC_APP_METADATA_KEY)(optionOrTarget, propertyKey);
+}
 
-export const onConnectedSwcApp = createLifecycleDecorator(ON_CONNECTED_SWC_APP_METADATA_KEY);
-export const onConnectedCompleted = createLifecycleDecorator(ON_CONNECTED_COMPLETED_METADATA_KEY);
+export function onConnectedCompleted(options?: LifecycleOptions): MethodDecorator;
+export function onConnectedCompleted(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
+export function onConnectedCompleted(optionOrTarget?: LifecycleOptions | Object, propertyKey?: string | symbol): MethodDecorator | void {
+  return createLifecycleDecoratorWithOptions(ON_CONNECTED_COMPLETED_METADATA_KEY)(optionOrTarget, propertyKey);
+}
 
 
 
@@ -160,21 +241,34 @@ export function onConnected(optionOrTarget: InnerHtmlOptions | Object, propertyK
 /**
  * 프로토타입 체인을 순회하며 모든 라이프사이클 메서드를 수집합니다.
  */
-// export const findAllLifecycleMetadata = <T = (string | symbol)[]>(target: any, metadataKey: symbol): T | undefined => {
-export const findAllLifecycleMetadata = (target: any, metadataKey: symbol): (string | symbol)[] => {
-  const results = ReflectUtils.findAllMetadataFlatten(metadataKey, target)??[];
-  return results;
+export const findAllLifecycleMetadata = (target: any, metadataKey: symbol): LifecycleMetadata[] => {
+  const constructor = target instanceof Function ? target : target.constructor;
+  const results = ReflectUtils.getOwnMetadata(metadataKey, constructor) as LifecycleMetadata[] ?? [];
+  // Sort by order (default 0 if not specified)
+  return [...results].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
 };
 
 export const findAllOnConnectedMetadata = (target: any): InnerHtmlMetadata[] => {
   const constructor = target instanceof Function ? target : target.constructor;
-  return ReflectUtils.getMetadata(ON_CONNECTED_METADATA_KEY, constructor) ?? [];
+  const results = ReflectUtils.getMetadata(ON_CONNECTED_METADATA_KEY, constructor) ?? [];
+  // Sort by order (default 0 if not specified)
+  return [...results].sort((a, b) => {
+    const orderA = (a.options as any)?.order ?? 0;
+    const orderB = (b.options as any)?.order ?? 0;
+    return orderA - orderB;
+  });
 };
+
 export const findAllOnConnectedBeforeMetadata = (target: any): OnConnectedMetadata[] => {
   const constructor = target instanceof Function ? target : target.constructor;
-  return ReflectUtils.getMetadata(ON_BEFORE_CONNECTED_METADATA_KEY, constructor) ?? [];
+  const results = ReflectUtils.getMetadata(ON_BEFORE_CONNECTED_METADATA_KEY, constructor) ?? [];
+  // Sort by order
+  return [...results].sort((a, b) => (a.options?.order ?? 0) - (b.options?.order ?? 0));
 };
+
 export const findAllOnConnectedAfterMetadata = (target: any): OnConnectedMetadata[] => {
   const constructor = target instanceof Function ? target : target.constructor;
-  return ReflectUtils.getMetadata(ON_AFTER_CONNECTED_METADATA_KEY, constructor) ?? [];
+  const results = ReflectUtils.getMetadata(ON_AFTER_CONNECTED_METADATA_KEY, constructor) ?? [];
+  // Sort by order
+  return [...results].sort((a, b) => (a.options?.order ?? 0) - (b.options?.order ?? 0));
 };

package/src/decorators/subscribeSwcAppRouteChangeWhileConnected.ts

@@ -76,7 +76,11 @@ export function subscribeSwcAppRouteChangeWhileConnected(targetOrOptions?: any,
 }
 
 // Helper function to retrieve route change subscribers metadata
-export const getSubscribeSwcAppRouteChangeWhileConnectedMetadata = (target: any): SwcAppRouteChangeSubscriberMetadata[] | undefined => {
+export const getSubscribeSwcAppRouteChangeWhileConnectedMetadata = (target: any): SwcAppRouteChangeSubscriberMetadata[] => {
   const constructor = target instanceof Function ? target : target.constructor;
-  return ReflectUtils.getOwnMetadata(SUBSCRIBE_SWC_APP_ROUTE_CHANGE_WHILE_CONNECTED_METADATA_KEY, constructor);
+  const results = ReflectUtils.getOwnMetadata(SUBSCRIBE_SWC_APP_ROUTE_CHANGE_WHILE_CONNECTED_METADATA_KEY, constructor);
+  if (!results) return [];
+  
+  // Sort by order (default 0 if not specified)
+  return [...results].sort((a, b) => (a.options?.order ?? 0) - (b.options?.order ?? 0));
 };

package/src/elements/SwcAppMixin.ts

@@ -81,18 +81,12 @@ export function SwcAppMixin<T extends { new(...args: any[]): HTMLElement }>(Base
 
       try {
         const routeChangeSubscribers = getSubscribeSwcAppRouteChangeWhileConnectedMetadata(instance);
-        if (routeChangeSubscribers && Array.isArray(routeChangeSubscribers)) {
+        if (routeChangeSubscribers.length > 0) {
           console.log('[SWC-MIXIN] Route change subscribers found')
           
-          // Sort by order (default 0 if not specified)
-          const sortedSubscribers = [...routeChangeSubscribers].sort((a, b) => {
-            const orderA = a.options?.order ?? 0;
-            const orderB = b.options?.order ?? 0;
-            return orderA - orderB;
-          });
-          
+          // Subscribers are already sorted by order from getSubscribeSwcAppRouteChangeWhileConnectedMetadata
           // Execute subscribers in order, stop if one returns a value
-          for (const metadata of sortedSubscribers) {
+          for (const metadata of routeChangeSubscribers) {
             const methodName = metadata.propertyKey;
             let pathPattern = metadata.options?.path as any;
             const filter = metadata.options?.filter;
@@ -156,9 +150,9 @@ export function SwcAppMixin<T extends { new(...args: any[]): HTMLElement }>(Base
         }
         this._swc_connected_instance.add(instance);
 
-        const connectedSwcAppCallBacks = findAllLifecycleMetadata(instance, ON_CONNECTED_SWC_APP_METADATA_KEY) ?? [];
+        const connectedSwcAppCallBacks = findAllLifecycleMetadata(instance, ON_CONNECTED_SWC_APP_METADATA_KEY);
         for (let connectedSwcAppCallBack of connectedSwcAppCallBacks) {
-          await (instance as any)?._invokeLifecycleMethod?.(connectedSwcAppCallBack);
+          await (instance as any)?._invokeLifecycleMethod?.(connectedSwcAppCallBack.propertyKey);
         }
 
         if (this._childrenConnectedDoneInterval) {