@dooboostore/simple-web-component 1.0.37 → 1.0.38

package/dist/esm/elements/SwcAppMixin.js

@@ -0,0 +1,273 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { findAllLifecycleMetadata, getSubscribeSwcAppMessageWhileConnectedMetadata, getSubscribeSwcAppRouteChangeWhileConnectedMetadata, ON_CONNECTED_SWC_APP_METADATA_KEY } from "../decorators/index.js";
+import { SwcAppEngine } from "../SwcAppEngine.js";
+import { debounceTimeIntervalLock, FunctionUtils } from "@dooboostore/core";
+import { SwcUtils } from "../utils/Utils.js";
+const isSSR = (i) => {
+  return i.hasAttribute("swc-use-ssr");
+};
+const setSSRAttribute = (i) => {
+  i.setAttribute("swc-use-ssr", i._swcId ?? "");
+};
+const removeSSRAttribute = (i) => {
+  i.removeAttribute("swc-use-ssr");
+};
+function SwcAppMixin(Base) {
+  return class SwcAppMixinClass extends Base {
+    constructor(...args) {
+      super(...args);
+      __publicField(this, "__swc_engine", new SwcAppEngine(this));
+      __publicField(this, "_swc_connected_instance", /* @__PURE__ */ new Set());
+      __publicField(this, "_routerSubscription");
+      __publicField(this, "_lastRouterEvent");
+      __publicField(this, "_routeChangeInvocations", 0);
+      __publicField(this, "_connectedInvocations", 0);
+      __publicField(this, "_childrenRouteChangedInterval");
+      __publicField(this, "_childrenConnectedDoneInterval");
+      /**
+       * Safari is 속성 처리
+       * Safari polyfill에서는 자식부터 만들어지고 부모가 만들어지므로
+       * 부모가 자식들을 강제로 등록해주는 형태로 처리
+       */
+      __publicField(this, "_connected_safari_and_standby", []);
+      console.log("[SWC-APP-MIXIN] constructor");
+    }
+    get simpleApplication() {
+      return this.__swc_engine.simpleApplication;
+    }
+    get config() {
+      return this.__swc_engine?.config;
+    }
+    get router() {
+      return this.__swc_engine?.router;
+    }
+    async _invokeRouteChangeSubscribers(instance, re) {
+      if (instance.isConnected === false) return;
+      this._routeChangeInvocations++;
+      if (this._childrenRouteChangedInterval) {
+        this.config.window.clearInterval(this._childrenRouteChangedInterval);
+      }
+      const intervalConfig = { setInterval: this.config.window.setInterval.bind(this.config.window), clearInterval: this.config.window.clearInterval.bind(this.config.window) };
+      this._childrenRouteChangedInterval = debounceTimeIntervalLock(
+        () => this._routeChangeInvocations === 0,
+        () => {
+          this._childrenRouteChangedInterval = null;
+          this.config.onChildrenRouteChanged?.(re, this);
+        },
+        this.config?.childrenConnectedDoneCheckIntervalTime ?? 30,
+        intervalConfig
+      );
+      try {
+        const routeChangeSubscribers = getSubscribeSwcAppRouteChangeWhileConnectedMetadata(instance);
+        if (routeChangeSubscribers && Array.isArray(routeChangeSubscribers)) {
+          console.log("[SWC-MIXIN] Route change subscribers found");
+          const ps = routeChangeSubscribers.map(async (metadata) => {
+            const methodName = metadata.propertyKey;
+            let pathPattern = metadata.options?.path;
+            const filter = metadata.options?.filter;
+            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 = SwcUtils.parsePathPattern(pattern, re.path || "/");
+                if (data !== null) {
+                  pathMatched = true;
+                  pathData = data;
+                  break;
+                }
+              }
+            } else {
+              pathData = SwcUtils.parsePathPattern(pathPattern, re.path || "/");
+              pathMatched = pathData !== null;
+            }
+            const hostSet = SwcUtils.getHelperAndHostSet(this.config.window, this);
+            const filterPassed = !filter || filter(this.router, { helper: hostSet, currentThis: instance });
+            if (pathMatched && filterPassed && instance[methodName]) {
+              await instance[methodName]({ ...re, pathData });
+            }
+          });
+          await Promise.allSettled(ps);
+        }
+      } finally {
+        if (this.config?.ssr) {
+          setSSRAttribute(instance);
+        } else {
+          removeSSRAttribute(instance);
+        }
+        this._routeChangeInvocations = Math.max(0, this._routeChangeInvocations - 1);
+      }
+    }
+    async _connected(instance, option) {
+      if (instance) {
+        if (!this.simpleApplication && !this.config) {
+          this._connected_safari_and_standby.push(instance);
+          return;
+        }
+        this.config.onConnectedChildBefore?.(instance);
+        if (!option?.noIncrements) {
+          this._connectedInvocations++;
+        }
+        this._swc_connected_instance.add(instance);
+        const connectedSwcAppCallBacks = findAllLifecycleMetadata(instance, ON_CONNECTED_SWC_APP_METADATA_KEY) ?? [];
+        for (let connectedSwcAppCallBack of connectedSwcAppCallBacks) {
+          await instance?._invokeLifecycleMethod?.(connectedSwcAppCallBack);
+        }
+        if (this._childrenConnectedDoneInterval) {
+          this.config.window.clearInterval(this._childrenConnectedDoneInterval);
+        }
+        const intervalConfig = { setInterval: this.config.window.setInterval.bind(this.config.window), clearInterval: this.config.window.clearInterval.bind(this.config.window) };
+        this._childrenConnectedDoneInterval = debounceTimeIntervalLock(
+          () => this._connectedInvocations === 0,
+          () => {
+            this._childrenConnectedDoneInterval = null;
+            this.config.onChildrenConnectedDone?.(this);
+          },
+          this.config?.childrenConnectedDoneCheckIntervalTime ?? 30,
+          intervalConfig
+        );
+        if (this.simpleApplication) {
+          try {
+            if (this.router && this._lastRouterEvent) {
+              await this._invokeRouteChangeSubscribers(instance, this._lastRouterEvent);
+            }
+          } catch (e) {
+            throw e;
+          }
+        }
+        if (this.config?.ssr) {
+          setSSRAttribute(instance);
+        } else {
+          removeSSRAttribute(instance);
+        }
+      }
+      this.config.onConnectedChildAfter?.(instance);
+      return this;
+    }
+    async _connectedDone(instance) {
+      try {
+      } finally {
+        this._connectedInvocations = Math.max(0, this._connectedInvocations - 1);
+      }
+    }
+    _disconnected(instance) {
+      if (instance) {
+        this._swc_connected_instance.delete(instance);
+        this.config?.onDisconnectedChildAfter?.(instance);
+      }
+    }
+    async _handleRouteChange(route) {
+      this._lastRouterEvent = route;
+      const swcConnectedInstance = Array.from(this._swc_connected_instance);
+      const ps = swcConnectedInstance.map((instance) => this._invokeRouteChangeSubscribers(instance, route));
+      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._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);
+        }
+      }
+    }
+    connectedCallback() {
+      super.connectedCallback?.();
+      const configStr = this.getAttribute("swc-get-application-config");
+      const win = this.ownerDocument?.defaultView || window;
+      if (configStr && win) {
+        try {
+          const userConfig = FunctionUtils.executeReturn({
+            script: configStr,
+            context: this,
+            args: SwcUtils.getHelperAndHostSet(win, this)
+          });
+          this.connect(userConfig);
+        } catch (e) {
+          console.error("[SWC-MIXIN] Script execution failed:", e);
+        }
+      }
+      this._connected(this);
+      this.__swc_engine?.config?.onConnected?.(this);
+      this._connectedDone(this);
+    }
+    disconnectedCallback() {
+      super.disconnectedCallback?.();
+      this._routerSubscription?.unsubscribe();
+      this._routerSubscription = void 0;
+      this._lastRouterEvent = void 0;
+      this.__swc_engine.disconnect();
+      this.__swc_engine?.config?.onDisconnected?.(this);
+      this._disconnected(this);
+    }
+    async routing(path) {
+      await this.router?.go(path);
+    }
+    back() {
+      this.router?.back();
+    }
+    forward() {
+      this.router?.forward();
+    }
+    reload() {
+      this.router?.reload();
+    }
+    publishMessage(message) {
+      this._swc_connected_instance.forEach((instance) => {
+        this._invokeMessageSubscribers(instance, message);
+      });
+    }
+    _invokeMessageSubscribers(instance, message) {
+      const messageSubscribers = getSubscribeSwcAppMessageWhileConnectedMetadata(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") {
+            instance[methodName](message);
+          }
+        });
+      }
+    }
+  };
+}
+export {
+  SwcAppMixin,
+  isSSR,
+  removeSSRAttribute,
+  setSSRAttribute
+};
+//# sourceMappingURL=SwcAppMixin.js.map

