@dooboostore/simple-web-component 1.0.15 → 1.0.16

package/package.json

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

package/src/decorators/addEventListener.ts

@@ -1,8 +1,6 @@
 import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';
 
 export interface AddEventListenerOptions extends EventListenerOptions {
-  query?: string;
-  type: string;
   root?: 'light' | 'shadow' | 'all' | 'auto';
   capture?: boolean;
   once?: boolean;
@@ -10,28 +8,33 @@ export interface AddEventListenerOptions extends EventListenerOptions {
   stopPropagation?: boolean;
   stopImmediatePropagation?: boolean;
   preventDefault?: boolean;
+  delegate?: boolean;
 }
 
 export interface AddEventListenerMetadata {
+  selector: string;
+  type: string;
   options: AddEventListenerOptions;
   propertyKey: string | symbol;
 }
 
 export const ADD_EVENT_LISTENER_METADATA_KEY = Symbol('simple-web-component:add-event-listener');
 
-export function addEventListener(type: string, query?: string): MethodDecorator;
-export function addEventListener(options: AddEventListenerOptions): MethodDecorator;
-export function addEventListener(arg1: string | AddEventListenerOptions, arg2?: string): MethodDecorator {
+/**
+ * @addEventListener decorator to bind events to elements.
+ * Usage: @addEventListener('.btn', 'click') onClick() { ... }
+ * Usage: @addEventListener('', 'scroll', { passive: true }) onScroll() { ... }
+ */
+export function addEventListener(selector: string, type: string, options: AddEventListenerOptions = {}): 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) {
       listeners = [];
       ReflectUtils.defineMetadata(ADD_EVENT_LISTENER_METADATA_KEY, listeners, constructor);
     }
-    listeners.push({ options, propertyKey });
+    listeners.push({ selector, type, options, propertyKey });
   };
 }
 

package/src/decorators/elementDefine.ts

@@ -123,9 +123,11 @@ export const elementDefine =
         }
       }
 
-      private _bindAttributeEvent(el: HTMLElement, attrName: string, script: string) {
-        if (!attrName.startsWith('swc-on-')) return;
-        const eventName = attrName.substring(7);
+      private _bindAttributeEvent(el: HTMLElement, attrName: string, script: string, eventName?: string) {
+        if (!eventName) {
+          if (!attrName.startsWith('swc-on-')) return;
+          eventName = attrName.substring(7);
+        }
         if (swcLifecycleAttributes.includes(attrName)) return;
 
         const elHandlers = getHandlers(this);
@@ -190,43 +192,75 @@ export const elementDefine =
 
         // --- @addEventListener binding ---
         addEventListenerList.forEach(meta => {
-          const { type, query, root, capture, once, passive, stopPropagation, stopImmediatePropagation, preventDefault } = meta.options;
-          const targetEls: (HTMLElement | Element | Document | ShadowRoot | Window)[] = [];
+          const { selector, type, options } = meta;
+          const { root, capture, once, passive, stopPropagation, stopImmediatePropagation, preventDefault, delegate } = options;
 
-          if (!query) {
-            targetEls.push(this as any);
-          } else {
-            const searchRoots: (HTMLElement | ShadowRoot)[] = [];
+          if (delegate && selector && selector !== ':host') {
+            const bindRoots: (HTMLElement | ShadowRoot)[] = [];
             const r = root || 'auto';
             if (r === 'auto') {
-              searchRoots.push((this.shadowRoot || (this as any)) as any);
+              bindRoots.push(this.shadowRoot || (this as any));
             } else if (r === 'light') {
-              searchRoots.push(this as any);
+              bindRoots.push(this as any);
             } else if (r === 'shadow') {
-              if (this.shadowRoot) searchRoots.push(this.shadowRoot as any);
+              if (this.shadowRoot) bindRoots.push(this.shadowRoot as any);
             } else if (r === 'all') {
-              searchRoots.push(this as any);
-              if (this.shadowRoot) searchRoots.push(this.shadowRoot as any);
+              bindRoots.push(this as any);
+              if (this.shadowRoot) bindRoots.push(this.shadowRoot as any);
             }
 
-            searchRoots.forEach(sr => {
-              const found = sr.querySelectorAll(query);
-              found.forEach(el => targetEls.push(el as any));
+            bindRoots.forEach(bindRoot => {
+              const handler = (event: Event) => {
+                const target = event.target as HTMLElement;
+                const matchedEl = target.closest(selector);
+                if (matchedEl && (bindRoot as any).contains(matchedEl)) {
+                  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, matchedEl]);
+                }
+              };
+              bindRoot.addEventListener(type, handler, { capture, once, passive });
             });
-          }
+          } else {
+            const targetEls: (HTMLElement | Element | Document | ShadowRoot | Window)[] = [];
+            if (!selector || selector === ':host') {
+              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);
+              }
+
+              searchRoots.forEach(sr => {
+                const found = sr.querySelectorAll(selector);
+                found.forEach(el => targetEls.push(el as any));
+              });
+            }
 
-          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);
-          });
+            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 opts = { capture, once, passive };
+              el.addEventListener(type, handler, opts);
+            });
+          }
         });
 
         if (super.connectedCallback) await super.connectedCallback();
