@dooboostore/simple-web-component 1.0.30 → 1.0.32

package/dist/esm/elements/SwcIf.js

@@ -9,112 +9,87 @@ var __metadata = function(k, v) {
 };
 import { changedAttributeHost } from "../decorators/changedAttributeHost.js";
 import { SwcUtils } from "../utils/Utils.js";
-import { FunctionUtils } from "@dooboostore/core";
+import { FunctionUtils, ActionExpression } from "@dooboostore/core";
+import { ConvertUtils } from "@dooboostore/core-web";
+import { attributeHost } from "../decorators/index.js";
 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;
+    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();
   }
-  _executeCloneCallback(attr, args) {
-    const script = this.getAttribute(attr);
-    if (!script)
-      return;
-    FunctionUtils.execute({ script, context: this, args });
+  setValue(valueAttr) {
+    this.refresh();
   }
-  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;
-    }
+  setReplaceWrap(replaceWrapAttr) {
+    this.refresh();
   }
-  render() {
+  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, "refreshValue", null);
-export {
-  SwcIf
-};
+], SwcIf.prototype, "setValue", null);
+__decorate([
+  changedAttributeHost("replace-wrap"),
+  __metadata("design:type", Function),
+  __metadata("design:paramtypes", [String]),
+  __metadata("design:returntype", void 0)
+], SwcIf.prototype, "setReplaceWrap", null);
 //# sourceMappingURL=SwcIf.js.map

