@dooboostore/simple-web-component 1.0.4 → 1.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dooboostore/simple-web-component",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "license": "MIT",
   "type": "module",
   "main": "./dist/cjs/index.js",
@@ -80,8 +80,8 @@
     "esbuild": "^0.23.0",
     "reflect-metadata": "^0.2.2",
     "@dooboostore/core": "1.0.28",
-    "@dooboostore/core-web": "1.0.9",
-    "@dooboostore/core-node": "1.0.10"
+    "@dooboostore/core-node": "1.0.10",
+    "@dooboostore/core-web": "1.0.9"
   },
   "scripts": {
     "clean": "rm -rf dist",

package/src/decorators/addEventListener.ts

@@ -1,12 +1,15 @@
 import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';
 
 export interface AddEventListenerOptions extends EventListenerOptions {
-  selector?: string;
-  eventName: string;
+  query?: string;
+  type: string;
   useShadow?: boolean;
   capture?: boolean;
   once?: boolean;
   passive?: boolean;
+  stopPropagation?: boolean;
+  stopImmediatePropagation?: boolean;
+  preventDefault?: boolean;
 }
 
 export interface AddEventListenerMetadata {
@@ -16,9 +19,12 @@ export interface AddEventListenerMetadata {
 
 export const ADD_EVENT_LISTENER_METADATA_KEY = Symbol('simple-web-component:add-event-listener');
 
-export const addEventListener = (options: AddEventListenerOptions): MethodDecorator => {
+export function addEventListener(type: string, query?: string): MethodDecorator;
+export function addEventListener(options: AddEventListenerOptions): MethodDecorator;
+export function addEventListener(arg1: string | AddEventListenerOptions, arg2?: string): MethodDecorator {
   return (target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor) => {
     const constructor = target.constructor;
+    const options: AddEventListenerOptions = typeof arg1 === 'string' ? { type: arg1, query: arg2 } : arg1;
 
     let listeners = ReflectUtils.getMetadata<AddEventListenerMetadata[]>(ADD_EVENT_LISTENER_METADATA_KEY, constructor);
     if (!listeners) {
@@ -27,7 +33,7 @@ export const addEventListener = (options: AddEventListenerOptions): MethodDecora
     }
     listeners.push({ options, propertyKey });
   };
-};
+}
 
 export const getAddEventListenerMetadata = (target: any): AddEventListenerMetadata[] | undefined => {
   const constructor = target instanceof Function ? target : target.constructor;

package/src/decorators/attribute.ts

@@ -0,0 +1,77 @@
+import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';
+
+export interface AttributeOptions {
+  name?: string;
+  type?: any; // String, Number, Boolean, Object
+  disableReflect?: boolean; // Default is false (reflect is enabled by default)
+}
+
+export interface AttributeMetadata {
+  propertyKey: string | symbol;
+  options: AttributeOptions;
+}
+
+export const ATTRIBUTE_METADATA_KEY = Symbol('simple-web-component:attribute');
+
+export function attribute(nameOrOptions?: string | AttributeOptions): PropertyDecorator {
+  return (target: Object, propertyKey: string | symbol) => {
+    const constructor = target.constructor;
+    const options: AttributeOptions = typeof nameOrOptions === 'string' ? { name: nameOrOptions } : nameOrOptions || {};
+
+    if (!options.name) options.name = String(propertyKey);
+    if (!options.type) options.type = String;
+    if (options.disableReflect === undefined) options.disableReflect = false;
+
+    let list = ReflectUtils.getMetadata<AttributeMetadata[]>(ATTRIBUTE_METADATA_KEY, constructor);
+    if (!list) {
+      list = [];
+      ReflectUtils.defineMetadata(ATTRIBUTE_METADATA_KEY, list, constructor);
+    }
+    list.push({ propertyKey, options });
+
+    // Define getter and setter for the property
+    const internalKey = Symbol(String(propertyKey));
+    Object.defineProperty(target, propertyKey, {
+      get(this: any) {
+        return this[internalKey];
+      },
+      set(this: any, val: any) {
+        const oldVal = this[internalKey];
+        if (oldVal === val) return;
+
+        // Type conversion
+        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;
+
+        // Reflection
+        if (!options.disableReflect && this.setAttribute) {
+          if (convertedVal === null || convertedVal === undefined || 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
+    });
+  };
+}
+
+export const getAttributeMetadataList = (target: any): AttributeMetadata[] | undefined => {
+  const constructor = target instanceof Function ? target : target.constructor;
+  return ReflectUtils.getMetadata(ATTRIBUTE_METADATA_KEY, constructor);
+};

package/src/decorators/elementDefine.ts

@@ -1,20 +1,24 @@
 import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';
-import { getAttributeChangedMap, ATTRIBUTE_CHANGED_WILDCARD } from './attributeChanged';
-import { getTemplateMethod } from './template';
-import { getStyleMethod } from './style';
+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 } from './lifecycles';
+import { getAttributeMetadataList } from './attribute';
+import { getStateMetadataList } from './state';
+import { getEmitCustomEventMetadataList } from './emitCustomEvent';
+import { SwcUtils } from '../utils/Utils';
 
 export interface ElementConfig {
   name: string;
-  useShadow?: boolean;
   extends?: string;
   observedAttributes?: string[];
   customElementRegistry?: CustomElementRegistry;
+  autoRemoveEventListeners?: boolean;
 }
 
 export const ELEMENT_CONFIG_KEY = Symbol('simple-web-component:element-config');
+export const STATE_CHANGE_EVENT = 'swc:state-change';
 
 const BUILT_IN_TAG_MAP = new Map<any, string>();
 
@@ -24,7 +28,6 @@ const registerTag = (className: string, tagName: string) => {
   }
 };
 
-// Register comprehensive list of supported tags for automatic extends inference
 [
   ['HTMLAnchorElement', 'a'],
   ['HTMLAreaElement', 'area'],
@@ -89,8 +92,6 @@ export const elementDefine =
   (constructor: any) => {
     const config: ElementConfig = typeof inConfig === 'string' ? { name: inConfig } : inConfig;
 
-    // 1. Automatically derive extendsTagName from prototype chain if not provided
-
     let extendsTagName = config.extends;
     if (!extendsTagName) {
       let proto = Object.getPrototypeOf(constructor);
@@ -101,15 +102,22 @@ export const elementDefine =
       }
     }
 
-    // 2. Automatically collect observed attributes from @attributeChanged decorators
-    const attributeChangedMap = getAttributeChangedMap(constructor);
-    const observedFromDecorators = attributeChangedMap ? Array.from(attributeChangedMap.keys()).filter(it => it !== ATTRIBUTE_CHANGED_WILDCARD) : [];
-    const mergedObservedAttributes = [...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 = [...new Set([...(config.observedAttributes ?? []), ...observedFromProps, ...observedFromEmits])];
 
-    // 3. Create a new anonymous class that extends the original constructor
     const NewClass = class extends (constructor as any) {
+      private _swcId = Math.random().toString(36).substring(2, 11);
       private _observer: 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>();
 
       static get observedAttributes() {
         return mergedObservedAttributes;
@@ -117,13 +125,38 @@ export const elementDefine =
 
       constructor(...args: any[]) {
         super(...args);
-        if (config.useShadow === true && !this.shadowRoot) {
+        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
+            });
+          });
+        }
+        const innerHtmlList = getInnerHtmlMetadataList(this);
+        if (innerHtmlList?.some(it => it.options.useShadow === true) && !this.shadowRoot) {
           this.attachShadow({ mode: 'open' });
         }
       }
 
       private _syncDecorators() {
-        // 5. Execute @query and @queryAll methods
+        this._buildStateMap();
         const queryMetadata = getQueryMetadata(this);
         if (queryMetadata) {
           queryMetadata
@@ -131,9 +164,6 @@ export const elementDefine =
             .forEach(it => {
               const root = it.options.useShadow !== false && this.shadowRoot ? this.shadowRoot : this;
               const element = root.querySelector(it.selector);
-
-              // 중복 호출 방지: 해당 selector로 찾은 요소가 이전과 다를 때만 호출하거나,
-              // 또는 매번 호출할지 결정해야 함. 여기서는 새로운 요소가 발견되면 호출하는 방식으로 처리.
               if (element) {
                 let bound = this._boundElements.get(element);
                 if (!bound) {
@@ -147,7 +177,6 @@ export const elementDefine =
               }
             });
         }
-
         const queryAllMetadata = getQueryAllMetadata(this);
         if (queryAllMetadata) {
           queryAllMetadata
@@ -155,22 +184,15 @@ export const elementDefine =
             .forEach(it => {
               const root = it.options.useShadow !== false && this.shadowRoot ? this.shadowRoot : this;
               const elements = root.querySelectorAll(it.selector);
-
-              // queryAll은 목록이 바뀔 수 있으므로 일단 호출하되,
-              // 내부 로직은 사용자에게 맡기거나 좀 더 정교한 비교가 필요할 수 있음.
-              // 여기서는 단순하게 호출만 다시 함. (사용자가 요청한 '다시 호출' 반영)
               (this as any)[it.propertyKey](elements);
             });
         }
-
-        // 6. Register @addEventListener methods
         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 as any as Element];
-
+            const targetElements = query ? root.querySelectorAll(query) : [this as any as Element];
             targetElements.forEach(targetElement => {
               if (targetElement) {
                 let bound = this._boundElements.get(targetElement);
@@ -178,18 +200,21 @@ export const elementDefine =
                   bound = 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 as any)[it.propertyKey](event);
-                    },
-                    options
-                  );
+                  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 => {
+                    if (typeof (this as any)[m] === 'function') (this as any)[m](targetElement, type, handler);
+                  });
                 }
               }
             });
@@ -197,121 +222,209 @@ export const elementDefine =
         }
       }
 
