@dooboostore/simple-web-component 1.0.31 → 1.0.33

package/src/elements/SwcAsync.ts

@@ -1,58 +1,86 @@
 import { changedAttributeHost } from '../decorators/changedAttributeHost';
 import { SwcUtils } from '../utils/Utils';
-import { FunctionUtils } from '@dooboostore/core';
+import { FunctionUtils, ActionExpression } from '@dooboostore/core';
+import { ConvertUtils } from '@dooboostore/core-web';
+import { attributeHost } from '../decorators';
 
 class SwcAsync extends HTMLTemplateElement {
-  private _nodes: Node[] = [];
-  private _value: any = null;
+  @attributeHost('value')
+  _value: any;
+
+  @attributeHost('replace-wrap')
+  _replaceWrap: string | null;
+
+  resultValue?: any;
 
-  private _executeCloneCallback(attr: string, args: any) {
-    const script = this.getAttribute(attr);
-    if (!script) return;
-    FunctionUtils.execute({ script, context: this, args });
+  get value(): boolean {
+    return this._value;
   }
 
+  set value(nv: any) {
+    this.executeAsync(nv);
+  }
+
+  private _nodes: Node[] = [];
+
   @changedAttributeHost('value')
-  private refresh(valueAttr?: string | null) {
-    valueAttr ??= this.getAttribute('value');
-    if (!valueAttr) {
-      this.render('default');
-      return;
-    }
+  private setValue(valueAttr?: string | null) {
+    this.executeAsync(this._value);
+  }
 
-    // {{ }} 브레이스로 감싸진 값은 스크립트 실행
-    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);
-    }
+  @changedAttributeHost('replace-wrap')
+  private setReplaceWrap() {
+    this.executeAsync(this._value);
   }
 
-  private executeAsync(result: any) {
+  private executeAsync(result: any = this._value) {
+    if (result === undefined || result === null) {
+      this.refresh('default');
+      return;
+    }
+
     if (result instanceof Promise) {
-      this.render('loading');
+      this.refresh('loading');
       result
         .then(v => {
-          this._value = v;
-          this.render('success');
+          this.resultValue = v;
+          this.refresh('success');
         })
-        .catch(e => this.render('error'));
+        .catch(e => {
+          console.error('[SWC-ASYNC] Promise rejected:', e);
+          this.resultValue = e;
+          this.refresh('error');
+        });
     } else {
-      this._value = result;
-      this.render('success');
+      this.resultValue = result;
+      this.refresh('success');
+    }
+  }
+
+  private replaceExpressions(html: string, groupArgs: any, context: any, wrap?: string | null): string {
+    const config = wrap ? { wrapExpression: wrap } : undefined;
+    const ae = new ActionExpression(html, config);
+    const filterOptions = wrap ? { type: 'replace' as const, wrap } : 'replace';
+    const win = this.ownerDocument?.defaultView || window;
+
+    // @ts-ignore
+    for (const expr of ae.getExpressions(filterOptions)) {
+      try {
+        const value = FunctionUtils.executeReturn({
+          script: ConvertUtils.decodeHtmlEntity(expr.script, win.document),
+          context,
+          args: groupArgs
+        });
+        ae.replace(expr, String(value));
+      } catch (e) {
+        console.error(`[SWC] Failed to execute ${expr.original}:`, e);
+      }
     }
+    return ae.getUnprocessedTemplate();
   }
 
-  private render(state: string) {
+  refresh(state: string = 'default') {
+    console.log('rrrrrrrrrrrrrrrrr', state);
     this.cleanup();
     const portal = this.parentElement;
     if (!portal) return;
@@ -62,36 +90,17 @@ class SwcAsync extends HTMLTemplateElement {
 
     const t = this.content.querySelector(`template[is="swc-${state}"]`) as HTMLTemplateElement;
     if (t) {
-      const clone = t.content.cloneNode(true) as DocumentFragment;
-      this._nodes = Array.from(clone.childNodes);
-      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;  // 제거: 부모 체인 유지
-        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);
-
-      portal.insertBefore(clone, this.nextSibling);
+      let htmlString = t.innerHTML;
+      const groupArgs = { ...helperSet, $value: this._value, $state: state };
+
+      htmlString = this.replaceExpressions(htmlString, groupArgs, this, this._replaceWrap);
+
+      const temp = this.ownerDocument?.createElement('template') || document.createElement('template');
+      temp.innerHTML = htmlString;
+      const content = temp.content;
+
+      this._nodes = Array.from(content.childNodes);
+      portal.insertBefore(content, this.nextSibling);
     }
   }
 
@@ -100,9 +109,6 @@ class SwcAsync extends HTMLTemplateElement {
     this._nodes = [];
   }
 
-  connectedCallback() {
-    this.refresh();
-  }
   disconnectedCallback() {
     this.cleanup();
   }

package/src/elements/SwcChoose.ts

@@ -1,75 +1,90 @@
 import { changedAttributeHost } from '../decorators/changedAttributeHost';
 import { SwcUtils } from '../utils/Utils';
-import { FunctionUtils } from '@dooboostore/core';
+import { FunctionUtils, ActionExpression } from '@dooboostore/core';
+import { ConvertUtils } from '@dooboostore/core-web';
 import { SwcChooseInterface } from '../types';
+import { attributeHost } from '../decorators';
 
 class SwcChoose extends HTMLTemplateElement implements SwcChooseInterface {
+  @attributeHost('value')
+  _value: any;
+
+  @attributeHost('replace-wrap')
+  _replaceWrap: string | null;
+
   private _nodes: Node[] = [];
-  private _value: any = null;
   private _previousTemplate: HTMLTemplateElement | null = null;
 
   get value(): any {
     return this._value;
   }
+
   set value(nv: any) {
-    this._value = nv;
-    this.render();
+    this.refresh(nv);
   }
 
-  private _executeCloneCallback(attr: string, args: any) {
-    const script = this.getAttribute(attr);
-    if (!script) return;
-    FunctionUtils.execute({ script, context: this, args });
+  @changedAttributeHost('value')
+  private setValue() {
+    this.refresh();
   }
 
-  @changedAttributeHost('value')
-  refresh(valueAttr?: string | null) {
-    valueAttr ??= this.getAttribute('value');
-    if (valueAttr === null) {
-      this.value = null;
-      return;
-    }
+  @changedAttributeHost('replace-wrap')
+  private setReplaceWrap(replaceWrapAttr?: string | null) {
+    this.refresh();
+  }
 
-    // {{ }} 브레이스로 감싸진 값은 스크립트 실행
-    if (valueAttr.startsWith('{{') && valueAttr.endsWith('}}')) {
-      const script = valueAttr.slice(2, -2).trim();
-      const win = this.ownerDocument?.defaultView || window;
-      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;
+  private replaceExpressions(html: string, groupArgs: any, context: any, wrap?: string | null): string {
+    const config = wrap ? { wrapExpression: wrap } : undefined;
+    const ae = new ActionExpression(html, config);
+    const filterOptions = wrap ? { type: 'replace' as const, wrap } : 'replace';
+    const win = this.ownerDocument?.defaultView || window;
+
+    // @ts-ignore
+    for (const expr of ae.getExpressions(filterOptions)) {
+      try {
+        const value = FunctionUtils.executeReturn({
+          script: ConvertUtils.decodeHtmlEntity(expr.script, win.document),
+          context,
+          args: groupArgs
+        });
+        ae.replace(expr, String(value));
+      } catch (e) {
+        console.error(`[SWC] Failed to execute ${expr.original}:`, e);
+      }
     }
+    return ae.getUnprocessedTemplate();
   }
 
-  private render() {
-    // console.log('-------------', this.value);
+  refresh(value = this._value) {
+    const portal = this.parentElement;
+    if (!portal) return;
+
     const win = this.ownerDocument?.defaultView || window;
     const helperSet = SwcUtils.getHelperAndHostSet(win, this);
+    const groupArgs = { ...helperSet, $value: value };
+
     const templates = Array.from(this.content.querySelectorAll('template'));
     let selected: HTMLTemplateElement | null = null;
 
     for (const t of templates) {
       if (t.getAttribute('is') === 'swc-when') {
+        const attrVal = t.getAttribute('value') || '';
         let matches = false;
-        const value = t.getAttribute('value') || '';
 
-        // {{ }} 브레이스로 감싸진 값은 스크립트 실행
-        if (value.startsWith('{{') && value.endsWith('}}')) {
-          const script = value.slice(2, -2).trim();
+        // Use ActionExpression to parse and extract script from value attribute
+        const ae = new ActionExpression(attrVal);
+        const expr = ae.getFirstExpression('replace');
+
+        if (expr) {
+          const decodedScript = ConvertUtils.decodeHtmlEntity(expr.script, win.document);
           const result = FunctionUtils.executeReturn({
-            script,
+            script: decodedScript,
             context: t,
-            args: { ...helperSet, $value: this._value }
+            args: groupArgs
           });
-          // console.log('rrrrrrrrrrrrrr', result);
-          matches = result === true;
+          matches = !!result;
         } else {
-          // 일반 문자열 비교 (기존 방식)
-          matches = String(value) === String(this._value);
+          matches = String(attrVal) === String(value);
         }
 
         if (matches) {
@@ -81,11 +96,12 @@ class SwcChoose extends HTMLTemplateElement implements SwcChooseInterface {
 
     const target = selected || (this.content.querySelector('template[is="swc-otherwise"]') as HTMLTemplateElement);
 
-    // skip-if-same attribute가 있고 이전과 같은 template이면 렌더링 스킵
-    // 최상위 skip-if-same 또는 각 when/otherwise의 skip-if-same 체크
-    const targetHasSkipIfSame = target?.hasAttribute('skip-if-same');
-    const shouldSkip = (this.hasAttribute('skip-if-same') || targetHasSkipIfSame) && this._previousTemplate === target;
-    if (shouldSkip) {
+    const skipValue = target?.getAttribute?.('skip-if-same');
+    const skipValue2 = this._previousTemplate?.getAttribute?.('skip-if-same');
+    const hasSkipIfSame = target?.hasAttribute?.('skip-if-same');
+    const isSame = this._previousTemplate === target;
+    // console.log('---rrrr---', this._previousTemplate, target, hasSkipIfSame, isSame, skipValue, skipValue2);
+    if (hasSkipIfSame && isSame) {
       return;
     }
 
@@ -93,41 +109,15 @@ class SwcChoose extends HTMLTemplateElement implements SwcChooseInterface {
     this._previousTemplate = target;
 
     if (target) {
-      const clone = target.content.cloneNode(true) as DocumentFragment;
-      this._nodes = Array.from(clone.childNodes);
-      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] };
-
-      // 복제된 최상위 요소들은 SwcChoose의 직접 자식이 될 것이므로 __swc_host 설정 안 함
-      this._nodes.forEach((n, nodeIdx) => {
-        // 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 {{ }} 치환 - HTML string 차원에서 동적 치환
-        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, $value: this._value }
-              });
-              n.setAttribute(attr.name, String(result));
-            }
-          });
-        }
-      });
+      let htmlString = target.innerHTML;
+      htmlString = this.replaceExpressions(htmlString, groupArgs, this, this._replaceWrap);
 
-      this._executeCloneCallback('on-clone-nodes', groupArgs);
+      const result = this.ownerDocument?.createElement('template') || document.createElement('template');
+      result.innerHTML = htmlString;
+      const processedFragment = result.content;
 
-      this.parentElement?.insertBefore(clone, this.nextSibling);
-      // if (portal === this.parentElement) {
-      //   portal.insertBefore(clone, this.nextSibling);
-      // } else {
-      //   portal.appendChild(clone);
-      // }
+      this._nodes = Array.from(processedFragment.childNodes);
+      portal.insertBefore(processedFragment, this.nextSibling);
     }
   }
 
@@ -136,9 +126,6 @@ class SwcChoose extends HTMLTemplateElement implements SwcChooseInterface {
     this._nodes = [];
   }
 
-  connectedCallback() {
-    this.refresh();
-  }
   disconnectedCallback() {
     this.cleanup();
   }

package/src/elements/SwcIf.ts

@@ -1,101 +1,79 @@
 import { changedAttributeHost } from '../decorators/changedAttributeHost';
 import { SwcUtils } from '../utils/Utils';
-import { FunctionUtils } from '@dooboostore/core';
+import { FunctionUtils, ActionExpression } from '@dooboostore/core';
+import { ConvertUtils } from '@dooboostore/core-web';
+import { SwcIfInterface } from '../types';
+import { attributeHost } from '../decorators';
+
+class SwcIf extends HTMLTemplateElement implements SwcIfInterface {
+  @attributeHost('value')
+  _value: any;
+
+  @attributeHost('replace-wrap')
+  _replaceWrap: string | null;
 
-class SwcIf extends HTMLTemplateElement {
-  private _value = false;
   private _nodes: Node[] = [];
 
   get value(): boolean {
     return this._value;
   }
+
   set value(nv: any) {
-    this._value = Boolean(nv);
-    this.render();
+    // this._value = nv;
+    this.refresh(nv);
   }
 
-  private _executeCloneCallback(attr: string, args: any) {
-    const script = this.getAttribute(attr);
-    if (!script) return;
-    FunctionUtils.execute({ script, context: this, args });
+  private replaceExpressions(html: string, groupArgs: any, context: any, wrap?: string | null): string {
+    const config = wrap ? { wrapExpression: wrap } : undefined;
+    const ae = new ActionExpression(html, config);
+    const filterOptions = wrap ? { type: 'replace' as const, wrap } : 'replace';
+    const win = this.ownerDocument?.defaultView || window;
+    
+    // @ts-ignore
+    for (const expr of ae.getExpressions(filterOptions)) {
+      try {
+        const value = FunctionUtils.executeReturn({
+          script: ConvertUtils.decodeHtmlEntity(expr.script, win.document),
+          context,
+          args: groupArgs
+        });
+        ae.replace(expr, String(value));
+      } catch (e) {
+        console.error(`[SWC] Failed to execute ${expr.original}:`, e);
+      }
+    }
+    return ae.getUnprocessedTemplate();
   }
 
   @changedAttributeHost('value')
-  private refreshValue(valueAttr?: string | null) {
-    valueAttr ??= this.getAttribute('value');
-    if (valueAttr === null) {
-      this.value = false;
-      return;
-    }
+  private setValue(valueAttr?: string | null) {
+    this.refresh();
+  }
 
-    // {{ }} 브레이스로 감싸진 값은 스크립트 실행
-    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 = Boolean(valueAttr);
-    }
+  @changedAttributeHost('replace-wrap')
+  private setReplaceWrap(replaceWrapAttr?: string | null) {
+    this.refresh();
   }
 
-  private render() {
+  refresh(value = this._value) {
     this.cleanup();
     const portal = this.parentElement;
-    if (!portal) return;
+    if (!portal || !value) return;
 
     const win = this.ownerDocument?.defaultView || window;
     const helperSet = SwcUtils.getHelperAndHostSet(win, this);
 
-    let targetTpl: HTMLTemplateElement | null = null;
-    if (this._value) {
-      targetTpl = this;
-    } else {
-      targetTpl = this.content.querySelector('template[is="swc-default"]') as HTMLTemplateElement;
-    }
+    let htmlString = this.innerHTML;
+    const groupArgs = { ...helperSet, $value: value };
 
-    if (targetTpl) {
-      const clone = targetTpl.content.cloneNode(true) as DocumentFragment;
-      // If it's the host template, remove sub-templates from clone
-      if (targetTpl === this) {
-        clone.querySelectorAll('template[is^="swc-"]').forEach(t => t.remove());
-      }
+    htmlString = this.replaceExpressions(htmlString, groupArgs, this, this._replaceWrap);
 
-      this._nodes = Array.from(clone.childNodes);
-      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;  // 제거: 부모 체인 유지
-        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);
-
-      portal.insertBefore(clone, this.nextSibling);
-    }
+    const result = this.ownerDocument?.createElement('template') || document.createElement('template');
+    result.innerHTML = htmlString;
+    const processedFragment = result.content;
+
+    this._nodes = Array.from(processedFragment.childNodes);
+    portal.insertBefore(processedFragment, this.nextSibling);
   }
 
   private cleanup() {
@@ -103,9 +81,6 @@ class SwcIf extends HTMLTemplateElement {
     this._nodes = [];
   }
 
-  connectedCallback() {
-    this.refreshValue();
-  }
   disconnectedCallback() {
     this.cleanup();
   }