package/dist/esm/elements/SwcIf.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/elements/SwcIf.ts"],
-  "sourcesContent": ["import { changedAttributeHost } from '../decorators/changedAttributeHost';\nimport { SwcUtils } from '../utils/Utils';\nimport { FunctionUtils } from '@dooboostore/core';\n\nexport class SwcIf extends HTMLTemplateElement {\n  private _value = false;\n  private _nodes: Node[] = [];\n\n  get value(): boolean {\n    return this._value;\n  }\n  set value(nv: any) {\n    this._value = Boolean(nv);\n    this.render();\n  }\n\n  private _resolvePortal(): Element | null {\n    const portalScript = this.getAttribute('on-get-portal');\n    if (!portalScript) return this.parentElement;\n\n    const win = this.ownerDocument?.defaultView || window;\n    const res = FunctionUtils.executeReturn({\n      script: portalScript,\n      context: this,\n      args: SwcUtils.getHelperAndHostSet(win, this)\n    });\n\n    if (res instanceof HTMLElement) return res;\n    if (typeof res === 'string') return win.document.querySelector(res);\n    return this.parentElement;\n  }\n\n  private _executeCloneCallback(attr: string, args: any) {\n    const script = this.getAttribute(attr);\n    if (!script) return;\n    FunctionUtils.execute({ script, context: this, args });\n  }\n\n  @changedAttributeHost('on-get-value')\n  private refreshValue() {\n    const script = this.getAttribute('on-get-value');\n    if (!script) {\n      this.value = false;\n      return;\n    }\n    const win = this.ownerDocument?.defaultView || window;\n    const res = FunctionUtils.executeReturn({\n      script,\n      context: this,\n      args: SwcUtils.getHelperAndHostSet(win, this)\n    });\n\n    if (res instanceof Promise) {\n      res.then(v => (this.value = v)).catch(() => (this.value = false));\n    } else {\n      this.value = res;\n    }\n  }\n\n  private render() {\n    this.cleanup();\n    const portal = this._resolvePortal();\n    if (!portal) return;\n\n    const win = this.ownerDocument?.defaultView || window;\n    const helperSet = SwcUtils.getHelperAndHostSet(win, this);\n\n    let targetTpl: HTMLTemplateElement | null = null;\n    if (this._value) {\n      targetTpl = this;\n    } else {\n      targetTpl = this.content.querySelector('template[is=\"swc-default\"]') as HTMLTemplateElement;\n    }\n\n    if (targetTpl) {\n      const clone = targetTpl.content.cloneNode(true) as DocumentFragment;\n      // If it's the host template, remove sub-templates from clone\n      if (targetTpl === this) {\n        clone.querySelectorAll('template[is^=\"swc-\"]').forEach(t => t.remove());\n      }\n\n      this._nodes = Array.from(clone.childNodes);\n      const elements = this._nodes.filter(n => n.nodeType === 1) as HTMLElement[];\n      const groupArgs = { ...helperSet, $value: this._value, $nodes: this._nodes, $elements: elements, $firstElement: elements[0] };\n\n      this._nodes.forEach((node, nodeIdx) => {\n        if (node instanceof HTMLElement) (node as any).__swc_host = this;\n        this._executeCloneCallback('on-clone-node', { ...groupArgs, $node: node, $nodeIndex: nodeIdx, $isElement: node.nodeType === 1 });\n      });\n\n      this._executeCloneCallback('on-clone-nodes', groupArgs);\n\n      if (portal === this.parentElement) {\n        portal.insertBefore(clone, this.nextSibling);\n      } else {\n        portal.appendChild(clone);\n      }\n    }\n  }\n\n  private cleanup() {\n    this._nodes.forEach(n => n.parentElement?.removeChild(n));\n    this._nodes = [];\n  }\n\n  connectedCallback() {\n    this.refreshValue();\n  }\n  disconnectedCallback() {\n    this.cleanup();\n  }\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { changedAttributeHost } from '../decorators/changedAttributeHost';\nimport { SwcUtils } from '../utils/Utils';\nimport { FunctionUtils, ActionExpression } from '@dooboostore/core';\nimport { ConvertUtils } from '@dooboostore/core-web';\nimport { SwcIfInterface } from '../types';\nimport { attributeHost } from '../decorators';\n\nclass SwcIf extends HTMLTemplateElement implements SwcIfInterface {\n  @attributeHost('value')\n  _value: any;\n\n  @attributeHost('replace-wrap')\n  _replaceWrap: string | null;\n\n  private _nodes: Node[] = [];\n\n  get value(): boolean {\n    return this._value;\n  }\n\n  set value(nv: any) {\n    // this._value = nv;\n    this.refresh(nv);\n  }\n\n  private replaceExpressions(html: string, groupArgs: any, context: any, wrap?: string | null): string {\n    const config = wrap ? { wrapExpression: wrap } : undefined;\n    const ae = new ActionExpression(html, config);\n    const filterOptions = wrap ? { type: 'replace' as const, wrap } : 'replace';\n    const win = this.ownerDocument?.defaultView || window;\n    \n    // @ts-ignore\n    for (const expr of ae.getExpressions(filterOptions)) {\n      try {\n        const value = FunctionUtils.executeReturn({\n          script: ConvertUtils.decodeHtmlEntity(expr.script, win.document),\n          context,\n          args: groupArgs\n        });\n        ae.replace(expr, String(value));\n      } catch (e) {\n        console.error(`[SWC] Failed to execute ${expr.original}:`, e);\n      }\n    }\n    return ae.getUnprocessedTemplate();\n  }\n\n  @changedAttributeHost('value')\n  private setValue(valueAttr?: string | null) {\n    this.refresh();\n  }\n\n  @changedAttributeHost('replace-wrap')\n  private setReplaceWrap(replaceWrapAttr?: string | null) {\n    this.refresh();\n  }\n\n  refresh(value = this._value) {\n    this.cleanup();\n    const portal = this.parentElement;\n    if (!portal || !value) return;\n\n    const win = this.ownerDocument?.defaultView || window;\n    const helperSet = SwcUtils.getHelperAndHostSet(win, this);\n\n    let htmlString = this.innerHTML;\n    const groupArgs = { ...helperSet, $value: value };\n\n    htmlString = this.replaceExpressions(htmlString, groupArgs, this, this._replaceWrap);\n\n    const result = this.ownerDocument?.createElement('template') || document.createElement('template');\n    result.innerHTML = htmlString;\n    const processedFragment = result.content;\n\n    this._nodes = Array.from(processedFragment.childNodes);\n    portal.insertBefore(processedFragment, this.nextSibling);\n  }\n\n  private cleanup() {\n    this._nodes.forEach(n => n.parentElement?.removeChild(n));\n    this._nodes = [];\n  }\n\n  disconnectedCallback() {\n    this.cleanup();\n  }\n}\n"],
+  "mappings": ";;;;;;;;;AAAA,SAAS,4BAA4B;AACrC,SAAS,gBAAgB;AACzB,SAAS,eAAe,wBAAwB;AAChD,SAAS,oBAAoB;AAE7B,SAAS,qBAAqB;AAE9B,MAAM,cAAc,oBAAmB;EAAvC,cAAA;;AAOU,SAAA,SAAiB,CAAA;EAwE3B;EAtEE,IAAI,QAAK;AACP,WAAO,KAAK;EACd;EAEA,IAAI,MAAM,IAAO;AAEf,SAAK,QAAQ,EAAE;EACjB;EAEQ,mBAAmB,MAAc,WAAgB,SAAc,MAAoB;AACzF,UAAM,SAAS,OAAO,EAAE,gBAAgB,KAAI,IAAK;AACjD,UAAM,KAAK,IAAI,iBAAiB,MAAM,MAAM;AAC5C,UAAM,gBAAgB,OAAO,EAAE,MAAM,WAAoB,KAAI,IAAK;AAClE,UAAM,MAAM,KAAK,eAAe,eAAe;AAG/C,eAAW,QAAQ,GAAG,eAAe,aAAa,GAAG;AACnD,UAAI;AACF,cAAM,QAAQ,cAAc,cAAc;UACxC,QAAQ,aAAa,iBAAiB,KAAK,QAAQ,IAAI,QAAQ;UAC/D;UACA,MAAM;SACP;AACD,WAAG,QAAQ,MAAM,OAAO,KAAK,CAAC;MAChC,SAAS,GAAG;AACV,gBAAQ,MAAM,2BAA2B,KAAK,QAAQ,KAAK,CAAC;MAC9D;IACF;AACA,WAAO,GAAG,uBAAsB;EAClC;EAGQ,SAAS,WAAyB;AACxC,SAAK,QAAO;EACd;EAGQ,eAAe,iBAA+B;AACpD,SAAK,QAAO;EACd;EAEA,QAAQ,QAAQ,KAAK,QAAM;AACzB,SAAK,QAAO;AACZ,UAAM,SAAS,KAAK;AACpB,QAAI,CAAC,UAAU,CAAC;AAAO;AAEvB,UAAM,MAAM,KAAK,eAAe,eAAe;AAC/C,UAAM,YAAY,SAAS,oBAAoB,KAAK,IAAI;AAExD,QAAI,aAAa,KAAK;AACtB,UAAM,YAAY,EAAE,GAAG,WAAW,QAAQ,MAAK;AAE/C,iBAAa,KAAK,mBAAmB,YAAY,WAAW,MAAM,KAAK,YAAY;AAEnF,UAAM,SAAS,KAAK,eAAe,cAAc,UAAU,KAAK,SAAS,cAAc,UAAU;AACjG,WAAO,YAAY;AACnB,UAAM,oBAAoB,OAAO;AAEjC,SAAK,SAAS,MAAM,KAAK,kBAAkB,UAAU;AACrD,WAAO,aAAa,mBAAmB,KAAK,WAAW;EACzD;EAEQ,UAAO;AACb,SAAK,OAAO,QAAQ,OAAK,EAAE,eAAe,YAAY,CAAC,CAAC;AACxD,SAAK,SAAS,CAAA;EAChB;EAEA,uBAAoB;AAClB,SAAK,QAAO;EACd;;AA5EA,WAAA;EADC,cAAc,OAAO;;;AAItB,WAAA;EADC,cAAc,cAAc;;;AAqCrB,WAAA;EADP,qBAAqB,OAAO;;;;;AAMrB,WAAA;EADP,qBAAqB,cAAc;;;;;",
   "names": []
 }

