@dooboostore/simple-web-component 1.0.5 → 1.0.6

package/dist/esm/decorators/addEventListener.js

@@ -1,8 +1,9 @@
 import { ReflectUtils } from "@dooboostore/core/reflect/ReflectUtils";
 const ADD_EVENT_LISTENER_METADATA_KEY = Symbol("simple-web-component:add-event-listener");
-const addEventListener = (options) => {
+function addEventListener(arg1, arg2) {
   return (target, propertyKey, descriptor) => {
     const constructor = target.constructor;
+    const options = typeof arg1 === "string" ? { type: arg1, query: arg2 } : arg1;
     let listeners = ReflectUtils.getMetadata(ADD_EVENT_LISTENER_METADATA_KEY, constructor);
     if (!listeners) {
       listeners = [];
@@ -10,7 +11,7 @@ const addEventListener = (options) => {
     }
     listeners.push({ options, propertyKey });
   };
-};
+}
 const getAddEventListenerMetadata = (target) => {
   const constructor = target instanceof Function ? target : target.constructor;
   return ReflectUtils.getMetadata(ADD_EVENT_LISTENER_METADATA_KEY, constructor);

package/dist/esm/decorators/addEventListener.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/decorators/addEventListener.ts"],
-  "sourcesContent": ["import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';\n\nexport interface AddEventListenerOptions extends EventListenerOptions {\n  selector?: string;\n  eventName: string;\n  useShadow?: boolean;\n  capture?: boolean;\n  once?: boolean;\n  passive?: boolean;\n}\n\nexport interface AddEventListenerMetadata {\n  options: AddEventListenerOptions;\n  propertyKey: string | symbol;\n}\n\nexport const ADD_EVENT_LISTENER_METADATA_KEY = Symbol('simple-web-component:add-event-listener');\n\nexport const addEventListener = (options: AddEventListenerOptions): MethodDecorator => {\n  return (target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor) => {\n    const constructor = target.constructor;\n\n    let listeners = ReflectUtils.getMetadata<AddEventListenerMetadata[]>(ADD_EVENT_LISTENER_METADATA_KEY, constructor);\n    if (!listeners) {\n      listeners = [];\n      ReflectUtils.defineMetadata(ADD_EVENT_LISTENER_METADATA_KEY, listeners, constructor);\n    }\n    listeners.push({ options, propertyKey });\n  };\n};\n\nexport const getAddEventListenerMetadata = (target: any): AddEventListenerMetadata[] | undefined => {\n  const constructor = target instanceof Function ? target : target.constructor;\n  return ReflectUtils.getMetadata(ADD_EVENT_LISTENER_METADATA_KEY, constructor);\n};\n"],
-  "mappings": "AAAA,SAAS,oBAAoB;AAgBtB,MAAM,kCAAkC,OAAO,yCAAyC;AAExF,MAAM,mBAAmB,CAAC,YAAsD;AACrF,SAAO,CAAC,QAAgB,aAA8B,eAAmC;AACvF,UAAM,cAAc,OAAO;AAE3B,QAAI,YAAY,aAAa,YAAwC,iCAAiC,WAAW;AACjH,QAAI,CAAC,WAAW;AACd,kBAAY,CAAC;AACb,mBAAa,eAAe,iCAAiC,WAAW,WAAW;AAAA,IACrF;AACA,cAAU,KAAK,EAAE,SAAS,YAAY,CAAC;AAAA,EACzC;AACF;AAEO,MAAM,8BAA8B,CAAC,WAAwD;AAClG,QAAM,cAAc,kBAAkB,WAAW,SAAS,OAAO;AACjE,SAAO,aAAa,YAAY,iCAAiC,WAAW;AAC9E;",
+  "sourcesContent": ["import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';\n\nexport interface AddEventListenerOptions extends EventListenerOptions {\n  query?: string;\n  type: string;\n  useShadow?: boolean;\n  capture?: boolean;\n  once?: boolean;\n  passive?: boolean;\n  stopPropagation?: boolean;\n  stopImmediatePropagation?: boolean;\n  preventDefault?: boolean;\n}\n\nexport interface AddEventListenerMetadata {\n  options: AddEventListenerOptions;\n  propertyKey: string | symbol;\n}\n\nexport const ADD_EVENT_LISTENER_METADATA_KEY = Symbol('simple-web-component:add-event-listener');\n\nexport function addEventListener(type: string, query?: string): MethodDecorator;\nexport function addEventListener(options: AddEventListenerOptions): MethodDecorator;\nexport function addEventListener(arg1: string | AddEventListenerOptions, arg2?: string): MethodDecorator {\n  return (target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor) => {\n    const constructor = target.constructor;\n    const options: AddEventListenerOptions = typeof arg1 === 'string' ? { type: arg1, query: arg2 } : arg1;\n\n    let listeners = ReflectUtils.getMetadata<AddEventListenerMetadata[]>(ADD_EVENT_LISTENER_METADATA_KEY, constructor);\n    if (!listeners) {\n      listeners = [];\n      ReflectUtils.defineMetadata(ADD_EVENT_LISTENER_METADATA_KEY, listeners, constructor);\n    }\n    listeners.push({ options, propertyKey });\n  };\n}\n\nexport const getAddEventListenerMetadata = (target: any): AddEventListenerMetadata[] | undefined => {\n  const constructor = target instanceof Function ? target : target.constructor;\n  return ReflectUtils.getMetadata(ADD_EVENT_LISTENER_METADATA_KEY, constructor);\n};\n"],
+  "mappings": "AAAA,SAAS,oBAAoB;AAmBtB,MAAM,kCAAkC,OAAO,yCAAyC;AAIxF,SAAS,iBAAiB,MAAwC,MAAgC;AACvG,SAAO,CAAC,QAAgB,aAA8B,eAAmC;AACvF,UAAM,cAAc,OAAO;AAC3B,UAAM,UAAmC,OAAO,SAAS,WAAW,EAAE,MAAM,MAAM,OAAO,KAAK,IAAI;AAElG,QAAI,YAAY,aAAa,YAAwC,iCAAiC,WAAW;AACjH,QAAI,CAAC,WAAW;AACd,kBAAY,CAAC;AACb,mBAAa,eAAe,iCAAiC,WAAW,WAAW;AAAA,IACrF;AACA,cAAU,KAAK,EAAE,SAAS,YAAY,CAAC;AAAA,EACzC;AACF;AAEO,MAAM,8BAA8B,CAAC,WAAwD;AAClG,QAAM,cAAc,kBAAkB,WAAW,SAAS,OAAO;AACjE,SAAO,aAAa,YAAY,iCAAiC,WAAW;AAC9E;",
   "names": []
 }

package/dist/esm/decorators/attribute.js

@@ -0,0 +1,60 @@
+import { ReflectUtils } from "@dooboostore/core/reflect/ReflectUtils";
+const ATTRIBUTE_METADATA_KEY = Symbol("simple-web-component:attribute");
+function attribute(nameOrOptions) {
+  return (target, propertyKey) => {
+    const constructor = target.constructor;
+    const options = typeof nameOrOptions === "string" ? { name: nameOrOptions } : nameOrOptions || {};
+    if (!options.name) options.name = String(propertyKey);
+    if (!options.type) options.type = String;
+    if (options.disableReflect === void 0) options.disableReflect = false;
+    let list = ReflectUtils.getMetadata(ATTRIBUTE_METADATA_KEY, constructor);
+    if (!list) {
+      list = [];
+      ReflectUtils.defineMetadata(ATTRIBUTE_METADATA_KEY, list, constructor);
+    }
+    list.push({ propertyKey, options });
+    const internalKey = Symbol(String(propertyKey));
+    Object.defineProperty(target, propertyKey, {
+      get() {
+        return this[internalKey];
+      },
+      set(val) {
+        const oldVal = this[internalKey];
+        if (oldVal === val) return;
+        let convertedVal = val;
+        if (options.type === Number) convertedVal = Number(val);
+        else if (options.type === Boolean) convertedVal = Boolean(val);
+        else if (options.type === Object && typeof val === "string") {
+          try {
+            convertedVal = JSON.parse(val);
+          } catch (e) {
+            convertedVal = val;
+          }
+        }
+        this[internalKey] = convertedVal;
+        if (!options.disableReflect && this.setAttribute) {
+          if (convertedVal === null || convertedVal === void 0 || convertedVal === false) {
+            this.removeAttribute(options.name);
+          } else {
+            const attrVal = typeof convertedVal === "object" ? JSON.stringify(convertedVal) : String(convertedVal);
+            if (this.getAttribute(options.name) !== attrVal) {
+              this.setAttribute(options.name, attrVal);
+            }
+          }
+        }
+      },
+      enumerable: true,
+      configurable: true
+    });
+  };
+}
+const getAttributeMetadataList = (target) => {
+  const constructor = target instanceof Function ? target : target.constructor;
+  return ReflectUtils.getMetadata(ATTRIBUTE_METADATA_KEY, constructor);
+};
+export {
+  ATTRIBUTE_METADATA_KEY,
+  attribute,
+  getAttributeMetadataList
+};
+//# sourceMappingURL=attribute.js.map

package/dist/esm/decorators/attribute.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/decorators/attribute.ts"],
+  "sourcesContent": ["import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';\n\nexport interface AttributeOptions {\n  name?: string;\n  type?: any; // String, Number, Boolean, Object\n  disableReflect?: boolean; // Default is false (reflect is enabled by default)\n}\n\nexport interface AttributeMetadata {\n  propertyKey: string | symbol;\n  options: AttributeOptions;\n}\n\nexport const ATTRIBUTE_METADATA_KEY = Symbol('simple-web-component:attribute');\n\nexport function attribute(nameOrOptions?: string | AttributeOptions): PropertyDecorator {\n  return (target: Object, propertyKey: string | symbol) => {\n    const constructor = target.constructor;\n    const options: AttributeOptions = typeof nameOrOptions === 'string' ? { name: nameOrOptions } : nameOrOptions || {};\n\n    if (!options.name) options.name = String(propertyKey);\n    if (!options.type) options.type = String;\n    if (options.disableReflect === undefined) options.disableReflect = false;\n\n    let list = ReflectUtils.getMetadata<AttributeMetadata[]>(ATTRIBUTE_METADATA_KEY, constructor);\n    if (!list) {\n      list = [];\n      ReflectUtils.defineMetadata(ATTRIBUTE_METADATA_KEY, list, constructor);\n    }\n    list.push({ propertyKey, options });\n\n    // Define getter and setter for the property\n    const internalKey = Symbol(String(propertyKey));\n    Object.defineProperty(target, propertyKey, {\n      get(this: any) {\n        return this[internalKey];\n      },\n      set(this: any, val: any) {\n        const oldVal = this[internalKey];\n        if (oldVal === val) return;\n\n        // Type conversion\n        let convertedVal = val;\n        if (options.type === Number) convertedVal = Number(val);\n        else if (options.type === Boolean) convertedVal = Boolean(val);\n        else if (options.type === Object && typeof val === 'string') {\n          try {\n            convertedVal = JSON.parse(val);\n          } catch (e) {\n            convertedVal = val;\n          }\n        }\n\n        this[internalKey] = convertedVal;\n\n        // Reflection\n        if (!options.disableReflect && this.setAttribute) {\n          if (convertedVal === null || convertedVal === undefined || convertedVal === false) {\n            this.removeAttribute(options.name);\n          } else {\n            const attrVal = typeof convertedVal === 'object' ? JSON.stringify(convertedVal) : String(convertedVal);\n            if (this.getAttribute(options.name) !== attrVal) {\n              this.setAttribute(options.name, attrVal);\n            }\n          }\n        }\n      },\n      enumerable: true,\n      configurable: true\n    });\n  };\n}\n\nexport const getAttributeMetadataList = (target: any): AttributeMetadata[] | undefined => {\n  const constructor = target instanceof Function ? target : target.constructor;\n  return ReflectUtils.getMetadata(ATTRIBUTE_METADATA_KEY, constructor);\n};\n"],
+  "mappings": "AAAA,SAAS,oBAAoB;AAatB,MAAM,yBAAyB,OAAO,gCAAgC;AAEtE,SAAS,UAAU,eAA8D;AACtF,SAAO,CAAC,QAAgB,gBAAiC;AACvD,UAAM,cAAc,OAAO;AAC3B,UAAM,UAA4B,OAAO,kBAAkB,WAAW,EAAE,MAAM,cAAc,IAAI,iBAAiB,CAAC;AAElH,QAAI,CAAC,QAAQ,KAAM,SAAQ,OAAO,OAAO,WAAW;AACpD,QAAI,CAAC,QAAQ,KAAM,SAAQ,OAAO;AAClC,QAAI,QAAQ,mBAAmB,OAAW,SAAQ,iBAAiB;AAEnE,QAAI,OAAO,aAAa,YAAiC,wBAAwB,WAAW;AAC5F,QAAI,CAAC,MAAM;AACT,aAAO,CAAC;AACR,mBAAa,eAAe,wBAAwB,MAAM,WAAW;AAAA,IACvE;AACA,SAAK,KAAK,EAAE,aAAa,QAAQ,CAAC;AAGlC,UAAM,cAAc,OAAO,OAAO,WAAW,CAAC;AAC9C,WAAO,eAAe,QAAQ,aAAa;AAAA,MACzC,MAAe;AACb,eAAO,KAAK,WAAW;AAAA,MACzB;AAAA,MACA,IAAe,KAAU;AACvB,cAAM,SAAS,KAAK,WAAW;AAC/B,YAAI,WAAW,IAAK;AAGpB,YAAI,eAAe;AACnB,YAAI,QAAQ,SAAS,OAAQ,gBAAe,OAAO,GAAG;AAAA,iBAC7C,QAAQ,SAAS,QAAS,gBAAe,QAAQ,GAAG;AAAA,iBACpD,QAAQ,SAAS,UAAU,OAAO,QAAQ,UAAU;AAC3D,cAAI;AACF,2BAAe,KAAK,MAAM,GAAG;AAAA,UAC/B,SAAS,GAAG;AACV,2BAAe;AAAA,UACjB;AAAA,QACF;AAEA,aAAK,WAAW,IAAI;AAGpB,YAAI,CAAC,QAAQ,kBAAkB,KAAK,cAAc;AAChD,cAAI,iBAAiB,QAAQ,iBAAiB,UAAa,iBAAiB,OAAO;AACjF,iBAAK,gBAAgB,QAAQ,IAAI;AAAA,UACnC,OAAO;AACL,kBAAM,UAAU,OAAO,iBAAiB,WAAW,KAAK,UAAU,YAAY,IAAI,OAAO,YAAY;AACrG,gBAAI,KAAK,aAAa,QAAQ,IAAI,MAAM,SAAS;AAC/C,mBAAK,aAAa,QAAQ,MAAM,OAAO;AAAA,YACzC;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,MACA,YAAY;AAAA,MACZ,cAAc;AAAA,IAChB,CAAC;AAAA,EACH;AACF;AAEO,MAAM,2BAA2B,CAAC,WAAiD;AACxF,QAAM,cAAc,kBAAkB,WAAW,SAAS,OAAO;AACjE,SAAO,aAAa,YAAY,wBAAwB,WAAW;AACrE;",
+  "names": []
+}

