@dooboostore/simple-web-component 1.0.30 → 1.0.31

package/src/elements/register.ts

@@ -159,52 +159,39 @@ export const registerAllElements = (w: any): Record<string, Constructor<HTMLElem
     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;
@@ -228,18 +215,31 @@ export const registerAllElements = (w: any): Record<string, Constructor<HTMLElem
       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);
     }
   }
 
@@ -269,21 +269,7 @@ export const registerAllElements = (w: any): Record<string, Constructor<HTMLElem
     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);
@@ -296,13 +282,17 @@ export const registerAllElements = (w: any): Record<string, Constructor<HTMLElem
     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,
@@ -319,7 +309,7 @@ export const registerAllElements = (w: any): Record<string, Constructor<HTMLElem
 
   render() {
     this._cleanup();
-    const portal = this._resolvePortal();
+    const portal = this.parentElement;
     if (!portal) return;
 
     const win = this.ownerDocument?.defaultView || window;
@@ -347,8 +337,23 @@ export const registerAllElements = (w: any): Record<string, Constructor<HTMLElem
         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);
@@ -393,7 +398,7 @@ export const registerAllElements = (w: any): Record<string, Constructor<HTMLElem
   }
 
   @changedAttributeHost('value')
-  private refresh(valueAttr?: string | null) {
+  refresh(valueAttr?: string | null) {
     valueAttr ??= this.getAttribute('value');
     if (valueAttr === null) {
       this.value = null;
@@ -404,8 +409,11 @@ export const registerAllElements = (w: any): Record<string, Constructor<HTMLElem
     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;
@@ -413,6 +421,7 @@ export const registerAllElements = (w: any): Record<string, Constructor<HTMLElem
   }
 
   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'));
@@ -515,38 +524,38 @@ export const registerAllElements = (w: any): Record<string, Constructor<HTMLElem
   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
@@ -563,7 +572,7 @@ export const registerAllElements = (w: any): Record<string, Constructor<HTMLElem
 
   private render(state: string) {
     this.cleanup();
-    const portal = this._resolvePortal();
+    const portal = this.parentElement;
     if (!portal) return;
 
     const win = this.ownerDocument?.defaultView || window;
@@ -576,18 +585,31 @@ export const registerAllElements = (w: any): Record<string, Constructor<HTMLElem
       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);
     }
   }
 
@@ -597,7 +619,6 @@ export const registerAllElements = (w: any): Record<string, Constructor<HTMLElem
   }
 
   connectedCallback() {
-    console.log('[SwcAsync] connectedCallback called');
     this.refresh();
   }
   disconnectedCallback() {

package/src/router/ElementRouter.ts

@@ -6,18 +6,7 @@ export class ElementRouter extends Router {
   private _currentIndex = -1;
 
   constructor(config: RouterConfig) {
-    // Router 부모 클래스가 생성자에서 go()를 호출하여 초기화되지 않은 필드에 접근하는 것을 방지하기 위해
-    // firstUrl을 제거하고 넘긴 뒤 자식에서 수동 처리합니다.
-    const { firstUrl, ...rest } = config;
-    super(rest);
-
-    const startUrl = firstUrl ?? '/';
-    this._history = [{ url: startUrl, data: null }];
-    this._currentIndex = 0;
-
-    if (firstUrl) {
-      this.replace(firstUrl, { config: { noEventAndPublish: true } });
-    }
+    super(config);
   }
 
   // Override pushState to manage internal history

package/src/types.ts

@@ -42,7 +42,9 @@ export type HostSet = {
 };
 
 export type HelperHostSet = HelperSet & HostSet;
-
+export interface SwcChooseInterface extends HTMLTemplateElement {
+  refresh(): void;
+}
 export interface SwcAppInterface extends HTMLElement {
   simpleApplication?: SimpleApplication;
   router?: Router;

package/src/utils/Utils.ts

@@ -148,6 +148,27 @@ export const htmlArticleElement = (options?: { doc?: Document; attrs?: Record<st
 };
 
 export namespace SwcUtils {
+
+
+  export const parsePathPatternsSetAttributeString = (pathPattern: string[], path: string) => {
+    return JSON.stringify(SwcUtils.parsePathPatternsSet(pathPattern, path)).replace(/"/g, "'");
+  }
+
+  export const parsePathPatternsSet = (pathPattern: string[], path: string) => {
+    return {
+      path: path,
+      pathData: SwcUtils.parsePathPatterns(pathPattern, path)
+    };
+  };
+  export const parsePathPatterns = (pathPattern: string[], path: string) => {
+    for (const pattern of pathPattern) {
+      const data = SwcUtils.parsePathPattern(pattern, path || '/');
+      if (data !== null) {
+        return data;
+      }
+    }
+  };
+
   export const getHelperSet = (win: Window): HelperSet => {
     const doc: Document = win.document;
     return {
@@ -255,34 +276,30 @@ export namespace SwcUtils {
   export const findAllParentAppHostsDirect = (el: HTMLElement): SwcAppInterface[] => {
     const appHosts: SwcAppInterface[] = [];
     
-    // Shadow DOM 내부의 depth를 정상적으로 탐색하기 위해
-    // el.parentElement부터 시작하고, shadow root 경계를 만날 때만 host로 이동
-    let current: HTMLElement | null = el.parentElement;
-    
+    // el 자체부터 시작 (el이 app host일 수도 있음)
+    let current: HTMLElement | null = el;
+
     while (current) {
-      // console.log('vvvvvvv');
-      // alert(1)
-      // debugger;
       const isAppHost =
-        current.tagName.toLowerCase() === 'swc-app' || 
+        current.tagName.toLowerCase() === 'swc-app' ||
         current.getAttribute('is')?.startsWith('swc-app-');
       if (isAppHost) {
         appHosts.push(current as SwcAppInterface);
       }
-      // Handle shadow DOM
-      if (current.shadowRoot) {
-        current = ((current.shadowRoot as any).host as HTMLElement).parentElement;
+
+      // 다음 부모 찾기
+      if (current.parentElement) {
+        // Light DOM: 정상적인 부모 요소
+        current = current.parentElement;
       } else {
-        // 부모가 없으면 shadow root 경계일 수 있음
-        if (!current.parentElement) {
-          const parentNode = current.parentNode;
-          if (parentNode instanceof ShadowRoot) {
-            current = (parentNode as any).host as HTMLElement;
-          } else {
-            break;
-          }
+        // parentElement가 없음 = Shadow root의 직접 자식일 수 있음
+        const root = current.getRootNode();
+        if (root instanceof ShadowRoot) {
+          // Shadow host로 올라가기
+          current = root.host as HTMLElement;
         } else {
-          current = current.parentElement;
+          // Document root 도달
+          break;
         }
       }
     }