@@ -272,7 +306,9 @@ export const elementDefine =
 
         if (name.startsWith('swc-on-') && !swcLifecycleAttributes.includes(name)) {
           if (newVal !== null) {
-            this._bindAttributeEvent(this as any, name, newVal);
+            const customEventMeta = emitCustomEventList.find(it => it.options.attributeName === name);
+            const eventName = customEventMeta ? customEventMeta.options.type : name.substring(7);
+            this._bindAttributeEvent(this as any, name, newVal, eventName);
           }
         }
 
@@ -299,6 +335,25 @@ export const elementDefine =
       }
     });
 
+    // --- @emitCustomEvent wrapping logic ---
+    emitCustomEventList.forEach(meta => {
+      const { propertyKey, options } = meta;
+      const original = NewClass.prototype[propertyKey as any];
+      if (typeof original === 'function') {
+        NewClass.prototype[propertyKey as any] = function (...args: any[]) {
+          const detail = original.apply(this, args);
+          const event = new CustomEvent(options.type, {
+            detail,
+            bubbles: options.bubbles,
+            composed: options.composed,
+            cancelable: options.cancelable
+          });
+          this.dispatchEvent(event);
+          return detail;
+        };
+      }
+    });
+
     const originalProto = constructor.prototype;
     const newProto = NewClass.prototype;
     Object.getOwnPropertyNames(originalProto).forEach(name => {

package/src/decorators/emitCustomEvent.ts

@@ -2,9 +2,9 @@ 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
+  attributeName?: string;
+  bubbles?: boolean;
+  composed?: boolean;
   cancelable?: boolean;
 }
 
@@ -16,12 +16,12 @@ export interface EmitCustomEventMetadata {
 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) => {
+  return (target: Object, propertyKey: string | symbol) => {
     const constructor = target.constructor;
     const options: EmitCustomEventOptions = typeof typeOrOptions === 'string' ? { type: typeOrOptions } : typeOrOptions;
 
     if (!options.attributeName) {
-      options.attributeName = `on${options.type}`;
+      options.attributeName = `swc-on-${options.type}`;
     }
     if (options.bubbles === undefined) options.bubbles = true;
     if (options.composed === undefined) options.composed = true;
@@ -32,22 +32,6 @@ export function emitCustomEvent(typeOrOptions: string | EmitCustomEventOptions):
       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;
-    };
   };
 }
 

package/src/decorators/query.ts

@@ -1,7 +1,6 @@
 import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';
 
 export interface QueryOptions {
-  selector?: string;
   root?: 'light' | 'shadow' | 'all' | 'auto';
 }
 
@@ -9,61 +8,49 @@ export interface QueryMetadata {
   selector: string;
   options: QueryOptions;
   propertyKey: string | symbol;
-  isMethod: boolean;
 }
 
 export const QUERY_METADATA_KEY = Symbol('simple-web-component:query');
 
