@dooboostore/simple-web-component 1.0.12 → 1.0.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dooboostore/simple-web-component",
-  "version": "1.0.12",
+  "version": "1.0.14",
   "license": "MIT",
   "type": "module",
   "main": "./dist/cjs/index.js",
@@ -81,9 +81,9 @@
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^5.2.0",
     "@dooboostore/core": "1.0.28",
+    "@dooboostore/core-node": "1.0.10",
     "@dooboostore/core-web": "1.0.9",
-    "@dooboostore/simple-boot": "1.0.53",
-    "@dooboostore/core-node": "1.0.10"
+    "@dooboostore/simple-boot": "1.0.53"
   },
   "scripts": {
     "clean": "rm -rf dist",

package/src/decorators/elementDefine.ts

@@ -9,6 +9,9 @@ import { getStateMetadataList } from './state';
 import { getEmitCustomEventMetadataList } from './emitCustomEvent';
 import { SwcUtils, SWC_NOT_FOUND } from '../utils/Utils';
 import { HTML_TAG_ENTRIES } from '../config/config';
+import {getInject, SituationTypeContainer, SituationTypeContainers} from '@dooboostore/simple-boot/decorators/inject/Inject';
+import { InjectSituationType, HostSet } from '../elements/SwcInterfaces';
+import { ConstructorType } from '@dooboostore/core/types';
 
 export interface ElementConfig {
   name: string;
@@ -83,11 +86,8 @@ export const elementDefine =
       private _internalStates = new Map<string | symbol, any>();
       private _externalSources = new Map<string, HTMLElement>();
 
-      // name→value 컨텍스트 반환 (applyData의 hostContext용)
       _getHostContext(): Record<string, any> {
         const ctx: Record<string, any> = {};
-
-        // 1. @state 및 @attribute 속성들 수집
         if (stateList) {
           stateList.forEach(meta => {
             const name = meta.options.name!;
@@ -102,19 +102,10 @@ export const elementDefine =
             ctx[name] = val;
           });
         }
-
-        // 2. 'as' 별칭 및 기본 'value' 처리
-        const alias = this.getAttribute('as');
         const hostVal = (this as any).value !== undefined ? (this as any).value : this;
-
-        // 항상 'value'로 접근 가능하도록 유지
         ctx['value'] = hostVal;
-
-        if (alias && alias !== 'value') {
-          // 사용자가 지정한 별칭으로도 접근 가능 (예: as="list" -> {{list}})
-          ctx[alias] = hostVal;
-        }
-
+        const alias = this.getAttribute('as');
+        if (alias && alias !== 'value') ctx[alias] = hostVal;
         return ctx;
       }
 
@@ -122,15 +113,11 @@ export const elementDefine =
         return mergedObservedAttributes;
       }
 
-      private _executeSwcScript(attrName: string, extraArgs: Record<string, any> = {}) {
+      private _executeSwcScript(attrName: string, hostSet: HostSet, extraArgs: Record<string, any> = {}) {
         const script = this.getAttribute(attrName);
         if (script) {
           try {
-            const $hosts = SwcUtils.findAllSwcHosts(this as any);
-            const $firstHost = $hosts[0] || null;
-            const $lastHost = $hosts[$hosts.length - 1] || null;
-            const $host = $lastHost;
-            const args = { $host, $hosts, $firstHost, $lastHost, ...SWC_DOM_HELPERS, ...extraArgs };
+            const args = { ...hostSet, ...SWC_DOM_HELPERS, ...extraArgs };
             const argNames = Object.keys(args);
             const argValues = Object.values(args);
             new Function(...argNames, script).apply(this, argValues);
@@ -140,9 +127,32 @@ export const elementDefine =
         }
       }
 
+      private async _invokeLifecycleMethod(methodName: string | symbol, hostSet: HostSet, extraArgs: any[] = []) {
+        if (typeof (this as any)[methodName] !== 'function') return;
+        const app = hostSet.$appHost?.simpleApplication;
+
+        if (app) {
+          const otherStorage = new Map<any, any>();
+          const situations = new SituationTypeContainers([new SituationTypeContainer({ situationType: InjectSituationType.HOST_SET, data: hostSet }), new SituationTypeContainer({ situationType: InjectSituationType.APP_HOST, data: hostSet.$appHost }), new SituationTypeContainer({ situationType: InjectSituationType.APP_HOSTS, data: hostSet.$appHosts }), new SituationTypeContainer({ situationType: InjectSituationType.HOST, data: hostSet.$host }), new SituationTypeContainer({ situationType: InjectSituationType.HOSTS, data: hostSet.$hosts }), new SituationTypeContainer({ situationType: InjectSituationType.FIRST_HOST, data: hostSet.$firstHost }), new SituationTypeContainer({ situationType: InjectSituationType.LAST_HOST, data: hostSet.$lastHost }), new SituationTypeContainer({ situationType: InjectSituationType.FIRST_APP_HOST, data: hostSet.$firstAppHost }), new SituationTypeContainer({ situationType: InjectSituationType.LAST_APP_HOST, data: hostSet.$lastAppHost })]);
+          otherStorage.set(SituationTypeContainers, situations);
+
+          return app.simstanceManager.executeBindParameterSimPromise(
+            {
+              target: this,
+              targetKey: methodName,
+              inputParameters: extraArgs
+            },
+            otherStorage
+          );
+        } else {
+          return (this as any)[methodName](hostSet,...extraArgs);
+        }
+      }
+
       constructor(...args: any[]) {
         super(...args);
-        this._executeSwcScript('swc-on-constructor');
+        const hostSet = SwcUtils.getHostSet(this as any);
+        this._executeSwcScript('swc-on-constructor', hostSet);
 
         if (stateList) {
           stateList.forEach(meta => {
@@ -168,7 +178,6 @@ export const elementDefine =
             });
           });
         }
-
         if (attributePropsList) {
           attributePropsList.forEach(meta => {
             const key = meta.propertyKey;
@@ -176,7 +185,6 @@ export const elementDefine =
             const attrValue = this.getAttribute(attrName);
             let initialVal = attrValue !== null ? attrValue : (this as any)[key];
             if (initialVal === undefined) initialVal = null;
-
             if (attrValue !== null) {
               if (meta.options.type === Number) initialVal = Number(attrValue);
               else if (meta.options.type === Boolean) initialVal = true;
@@ -186,7 +194,6 @@ export const elementDefine =
                 } catch (e) {}
               }
             }
-
             this._internalStates.set(key, initialVal);
             Object.defineProperty(this, key, {
               get: () => this._internalStates.get(key),
@@ -194,7 +201,6 @@ export const elementDefine =
                 if (this._internalStates.get(key) === newVal) return;
                 this._internalStates.set(key, newVal);
                 if (typeof (this as any)._updateState === 'function') (this as any)._updateState(attrName);
-                // 객체/배열은 setAttribute로 반영하지 않음 - attributeChangedCallback 무한루프 방지
                 if (!meta.options.disableReflect && this.setAttribute && typeof newVal !== 'object') {
                   if (newVal === null || newVal === undefined || newVal === false) this.removeAttribute(attrName);
                   else this.setAttribute(attrName, String(newVal));
@@ -205,7 +211,6 @@ export const elementDefine =
             });
           });
         }
-
         const innerHtmlList = getInnerHtmlMetadataList(this);
         if (innerHtmlList?.some(it => it.options.useShadow === true) && !this.shadowRoot) {
           this.attachShadow({ mode: 'open' });
@@ -213,7 +218,6 @@ export const elementDefine =
       }
 
       private _isSyncing = false;
-
       private _syncDecorators() {
         if (this._isSyncing) return;
         this._isSyncing = true;
@@ -240,7 +244,6 @@ export const elementDefine =
           }
           return roots;
         };
