@dooboostore/simple-web-component 1.0.50 → 1.0.51

package/dist/cjs/elements/SwcAppMixin.js

@@ -30,6 +30,43 @@ var import_SwcAppEngine = require("../SwcAppEngine");
 var import_core = require("@dooboostore/core");
 var import_core_web = require("@dooboostore/core-web");
 var import_Utils = require("../utils/Utils");
+const routeStateOf = (instance) => instance.__swc_routeState ?? (instance.__swc_routeState = /* @__PURE__ */ new Map());
+const routeParamValues = (sp, pathDataAll) => {
+  const queryAll = Object.fromEntries([...new Set(sp.keys())].map((k) => [k, sp.getAll(k)]));
+  const pick = (all, at) => Object.fromEntries(Object.entries(all).map(([k, v]) => [k, at === "first" ? v[0] : v[v.length - 1]]));
+  const lastOf = (v) => v && v.length ? v[v.length - 1] : void 0;
+  const firstQuery = (k) => sp.get(k);
+  const firstPath = (k) => pathDataAll[k]?.[0];
+  return {
+    swcAppRouteQueryParam: firstQuery,
+    swcAppRouteFirstQueryParam: firstQuery,
+    swcAppRouteLastQueryParam: (k) => lastOf(sp.getAll(k)) ?? null,
+    swcAppRouteQueryParams: (k) => sp.getAll(k),
+    swcAppRouteQueryParamObject: pick(queryAll, "first"),
+    swcAppRouteFirstQueryParamObject: pick(queryAll, "first"),
+    swcAppRouteLastQueryParamObject: pick(queryAll, "last"),
+    swcAppRouteQueryParamsObject: queryAll,
+    swcAppRouteURLSearchParams: sp,
+    swcAppRoutePathVariable: firstPath,
+    swcAppRouteFirstPathVariable: firstPath,
+    swcAppRouteLastPathVariable: (k) => lastOf(pathDataAll[k]),
+    swcAppRoutePathVariables: (k) => pathDataAll[k] ?? [],
+    swcAppRoutePathVariableObject: pick(pathDataAll, "first"),
+    swcAppRouteFirstPathVariableObject: pick(pathDataAll, "first"),
+    swcAppRouteLastPathVariableObject: pick(pathDataAll, "last"),
+    swcAppRoutePathVariablesObject: pathDataAll
+  };
+};
+const matchRoute = (pathOption, instance, re) => {
+  let pattern = typeof pathOption === "function" ? pathOption(instance) : pathOption;
+  if (!pattern) return { pathData: {}, pathDataAll: {} };
+  const path = re.path || "/";
+  for (const p of Array.isArray(pattern) ? pattern : [pattern]) {
+    const pathData = import_Utils.SwcUtils.parsePathPattern(p, path);
+    if (pathData !== null) return { pathData, pathDataAll: import_Utils.SwcUtils.parsePathPatternAll(p, path) ?? {} };
+  }
+  return null;
+};
 const isSSR = (i) => {
   return i.hasAttribute("swc-use-ssr");
 };
