@dooboostore/simple-web-component 1.0.47 → 1.0.49

package/src/decorators/emitCustomEvent.ts

@@ -1,9 +1,10 @@
 import {ReflectUtils} from '@dooboostore/core';
-import { SpecialSelector, SwcQueryOptions, HelperHostSet } from '../types';
+import { SpecialSelector, SwcQueryOptions, SwcFnSelector, SwcSelector, HelperHostSet } from '../types';
 import {ensureInit, getElementConfig} from './elementDefine';
 import {SwcUtils} from '../utils/Utils';
 
-export type EmitCustomEventSelector = string | ((currentThis: any, helper: HelperHostSet) => NodeList | Element | Element[] | null);
+export type EmitCustomEventFnSelector = SwcFnSelector;
+export type EmitCustomEventSelector = SwcSelector;
 
 export interface EmitCustomEventBaseOptions {
   bubbles?: boolean;
@@ -30,6 +31,13 @@ export interface EmitCustomEventBaseOptions {
 
 type Options = (EmitCustomEventBaseOptions & SwcQueryOptions) | (EmitCustomEventBaseOptions & SwcQueryOptions & { attributeName?: string });
 
+// 문자열 셀렉터 전용 — root 허용
+export type EmitCustomEventQueryOptions = Options;
+// 함수 셀렉터 전용 — root 금지
+export type EmitCustomEventNonQueryOptions = EmitCustomEventBaseOptions | (EmitCustomEventBaseOptions & { attributeName?: string });
+// 셀렉터 종류에 따라 옵션 타입 분기
+export type EmitCustomEventOptionsOf<S extends EmitCustomEventSelector> = S extends string ? EmitCustomEventQueryOptions : EmitCustomEventNonQueryOptions;
+
 export interface EmitCustomEventMetadata {
   propertyKey: string | symbol;
   selector: EmitCustomEventSelector;
@@ -39,9 +47,10 @@ export interface EmitCustomEventMetadata {
 
 export const EMIT_CUSTOM_EVENT_METADATA_KEY = Symbol.for('simple-web-component:emit-custom-event');
 
+export function emitCustomEvent(selector: string, type: string, options?: EmitCustomEventQueryOptions): MethodDecorator;
+export function emitCustomEvent(selector: EmitCustomEventFnSelector, type: string, options?: EmitCustomEventNonQueryOptions): MethodDecorator;
+export function emitCustomEvent(type: string, options?: EmitCustomEventQueryOptions): MethodDecorator;
 export function emitCustomEvent(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
-export function emitCustomEvent(selector: EmitCustomEventSelector, type: string, options?: Options): MethodDecorator;
-export function emitCustomEvent(type: string, options?: Options): MethodDecorator;
 /**
  * @emitCustomEvent decorator to dispatch custom events to a target.
  * 
@@ -108,7 +117,7 @@ function createEmitDecorator(selector: EmitCustomEventSelector, type: string, op
         const eventTargets: EventTarget[] = [];
         
         // Resolve selector if it's a function
-        let resolvedSelector: string | Element | NodeList | Element[] | null = selector as any;
+        let resolvedSelector: string | Node | Element | NodeList | Element[] | null = selector as any;
         if (typeof selector === 'function') {
           resolvedSelector = selector(this, hostSet);
         }
@@ -191,3 +200,62 @@ export const getEmitCustomEventMetadataList = (target: any): EmitCustomEventMeta
 
 // --- Aliases: emit... ---
 export const emit = emitCustomEvent;
+
+// ─── 편의 헬퍼 (selector/root 생략) ───
+
+export function emitThis(type: string, options?: EmitCustomEventQueryOptions): MethodDecorator {
+  return emitCustomEvent('$this', type, options);
+}
+export function emitAppHost(type: string, options?: EmitCustomEventQueryOptions): MethodDecorator {
+  return emitCustomEvent('$appHost', type, options);
+}
+export function emitWindow(type: string, options?: EmitCustomEventQueryOptions): MethodDecorator {
+  return emitCustomEvent('$window', type, options);
+}
+export function emitDocument(type: string, options?: EmitCustomEventQueryOptions): MethodDecorator {
+  return emitCustomEvent('$document', type, options);
+}
+export function emitLight(selector: string, type: string, options?: Omit<EmitCustomEventQueryOptions, 'root'>): MethodDecorator {
+  return emitCustomEvent(selector, type, {...options ?? {}, root: 'light'} as any);
+}
+export function emitShadow(selector: string, type: string, options?: Omit<EmitCustomEventQueryOptions, 'root'>): MethodDecorator {
+  return emitCustomEvent(selector, type, {...options ?? {}, root: 'shadow'} as any);
+}
+export function emitAll(selector: string, type: string, options?: Omit<EmitCustomEventQueryOptions, 'root'>): MethodDecorator {
+  return emitCustomEvent(selector, type, {...options ?? {}, root: 'all'} as any);
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// EmitCustomEventLifeCycler
+// ─────────────────────────────────────────────────────────────────────────────
+import { ElementDefineLifeCycler } from '../types';
+
+export class EmitCustomEventLifeCycler implements ElementDefineLifeCycler {
+  private hostEmitMeta: EmitCustomEventMetadata[] | null = null;
+
+  private getHostEmitMeta(inst: any): EmitCustomEventMetadata[] {
+    if (!this.hostEmitMeta) {
+      const all = getEmitCustomEventMetadataList(inst) ?? [];
+      this.hostEmitMeta = all.filter(m => m.selector === '$this' || m.selector === '');
+    }
+    return this.hostEmitMeta;
+  }
+
+  /** observedAttributes 에 포함할 attributeName 목록 */
+  getObservedAttributeNames(inst: any): string[] {
+    return this.getHostEmitMeta(inst).map(m => (m.options as any).attributeName).filter(Boolean) as string[];
+  }
+
+  onConnected(_helperHostSet: HelperHostSet): void {
+    // emit 처리는 descriptor.value 래핑으로 이미 완료. connected 시 별도 작업 없음
+  }
+
+  /** attributeChangedCallback 에서 elementDefine 이 직접 호출 */
+  onAttributeChanged(helperHostSet: HelperHostSet, name: string, _old: string | null, newVal: string | null): void {
+    const inst = helperHostSet.$this;
+    const matched = this.getHostEmitMeta(inst).find(m => (m.options as any).attributeName === name);
+    if (matched && newVal !== null) {
+      inst._bindAttributeEvent?.(inst, name, newVal, matched.type);
+    }
+  }
+}

package/src/decorators/index.ts

@@ -1,4 +1,7 @@
 export * from './addEventListener';
+export * from './mutationObserver';
+export * from './resizeObserver';
+export * from './intersectionObserver';
 export * from './applyAttribute';
 export * from './elementDefine';
 export * from './changedAttribute';
@@ -6,7 +9,6 @@ export * from './emitCustomEvent';
 export * from './applyNode';
 export * from './lifecycles';
 export * from './query';
-export * from './queryAll';
 export * from './applyClass';
 export * from './applyStyle';
 export * from './applyAttribute';
@@ -16,3 +18,5 @@ export * from './subscribeSwcAppMessageWhileConnected';
 export * from './publishSwcAppMessage';
 export * from './applySlot';
 export * from './state';
+export * from './setInterval';
+export * from './setTimeout';

package/src/decorators/intersectionObserver.ts

@@ -0,0 +1,259 @@
+import { ReflectUtils } from '@dooboostore/core';
+import { SpecialSelector, SwcQueryOptions, SwcFnSelector, SwcSelector, HelperHostSet } from '../types';
+
+// 공통 옵션 — IntersectionObserverInit + filter/removeObserver. root·delegate 제외.
+// 주의: 데코레이터의 root(light/shadow/all/auto) 는 셀렉터 스코프 선택용이다.
+// IntersectionObserver 의 스크롤 컨테이너 root 는 intersectionRoot 로 지정한다.
+export interface IntersectionObserverBaseOptions extends Omit<IntersectionObserverInit, 'root'> {
+  /** IntersectionObserver 의 스크롤 컨테이너 (viewport 대신). 데코레이터 root 와 혼동 주의. */
+  intersectionRoot?: Element | Document;
+  filter?: (matchedEls: HTMLElement[], meta: { currentThis: any, helper: HelperHostSet }) => boolean;
+  removeObserver?: (target: Element, optionValue: IntersectionObserverQueryOptions) => void;
+}
+
+// 문자열 셀렉터 전용 — root·delegate 허용
+export type IntersectionObserverQueryOptions = IntersectionObserverBaseOptions & SwcQueryOptions & { delegate?: boolean };
+// 함수 셀렉터 전용 — root·delegate 금지
+export type IntersectionObserverNonQueryOptions = IntersectionObserverBaseOptions;
+// 내부 저장/해석용
+export type IntersectionObserverOptions = IntersectionObserverQueryOptions;
+
+// 셀렉터 종류에 따라 옵션 타입 분기
+export type IntersectionObserverOptionsOf<S extends SwcSelector> = S extends string ? IntersectionObserverQueryOptions : IntersectionObserverNonQueryOptions;
+
+export interface IntersectionObserverMetadata {
+  propertyKey: string | symbol;
+  selector: SwcSelector;
+  options: IntersectionObserverOptions;
+}
+
+export const INTERSECTION_OBSERVER_METADATA_KEY = Symbol.for('simple-web-component:intersection-observer');
+
+export function intersectionObserver(target: SpecialSelector, options?: IntersectionObserverQueryOptions): MethodDecorator;
+export function intersectionObserver(selector: string, options?: IntersectionObserverQueryOptions): MethodDecorator;
+export function intersectionObserver(selector: SwcFnSelector, options?: IntersectionObserverNonQueryOptions): MethodDecorator;
+export function intersectionObserver(options?: IntersectionObserverQueryOptions): MethodDecorator;
+/**
+ * @intersectionObserver decorator to observe element intersection changes.
+ *
+ * IntersectionObserver 는 생성 시점에 옵션(threshold/rootMargin/root)이 고정되므로,
+ * 옵션별로 그룹을 만들어 observer 를 생성한다. 같은 옵션 그룹 안에서 delegate 동적 추적이 가능하다.
+ */
+export function intersectionObserver(selectorOrOptions?: SwcSelector | IntersectionObserverOptions, maybeOptions?: IntersectionObserverOptions): MethodDecorator {
+  return (targetObj: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor) => {
+    let selector: SwcSelector = '$this';
+    let options: IntersectionObserverOptions = {};
+
+    if (typeof selectorOrOptions === 'string' || typeof selectorOrOptions === 'function') {
+      selector = selectorOrOptions;
+      options = maybeOptions ?? {};
+    } else {
+      selector = '$this';
+      options = selectorOrOptions ?? {};
+    }
+
+    const constructor = targetObj.constructor;
+
+    let observers = ReflectUtils.getMetadata<IntersectionObserverMetadata[]>(INTERSECTION_OBSERVER_METADATA_KEY, constructor);
+    if (!observers) {
+      observers = [];
+      ReflectUtils.defineMetadata(INTERSECTION_OBSERVER_METADATA_KEY, observers, constructor);
+    }
+
+    observers.push({ propertyKey, selector, options });
+  };
+}
+
+export function intersectionObserverThis(options?: IntersectionObserverQueryOptions): MethodDecorator {
+  return intersectionObserver('$this', options);
+}
+
+// ─── root별 delegate 헬퍼 (root 주입 → 문자열 셀렉터 전용) ───
+
+export function intersectionObserverDelegateLight(selector: string, options?: Omit<IntersectionObserverQueryOptions, 'delegate'>): MethodDecorator;
+export function intersectionObserverDelegateLight(options?: Omit<IntersectionObserverQueryOptions, 'delegate'>): MethodDecorator;
+export function intersectionObserverDelegateLight(selectorOrOptions?: string | Omit<IntersectionObserverQueryOptions, 'delegate'>, maybeOptions?: Omit<IntersectionObserverQueryOptions, 'delegate'>): MethodDecorator {
+  if (typeof selectorOrOptions === 'string' || typeof selectorOrOptions === 'function') {
+    return intersectionObserver(selectorOrOptions as any, {...maybeOptions ?? {}, root: 'light', delegate: true});
+  }
+  return intersectionObserver({...selectorOrOptions ?? {}, root: 'light', delegate: true});
+}
+
+export function intersectionObserverDelegateShadow(selector: string, options?: Omit<IntersectionObserverQueryOptions, 'delegate'>): MethodDecorator;
+export function intersectionObserverDelegateShadow(options?: Omit<IntersectionObserverQueryOptions, 'delegate'>): MethodDecorator;
+export function intersectionObserverDelegateShadow(selectorOrOptions?: string | Omit<IntersectionObserverQueryOptions, 'delegate'>, maybeOptions?: Omit<IntersectionObserverQueryOptions, 'delegate'>): MethodDecorator {
+  if (typeof selectorOrOptions === 'string' || typeof selectorOrOptions === 'function') {
+    return intersectionObserver(selectorOrOptions as any, {...maybeOptions ?? {}, root: 'shadow', delegate: true});
+  }
+  return intersectionObserver({...selectorOrOptions ?? {}, root: 'shadow', delegate: true});
+}
+
+export function intersectionObserverDelegateAll(selector: string, options?: Omit<IntersectionObserverQueryOptions, 'delegate'>): MethodDecorator;
+export function intersectionObserverDelegateAll(options?: Omit<IntersectionObserverQueryOptions, 'delegate'>): MethodDecorator;
+export function intersectionObserverDelegateAll(selectorOrOptions?: string | Omit<IntersectionObserverQueryOptions, 'delegate'>, maybeOptions?: Omit<IntersectionObserverQueryOptions, 'delegate'>): MethodDecorator {
+  if (typeof selectorOrOptions === 'string' || typeof selectorOrOptions === 'function') {
+    return intersectionObserver(selectorOrOptions as any, {...maybeOptions ?? {}, root: 'all', delegate: true});
+  }
+  return intersectionObserver({...selectorOrOptions ?? {}, root: 'all', delegate: true});
+}
+
+export function intersectionObserverDelegate(selector: string, options?: Omit<IntersectionObserverQueryOptions, 'delegate'>): MethodDecorator;
+export function intersectionObserverDelegate(options?: Omit<IntersectionObserverQueryOptions, 'delegate'>): MethodDecorator;
+export function intersectionObserverDelegate(selectorOrOptions?: string | Omit<IntersectionObserverQueryOptions, 'delegate'>, maybeOptions?: Omit<IntersectionObserverQueryOptions, 'delegate'>): MethodDecorator {
+  if (typeof selectorOrOptions === 'string' || typeof selectorOrOptions === 'function') {
+    return intersectionObserver(selectorOrOptions as any, {...maybeOptions ?? {}, root: 'auto', delegate: true});
+  }
+  return intersectionObserver({...selectorOrOptions ?? {}, root: 'auto', delegate: true});
+}
+
+// ─── root별 일반 헬퍼 (delegate 없이, 셀렉터 생략 시 $this) ───
+
+export function intersectionObserverLight(selector: string, options?: IntersectionObserverQueryOptions): MethodDecorator;
+export function intersectionObserverLight(options?: IntersectionObserverQueryOptions): MethodDecorator;
+export function intersectionObserverLight(selectorOrOptions?: string | IntersectionObserverQueryOptions, maybeOptions?: IntersectionObserverQueryOptions): MethodDecorator {
+  if (typeof selectorOrOptions === 'string' || typeof selectorOrOptions === 'function') {
+    return intersectionObserver(selectorOrOptions as any, {...maybeOptions ?? {}, root: 'light'});
+  }
+  return intersectionObserver({...selectorOrOptions ?? {}, root: 'light'});
+}
+
+export function intersectionObserverShadow(selector: string, options?: IntersectionObserverQueryOptions): MethodDecorator;
+export function intersectionObserverShadow(options?: IntersectionObserverQueryOptions): MethodDecorator;
+export function intersectionObserverShadow(selectorOrOptions?: string | IntersectionObserverQueryOptions, maybeOptions?: IntersectionObserverQueryOptions): MethodDecorator {
+  if (typeof selectorOrOptions === 'string' || typeof selectorOrOptions === 'function') {
+    return intersectionObserver(selectorOrOptions as any, {...maybeOptions ?? {}, root: 'shadow'});
+  }
+  return intersectionObserver({...selectorOrOptions ?? {}, root: 'shadow'});
+}
+
+export function intersectionObserverAll(selector: string, options?: IntersectionObserverQueryOptions): MethodDecorator;
+export function intersectionObserverAll(options?: IntersectionObserverQueryOptions): MethodDecorator;
+export function intersectionObserverAll(selectorOrOptions?: string | IntersectionObserverQueryOptions, maybeOptions?: IntersectionObserverQueryOptions): MethodDecorator {
+  if (typeof selectorOrOptions === 'string' || typeof selectorOrOptions === 'function') {
+    return intersectionObserver(selectorOrOptions as any, {...maybeOptions ?? {}, root: 'all'});
+  }
+  return intersectionObserver({...selectorOrOptions ?? {}, root: 'all'});
+}
+
+export function getIntersectionObserverMetadata(target: any): IntersectionObserverMetadata[] | undefined {
+  const constructor = target instanceof Function ? target : target.constructor;
+  return ReflectUtils.getMetadata(INTERSECTION_OBSERVER_METADATA_KEY, constructor);
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// IntersectionObserverLifeCycler
+// observer 를 직접 생성하지 않고 옵션 그룹 배열(IntersectionObserverSet)을 반환한다.
+// elementDefine 이 그룹별로 observer 를 생성한다.
+// ─────────────────────────────────────────────────────────────────────────────
+import { ElementDefineLifeCycler, OnConnectedResult, IntersectionObserverSet, IntersectionObserverGroup, IntersectionObserverSetEntry } from '../types';
+import { SwcUtils } from '../utils/Utils';
+
+export class IntersectionObserverLifeCycler implements ElementDefineLifeCycler {
+  private readonly removeObserverCallbacksMap = new WeakMap<Element, Array<{ fn: (target: Element, opts: unknown) => void; target: any; opts: unknown }>>();
+
+  onConnected(helperHostSet: HelperHostSet): OnConnectedResult | void {
+    const inst = helperHostSet.$this;
+    const currentWin = helperHostSet.$w;
+
+    const removeObserverCallbacks: Array<{ fn: (target: Element, opts: unknown) => void; target: any; opts: unknown }> = [];
+    this.removeObserverCallbacksMap.set(inst, removeObserverCallbacks);
+
+    const allMeta = getIntersectionObserverMetadata(inst) ?? [];
+    if (allMeta.length === 0) return;
+
+    const root: HTMLElement | ShadowRoot = inst.shadowRoot || inst;
+
+    // removeObserver 콜백 수집
+    for (const m of allMeta) {
+      if (m.options.removeObserver) removeObserverCallbacks.push({ fn: m.options.removeObserver, target: root, opts: m.options });
+    }
+
+    // ── IntersectionObserver 콜백 ──
+    const buildCallback = (metas: IntersectionObserverMetadata[]): IntersectionObserverSetEntry['callback'] => {
+      return (entries, obs) => {
+        for (const m of metas) {
+          let matchedEls: HTMLElement[];
+          if (m.options.delegate && typeof m.selector === 'string') {
+            const isThis = m.selector === '$this' || m.selector === '';
+            matchedEls = entries.map(e => e.target as HTMLElement).filter(el => {
+              if (!el || el.nodeType !== 1) return false;
+              if (isThis) return true;
+              return el.matches?.(m.selector as string) || !!el.closest?.(m.selector as string);
+            });
+          } else {
+            matchedEls = entries.map(e => e.target as HTMLElement).filter(t => t && t.nodeType === 1);
+          }
+          if (matchedEls.length === 0) continue;
+          if (m.options.filter) {
+            if (!m.options.filter(matchedEls, { currentThis: inst, helper: helperHostSet })) continue;
+          }
+          const hostSet = SwcUtils.getHostSet(inst);
+          inst[m.propertyKey](matchedEls, entries, obs, { ...hostSet, $root: root });
+        }
+      };
+    };
+
+    // ── 옵션별 그룹핑: 같은 observer 옵션(threshold/rootMargin/intersectionRoot)끼리 묶는다 ──
+    // delegate:true 항목은 동적 추적용 셀렉터 문자열로 선언된다.
+    const groups = new Map<string, { options: IntersectionObserverInit; metas: IntersectionObserverMetadata[] }>();
+    for (const m of allMeta) {
+      const obsOptions: IntersectionObserverInit = {
+        root: m.options.intersectionRoot ?? null,
+        rootMargin: m.options.rootMargin,
+        threshold: m.options.threshold,
+      };
+      const key = JSON.stringify([obsOptions.root, obsOptions.rootMargin, obsOptions.threshold]);
+      if (!groups.has(key)) groups.set(key, { options: obsOptions, metas: [] });
+      groups.get(key)!.metas.push(m);
+    }
+
+    const intersectionObserverSet: IntersectionObserverSet = [];
+    for (const [, group] of groups) {
+      const callback = buildCallback(group.metas);
+      const observeTargets: IntersectionObserverGroup['observeTargets'] = [];
+
+      for (const m of group.metas) {
+        if (m.options.delegate && typeof m.selector === 'string') {
+          observeTargets.push({ target: m.selector, delegate: true, delegateRoot: m.options.root, callback });
+          continue;
+        }
+        let targets: HTMLElement[] = [];
+
+        if (typeof m.selector === 'function') {
+          const res = (m.selector as any)(inst, helperHostSet);
+          if (res instanceof currentWin.HTMLElement) targets = [res as HTMLElement];
+          else if (res instanceof currentWin.NodeList) targets = Array.from(res as NodeList).filter((e: any) => e instanceof currentWin.HTMLElement) as HTMLElement[];
+          else if (Array.isArray(res)) targets = res.filter((e: any) => e instanceof currentWin.HTMLElement) as HTMLElement[];
+        } else if (typeof m.selector === 'string') {
+          if (m.selector === '$this' || m.selector === '') {
+            targets = [inst as HTMLElement];
+          } else {
+            const r: any = m.options.root || 'auto';
+            const scopes: any[] = [];
+            if (r === 'auto') scopes.push(inst.shadowRoot || inst);
+            else if (r === 'light') scopes.push(inst);
+            else if (r === 'shadow' && inst.shadowRoot) scopes.push(inst.shadowRoot);
+            else if (r === 'all') { scopes.push(inst); if (inst.shadowRoot) scopes.push(inst.shadowRoot); }
+            for (const s of scopes) {
+              const found = s?.querySelectorAll?.(m.selector as string) as NodeListOf<HTMLElement> | undefined;
+              if (found?.length) targets.push(...Array.from(found));
+            }
+          }
+        }
+        for (const el of targets) observeTargets.push({ target: el, callback });
+      }
+
+      intersectionObserverSet.push({ options: group.options, observeTargets });
+    }
+
+    return { intersectionObserverSet };
+  }
+
+  onDisconnected(helperHostSet: HelperHostSet): void {
+    const inst = helperHostSet.$this;
+    for (const cb of this.removeObserverCallbacksMap.get(inst) ?? []) {
+      try { cb.fn(cb.target, cb.opts); } catch (e) { console.error('[SWC] removeObserver error:', e); }
+    }
+    this.removeObserverCallbacksMap.delete(inst);
+  }
+}