package/dist/esm/elements/SwcLoop.js

@@ -9,118 +9,94 @@ var __metadata = function(k, v) {
 };
 import { changedAttributeHost } from "../decorators/changedAttributeHost.js";
 import { SwcUtils } from "../utils/Utils.js";
-import { FunctionUtils } from "@dooboostore/core";
+import { FunctionUtils, ActionExpression } from "@dooboostore/core";
+import { ConvertUtils } from "@dooboostore/core-web";
+import { attributeHost } from "../decorators/index.js";
 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;
+  setValue() {
+    this.refresh();
   }
-  _executeCloneCallback(attr, args) {
-    const script = this.getAttribute(attr);
-    if (!script)
-      return;
-    FunctionUtils.execute({ script, context: this, args });
+  setReplaceWrap() {
+    this.refresh();
   }
-  _cleanup() {
-    this._nodeGroups.forEach((nodes) => nodes.forEach((n) => n.parentElement?.removeChild(n)));
-    this._nodeGroups = [];
-  }
-  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, "refreshValue", null);
-export {
-  SwcLoop
-};
+], SwcLoop.prototype, "setValue", null);
+__decorate([
+  changedAttributeHost("replace-wrap"),
+  __metadata("design:type", Function),
+  __metadata("design:paramtypes", []),
+  __metadata("design:returntype", void 0)
+], SwcLoop.prototype, "setReplaceWrap", null);
 //# sourceMappingURL=SwcLoop.js.map

