@dooboostore/simple-web-component 1.0.9 → 1.0.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dooboostore/simple-web-component",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "license": "MIT",
   "type": "module",
   "main": "./dist/cjs/index.js",
@@ -81,7 +81,8 @@
     "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/simple-boot": "1.0.53"
   },
   "scripts": {
     "clean": "rm -rf dist",

package/src/decorators/elementDefine.ts

@@ -3,7 +3,7 @@ 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 { 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, getMutationSubscribeMetadataList } from './lifecycles';
 import { getAttributeMetadataList } from './attribute';
 import { getStateMetadataList } from './state';
 import { getEmitCustomEventMetadataList } from './emitCustomEvent';
@@ -15,92 +15,63 @@ export interface ElementConfig {
   observedAttributes?: string[];
   customElementRegistry?: CustomElementRegistry;
   autoRemoveEventListeners?: boolean;
+  window?: Window;
 }
 
 export const ELEMENT_CONFIG_KEY = Symbol('simple-web-component:element-config');
 export const STATE_CHANGE_EVENT = 'swc:state-change';
 
-// swc-on-* 핸들러에 공통 주입되는 DOM 단축 헬퍼
-const $d = document;
-const $w = window;
-const $q = (sel: string, root?: Element | Document | ShadowRoot) => (root ?? document).querySelector(sel);
-const $qa = (sel: string, root?: Element | Document | ShadowRoot) => Array.from((root ?? document).querySelectorAll(sel));
-const $qi = (id: string, root?: Document | ShadowRoot) => (root ?? document).getElementById(id);
-const SWC_DOM_HELPERS = { $d, $w, $q, $qa, $qi } as const;
-const SWC_DOM_HELPER_KEYS = Object.keys(SWC_DOM_HELPERS) as (keyof typeof SWC_DOM_HELPERS)[];
-const SWC_DOM_HELPER_VALS = () => SWC_DOM_HELPER_KEYS.map(k => SWC_DOM_HELPERS[k]);
-
-const BUILT_IN_TAG_MAP = new Map<any, string>();
-
-const registerTag = (className: string, tagName: string) => {
-  if (typeof globalThis !== 'undefined' && (globalThis as any)[className]) {
-    BUILT_IN_TAG_MAP.set((globalThis as any)[className], tagName);
+// --- 환경 초기화 헬퍼 ---
+
+const HTML_TAG_ENTRIES: [string, string][] = [
+  ['HTMLAnchorElement', 'a'], ['HTMLAreaElement', 'area'], ['HTMLAudioElement', 'audio'],
+  ['HTMLBaseElement', 'base'], ['HTMLButtonElement', 'button'], ['HTMLCanvasElement', 'canvas'],
+  ['HTMLDataElement', 'data'], ['HTMLDataListElement', 'datalist'], ['HTMLDetailsElement', 'details'],
+  ['HTMLDialogElement', 'dialog'], ['HTMLDivElement', 'div'], ['HTMLDListElement', 'dl'],
+  ['HTMLEmbedElement', 'embed'], ['HTMLFieldSetElement', 'fieldset'], ['HTMLFormElement', 'form'],
+  ['HTMLHRElement', 'hr'], ['HTMLIFrameElement', 'iframe'], ['HTMLImageElement', 'img'],
+  ['HTMLInputElement', 'input'], ['HTMLLabelElement', 'label'], ['HTMLLegendElement', 'legend'],
+  ['HTMLLIElement', 'li'], ['HTMLLinkElement', 'link'], ['HTMLMapElement', 'map'],
+  ['HTMLMetaElement', 'meta'], ['HTMLMeterElement', 'meter'], ['HTMLModElement', 'del'],
+  ['HTMLObjectElement', 'object'], ['HTMLOListElement', 'ol'], ['HTMLOptGroupElement', 'optgroup'],
+  ['HTMLOptionElement', 'option'], ['HTMLOutputElement', 'output'], ['HTMLParagraphElement', 'p'],
+  ['HTMLParamElement', 'param'], ['HTMLPictureElement', 'picture'], ['HTMLPreElement', 'pre'],
+  ['HTMLProgressElement', 'progress'], ['HTMLQuoteElement', 'blockquote'], ['HTMLScriptElement', 'script'],
+  ['HTMLSelectElement', 'select'], ['HTMLSlotElement', 'slot'], ['HTMLSourceElement', 'source'],
+  ['HTMLSpanElement', 'span'], ['HTMLStyleElement', 'style'], ['HTMLTableElement', 'table'],
+  ['HTMLTableSectionElement', 'tbody'], ['HTMLTableCellElement', 'td'], ['HTMLTemplateElement', 'template'],
+  ['HTMLTextAreaElement', 'textarea'], ['HTMLTimeElement', 'time'], ['HTMLTitleElement', 'title'],
+  ['HTMLTableRowElement', 'tr'], ['HTMLTrackElement', 'track'], ['HTMLUListElement', 'ul'],
+  ['HTMLVideoElement', 'video'], ['HTMLHeadingElement', 'h1'],
+];
+
+function buildEnv(configWindow?: Window) {
+  const win: any = configWindow || (typeof window !== 'undefined' ? window : undefined);
+  const doc: Document = win?.document;
+
+  const builtInTagMap = new Map<any, string>();
+  for (const [cls, tag] of HTML_TAG_ENTRIES) {
+    if (win?.[cls]) builtInTagMap.set(win[cls], tag);
   }
-};
 
-[
-  ['HTMLAnchorElement', 'a'],
-  ['HTMLAreaElement', 'area'],
-  ['HTMLAudioElement', 'audio'],
-  ['HTMLBaseElement', 'base'],
-  ['HTMLButtonElement', 'button'],
-  ['HTMLCanvasElement', 'canvas'],
-  ['HTMLDataElement', 'data'],
-  ['HTMLDataListElement', 'datalist'],
-  ['HTMLDetailsElement', 'details'],
-  ['HTMLDialogElement', 'dialog'],
-  ['HTMLDivElement', 'div'],
-  ['HTMLDListElement', 'dl'],
-  ['HTMLEmbedElement', 'embed'],
-  ['HTMLFieldSetElement', 'fieldset'],
-  ['HTMLFormElement', 'form'],
-  ['HTMLHRElement', 'hr'],
-  ['HTMLIFrameElement', 'iframe'],
-  ['HTMLImageElement', 'img'],
-  ['HTMLInputElement', 'input'],
-  ['HTMLLabelElement', 'label'],
-  ['HTMLLegendElement', 'legend'],
-  ['HTMLLIElement', 'li'],
-  ['HTMLLinkElement', 'link'],
-  ['HTMLMapElement', 'map'],
-  ['HTMLMetaElement', 'meta'],
-  ['HTMLMeterElement', 'meter'],
-  ['HTMLModElement', 'del'],
-  ['HTMLObjectElement', 'object'],
-  ['HTMLOListElement', 'ol'],
-  ['HTMLOptGroupElement', 'optgroup'],
-  ['HTMLOptionElement', 'option'],
-  ['HTMLOutputElement', 'output'],
-  ['HTMLParagraphElement', 'p'],
-  ['HTMLParamElement', 'param'],
-  ['HTMLPictureElement', 'picture'],
-  ['HTMLPreElement', 'pre'],
-  ['HTMLProgressElement', 'progress'],
-  ['HTMLQuoteElement', 'blockquote'],
-  ['HTMLScriptElement', 'script'],
-  ['HTMLSelectElement', 'select'],
-  ['HTMLSlotElement', 'slot'],
-  ['HTMLSourceElement', 'source'],
-  ['HTMLSpanElement', 'span'],
-  ['HTMLStyleElement', 'style'],
-  ['HTMLTableElement', 'table'],
-  ['HTMLTableSectionElement', 'tbody'],
-  ['HTMLTableCellElement', 'td'],
-  ['HTMLTemplateElement', 'template'],
-  ['HTMLTextAreaElement', 'textarea'],
-  ['HTMLTimeElement', 'time'],
-  ['HTMLTitleElement', 'title'],
-  ['HTMLTableRowElement', 'tr'],
-  ['HTMLTrackElement', 'track'],
-  ['HTMLUListElement', 'ul'],
-  ['HTMLVideoElement', 'video'],
-  ['HTMLHeadingElement', 'h1']
-].forEach(([cls, tag]) => registerTag(cls, tag));
+  const domHelpers = {
+    $d: doc,
+    $w: win,
+    $q: (sel: string, root?: Element | Document | ShadowRoot) => (root ?? doc).querySelector(sel),
+    $qa: (sel: string, root?: Element | Document | ShadowRoot) => Array.from((root ?? doc).querySelectorAll(sel)),
+    $qi: (id: string, root?: Document | ShadowRoot) => (root ?? doc).getElementById(id),
+  } as const;
+
+  return { win, doc, builtInTagMap, domHelpers };
+}
 
 export const elementDefine =
   (inConfig: ElementConfig | string): ClassDecorator =>
   (constructor: any) => {
     const config: ElementConfig = typeof inConfig === 'string' ? { name: inConfig } : inConfig;
+    const { win, doc, builtInTagMap: BUILT_IN_TAG_MAP, domHelpers: SWC_DOM_HELPERS } = buildEnv(config.window);
+    const SWC_DOM_HELPER_KEYS = Object.keys(SWC_DOM_HELPERS) as (keyof typeof SWC_DOM_HELPERS)[];
+    const SWC_DOM_HELPER_VALS = () => SWC_DOM_HELPER_KEYS.map(k => (SWC_DOM_HELPERS as any)[k]);
 
     let extendsTagName = config.extends;
     if (!extendsTagName) {
@@ -123,6 +94,7 @@ export const elementDefine =
     const NewClass = class extends (constructor as any) {
       private _swcId = Math.random().toString(36).substring(2, 11);
       private _observer: MutationObserver | null = null;
+      private _shadowObserver: 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>();
@@ -352,7 +324,7 @@ export const elementDefine =
 
       private _buildStateMap() {
         const scan = (root: Node) => {
-          const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT);
+          const walker = doc.createTreeWalker(root, (win as any).NodeFilter.SHOW_ELEMENT | (win as any).NodeFilter.SHOW_TEXT);
           let node: Node | null = null;
           while ((node = walker.nextNode())) {
             if (node.nodeType === Node.TEXT_NODE) this._parseAndBind(node, 'text');
@@ -417,8 +389,7 @@ export const elementDefine =
                           const $firstHost = $hosts[0] || null;
                           const $lastHost = $hosts[$hosts.length - 1] || null;
                           const $host = $lastHost;
-                          new Function('event', '$data', '$host', '$hosts', '$firstHost', '$lastHost', ...SWC_DOM_HELPER_KEYS, rawScript)
-                            .call(el, event, (event as CustomEvent).detail, $host, $hosts, $firstHost, $lastHost, ...SWC_DOM_HELPER_VALS());
+                          new Function('event', '$data', '$host', '$hosts', '$firstHost', '$lastHost', ...SWC_DOM_HELPER_KEYS, rawScript).call(el, event, (event as CustomEvent).detail, $host, $hosts, $firstHost, $lastHost, ...SWC_DOM_HELPER_VALS());
                         } catch (e) {
                           console.error(`[SWC] Failed to execute ${attr.name} script:`, e);
                         }
@@ -435,9 +406,7 @@ export const elementDefine =
 
               // --- Scope Protection: Don't scan inside child SWC components ---
               // is 어트리뷰트 방식 커스텀 엘리먼트도 포함 (swc-for-of-*, swc-if-* 등)
-              const isSwcChild = (el as any)._swcId
-                || getElementConfig(el.constructor)
-                || (el.getAttribute('is')?.startsWith('swc-') ?? false);
+              const isSwcChild = (el as any)._swcId || getElementConfig(el.constructor) || (el.getAttribute('is')?.startsWith('swc-') ?? false);
               if (isSwcChild) {
                 const next = walker.nextSibling();
                 if (!next) break;
@@ -536,7 +505,10 @@ export const elementDefine =
                     const parts = subPath.split('.');
                     let cur = rootVal;
                     for (const p of parts) {
-                      if (cur === null || cur === undefined) { cur = SWC_NOT_FOUND; break; }
+                      if (cur === null || cur === undefined) {
+                        cur = SWC_NOT_FOUND;
+                        break;
+                      }
                       cur = cur[p];
                     }
                     if (cur !== undefined && cur !== SWC_NOT_FOUND) val = cur;
@@ -589,6 +561,7 @@ export const elementDefine =
           if (typeof (this as any)[m] === 'function') (this as any)[m]();
         });
         if (this._observer) this._observer.disconnect();
+        if (this._shadowObserver) this._shadowObserver.disconnect();
         if (config.autoRemoveEventListeners) {
           this._activeListeners.forEach(({ el, type, handler, options }) => el.removeEventListener(type, handler, options));
           this._activeListeners = [];
@@ -685,8 +658,7 @@ export const elementDefine =
                       const $firstHost = $hosts[0] || null;
                       const $lastHost = $hosts[$hosts.length - 1] || null;
                       const $host = $lastHost;
-                      new Function('event', '$data', '$host', '$hosts', '$firstHost', '$lastHost', ...SWC_DOM_HELPER_KEYS, script)
-                        .call(this, event, (event as CustomEvent).detail, $host, $hosts, $firstHost, $lastHost, ...SWC_DOM_HELPER_VALS());
+                      new Function('event', '$data', '$host', '$hosts', '$firstHost', '$lastHost', ...SWC_DOM_HELPER_KEYS, script).call(this, event, (event as CustomEvent).detail, $host, $hosts, $firstHost, $lastHost, ...SWC_DOM_HELPER_VALS());
                     } catch (e) {
                       console.error(`[SWC] Failed to execute ${attr.name} script:`, e);
                     }
@@ -701,8 +673,36 @@ export const elementDefine =
           });
         }
 
-        this._observer = new MutationObserver(() => (this as any)._syncDecorators());
-        this._observer.observe(this.shadowRoot || this, { childList: true, subtree: true });
+        const mutationMetaList = getMutationSubscribeMetadataList(this);
+
+        const fireMutationCallbacks = (mutationList: MutationRecord[], observer: MutationObserver, root: 'light' | 'shadow') => {
+          mutationMetaList?.forEach(meta => {
+            const r = meta.options.root ?? 'auto';
+            const matches =
+              r === 'all' ||
+              r === root ||
+              (r === 'auto' && (this.shadowRoot ? root === 'shadow' : root === 'light'));
+            if (matches && typeof (this as any)[meta.propertyKey] === 'function') {
+              (this as any)[meta.propertyKey](mutationList, observer, root);
+            }
+          });
+        };
+
+        this._observer = new (win as any).MutationObserver((mutationList: MutationRecord[], observer: MutationObserver) => {
+          (this as any)._syncDecorators();
+          fireMutationCallbacks(mutationList, observer, 'light');
+        });
+        // @ts-ignore
+        this._observer.observe(this as any, { childList: true, subtree: true });
+
+        if (this.shadowRoot) {
+          this._shadowObserver = new (win as any).MutationObserver((mutationList: MutationRecord[], observer: MutationObserver) => {
+            (this as any)._syncDecorators();
+            fireMutationCallbacks(mutationList, observer, 'shadow');
+          });
+          // @ts-ignore
+          this._shadowObserver.observe(this.shadowRoot, { childList: true, subtree: true });
+        }
         if (super.connectedCallback) await super.connectedCallback();
         const aMethods = getLifecycleMetadata<(string | symbol)[]>(this, ON_AFTER_CONNECTED_METADATA_KEY);
         aMethods?.forEach(m => {
@@ -756,7 +756,7 @@ export const elementDefine =
       }
     };
 
-    const registry = config.customElementRegistry || (typeof customElements !== 'undefined' ? customElements : undefined);
+    const registry = config.customElementRegistry || (typeof win !== 'undefined' ? win.customElements : undefined);
     if (registry && !registry.get(config.name)) {
       const options = config.extends ? { extends: config.extends } : undefined;
       registry.define(config.name, NewClass as any, options);

package/src/decorators/lifecycles.ts

@@ -8,6 +8,7 @@ export const ON_BEFORE_ADOPTED_METADATA_KEY = Symbol('simple-web-component:on-be
 export const ON_AFTER_ADOPTED_METADATA_KEY = Symbol('simple-web-component:on-after-adopted');
 export const ON_ADD_EVENT_LISTENER_METADATA_KEY = Symbol('simple-web-component:on-add-event-listener');
 export const ON_ATTRIBUTE_CHANGED_METADATA_KEY = Symbol('simple-web-component:on-attribute-changed');
+export const ON_MUTATION_SUBSCRIBE_METADATA_KEY = Symbol('simple-web-component:on-mutation-observed');
 
 export const ATTRIBUTE_CHANGED_WILDCARD = '*';
 
@@ -75,3 +76,63 @@ export const getLifecycleMetadata = <T = (string | symbol)[]>(target: any, metad
   const constructor = target instanceof Function ? target : target.constructor;
   return ReflectUtils.getMetadata(metadataKey, constructor);
 };
+
+// ─── @onMutationSubscribe ─────────────────────────────────────────────────────
+
+export interface MutationSubscribeOptions {
+  root?: 'light' | 'shadow' | 'all' | 'auto'; // default: 'auto'
+}
+
+export interface MutationSubscribeMetadata {
+  propertyKey: string | symbol;
+  options: MutationSubscribeOptions;
+}
+
+/**
+ * Called when MutationObserver detects DOM changes inside the component.
+ *
+ * @example
+ * // Parameterless — observes auto (shadow if exists, otherwise light)
+ * @onMutationObserved
+ * onMutation(mutationList: MutationRecord[], observer: MutationObserver) { ... }
+ *
+ * // With options
+ * @onMutationObserved({ root: 'shadow' })
+ * onShadowMutation(mutationList: MutationRecord[], observer: MutationObserver) { ... }
+ *
+ * @onMutationObserved({ root: 'all' })
+ * onAllMutation(mutationList: MutationRecord[], observer: MutationObserver) { ... }
+ */
+export function onMutationSubscribe(options: MutationSubscribeOptions): MethodDecorator;
+export function onMutationSubscribe(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
+export function onMutationSubscribe(
+  arg1: MutationSubscribeOptions | Object,
+  arg2?: string | symbol,
+  arg3?: PropertyDescriptor
+): MethodDecorator | void {
+  const register = (options: MutationSubscribeOptions, target: Object, propertyKey: string | symbol) => {
+    const constructor = target.constructor;
+    let list = ReflectUtils.getMetadata<MutationSubscribeMetadata[]>(ON_MUTATION_SUBSCRIBE_METADATA_KEY, constructor);
+    if (!list) {
+      list = [];
+      ReflectUtils.defineMetadata(ON_MUTATION_SUBSCRIBE_METADATA_KEY, list, constructor);
+    }
+    list.push({ propertyKey, options });
+  };
+
+  // Used as @onMutationObserved (no parentheses)
+  if (arg2 !== undefined) {
+    register({ root: 'auto' }, arg1 as Object, arg2);
+    return;
+  }
+
+  // Used as @onMutationObserved({ root: 'shadow' })
+  return (target: Object, propertyKey: string | symbol) => {
+    register((arg1 as MutationSubscribeOptions) || { root: 'auto' }, target, propertyKey);
+  };
+}
+
+export const getMutationSubscribeMetadataList = (target: any): MutationSubscribeMetadata[] | undefined => {
+  const constructor = target instanceof Function ? target : target.constructor;
+  return ReflectUtils.getMetadata(ON_MUTATION_SUBSCRIBE_METADATA_KEY, constructor);
+};

package/src/index.ts

@@ -1,4 +1,11 @@
 import 'reflect-metadata';
+import {HashRouter, PathRouter, Router} from "@dooboostore/core-web";
+import {RouterEventType} from '@dooboostore/core-web/routers/Router'
+import {ConstructorType, Optional} from "@dooboostore/core/types";
+import {SimConfig} from "@dooboostore/simple-boot/decorators/SimDecorator";
+import {SimpleApplication} from "@dooboostore/simple-boot/SimpleApplication";
+import {SimOption} from "@dooboostore/simple-boot/SimOption";
+
 export * from './decorators/elementDefine';
 export * from './decorators/innerHtml';
 export * from './decorators/attribute';
@@ -579,3 +586,53 @@ export * from './is/SwcChooseChildrenHeading';
 export * from './is/SwcChooseHeading';
 export * from './is/SwcWhenHeading';
 export * from './is/SwcOtherHeading';
+
+
+export type SwcConfigType = { rootRouter: ConstructorType<any>, routeType: 'path' | 'hash', window: Window };
+
+export class Swc {
+  private _config: SwcConfigType;
+  private _router: Router;
+  private simpleApplication: SimpleApplication;
+
+
+  get config() {
+    return this._config;
+  }
+
+  get router() {
+    return this._router;
+  }
+
+  constructor(config: Optional<SwcConfigType, 'routeType' | 'window'>) {
+    this._config = {
+      routeType: 'path',
+      window: window,
+      ...config,
+    };
+    this._router = this._config.routeType === 'path' ? new PathRouter({window: this._config.window}) : new HashRouter({window: this._config.window});
+    const option = new SimOption({excludeProxys: [Node], rootRouter: this._config.rootRouter});
+    this.simpleApplication = new SimpleApplication(option);
+
+    this._router.observable.subscribe((route: RouterEventType) => {
+      if (route.triggerPoint === 'start') {
+        this.routingProcess(route.path);
+      }
+    })
+  }
+
+  run() {
+    const otherInstanceSim = new Map<ConstructorType<any> | Function | SimConfig | Symbol, any>();
+    otherInstanceSim.set(Router, this._router);
+    this.simpleApplication.run(otherInstanceSim);
+    return this.simpleApplication.sim(this._config.rootRouter);
+  }
+
+  async routing(path: string) {
+    await this._router.go(path);
+  }
+
+  private async routingProcess(path: string) {
+    await this.simpleApplication.routing(path);
+  }
+}