@dooboostore/simple-web-component 1.0.14 → 1.0.15

package/src/decorators/elementDefine.ts

@@ -3,29 +3,29 @@ import { getInnerHtmlMetadataList } from './innerHtml';
 import { getQueryMetadata } from './query';
 import { getQueryAllMetadata } from './queryAll';
 import { getAddEventListenerMetadata } from './addEventListener';
-import { getLifecycleMetadata, ON_BEFORE_CONNECTED_METADATA_KEY, ON_AFTER_CONNECTED_METADATA_KEY, ON_BEFORE_DISCONNECTED_METADATA_KEY, ON_AFTER_DISCONNECTED_METADATA_KEY, ON_BEFORE_ADOPTED_METADATA_KEY, ON_AFTER_ADOPTED_METADATA_KEY, ON_ADD_EVENT_LISTENER_METADATA_KEY, ON_ATTRIBUTE_CHANGED_METADATA_KEY, ATTRIBUTE_CHANGED_WILDCARD, getMutationSubscribeMetadataList } from './lifecycles';
-import { getAttributeMetadataList } from './attribute';
-import { getStateMetadataList } from './state';
+import { ON_BEFORE_CONNECTED_METADATA_KEY, ON_AFTER_CONNECTED_METADATA_KEY, ON_BEFORE_DISCONNECTED_METADATA_KEY, ON_AFTER_DISCONNECTED_METADATA_KEY, ON_BEFORE_ADOPTED_METADATA_KEY, ON_AFTER_ADOPTED_METADATA_KEY, ON_ADD_EVENT_LISTENER_METADATA_KEY, ATTRIBUTE_CHANGED_WILDCARD, findAllLifecycleMetadata } from './lifecycles';
 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 { changedAttribute, findAllAttributeChangedMetadata } from './changedAttribute';
+import { setAttribute, findAllSetAttributeMetadata } from './setAttribute';
+import { SwcUtils } from '../utils/Utils';
+import { HTML_TAG_ENTRIES, DOM_EVENT_NAMES } from '../config/config';
+import { SituationType, SituationTypeContainer, SituationTypeContainers } from '@dooboostore/simple-boot/decorators/inject/Inject';
 import { ConstructorType } from '@dooboostore/core/types';
+import { InjectSituationType, HostSet, SwcAppInterface } from '../types';
+
+// --- Core Interfaces & Types (Integrated) ---
 
 export interface ElementConfig {
   name: string;
   extends?: string;
   observedAttributes?: string[];
   customElementRegistry?: CustomElementRegistry;
-  autoRemoveEventListeners?: boolean;
   window?: Window;
 }
 
 export const ELEMENT_CONFIG_KEY = Symbol('simple-web-component:element-config');
-export const STATE_CHANGE_EVENT = 'swc:state-change';
 
