@dooboostore/simple-web-component 1.0.12 → 1.0.13

package/README.md

@@ -776,18 +776,17 @@ export default (w: Window) => {
   return MyComponent;
 };
 ```
-
-### Option B — Programmatic Bootstrap (`Swc` class)
-
-```typescript
-import { Swc } from '@dooboostore/simple-web-component';
-
-const swc = new Swc({ rootRouter: RootRouter, window: w });
-
-window.addEventListener('DOMContentLoaded', async () => {
-  document.body.appendChild(swc.run());
-  await swc.routing('/hello/good');
-});
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>swc</title>
+  <script src="..."></script>
+</head>
+<body is="swc-app-body" swc-get-application-config="applicationConfig(this)">
+</body>
+</html>
 ```
 
 ### Routing Architecture

package/dist/cjs/decorators/elementDefine.js

@@ -34,6 +34,8 @@ var import_state = require("./state");
 var import_emitCustomEvent = require("./emitCustomEvent");
 var import_Utils = require("../utils/Utils");
 var import_config = require("../config/config");
+var import_Inject = require("@dooboostore/simple-boot/decorators/inject/Inject");
+var import_SwcInterfaces = require("../elements/SwcInterfaces");
 const ELEMENT_CONFIG_KEY = Symbol("simple-web-component:element-config");
 const STATE_CHANGE_EVENT = "swc:state-change";
 function buildEnv(configWindow) {
@@ -89,7 +91,8 @@ const elementDefine = (inConfig) => (constructor) => {
       this._externalSources = /* @__PURE__ */ new Map();
       this._isSyncing = false;
       this._isUpdatingState = false;
-      this._executeSwcScript("swc-on-constructor");
+      const hostSet = import_Utils.SwcUtils.getHostSet(this);
+      this._executeSwcScript("swc-on-constructor", hostSet);
       if (stateList) {
         stateList.forEach((meta) => {
           const key = meta.propertyKey;
@@ -153,7 +156,6 @@ const elementDefine = (inConfig) => (constructor) => {
         this.attachShadow({ mode: "open" });
       }
     }
-    // name→value 컨텍스트 반환 (applyData의 hostContext용)
     _getHostContext() {
       const ctx = {};
       if (stateList) {
@@ -170,26 +172,20 @@ const elementDefine = (inConfig) => (constructor) => {
           ctx[name] = val;
         });
       }
-      const alias = this.getAttribute("as");
       const hostVal = this.value !== void 0 ? this.value : this;
       ctx["value"] = hostVal;
-      if (alias && alias !== "value") {
-        ctx[alias] = hostVal;
-      }
+      const alias = this.getAttribute("as");
+      if (alias && alias !== "value") ctx[alias] = hostVal;
       return ctx;
     }
     static get observedAttributes() {
       return mergedObservedAttributes;
     }
-    _executeSwcScript(attrName, extraArgs = {}) {
+    _executeSwcScript(attrName, hostSet, extraArgs = {}) {
       const script = this.getAttribute(attrName);
       if (script) {
         try {
-          const $hosts = import_Utils.SwcUtils.findAllSwcHosts(this);
-          const $firstHost = $hosts[0] || null;
-          const $lastHost = $hosts[$hosts.length - 1] || null;
-          const $host = $lastHost;
-          const args = { $host, $hosts, $firstHost, $lastHost, ...SWC_DOM_HELPERS, ...extraArgs };
+          const args = { ...hostSet, ...SWC_DOM_HELPERS, ...extraArgs };
           const argNames = Object.keys(args);
           const argValues = Object.values(args);
           new Function(...argNames, script).apply(this, argValues);
@@ -198,6 +194,25 @@ const elementDefine = (inConfig) => (constructor) => {
         }
       }
     }
+    async _invokeLifecycleMethod(methodName, hostSet, extraArgs = []) {
+      if (typeof this[methodName] !== "function") return;
+      const app = hostSet.$appHost?.simpleApplication;
+      if (app) {
+        const otherStorage = /* @__PURE__ */ new Map();
+        const situations = new import_Inject.SituationTypeContainers([new import_Inject.SituationTypeContainer({ situationType: import_SwcInterfaces.InjectSituationType.HOST_SET, data: hostSet }), new import_Inject.SituationTypeContainer({ situationType: import_SwcInterfaces.InjectSituationType.APP_HOST, data: hostSet.$appHost }), new import_Inject.SituationTypeContainer({ situationType: import_SwcInterfaces.InjectSituationType.APP_HOSTS, data: hostSet.$appHosts }), new import_Inject.SituationTypeContainer({ situationType: import_SwcInterfaces.InjectSituationType.HOST, data: hostSet.$host }), new import_Inject.SituationTypeContainer({ situationType: import_SwcInterfaces.InjectSituationType.HOSTS, data: hostSet.$hosts }), new import_Inject.SituationTypeContainer({ situationType: import_SwcInterfaces.InjectSituationType.FIRST_HOST, data: hostSet.$firstHost }), new import_Inject.SituationTypeContainer({ situationType: import_SwcInterfaces.InjectSituationType.LAST_HOST, data: hostSet.$lastHost }), new import_Inject.SituationTypeContainer({ situationType: import_SwcInterfaces.InjectSituationType.FIRST_APP_HOST, data: hostSet.$firstAppHost }), new import_Inject.SituationTypeContainer({ situationType: import_SwcInterfaces.InjectSituationType.LAST_APP_HOST, data: hostSet.$lastAppHost })]);
+        otherStorage.set(import_Inject.SituationTypeContainers, situations);
+        return app.simstanceManager.executeBindParameterSimPromise(
+          {
+            target: this,
+            targetKey: methodName,
+            inputParameters: extraArgs
+          },
+          otherStorage
+        );
+      } else {
+        return this[methodName](hostSet, ...extraArgs);
+      }
+    }
     _syncDecorators() {
       if (this._isSyncing) return;
       this._isSyncing = true;
@@ -326,9 +341,7 @@ const elementDefine = (inConfig) => (constructor) => {
                   this._boundElements.set(host, hBound);
                 }
                 if (!hBound.has(hostBindKey)) {
-                  host.addEventListener(STATE_CHANGE_EVENT, () => {
-                    this._updateState(hAlias);
-                  });
+                  host.addEventListener(STATE_CHANGE_EVENT, () => this._updateState(hAlias));
                   hBound.add(hostBindKey);
                 }
               }
@@ -336,6 +349,8 @@ const elementDefine = (inConfig) => (constructor) => {
             Array.from(el.attributes).forEach((attr) => {
               if (attr.name.startsWith("swc-on-") && !swcLifecycleAttributes.includes(attr.name)) {
                 const eventName = attr.name.substring(7);
+                const script = attr.value;
+                const hostSet = import_Utils.SwcUtils.getHostSet(el);
                 if (eventName === "connected") {
                   const eventKey2 = `attr-once:${attr.name}`;
                   let bound2 = this._boundElements.get(el);
@@ -344,14 +359,11 @@ const elementDefine = (inConfig) => (constructor) => {
                     this._boundElements.set(el, bound2);
                   }
                   if (!bound2.has(eventKey2)) {
-                    const script = el.getAttribute(attr.name);
                     if (script) {
                       try {
-                        const $hosts2 = import_Utils.SwcUtils.findAllSwcHosts(el);
-                        const $firstHost = $hosts2[0] || null;
-                        const $lastHost = $hosts2[$hosts2.length - 1] || null;
-                        const $host = $lastHost;
-                        new Function("event", "$data", "$host", "$hosts", "$firstHost", "$lastHost", ...SWC_DOM_HELPER_KEYS, script).call(el, null, null, $host, $hosts2, $firstHost, $lastHost, ...SWC_DOM_HELPER_VALS());
+                        const argNames = Object.keys(hostSet);
+                        const argValues = Object.values(hostSet);
+                        new Function("event", "$data", ...argNames, ...SWC_DOM_HELPER_KEYS, script).call(el, null, null, ...argValues, ...SWC_DOM_HELPER_VALS());
                       } catch (e) {
                         console.error(`[SWC] Failed to execute ${attr.name} script:`, e);
                       }
@@ -368,14 +380,11 @@ const elementDefine = (inConfig) => (constructor) => {
                 }
                 if (!bound.has(eventKey)) {
                   const handler = (event) => {
-                    const rawScript = el.getAttribute(attr.name);
-                    if (rawScript) {
+                    if (script) {
                       try {
-                        const $hosts2 = import_Utils.SwcUtils.findAllSwcHosts(el);
-                        const $firstHost = $hosts2[0] || null;
-                        const $lastHost = $hosts2[$hosts2.length - 1] || null;
-                        const $host = $lastHost;
-                        new Function("event", "$data", "$host", "$hosts", "$firstHost", "$lastHost", ...SWC_DOM_HELPER_KEYS, rawScript).call(el, event, event.detail, $host, $hosts2, $firstHost, $lastHost, ...SWC_DOM_HELPER_VALS());
+                        const argNames = Object.keys(hostSet);
+                        const argValues = Object.values(hostSet);
+                        new Function("event", "$data", ...argNames, ...SWC_DOM_HELPER_KEYS, script).call(el, event, event.detail, ...argValues, ...SWC_DOM_HELPER_VALS());
                       } catch (e) {
                         console.error(`[SWC] Failed to execute ${attr.name} script:`, e);
                       }
@@ -412,7 +421,7 @@ const elementDefine = (inConfig) => (constructor) => {
         const rootName = fullPath.split(".")[0];
         const isState = stateList?.some((s) => s.options.name === rootName);
         const isAttr = attributePropsList?.some((a) => a.options.name === rootName);
-        const isLogicKey = this._asKey === rootName || this._asIndexKey === rootName;
+        const isLogicKey = this._asKey === rootName || this._asItemKey === rootName || this._asIndexKey === rootName;
         const isExternal = this._externalSources.has(rootName);
         const isSelfAlias = this.getAttribute("as") === rootName;
         const isInstanceProp = rootName in this;
@@ -442,13 +451,7 @@ const elementDefine = (inConfig) => (constructor) => {
         this._executeBindingUpdate(stateName);
         const selfAlias = this.getAttribute("as");
         if (selfAlias && selfAlias !== stateName) this._executeBindingUpdate(selfAlias);
-        this.dispatchEvent(
-          new CustomEvent(STATE_CHANGE_EVENT, {
-            bubbles: true,
-            composed: true,
-            detail: { source: stateName, host: this }
-          })
-        );
+        this.dispatchEvent(new CustomEvent(STATE_CHANGE_EVENT, { bubbles: true, composed: true, detail: { source: stateName, host: this } }));
       } finally {
         this._isUpdatingState = false;
       }
@@ -536,11 +539,10 @@ const elementDefine = (inConfig) => (constructor) => {
       });
     }
     disconnectedCallback() {
-      this._executeSwcScript("swc-on-before-disconnected");
+      const hostSet = import_Utils.SwcUtils.getHostSet(this);
+      this._executeSwcScript("swc-on-before-disconnected", hostSet);
       const bMethods = (0, import_lifecycles.getLifecycleMetadata)(this, import_lifecycles.ON_BEFORE_DISCONNECTED_METADATA_KEY);
-      bMethods?.forEach((m) => {
-        if (typeof this[m] === "function") this[m]();
-      });
+      bMethods?.forEach((m) => this._invokeLifecycleMethod(m, hostSet));
       if (this._observer) this._observer.disconnect();
       if (this._shadowObserver) this._shadowObserver.disconnect();
       if (config.autoRemoveEventListeners) {
@@ -549,30 +551,28 @@ const elementDefine = (inConfig) => (constructor) => {
       }
       if (super.disconnectedCallback) super.disconnectedCallback();
       const aMethods = (0, import_lifecycles.getLifecycleMetadata)(this, import_lifecycles.ON_AFTER_DISCONNECTED_METADATA_KEY);
-      aMethods?.forEach((m) => {
-        if (typeof this[m] === "function") this[m]();
-      });
-      this._executeSwcScript("swc-on-after-disconnected");
+      aMethods?.forEach((m) => this._invokeLifecycleMethod(m, hostSet));
+      this._executeSwcScript("swc-on-after-disconnected", hostSet);
     }
     adoptedCallback() {
-      this._executeSwcScript("swc-on-before-adopted");
+      const hostSet = import_Utils.SwcUtils.getHostSet(this);
+      this._executeSwcScript("swc-on-before-adopted", hostSet);
       const bMethods = (0, import_lifecycles.getLifecycleMetadata)(this, import_lifecycles.ON_BEFORE_ADOPTED_METADATA_KEY);
-      bMethods?.forEach((m) => {
-        if (typeof this[m] === "function") this[m]();
-      });
+      bMethods?.forEach((m) => this._invokeLifecycleMethod(m, hostSet));
       if (super.adoptedCallback) super.adoptedCallback();
       const aMethods = (0, import_lifecycles.getLifecycleMetadata)(this, import_lifecycles.ON_AFTER_ADOPTED_METADATA_KEY);
-      aMethods?.forEach((m) => {
-        if (typeof this[m] === "function") this[m]();
-      });
-      this._executeSwcScript("swc-on-after-adopted");
+      aMethods?.forEach((m) => this._invokeLifecycleMethod(m, hostSet));
+      this._executeSwcScript("swc-on-after-adopted", hostSet);
     }
     async connectedCallback() {
-      this._executeSwcScript("swc-on-before-connected");
+      const hostSet = import_Utils.SwcUtils.getHostSet(this);
+      this._executeSwcScript("swc-on-before-connected", hostSet);
       const bMethods = (0, import_lifecycles.getLifecycleMetadata)(this, import_lifecycles.ON_BEFORE_CONNECTED_METADATA_KEY);
-      bMethods?.forEach((m) => {
-        if (typeof this[m] === "function") this[m]();
-      });
+      if (bMethods) {
+        for (const m of bMethods) {
+          await this._invokeLifecycleMethod(m, hostSet);
+        }
+      }
       if (typeof this.initCore === "function") this.initCore();
       const iHtmlList = (0, import_innerHtml.getInnerHtmlMetadataList)(this);
       let sContent = "";
@@ -592,8 +592,9 @@ const elementDefine = (inConfig) => (constructor) => {
       const isManagedByParent = !!import_Utils.SwcUtils.findNearestSwcHost(this);
       if (!isManagedByParent) {
         Array.from(this.attributes).forEach((attr) => {
-          if (attr.name.startsWith("swc-on-") && swcLifecycleAttributes.indexOf(attr.name) === -1) {
+          if (attr.name.startsWith("swc-on-") && !swcLifecycleAttributes.includes(attr.name)) {
             const eventName = attr.name.substring(7);
+            const script = attr.value;
             if (eventName === "connected") {
               const eventKey2 = `host-attr-once:${attr.name}`;
               let bound2 = this._boundElements.get(this);
@@ -602,14 +603,11 @@ const elementDefine = (inConfig) => (constructor) => {
                 this._boundElements.set(this, bound2);
               }
               if (!bound2.has(eventKey2)) {
-                const script = this.getAttribute(attr.name);
                 if (script) {
                   try {
-                    const $hosts = import_Utils.SwcUtils.findAllSwcHosts(this);
-                    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, null, null, $host, $hosts, $firstHost, $lastHost, ...SWC_DOM_HELPER_VALS());
+                    const argNames = Object.keys(hostSet);
+                    const argValues = Object.values(hostSet);
+                    new Function("event", "$data", ...argNames, ...SWC_DOM_HELPER_KEYS, script).call(this, null, null, ...argValues, ...SWC_DOM_HELPER_VALS());
                   } catch (e) {
                     console.error(`[SWC] Failed to execute ${attr.name} script:`, e);
                   }
@@ -626,14 +624,11 @@ const elementDefine = (inConfig) => (constructor) => {
             }
             if (!bound.has(eventKey)) {
               const handler = (event) => {
-                const script = this.getAttribute(attr.name);
                 if (script) {
                   try {
-                    const $hosts = import_Utils.SwcUtils.findAllSwcHosts(this);
-                    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.detail, $host, $hosts, $firstHost, $lastHost, ...SWC_DOM_HELPER_VALS());
+                    const argNames = Object.keys(hostSet);
+                    const argValues = Object.values(hostSet);
+                    new Function("event", "$data", ...argNames, ...SWC_DOM_HELPER_KEYS, script).call(this, event, event.detail, ...argValues, ...SWC_DOM_HELPER_VALS());
                   } catch (e) {
                     console.error(`[SWC] Failed to execute ${attr.name} script:`, e);
                   }
@@ -670,10 +665,12 @@ const elementDefine = (inConfig) => (constructor) => {
       }
       if (super.connectedCallback) await super.connectedCallback();
       const aMethods = (0, import_lifecycles.getLifecycleMetadata)(this, import_lifecycles.ON_AFTER_CONNECTED_METADATA_KEY);
-      aMethods?.forEach((m) => {
-        if (typeof this[m] === "function") this[m]();
-      });
-      this._executeSwcScript("swc-on-after-connected");
+      if (aMethods) {
+        for (const m of aMethods) {
+          await this._invokeLifecycleMethod(m, hostSet);
+        }
+      }
+      this._executeSwcScript("swc-on-after-connected", hostSet);
     }
     attributeChangedCallback(name, oldValue, newValue) {
       if (super.attributeChangedCallback) super.attributeChangedCallback(name, oldValue, newValue);
@@ -689,10 +686,10 @@ const elementDefine = (inConfig) => (constructor) => {
       if (typeof this._updateState === "function") this._updateState(name);
       const aMethodsMap = (0, import_lifecycles.getLifecycleMetadata)(constructor, import_lifecycles.ON_ATTRIBUTE_CHANGED_METADATA_KEY);
       const mKeys = aMethodsMap?.get(name);
-      if (mKeys && Array.isArray(mKeys))
-        mKeys.forEach((key) => {
-          if (typeof this[key] === "function") this[key](newValue, oldValue, name);
-        });
+      const hostSet = import_Utils.SwcUtils.getHostSet(this);
+      if (mKeys && Array.isArray(mKeys)) {
+        mKeys.forEach((key) => this._invokeLifecycleMethod(key, hostSet, [newValue, oldValue, name]));
+      }
       if (emitCustomEventList) {
         const eMeta = emitCustomEventList.find((it) => it.options.attributeName === name);
         if (eMeta) {
@@ -709,13 +706,22 @@ const elementDefine = (inConfig) => (constructor) => {
         }
       }
       const wMethodsKeys = aMethodsMap?.get(import_lifecycles.ATTRIBUTE_CHANGED_WILDCARD);
-      if (wMethodsKeys && Array.isArray(wMethodsKeys))
-        wMethodsKeys.forEach((key) => {
-          if (typeof this[key] === "function") this[key](newValue, oldValue, name);
-        });
-      this._executeSwcScript("swc-on-attribute-changed", { $new: newValue, $old: oldValue, $name: name });
+      if (wMethodsKeys && Array.isArray(wMethodsKeys)) {
+        wMethodsKeys.forEach((key) => this._invokeLifecycleMethod(key, hostSet, [newValue, oldValue, name]));
+      }
+      this._executeSwcScript("swc-on-attribute-changed", hostSet, { $new: newValue, $old: oldValue, $name: name });
     }
   };
+  const originalProto = constructor.prototype;
+  const newProto = NewClass.prototype;
+  Object.getOwnPropertyNames(originalProto).forEach((name) => {
+    if (name === "constructor") return;
+    const keys = Reflect.getMetadataKeys(originalProto, name);
+    keys.forEach((key) => {
+      const metadata = Reflect.getMetadata(key, originalProto, name);
+      Reflect.defineMetadata(key, metadata, newProto, name);
+    });
+  });
   import_ReflectUtils.ReflectUtils.defineMetadata(ELEMENT_CONFIG_KEY, config, NewClass);
   import_ReflectUtils.ReflectUtils.defineMetadata(ELEMENT_CONFIG_KEY, config, constructor);
   const registry = config.customElementRegistry || (typeof win !== "undefined" ? win.customElements : void 0);