-      disconnectedCallback() {
-        if (this._observer) {
-          this._observer.disconnect();
-        }
-        if (super.disconnectedCallback) {
-          super.disconnectedCallback();
-        }
+      private _buildStateMap() {
+        this._stateBindings.clear();
+        this._externalSources.clear();
+        const scan = (root: Node) => {
+          const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT | 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.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 as any as Node);
       }
 
-      connectedMoveCallback() {
-        //default logic...
-        if (super.connectedMoveCallback) {
-          super.connectedMoveCallback();
-        }
+      private _parseAndBind(node: Node | Attr, type: 'text' | 'attribute', owner?: HTMLElement) {
+        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 as any)._asKey === rootName || (this as any)._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 as any)[tplKey]) (node as any)[tplKey] = content;
+          this._stateBindings.get(rootName)!.push({ node, type, owner, path: fullPath });
+          this._updateState(rootName);
+        });
       }
 
-      adoptedCallback() {
-        //default logic...
-        if (super.adoptedCallback) {
-          super.adoptedCallback();
-        }
+      private _updateState(stateName: string) {
+        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 }));
       }
 
-      async connectedCallback() {
-        const templateMethod = getTemplateMethod(this);
-        const styleMethod = getStyleMethod(this);
-
-        const template = templateMethod ? await (this as any)[templateMethod]() : undefined;
-        const style = styleMethod ? await (this as any)[styleMethod]() : undefined;
-
-        // If not using shadow DOM and no decorators are present, do nothing
-        if (!this.shadowRoot && template === undefined && style === undefined) {
-          return;
-        }
+      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];
+          const matches = Array.from(text.matchAll(/{{(.*?)}}/g));
+          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 !== undefined) break;
+              }
+              const externalSource = currentNewClass._externalSources?.get(root);
+              if (externalSource) {
+                val = SwcUtils.getValueByPath(externalSource, path.split('.').slice(1).join('.') || 'value', 'value');
+                if (val !== undefined) 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 !== undefined) break;
+              }
+              current = current.parentElement || (current.getRootNode() as any).host;
+            }
+            if (val !== undefined) {
+              const strVal = val === null || val === undefined ? '' : typeof val === 'object' ? '[Object]' : String(val);
+              text = text.replace(match[0], strVal);
+              if (bin.type === 'attribute' && bin.owner) {
+                if (val === null || val === undefined) bin.owner.removeAttribute(bin.attrName!);
+                else bin.owner.setAttribute(bin.attrName!, text);
+              }
+            }
+          }
+          if (bin.type === 'text') bin.node.textContent = text;
+        });
+      }
 