-// --- 환경 초기화 헬퍼 ---
+// --- Environment Initialization Helper ---
 
 function buildEnv(configWindow?: Window) {
   const win: any = configWindow || (typeof window !== 'undefined' ? window : undefined);
@@ -47,6 +47,11 @@ function buildEnv(configWindow?: Window) {
   return { win, doc, builtInTagMap, domHelpers };
 }
 
+const getHandlers = (inst: any) => {
+  if (!inst.__swc_attributeEventHandlers) inst.__swc_attributeEventHandlers = new Map();
+  return inst.__swc_attributeEventHandlers;
+};
+
 export const elementDefine =
   (inConfig: ElementConfig | string): ClassDecorator =>
   (constructor: any) => {
@@ -67,51 +72,20 @@ export const elementDefine =
       config.extends = extendsTagName;
     }
 
-    const attributePropsList = getAttributeMetadataList(constructor);
-    const emitCustomEventList = getEmitCustomEventMetadataList(constructor);
-    const stateList = getStateMetadataList(constructor);
-    const observedFromProps = attributePropsList ? attributePropsList.map(it => it.options.name!) : [];
-    const observedFromEmits = emitCustomEventList ? emitCustomEventList.map(it => it.options.attributeName!) : [];
-    const swcLifecycleAttributes = ['swc-on-constructor', 'swc-on-before-connected', 'swc-on-after-connected', 'swc-on-before-disconnected', 'swc-on-after-disconnected', 'swc-on-before-adopted', 'swc-on-after-adopted', 'swc-on-attribute-changed'];
-    const mergedObservedAttributes = [...new Set([...(config.observedAttributes ?? []), ...observedFromProps, ...observedFromEmits, ...swcLifecycleAttributes])];
+    const emitCustomEventList = getEmitCustomEventMetadataList(constructor) || [];
+    const addEventListenerList = getAddEventListenerMetadata(constructor) || [];
+    const attrChangeMap = findAllAttributeChangedMetadata(constructor);
+    const setAttrMap = findAllSetAttributeMetadata(constructor);
+
+    const swcLifecycleAttributes = ['swc-on-constructor', 'swc-on-connected', 'swc-on-disconnected', 'swc-on-before-connected', 'swc-on-after-connected', 'swc-on-before-disconnected', 'swc-on-after-disconnected', 'swc-on-before-adopted', 'swc-on-after-adopted', 'swc-on-attribute-changed'];
+    const swcOnEvents = DOM_EVENT_NAMES.map(e => `swc-on-${e}`);
+
+    const mergedObservedAttributes = [...new Set([...(config.observedAttributes ?? []), ...attrChangeMap.keys(), ...setAttrMap.keys(), ...emitCustomEventList.map(it => it.options.attributeName!), ...swcLifecycleAttributes, ...swcOnEvents])];
+    const innerHtmlList = getInnerHtmlMetadataList(constructor) || [];
 
     const NewClass = class extends (constructor as any) {
       private _swcId = Math.random().toString(36).substring(2, 11);
-      private _observer: MutationObserver | null = null;
-      private _shadowObserver: MutationObserver | null = null;
-      private _boundElements = new WeakMap<Element, Set<string | symbol>>();
-      private _activeListeners: Array<{ el: Element | HTMLElement; type: string; handler: EventListener; options?: any }> = [];
       private _emitHandlers = new Map<string, EventListener>();
-      private _stateBindings = new Map<string, any[]>();
-      private _internalStates = new Map<string | symbol, any>();
-      private _externalSources = new Map<string, HTMLElement>();
-
-      _getHostContext(): Record<string, any> {
-        const ctx: Record<string, any> = {};
-        if (stateList) {
-          stateList.forEach(meta => {
-            const name = meta.options.name!;
-            const val = this._internalStates.get(meta.propertyKey);
-            ctx[name] = val;
-          });
-        }
-        if (attributePropsList) {
-          attributePropsList.forEach(meta => {
-            const name = meta.options.name!;
-            const val = this._internalStates.get(meta.propertyKey);
-            ctx[name] = val;
-          });
-        }
-        const hostVal = (this as any).value !== undefined ? (this as any).value : this;
-        ctx['value'] = hostVal;
-        const alias = this.getAttribute('as');
-        if (alias && alias !== 'value') ctx[alias] = hostVal;
-        return ctx;
-      }
-
-      static get observedAttributes() {
-        return mergedObservedAttributes;
-      }
 
       private _executeSwcScript(attrName: string, hostSet: HostSet, extraArgs: Record<string, any> = {}) {
         const script = this.getAttribute(attrName);
@@ -122,7 +96,7 @@ export const elementDefine =
             const argValues = Object.values(args);
             new Function(...argNames, script).apply(this, argValues);
           } catch (e) {
-            console.error(`[SWC] Failed to execute ${attrName} script:`, e);
+            console.error(`[SWC] Failed to execute ${attrName}:`, e);
           }
         }
       }
@@ -145,619 +119,199 @@ export const elementDefine =
             otherStorage
           );
         } else {
-          return (this as any)[methodName](hostSet,...extraArgs);
+          return (this as any)[methodName](...extraArgs);
         }
       }
 