package/dist/esm/elements/SwcAppMixin.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/elements/SwcAppMixin.ts"],
+  "sourcesContent": ["import {SwcAppInterface, SwcAppMessage} from \"../types\";\nimport {findAllLifecycleMetadata, getSubscribeSwcAppMessageWhileConnectedMetadata, getSubscribeSwcAppRouteChangeWhileConnectedMetadata, ON_CONNECTED_SWC_APP_METADATA_KEY} from \"../decorators\";\nimport {SwcAppEngine, SwcAttributeConfigType, SwcConfigType} from \"../SwcAppEngine\";\nimport {debounceTimeIntervalLock, FunctionUtils, Subscription} from \"@dooboostore/core\";\nimport {RouterEventType} from \"@dooboostore/core-web\";\nimport {SwcUtils} from \"../utils/Utils\";\n\nexport const isSSR = (i: HTMLElement) => {\n  return i.hasAttribute('swc-use-ssr');\n}\nexport const setSSRAttribute = (i: HTMLElement) => {\n  i.setAttribute('swc-use-ssr', (i as any)._swcId ?? '');\n}\nexport const removeSSRAttribute = (i: HTMLElement) => {\n  i.removeAttribute('swc-use-ssr');\n}\n\n/**\n * SwcAppMixin: SwcApp \uAE30\uB2A5\uC744 \uBAA8\uB4E0 HTMLElement\uC5D0 \uCD94\uAC00\uD560 \uC218 \uC788\uB294 Mixin\n * \n * \uC0AC\uC6A9 \uC608:\n * @elementDefine('custom-app', { window: w })\n * class CustomApp extends SwcAppMixin(w.HTMLElement) implements SwcAppInterface {\n *   // \uCD94\uAC00 \uAE30\uB2A5 \uAD6C\uD604\n * }\n */\nexport function SwcAppMixin<T extends { new(...args: any[]): HTMLElement }>(Base: T) {\n  return class SwcAppMixinClass extends Base implements SwcAppInterface {\n    __swc_engine = new SwcAppEngine(this as any);\n    _swc_connected_instance = new Set<any>();\n    _routerSubscription?: Subscription;\n    _lastRouterEvent?: RouterEventType;\n    _routeChangeInvocations = 0;\n    _connectedInvocations = 0;\n\n    _childrenRouteChangedInterval: any;\n    _childrenConnectedDoneInterval: any;\n\n    /**\n     * Safari is \uC18D\uC131 \uCC98\uB9AC\n     * Safari polyfill\uC5D0\uC11C\uB294 \uC790\uC2DD\uBD80\uD130 \uB9CC\uB4E4\uC5B4\uC9C0\uACE0 \uBD80\uBAA8\uAC00 \uB9CC\uB4E4\uC5B4\uC9C0\uBBC0\uB85C\n     * \uBD80\uBAA8\uAC00 \uC790\uC2DD\uB4E4\uC744 \uAC15\uC81C\uB85C \uB4F1\uB85D\uD574\uC8FC\uB294 \uD615\uD0DC\uB85C \uCC98\uB9AC\n     */\n    _connected_safari_and_standby = [];\n\n    constructor(...args: any[]) {\n      super(...args);\n      console.log('[SWC-APP-MIXIN] constructor')\n    }\n\n    get simpleApplication() {\n      return this.__swc_engine.simpleApplication;\n    }\n\n    get config() {\n      return this.__swc_engine?.config;\n    }\n\n    get router() {\n      return this.__swc_engine?.router;\n    }\n\n    async _invokeRouteChangeSubscribers(instance: HTMLElement, re: RouterEventType) {\n      if (instance.isConnected === false) return;\n\n      this._routeChangeInvocations++;\n\n      if (this._childrenRouteChangedInterval) {\n        this.config.window.clearInterval(this._childrenRouteChangedInterval);\n      }\n      const intervalConfig = {setInterval: this.config.window.setInterval.bind(this.config.window), clearInterval: this.config.window.clearInterval.bind(this.config.window)};\n      this._childrenRouteChangedInterval = debounceTimeIntervalLock(\n        () => this._routeChangeInvocations === 0,\n        () => {\n          this._childrenRouteChangedInterval = null;\n          this.config.onChildrenRouteChanged?.(re, this)\n        },\n        this.config?.childrenConnectedDoneCheckIntervalTime ?? 30,\n        intervalConfig\n      );\n\n      try {\n        const routeChangeSubscribers = getSubscribeSwcAppRouteChangeWhileConnectedMetadata(instance);\n        if (routeChangeSubscribers && Array.isArray(routeChangeSubscribers)) {\n          console.log('[SWC-MIXIN] Route change subscribers found')\n          const ps = routeChangeSubscribers.map(async metadata => {\n            const methodName = metadata.propertyKey;\n            let pathPattern = metadata.options?.path as any;\n            const filter = metadata.options?.filter;\n\n            if (typeof pathPattern === 'function') {\n              pathPattern = (pathPattern as Function)(instance);\n            }\n\n            let pathMatched = false;\n            let pathData: any = null;\n\n            if (!pathPattern) {\n              pathMatched = true;\n              pathData = {};\n            } else if (Array.isArray(pathPattern)) {\n              for (const pattern of pathPattern) {\n                const data = SwcUtils.parsePathPattern(pattern, re.path || '/');\n                if (data !== null) {\n                  pathMatched = true;\n                  pathData = data;\n                  break;\n                }\n              }\n            } else {\n              pathData = SwcUtils.parsePathPattern(pathPattern, re.path || '/');\n              pathMatched = pathData !== null;\n            }\n\n            const hostSet = SwcUtils.getHelperAndHostSet(this.config.window, this);\n            const filterPassed = !filter || filter(this.router!, {helper:hostSet, currentThis:instance});\n\n            if (pathMatched && filterPassed && instance[methodName]) {\n              await instance[methodName]({...re, pathData: pathData});\n            }\n          });\n          await Promise.allSettled(ps);\n        }\n      } finally {\n        if (this.config?.ssr) {\n          setSSRAttribute(instance);\n        } else {\n          removeSSRAttribute(instance);\n        }\n        this._routeChangeInvocations = Math.max(0, this._routeChangeInvocations - 1);\n      }\n    }\n\n    async _connected(instance: HTMLElement, option?: { noIncrements: boolean }) {\n      if (instance) {\n        if (!this.simpleApplication && !this.config) {\n          this._connected_safari_and_standby.push(instance);\n          return;\n        }\n\n        this.config.onConnectedChildBefore?.(instance);\n        if (!option?.noIncrements) {\n          this._connectedInvocations++;\n        }\n        this._swc_connected_instance.add(instance);\n\n        const connectedSwcAppCallBacks = findAllLifecycleMetadata(instance, ON_CONNECTED_SWC_APP_METADATA_KEY) ?? [];\n        for (let connectedSwcAppCallBack of connectedSwcAppCallBacks) {\n          await (instance as any)?._invokeLifecycleMethod?.(connectedSwcAppCallBack);\n        }\n\n        if (this._childrenConnectedDoneInterval) {\n          this.config.window.clearInterval(this._childrenConnectedDoneInterval);\n        }\n        const intervalConfig = {setInterval: this.config.window.setInterval.bind(this.config.window), clearInterval: this.config.window.clearInterval.bind(this.config.window)};\n        this._childrenConnectedDoneInterval = debounceTimeIntervalLock(\n          () => this._connectedInvocations === 0,\n          () => {\n            this._childrenConnectedDoneInterval = null;\n            this.config.onChildrenConnectedDone?.(this)\n          },\n          this.config?.childrenConnectedDoneCheckIntervalTime ?? 30,\n          intervalConfig\n        );\n\n        if (this.simpleApplication) {\n          try {\n            if (this.router && this._lastRouterEvent) {\n              await this._invokeRouteChangeSubscribers(instance, this._lastRouterEvent!);\n            }\n          } catch (e) {\n            throw e;\n          }\n        }\n\n        if (this.config?.ssr) {\n          setSSRAttribute(instance);\n        } else {\n          removeSSRAttribute(instance);\n        }\n      }\n\n      this.config.onConnectedChildAfter?.(instance);\n      return this;\n    }\n\n    async _connectedDone(instance: any) {\n      try {\n        // \uB0B4\uBD80 \uC5F0\uACB0 \uCC98\uB9AC \uB85C\uC9C1\n      } finally {\n        this._connectedInvocations = Math.max(0, this._connectedInvocations - 1);\n      }\n    }\n\n    _disconnected(instance: any) {\n      if (instance) {\n        this._swc_connected_instance.delete(instance);\n        this.config?.onDisconnectedChildAfter?.(instance);\n      }\n    }\n\n    async _handleRouteChange(route: RouterEventType) {\n      this._lastRouterEvent = route;\n      const swcConnectedInstance = Array.from(this._swc_connected_instance);\n      const ps = swcConnectedInstance.map((instance: any) => this._invokeRouteChangeSubscribers(instance, route));\n      await Promise.allSettled(ps);\n    }\n\n    async connect(config?: SwcAttributeConfigType) {\n      console.log('[SWC-MIXIN] connect')\n      const swcConfig = {\n        routeType: 'element',\n        window: config?.window,\n        ...config\n      } as SwcConfigType;\n\n      await this.__swc_engine.connect(swcConfig);\n\n      // Safari is \uC18D\uC131 \uCC98\uB9AC\n      this._connected_safari_and_standby.forEach((instance: any) => {\n        this._connected(instance, {noIncrements: true});\n      });\n\n      // \uB77C\uC6B0\uD130 \uBCC0\uACBD \uAD6C\uB3C5\n      if (!this._routerSubscription && this.router) {\n        const config = this.__swc_engine.config;\n\n        this._routerSubscription = this.router.observable.subscribe(async (route: RouterEventType) => {\n          console.log('[SWC-MIXIN] Router event received:', route.triggerPoint);\n          if (route.triggerPoint === 'end') {\n            await this._handleRouteChange(route);\n          }\n        });\n\n        if (config?.path) {\n          console.log('[DEBUG] Navigating to initial path:', config.path);\n        }\n      }\n    }\n\n    connectedCallback() {\n      // \uBD80\uBAA8 \uD074\uB798\uC2A4\uC758 connectedCallback \uD638\uCD9C\n      // @ts-ignore\n      super.connectedCallback?.();\n\n      const configStr = this.getAttribute('swc-get-application-config');\n      const win = this.ownerDocument?.defaultView || window;\n      if (configStr && win) {\n        try {\n          const userConfig = FunctionUtils.executeReturn({\n            script: configStr,\n            context: this,\n            args: SwcUtils.getHelperAndHostSet(win, this)\n          });\n          this.connect(userConfig);\n        } catch (e) {\n          console.error('[SWC-MIXIN] Script execution failed:', e);\n        }\n      }\n\n      this._connected(this);\n      this.__swc_engine?.config?.onConnected?.(this);\n      this._connectedDone(this);\n    }\n\n    disconnectedCallback() {\n      // \uBD80\uBAA8 \uD074\uB798\uC2A4\uC758 disconnectedCallback \uD638\uCD9C\n      // @ts-ignore\n      super.disconnectedCallback?.();\n      \n      this._routerSubscription?.unsubscribe();\n      this._routerSubscription = undefined;\n      this._lastRouterEvent = undefined;\n      this.__swc_engine.disconnect();\n      this.__swc_engine?.config?.onDisconnected?.(this);\n      this._disconnected(this);\n    }\n\n    async routing(path: string) {\n      await this.router?.go(path);\n    }\n\n    back(): void {\n      this.router?.back();\n    }\n\n    forward(): void {\n      this.router?.forward();\n    }\n\n    reload(): void {\n      this.router?.reload();\n    }\n\n    publishMessage(message: SwcAppMessage): void {\n      this._swc_connected_instance.forEach((instance: any) => {\n        this._invokeMessageSubscribers(instance, message);\n      });\n    }\n\n    _invokeMessageSubscribers(instance: any, message: SwcAppMessage) {\n      const messageSubscribers = getSubscribeSwcAppMessageWhileConnectedMetadata(instance);\n      if (messageSubscribers && Array.isArray(messageSubscribers)) {\n        messageSubscribers.forEach(metadata => {\n          const methodName = metadata.propertyKey;\n          const messageType = metadata.messageType;\n          const filter = metadata.filter;\n\n          let typeMatched = false;\n          if (!messageType) {\n            typeMatched = true;\n          } else if (message.type === messageType) {\n            typeMatched = true;\n          }\n\n          let filterMatched = true;\n          if (filter && typeMatched) {\n            filterMatched = filter(message, instance);\n          }\n\n          if (typeMatched && filterMatched && typeof instance[methodName] === 'function') {\n            instance[methodName](message);\n          }\n        });\n      }\n    }\n  };\n}\n"],
+  "mappings": "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",
+  "names": ["config"]
+}