-
         const queryMetadata = getQueryMetadata(this);
         if (queryMetadata) {
           queryMetadata
@@ -265,7 +268,6 @@ export const elementDefine =
               }
             });
         }
-
         const queryAllMetadata = getQueryAllMetadata(this);
         if (queryAllMetadata) {
           queryAllMetadata
@@ -280,7 +282,6 @@ export const elementDefine =
               (this as any)[it.propertyKey](allElements);
             });
         }
-
         const eventListeners = getAddEventListenerMetadata(this);
         if (eventListeners) {
           eventListeners.forEach(it => {
@@ -326,7 +327,6 @@ export const elementDefine =
             if (node.nodeType === Node.TEXT_NODE) this._parseAndBind(node, 'text');
             else if (node.nodeType === Node.ELEMENT_NODE) {
               const el = node as HTMLElement;
-
               const alias = el.getAttribute('as');
               if (alias && !this._externalSources.has(alias)) {
                 this._externalSources.set(alias, el);
@@ -337,15 +337,10 @@ export const elementDefine =
                   this._boundElements.set(el, bound);
                 }
                 if (!bound.has(aliasKey)) {
-                  // 부모가 자식의 STATE_CHANGE_EVENT를 듣고 업데이트 (기존 버블링용)
                   el.addEventListener(STATE_CHANGE_EVENT, () => this._updateState(alias));
                   bound.add(aliasKey);
                 }
               }
-
-              // --- [FIX] 부모 호스트의 상태 변경 구독 ---
-              // 현재 엘리먼트가 상위 호스트의 별칭(예: t1)을 참조하고 있다면,
-              // 상위 호스트에서 발생하는 이벤트를 감지해야 함.
               const $hosts = SwcUtils.findAllSwcHosts(el);
               $hosts.forEach(host => {
                 const hAlias = host.getAttribute('as');
@@ -357,18 +352,16 @@ export const elementDefine =
                     this._boundElements.set(host, hBound);
                   }
                   if (!hBound.has(hostBindKey)) {
-                    host.addEventListener(STATE_CHANGE_EVENT, () => {
-                      // 부모 별칭이 바뀌었으므로, 해당 별칭을 사용하는 자신의 바인딩들 갱신
-                      this._updateState(hAlias);
-                    });
+                    host.addEventListener(STATE_CHANGE_EVENT, () => this._updateState(hAlias));
                     hBound.add(hostBindKey);
                   }
                 }
               });
-
               Array.from(el.attributes).forEach(attr => {
                 if (attr.name.startsWith('swc-on-') && !swcLifecycleAttributes.includes(attr.name)) {
                   const eventName = attr.name.substring(7);
+                  const script = attr.value;
+                  const hostSet = SwcUtils.getHostSet(el);
                   if (eventName === 'connected') {
                     const eventKey = `attr-once:${attr.name}`;
                     let bound = this._boundElements.get(el);
@@ -377,14 +370,11 @@ export const elementDefine =
                       this._boundElements.set(el, bound);
                     }
                     if (!bound.has(eventKey)) {
-                      const script = el.getAttribute(attr.name);
                       if (script) {
                         try {
-                          const $hosts = SwcUtils.findAllSwcHosts(el);
-                          const $firstHost = $hosts[0] || null;
-                          const $lastHost = $hosts[$hosts.length - 1] || null;
-                          const $host = $lastHost;
-                          new Function('event', '$data', '$host', '$hosts', '$firstHost', '$lastHost', ...SWC_DOM_HELPER_KEYS, script).call(el, null, null, $host, $hosts, $firstHost, $lastHost, ...SWC_DOM_HELPER_VALS());
+                          const argNames = Object.keys(hostSet);
+                          const argValues = Object.values(hostSet);
+                          new Function('event', '$data', ...argNames, ...SWC_DOM_HELPER_KEYS, script).call(el, null, null, ...argValues, ...SWC_DOM_HELPER_VALS());
                         } catch (e) {
                           console.error(`[SWC] Failed to execute ${attr.name} script:`, e);
                         }
@@ -393,7 +383,6 @@ export const elementDefine =
                     }
                     return;
                   }
-
                   const eventKey = `attr-event:${attr.name}`;
                   let bound = this._boundElements.get(el);
                   if (!bound) {
@@ -402,30 +391,23 @@ export const elementDefine =
                   }
                   if (!bound.has(eventKey)) {
                     const handler = (event: any) => {
-                      const rawScript = el.getAttribute(attr.name);
-                      if (rawScript) {
+                      if (script) {
                         try {
-                          const $hosts = SwcUtils.findAllSwcHosts(el);
-                          const $firstHost = $hosts[0] || null;
-                          const $lastHost = $hosts[$hosts.length - 1] || null;
-                          const $host = $lastHost;
-                          new Function('event', '$data', '$host', '$hosts', '$firstHost', '$lastHost', ...SWC_DOM_HELPER_KEYS, rawScript).call(el, event, (event as CustomEvent).detail, $host, $hosts, $firstHost, $lastHost, ...SWC_DOM_HELPER_VALS());
+                          const argNames = Object.keys(hostSet);
+                          const argValues = Object.values(hostSet);
+                          new Function('event', '$data', ...argNames, ...SWC_DOM_HELPER_KEYS, script).call(el, event, (event as CustomEvent).detail, ...argValues, ...SWC_DOM_HELPER_VALS());
                         } catch (e) {
                           console.error(`[SWC] Failed to execute ${attr.name} script:`, e);
                         }
                       }
                     };
                     el.addEventListener(eventName, handler);
-
                     bound.add(eventKey);
                     if (config.autoRemoveEventListeners) this._activeListeners.push({ el, type: eventName, handler });
                   }
                 }
                 this._parseAndBind(attr, 'attribute', el);
               });
-
-              // --- Scope Protection: Don't scan inside child SWC components ---
-              // is 어트리뷰트 방식 커스텀 엘리먼트도 포함 (swc-for-of-*, swc-if-* 등)
               const isSwcChild = (el as any)._swcId || getElementConfig(el.constructor) || (el.getAttribute('is')?.startsWith('swc-') ?? false);
               if (isSwcChild) {
                 const next = walker.nextSibling();
@@ -446,18 +428,15 @@ export const elementDefine =
         const content = (node as any)[tplKey] || node.textContent || '';
         const matches = Array.from(content.matchAll(/{{(.*?)}}/g)) as any[];
         if (matches.length === 0 || isAlreadyBound) return;
-
         matches.forEach(match => {
           const fullPath = (match[1] as string).trim();
           const rootName = fullPath.split('.')[0];
           const isState = stateList?.some(s => s.options.name === rootName);
           const isAttr = attributePropsList?.some(a => a.options.name === rootName);
-          const isLogicKey = (this as any)._asKey === rootName || (this as any)._asIndexKey === rootName;
+          const isLogicKey = (this as any)._asKey === rootName || (this as any)._asItemKey === rootName || (this as any)._asIndexKey === rootName;
           const isExternal = this._externalSources.has(rootName);
           const isSelfAlias = this.getAttribute('as') === rootName;
           const isInstanceProp = rootName in this;
-
-          // --- [FIX] 부모 호스트 체인에서 별칭 확인 추가 ---
           let isParentAlias = false;
           let curr: any = (this as any).parentElement || ((this as any).getRootNode?.() as any)?.host;
           while (curr) {
@@ -467,9 +446,7 @@ export const elementDefine =
             }
             curr = curr.parentElement || (curr.getRootNode?.() as any)?.host;
           }
-
           if (!isState && !isAttr && !isLogicKey && !isExternal && !isSelfAlias && !isInstanceProp && !isParentAlias) return;
-
           if (!this._stateBindings.has(rootName)) this._stateBindings.set(rootName, []);
           if (!(node as any)[tplKey]) (node as any)[tplKey] = content;
           if (!(node as any).__swc_bound_ids) (node as any).__swc_bound_ids = new Set();
@@ -480,7 +457,6 @@ export const elementDefine =
       }
 
       private _isUpdatingState = false;
-
       private _updateState(stateName: string) {
         if (!this._stateBindings) return;
         if (this._isUpdatingState) return;
@@ -489,15 +465,7 @@ export const elementDefine =
           this._executeBindingUpdate(stateName);
           const selfAlias = this.getAttribute('as');
           if (selfAlias && selfAlias !== stateName) this._executeBindingUpdate(selfAlias);
-
-          // --- [FIX] 자식들에게 상태 변경 알림 ---
-          this.dispatchEvent(
-            new CustomEvent(STATE_CHANGE_EVENT, {
-              bubbles: true,
-              composed: true,
-              detail: { source: stateName, host: this }
-            })
-          );
+          this.dispatchEvent(new CustomEvent(STATE_CHANGE_EVENT, { bubbles: true, composed: true, detail: { source: stateName, host: this } }));
         } finally {
           this._isUpdatingState = false;
         }
@@ -533,15 +501,12 @@ export const elementDefine =
               const sMeta = cStates?.find(s => s.options.name === root);
               const aMeta = cAttrs?.find(a => a.options.name === root);
               if (sMeta || aMeta) {
-                // 프로퍼티 키로 인스턴스에서 루트 값을 먼저 가져온 뒤 나머지 경로를 탐색
                 const propKey = sMeta ? String(sMeta.propertyKey) : String(aMeta!.propertyKey);
                 const rootVal = (current as any)[propKey];
                 const subPath = path.split('.').slice(1).join('.');
                 if (subPath) {
-                  // superUser.name → rootVal = superUser 객체, subPath = "name"
                   val = SwcUtils.getValueByPath(rootVal, subPath, subPath.split('.')[0]);
                   if (val === SWC_NOT_FOUND) {
-                    // 단순 점 경로 직접 접근
                     const parts = subPath.split('.');
                     let cur = rootVal;
                     for (const p of parts) {
@@ -554,18 +519,14 @@ export const elementDefine =
                     if (cur !== undefined && cur !== SWC_NOT_FOUND) val = cur;
                   }
                 } else {
-                  // 루트 자체가 값 (e.g. {{superUser}} 전체)
                   val = rootVal;
                 }
                 if (val !== SWC_NOT_FOUND && val !== undefined) break;
               }
-
-              // Fallback: check raw property on instance even if not @state
               if (root in current) {
                 val = SwcUtils.getValueByPath(current, path, root);
                 if (val !== SWC_NOT_FOUND) break;
               }
-
               current = current.parentElement || (current.getRootNode() as any).host;
             }
             if (val !== SWC_NOT_FOUND && val !== undefined) {
@@ -576,7 +537,6 @@ export const elementDefine =
                 const ownerAttrs = getAttributeMetadataList(bin.owner.constructor);
                 const attrMeta = ownerAttrs?.find(a => a.options.name === attrName);
                 const propName = attrMeta ? String(attrMeta.propertyKey) : attrName.replace(/-([a-z])/g, g => g[1].toUpperCase());
-
                 if (val === null || val === undefined) {
                   bin.owner.removeAttribute(attrName);
                   if (propName in bin.owner) (bin.owner as any)[propName] = val;
@@ -595,11 +555,10 @@ export const elementDefine =
       }
 
       disconnectedCallback() {
-        this._executeSwcScript('swc-on-before-disconnected');
+        const hostSet = SwcUtils.getHostSet(this as any);
+        this._executeSwcScript('swc-on-before-disconnected', hostSet);
         const bMethods = getLifecycleMetadata<(string | symbol)[]>(this, ON_BEFORE_DISCONNECTED_METADATA_KEY);
-        bMethods?.forEach(m => {
-          if (typeof (this as any)[m] === 'function') (this as any)[m]();
-        });
+        bMethods?.forEach(m => this._invokeLifecycleMethod(m, hostSet));
         if (this._observer) this._observer.disconnect();
         if (this._shadowObserver) this._shadowObserver.disconnect();
         if (config.autoRemoveEventListeners) {
@@ -608,32 +567,31 @@ export const elementDefine =
         }
         if (super.disconnectedCallback) super.disconnectedCallback();
         const aMethods = getLifecycleMetadata<(string | symbol)[]>(this, ON_AFTER_DISCONNECTED_METADATA_KEY);
-        aMethods?.forEach(m => {
-          if (typeof (this as any)[m] === 'function') (this as any)[m]();
-        });
-        this._executeSwcScript('swc-on-after-disconnected');
+        aMethods?.forEach(m => this._invokeLifecycleMethod(m, hostSet));
+        this._executeSwcScript('swc-on-after-disconnected', hostSet);
       }
 
       adoptedCallback() {
-        this._executeSwcScript('swc-on-before-adopted');
+        const hostSet = SwcUtils.getHostSet(this as any);
+        this._executeSwcScript('swc-on-before-adopted', hostSet);
         const bMethods = getLifecycleMetadata<(string | symbol)[]>(this, ON_BEFORE_ADOPTED_METADATA_KEY);
-        bMethods?.forEach(m => {
-          if (typeof (this as any)[m] === 'function') (this as any)[m]();
-        });
+        bMethods?.forEach(m => this._invokeLifecycleMethod(m, hostSet));
         if (super.adoptedCallback) super.adoptedCallback();
         const aMethods = getLifecycleMetadata<(string | symbol)[]>(this, ON_AFTER_ADOPTED_METADATA_KEY);
-        aMethods?.forEach(m => {
-          if (typeof (this as any)[m] === 'function') (this as any)[m]();
-        });
-        this._executeSwcScript('swc-on-after-adopted');
+        aMethods?.forEach(m => this._invokeLifecycleMethod(m, hostSet));
+        this._executeSwcScript('swc-on-after-adopted', hostSet);
       }
 
       async connectedCallback() {
-        this._executeSwcScript('swc-on-before-connected');
+        // await new Promise(resolve => setTimeout(resolve, 0));
+        const hostSet = SwcUtils.getHostSet(this as any);
+        this._executeSwcScript('swc-on-before-connected', hostSet);
         const bMethods = getLifecycleMetadata<(string | symbol)[]>(this, ON_BEFORE_CONNECTED_METADATA_KEY);
-        bMethods?.forEach(m => {
-          if (typeof (this as any)[m] === 'function') (this as any)[m]();
-        });
+        if (bMethods) {
+          for (const m of bMethods) {
+            await this._invokeLifecycleMethod(m, hostSet);
+          }
+        }
         if (typeof (this as any).initCore === 'function') (this as any).initCore();
         const iHtmlList = getInnerHtmlMetadataList(this);
         let sContent = '';
@@ -651,12 +609,13 @@ export const elementDefine =
         if (lContent) this.innerHTML = lContent;
         (this as any)._syncDecorators();
 
+        // --- Root Host self-binding logic ---
         const isManagedByParent = !!SwcUtils.findNearestSwcHost(this as any);
-
         if (!isManagedByParent) {
           Array.from(this.attributes as any).forEach((attr: any) => {
-            if (attr.name.startsWith('swc-on-') && swcLifecycleAttributes.indexOf(attr.name) === -1) {
+            if (attr.name.startsWith('swc-on-') && !swcLifecycleAttributes.includes(attr.name)) {
               const eventName = attr.name.substring(7);
+              const script = attr.value;
               if (eventName === 'connected') {
                 const eventKey = `host-attr-once:${attr.name}`;
                 let bound = this._boundElements.get(this as any);
@@ -665,14 +624,11 @@ export const elementDefine =
                   this._boundElements.set(this as any, bound);
                 }
                 if (!bound.has(eventKey)) {
-                  const script = (this as any).getAttribute(attr.name);
                   if (script) {
                     try {
-                      const $hosts = SwcUtils.findAllSwcHosts(this as any);
-                      const $firstHost = $hosts[0] || null;
-                      const $lastHost = $hosts[$hosts.length - 1] || null;
-                      const $host = $lastHost;
-                      new Function('event', '$data', '$host', '$hosts', '$firstHost', '$lastHost', ...SWC_DOM_HELPER_KEYS, script).call(this, null, null, $host, $hosts, $firstHost, $lastHost, ...SWC_DOM_HELPER_VALS());
+                      const argNames = Object.keys(hostSet);
+                      const argValues = Object.values(hostSet);
+                      new Function('event', '$data', ...argNames, ...SWC_DOM_HELPER_KEYS, script).call(this, null, null, ...argValues, ...SWC_DOM_HELPER_VALS());
                     } catch (e) {
                       console.error(`[SWC] Failed to execute ${attr.name} script:`, e);
                     }
@@ -681,31 +637,25 @@ export const elementDefine =
                 }
                 return;
               }
-
               const eventKey = `host-attr-event:${attr.name}`;
               let bound = this._boundElements.get(this as any);
               if (!bound) {
                 bound = new Set();
                 this._boundElements.set(this as any, bound);
               }
-
               if (!bound.has(eventKey)) {
                 const handler = (event: any) => {
-                  const script = (this as any).getAttribute(attr.name);
                   if (script) {
                     try {
-                      const $hosts = SwcUtils.findAllSwcHosts(this as any);
-                      const $firstHost = $hosts[0] || null;
-                      const $lastHost = $hosts[$hosts.length - 1] || null;
-                      const $host = $lastHost;
-                      new Function('event', '$data', '$host', '$hosts', '$firstHost', '$lastHost', ...SWC_DOM_HELPER_KEYS, script).call(this, event, (event as CustomEvent).detail, $host, $hosts, $firstHost, $lastHost, ...SWC_DOM_HELPER_VALS());
+                      const argNames = Object.keys(hostSet);
+                      const argValues = Object.values(hostSet);
+                      new Function('event', '$data', ...argNames, ...SWC_DOM_HELPER_KEYS, script).call(this, event, (event as CustomEvent).detail, ...argValues, ...SWC_DOM_HELPER_VALS());
                     } catch (e) {
                       console.error(`[SWC] Failed to execute ${attr.name} script:`, e);
                     }
                   }
                 };
                 this.addEventListener(eventName, handler);
-
                 bound.add(eventKey);
                 if (config.autoRemoveEventListeners) this._activeListeners.push({ el: this as any, type: eventName, handler });
               }
@@ -714,7 +664,6 @@ export const elementDefine =
         }
 
         const mutationMetaList = getMutationSubscribeMetadataList(this);
-
         const fireMutationCallbacks = (mutationList: MutationRecord[], observer: MutationObserver, root: 'light' | 'shadow') => {
           mutationMetaList?.forEach(meta => {
             const r = meta.options.root ?? 'auto';
@@ -724,14 +673,12 @@ export const elementDefine =
             }
           });
         };
-
         this._observer = new (win as any).MutationObserver((mutationList: MutationRecord[], observer: MutationObserver) => {
           (this as any)._syncDecorators();
           fireMutationCallbacks(mutationList, observer, 'light');
         });
         // @ts-ignore
         this._observer.observe(this as any, { childList: true, subtree: true });
-
         if (this.shadowRoot) {
           this._shadowObserver = new (win as any).MutationObserver((mutationList: MutationRecord[], observer: MutationObserver) => {
             (this as any)._syncDecorators();
@@ -742,10 +689,12 @@ export const elementDefine =
         }
         if (super.connectedCallback) await super.connectedCallback();
         const aMethods = getLifecycleMetadata<(string | symbol)[]>(this, ON_AFTER_CONNECTED_METADATA_KEY);
-        aMethods?.forEach(m => {
-          if (typeof (this as any)[m] === 'function') (this as any)[m]();
-        });
-        this._executeSwcScript('swc-on-after-connected');
+        if (aMethods) {
+          for (const m of aMethods) {
+            await this._invokeLifecycleMethod(m, hostSet);
+          }
+        }
+        this._executeSwcScript('swc-on-after-connected', hostSet);
       }
 
       attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) {
@@ -754,9 +703,6 @@ export const elementDefine =
           attributePropsList.forEach(meta => {
             if (meta.options.name === name) {
               const current = (this as any)[meta.propertyKey];
-              // 객체/배열 타입은 attributeChangedCallback에서 setter를 재호출하지 않음
-              // (setter에서 setAttribute를 하지 않으므로 이 경로로 들어올 일이 없고,
-              //  외부에서 attribute를 직접 바꾸는 경우만 처리)
               if (typeof current === 'object' && current !== null) return;
               if (String(current) !== String(newValue)) (this as any)[meta.propertyKey] = newValue;
             }
@@ -765,10 +711,10 @@ export const elementDefine =
         if (typeof (this as any)._updateState === 'function') (this as any)._updateState(name);
         const aMethodsMap = getLifecycleMetadata(constructor, ON_ATTRIBUTE_CHANGED_METADATA_KEY) as Map<string, (string | symbol)[]>;
         const mKeys = aMethodsMap?.get(name);
-        if (mKeys && Array.isArray(mKeys))
-          mKeys.forEach(key => {
-            if (typeof (this as any)[key] === 'function') (this as any)[key](newValue, oldValue, name);
-          });
+        const hostSet = SwcUtils.getHostSet(this as any);
+        if (mKeys && Array.isArray(mKeys)) {
+          mKeys.forEach(key => this._invokeLifecycleMethod(key, hostSet, [newValue, oldValue, name]));
+        }
         if (emitCustomEventList) {
           const eMeta = emitCustomEventList.find(it => it.options.attributeName === name);
           if (eMeta) {
@@ -785,23 +731,34 @@ export const elementDefine =
           }
         }
         const wMethodsKeys = aMethodsMap?.get(ATTRIBUTE_CHANGED_WILDCARD);
-        if (wMethodsKeys && Array.isArray(wMethodsKeys))
-          wMethodsKeys.forEach(key => {
-            if (typeof (this as any)[key] === 'function') (this as any)[key](newValue, oldValue, name);
-          });
-        this._executeSwcScript('swc-on-attribute-changed', { $new: newValue, $old: oldValue, $name: name });
+        if (wMethodsKeys && Array.isArray(wMethodsKeys)) {
+          wMethodsKeys.forEach(key => this._invokeLifecycleMethod(key, hostSet, [newValue, oldValue, name]));
+        }
+        this._executeSwcScript('swc-on-attribute-changed', hostSet, { $new: newValue, $old: oldValue, $name: name });
       }
     };
 
+    // [METADATA INHERITANCE FIX]
+    // Copy method metadata from original constructor to NewClass
+    // This ensures @Inject and other decorators on methods work correctly in the wrapped class.
+    const originalProto = constructor.prototype;
+    const newProto = NewClass.prototype;
+    Object.getOwnPropertyNames(originalProto).forEach(name => {
+      if (name === 'constructor') return;
+      const keys = Reflect.getMetadataKeys(originalProto, name);
+      keys.forEach(key => {
+        const metadata = Reflect.getMetadata(key, originalProto, name);
+        Reflect.defineMetadata(key, metadata, newProto, name);
+      });
+    });
+
     ReflectUtils.defineMetadata(ELEMENT_CONFIG_KEY, config, NewClass);
     ReflectUtils.defineMetadata(ELEMENT_CONFIG_KEY, config, constructor);
-
     const registry = config.customElementRegistry || (typeof win !== 'undefined' ? win.customElements : undefined);
     if (registry && !registry.get(config.name)) {
       const options = config.extends ? { extends: config.extends } : undefined;
       registry.define(config.name, NewClass as any, options);
     }
-
     return NewClass as any;
   };
 

package/src/decorators/index.ts

@@ -0,0 +1,9 @@
+export * from  './addEventListener'
+export * from  './attribute'
+export * from  './elementDefine'
+export * from  './emitCustomEvent'
+export * from  './innerHtml'
+export * from  './lifecycles'
+export * from  './query'
+export * from  './queryAll'
+export * from  './state'