+      private _bindAttributeEvent(el: HTMLElement, attrName: string, script: string) {
+        if (!attrName.startsWith('swc-on-')) return;
+        const eventName = attrName.substring(7);
+        if (swcLifecycleAttributes.includes(attrName)) return;
+
+        const elHandlers = getHandlers(this);
+        let handlers = elHandlers.get(el);
+        if (!handlers) {
+          handlers = new Map();
+          elHandlers.set(el, handlers);
+        }
+
+        const oldHandler = handlers.get(attrName);
+        if (oldHandler) el.removeEventListener(eventName, oldHandler);
+
+        const handler = (event: any) => {
+          const hostSet = SwcUtils.getHostSet(el);
+          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());
+        };
+
+        el.addEventListener(eventName, handler);
+        handlers.set(attrName, handler);
+      }
+
       constructor(...args: any[]) {
         super(...args);
         const hostSet = SwcUtils.getHostSet(this as any);
         this._executeSwcScript('swc-on-constructor', hostSet);
 
-        if (stateList) {
-          stateList.forEach(meta => {
-            const key = meta.propertyKey;
-            const stateName = meta.options.name!;
-            const initialVal = (this as any)[key];
-            this._internalStates.set(
-              key,
-              SwcUtils.createReactiveProxy(initialVal, () => this._updateState(stateName))
-            );
-            Object.defineProperty(this, key, {
-              get: () => this._internalStates.get(key),
-              set: newVal => {
-                if (this._internalStates.get(key) === newVal) return;
-                this._internalStates.set(
-                  key,
-                  SwcUtils.createReactiveProxy(newVal, () => this._updateState(stateName))
-                );
-                this._updateState(stateName);
-              },
-              enumerable: true,
-              configurable: true
-            });
-          });
-        }
-        if (attributePropsList) {
-          attributePropsList.forEach(meta => {
-            const key = meta.propertyKey;
-            const attrName = meta.options.name!;
-            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;
-              else if (meta.options.type === Object) {
-                try {
-                  initialVal = JSON.parse(attrValue);
-                } catch (e) {}
-              }
-            }
-            this._internalStates.set(key, initialVal);
-            Object.defineProperty(this, key, {
-              get: () => this._internalStates.get(key),
-              set: newVal => {
-                if (this._internalStates.get(key) === newVal) return;
-                this._internalStates.set(key, newVal);
-                if (typeof (this as any)._updateState === 'function') (this as any)._updateState(attrName);
-                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));
-                }
-              },
-              enumerable: true,
-              configurable: true
-            });
-          });
-        }
-        const innerHtmlList = getInnerHtmlMetadataList(this);
-        if (innerHtmlList?.some(it => it.options.useShadow === true) && !this.shadowRoot) {
+        if (innerHtmlList.some(it => it.options.useShadow === true) && !this.shadowRoot) {
           this.attachShadow({ mode: 'open' });
         }
       }
 
