@dooboostore/simple-web-component 1.0.5 → 1.0.7

package/src/decorators/elementDefine.ts

@@ -1,19 +1,24 @@
 import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';
-import { getAttributeChangedMap, ATTRIBUTE_CHANGED_WILDCARD } from './attributeChanged';
 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 } from './lifecycles';
+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;
   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>();
 
@@ -23,7 +28,6 @@ const registerTag = (className: string, tagName: string) => {
   }
 };
 
-// Register comprehensive list of supported tags for automatic extends inference
 [
   ['HTMLAnchorElement', 'a'],
   ['HTMLAreaElement', 'area'],
@@ -88,7 +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);
@@ -99,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;
@@ -115,32 +125,74 @@ export const elementDefine =
 
       constructor(...args: any[]) {
         super(...args);
+        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);
-        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' });
         }
       }
 
       private _syncDecorators() {
-        // 5. Execute @query and @queryAll methods
+        this._buildStateMap();
+
+        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 {
+            // Default: 'auto'
+            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 root = it.options.useShadow !== false && this.shadowRoot ? this.shadowRoot : this;
-              const element = root.querySelector(it.selector);
-
-              if (element) {
-                let bound = this._boundElements.get(element);
+              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(element, bound);
+                  this._boundElements.set(foundEl, bound);
                 }
                 if (!bound.has(it.propertyKey)) {
-                  (this as any)[it.propertyKey](element);
+                  (this as any)[it.propertyKey](foundEl);
                   bound.add(it.propertyKey);
                 }
               }
@@ -152,188 +204,256 @@ export const elementDefine =
           queryAllMetadata
             .filter(it => it.isMethod)
             .forEach(it => {
-              const root = it.options.useShadow !== false && this.shadowRoot ? this.shadowRoot : this;
-              const elements = root.querySelectorAll(it.selector);
-              (this as any)[it.propertyKey](elements);
+              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);
             });
         }
 
-        // 6. Register @addEventListener methods
         const eventListeners = getAddEventListenerMetadata(this);
         if (eventListeners) {
           eventListeners.forEach(it => {
-            const { selector, eventName, useShadow, ...options } = it.options;
-            const root = useShadow !== false && this.shadowRoot ? this.shadowRoot : this;
-            const targetElements = selector ? root.querySelectorAll(selector) : [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 { 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 => {
+                      if (typeof (this as any)[m] === 'function') (this as any)[m](targetElement, type, handler);
+                    });
+                  }
                 }
-
-                const eventKey = `event:${String(it.propertyKey)}:${eventName}`;
-                if (!bound.has(eventKey)) {
-                  targetElement.addEventListener(
-                    eventName,
-                    event => {
-                      (this as any)[it.propertyKey](event);
-                    },
-                    options
-                  );
-                  bound.add(eventKey);
-                }
-              }
+              });
             });
           });
         }
       }
 
-      disconnectedCallback() {
-        // 1. onBeforeDisconnected
-        const beforeMethods = getLifecycleMetadata(this, ON_BEFORE_DISCONNECTED_METADATA_KEY);
-        beforeMethods?.forEach(m => {
-          if (typeof (this as any)[m] === 'function') (this as any)[m]();
+      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);
+      }
+
+      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);
         });
+      }
 
-        if (this._observer) {
-          this._observer.disconnect();
-        }
+      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 }));
+      }
 
-        if (super.disconnectedCallback) {
-          super.disconnectedCallback();
-        }
+      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;
+        });
+      }
 
-        // 2. onAfterDisconnected
-        const afterMethods = getLifecycleMetadata(this, ON_AFTER_DISCONNECTED_METADATA_KEY);
-        afterMethods?.forEach(m => {
+      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]();
         });
       }
 
       adoptedCallback() {
-        // 1. onBeforeAdopted
-        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 as any)[m] === 'function') (this as any)[m]();
         });
