@dooboostore/simple-web-component 1.0.30 → 1.0.32

package/src/elements/SwcChoose.ts

@@ -1,70 +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;
 
-export class SwcChoose extends HTMLTemplateElement {
   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')
-  private 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 result = FunctionUtils.executeReturn({ script, context: this, args: SwcUtils.getHelperAndHostSet(win, this) });
-      this.value = result;
-    } 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() {
+  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) {
@@ -76,11 +96,12 @@ export class SwcChoose extends HTMLTemplateElement {
 
     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;
     }
 
@@ -88,41 +109,15 @@ export class SwcChoose extends HTMLTemplateElement {
     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);
     }
   }
 
@@ -131,9 +126,6 @@ export class SwcChoose extends HTMLTemplateElement {
     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;
 
-export 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 _resolvePortal(): Element | null {
-    const portalScript = this.getAttribute('on-get-portal');
-    if (!portalScript) return this.parentElement;
-
+  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;
-    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;
+    
+    // @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 _executeCloneCallback(attr: string, args: any) {
-    const script = this.getAttribute(attr);
-    if (!script) return;
-    FunctionUtils.execute({ script, context: this, args });
+  @changedAttributeHost('value')
+  private setValue(valueAttr?: string | null) {
+    this.refresh();
   }
 
-  @changedAttributeHost('on-get-value')
-  private refreshValue() {
-    const script = this.getAttribute('on-get-value');
-    if (!script) {
-      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));
-    } else {
-      this.value = res;
-    }
+  @changedAttributeHost('replace-wrap')
+  private setReplaceWrap(replaceWrapAttr?: string | null) {
+    this.refresh();
   }
 
-  private render() {
+  refresh(value = this._value) {
     this.cleanup();
-    const portal = this._resolvePortal();
-    if (!portal) return;
+    const portal = this.parentElement;
+    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;
-    }
-
-    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());
-      }
-
-      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] };
+    let htmlString = this.innerHTML;
+    const groupArgs = { ...helperSet, $value: value };
 
-      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 });
-      });
+    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;
 
-      if (portal === this.parentElement) {
-        portal.insertBefore(clone, this.nextSibling);
-      } else {
-        portal.appendChild(clone);
-      }
-    }
+    this._nodes = Array.from(processedFragment.childNodes);
+    portal.insertBefore(processedFragment, this.nextSibling);
   }
 
   private cleanup() {
@@ -103,9 +81,6 @@ export class SwcIf extends HTMLTemplateElement {
     this._nodes = [];
   }
 
-  connectedCallback() {
-    this.refreshValue();
-  }
   disconnectedCallback() {
     this.cleanup();
   }

package/src/elements/SwcLoop.ts

@@ -1,118 +1,92 @@
 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 SwcLoop extends HTMLTemplateElement {
+  @attributeHost('value')
+  _value: any[];
+
+  @attributeHost('replace-wrap')
+  _replaceWrap: string | null;
 
-export class SwcLoop extends HTMLTemplateElement {
-  private _value: any[] = [];
   private _nodeGroups: Node[][] = [];
 
   get value(): any[] {
     return this._value;
   }
   set value(nv: any[]) {
-    this._value = Array.isArray(nv) ? [...nv] : [];
-    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;
+    // this._value = Array.isArray(nv) ? [...nv] : [];
+    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();
   }
 
-  private _cleanup() {
-    this._nodeGroups.forEach(nodes => nodes.forEach(n => n.parentElement?.removeChild(n)));
-    this._nodeGroups = [];
+  @changedAttributeHost('replace-wrap')
+  private setReplaceWrap() {
+    this.refresh();
   }
 
-  @changedAttributeHost('on-get-value')
-  private refreshValue() {
-    const script = this.getAttribute('on-get-value');
-    if (!script) {
-      this.value = [];
-      return;
-    }
+  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;
-    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 = []));
-    } else {
-      this.value = res;
+    // @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();
   }
 
-  render() {
-    this._cleanup();
-    const portal = this._resolvePortal();
+  refresh(value = this._value) {
+    this.cleanup();
+    if (value?.length<=0) return;
+    const portal = this.parentElement;
     if (!portal) return;
 
     const win = this.ownerDocument?.defaultView || window;
     const helperSet = SwcUtils.getHelperAndHostSet(win, this);
     const fragment = win.document.createDocumentFragment();
 
-    if (this._value.length === 0) {
-      const defaultTpl = this.content.querySelector('template[is="swc-default"]') as HTMLTemplateElement;
-      if (defaultTpl) {
-        const clone = defaultTpl.content.cloneNode(true);
-        const nodes = Array.from(clone.childNodes);
-        this._nodeGroups.push(nodes);
-        fragment.appendChild(clone);
-      }
-    } else {
-      this._value.forEach((item, index) => {
-        const clone = this.content.cloneNode(true) as DocumentFragment;
-        // Filter out sub-templates
-        const subTemplates = clone.querySelectorAll('template[is^="swc-"]');
-        subTemplates.forEach(t => t.remove());
-
-        const nodes = Array.from(clone.childNodes);
-        const elements = nodes.filter(n => n.nodeType === 1) as HTMLElement[];
+    value.forEach((item, index) => {
+      let htmlString = this.innerHTML;
+      const groupArgs = { ...helperSet, $item: item, $index: index, $value: this._value };
 
-        const groupArgs = { ...helperSet, $item: item, $index: index, $value: this._value, $nodes: nodes, $elements: elements, $firstElement: elements[0] };
+      htmlString = this.replaceExpressions(htmlString, groupArgs, this, this._replaceWrap);
 
-        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 });
-        });
+      const temp = this.ownerDocument?.createElement('template') || document.createElement('template');
+      temp.innerHTML = htmlString;
 
-        this._executeCloneCallback('on-clone-nodes', groupArgs);
-        this._nodeGroups.push(nodes);
-        fragment.appendChild(clone);
-      });
-    }
+      const content = temp.content;
+      const nodes = Array.from(content.childNodes);
+      this._nodeGroups.push(nodes);
+      fragment.appendChild(content);
+    });
 
-    if (portal === this.parentElement) {
-      portal.insertBefore(fragment, this.nextSibling);
-    } else {
-      portal.appendChild(fragment);
-    }
+    portal.insertBefore(fragment, this.nextSibling);
   }
 
-  connectedCallback() {
-    this.refreshValue();
+  private cleanup() {
+    this._nodeGroups.forEach(nodes => nodes.forEach(n => n.parentElement?.removeChild(n)));
+    this._nodeGroups = [];
   }
+
   disconnectedCallback() {
-    this._cleanup();
+    this.cleanup();
   }
 }

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 {}