-      private _isSyncing = false;
-      private _syncDecorators() {
-        if (this._isSyncing) return;
-        this._isSyncing = true;
-        try {
-          this._buildStateMap();
-          this._syncEventListenersAndQueries();
-        } finally {
-          this._isSyncing = false;
-        }
+      static get observedAttributes() {
+        return mergedObservedAttributes;
       }
 
-      private _syncEventListenersAndQueries() {
-        const getSearchRoots = (rootOption?: string): Node[] => {
-          const roots: Node[] = [];
-          if (rootOption === 'shadow') {
-            if (this.shadowRoot) roots.push(this.shadowRoot);
-          } else if (rootOption === 'light') {
-            roots.push(this as any as Node);
-          } else if (rootOption === 'all') {
-            if (this.shadowRoot) roots.push(this.shadowRoot);
-            roots.push(this as any as Node);
-          } else {
-            roots.push(this.shadowRoot || (this as any as Node));
-          }
-          return roots;
-        };
-        const queryMetadata = getQueryMetadata(this);
-        if (queryMetadata) {
-          queryMetadata
-            .filter(it => it.isMethod)
-            .forEach(it => {
-              const searchRoots = getSearchRoots(it.options.root);
-              let foundEl: Element | null = null;
-              for (const root of searchRoots) {
-                foundEl = it.selector ? (root as HTMLElement).querySelector(it.selector) : (this as any as Element);
-                if (foundEl) break;
-              }
-              if (foundEl) {
-                let bound = this._boundElements.get(foundEl);
-                if (!bound) {
-                  bound = new Set();
-                  this._boundElements.set(foundEl, bound);
-                }
-                if (!bound.has(it.propertyKey)) {
-                  (this as any)[it.propertyKey](foundEl);
-                  bound.add(it.propertyKey);
-                }
-              }
-            });
-        }
-        const queryAllMetadata = getQueryAllMetadata(this);
-        if (queryAllMetadata) {
-          queryAllMetadata
-            .filter(it => it.isMethod)
-            .forEach(it => {
-              const searchRoots = getSearchRoots(it.options.root);
-              const allElements: Element[] = [];
-              searchRoots.forEach(root => {
-                const found = it.selector ? (root as HTMLElement).querySelectorAll(it.selector) : [this as any as Element];
-                allElements.push(...Array.from(found));
-              });
-              (this as any)[it.propertyKey](allElements);
-            });
-        }
-        const eventListeners = getAddEventListenerMetadata(this);
-        if (eventListeners) {
-          eventListeners.forEach(it => {
-            const { query, type, root: rootOption, ...options } = it.options;
-            const searchRoots = getSearchRoots(rootOption);
-            searchRoots.forEach(root => {
-              const targetElements = query ? (root as HTMLElement).querySelectorAll(query) : [this as any as Element];
-              targetElements.forEach(targetElement => {
-                if (targetElement) {
-                  let bound = this._boundElements.get(targetElement);
-                  if (!bound) {
-                    bound = new Set();
-                    this._boundElements.set(targetElement, bound);
-                  }
-                  const eventKey = `event:${String(it.propertyKey)}:${type}`;
-                  if (!bound.has(eventKey)) {
-                    const handler = (event: any) => {
-                      if (it.options.stopImmediatePropagation) event.stopImmediatePropagation();
-                      if (it.options.stopPropagation) event.stopPropagation();
-                      if (it.options.preventDefault) event.preventDefault();
-                      (this as any)[it.propertyKey](event, targetElement);
-                    };
-                    targetElement.addEventListener(type, handler, options);
-                    bound.add(eventKey);
-                    if (config.autoRemoveEventListeners) this._activeListeners.push({ el: targetElement, type, handler, options });
-                    const addEventMethods = getLifecycleMetadata(this, ON_ADD_EVENT_LISTENER_METADATA_KEY);
-                    addEventMethods?.forEach((m: string | symbol) => {
-                      if (typeof (this as any)[m] === 'function') (this as any)[m](targetElement, type, handler);
-                    });
-                  }
-                }
-              });
-            });
-          });
+      async connectedCallback() {
+        const hostSet = SwcUtils.getHostSet(this as any);
+
+        this._executeSwcScript('swc-on-before-connected', hostSet);
+        const bMethods = findAllLifecycleMetadata(this, ON_BEFORE_CONNECTED_METADATA_KEY);
+        if (bMethods) {
+          for (const m of bMethods) await this._invokeLifecycleMethod(m, hostSet);
         }
-      }
 
-      private _buildStateMap() {
-        const scan = (root: Node) => {
-          const walker = doc.createTreeWalker(root, (win as any).NodeFilter.SHOW_ELEMENT | (win as any).NodeFilter.SHOW_TEXT);
-          let node: Node | null = null;
-          while ((node = walker.nextNode())) {
-            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);
-                const aliasKey = `alias-event:${alias}`;
-                let bound = this._boundElements.get(el);
-                if (!bound) {
-                  bound = new Set();
-                  this._boundElements.set(el, bound);
-                }
-                if (!bound.has(aliasKey)) {
-                  el.addEventListener(STATE_CHANGE_EVENT, () => this._updateState(alias));
-                  bound.add(aliasKey);
-                }
-              }
-              const $hosts = SwcUtils.findAllSwcHosts(el);
-              $hosts.forEach(host => {
-                const hAlias = host.getAttribute('as');
-                if (hAlias) {
-                  const hostBindKey = `parent-host-event:${hAlias}`;
-                  let hBound = this._boundElements.get(host);
-                  if (!hBound) {
-                    hBound = new Set();
-                    this._boundElements.set(host, hBound);
-                  }
-                  if (!hBound.has(hostBindKey)) {
-                    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);
-                    if (!bound) {
-                      bound = new Set();
-                      this._boundElements.set(el, bound);
-                    }
-                    if (!bound.has(eventKey)) {
-                      if (script) {
-                        try {
-                          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);
-                        }
-                      }
-                      bound.add(eventKey);
-                    }
-                    return;
-                  }
-                  const eventKey = `attr-event:${attr.name}`;
-                  let bound = this._boundElements.get(el);
-                  if (!bound) {
-                    bound = new Set();
-                    this._boundElements.set(el, bound);
-                  }
-                  if (!bound.has(eventKey)) {
-                    const handler = (event: any) => {
-                      if (script) {
-                        try {
-                          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);
-              });
-              const isSwcChild = (el as any)._swcId || getElementConfig(el.constructor) || (el.getAttribute('is')?.startsWith('swc-') ?? false);
-              if (isSwcChild) {
-                const next = walker.nextSibling();
-                if (!next) break;
-                node = next;
-                if (node.nodeType === Node.TEXT_NODE) this._parseAndBind(node, 'text');
-              }
+        if (typeof (this as any).initCore === 'function') (this as any).initCore();
+
+        if (innerHtmlList.length > 0) {
+          let sContent = '',
+            lContent = '';
+          for (const meta of innerHtmlList) {
+            const res = await (this as any)[meta.propertyKey]();
+            if (res !== undefined) {
+              if (meta.options.useShadow) sContent += res;
+              else lContent += res;
             }
           }
-        };
-        if (this.shadowRoot) scan(this.shadowRoot);
-        scan(this as any as Node);
-      }
+          if (this.shadowRoot) this.shadowRoot.innerHTML = sContent;
+          if (lContent) this.innerHTML = lContent;
+        }
+
+        // --- @addEventListener binding ---
+        addEventListenerList.forEach(meta => {
+          const { type, query, root, capture, once, passive, stopPropagation, stopImmediatePropagation, preventDefault } = meta.options;
+          const targetEls: (HTMLElement | Element | Document | ShadowRoot | Window)[] = [];
 
-      private _parseAndBind(node: Node | Attr, type: 'text' | 'attribute', owner?: HTMLElement) {
-        const tplKey = `__swc_original_${this._swcId}`;
-        const isAlreadyBound = (node as any).__swc_bound_ids?.has(this._swcId);
-        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)._asItemKey === rootName || (this as any)._asIndexKey === rootName;
-          const isExternal = this._externalSources.has(rootName);
-          const isSelfAlias = this.getAttribute('as') === rootName;
-          const isInstanceProp = rootName in this;
-          let isParentAlias = false;
-          let curr: any = (this as any).parentElement || ((this as any).getRootNode?.() as any)?.host;
-          while (curr) {
-            if (curr.getAttribute?.('as') === rootName) {
-              isParentAlias = true;
-              break;
+          if (!query) {
+            targetEls.push(this as any);
+          } else {
+            const searchRoots: (HTMLElement | ShadowRoot)[] = [];
+            const r = root || 'auto';
+            if (r === 'auto') {
+              searchRoots.push((this.shadowRoot || (this as any)) as any);
+            } else if (r === 'light') {
+              searchRoots.push(this as any);
+            } else if (r === 'shadow') {
+              if (this.shadowRoot) searchRoots.push(this.shadowRoot as any);
+            } else if (r === 'all') {
+              searchRoots.push(this as any);
+              if (this.shadowRoot) searchRoots.push(this.shadowRoot as any);
             }
-            curr = curr.parentElement || (curr.getRootNode?.() as any)?.host;
+
+            searchRoots.forEach(sr => {
+              const found = sr.querySelectorAll(query);
+              found.forEach(el => targetEls.push(el as any));
+            });
           }
-          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();
-          (node as any).__swc_bound_ids.add(this._swcId);
-          this._stateBindings.get(rootName)!.push({ node, type, owner, path: fullPath });
-          this._updateState(rootName);
+
+          targetEls.forEach(el => {
+            const handler = (event: Event) => {
+              if (stopPropagation) event.stopPropagation();
+              if (stopImmediatePropagation) event.stopImmediatePropagation();
+              if (preventDefault) event.preventDefault();
+
+              const hostSet = SwcUtils.getHostSet(this as any);
+              this._invokeLifecycleMethod(meta.propertyKey, hostSet, [event, hostSet]);
+            };
+            const options = { capture, once, passive };
+            el.addEventListener(type, handler, options);
+          });
         });
-      }
 
-      private _isUpdatingState = false;
-      private _updateState(stateName: string) {
-        if (!this._stateBindings) return;
-        if (this._isUpdatingState) return;
-        this._isUpdatingState = true;
-        try {
-          this._executeBindingUpdate(stateName);
-          const selfAlias = this.getAttribute('as');
-          if (selfAlias && selfAlias !== stateName) this._executeBindingUpdate(selfAlias);
-          this.dispatchEvent(new CustomEvent(STATE_CHANGE_EVENT, { bubbles: true, composed: true, detail: { source: stateName, host: this } }));
-        } finally {
-          this._isUpdatingState = false;
+        if (super.connectedCallback) await super.connectedCallback();
+        const aMethods = findAllLifecycleMetadata(this, ON_AFTER_CONNECTED_METADATA_KEY);
+        if (aMethods) {
+          for (const m of aMethods) await this._invokeLifecycleMethod(m, hostSet);
         }
-      }
 
-      private _executeBindingUpdate(stateName: string) {
-        const bindings = this._stateBindings.get(stateName);
-        if (!bindings) return;
-        const tplKey = `__swc_original_${this._swcId}`;
-        bindings.forEach(bin => {
-          let text = (bin.node as any)[tplKey];
-          if (!text) return;
-          const matches = Array.from(text.matchAll(/{{(.*?)}}/g)) as RegExpMatchArray[];
-          let updatedText = text;
-          for (const match of matches) {
-            const path = match[1].trim();
-            const root = path.split('.')[0];
-            let val: any = undefined;
-            let current: HTMLElement | null = this as any as HTMLElement;
-            while (current) {
-              const currentNewClass = current as any;
-              if (current.getAttribute('as') === root) {
-                val = SwcUtils.getValueByPath(current, path.split('.').slice(1).join('.') || 'value', 'value');
-                if (val !== SWC_NOT_FOUND) break;
-              }
-              const externalSource = currentNewClass._externalSources?.get(root);
-              if (externalSource) {
-                val = SwcUtils.getValueByPath(externalSource, path.split('.').slice(1).join('.') || 'value', 'value');
-                if (val !== SWC_NOT_FOUND) break;
-              }
-              const cStates = getStateMetadataList(current.constructor);
-              const cAttrs = getAttributeMetadataList(current.constructor);
-              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) {
-                  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) {
-                      if (cur === null || cur === undefined) {
-                        cur = SWC_NOT_FOUND;
-                        break;
-                      }
-                      cur = cur[p];
-                    }
-                    if (cur !== undefined && cur !== SWC_NOT_FOUND) val = cur;
-                  }
-                } else {
-                  val = rootVal;
-                }
-                if (val !== SWC_NOT_FOUND && val !== undefined) break;
-              }
-              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) {
-              const strVal = val === null ? '' : typeof val === 'object' ? JSON.stringify(val) : String(val);
-              updatedText = updatedText.replace(match[0], strVal);
-              if (bin.type === 'attribute' && bin.owner) {
-                const attrName = (bin.node as Attr).name;
-                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;
-                } else {
-                  if (propName in bin.owner) (bin.owner as any)[propName] = val;
-                  bin.owner.setAttribute(attrName, updatedText);
-                  if ((attrName === 'value' || attrName === 'checked') && bin.owner.tagName.match(/INPUT|TEXTAREA|SELECT/)) {
-                    (bin.owner as any)[attrName] = updatedText;
-                  }
-                }
-              }
-            }
-          }
-          if (bin.type === 'text') bin.node.textContent = updatedText;
-        });
+        this._executeSwcScript('swc-on-connected', hostSet);
+        this._executeSwcScript('swc-on-after-connected', hostSet);
       }
 
       disconnectedCallback() {
         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 => this._invokeLifecycleMethod(m, hostSet));
-        if (this._observer) this._observer.disconnect();
-        if (this._shadowObserver) this._shadowObserver.disconnect();
-        if (config.autoRemoveEventListeners) {
-          this._activeListeners.forEach(({ el, type, handler, options }) => el.removeEventListener(type, handler, options));
-          this._activeListeners = [];
-        }
+        const bMethods = findAllLifecycleMetadata(this, ON_BEFORE_DISCONNECTED_METADATA_KEY);
+        if (bMethods) bMethods.forEach(m => this._invokeLifecycleMethod(m, hostSet));
+
         if (super.disconnectedCallback) super.disconnectedCallback();
-        const aMethods = getLifecycleMetadata<(string | symbol)[]>(this, ON_AFTER_DISCONNECTED_METADATA_KEY);
-        aMethods?.forEach(m => this._invokeLifecycleMethod(m, hostSet));
+
+        const aMethods = findAllLifecycleMetadata(this, ON_AFTER_DISCONNECTED_METADATA_KEY);
+        if (aMethods) aMethods.forEach(m => this._invokeLifecycleMethod(m, hostSet));
+        this._executeSwcScript('swc-on-disconnected', hostSet);
         this._executeSwcScript('swc-on-after-disconnected', hostSet);
       }
 
       adoptedCallback() {
         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 => this._invokeLifecycleMethod(m, hostSet));