package/dist/esm/elements/SwcLoop.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/elements/SwcLoop.ts"],
-  "sourcesContent": ["import { changedAttributeHost } from '../decorators/changedAttributeHost';\nimport { SwcUtils } from '../utils/Utils';\nimport { FunctionUtils } from '@dooboostore/core';\n\nexport class SwcLoop extends HTMLTemplateElement {\n  private _value: any[] = [];\n  private _nodeGroups: Node[][] = [];\n\n  get value(): any[] {\n    return this._value;\n  }\n  set value(nv: any[]) {\n    this._value = Array.isArray(nv) ? [...nv] : [];\n    this.render();\n  }\n\n  private _resolvePortal(): Element | null {\n    const portalScript = this.getAttribute('on-get-portal');\n    if (!portalScript) return this.parentElement;\n\n    const win = this.ownerDocument?.defaultView || window;\n    const res = FunctionUtils.executeReturn({\n      script: portalScript,\n      context: this,\n      args: SwcUtils.getHelperAndHostSet(win, this)\n    });\n\n    if (res instanceof HTMLElement) return res;\n    if (typeof res === 'string') return win.document.querySelector(res);\n    return this.parentElement;\n  }\n\n  private _executeCloneCallback(attr: string, args: any) {\n    const script = this.getAttribute(attr);\n    if (!script) return;\n    FunctionUtils.execute({ script, context: this, args });\n  }\n\n  private _cleanup() {\n    this._nodeGroups.forEach(nodes => nodes.forEach(n => n.parentElement?.removeChild(n)));\n    this._nodeGroups = [];\n  }\n\n  @changedAttributeHost('on-get-value')\n  private refreshValue() {\n    const script = this.getAttribute('on-get-value');\n    if (!script) {\n      this.value = [];\n      return;\n    }\n    const win = this.ownerDocument?.defaultView || window;\n    const res = FunctionUtils.executeReturn({\n      script,\n      context: this,\n      args: SwcUtils.getHelperAndHostSet(win, this)\n    });\n\n    if (res instanceof Promise) {\n      res.then(v => (this.value = v)).catch(() => (this.value = []));\n    } else {\n      this.value = res;\n    }\n  }\n\n  render() {\n    this._cleanup();\n    const portal = this._resolvePortal();\n    if (!portal) return;\n\n    const win = this.ownerDocument?.defaultView || window;\n    const helperSet = SwcUtils.getHelperAndHostSet(win, this);\n    const fragment = win.document.createDocumentFragment();\n\n    if (this._value.length === 0) {\n      const defaultTpl = this.content.querySelector('template[is=\"swc-default\"]') as HTMLTemplateElement;\n      if (defaultTpl) {\n        const clone = defaultTpl.content.cloneNode(true);\n        const nodes = Array.from(clone.childNodes);\n        this._nodeGroups.push(nodes);\n        fragment.appendChild(clone);\n      }\n    } else {\n      this._value.forEach((item, index) => {\n        const clone = this.content.cloneNode(true) as DocumentFragment;\n        // Filter out sub-templates\n        const subTemplates = clone.querySelectorAll('template[is^=\"swc-\"]');\n        subTemplates.forEach(t => t.remove());\n\n        const nodes = Array.from(clone.childNodes);\n        const elements = nodes.filter(n => n.nodeType === 1) as HTMLElement[];\n\n        const groupArgs = { ...helperSet, $item: item, $index: index, $value: this._value, $nodes: nodes, $elements: elements, $firstElement: elements[0] };\n\n        nodes.forEach((node, nodeIdx) => {\n          if (node instanceof HTMLElement) (node as any).__swc_host = this;\n          this._executeCloneCallback('on-clone-node', { ...groupArgs, $node: node, $nodeIndex: nodeIdx, $isElement: node.nodeType === 1 });\n        });\n\n        this._executeCloneCallback('on-clone-nodes', groupArgs);\n        this._nodeGroups.push(nodes);\n        fragment.appendChild(clone);\n      });\n    }\n\n    if (portal === this.parentElement) {\n      portal.insertBefore(fragment, this.nextSibling);\n    } else {\n      portal.appendChild(fragment);\n    }\n  }\n\n  connectedCallback() {\n    this.refreshValue();\n  }\n  disconnectedCallback() {\n    this._cleanup();\n  }\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { changedAttributeHost } from '../decorators/changedAttributeHost';\nimport { SwcUtils } from '../utils/Utils';\nimport { FunctionUtils, ActionExpression } from '@dooboostore/core';\nimport { ConvertUtils } from '@dooboostore/core-web';\nimport { attributeHost } from '../decorators';\n\nclass SwcLoop extends HTMLTemplateElement {\n  @attributeHost('value')\n  _value: any[];\n\n  @attributeHost('replace-wrap')\n  _replaceWrap: string | null;\n\n  private _nodeGroups: Node[][] = [];\n\n  get value(): any[] {\n    return this._value;\n  }\n  set value(nv: any[]) {\n    // this._value = Array.isArray(nv) ? [...nv] : [];\n    this.refresh(nv);\n  }\n\n  @changedAttributeHost('value')\n  private setValue() {\n    this.refresh();\n  }\n\n  @changedAttributeHost('replace-wrap')\n  private setReplaceWrap() {\n    this.refresh();\n  }\n\n  private replaceExpressions(html: string, groupArgs: any, context: any, wrap?: string | null): string {\n    const config = wrap ? { wrapExpression: wrap } : undefined;\n    const ae = new ActionExpression(html, config);\n    const filterOptions = wrap ? { type: 'replace' as const, wrap } : 'replace';\n    const win = this.ownerDocument?.defaultView || window;\n\n    // @ts-ignore\n    for (const expr of ae.getExpressions(filterOptions)) {\n      try {\n        const value = FunctionUtils.executeReturn({\n          script: ConvertUtils.decodeHtmlEntity(expr.script, win.document),\n          context,\n          args: groupArgs\n        });\n        ae.replace(expr, String(value));\n      } catch (e) {\n        console.error(`[SWC] Failed to execute ${expr.original}:`, e);\n      }\n    }\n    return ae.getUnprocessedTemplate();\n  }\n\n  refresh(value = this._value) {\n    this.cleanup();\n    if (value?.length<=0) return;\n    const portal = this.parentElement;\n    if (!portal) return;\n\n    const win = this.ownerDocument?.defaultView || window;\n    const helperSet = SwcUtils.getHelperAndHostSet(win, this);\n    const fragment = win.document.createDocumentFragment();\n\n    value.forEach((item, index) => {\n      let htmlString = this.innerHTML;\n      const groupArgs = { ...helperSet, $item: item, $index: index, $value: this._value };\n\n      htmlString = this.replaceExpressions(htmlString, groupArgs, this, this._replaceWrap);\n\n      const temp = this.ownerDocument?.createElement('template') || document.createElement('template');\n      temp.innerHTML = htmlString;\n\n      const content = temp.content;\n      const nodes = Array.from(content.childNodes);\n      this._nodeGroups.push(nodes);\n      fragment.appendChild(content);\n    });\n\n    portal.insertBefore(fragment, this.nextSibling);\n  }\n\n  private cleanup() {\n    this._nodeGroups.forEach(nodes => nodes.forEach(n => n.parentElement?.removeChild(n)));\n    this._nodeGroups = [];\n  }\n\n  disconnectedCallback() {\n    this.cleanup();\n  }\n}\n"],
+  "mappings": ";;;;;;;;;AAAA,SAAS,4BAA4B;AACrC,SAAS,gBAAgB;AACzB,SAAS,eAAe,wBAAwB;AAChD,SAAS,oBAAoB;AAC7B,SAAS,qBAAqB;AAE9B,MAAM,gBAAgB,oBAAmB;EAAzC,cAAA;;AAOU,SAAA,cAAwB,CAAA;EA8ElC;EA5EE,IAAI,QAAK;AACP,WAAO,KAAK;EACd;EACA,IAAI,MAAM,IAAS;AAEjB,SAAK,QAAQ,EAAE;EACjB;EAGQ,WAAQ;AACd,SAAK,QAAO;EACd;EAGQ,iBAAc;AACpB,SAAK,QAAO;EACd;EAEQ,mBAAmB,MAAc,WAAgB,SAAc,MAAoB;AACzF,UAAM,SAAS,OAAO,EAAE,gBAAgB,KAAI,IAAK;AACjD,UAAM,KAAK,IAAI,iBAAiB,MAAM,MAAM;AAC5C,UAAM,gBAAgB,OAAO,EAAE,MAAM,WAAoB,KAAI,IAAK;AAClE,UAAM,MAAM,KAAK,eAAe,eAAe;AAG/C,eAAW,QAAQ,GAAG,eAAe,aAAa,GAAG;AACnD,UAAI;AACF,cAAM,QAAQ,cAAc,cAAc;UACxC,QAAQ,aAAa,iBAAiB,KAAK,QAAQ,IAAI,QAAQ;UAC/D;UACA,MAAM;SACP;AACD,WAAG,QAAQ,MAAM,OAAO,KAAK,CAAC;MAChC,SAAS,GAAG;AACV,gBAAQ,MAAM,2BAA2B,KAAK,QAAQ,KAAK,CAAC;MAC9D;IACF;AACA,WAAO,GAAG,uBAAsB;EAClC;EAEA,QAAQ,QAAQ,KAAK,QAAM;AACzB,SAAK,QAAO;AACZ,QAAI,OAAO,UAAQ;AAAG;AACtB,UAAM,SAAS,KAAK;AACpB,QAAI,CAAC;AAAQ;AAEb,UAAM,MAAM,KAAK,eAAe,eAAe;AAC/C,UAAM,YAAY,SAAS,oBAAoB,KAAK,IAAI;AACxD,UAAM,WAAW,IAAI,SAAS,uBAAsB;AAEpD,UAAM,QAAQ,CAAC,MAAM,UAAS;AAC5B,UAAI,aAAa,KAAK;AACtB,YAAM,YAAY,EAAE,GAAG,WAAW,OAAO,MAAM,QAAQ,OAAO,QAAQ,KAAK,OAAM;AAEjF,mBAAa,KAAK,mBAAmB,YAAY,WAAW,MAAM,KAAK,YAAY;AAEnF,YAAM,OAAO,KAAK,eAAe,cAAc,UAAU,KAAK,SAAS,cAAc,UAAU;AAC/F,WAAK,YAAY;AAEjB,YAAM,UAAU,KAAK;AACrB,YAAM,QAAQ,MAAM,KAAK,QAAQ,UAAU;AAC3C,WAAK,YAAY,KAAK,KAAK;AAC3B,eAAS,YAAY,OAAO;IAC9B,CAAC;AAED,WAAO,aAAa,UAAU,KAAK,WAAW;EAChD;EAEQ,UAAO;AACb,SAAK,YAAY,QAAQ,WAAS,MAAM,QAAQ,OAAK,EAAE,eAAe,YAAY,CAAC,CAAC,CAAC;AACrF,SAAK,cAAc,CAAA;EACrB;EAEA,uBAAoB;AAClB,SAAK,QAAO;EACd;;AAlFA,WAAA;EADC,cAAc,OAAO;;;AAItB,WAAA;EADC,cAAc,cAAc;;;AAcrB,WAAA;EADP,qBAAqB,OAAO;;;;;AAMrB,WAAA;EADP,qBAAqB,cAAc;;;;;",
   "names": []
 }

