@dooboostore/simple-web-component 1.0.30 → 1.0.32

package/dist/esm/elements/register.js

@@ -7,11 +7,11 @@ var __decorate = function(decorators, target, key, desc) {
 var __metadata = function(k, v) {
   if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
-import { elementDefine } from "../decorators/elementDefine.js";
+import { elementDefine, attributeHost, changedAttributeHost } from "../decorators/index.js";
 import { SwcAppMixin } from "./SwcAppMixin.js";
 import { SwcUtils } from "../utils/Utils.js";
-import { FunctionUtils } from "@dooboostore/core";
-import { changedAttributeHost } from "../decorators/changedAttributeHost.js";
+import { FunctionUtils, ActionExpression } from "@dooboostore/core";
+import { ConvertUtils } from "@dooboostore/core-web";
 const registerAllElements = (w) => {
   const { HTMLElement: _HTMLElement, HTMLTemplateElement: _HTMLTemplateElement, DocumentFragment: _DocumentFragment, Node: _Node, Element: _Element, HTMLAnchorElement: _HTMLAnchorElement, HTMLAreaElement: _HTMLAreaElement, HTMLAudioElement: _HTMLAudioElement, HTMLBaseElement: _HTMLBaseElement, HTMLButtonElement: _HTMLButtonElement, HTMLCanvasElement: _HTMLCanvasElement, HTMLDataElement: _HTMLDataElement, HTMLDataListElement: _HTMLDataListElement, HTMLDetailsElement: _HTMLDetailsElement, HTMLDialogElement: _HTMLDialogElement, HTMLDivElement: _HTMLDivElement, HTMLDListElement: _HTMLDListElement, HTMLEmbedElement: _HTMLEmbedElement, HTMLFieldSetElement: _HTMLFieldSetElement, HTMLFormElement: _HTMLFormElement, HTMLHRElement: _HTMLHRElement, HTMLIFrameElement: _HTMLIFrameElement, HTMLImageElement: _HTMLImageElement, HTMLInputElement: _HTMLInputElement, HTMLLabelElement: _HTMLLabelElement, HTMLLegendElement: _HTMLLegendElement, HTMLLIElement: _HTMLLIElement, HTMLLinkElement: _HTMLLinkElement, HTMLMapElement: _HTMLMapElement, HTMLMetaElement: _HTMLMetaElement, HTMLMeterElement: _HTMLMeterElement, HTMLModElement: _HTMLModElement, HTMLObjectElement: _HTMLObjectElement, HTMLOListElement: _HTMLOListElement, HTMLOptGroupElement: _HTMLOptGroupElement, HTMLOptionElement: _HTMLOptionElement, HTMLOutputElement: _HTMLOutputElement, HTMLParagraphElement: _HTMLParagraphElement, HTMLParamElement: _HTMLParamElement, HTMLPictureElement: _HTMLPictureElement, HTMLPreElement: _HTMLPreElement, HTMLProgressElement: _HTMLProgressElement, HTMLQuoteElement: _HTMLQuoteElement, HTMLScriptElement: _HTMLScriptElement, HTMLSelectElement: _HTMLSelectElement, HTMLSlotElement: _HTMLSlotElement, HTMLSourceElement: _HTMLSourceElement, HTMLSpanElement: _HTMLSpanElement, HTMLStyleElement: _HTMLStyleElement, HTMLTableElement: _HTMLTableElement, HTMLTableSectionElement: _HTMLTableSectionElement, HTMLTableCellElement: _HTMLTableCellElement, HTMLTextAreaElement: _HTMLTextAreaElement, HTMLTimeElement: _HTMLTimeElement, HTMLTitleElement: _HTMLTitleElement, HTMLTableRowElement: _HTMLTableRowElement, HTMLTrackElement: _HTMLTrackElement, HTMLUListElement: _HTMLUListElement, HTMLVideoElement: _HTMLVideoElement, HTMLHeadingElement: _HTMLHeadingElement, HTMLBodyElement: _HTMLBodyElement } = w;
   const HTMLElement = _HTMLElement;
@@ -113,220 +113,173 @@ const registerAllElements = (w) => {
   let SwcIf = class SwcIf extends HTMLTemplateElement {
     constructor() {
       super(...arguments);
-      this._value = false;
       this._nodes = [];
     }
     get value() {
       return this._value;
     }
     set value(nv) {
-      this._value = Boolean(nv);
-      this.render();
+      this.refresh(nv);
     }
-    _resolvePortal() {
-      const portalScript = this.getAttribute("on-get-portal");
-      if (!portalScript)
-        return this.parentElement;
+    replaceExpressions(html, groupArgs, context, wrap) {
+      const config = wrap ? { wrapExpression: wrap } : void 0;
+      const ae = new ActionExpression(html, config);
+      const filterOptions = wrap ? { type: "replace", 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;
-    }
-    _executeCloneCallback(attr, args) {
-      const script = this.getAttribute(attr);
-      if (!script)
-        return;
-      FunctionUtils.execute({ script, context: this, args });
-    }
-    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;
+      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();
+    }
+    setValue(valueAttr) {
+      this.refresh();
     }
-    render() {
+    setReplaceWrap(replaceWrapAttr) {
+      this.refresh();
+    }
+    refresh(value = this._value) {
       this.cleanup();
-      const portal = this._resolvePortal();
-      if (!portal)
+      const portal = this.parentElement;
+      if (!portal || !value)
         return;
       const win = this.ownerDocument?.defaultView || window;
       const helperSet = SwcUtils.getHelperAndHostSet(win, this);
-      let targetTpl = null;
-      if (this._value) {
-        targetTpl = this;
-      } else {
-        targetTpl = this.content.querySelector('template[is="swc-default"]');
-      }
-      if (targetTpl) {
-        const clone = targetTpl.content.cloneNode(true);
-        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);
-        const groupArgs = { ...helperSet, $value: this._value, $nodes: this._nodes, $elements: elements, $firstElement: elements[0] };
-        this._nodes.forEach((node, nodeIdx) => {
-          if (node instanceof HTMLElement)
-            node.__swc_host = this;
-          this._executeCloneCallback("on-clone-node", { ...groupArgs, $node: node, $nodeIndex: nodeIdx, $isElement: node.nodeType === 1 });
-        });
-        this._executeCloneCallback("on-clone-nodes", groupArgs);
-        if (portal === this.parentElement) {
-          portal.insertBefore(clone, this.nextSibling);
-        } else {
-          portal.appendChild(clone);
-        }
-      }
+      let htmlString = this.innerHTML;
+      const groupArgs = { ...helperSet, $value: value };
+      htmlString = this.replaceExpressions(htmlString, groupArgs, this, this._replaceWrap);
+      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);
     }
     cleanup() {
       this._nodes.forEach((n) => n.parentElement?.removeChild(n));
       this._nodes = [];
     }
-    connectedCallback() {
-      this.refreshValue();
-    }
     disconnectedCallback() {
       this.cleanup();
     }
   };
   __decorate([
-    changedAttributeHost("on-get-value"),
+    attributeHost("value"),
+    __metadata("design:type", Object)
+  ], SwcIf.prototype, "_value", void 0);
+  __decorate([
+    attributeHost("replace-wrap"),
+    __metadata("design:type", String)
+  ], SwcIf.prototype, "_replaceWrap", void 0);
+  __decorate([
+    changedAttributeHost("value"),
     __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
+    __metadata("design:paramtypes", [String]),
+    __metadata("design:returntype", void 0)
+  ], SwcIf.prototype, "setValue", null);
+  __decorate([
+    changedAttributeHost("replace-wrap"),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [String]),
     __metadata("design:returntype", void 0)
-  ], SwcIf.prototype, "refreshValue", null);
+  ], SwcIf.prototype, "setReplaceWrap", null);
   SwcIf = __decorate([
     elementDefine("swc-if", { extends: "template", window: w })
   ], SwcIf);
   let SwcLoop = class SwcLoop extends HTMLTemplateElement {
     constructor() {
       super(...arguments);
-      this._value = [];
       this._nodeGroups = [];
     }
     get value() {
       return this._value;
     }
     set value(nv) {
-      this._value = Array.isArray(nv) ? [...nv] : [];
-      this.render();
+      this.refresh(nv);
     }
-    _resolvePortal() {
-      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;
-    }
-    _executeCloneCallback(attr, args) {
-      const script = this.getAttribute(attr);
-      if (!script)
-        return;
-      FunctionUtils.execute({ script, context: this, args });
+    setValue() {
+      this.refresh();
     }
-    _cleanup() {
-      this._nodeGroups.forEach((nodes) => nodes.forEach((n) => n.parentElement?.removeChild(n)));
-      this._nodeGroups = [];
+    setReplaceWrap() {
+      this.refresh();
     }
-    refreshValue() {
-      const script = this.getAttribute("on-get-value");
-      if (!script) {
-        this.value = [];
-        return;
-      }
+    replaceExpressions(html, groupArgs, context, wrap) {
+      const config = wrap ? { wrapExpression: wrap } : void 0;
+      const ae = new ActionExpression(html, config);
+      const filterOptions = wrap ? { type: "replace", 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;
+      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"]');
-        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);
-          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);
-          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.__swc_host = this;
-            this._executeCloneCallback("on-clone-node", { ...groupArgs, $node: node, $nodeIndex: nodeIdx, $isElement: node.nodeType === 1 });
-          });
-          this._executeCloneCallback("on-clone-nodes", groupArgs);
-          this._nodeGroups.push(nodes);
-          fragment.appendChild(clone);
-        });
-      }
-      if (portal === this.parentElement) {
-        portal.insertBefore(fragment, this.nextSibling);
-      } else {
-        portal.appendChild(fragment);
-      }
+      value.forEach((item, index) => {
+        let htmlString = this.innerHTML;
+        const groupArgs = { ...helperSet, $item: item, $index: index, $value: this._value };
+        htmlString = this.replaceExpressions(htmlString, groupArgs, this, this._replaceWrap);
+        const temp = this.ownerDocument?.createElement("template") || document.createElement("template");
+        temp.innerHTML = htmlString;
+        const content = temp.content;
+        const nodes = Array.from(content.childNodes);
+        this._nodeGroups.push(nodes);
+        fragment.appendChild(content);
+      });
+      portal.insertBefore(fragment, this.nextSibling);
     }
