@dooboostore/simple-web-component 1.0.30 → 1.0.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dooboostore/simple-web-component",
-  "version": "1.0.30",
+  "version": "1.0.31",
   "license": "MIT",
   "type": "module",
   "main": "./dist/cjs/index.js",
@@ -93,9 +93,9 @@
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^5.2.0",
     "@dooboostore/core": "1.0.30",
-    "@dooboostore/simple-boot": "1.0.54",
+    "@dooboostore/core-node": "1.0.12",
     "@dooboostore/core-web": "1.0.10",
-    "@dooboostore/core-node": "1.0.12"
+    "@dooboostore/simple-boot": "1.0.54"
   },
   "scripts": {
     "clean": "rm -rf dist",

package/src/decorators/elementDefine.ts

@@ -177,14 +177,14 @@ const setupPrototype = (proto: any) => {
     ensureInit(this);
     if (typeof (this as any)[methodName] !== 'function') return;
     const useHostSet = hostSet ?? SwcUtils.getHostSet(this);
-    const app = useHostSet?.$appHost.simpleApplication;
+    const app = useHostSet?.$appHost?.simpleApplication;
     // console.log('---->hh',app, this, methodName);
     if (app) {
       const otherStorage = new Map<any, any>();
       const situations = new SituationTypeContainers([new SituationTypeContainer({ situationType: InjectSituationType.HOST_SET, data: useHostSet }), new SituationTypeContainer({ situationType: InjectSituationType.APP_HOST, data: useHostSet.$appHost }), new SituationTypeContainer({ situationType: InjectSituationType.APP_HOSTS, data: useHostSet.$appHosts }), new SituationTypeContainer({ situationType: InjectSituationType.HOST, data: useHostSet.$host }), new SituationTypeContainer({ situationType: InjectSituationType.HOSTS, data: useHostSet.$hosts }), new SituationTypeContainer({ situationType: InjectSituationType.FIRST_HOST, data: useHostSet.$firstHost }), new SituationTypeContainer({ situationType: InjectSituationType.LAST_HOST, data: useHostSet.$lastHost }), new SituationTypeContainer({ situationType: InjectSituationType.FIRST_APP_HOST, data: useHostSet.$firstAppHost }), new SituationTypeContainer({ situationType: InjectSituationType.LAST_APP_HOST, data: useHostSet.$lastAppHost })]);
       otherStorage.set(SituationTypeContainers, situations);
 
-      return app.simstanceManager.executeBindParameterSimPromise(
+      return app.simstanceManager.executeBindParameterSim(
         {
           target: this,
           targetKey: methodName,
@@ -332,7 +332,10 @@ export const elementDefine =
         let sContent = '',
           lContent = '';
         for (const meta of connectedInnerHtmlList) {
-          const res = (this as any)[meta.propertyKey]();
+          // const res = (this as any)[meta.propertyKey]();
+          const res = (this as any)._invokeLifecycleMethod(meta.propertyKey, hostSet);
+          // console.log('------res0', res);
+          // console.log('------res1', res1);
           if (res !== undefined) {
             if (meta.options.useShadow) sContent += res;
             else lContent += res;

package/src/elements/SwcAppEngine.ts

@@ -42,11 +42,11 @@ export class SwcAppEngine {
 
       // Router Selection
       if (this._config.routeType === 'path') {
-        this.router = new PathRouter({ window: this._config.window });
+        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 });
+        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 });
+        this.router = new ElementRouter({ window: this._config.window, firstUrl: this._config.path });
       }
 
       // console.log('vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv', this.router)

package/src/elements/SwcAppMixin.ts

@@ -28,11 +28,6 @@ export function SwcAppMixin<T extends { new (...args: any[]): HTMLElement }>(Bas
       return this.__swc_engine.router;
     }
 
-    // constructor() {
-    //   super();
-    //   console.log('cccccccccccccccccccccc');
-    // }
-
     _invokeRouteChangeSubscribers(instance: any, re: RouterEventType) {
       const routeChangeSubscribers = getSubscribeSwcAppRouteChangeMetadata(instance);
       if (routeChangeSubscribers && Array.isArray(routeChangeSubscribers)) {
@@ -153,35 +148,19 @@ export function SwcAppMixin<T extends { new (...args: any[]): HTMLElement }>(Bas
         this._invokeOnConnectedSwcAppStarted(instance);
       });
 
-      // Safari fix: Manually scan DOM tree and register any SWC components that couldn't find parent
-      // This handles the case where is="" elements get upgraded in child-first order
-      // const allElements = (this as any).querySelectorAll('*');
-      // for (const el of allElements) {
-      //   const isConnected = (el as any).__swc_connected;
-      //   if (!isConnected && typeof (el as any)._resolveWindow === 'function') {
-      //     // Element is an SWC component but hasn't registered with app yet
-      //     try {
-      //       this._connected(el);
-      //       if ((el as any)._invokeOnConnectedSwcAppStarted) {
-      //         this._invokeOnConnectedSwcAppStarted(el);
-      //       }
-      //     } catch (e) {
-      //       console.warn('[SWC] Error registering discovered element:', el.tagName, e);
-      //     }
-      //   }
-      // }
 
       // Subscribe to router changes after connect
       if (!this._routerSubscription && this.router) {
         this._routerSubscription = this.router.observable.subscribe((route: RouterEventType) => {
-          // console.log('Route changed:', route);
+          //@ts-ignore
+          // console.log('Route changed:', route, this._swcId);
           this._handleRouteChange(route);
         });
         // Navigate to initial path if specified
         const config = this.__swc_engine.config;
-        if (config?.path) {
-          this.router.go(config.path);
-        }
+        // if (config?.path) {
+        //   this.router.go(config.path);
+        // }
       }
     }
 

package/src/elements/SwcAsync.ts

@@ -2,42 +2,42 @@ import { changedAttributeHost } from '../decorators/changedAttributeHost';
 import { SwcUtils } from '../utils/Utils';
 import { FunctionUtils } from '@dooboostore/core';
 
-export class SwcAsync extends HTMLTemplateElement {
+class SwcAsync extends HTMLTemplateElement {
   private _nodes: Node[] = [];
   private _value: any = null;
 
-  private _resolvePortal(): Element | null {
-    const portalScript = this.getAttribute('on-get-portal');
-    if (!portalScript) return this.parentElement;
-
-    const win = this.ownerDocument?.defaultView || window;
-    const res = FunctionUtils.executeReturn({
-      script: portalScript,
-      context: this,
-      args: SwcUtils.getHelperAndHostSet(win, this)
-    });
-
-    if (res instanceof HTMLElement) return res;
-    if (typeof res === 'string') return win.document.querySelector(res);
-    return this.parentElement;
-  }
-
   private _executeCloneCallback(attr: string, args: any) {
     const script = this.getAttribute(attr);
     if (!script) return;
     FunctionUtils.execute({ script, context: this, args });
   }
 
-  @changedAttributeHost('on-get-value')
-  private refresh() {
-    const script = this.getAttribute('on-get-value');
-    if (!script) {
+  @changedAttributeHost('value')
+  private refresh(valueAttr?: string | null) {
+    valueAttr ??= this.getAttribute('value');
+    if (!valueAttr) {
       this.render('default');
       return;
     }
-    const win = this.ownerDocument?.defaultView || window;
-    const result = FunctionUtils.executeReturn({ script, context: this, args: SwcUtils.getHelperAndHostSet(win, this) });
 
+    // {{ }} 브레이스로 감싸진 값은 스크립트 실행
+    if (valueAttr.startsWith('{{') && valueAttr.endsWith('}}')) {
+      const script = valueAttr.slice(2, -2).trim();
+      const win = this.ownerDocument?.defaultView || window;
+      const result = FunctionUtils.executeReturn({ 
+        script, 
+        context: this, 
+        args: SwcUtils.getHelperAndHostSet(win, this) 
+      });
+
+      this.executeAsync(result);
+    } else {
+      // 일반 문자열 값 또는 직접 Promise 속성
+      this.executeAsync(valueAttr);
+    }
+  }
+
+  private executeAsync(result: any) {
     if (result instanceof Promise) {
       this.render('loading');
       result
@@ -54,7 +54,7 @@ export class SwcAsync extends HTMLTemplateElement {
 
   private render(state: string) {
     this.cleanup();
-    const portal = this._resolvePortal();
+    const portal = this.parentElement;
     if (!portal) return;
 
     const win = this.ownerDocument?.defaultView || window;
@@ -67,18 +67,31 @@ export class SwcAsync extends HTMLTemplateElement {
       const elements = this._nodes.filter(n => n.nodeType === 1) as HTMLElement[];
       const groupArgs = { ...helperSet, $value: this._value, $nodes: this._nodes, $elements: elements, $firstElement: elements[0], $state: state };
 
+      // 부모 체인을 정상적으로 유지하기 위해 __swc_host 할당 제거
       this._nodes.forEach((n, nodeIdx) => {
-        if (n instanceof HTMLElement) (n as any).__swc_host = this;
+        // if (n instanceof HTMLElement) (n as any).__swc_host = this;  // 제거: 부모 체인 유지
         this._executeCloneCallback('on-clone-node', { ...groupArgs, $node: n, $nodeIndex: nodeIdx, $isElement: n.nodeType === 1 });
+
+        // Attribute {{ }} 치환 - SwcChoose처럼 동적 치환
+        if (n instanceof HTMLElement) {
+          Array.from(n.attributes).forEach(attr => {
+            const value = attr.value || '';
+            if (value.startsWith('{{') && value.endsWith('}}')) {
+              const script = value.slice(2, -2).trim();
+              const result = FunctionUtils.executeReturn({
+                script,
+                context: n,
+                args: groupArgs
+              });
+              n.setAttribute(attr.name, String(result));
+            }
+          });
+        }
       });
 
       this._executeCloneCallback('on-clone-nodes', groupArgs);
 
-      if (portal === this.parentElement) {
-        portal.insertBefore(clone, this.nextSibling);
-      } else {
-        portal.appendChild(clone);
-      }
+      portal.insertBefore(clone, this.nextSibling);
     }
   }
 
@@ -88,7 +101,6 @@ export class SwcAsync extends HTMLTemplateElement {
   }
 
   connectedCallback() {
-    console.log('[SwcAsync] connectedCallback called');
     this.refresh();
   }
   disconnectedCallback() {

package/src/elements/SwcChoose.ts

@@ -1,8 +1,9 @@
 import { changedAttributeHost } from '../decorators/changedAttributeHost';
 import { SwcUtils } from '../utils/Utils';
 import { FunctionUtils } from '@dooboostore/core';
+import { SwcChooseInterface } from '../types';
 
-export class SwcChoose extends HTMLTemplateElement {
+class SwcChoose extends HTMLTemplateElement implements SwcChooseInterface {
   private _nodes: Node[] = [];
   private _value: any = null;
   private _previousTemplate: HTMLTemplateElement | null = null;
@@ -22,7 +23,7 @@ export class SwcChoose extends HTMLTemplateElement {
   }
 
   @changedAttributeHost('value')
-  private refresh(valueAttr?: string | null) {
+  refresh(valueAttr?: string | null) {
     valueAttr ??= this.getAttribute('value');
     if (valueAttr === null) {
       this.value = null;
@@ -33,8 +34,11 @@ export class SwcChoose extends HTMLTemplateElement {
     if (valueAttr.startsWith('{{') && valueAttr.endsWith('}}')) {
       const script = valueAttr.slice(2, -2).trim();
       const win = this.ownerDocument?.defaultView || window;
-      const result = FunctionUtils.executeReturn({ script, context: this, args: SwcUtils.getHelperAndHostSet(win, this) });
+      const helperAndHostSet = SwcUtils.getHelperAndHostSet(win, SwcUtils.findNearestSwcHost(this));
+      // console.log('vvvvvvvvvvvvvvvvvv323', helperAndHostSet);
+      const result = FunctionUtils.executeReturn({ script, context: this, args: helperAndHostSet });
       this.value = result;
+      // console.log('----------vv', this.value);
     } else {
       // 일반 문자열 값
       this.value = valueAttr;
@@ -42,6 +46,7 @@ export class SwcChoose extends HTMLTemplateElement {
   }
 
   private render() {
+    // console.log('-------------', this.value);
     const win = this.ownerDocument?.defaultView || window;
     const helperSet = SwcUtils.getHelperAndHostSet(win, this);
     const templates = Array.from(this.content.querySelectorAll('template'));

package/src/elements/SwcIf.ts

@@ -2,7 +2,7 @@ import { changedAttributeHost } from '../decorators/changedAttributeHost';
 import { SwcUtils } from '../utils/Utils';
 import { FunctionUtils } from '@dooboostore/core';
 
-export class SwcIf extends HTMLTemplateElement {
+class SwcIf extends HTMLTemplateElement {
   private _value = false;
   private _nodes: Node[] = [];
 
@@ -14,52 +14,39 @@ export class SwcIf extends HTMLTemplateElement {
     this.render();
   }
 
-  private _resolvePortal(): Element | null {
-    const portalScript = this.getAttribute('on-get-portal');
-    if (!portalScript) return this.parentElement;
-
-    const win = this.ownerDocument?.defaultView || window;
-    const res = FunctionUtils.executeReturn({
-      script: portalScript,
-      context: this,
-      args: SwcUtils.getHelperAndHostSet(win, this)
-    });
-
-    if (res instanceof HTMLElement) return res;
-    if (typeof res === 'string') return win.document.querySelector(res);
-    return this.parentElement;
-  }
-
   private _executeCloneCallback(attr: string, args: any) {
     const script = this.getAttribute(attr);
     if (!script) return;
     FunctionUtils.execute({ script, context: this, args });
   }
 
-  @changedAttributeHost('on-get-value')
-  private refreshValue() {
-    const script = this.getAttribute('on-get-value');
-    if (!script) {
+  @changedAttributeHost('value')
+  private refreshValue(valueAttr?: string | null) {
+    valueAttr ??= this.getAttribute('value');
+    if (valueAttr === null) {
       this.value = false;
       return;
     }
-    const win = this.ownerDocument?.defaultView || window;
-    const res = FunctionUtils.executeReturn({
-      script,
-      context: this,
-      args: SwcUtils.getHelperAndHostSet(win, this)
-    });
-
-    if (res instanceof Promise) {
-      res.then(v => (this.value = v)).catch(() => (this.value = false));
+
+    // {{ }} 브레이스로 감싸진 값은 스크립트 실행
+    if (valueAttr.startsWith('{{') && valueAttr.endsWith('}}')) {
+      const script = valueAttr.slice(2, -2).trim();
+      const win = this.ownerDocument?.defaultView || window;
+      const result = FunctionUtils.executeReturn({
+        script,
+        context: this,
+        args: SwcUtils.getHelperAndHostSet(win, this)
+      });
+      this.value = result;
     } else {
-      this.value = res;
+      // 일반 문자열 값
+      this.value = Boolean(valueAttr);
     }
   }
 
   private render() {
     this.cleanup();
-    const portal = this._resolvePortal();
+    const portal = this.parentElement;
     if (!portal) return;
 
     const win = this.ownerDocument?.defaultView || window;
@@ -83,18 +70,31 @@ export class SwcIf extends HTMLTemplateElement {
       const elements = this._nodes.filter(n => n.nodeType === 1) as HTMLElement[];
       const groupArgs = { ...helperSet, $value: this._value, $nodes: this._nodes, $elements: elements, $firstElement: elements[0] };
 
+      // 부모 체인을 정상적으로 유지하기 위해 __swc_host 할당 제거
       this._nodes.forEach((node, nodeIdx) => {
-        if (node instanceof HTMLElement) (node as any).__swc_host = this;
+        // if (node instanceof HTMLElement) (node as any).__swc_host = this;  // 제거: 부모 체인 유지
         this._executeCloneCallback('on-clone-node', { ...groupArgs, $node: node, $nodeIndex: nodeIdx, $isElement: node.nodeType === 1 });
+
+        // Attribute {{ }} 치환 - SwcChoose처럼 동적 치환
+        if (node instanceof HTMLElement) {
+          Array.from(node.attributes).forEach(attr => {
+            const value = attr.value || '';
+            if (value.startsWith('{{') && value.endsWith('}}')) {
+              const script = value.slice(2, -2).trim();
+              const result = FunctionUtils.executeReturn({
+                script,
+                context: node,
+                args: { ...groupArgs, $value: this._value }
+              });
+              node.setAttribute(attr.name, String(result));
+            }
+          });
+        }
       });
 
       this._executeCloneCallback('on-clone-nodes', groupArgs);
 
-      if (portal === this.parentElement) {
-        portal.insertBefore(clone, this.nextSibling);
-      } else {
-        portal.appendChild(clone);
-      }
+      portal.insertBefore(clone, this.nextSibling);
     }
   }
 

package/src/elements/SwcLoop.ts

@@ -2,7 +2,7 @@ import { changedAttributeHost } from '../decorators/changedAttributeHost';
 import { SwcUtils } from '../utils/Utils';
 import { FunctionUtils } from '@dooboostore/core';
 
-export class SwcLoop extends HTMLTemplateElement {
+class SwcLoop extends HTMLTemplateElement {
   private _value: any[] = [];
   private _nodeGroups: Node[][] = [];
 
@@ -14,21 +14,7 @@ export class SwcLoop extends HTMLTemplateElement {
     this.render();
   }
 
-  private _resolvePortal(): Element | null {
-    const portalScript = this.getAttribute('on-get-portal');
-    if (!portalScript) return this.parentElement;
 
-    const win = this.ownerDocument?.defaultView || window;
-    const res = FunctionUtils.executeReturn({
-      script: portalScript,
-      context: this,
-      args: SwcUtils.getHelperAndHostSet(win, this)
-    });
-
-    if (res instanceof HTMLElement) return res;
-    if (typeof res === 'string') return win.document.querySelector(res);
-    return this.parentElement;
-  }
 
   private _executeCloneCallback(attr: string, args: any) {
     const script = this.getAttribute(attr);
@@ -41,13 +27,17 @@ export class SwcLoop extends HTMLTemplateElement {
     this._nodeGroups = [];
   }
 
-  @changedAttributeHost('on-get-value')
+  @changedAttributeHost('value')
   private refreshValue() {
-    const script = this.getAttribute('on-get-value');
+    let script = this.getAttribute('value');
     if (!script) {
       this.value = [];
       return;
     }
+    // Parse {{ }} braces
+    if (script.startsWith('{{') && script.endsWith('}}')) {
+      script = script.slice(2, -2).trim();
+    }
     const win = this.ownerDocument?.defaultView || window;
     const res = FunctionUtils.executeReturn({
       script,
@@ -64,7 +54,7 @@ export class SwcLoop extends HTMLTemplateElement {
 
   render() {
     this._cleanup();
-    const portal = this._resolvePortal();
+    const portal = this.parentElement;
     if (!portal) return;
 
     const win = this.ownerDocument?.defaultView || window;
@@ -92,8 +82,23 @@ export class SwcLoop extends HTMLTemplateElement {
         const groupArgs = { ...helperSet, $item: item, $index: index, $value: this._value, $nodes: nodes, $elements: elements, $firstElement: elements[0] };
 
         nodes.forEach((node, nodeIdx) => {
-          if (node instanceof HTMLElement) (node as any).__swc_host = this;
           this._executeCloneCallback('on-clone-node', { ...groupArgs, $node: node, $nodeIndex: nodeIdx, $isElement: node.nodeType === 1 });
+
+          // Attribute {{ }} 치환 - SwcChoose처럼 동적 치환
+          if (node instanceof HTMLElement) {
+            Array.from(node.attributes).forEach(attr => {
+              const value = attr.value || '';
+              if (value.startsWith('{{') && value.endsWith('}}')) {
+                const script = value.slice(2, -2).trim();
+                const result = FunctionUtils.executeReturn({
+                  script,
+                  context: node,
+                  args: groupArgs
+                });
+                node.setAttribute(attr.name, String(result));
+              }
+            });
+          }
         });
 
         this._executeCloneCallback('on-clone-nodes', groupArgs);

package/src/elements/SwcSubTemplates.ts

@@ -1,6 +1,6 @@
-export class SwcLoading extends HTMLTemplateElement {}
-export class SwcError extends HTMLTemplateElement {}
-export class SwcSuccess extends HTMLTemplateElement {}
-export class SwcWhen extends HTMLTemplateElement {}
-export class SwcOtherwise extends HTMLTemplateElement {}
-export class SwcDefault extends HTMLTemplateElement {}
+class SwcLoading extends HTMLTemplateElement {}
+class SwcError extends HTMLTemplateElement {}
+class SwcSuccess extends HTMLTemplateElement {}
+class SwcWhen extends HTMLTemplateElement {}
+class SwcOtherwise extends HTMLTemplateElement {}
+class SwcDefault extends HTMLTemplateElement {}