@@ -40,13 +77,18 @@ const removeSSRAttribute = (i) => {
   i.removeAttribute("swc-use-ssr");
 };
 function SwcAppMixin(Base) {
-  return class SwcAppMixinClass extends Base {
-    constructor(...args) {
-      super(...args);
+  class SwcAppMixinClass extends Base {
+    constructor() {
+      super(...arguments);
       __publicField(this, "__swc_engine", new import_SwcAppEngine.SwcAppEngine(this));
+      __publicField(this, "_swcId");
       __publicField(this, "_swc_connected_instance", /* @__PURE__ */ new Set());
       __publicField(this, "_routerSubscription");
       __publicField(this, "_lastRouterEvent");
+      // replay 옵션으로 발행된 타입별 마지막 메시지 1개 보관
+      __publicField(this, "_replayedMessages", /* @__PURE__ */ new Map());
+      // 코드 구독(observeMessage)용 live 스트림. 데코레이터 구독과 같은 publishMessage에서 흘러나옴.
+      __publicField(this, "_messageSubject", new import_core.Subject());
       __publicField(this, "_routeChangeInvocations", 0);
       __publicField(this, "_connectedInvocations", 0);
       __publicField(this, "_childrenRouteChangedInterval");
@@ -57,7 +99,8 @@ function SwcAppMixin(Base) {
        * 부모가 자식들을 강제로 등록해주는 형태로 처리
        */
       __publicField(this, "_connected_safari_and_standby", []);
-      console.log("[SWC-APP-MIXIN] constructor");
+      // connect() 전에 붙은 자식들이 기다리는 곳 — connect() 가 엔진을 띄운 뒤 깨운다
+      __publicField(this, "_appReadyWaiters", []);
     }
     get simpleApplication() {
       return this.__swc_engine.simpleApplication;
@@ -68,7 +111,8 @@ function SwcAppMixin(Base) {
     get router() {
       return this.__swc_engine?.router;
     }
-    async _invokeRouteChangeSubscribers(instance, re) {
+    // phase: 'live'(기본, 전체 방송) | 'connected' | 'connectedDone' (replay, 해당 trigger만)
+    async _invokeRouteChangeSubscribers(instance, re, phase = "live") {
       if (instance.isConnected === false) return;
       this._routeChangeInvocations++;
       if (this._childrenRouteChangedInterval) {
@@ -85,56 +129,51 @@ function SwcAppMixin(Base) {
         intervalConfig
       );
       try {
-        const routeChangeSubscribers = (0, import_decorators.getSubscribeSwcAppRouteChangeWhileConnectedMetadata)(instance);
+        const routeChangeSubscribers = (0, import_decorators.getSubscribeSwcAppRouteChangeMetadata)(instance);
         if (routeChangeSubscribers.length > 0) {
+          const state = routeStateOf(instance);
+          let stopped = false;
           for (const metadata of routeChangeSubscribers) {
+            if (phase !== "live" && (metadata.options?.trigger ?? "connected") !== phase) continue;
+            const on = metadata.options?.on ?? "match";
+            if (on === "beforeLeave") continue;
             const methodName = metadata.propertyKey;
-            let pathPattern = metadata.options?.path;
-            const filter = metadata.options?.filter;
             const extractValue = (v) => {
-              const keyToUse = metadata.options?.valueKey ?? import_decorators.SUBSCRIBE_SWC_APP_ROUTE_CHANGE_WHILE_CONNECTED_METADATA_KEY;
+              const keyToUse = metadata.options?.valueKey ?? import_decorators.SUBSCRIBE_SWC_APP_ROUTE_CHANGE_METADATA_KEY;
               if (v && typeof v === "object" && keyToUse in v) {
                 return v[keyToUse];
               }
               return v;
             };
-            if (typeof pathPattern === "function") {
-              pathPattern = pathPattern(instance);
-            }
-            let pathMatched = false;
-            let pathData = null;
-            if (!pathPattern) {
-              pathMatched = true;
-              pathData = {};
-            } else if (Array.isArray(pathPattern)) {
-              for (const pattern of pathPattern) {
-                const data = import_Utils.SwcUtils.parsePathPattern(pattern, re.path || "/");
-                if (data !== null) {
-                  pathMatched = true;
-                  pathData = data;
-                  break;
-                }
-              }
-            } else {
-              pathData = import_Utils.SwcUtils.parsePathPattern(pathPattern, re.path || "/");
-              pathMatched = pathData !== null;
+            const match = matchRoute(metadata.options?.path, instance, re);
+            const prev = state.get(methodName);
+            const signature = match ? JSON.stringify([re.path ?? "", re.search ?? ""]) : "";
+            state.set(methodName, match ? { matched: true, signature, pathData: match.pathData, pathDataAll: match.pathDataAll } : { matched: false, signature: "" });
+            const shouldRun = on === "match" ? !!match : on === "enter" ? !!match && !prev?.matched : on === "update" ? !!match && !!prev?.matched && prev.signature !== signature : on === "leave" ? !match && !!prev?.matched : false;
+            if (stopped || !shouldRun || !instance[methodName]) continue;
+            const pathData = match ? match.pathData : prev?.pathData ?? {};
+            const pathDataAll = match ? match.pathDataAll : prev?.pathDataAll ?? {};
+            const filter = metadata.options?.filter;
+            const instanceHelperHostSet = import_Utils.SwcUtils.getHelperAndHostSet(instance, this.config.window);
+            const filterPassed = !filter || await filter(this.router, { helper: instanceHelperHostSet, currentThis: instance });
+            if (!filterPassed) continue;
+            const before = metadata.options?.before;
+            const finaly = metadata.options?.finally;
+            const beforeReturn = before ? await before(this.router, { helper: instanceHelperHostSet, currentThis: instance }) : void 0;
+            const routeEventValue = { ...re, pathData };
+            const args = this._buildRouteArgs(instance, methodName, routeEventValue, pathDataAll, beforeReturn);
+            let rawResult, error;
+            try {
+              rawResult = await instance[methodName](...args);
+            } catch (e) {
+              error = e;
+            } finally {
+              if (finaly) await finaly(this.router, { helper: instanceHelperHostSet, currentThis: instance }, { args, result: rawResult, error });
             }
-            const hostSet = import_Utils.SwcUtils.getHelperAndHostSet(this.config.window, this);
-            const filterPassed = !filter || filter(this.router, { helper: hostSet, currentThis: instance });
-            if (pathMatched && filterPassed && instance[methodName]) {
-              const routeEventValue = { ...re, pathData };
-              const instanceHelperHostSet = import_Utils.SwcUtils.getHelperAndHostSet(this.config.window, instance);
-              const instanceHelperSet = import_Utils.SwcUtils.getHelperSet(this.config.window);
-              const args = (0, import_decorators.buildSwcParameterArgs)(instance, methodName, {
-                routerEvent: routeEventValue,
-                hostSet: instanceHelperHostSet,
-                helperHostSet: instanceHelperHostSet,
-                helperSet: instanceHelperSet
-              }, [routeEventValue]);
-              const result = extractValue(await instance[methodName](...args));
-              if (result !== void 0 && result !== null) {
-                break;
-              }
+            if (error) throw error;
+            const result = extractValue(rawResult);
+            if (result !== void 0 && result !== null) {
+              stopped = true;
             }
           }
         }
@@ -148,20 +187,75 @@ function SwcAppMixin(Base) {
         this._routeChangeInvocations = Math.max(0, this._routeChangeInvocations - 1);
       }
     }
+    /** 라우트 핸들러 인자: @swcAppRouterEvent / host 계열 / @routeChangeBeforeReturn / 라우트 파라미터(query·path 변수) */
+    _buildRouteArgs(instance, methodName, routeEventValue, pathDataAll, beforeReturn) {
+      const instanceHelperHostSet = import_Utils.SwcUtils.getHelperAndHostSet(instance, this.config.window);
+      const sp = routeEventValue.searchParams ?? new URLSearchParams(routeEventValue.search ?? "");
+      return (0, import_decorators.buildSwcParameterArgs)(
+        instance,
+        methodName,
+        {
+          swcAppRouterEvent: routeEventValue,
+          hostSet: instanceHelperHostSet,
+          helperHostSet: instanceHelperHostSet,
+          helperSet: import_Utils.SwcUtils.getHelperSet(this.config.window),
+          routeChangeBeforeReturn: beforeReturn,
+          ...routeParamValues(sp, pathDataAll)
+        },
+        [routeEventValue]
+      );
+    }
+    /**
+     * on: 'beforeLeave' 구독을 라우터 가드로 등록. 지금 경로는 맞고 다음 경로는 안 맞을 때 핸들러를 부르고,
+     * false 를 리턴하면 이동을 취소한다. 요소가 떨어지면 _disconnected 에서 해제.
+     */
+    _registerLeaveGuards(instance) {
+      if (!this.router?.addLeaveGuard) return;
+      instance.__swc_leaveGuardOffs?.forEach((off) => off());
+      instance.__swc_leaveGuardOffs = (0, import_decorators.getSubscribeSwcAppRouteChangeMetadata)(instance).filter((m) => m.options?.on === "beforeLeave").map(
+        (metadata) => this.router.addLeaveGuard(async (to, from) => {
+          if (instance.isConnected === false || !instance[metadata.propertyKey]) return true;
+          const fromMatch = matchRoute(metadata.options?.path, instance, from);
+          if (!fromMatch || matchRoute(metadata.options?.path, instance, to)) return true;
+          const filter = metadata.options?.filter;
+          const helper = import_Utils.SwcUtils.getHelperAndHostSet(instance, this.config.window);
+          if (filter && !await filter(this.router, { helper, currentThis: instance })) return true;
+          const beforeReturn = metadata.options?.before ? await metadata.options.before(this.router, { helper, currentThis: instance }) : void 0;
+          const routeEventValue = { ...from, pathData: fromMatch.pathData, to };
+          const args = this._buildRouteArgs(instance, metadata.propertyKey, routeEventValue, fromMatch.pathDataAll, beforeReturn);
+          let result, error;
+          try {
+            result = await instance[metadata.propertyKey](...args);
+          } catch (e) {
+            error = e;
+          } finally {
+            if (metadata.options?.finally) await metadata.options.finally(this.router, { helper, currentThis: instance }, { args, result, error });
+          }
+          if (error) throw error;
+          return result !== false;
+        })
+      );
+    }
     async _connected(instance, option) {
       if (instance) {
         if (!this.simpleApplication && !this.config) {
-          this._connected_safari_and_standby.push(instance);
-          return;
+          if (instance === this) {
+            this._connected_safari_and_standby.push(instance);
+            return;
+          }
+          await new Promise((resolve) => this._appReadyWaiters.push(resolve));
         }
         this.config.onConnectedChildBefore?.(instance);
         if (!option?.noIncrements) {
           this._connectedInvocations++;
         }
         this._swc_connected_instance.add(instance);
+        const gen = instance.__swc_connectGen;
+        const stale = () => instance.__swc_connectGen !== gen;
         const connectedSwcAppCallBacks = (0, import_decorators.findAllLifecycleMetadata)(instance, import_decorators.ON_CONNECTED_SWC_APP_METADATA_KEY);
         for (let connectedSwcAppCallBack of connectedSwcAppCallBacks) {
           await instance?._invokeLifecycleMethod?.(connectedSwcAppCallBack.propertyKey);
+          if (stale()) return this;
         }
         if (this._childrenConnectedDoneInterval) {
           this.config.window.clearInterval(this._childrenConnectedDoneInterval);
@@ -179,14 +273,16 @@ function SwcAppMixin(Base) {
         if (this.simpleApplication) {
           try {
             if (this.router && this._lastRouterEvent) {
-              await this._invokeRouteChangeSubscribers(instance, this._lastRouterEvent);
+              await this._invokeRouteChangeSubscribers(instance, this._lastRouterEvent, "connected");
             }
           } catch (e) {
             throw e;
           }
         }
+        if (stale()) return this;
+        if (this.simpleApplication) this._registerLeaveGuards(instance);
+        this._replayMessagesTo(instance);
         const isBrowser = import_core_web.ValidUtils.isBrowser();
-        console.log("------>", isBrowser, this.config?.ssr);
         if (!isBrowser && this.config?.ssr) {
           setSSRAttribute(instance);
         } else {
@@ -196,8 +292,19 @@ function SwcAppMixin(Base) {
       this.config.onConnectedChildAfter?.(instance);
       return this;
     }
-    async _connectedDone(instance) {
+    async _connectedDone(instance, option) {
       try {
+        if (option?.aborted) return;
+        this._replayMessagesTo(instance, "connectedDone");
+        if (this.simpleApplication) {
+          try {
+            if (this.router && this._lastRouterEvent) {
+              await this._invokeRouteChangeSubscribers(instance, this._lastRouterEvent, "connectedDone");
+            }
+          } catch (e) {
+            throw e;
+          }
+        }
       } finally {
         this._connectedInvocations = Math.max(0, this._connectedInvocations - 1);
       }
@@ -205,6 +312,9 @@ function SwcAppMixin(Base) {
     _disconnected(instance) {
       if (instance) {
         this._swc_connected_instance.delete(instance);
+        instance.__swc_leaveGuardOffs?.forEach((off) => off());
+        instance.__swc_leaveGuardOffs = void 0;
+        instance.__swc_routeState = void 0;
         this.config?.onDisconnectedChildAfter?.(instance);
       }
     }
@@ -215,28 +325,24 @@ function SwcAppMixin(Base) {
       await Promise.allSettled(ps);
     }
     async connect(config) {
-      console.log("[SWC-MIXIN] connect");
       const swcConfig = {
         routeType: "element",
         window: config?.window,
         ...config
       };
       await this.__swc_engine.connect(swcConfig);
+      this._appReadyWaiters.splice(0).forEach((resolve) => resolve());
       this._connected_safari_and_standby.forEach((instance) => {
         this._connected(instance, { noIncrements: true });
       });
       if (!this._routerSubscription && this.router) {
-        const config2 = this.__swc_engine.config;
         this._routerSubscription = this.router.observable.subscribe(async (route) => {
-          console.log("[SWC-MIXIN] Router event received:", route.triggerPoint);
           if (route.triggerPoint === "end") {
             await this._handleRouteChange(route);
           }
         });
-        if (config2?.path) {
-          console.log("[DEBUG] Navigating to initial path:", config2.path);
-        }
       }
+      await this._invokeHook("onSwcAppConnected");
     }
     connectedCallback() {
       super.connectedCallback?.();
@@ -247,7 +353,7 @@ function SwcAppMixin(Base) {
           const userConfig = import_core.FunctionUtils.executeReturn({
             script: configStr,
             context: this,
-            args: import_Utils.SwcUtils.getHelperAndHostSet(win, this)
+            args: import_Utils.SwcUtils.getHelperAndHostSet(this, win)
           });
           if (userConfig instanceof Promise) {
             userConfig.then((resolvedConfig) => {
@@ -265,6 +371,7 @@ function SwcAppMixin(Base) {
       this._connected(this);
       this.__swc_engine?.config?.onConnected?.(this);
       this._connectedDone(this);
+      void this._invokeHook("onConnected").catch((e) => console.error("[SWC-MIXIN] onConnected error:", e));
     }
     disconnectedCallback() {
       super.disconnectedCallback?.();
@@ -274,6 +381,7 @@ function SwcAppMixin(Base) {
       this.__swc_engine.disconnect();
       this.__swc_engine?.config?.onDisconnected?.(this);
       this._disconnected(this);
+      void this._invokeHook("onDisconnected").catch((e) => console.error("[SWC-MIXIN] onDisconnected error:", e));
     }
     async routing(path) {
       await this.router?.go(path);
@@ -288,41 +396,106 @@ function SwcAppMixin(Base) {
       this.router?.reload();
     }
     publishMessage(message) {
+      if (message.type) {
+        const buf = [...this._replayedMessages.get(message.type) ?? [], message];
+        this._replayedMessages.set(message.type, buf.slice(-Math.max(1, this.config?.messageReplayBufferSize ?? 10)));
+      }
       this._swc_connected_instance.forEach((instance) => {
         this._invokeMessageSubscribers(instance, message);
       });
+      this._messageSubject.next(message);
+    }
+    connectedElements() {
+      return Array.from(this._swc_connected_instance);
+    }
+    observeMessage(typeOrOptions, options) {
+      const { type, subject } = typeof typeOrOptions === "string" ? { ...options, type: typeOrOptions } : { ...typeOrOptions };
+      return new import_core.Observable((subscriber) => {
+        if (type && (subject === "behavior" || subject === "replay")) {
+          const buf = this._replayedMessages.get(type) ?? [];
+          (subject === "behavior" ? buf.slice(-1) : buf).forEach((m) => subscriber.next(m));
+        }
+        const sub = this._messageSubject.subscribe((m) => {
+          if (!type || m.type === type) subscriber.next(m);
+        });
+        return () => sub.unsubscribe();
+      });
+    }
+    // hook 실행 + @inject 파라미터 DI 해결 (host 본체 포함.
+    // _invokeLifecycleMethod는 host/hostSet 상황 분기가 달라 호스트 본체에서 주입이 안 됨)
+    async _invokeHook(methodName) {
+      const fn = this[methodName];
+      if (typeof fn !== "function") return;
+      const manager = this.simpleApplication?.simstanceManager;
+      if (!manager) {
+        return fn.call(this);
+      }
+      return manager.executeBindParameterSimPromise({ target: this, targetKey: methodName });
+    }
+    // 신규 연결 인스턴스 1곳에만 버퍼 재생. 구독자별 subject 선언 기준:
+    // - 'behavior': 마지막 1개 / 'replay': 버퍼 전체 시간순 / 미지정·'subject': live만 (재생 안 함)
+    // - trigger 'connectedDone'인 구독은 _connectedDone(render 완료 후)에서 재생. phase로 구분.
+    // 이미 연결된 인스턴스는 publishMessage 때 live로 받으므로 여기 오지 않음.
+    _replayMessagesTo(instance, phase = "connected") {
+      const subs = (0, import_decorators.getSubscribeSwcAppMessageMetadata)(instance);
+      if (!subs || !Array.isArray(subs)) return;
+      const seen = /* @__PURE__ */ new Set();
+      subs.forEach((meta) => {
+        const type = meta.messageType;
+        if (!type || seen.has(type)) return;
+        seen.add(type);
+        if ((meta.trigger ?? "connected") !== phase) return;
+        const buf = this._replayedMessages.get(type) ?? [];
+        if (meta.subject === "behavior") {
+          const last = buf[buf.length - 1];
+          if (last) this._invokeMessageSubscribers(instance, last);
+        } else if (meta.subject === "replay") {
+          buf.forEach((msg) => this._invokeMessageSubscribers(instance, msg));
+        }
+      });
     }
     _invokeMessageSubscribers(instance, message) {
-      const messageSubscribers = (0, import_decorators.getSubscribeSwcAppMessageWhileConnectedMetadata)(instance);
+      const messageSubscribers = (0, import_decorators.getSubscribeSwcAppMessageMetadata)(instance);
       if (messageSubscribers && Array.isArray(messageSubscribers)) {
         messageSubscribers.forEach((metadata) => {
-          const methodName = metadata.propertyKey;
-          const messageType = metadata.messageType;
-          const filter = metadata.filter;
-          let typeMatched = false;
-          if (!messageType) {
-            typeMatched = true;
-          } else if (message.type === messageType) {
-            typeMatched = true;
-          }
-          let filterMatched = true;
-          if (filter && typeMatched) {
-            filterMatched = filter(message, instance);
-          }
-          if (typeMatched && filterMatched && typeof instance[methodName] === "function") {
-            const instanceHelperHostSet = import_Utils.SwcUtils.getHelperAndHostSet(this.config.window, instance);
-            const instanceHelperSet = import_Utils.SwcUtils.getHelperSet(this.config.window);
-            const args = (0, import_decorators.buildSwcParameterArgs)(instance, methodName, {
-              appMessage: message,
-              hostSet: instanceHelperHostSet,
-              helperHostSet: instanceHelperHostSet,
-              helperSet: instanceHelperSet
-            }, [message]);
-            instance[methodName](...args);
-          }
+          void this._runMessageSubscriber(instance, message, metadata).catch((e) => console.error("[SWC] subscribeSwcAppMessage error:", e));
         });
       }
     }
-  };
+    async _runMessageSubscriber(instance, message, metadata) {
+      const methodName = metadata.propertyKey;
+      const messageType = metadata.messageType;
+      const { filter, before, finally: finaly } = metadata;
+      const typeMatched = !messageType || message.type === messageType;
+      if (!typeMatched) return;
+      if (filter && !await filter(message, instance)) return;
+      if (typeof instance[methodName] !== "function") return;
+      const instanceHelperHostSet = import_Utils.SwcUtils.getHelperAndHostSet(instance, this.config.window);
+      const instanceHelperSet = import_Utils.SwcUtils.getHelperSet(this.config.window);
+      const beforeReturn = before ? await before(message, instance) : void 0;
+      const args = (0, import_decorators.buildSwcParameterArgs)(
+        instance,
+        methodName,
+        {
+          appMessage: message,
+          hostSet: instanceHelperHostSet,
+          helperHostSet: instanceHelperHostSet,
+          helperSet: instanceHelperSet,
+          appMessageBeforeReturn: beforeReturn
+        },
+        [message]
+      );
+      let result, error;
+      try {
+        result = await instance[methodName](...args);
+      } catch (e) {
+        error = e;
+      } finally {
+        if (finaly) await finaly(message, instance, { args, result, error });
+      }
+      if (error) throw error;
+    }
+  }
+  return SwcAppMixinClass;
 }
 //# sourceMappingURL=SwcAppMixin.js.map