-export function query(selector: string): any;
-export function query(options: QueryOptions): any;
-export function query(target: Object, propertyKey: string | symbol): void;
-export function query(arg1?: string | QueryOptions | Object, arg2?: string | symbol): any {
-  const decorator = (selector: string, options: QueryOptions, target: Object, propertyKey: string | symbol, descriptor?: PropertyDescriptor) => {
-    const isMethod = !!descriptor;
-    const constructor = target.constructor;
+/**
+ * @query decorator to inject a single element into a class property.
+ * Usage: @query('.my-class') myEl!: HTMLElement;
+ * Usage: @query('#my-id', { root: 'shadow' }) myEl!: HTMLElement;
+ */
+export function query(selector: string, options: QueryOptions = {}): PropertyDecorator {
+  return (target: Object, propertyKey: string | symbol, descriptor?: never): void => {
+    if (descriptor !== undefined) {
+      throw new Error(`@query decorator cannot be used on methods. (Method: ${String(propertyKey)})`);
+    }
 
+    const constructor = target.constructor;
     let queries = ReflectUtils.getMetadata<QueryMetadata[]>(QUERY_METADATA_KEY, constructor);
     if (!queries) {
       queries = [];
       ReflectUtils.defineMetadata(QUERY_METADATA_KEY, queries, constructor);
     }
-    queries.push({ selector, options, propertyKey, isMethod });
-
-    if (!isMethod) {
-      Object.defineProperty(target, propertyKey, {
-        get(this: HTMLElement) {
-          if (!selector) return this;
-          let searchRoot: Node = this;
-          if (options.root === 'shadow') searchRoot = this.shadowRoot || this;
-          else if (options.root === 'light') searchRoot = this;
-          else searchRoot = this.shadowRoot || this; // Default: Auto (Shadow-First)
-
-          return (searchRoot as HTMLElement).querySelector(selector);
-        },
-        enumerable: true,
-        configurable: true
-      });
-    }
-  };
-
-  // Case: @query (parameterless decorator)
-  if (arg1 && typeof arg2 === 'string') {
-    return decorator('', {}, arg1 as Object, arg2 as string | symbol);
-  }
-
-  // Case: @query('selector') or @query({ selector: '...', ... })
-  return (target: Object, propertyKey: string | symbol, descriptor?: PropertyDescriptor) => {
-    let selector = '';
-    let options: QueryOptions = {};
-
-    if (typeof arg1 === 'string') {
-      selector = arg1;
-    } else if (typeof arg1 === 'object') {
-      options = arg1 as QueryOptions;
-      selector = options.selector || '';
-    }
-
-    decorator(selector, options, target, propertyKey, descriptor);
+    queries.push({ selector, options, propertyKey });
+
+    Object.defineProperty(target, propertyKey, {
+      get(this: HTMLElement) {
+        if (!selector || selector === ':host') return this;
+        const r = options.root || 'auto';
+
+        if (r === 'shadow') {
+          return this.shadowRoot ? this.shadowRoot.querySelector(selector) : null;
+        }
+        if (r === 'light') {
+          return this.querySelector(selector);
+        }
+        if (r === 'all') {
+          return this.shadowRoot?.querySelector(selector) || this.querySelector(selector);
+        }
+        // auto
+        return (this.shadowRoot || this).querySelector(selector);
+      },
+      enumerable: true,
+      configurable: true
+    });
   };
 }
 

package/src/decorators/queryAll.ts

@@ -1,7 +1,6 @@
 import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';
 
 export interface QueryAllOptions {
-  selector?: string;
   root?: 'light' | 'shadow' | 'all' | 'auto';
 }
 
@@ -9,61 +8,52 @@ export interface QueryAllMetadata {
   selector: string;
   options: QueryAllOptions;
   propertyKey: string | symbol;
-  isMethod: boolean;
 }
 
 export const QUERY_ALL_METADATA_KEY = Symbol('simple-web-component:query-all');
 
-export function queryAll(selector: string): any;
-export function queryAll(options: QueryAllOptions): any;
-export function queryAll(target: Object, propertyKey: string | symbol): void;
-export function queryAll(arg1?: string | QueryAllOptions | Object, arg2?: string | symbol): any {
-  const decorator = (selector: string, options: QueryAllOptions, target: Object, propertyKey: string | symbol, descriptor?: PropertyDescriptor) => {
-    const isMethod = !!descriptor;
-    const constructor = target.constructor;
+/**
+ * @queryAll decorator to inject a list of elements into a class property.
+ * Usage: @queryAll('.items') list!: NodeListOf<HTMLElement>;
+ * Usage: @queryAll('li', { root: 'shadow' }) list!: HTMLElement[];
+ */
+export function queryAll(selector: string, options: QueryAllOptions = {}): PropertyDecorator {
+  return (target: Object, propertyKey: string | symbol, descriptor?: never): void => {
+    if (descriptor !== undefined) {
+      throw new Error(`@queryAll decorator cannot be used on methods. (Method: ${String(propertyKey)})`);
+    }
 
+    const constructor = target.constructor;
     let queries = ReflectUtils.getMetadata<QueryAllMetadata[]>(QUERY_ALL_METADATA_KEY, constructor);
     if (!queries) {
       queries = [];
       ReflectUtils.defineMetadata(QUERY_ALL_METADATA_KEY, queries, constructor);
     }
-    queries.push({ selector, options, propertyKey, isMethod });
-
-    if (!isMethod) {
-      Object.defineProperty(target, propertyKey, {
-        get(this: HTMLElement) {
-          if (!selector) return [this];
-          let searchRoot: Node = this;
-          if (options.root === 'shadow') searchRoot = this.shadowRoot || this;
-          else if (options.root === 'light') searchRoot = this;
-          else searchRoot = this.shadowRoot || this; // Default: Auto (Shadow-First)
-
-          return (searchRoot as HTMLElement).querySelectorAll(selector);
-        },
-        enumerable: true,
-        configurable: true
-      });
-    }
-  };
-
-  // Case: @queryAll (parameterless decorator)
-  if (arg1 && typeof arg2 === 'string') {
-    return decorator('', {}, arg1 as Object, arg2 as string | symbol);
-  }
-
-  // Case: @queryAll('selector') or @queryAll({ selector: '...', ... })
-  return (target: Object, propertyKey: string | symbol, descriptor?: PropertyDescriptor) => {
-    let selector = '';
-    let options: QueryAllOptions = {};
-
-    if (typeof arg1 === 'string') {
-      selector = arg1;
-    } else if (typeof arg1 === 'object') {
-      options = arg1 as QueryAllOptions;
-      selector = options.selector || '';
-    }
-
-    decorator(selector, options, target, propertyKey, descriptor);
+    queries.push({ selector, options, propertyKey });
+
+    Object.defineProperty(target, propertyKey, {
+      get(this: HTMLElement) {
+        if (!selector || selector === ':host') return [this];
+        const r = options.root || 'auto';
+
+        if (r === 'shadow') {
+          return this.shadowRoot ? this.shadowRoot.querySelectorAll(selector) : [];
+        }
+        if (r === 'light') {
+          return this.querySelectorAll(selector);
+        }
+        if (r === 'all') {
+          const sNodes = this.shadowRoot ? Array.from(this.shadowRoot.querySelectorAll(selector)) : [];
+          const lNodes = Array.from(this.querySelectorAll(selector));
+          return [...sNodes, ...lNodes];
+        }
+        // auto
+        const root = this.shadowRoot || this;
+        return root.querySelectorAll(selector);
+      },
+      enumerable: true,
+      configurable: true
+    });
   };
 }
 

package/src/types.ts

@@ -6,6 +6,7 @@ export enum InjectSituationType {
   APP_HOST = 'SIMPLE_WEB_COMPONENT://APPHOST',
   APP_HOSTS = 'SIMPLE_WEB_COMPONENT://APPHOSTS',
   HOST = 'SIMPLE_WEB_COMPONENT://HOST',
+  PARENT_HOST = 'SIMPLE_WEB_COMPONENT://PARENTHOST',
   HOSTS = 'SIMPLE_WEB_COMPONENT://HOSTS',
   FIRST_HOST = 'SIMPLE_WEB_COMPONENT://FIRSTHOST',
   LAST_HOST = 'SIMPLE_WEB_COMPONENT://LASTHOST',
@@ -14,10 +15,11 @@ export enum InjectSituationType {
 }
 
 export type HostSet = {
-  $host: HTMLElement | null;
-  $hosts: HTMLElement[];
-  $firstHost: HTMLElement | null;
-  $lastHost: HTMLElement | null;
+  $host: HTMLElement; // Current component itself
+  $parentHost: HTMLElement | null; // Nearest parent SWC component
+  $hosts: HTMLElement[]; // [self, parent, ..., top]
+  $firstHost: HTMLElement | null; // Top-most SWC ancestor
+  $lastHost: HTMLElement | null; // Same as $parentHost (for backward compatibility or clarity)
   $appHost: SwcAppInterface | null;
   $appHosts: SwcAppInterface[];
   $firstAppHost: SwcAppInterface | null;