package/dist/esm/elements/index.js

@@ -1,8 +1,3 @@
-import swcAppFactory from "./SwcApp.js";
-const registerSwcApp = swcAppFactory;
-const register = [swcAppFactory];
-export {
-  register,
-  registerSwcApp
-};
+export * from "./SwcAppMixin.js";
+export * from "./SwcApp.js";
 //# sourceMappingURL=index.js.map

package/dist/esm/elements/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/elements/index.ts"],
-  "sourcesContent": ["// export * from './tt/register';\nimport swcAppFactory from './SwcApp'\n// import swcAsyncFactory from './SwcAsync'\n// import swcLoopFactory from './SwcLoop'\n// import swcIfFactory from './SwcIf'\nexport const registerSwcApp = swcAppFactory;\n// export const registerSwcAsync = swcAsyncFactory;\n// export const registerSwcLoop = swcLoopFactory;\n// export const registerSwcIf = swcIfFactory;\n\nexport const register = [swcAppFactory];"],
-  "mappings": "AACA,OAAO,mBAAmB;AAInB,MAAM,iBAAiB;AAKvB,MAAM,WAAW,CAAC,aAAa;",
+  "sourcesContent": ["// export * from './tt/register';\nexport * from './SwcAppMixin'\nexport * from './SwcApp'\n\n"],
+  "mappings": "AACA,cAAc;AACd,cAAc;",
   "names": []
 }