-    connectedCallback() {
-      this.refreshValue();
+    cleanup() {
+      this._nodeGroups.forEach((nodes) => nodes.forEach((n) => n.parentElement?.removeChild(n)));
+      this._nodeGroups = [];
     }
     disconnectedCallback() {
-      this._cleanup();
+      this.cleanup();
     }
   };
   __decorate([
-    changedAttributeHost("on-get-value"),
+    attributeHost("value"),
+    __metadata("design:type", Array)
+  ], SwcLoop.prototype, "_value", void 0);
+  __decorate([
+    attributeHost("replace-wrap"),
+    __metadata("design:type", String)
+  ], SwcLoop.prototype, "_replaceWrap", void 0);
+  __decorate([
+    changedAttributeHost("value"),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+  ], SwcLoop.prototype, "setValue", null);
+  __decorate([
+    changedAttributeHost("replace-wrap"),
     __metadata("design:type", Function),
     __metadata("design:paramtypes", []),
     __metadata("design:returntype", void 0)
-  ], SwcLoop.prototype, "refreshValue", null);
+  ], SwcLoop.prototype, "setReplaceWrap", null);
   SwcLoop = __decorate([
     elementDefine("swc-loop", { extends: "template", window: w })
   ], SwcLoop);
@@ -334,56 +287,64 @@ const registerAllElements = (w) => {
     constructor() {
       super(...arguments);
       this._nodes = [];
-      this._value = null;
       this._previousTemplate = null;
     }
     get value() {
       return this._value;
     }
     set value(nv) {
-      this._value = nv;
-      this.render();
+      this.refresh(nv);
     }
-    _executeCloneCallback(attr, args) {
-      const script = this.getAttribute(attr);
-      if (!script)
-        return;
-      FunctionUtils.execute({ script, context: this, args });
+    setValue() {
+      this.refresh();
     }
-    refresh(valueAttr) {
-      valueAttr ?? (valueAttr = this.getAttribute("value"));
-      if (valueAttr === null) {
-        this.value = null;
-        return;
-      }
-      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;
+    setReplaceWrap(replaceWrapAttr) {
+      this.refresh();
+    }
+    replaceExpressions(html, groupArgs, context, wrap) {
+      const config = wrap ? { wrapExpression: wrap } : void 0;
+      const ae = new ActionExpression(html, config);
+      const filterOptions = wrap ? { type: "replace", wrap } : "replace";
+      const win = this.ownerDocument?.defaultView || window;
+      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() {
+    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 = 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();
+          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
             });
-            matches = result === true;
+            matches = !!result;
           } else {
-            matches = String(value) === String(this._value);
+            matches = String(attrVal) === String(value);
           }
           if (matches) {
             selected = t;
@@ -392,56 +353,53 @@ const registerAllElements = (w) => {
         }
       }
       const target = selected || this.content.querySelector('template[is="swc-otherwise"]');
-      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;
+      if (hasSkipIfSame && isSame) {
         return;
       }
       this.cleanup();
       this._previousTemplate = target;
       if (target) {
-        const clone = target.content.cloneNode(true);
-        this._nodes = Array.from(clone.childNodes);
-        const elements = this._nodes.filter((n) => n.nodeType === 1);
-        const groupArgs = { ...helperSet, $value: this._value, $nodes: this._nodes, $elements: elements, $firstElement: elements[0] };
-        this._nodes.forEach((n, nodeIdx) => {
-          this._executeCloneCallback("on-clone-node", { ...groupArgs, $node: n, $nodeIndex: nodeIdx, $isElement: n.nodeType === 1 });
-          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));
-              }
-            });
-          }
-        });
-        this._executeCloneCallback("on-clone-nodes", groupArgs);
-        this.parentElement?.insertBefore(clone, this.nextSibling);
+        let htmlString = target.innerHTML;
+        htmlString = this.replaceExpressions(htmlString, groupArgs, this, this._replaceWrap);
+        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);
       }
     }
     cleanup() {
       this._nodes.forEach((n) => n.parentElement?.removeChild(n));
       this._nodes = [];
     }
