@dooboostore/simple-web-component 1.0.26 → 1.0.28

package/src/elements/SwcAppEngine.ts

@@ -13,13 +13,12 @@ import { SwcAppInterface } from '../types';
 import {Intent} from "@dooboostore/simple-boot";
 
 export type SwcConfigType = {
-  rootRouter: ConstructorType<any> | symbol;
   routeType: 'path' | 'hash' | 'element';
   connectMode?: 'direct' | 'swap';
   container?: symbol;
   path?: string;
   window: Window;
-  onStarted?: (app: SwcAppInterface) => void;
+  onEngineStarted?: (sp: SimpleApplication, app: SwcAppInterface) => void;
   onConnected?: (app: SwcAppInterface) => void;
   onDisconnected?: (app: SwcAppInterface) => void;
 };
@@ -30,7 +29,6 @@ export class SwcAppEngine {
   public simpleApplication?: SimpleApplication;
   public router?: Router;
   private routerSubscription?: Subscription;
-  private _isInitialized = false;
   private _config?: SwcConfigType;
 
   constructor(private host: HTMLElement) {}
@@ -38,96 +36,42 @@ export class SwcAppEngine {
   get config() {
     return this._config;
   }
-  async connect(config?: SwcAttributeConfigType) {
-    if (this._isInitialized) return;
-
-    let userConfig = config;
-    const win = this.host.ownerDocument?.defaultView || window;
-    const Node = (win as any).Node as typeof globalThis.Node;
-    if (!userConfig) {
-      const configStr = this.host.getAttribute('swc-get-application-config');
-      if (configStr) {
-        try {
-          // console.log('vvvvvvvvvvvvvvvv->>>>', SwcUtils.findNearestSwcHost(this.host), SwcUtils.getHostSet(this.host))
-          userConfig = FunctionUtils.executeReturn({
-            script: configStr,
-            context: this.host,
-            args: SwcUtils.getHelperAndHostSet(win, SwcUtils.findNearestSwcHost(this.host))
-          });
-        } catch (e) {
-          console.error('[SWC-APP-ENGINE] Script execution failed:', e);
-        }
-      }
-    }
-
-    if (!userConfig) return;
-    this._isInitialized = true;
-
+  async connect(config: SwcConfigType) {
     try {
-      if (userConfig.rootRouter) {
-        this._config = {
-          routeType: 'element',
-          window: win,
-          ...userConfig
-        } as SwcConfigType;
-        const _config = this._config;
-
-        // Router Selection
-        if (_config.routeType === 'path') {
-          this.router = new PathRouter({ window: _config.window, firstUrl: _config.path });
-        } else if (_config.routeType === 'hash') {
-          this.router = new HashRouter({ window: _config.window, firstUrl: _config.path });
-        } else if (_config.routeType === 'element') {
-          this.router = new ElementRouter({ window: _config.window, firstUrl: _config.path });
-        }
-
-        // console.log('vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv', this.router)
-
-        // Routing sync
-        if (this.router) {
-          this.routerSubscription = this.router.observable.subscribe((route: RouterEventType) => {
-            if (route.triggerPoint === 'end') {
-              const targetPath = (route.path || '/') + route.search;
-              const intent = new Intent(targetPath);
-              this.simpleApplication?.routing(intent);
-            }
-          });
-        }
+      this._config = config;
+
+      // Router Selection
+      if (this._config.routeType === 'path') {
+        this.router = new PathRouter({ window: this._config.window, firstUrl: this._config.path });
+      } else if (this._config.routeType === 'hash') {
+        this.router = new HashRouter({ window: this._config.window, firstUrl: this._config.path });
+      } else if (this._config.routeType === 'element') {
+        this.router = new ElementRouter({ window: this._config.window, firstUrl: this._config.path });
+      }
 
+      // console.log('vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv', this.router)
 
-        // App start
-        const containerSymbol = _config.container || (this.host as any).getContainerSymbol?.();
-        this.simpleApplication = new SimpleApplication(new SimOption({
-          excludeProxys: [Node], 
-          rootRouter: _config.rootRouter,
+      // App start
+      const containerSymbol = this._config.container || (this.host as any).getContainerSymbol?.();
+      this.simpleApplication = new SimpleApplication(
+        new SimOption({
+          excludeProxys: [Node],
           container: containerSymbol
-        }));
-
-        const otherInstanceSim = new Map<any, any>();
-        if (this.router) otherInstanceSim.set(Router, this.router);
-        this.simpleApplication.run(otherInstanceSim);
+        })
+      );
 
+      const otherInstanceSim = new Map<any, any>();
+      if (this.router) otherInstanceSim.set(Router, this.router);
+      this.simpleApplication.run(otherInstanceSim);
 
-
-        // Rendering
-        const data = this.simpleApplication.sim(_config.rootRouter);
-        if (data instanceof Node) {
-          // console.warn('[SWC-APP-ENGINE] Rendering failed: Root element is not a DocumentFragment.', data);
-          if (this.host.shadowRoot) this.host.shadowRoot.replaceChildren(data);
-          else this.host.replaceChildren(data);
-        }
-
-        if (_config.path) this.router?.go(_config.path);
-        if (_config.onStarted) {
-          _config.onStarted(this.host as unknown as SwcAppInterface);
-        }
+      if (this._config.onEngineStarted) {
+        this._config.onEngineStarted(this.simpleApplication, this.host as unknown as SwcAppInterface);
       }
     } catch (e) {
       console.error('[SWC-APP-ENGINE] Init failed:', e);
     }
   }
 
-
   disconnect() {
     this.routerSubscription?.unsubscribe();
   }

package/src/elements/SwcAppMixin.ts

@@ -1,9 +1,16 @@
-import { SwcAppEngine, SwcAttributeConfigType } from './SwcAppEngine';
-import {SwcAppInterface} from "../types";
+import { SwcAppEngine, SwcAttributeConfigType, SwcConfigType } from './SwcAppEngine';
+import { SwcAppInterface } from '../types';
+import { SwcUtils } from '../utils/Utils';
+import { FunctionUtils, Subscription } from '@dooboostore/core';
+import { RouterEventType } from '@dooboostore/core-web';
+import { getSubscribeSwcAppRouteChangeMetadata } from '../decorators/subscribeSwcAppRouteChange';
 
 export function SwcAppMixin<T extends { new (...args: any[]): HTMLElement }>(Base: T) {
-  return class extends Base implements SwcAppInterface{
+  return class extends Base implements SwcAppInterface {
     __swc_engine = new SwcAppEngine(this as any);
+    _swc_connected_instance = new Set<any>();
+    _routerSubscription?: Subscription;
+    _lastRouterEvent?: RouterEventType;
 
     get simpleApplication() {
       return this.__swc_engine.simpleApplication;
@@ -12,51 +19,159 @@ export function SwcAppMixin<T extends { new (...args: any[]): HTMLElement }>(Bas
       return this.__swc_engine.router;
     }
 
+    _invokeRouteChangeSubscribers(instance: any, re: RouterEventType) {
+      const routeChangeSubscribers = getSubscribeSwcAppRouteChangeMetadata(instance);
+      if (routeChangeSubscribers && Array.isArray(routeChangeSubscribers)) {
+        routeChangeSubscribers.forEach((metadata: any) => {
+          const methodName = metadata.propertyKey || metadata;
+          const pathPattern = metadata.pathPattern;
+          const filter = metadata.filter;
+
+          // Path pattern matching (support both string and array)
+          let pathMatched = false;
+          let pathData: any = null;
+
+          if (!pathPattern) {
+            // pathPattern이 없으면 모든 경로 매칭 (와일드카드)
+            pathMatched = true;
+            pathData = {};
+          } else if (Array.isArray(pathPattern)) {
+            // 배열: 하나라도 매칭되면 OK
+            for (const pattern of pathPattern) {
+              const data = SwcUtils.parsePathPattern(pattern, re.path || '/');
+              if (data !== null) {
+                pathMatched = true;
+                pathData = data;
+                break;
+              }
+            }
+          } else {
+            // 문자열
+            pathData = SwcUtils.parsePathPattern(pathPattern, re.path || '/');
+            pathMatched = pathData !== null;
+          }
+
+          // Filter validation
+          const filterPassed = !filter || filter(this.router!);
+
+          // Invoke method if conditions pass
+          if (pathMatched && filterPassed) {
+            instance[methodName]?.(re, pathData || {});
+          }
+        });
+      }
+    }
+
+    _connected(instance: any) {
+      // console.log('------------------>', instance);
+      if (instance) {
+        this._swc_connected_instance.add(instance);
+
+        // Notify current route subscribers immediately after connection
+        if (this.router && this._lastRouterEvent) {
+          this._invokeRouteChangeSubscribers(instance, this._lastRouterEvent);
+        }
+      }
+    }
+
+    _disconnected(instance: any) {
+      if (instance) {
+        this._swc_connected_instance.delete(instance);
+      }
+    }
+
+    _handleRouteChange(route: RouterEventType) {
+      if (route.triggerPoint === 'end') {
+        // Iterate through all connected component instances
+        this._swc_connected_instance.forEach((instance: any) => {
+          this._invokeRouteChangeSubscribers(instance, route);
+        });
+      }
+
+      // Save last router event
+      this._lastRouterEvent = route;
+    }
+
     async connect(config?: SwcAttributeConfigType) {
+      const swcConfig = {
+        routeType: 'element',
+        window: config.window,
+        ...config
+      } as SwcConfigType;
+
       const mode = config?.connectMode || 'direct';
 
-      if (mode !== 'swap') {
-        await this.__swc_engine.connect(config);
+      if (mode === 'direct') {
+        await this.__swc_engine.connect(swcConfig);
         this.setAttribute('swc-connect-mode', 'direct');
-        return;
-      }
-
-      const parent = this.parentNode;
-      if (!parent) {
-        await this.__swc_engine.connect(config);
+      } else if (mode === 'swap' && !this.parentNode) {
+        await this.__swc_engine.connect(swcConfig);
         this.setAttribute('swc-connect-mode', 'direct');
-        return;
-      }
 
-      const clonedApp = this.cloneNode(true) as any;
-      clonedApp.style.display = 'none';
-      parent.insertBefore(clonedApp, this.nextSibling);
+        const clonedApp = this.cloneNode(true) as any;
+        clonedApp.style.display = 'none';
+        this.parentNode.insertBefore(clonedApp, this.nextSibling);
 
-      try {
-        await clonedApp.connect({ ...(config || {}), connectMode: 'direct' });
-        if (this.parentNode) {
-          this.parentNode.removeChild(this);
-        }
-        clonedApp.setAttribute('swc-connect-mode', 'swap');
-        clonedApp.style.display = '';
-      } catch (e) {
-        if (clonedApp.parentNode) {
-          clonedApp.parentNode.removeChild(clonedApp);
+        try {
+          await clonedApp.connect({ ...(config || {}), connectMode: 'direct' });
+          if (this.parentNode) {
+            this.parentNode.removeChild(this);
+          }
+          clonedApp.setAttribute('swc-connect-mode', 'swap');
+          clonedApp.style.display = '';
+        } catch (e) {
+          if (clonedApp.parentNode) {
+            clonedApp.parentNode.removeChild(clonedApp);
+          }
+          throw e;
         }
-        throw e;
+      }
+
+      // console.log('vvvvvvv222222', this.router);
+      // Subscribe to router changes after connect
+      if (!this._routerSubscription && this.router) {
+        this._routerSubscription = this.router.observable.subscribe((route: RouterEventType) => {
+          // console.log('Route changed:', route);
+          this._handleRouteChange(route);
+        });
+
+        // Navigate to initial path if specified
+        // const config = this.__swc_engine.config;
+        // if (config?.path) {
+        //   this.router.go(config.path);
+        // }
       }
     }
 
     connectedCallback() {
       // @ts-ignore
       if (super.connectedCallback) super.connectedCallback();
-      this.connect();
+
+      const configStr = this.getAttribute('swc-get-application-config');
+      const win = this.ownerDocument?.defaultView || window;
+      if (configStr && win) {
+        try {
+          // console.log('vvvvvvvvvvvvvvvv->>>>', SwcUtils.findNearestSwcHost(this.host), SwcUtils.getHostSet(this.host))
+          const userConfig = FunctionUtils.executeReturn({
+            script: configStr,
+            context: this,
+            args: SwcUtils.getHelperAndHostSet(win, SwcUtils.findNearestSwcHost(this))
+          });
+          this.connect(userConfig);
+        } catch (e) {
+          console.error('[SWC-APP-ENGINE] Script execution failed:', e);
+        }
+      }
+
       this.__swc_engine?.config?.onConnected?.(this);
     }
 
     disconnectedCallback() {
       // @ts-ignore
       if (super.disconnectedCallback) super.disconnectedCallback();
+      this._routerSubscription?.unsubscribe();
+      this._routerSubscription = undefined;
+      this._lastRouterEvent = undefined;
       this.__swc_engine.disconnect();
       this.__swc_engine?.config?.onDisconnected?.(this);
     }

package/src/elements/register.ts

@@ -732,6 +732,4 @@ export const registerAllElements = (w: any) => {
   @elementDefine('swc-app-body', { extends: 'body', window: w })
   class SwcAppBody extends SwcAppMixin(HTMLBodyElement) {}
 
-
-  return []
 };

package/src/utils/Utils.ts

@@ -282,4 +282,37 @@ export namespace SwcUtils {
       ...loopContext
     } as any;
   };
+
+  export const parsePathPattern = (pattern: string | undefined, currentPath: string): { [key: string]: string } | null => {
+    // pattern이 null/undefined면 와일드카드 (모든 경로 매칭)
+    if (pattern === null || pattern === undefined) return {};
+    
+    // 공백만 있는 패턴도 와일드카드
+    const trimmedPattern = pattern.trim();
+    if (trimmedPattern === '' && pattern !== '') return {}; // 공백 문자만 있는 경우
+    
+    // 패턴을 정규식으로 변환
+    // 지원 형식:
+    //   {id} → ([^/]+)  기본 (/ 제외한 모든 문자)
+    //   {tail:.*} → (.*)  정규표현식 직접 지정
+    //   {slug:[a-z0-9-]+} → ([a-z0-9-]+)
+    const paramNames: string[] = [];
+    const regexPattern = trimmedPattern.replace(/{(\w+)(?::(.+?))?}/g, (match, paramName, customRegex) => {
+      paramNames.push(paramName);
+      // customRegex가 있으면 사용, 없으면 기본값 ([^/]+)
+      return `(${customRegex || '[^/]+'})`;
+    });
+    
+    const regex = new RegExp(`^${regexPattern}$`);
+    const match = currentPath.match(regex);
+    
+    if (!match) return null;
+    
+    const result: { [key: string]: string } = {};
+    paramNames.forEach((name, index) => {
+      result[name] = match[index + 1];
+    });
+    
+    return result;
+  };
 }