package/dist/esm/index.js

@@ -1,14 +1,12 @@
 import "reflect-metadata";
 export * from "./elements/index.js";
-import { register } from "./elements/index.js";
+import { defineSwcAppAll } from "./elements/index.js";
 export * from "./decorators/index.js";
 export * from "./types/index.js";
 export * from "./utils/Utils.js";
 export * from "./config/config.js";
 var src_default = async (w, other) => {
-  console.log("rr");
-  const cr = await Promise.all(register.map((it) => it(w)));
-  console.log("rr11");
+  const cr = await defineSwcAppAll(w);
   if (other) {
     for (const fn of other) {
       if (typeof fn === "function") {

package/dist/esm/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.ts"],
-  "sourcesContent": ["import 'reflect-metadata';\nexport * from './elements'\nimport { register } from './elements';\nimport {ConstructorType} from \"@dooboostore/core\";\n\n// Decorators\nexport * from './decorators';\n\n// Types\nexport * from './types';\n\n// Utilities\nexport * from './utils/Utils';\n\n// Config\nexport * from './config/config';\n\n// Registration Factory\nexport default async (w: Window, other?: (((w: Window) => Promise<CustomElementConstructor> | CustomElementConstructor) | any) []) => {\n  console.log('rr')\n  const cr = await Promise.all(register.map(it => it(w)));\n  console.log('rr11')\n  // const cr = await elementFactories(w);\n  if (other) {\n    for (const fn of other) {\n      if (typeof fn === 'function') {\n        await fn(w);\n      }\n    }\n  }\n\n  return cr;\n};\n"],
-  "mappings": "AAAA,OAAO;AACP,cAAc;AACd,SAAS,gBAAgB;AAIzB,cAAc;AAGd,cAAc;AAGd,cAAc;AAGd,cAAc;AAGd,IAAO,cAAQ,OAAO,GAAW,UAAqG;AACpI,UAAQ,IAAI,IAAI;AAChB,QAAM,KAAK,MAAM,QAAQ,IAAI,SAAS,IAAI,QAAM,GAAG,CAAC,CAAC,CAAC;AACtD,UAAQ,IAAI,MAAM;AAElB,MAAI,OAAO;AACT,eAAW,MAAM,OAAO;AACtB,UAAI,OAAO,OAAO,YAAY;AAC5B,cAAM,GAAG,CAAC;AAAA,MACZ;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AACT;",
+  "sourcesContent": ["import 'reflect-metadata';\nexport * from './elements'\nimport { defineSwcAppAll } from './elements';\nimport {ConstructorType} from \"@dooboostore/core\";\n\n// Decorators\nexport * from './decorators';\n\n// Types\nexport * from './types';\n\n// Utilities\nexport * from './utils/Utils';\n\n// Config\nexport * from './config/config';\n\n// Registration Factory\nexport default async (w: Window, other?: (((w: Window) => Promise<CustomElementConstructor> | CustomElementConstructor) | any) []) => {\n  const cr = await defineSwcAppAll(w);\n  // const cr = await elementFactories(w);\n  if (other) {\n    for (const fn of other) {\n      if (typeof fn === 'function') {\n        await fn(w);\n      }\n    }\n  }\n\n  return cr;\n};\n"],
+  "mappings": "AAAA,OAAO;AACP,cAAc;AACd,SAAS,uBAAuB;AAIhC,cAAc;AAGd,cAAc;AAGd,cAAc;AAGd,cAAc;AAGd,IAAO,cAAQ,OAAO,GAAW,UAAqG;AACpI,QAAM,KAAK,MAAM,gBAAgB,CAAC;AAElC,MAAI,OAAO;AACT,eAAW,MAAM,OAAO;AACtB,UAAI,OAAO,OAAO,YAAY;AAC5B,cAAM,GAAG,CAAC;AAAA,MACZ;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AACT;",
   "names": []
 }

package/dist/esm/{types.js → types/index.js}

@@ -14,4 +14,4 @@ var InjectSituationType = /* @__PURE__ */ ((InjectSituationType2) => {
 export {
   InjectSituationType
 };
-//# sourceMappingURL=types.js.map
+//# sourceMappingURL=index.js.map

package/dist/esm/types/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/types/index.ts"],
+  "sourcesContent": ["import { SimpleApplication } from '@dooboostore/simple-boot';\nimport { Router } from '@dooboostore/core-web';\nimport {SwcAttributeConfigType, SwcConfigType} from \"../SwcAppEngine\";\n\nexport enum InjectSituationType {\n  HOST_SET = 'SIMPLE_WEB_COMPONENT://HOSTSET',\n  APP_HOST = 'SIMPLE_WEB_COMPONENT://APPHOST',\n  APP_HOSTS = 'SIMPLE_WEB_COMPONENT://APPHOSTS',\n  HOST = 'SIMPLE_WEB_COMPONENT://HOST',\n  PARENT_HOST = 'SIMPLE_WEB_COMPONENT://PARENTHOST',\n  HOSTS = 'SIMPLE_WEB_COMPONENT://HOSTS',\n  FIRST_HOST = 'SIMPLE_WEB_COMPONENT://FIRSTHOST',\n  LAST_HOST = 'SIMPLE_WEB_COMPONENT://LASTHOST',\n  FIRST_APP_HOST = 'SIMPLE_WEB_COMPONENT://FIRSTAPPHOST',\n  LAST_APP_HOST = 'SIMPLE_WEB_COMPONENT://LASTAPPHOST'\n}\n\nexport type SwcRootType = 'light' | 'shadow' | 'all' | 'auto';\n\nexport type SpecialSelector = '$this' | '$window' | '$document' | '$host' | '$appHost' | '$firstHost' | '$lastHost' | '$firstAppHost' | '$lastAppHost' | '$hosts' | '$appHosts';\n\nexport type SwcQueryOptions = { root?: SwcRootType };\n\nexport type HelperSet = {\n  $d: Document;\n  $w: Window;\n  $q: (selector: string, root?: Element | Document | ShadowRoot) => HTMLElement | null;\n  $qa: (selector: string, root?: Element | Document | ShadowRoot) => HTMLElement[];\n  $qi: (id: string, root?: Document | ShadowRoot) => HTMLElement | null;\n};\n\nexport type HostSet = {\n  $host: HTMLElement | null; // Nearest parent SWC component\n  $parentHost: HTMLElement | null; // Grandparent SWC ancestor\n  $hosts: HTMLElement[]; // All SWC ancestors [root, ..., parent]\n  $firstHost: HTMLElement | null; // Top-most SWC ancestor\n  $lastHost: HTMLElement | null; // Same as $host\n  // $templateHost: HTMLTemplateElement | null | undefined;\n  $appHost: SwcAppInterface | null;\n  $appHosts: SwcAppInterface[];\n  $firstAppHost: SwcAppInterface | null;\n  $lastAppHost: SwcAppInterface | null;\n};\n\nexport type HelperHostSet = HelperSet & HostSet & {$this: any};\n\nexport type SwcAppMessage<T = any> = {\n  publisher?: any;\n  data?: T;\n  type?: string;\n};\n\n\nexport interface SwcAppInterface extends HTMLElement {\n  simpleApplication?: SimpleApplication;\n  config?:  SwcConfigType;\n  router?: Router;\n  connect(config?: SwcAttributeConfigType): Promise<void>;\n  routing(path: string): Promise<void>;\n  reload(): void;\n  back(): void;\n  forward(): void;\n  publishMessage(message: SwcAppMessage): void;\n}\n\nexport interface SwcElement {\n  // _swcId: string;\n  createSlotString(id: string): string\n  createEaHtml(id: string, script: string): string\n  createEaText(id: string, script: string): string\n  createEaAttribute(id: string, attributeName: string): string\n  createEaEvent(id: string, eventName: string): string\n  createEaProperty(id: string, propertyName: string): string\n}"],
+  "mappings": "AAIO,IAAK,sBAAL,kBAAKA,yBAAL;AACL,EAAAA,qBAAA,cAAW;AACX,EAAAA,qBAAA,cAAW;AACX,EAAAA,qBAAA,eAAY;AACZ,EAAAA,qBAAA,UAAO;AACP,EAAAA,qBAAA,iBAAc;AACd,EAAAA,qBAAA,WAAQ;AACR,EAAAA,qBAAA,gBAAa;AACb,EAAAA,qBAAA,eAAY;AACZ,EAAAA,qBAAA,oBAAiB;AACjB,EAAAA,qBAAA,mBAAgB;AAVN,SAAAA;AAAA,GAAA;",
+  "names": ["InjectSituationType"]
+}

package/dist/esm/utils/Utils.js

@@ -1,10 +1,20 @@
 import { getElementConfig } from "../decorators/index.js";
+import { ActionExpression } from "@dooboostore/core";
+import { ElementApply, NodeSlot } from "@dooboostore/core-web";
 const SWC_NOT_FOUND = Symbol.for("simple-web-component:not-found");
-const htmlFragment = (html, doc) => {
-  const d = doc || (typeof document !== "undefined" ? document : void 0);
-  if (!d) throw new Error("Document is not available");
-  const template = d.createElement("template");
-  template.innerHTML = html.trim();
+const html = (str, document2) => {
+  return [...document2.createRange().createContextualFragment(str).childNodes];
+};
+const htmlFragment = (html2, doc) => {
+  if (!doc) throw new Error("Document is not available");
+  const template = doc.createElement("template");
+  if (typeof html2 === "string") {
+    template.innerHTML = html2.trim();
+  } else if (html2 instanceof Node) {
+    template.appendChild(html2);
+  } else if (Array.isArray(html2)) {
+    template.append(...html2);
+  }
   return template.content;
 };
 const textNode = (text, doc) => {
@@ -23,38 +33,38 @@ const createElement = (documentOrWindow, tagName, options) => {
   const el = doc.createElement(tagName);
   if (options?.innerHtml) el.innerHTML = options.innerHtml;
   if (options?.attrs) {
-    Object.entries(options.attrs).forEach(([k, v]) => el.setAttribute(k, String(v)));
+    Object.entries(options.attrs).filter(([k, v]) => v).forEach(([k, v]) => el.setAttribute(k, String(v)));
   }
   if (options?.property) {
     Object.entries(options.property).forEach(([k, v]) => el[k] = v);
   }
   return el;
 };
-const htmlDivElement = (html, options) => {
+const htmlDivElement = (html2, options) => {
   const d = options?.doc || (typeof document !== "undefined" ? document : void 0);
   if (!d) throw new Error("Document is not available");
   const el = d.createElement("div");
-  el.innerHTML = html.trim();
+  el.innerHTML = html2.trim();
   if (options?.attrs) {
     Object.entries(options.attrs).forEach(([k, v]) => el.setAttribute(k, String(v)));
   }
   return el;
 };
-const htmlSpanElement = (html, options) => {
+const htmlSpanElement = (html2, options) => {
   const d = options?.doc || (typeof document !== "undefined" ? document : void 0);
   if (!d) throw new Error("Document is not available");
   const el = d.createElement("span");
-  el.innerHTML = html.trim();
+  el.innerHTML = html2.trim();
   if (options?.attrs) {
     Object.entries(options.attrs).forEach(([k, v]) => el.setAttribute(k, String(v)));
   }
   return el;
 };
-const htmlButtonElement = (html, options) => {
+const htmlButtonElement = (html2, options) => {
   const d = options?.doc || (typeof document !== "undefined" ? document : void 0);
   if (!d) throw new Error("Document is not available");
   const el = d.createElement("button");
-  el.innerHTML = html.trim();
+  el.innerHTML = html2.trim();
   if (options?.attrs) {
     Object.entries(options.attrs).forEach(([k, v]) => el.setAttribute(k, String(v)));
   }
@@ -69,42 +79,42 @@ const htmlUlElement = (options) => {
   }
   return el;
 };
-const htmlLiElement = (html, options) => {
+const htmlLiElement = (html2, options) => {
   const d = options?.doc || (typeof document !== "undefined" ? document : void 0);
   if (!d) throw new Error("Document is not available");
   const el = d.createElement("li");
-  el.innerHTML = html.trim();
+  el.innerHTML = html2.trim();
   if (options?.attrs) {
     Object.entries(options.attrs).forEach(([k, v]) => el.setAttribute(k, String(v)));
   }
   return el;
 };
-const htmlAElement = (html, options) => {
+const htmlAElement = (html2, options) => {
   const d = options?.doc || (typeof document !== "undefined" ? document : void 0);
   if (!d) throw new Error("Document is not available");
   const el = d.createElement("a");
-  el.innerHTML = html.trim();
+  el.innerHTML = html2.trim();
   if (options?.href) el.href = options.href;
   if (options?.attrs) {
     Object.entries(options.attrs).forEach(([k, v]) => el.setAttribute(k, String(v)));
   }
   return el;
 };
-const htmlPElement = (html, options) => {
+const htmlPElement = (html2, options) => {
   const d = options?.doc || (typeof document !== "undefined" ? document : void 0);
   if (!d) throw new Error("Document is not available");
   const el = d.createElement("p");
-  el.innerHTML = html.trim();
+  el.innerHTML = html2.trim();
   if (options?.attrs) {
     Object.entries(options.attrs).forEach(([k, v]) => el.setAttribute(k, String(v)));
   }
   return el;
 };
-const htmlHeadingElement = (level, html, options) => {
+const htmlHeadingElement = (level, html2, options) => {
   const d = options?.doc || (typeof document !== "undefined" ? document : void 0);
   if (!d) throw new Error("Document is not available");
   const el = d.createElement(`h${level}`);
-  el.innerHTML = html.trim();
+  el.innerHTML = html2.trim();
   if (options?.attrs) {
     Object.entries(options.attrs).forEach(([k, v]) => el.setAttribute(k, String(v)));
   }
@@ -219,6 +229,134 @@ var SwcUtils;
     if (getElementConfig(el)) return el;
     return (0, SwcUtils2.findNearestSwcHostIncludingSelf)(el);
   };
+  function projectProcessHtml(id, htmlOrNode, document2) {
+    if (typeof htmlOrNode === "string") {
+      let t = htmlOrNode;
+      t = SwcUtils2.processHtml(id, t, { document: document2, replaceWrap: { start: "<!--[[", end: "]]-->" }, replacer: (id2, script) => NodeSlot.slot(id2, script) });
+      t = SwcUtils2.processHtml(id, t, { document: document2, replaceWrap: { start: "<!--[html", end: "]-->" }, replacer: (id2, script) => ElementApply.html(id2, script) });
+      t = SwcUtils2.processHtml(id, t, { document: document2, replaceWrap: { start: "<!--[text", end: "]-->" }, replacer: (id2, script) => ElementApply.text(id2, script) });
+      t = SwcUtils2.processHtml(id, t, {
+        document: document2,
+        replaceWrap: { start: /a::\w+=\s*"/, end: /"\s/ },
+        replacer: (id2, script, er) => {
+          console.log("start: /a-->", er);
+          const match = er.expressionStart.match(/^\w+::(\w+)="/);
+          const name = match?.[1];
+          return ElementApply.attribute(id2, name, script);
+        }
+      });
+      t = SwcUtils2.processHtml(id, t, {
+        document: document2,
+        replaceWrap: { start: /e::\w+=\s*"/, end: /"\s/ },
+        replacer: (id2, script, er) => {
+          console.log("start: /e-->", er);
+          const match = er.expressionStart.match(/^\w+::(\w+)="/);
+          const name = match?.[1];
+          return ElementApply.event(id2, name, script);
+        }
+      });
+      t = SwcUtils2.processHtml(id, t, {
+        document: document2,
+        replaceWrap: { start: /p:\w+=\s*"/, end: /"\s/ },
+        replacer: (id2, script, er) => {
+          console.log("start: /p-->", er);
+          const match = er.expressionStart.match(/^\w+:(\w+)="/);
+          const name = match?.[1];
+          return ElementApply.property(id2, name, script);
+        }
+      });
+      return t;
+    } else if (htmlOrNode) {
+      const nodes = Array.isArray(htmlOrNode) ? htmlOrNode : [htmlOrNode];
+      const window2 = document2.defaultView;
+      nodes.forEach((node) => {
+        node.normalize();
+        const nodes2 = document2.createTreeWalker(node, window2.NodeFilter.SHOW_ELEMENT | window2.NodeFilter.SHOW_COMMENT);
+        const getSlotData = (s) => {
+          return s.match(/^\[\[([\s\S]+)\]\]$/)?.[1]?.trim();
+        };
+        const getHtmlData = (s) => {
+          return s.match(/^\[html([\s\S]+)\]$/)?.[1]?.trim();
+        };
+        const getTextData = (s) => {
+          return s.match(/^\[text([\s\S]+)\]$/)?.[1]?.trim();
+        };
+        while (nodes2.nextNode()) {
+          const currentNode = nodes2.currentNode;
+          if (currentNode.nodeType === window2.Node.COMMENT_NODE) {
+            const targetNode = currentNode;
+            const v = targetNode.data.trim();
+            const slotData = getSlotData(v);
+            const htmlData = getHtmlData(v);
+            const textData = getTextData(v);
+            if (v && slotData) {
+              const res = NodeSlot.slotIds(id, slotData);
+              targetNode.data = res.start;
+              const end = document2.createComment(res.end);
+              targetNode.parentNode?.insertBefore(end, targetNode.nextSibling);
+            } else if (v && htmlData) {
+              const s = ElementApply.htmlDataSet(id, htmlData);
+              targetNode.data = s.start;
+              const end = document2.createComment(s.end);
+              targetNode.parentNode?.insertBefore(end, targetNode.nextSibling);
+            } else if (v && textData) {
+              const s = ElementApply.textDataSet(id, textData);
+              const end = document2.createComment(s.end);
+              targetNode.data = s.start;
+              targetNode.parentNode?.insertBefore(end, targetNode.nextSibling);
+            }
+          } else if (currentNode.nodeType === window2.Node.ELEMENT_NODE) {
+            const targetNode = currentNode;
+            targetNode.getAttributeNames().forEach((it) => {
+              const e = it.match(/e::(\w+)$/);
+              const eventName = e?.[1];
+              const p = it.match(/p::(\w+)$/);
+              const propertyName = p?.[1];
+              const a = it.match(/a::(\w+)$/);
+              const attributeName = a?.[1];
+              const value = targetNode.getAttribute(it);
+              if (eventName) {
+                targetNode.setAttribute(ElementApply.eventName(id, eventName), value);
+                targetNode.removeAttribute(it);
+              } else if (propertyName) {
+                targetNode.setAttribute(ElementApply.propertyName(id, propertyName), value);
+                targetNode.removeAttribute(it);
+              } else if (attributeName) {
+                targetNode.setAttribute(ElementApply.attributeName(id, attributeName), value);
+                targetNode.removeAttribute(it);
+              }
+            });
+          }
+        }
+      });
+      return nodes;
+    }
+  }
+  SwcUtils2.projectProcessHtml = projectProcessHtml;
+  function processHtml(id, html2, config) {
+    const replaceStart = config.replaceWrap.start;
+    const replaceEnd = config.replaceWrap.end;
+    const callReturnStart = `${config.replaceWrap.start}=`;
+    const callReturnEnd = `${config.replaceWrap.end}`;
+    const callStart = `${config.replaceWrap.start}@`;
+    const callEnd = `${config.replaceWrap.end}`;
+    const hasPattern = (text, start, end) => {
+      if (!text) return false;
+      const s = text.indexOf(start);
+      const e = text.indexOf(end, s + start.length);
+      return s !== -1 && e !== -1 && s < e;
+    };
+    const actionConfig = { expression: { replace: { start: replaceStart, end: replaceEnd }, callReturn: { start: callReturnStart, end: callReturnEnd }, call: { start: callStart, end: callEnd } } };
+    const runActionExpression = (source) => {
+      const actionExpression = new ActionExpression(source, actionConfig);
+      actionExpression.getExpressions().filter((it) => it.type === "replace").forEach((it) => {
+        actionExpression.replace(it, config.replacer(id, it.script?.trim(), it));
+      });
+      return actionExpression.toResult();
+    };
+    return runActionExpression(html2);
+  }
+  SwcUtils2.processHtml = processHtml;
   SwcUtils2.getAppHosts = (el) => {
     const hosts = SwcUtils2.findAllAppHostsIncludingSelfDirect(el);
     return hosts;
@@ -314,6 +452,7 @@ export {
   SwcUtils,
   commentNode,
   createElement,
+  html,
   htmlAElement,
   htmlArticleElement,
   htmlButtonElement,