-    connectedCallback() {
-      this.refresh();
-    }
     disconnectedCallback() {
       this.cleanup();
     }
   };
+  __decorate([
+    attributeHost("value"),
+    __metadata("design:type", Object)
+  ], SwcChoose.prototype, "_value", void 0);
+  __decorate([
+    attributeHost("replace-wrap"),
+    __metadata("design:type", String)
+  ], SwcChoose.prototype, "_replaceWrap", void 0);
   __decorate([
     changedAttributeHost("value"),
     __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+  ], SwcChoose.prototype, "setValue", null);
+  __decorate([
+    changedAttributeHost("replace-wrap"),
+    __metadata("design:type", Function),
     __metadata("design:paramtypes", [String]),
     __metadata("design:returntype", void 0)
-  ], SwcChoose.prototype, "refresh", null);
+  ], SwcChoose.prototype, "setReplaceWrap", null);
   SwcChoose = __decorate([
     elementDefine("swc-choose", { extends: "template", window: w })
   ], SwcChoose);
@@ -449,93 +407,106 @@ const registerAllElements = (w) => {
     constructor() {
       super(...arguments);
       this._nodes = [];
-      this._value = null;
     }
-    _resolvePortal() {
-      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;
-    }
-    _executeCloneCallback(attr, args) {
-      const script = this.getAttribute(attr);
-      if (!script)
-        return;
-      FunctionUtils.execute({ script, context: this, args });
+    get value() {
+      return this._value;
+    }
+    set value(nv) {
+      this.executeAsync(nv);
+    }
+    setValue(valueAttr) {
+      this.executeAsync(this._value);
     }
-    refresh() {
-      const script = this.getAttribute("on-get-value");
-      if (!script) {
-        this.render("default");
+    setReplaceWrap() {
+      this.executeAsync(this._value);
+    }
+    executeAsync(result = this._value) {
+      if (result === void 0 || result === null) {
+        this.refresh("default");
         return;
       }
-      const win = this.ownerDocument?.defaultView || window;
-      const result = FunctionUtils.executeReturn({ script, context: this, args: SwcUtils.getHelperAndHostSet(win, this) });
       if (result instanceof Promise) {
-        this.render("loading");
+        this.refresh("loading");
         result.then((v) => {
-          this._value = v;
-          this.render("success");
-        }).catch((e) => this.render("error"));
+          this.resultValue = v;
+          this.refresh("success");
+        }).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");
+      }
+    }
+    replaceExpressions(html, groupArgs, context, wrap) {
+      const config = wrap ? { wrapExpression: wrap } : void 0;
+      const ae = new ActionExpression(html, config);
+      const filterOptions = wrap ? { type: "replace", wrap } : "replace";
+      const win = this.ownerDocument?.defaultView || window;
+      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(state) {
+    refresh(state = "default") {
+      console.log("rrrrrrrrrrrrrrrrr", state);
       this.cleanup();
-      const portal = this._resolvePortal();
+      const portal = this.parentElement;
       if (!portal)
         return;
       const win = this.ownerDocument?.defaultView || window;
       const helperSet = SwcUtils.getHelperAndHostSet(win, this);
       const t = this.content.querySelector(`template[is="swc-${state}"]`);
       if (t) {
-        const clone = t.content.cloneNode(true);
-        this._nodes = Array.from(clone.childNodes);
-        const elements = this._nodes.filter((n) => n.nodeType === 1);
-        const groupArgs = { ...helperSet, $value: this._value, $nodes: this._nodes, $elements: elements, $firstElement: elements[0], $state: state };
-        this._nodes.forEach((n, nodeIdx) => {
-          if (n instanceof HTMLElement)
-            n.__swc_host = this;
-          this._executeCloneCallback("on-clone-node", { ...groupArgs, $node: n, $nodeIndex: nodeIdx, $isElement: n.nodeType === 1 });
-        });
-        this._executeCloneCallback("on-clone-nodes", groupArgs);
-        if (portal === this.parentElement) {
-          portal.insertBefore(clone, this.nextSibling);
-        } else {
-          portal.appendChild(clone);
-        }
+        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);
       }
     }
     cleanup() {
       this._nodes.forEach((n) => n.parentElement?.removeChild(n));
       this._nodes = [];
     }
-    connectedCallback() {
-      console.log("[SwcAsync] connectedCallback called");
-      this.refresh();
-    }
     disconnectedCallback() {
       this.cleanup();
     }
   };
   __decorate([
-    changedAttributeHost("on-get-value"),
+    attributeHost("value"),
+    __metadata("design:type", Object)
+  ], SwcAsync.prototype, "_value", void 0);
+  __decorate([
+    attributeHost("replace-wrap"),
+    __metadata("design:type", String)
+  ], SwcAsync.prototype, "_replaceWrap", void 0);
+  __decorate([
+    changedAttributeHost("value"),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [String]),
+    __metadata("design:returntype", void 0)
+  ], SwcAsync.prototype, "setValue", null);
+  __decorate([
+    changedAttributeHost("replace-wrap"),
     __metadata("design:type", Function),
     __metadata("design:paramtypes", []),
     __metadata("design:returntype", void 0)
-  ], SwcAsync.prototype, "refresh", null);
+  ], SwcAsync.prototype, "setReplaceWrap", null);
   SwcAsync = __decorate([
     elementDefine("swc-async", { extends: "template", window: w })
   ], SwcAsync);