-
-        if (super.adoptedCallback) {
-          super.adoptedCallback();
-        }
-
-        // 2. onAfterAdopted
-        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 as any)[m] === 'function') (this as any)[m]();
         });
       }
 
       async connectedCallback() {
-        // 1. onBeforeConnected
-        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 as any)[m] === 'function') (this as any)[m]();
         });
-
-        if (typeof (this as any).initCore === 'function') {
-          (this as any).initCore();
-        }
-
-        const innerHtmlList = getInnerHtmlMetadataList(this);
-
-        let shadowContent = '';
-        let lightContent = '';
-
-        if (innerHtmlList) {
-          for (const meta of innerHtmlList) {
+        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) {
-                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 as any)._syncDecorators();
-
-        // 7. Watch for DOM changes (MutationObserver)
-        this._observer = new MutationObserver(() => {
-          (this as any)._syncDecorators();
-        });
-        const target = this.shadowRoot || this;
-        this._observer.observe(target, { childList: true, subtree: true });
-
-        if (super.connectedCallback) {
-          await super.connectedCallback();
-        }
-
-        // 2. onAfterConnected
-        const afterMethods = getLifecycleMetadata(this, ON_AFTER_CONNECTED_METADATA_KEY);
-        afterMethods?.forEach(m => {
+        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]();
         });
       }
 
-      // 4. Handle attribute changes and route to decorated methods
       attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) {
-        if (super.attributeChangedCallback) {
-          super.attributeChangedCallback(name, oldValue, newValue);
-        }
-
-        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;
             }
           });
         }
-
-        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;
   };
 

package/src/decorators/emitCustomEvent.ts

@@ -0,0 +1,57 @@
+import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';
+
+export interface EmitCustomEventOptions {
+  type: string;
+  attributeName?: string; // Default: on + type
+  bubbles?: boolean; // Default: true
+  composed?: boolean; // Default: true
+  cancelable?: boolean;
+}
+
+export interface EmitCustomEventMetadata {
+  propertyKey: string | symbol;
+  options: EmitCustomEventOptions;
+}
+
+export const EMIT_CUSTOM_EVENT_METADATA_KEY = Symbol('simple-web-component:emit-custom-event');
+
+export function emitCustomEvent(typeOrOptions: string | EmitCustomEventOptions): MethodDecorator {
+  return (target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor) => {
+    const constructor = target.constructor;
+    const options: EmitCustomEventOptions = typeof typeOrOptions === 'string' ? { type: typeOrOptions } : typeOrOptions;
+
+    if (!options.attributeName) {
+      options.attributeName = `on${options.type}`;
+    }
+    if (options.bubbles === undefined) options.bubbles = true;
+    if (options.composed === undefined) options.composed = true;
+
+    let list = ReflectUtils.getMetadata<EmitCustomEventMetadata[]>(EMIT_CUSTOM_EVENT_METADATA_KEY, constructor);
+    if (!list) {
+      list = [];
+      ReflectUtils.defineMetadata(EMIT_CUSTOM_EVENT_METADATA_KEY, list, constructor);
+    }
+    list.push({ propertyKey, options });
+
+    // Wrap the original method to dispatch event after execution
+    const originalMethod = descriptor.value;
+    descriptor.value = function (this: HTMLElement, ...args: any[]) {
+      const detail = originalMethod.apply(this, args);
+
+      const event = new CustomEvent(options.type, {
+        detail,
+        bubbles: options.bubbles,
+        composed: options.composed,
+        cancelable: options.cancelable
+      });
+
+      this.dispatchEvent(event);
+      return detail;
+    };
+  };
+}
+
+export const getEmitCustomEventMetadataList = (target: any): EmitCustomEventMetadata[] | undefined => {
+  const constructor = target instanceof Function ? target : target.constructor;
+  return ReflectUtils.getMetadata(EMIT_CUSTOM_EVENT_METADATA_KEY, constructor);
+};