package/dist/esm/elements/SwcSubTemplates.js

@@ -10,12 +10,4 @@ class SwcOtherwise extends HTMLTemplateElement {
 }
 class SwcDefault extends HTMLTemplateElement {
 }
-export {
-  SwcDefault,
-  SwcError,
-  SwcLoading,
-  SwcOtherwise,
-  SwcSuccess,
-  SwcWhen
-};
 //# sourceMappingURL=SwcSubTemplates.js.map

package/dist/esm/elements/SwcSubTemplates.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/elements/SwcSubTemplates.ts"],
-  "sourcesContent": ["export class SwcLoading extends HTMLTemplateElement {}\nexport class SwcError extends HTMLTemplateElement {}\nexport class SwcSuccess extends HTMLTemplateElement {}\nexport class SwcWhen extends HTMLTemplateElement {}\nexport class SwcOtherwise extends HTMLTemplateElement {}\nexport class SwcDefault extends HTMLTemplateElement {}\n"],
-  "mappings": "AAAO,MAAM,mBAAmB,oBAAoB;AAAC;AAC9C,MAAM,iBAAiB,oBAAoB;AAAC;AAC5C,MAAM,mBAAmB,oBAAoB;AAAC;AAC9C,MAAM,gBAAgB,oBAAoB;AAAC;AAC3C,MAAM,qBAAqB,oBAAoB;AAAC;AAChD,MAAM,mBAAmB,oBAAoB;AAAC;",
+  "sourcesContent": ["class SwcLoading extends HTMLTemplateElement {}\nclass SwcError extends HTMLTemplateElement {}\nclass SwcSuccess extends HTMLTemplateElement {}\nclass SwcWhen extends HTMLTemplateElement {}\nclass SwcOtherwise extends HTMLTemplateElement {}\nclass SwcDefault extends HTMLTemplateElement {}\n"],
+  "mappings": "AAAA,MAAM,mBAAmB,oBAAoB;AAAC;AAC9C,MAAM,iBAAiB,oBAAoB;AAAC;AAC5C,MAAM,mBAAmB,oBAAoB;AAAC;AAC9C,MAAM,gBAAgB,oBAAoB;AAAC;AAC3C,MAAM,qBAAqB,oBAAoB;AAAC;AAChD,MAAM,mBAAmB,oBAAoB;AAAC;",
   "names": []
 }