+        const bMethods = findAllLifecycleMetadata(this, ON_BEFORE_ADOPTED_METADATA_KEY);
+        if (bMethods) 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 => this._invokeLifecycleMethod(m, hostSet));
+
+        const aMethods = findAllLifecycleMetadata(this, ON_AFTER_ADOPTED_METADATA_KEY);
+        if (aMethods) aMethods.forEach(m => this._invokeLifecycleMethod(m, hostSet));
+        this._executeSwcScript('swc-on-adopted', hostSet);
         this._executeSwcScript('swc-on-after-adopted', hostSet);
       }
 
-      async connectedCallback() {
-        // 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);
-        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 = '';
-        let lContent = '';
-        if (iHtmlList) {
-          for (const meta of iHtmlList) {
-            const result = await (this as any)[meta.propertyKey]();
-            if (result !== undefined) {
-              if (meta.options.useShadow === true) sContent += result;
-              else lContent += result;
-            }
-          }
-        }
-        if (this.shadowRoot) this.shadowRoot.innerHTML = sContent;
-        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.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);
-                if (!bound) {
-                  bound = new Set();
-                  this._boundElements.set(this as any, bound);
-                }
-                if (!bound.has(eventKey)) {
-                  if (script) {
-                    try {
-                      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);
-                    }
-                  }
-                  bound.add(eventKey);
-                }
-                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) => {
-                  if (script) {
-                    try {
-                      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 });
-              }
-            }
-          });
-        }
+      attributeChangedCallback(name: string, old: string | null, newVal: string | null) {
+        if (super.attributeChangedCallback) super.attributeChangedCallback(name, old, newVal);
 
-        const mutationMetaList = getMutationSubscribeMetadataList(this);
-        const fireMutationCallbacks = (mutationList: MutationRecord[], observer: MutationObserver, root: 'light' | 'shadow') => {
-          mutationMetaList?.forEach(meta => {
-            const r = meta.options.root ?? 'auto';
-            const matches = r === 'all' || r === root || (r === 'auto' && (this.shadowRoot ? root === 'shadow' : root === 'light'));
-            if (matches && typeof (this as any)[meta.propertyKey] === 'function') {
-              (this as any)[meta.propertyKey](mutationList, observer, root);
-            }
-          });
-        };
-        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();
-            fireMutationCallbacks(mutationList, observer, 'shadow');
-          });
-          // @ts-ignore
-          this._shadowObserver.observe(this.shadowRoot, { childList: true, subtree: true });
-        }
-        if (super.connectedCallback) await super.connectedCallback();
-        const aMethods = getLifecycleMetadata<(string | symbol)[]>(this, ON_AFTER_CONNECTED_METADATA_KEY);
-        if (aMethods) {
-          for (const m of aMethods) {
-            await this._invokeLifecycleMethod(m, hostSet);
+        if (name.startsWith('swc-on-') && !swcLifecycleAttributes.includes(name)) {
+          if (newVal !== null) {
+            this._bindAttributeEvent(this as any, name, newVal);
           }
         }
-        this._executeSwcScript('swc-on-after-connected', hostSet);
-      }
 
-      attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) {
-        if (super.attributeChangedCallback) super.attributeChangedCallback(name, oldValue, newValue);
-        if (attributePropsList) {
-          attributePropsList.forEach(meta => {
-            if (meta.options.name === name) {
-              const current = (this as any)[meta.propertyKey];
-              if (typeof current === 'object' && current !== null) return;
-              if (String(current) !== String(newValue)) (this as any)[meta.propertyKey] = newValue;
-            }
-          });
-        }
-        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);
-        const hostSet = SwcUtils.getHostSet(this as any);
+        const mKeys = attrChangeMap.get(name);
         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) {
-            const eType = eMeta.options.type;
-            const oHandler = this._emitHandlers.get(eType);
-            if (oHandler) this.removeEventListener(eType, oHandler);
-            if (newValue) {
-              const nHandler = (e: Event) => {
-                new Function('event', '$data', newValue).call(this, e, (e as CustomEvent).detail);
-              };
-              this.addEventListener(eType, nHandler);
-              this._emitHandlers.set(eType, nHandler);
-            }
-          }
+          const hSet = SwcUtils.getHostSet(this as any);
+          mKeys.forEach(key => this._invokeLifecycleMethod(key, hSet, [newVal, old, name]));
         }
-        const wMethodsKeys = aMethodsMap?.get(ATTRIBUTE_CHANGED_WILDCARD);
-        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.
+    // --- @setAttribute wrapping logic ---
+    setAttrMap.forEach((methodName, attrName) => {
+      const original = NewClass.prototype[methodName as any];
+      if (typeof original === 'function') {
+        NewClass.prototype[methodName as any] = function (...args: any[]) {
+          const res = original.apply(this, args);
+          if (res !== undefined) {
+            if (res === null) this.removeAttribute(attrName);
+            else this.setAttribute(attrName, String(res));
+          }
+          return res;
+        };
+      }
+    });
+
     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);
-      });
+      keys.forEach(key => Reflect.defineMetadata(key, Reflect.getMetadata(key, originalProto, name), 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);
+    const registry = config.customElementRegistry || (win as any)?.customElements;
     if (registry && !registry.get(config.name)) {
-      const options = config.extends ? { extends: config.extends } : undefined;
-      registry.define(config.name, NewClass as any, options);
+      registry.define(config.name, NewClass as any, config.extends ? { extends: config.extends } : undefined);
     }
     return NewClass as any;
   };