-        let content = '';
-        if (style !== undefined && style.trim().length > 0) {
-          content += `<style>${style}</style>`;
+      disconnectedCallback() {
+        const bMethods = getLifecycleMetadata(this, ON_BEFORE_DISCONNECTED_METADATA_KEY);
+        bMethods?.forEach(m => {
+          if (typeof (this as any)[m] === 'function') (this as any)[m]();
+        });
+        if (this._observer) this._observer.disconnect();
+        if (config.autoRemoveEventListeners) {
+          this._activeListeners.forEach(({ el, type, handler, options }) => el.removeEventListener(type, handler, options));
+          this._activeListeners = [];
         }
+        if (super.disconnectedCallback) super.disconnectedCallback();
+        const aMethods = getLifecycleMetadata(this, ON_AFTER_DISCONNECTED_METADATA_KEY);
+        aMethods?.forEach(m => {
+          if (typeof (this as any)[m] === 'function') (this as any)[m]();
+        });
+      }
 
-        if (template !== undefined) {
-          content += template;
-        } else if (!this.shadowRoot) {
-          content += this.innerHTML;
-        }
+      adoptedCallback() {
+        const bMethods = getLifecycleMetadata(this, ON_BEFORE_ADOPTED_METADATA_KEY);
+        bMethods?.forEach(m => {
+          if (typeof (this as any)[m] === 'function') (this as any)[m]();
+        });
+        if (super.adoptedCallback) super.adoptedCallback();
+        const aMethods = getLifecycleMetadata(this, ON_AFTER_ADOPTED_METADATA_KEY);
+        aMethods?.forEach(m => {
+          if (typeof (this as any)[m] === 'function') (this as any)[m]();
+        });
+      }
 
-        if (this.shadowRoot) {
-          this.shadowRoot.innerHTML = content;
-        } else {
-          this.innerHTML = content;
+      async connectedCallback() {
+        const bMethods = getLifecycleMetadata(this, ON_BEFORE_CONNECTED_METADATA_KEY);
+        bMethods?.forEach(m => {
+          if (typeof (this as any)[m] === 'function') (this as any)[m]();
+        });
+        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();
-
-        // 7. Watch for DOM changes (MutationObserver)
-        this._observer = new MutationObserver(() => {
-          (this as any)._syncDecorators();
+        this._observer = new MutationObserver(() => (this as any)._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 as any)[m] === 'function') (this as any)[m]();
         });
-        const target = this.shadowRoot || this;
-        this._observer.observe(target, { childList: true, subtree: true });
-
-        if (super.connectedCallback) {
-          await super.connectedCallback();
-        }
       }
 
-      // 4. Handle attribute changes and route to decorated methods
       attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) {
-        // Call the original callback if it exists
-        if (super.attributeChangedCallback) {
-          super.attributeChangedCallback(name, oldValue, newValue);
-        }
-
-        // Call all methods associated with @attributeChanged
-        const methodKeys = attributeChangedMap?.get(name);
-        if (methodKeys && Array.isArray(methodKeys)) {
-          methodKeys.forEach(key => {
-            if (typeof (this as any)[key] === 'function') {
-              (this as any)[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 as any)[meta.propertyKey]) !== String(newValue)) (this as any)[meta.propertyKey] = newValue;
             }
           });
         }
-
-        // Call the wildcard methods if they exist
-        const wildcardMethodKeys = attributeChangedMap?.get(ATTRIBUTE_CHANGED_WILDCARD);
-        if (wildcardMethodKeys && Array.isArray(wildcardMethodKeys)) {
-          wildcardMethodKeys.forEach(key => {
-            if (typeof (this as any)[key] === 'function') {
-              (this as any)[key](newValue, oldValue, name);
-            }
+        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);
           });
+        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 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);
+          });
       }
     };
 
-    // 5. Register Custom Element using specified or default registry
     const registry = config.customElementRegistry || (typeof customElements !== 'undefined' ? customElements : undefined);
     if (registry && !registry.get(config.name)) {
-      const options = extendsTagName ? { extends: extendsTagName } : undefined;
-
-      // Safari support check for Customized Built-in Elements
-      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 as any, options);
+      registry.define(config.name, NewClass as any, config.extends ? { extends: config.extends } : undefined);
     }
-
-    // 6. Save metadata
     ReflectUtils.defineMetadata(ELEMENT_CONFIG_KEY, config, NewClass);
-
     return NewClass as any;
   };