package/dist/esm/decorators/elementDefine.js

@@ -1,11 +1,15 @@
 import { ReflectUtils } from "@dooboostore/core/reflect/ReflectUtils";
-import { getAttributeChangedMap, ATTRIBUTE_CHANGED_WILDCARD } from "./attributeChanged.js";
 import { getInnerHtmlMetadataList } from "./innerHtml.js";
 import { getQueryMetadata } from "./query.js";
 import { getQueryAllMetadata } from "./queryAll.js";
 import { getAddEventListenerMetadata } from "./addEventListener.js";
-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 } from "./lifecycles.js";
+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 } from "./lifecycles.js";
+import { getAttributeMetadataList } from "./attribute.js";
+import { getStateMetadataList } from "./state.js";
+import { getEmitCustomEventMetadataList } from "./emitCustomEvent.js";
+import { SwcUtils } from "../utils/Utils.js";
 const ELEMENT_CONFIG_KEY = Symbol("simple-web-component:element-config");
+const STATE_CHANGE_EVENT = "swc:state-change";
 const BUILT_IN_TAG_MAP = /* @__PURE__ */ new Map();
 const registerTag = (className, tagName) => {
   if (typeof globalThis !== "undefined" && globalThis[className]) {
@@ -81,17 +85,49 @@ const elementDefine = (inConfig) => (constructor) => {
       proto = Object.getPrototypeOf(proto);
     }
   }
-  const attributeChangedMap = getAttributeChangedMap(constructor);
-  const observedFromDecorators = attributeChangedMap ? Array.from(attributeChangedMap.keys()).filter((it) => it !== ATTRIBUTE_CHANGED_WILDCARD) : [];
-  const mergedObservedAttributes = [.../* @__PURE__ */ new Set([...config.observedAttributes ?? [], ...observedFromDecorators])];
+  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 mergedObservedAttributes = [.../* @__PURE__ */ new Set([...config.observedAttributes ?? [], ...observedFromProps, ...observedFromEmits])];
   const NewClass = class extends constructor {
     constructor(...args) {
       super(...args);
+      this._swcId = Math.random().toString(36).substring(2, 11);
       this._observer = null;
       this._boundElements = /* @__PURE__ */ new WeakMap();
+      this._activeListeners = [];
+      this._emitHandlers = /* @__PURE__ */ new Map();
+      this._stateBindings = /* @__PURE__ */ new Map();
+      this._internalStates = /* @__PURE__ */ new Map();
+      this._externalSources = /* @__PURE__ */ new Map();
+      if (stateList) {
+        stateList.forEach((meta) => {
+          const key = meta.propertyKey;
+          const stateName = meta.options.name;
+          const initialVal = this[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
+          });
+        });
+      }
       const innerHtmlList = getInnerHtmlMetadataList(this);
-      const useShadow = innerHtmlList?.some((it) => it.options.useShadow === true);
-      if (useShadow === true && !this.shadowRoot) {
+      if (innerHtmlList?.some((it) => it.options.useShadow === true) && !this.shadowRoot) {
         this.attachShadow({ mode: "open" });
       }
     }
@@ -99,6 +135,7 @@ const elementDefine = (inConfig) => (constructor) => {
       return mergedObservedAttributes;
     }
     _syncDecorators() {
+      this._buildStateMap();
       const queryMetadata = getQueryMetadata(this);
       if (queryMetadata) {
         queryMetadata.filter((it) => it.isMethod).forEach((it) => {
@@ -128,9 +165,9 @@ const elementDefine = (inConfig) => (constructor) => {
       const eventListeners = getAddEventListenerMetadata(this);
       if (eventListeners) {
         eventListeners.forEach((it) => {
-          const { selector, eventName, useShadow, ...options } = it.options;
+          const { query, type, useShadow, ...options } = it.options;
           const root = useShadow !== false && this.shadowRoot ? this.shadowRoot : this;
-          const targetElements = selector ? root.querySelectorAll(selector) : [this];
+          const targetElements = query ? root.querySelectorAll(query) : [this];
           targetElements.forEach((targetElement) => {
             if (targetElement) {
               let bound = this._boundElements.get(targetElement);
@@ -138,127 +175,220 @@ const elementDefine = (inConfig) => (constructor) => {
                 bound = /* @__PURE__ */ new Set();
                 this._boundElements.set(targetElement, bound);
               }
-              const eventKey = `event:${String(it.propertyKey)}:${eventName}`;
+              const eventKey = `event:${String(it.propertyKey)}:${type}`;
               if (!bound.has(eventKey)) {
-                targetElement.addEventListener(
-                  eventName,
-                  (event) => {
-                    this[it.propertyKey](event);
-                  },
-                  options
-                );
+                const handler = (event) => {
+                  if (it.options.stopImmediatePropagation) event.stopImmediatePropagation();
+                  if (it.options.stopPropagation) event.stopPropagation();
+                  if (it.options.preventDefault) event.preventDefault();
+                  this[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) => {
+                  if (typeof this[m] === "function") this[m](targetElement, type, handler);
+                });
               }
             }
           });
         });
       }
     }
+    _buildStateMap() {
+      this._stateBindings.clear();
+      this._externalSources.clear();
+      const scan = (root) => {
+        const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT);
+        let node = 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;
+            const alias = el.getAttribute("as");
+            if (alias) {
+              this._externalSources.set(alias, el);
+              el.addEventListener(STATE_CHANGE_EVENT, () => this._updateState(alias));
+            }
+            Array.from(el.attributes).forEach((attr) => this._parseAndBind(attr, "attribute", el));
+          }
+        }
+      };
+      if (this.shadowRoot) scan(this.shadowRoot);
+      scan(this);
+    }
+    _parseAndBind(node, type, owner) {
+      const content = node.textContent || "";
+      const matches = Array.from(content.matchAll(/{{(.*?)}}/g));
+      if (matches.length === 0) return;
+      matches.forEach((match) => {
+        const fullPath = match[1].trim();
+        const rootName = fullPath.split(".")[0];
+        const isState = stateList?.some((s) => s.options.name === rootName);
+        const isLogicKey = this._asKey === rootName || this._asIndexKey === rootName;
+        const isExternal = this._externalSources.has(rootName);
+        const isSelfAlias = this.getAttribute("as") === rootName;
+        if (!isState && !isLogicKey && !isExternal && !isSelfAlias) return;
+        if (!this._stateBindings.has(rootName)) this._stateBindings.set(rootName, []);
+        const tplKey = `__swc_original_${this._swcId}`;
+        if (!node[tplKey]) node[tplKey] = content;
+        this._stateBindings.get(rootName).push({ node, type, owner, path: fullPath });
+        this._updateState(rootName);
+      });
+    }
+    _updateState(stateName) {
+      if (!this._stateBindings) return;
+      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 }));
+    }
+    _executeBindingUpdate(stateName) {
+      const bindings = this._stateBindings.get(stateName);
+      if (!bindings) return;
+      const tplKey = `__swc_original_${this._swcId}`;
+      bindings.forEach((bin) => {
+        let text = bin.node[tplKey];
+        const matches = Array.from(text.matchAll(/{{(.*?)}}/g));
+        for (const match of matches) {
+          const path = match[1].trim();
+          const root = path.split(".")[0];
+          let val = void 0;
+          let current = this;
+          while (current) {
+            const currentNewClass = current;
+            if (current.getAttribute("as") === root) {
+              val = SwcUtils.getValueByPath(current, path.split(".").slice(1).join(".") || "value", "value");
+              if (val !== void 0) break;
+            }
+            const externalSource = currentNewClass._externalSources?.get(root);
+            if (externalSource) {
+              val = SwcUtils.getValueByPath(externalSource, path.split(".").slice(1).join(".") || "value", "value");
+              if (val !== void 0) 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) {
+              let aPath = path;
+              if (sMeta && sMeta.options.name !== String(sMeta.propertyKey)) aPath = path.replace(sMeta.options.name, String(sMeta.propertyKey));
+              else if (aMeta && aMeta.options.name !== String(aMeta.propertyKey)) aPath = path.replace(aMeta.options.name, String(aMeta.propertyKey));
+              val = SwcUtils.getValueByPath(current, aPath, root);
+              if (val !== void 0) break;
+            }
+            current = current.parentElement || current.getRootNode().host;
+          }
+          if (val !== void 0) {
+            const strVal = val === null || val === void 0 ? "" : typeof val === "object" ? "[Object]" : String(val);
+            text = text.replace(match[0], strVal);
+            if (bin.type === "attribute" && bin.owner) {
+              if (val === null || val === void 0) bin.owner.removeAttribute(bin.attrName);
+              else bin.owner.setAttribute(bin.attrName, text);
+            }
+          }
+        }
+        if (bin.type === "text") bin.node.textContent = text;
+      });
+    }
     disconnectedCallback() {
-      const beforeMethods = getLifecycleMetadata(this, ON_BEFORE_DISCONNECTED_METADATA_KEY);
-      beforeMethods?.forEach((m) => {
+      const bMethods = getLifecycleMetadata(this, ON_BEFORE_DISCONNECTED_METADATA_KEY);
+      bMethods?.forEach((m) => {
         if (typeof this[m] === "function") this[m]();
       });
-      if (this._observer) {
-        this._observer.disconnect();
-      }
-      if (super.disconnectedCallback) {
-        super.disconnectedCallback();
+      if (this._observer) this._observer.disconnect();
+      if (config.autoRemoveEventListeners) {
+        this._activeListeners.forEach(({ el, type, handler, options }) => el.removeEventListener(type, handler, options));
+        this._activeListeners = [];
       }
-      const afterMethods = getLifecycleMetadata(this, ON_AFTER_DISCONNECTED_METADATA_KEY);
-      afterMethods?.forEach((m) => {
+      if (super.disconnectedCallback) super.disconnectedCallback();
+      const aMethods = getLifecycleMetadata(this, ON_AFTER_DISCONNECTED_METADATA_KEY);
+      aMethods?.forEach((m) => {
         if (typeof this[m] === "function") this[m]();
       });
     }
     adoptedCallback() {
-      const beforeMethods = getLifecycleMetadata(this, ON_BEFORE_ADOPTED_METADATA_KEY);
-      beforeMethods?.forEach((m) => {
+      const bMethods = getLifecycleMetadata(this, ON_BEFORE_ADOPTED_METADATA_KEY);
+      bMethods?.forEach((m) => {
         if (typeof this[m] === "function") this[m]();
       });
-      if (super.adoptedCallback) {
-        super.adoptedCallback();
-      }
-      const afterMethods = getLifecycleMetadata(this, ON_AFTER_ADOPTED_METADATA_KEY);
-      afterMethods?.forEach((m) => {
+      if (super.adoptedCallback) super.adoptedCallback();
+      const aMethods = getLifecycleMetadata(this, ON_AFTER_ADOPTED_METADATA_KEY);
+      aMethods?.forEach((m) => {
         if (typeof this[m] === "function") this[m]();
       });
     }
     async connectedCallback() {
-      const beforeMethods = getLifecycleMetadata(this, ON_BEFORE_CONNECTED_METADATA_KEY);
-      beforeMethods?.forEach((m) => {
+      const bMethods = getLifecycleMetadata(this, ON_BEFORE_CONNECTED_METADATA_KEY);
+      bMethods?.forEach((m) => {
         if (typeof this[m] === "function") this[m]();
       });
-      if (typeof this.initCore === "function") {
-        this.initCore();
-      }
-      const innerHtmlList = getInnerHtmlMetadataList(this);
-      let shadowContent = "";
-      let lightContent = "";
-      if (innerHtmlList) {
-        for (const meta of innerHtmlList) {
+      if (typeof this.initCore === "function") this.initCore();
+      const iHtmlList = getInnerHtmlMetadataList(this);
+      let sContent = "";
+      let lContent = "";
+      if (iHtmlList) {
+        for (const meta of iHtmlList) {
           const result = await this[meta.propertyKey]();
           if (result !== void 0) {
-            if (meta.options.useShadow === true) {
-              shadowContent += result;
-            } else {
-              lightContent += result;
-            }
+            if (meta.options.useShadow === true) sContent += result;
+            else lContent += result;
           }
         }
       }
-      if (this.shadowRoot) {
-        this.shadowRoot.innerHTML = shadowContent;
-      }
-      if (lightContent) {
-        this.innerHTML = lightContent;
-      }
+      if (this.shadowRoot) this.shadowRoot.innerHTML = sContent;
+      if (lContent) this.innerHTML = lContent;
       this._syncDecorators();
-      this._observer = new MutationObserver(() => {
-        this._syncDecorators();
-      });
-      const target = this.shadowRoot || this;
-      this._observer.observe(target, { childList: true, subtree: true });
-      if (super.connectedCallback) {
-        await super.connectedCallback();
-      }
-      const afterMethods = getLifecycleMetadata(this, ON_AFTER_CONNECTED_METADATA_KEY);
-      afterMethods?.forEach((m) => {
+      this._observer = new MutationObserver(() => this._syncDecorators());
+      this._observer.observe(this.shadowRoot || this, { childList: true, subtree: true });
+      if (super.connectedCallback) await super.connectedCallback();
+      const aMethods = getLifecycleMetadata(this, ON_AFTER_CONNECTED_METADATA_KEY);
+      aMethods?.forEach((m) => {
         if (typeof this[m] === "function") this[m]();
       });
     }
-    // 4. Handle attribute changes and route to decorated methods
     attributeChangedCallback(name, oldValue, newValue) {
-      if (super.attributeChangedCallback) {
-        super.attributeChangedCallback(name, oldValue, newValue);
-      }
-      const methodKeys = attributeChangedMap?.get(name);
-      if (methodKeys && Array.isArray(methodKeys)) {
-        methodKeys.forEach((key) => {
-          if (typeof this[key] === "function") {
-            this[key](newValue, oldValue, name);
+      if (super.attributeChangedCallback) super.attributeChangedCallback(name, oldValue, newValue);
+      if (attributePropsList) {
+        attributePropsList.forEach((meta) => {
+          if (meta.options.name === name) {
+            if (String(this[meta.propertyKey]) !== String(newValue)) this[meta.propertyKey] = newValue;
           }
         });
       }
-      const wildcardMethodKeys = attributeChangedMap?.get(ATTRIBUTE_CHANGED_WILDCARD);
-      if (wildcardMethodKeys && Array.isArray(wildcardMethodKeys)) {
-        wildcardMethodKeys.forEach((key) => {
-          if (typeof this[key] === "function") {
-            this[key](newValue, oldValue, name);
-          }
+      if (typeof this._updateState === "function") this._updateState(name);
+      const aMethodsMap = getLifecycleMetadata(constructor, ON_ATTRIBUTE_CHANGED_METADATA_KEY);
+      const mKeys = aMethodsMap?.get(name);
+      if (mKeys && Array.isArray(mKeys))
+        mKeys.forEach((key) => {
+          if (typeof this[key] === "function") this[key](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) => {
+              new Function("event", "$data", newValue).call(this, e, e.detail);
+            };
+            this.addEventListener(eType, nHandler);
+            this._emitHandlers.set(eType, nHandler);
+          }
+        }
       }
+      const wMethodsKeys = aMethodsMap?.get(ATTRIBUTE_CHANGED_WILDCARD);
+      if (wMethodsKeys && Array.isArray(wMethodsKeys))
+        wMethodsKeys.forEach((key) => {
+          if (typeof this[key] === "function") this[key](newValue, oldValue, name);
+        });
     }
   };
   const registry = config.customElementRegistry || (typeof customElements !== "undefined" ? customElements : void 0);
   if (registry && !registry.get(config.name)) {
-    const options = extendsTagName ? { extends: extendsTagName } : void 0;
-    if (extendsTagName && typeof document !== "undefined") {
-      const isSupported = document.createElement(extendsTagName, { is: "any" }).outerHTML.indexOf("is=") !== -1;
-      if (!isSupported) {
-        console.warn(`[SWC] Browser does not support 'is' attribute (Customized Built-in Elements). If you are on Safari, please include '@ungap/custom-elements' polyfill.`);
-      }
-    }
-    registry.define(config.name, NewClass, options);
+    registry.define(config.name, NewClass, config.extends ? { extends: config.extends } : void 0);
   }
   ReflectUtils.defineMetadata(ELEMENT_CONFIG_KEY, config, NewClass);
   return NewClass;
@@ -269,6 +399,7 @@ const getElementConfig = (target) => {
 };
 export {
   ELEMENT_CONFIG_KEY,
+  STATE_CHANGE_EVENT,
   elementDefine,
   getElementConfig
 };