@dooboostore/simple-web-component 1.0.31 → 1.0.32

package/dist/esm/elements/SwcLoop.js

@@ -9,114 +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);
   }
-  _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() {
-    let script = this.getAttribute("value");
-    if (!script) {
-      this.value = [];
-      return;
-    }
-    if (script.startsWith("{{") && script.endsWith("}}")) {
-      script = script.slice(2, -2).trim();
-    }
+  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();
+  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) => {
-          this._executeCloneCallback("on-clone-node", { ...groupArgs, $node: node, $nodeIndex: nodeIdx, $isElement: node.nodeType === 1 });
-          if (node instanceof HTMLElement) {
-            Array.from(node.attributes).forEach((attr) => {
-              const value = attr.value || "";
-              if (value.startsWith("{{") && value.endsWith("}}")) {
-                const script = value.slice(2, -2).trim();
-                const result = FunctionUtils.executeReturn({
-                  script,
-                  context: node,
-                  args: groupArgs
-                });
-                node.setAttribute(attr.name, String(result));
-              }
-            });
-          }
-        });
-        this._executeCloneCallback("on-clone-nodes", groupArgs);
-        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([
+  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);
+], 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\nclass 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\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('value')\n  private refreshValue() {\n    let script = this.getAttribute('value');\n    if (!script) {\n      this.value = [];\n      return;\n    }\n    // Parse {{ }} braces\n    if (script.startsWith('{{') && script.endsWith('}}')) {\n      script = script.slice(2, -2).trim();\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.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    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          this._executeCloneCallback('on-clone-node', { ...groupArgs, $node: node, $nodeIndex: nodeIdx, $isElement: node.nodeType === 1 });\n\n          // Attribute {{ }} 치환 - SwcChoose처럼 동적 치환\n          if (node instanceof HTMLElement) {\n            Array.from(node.attributes).forEach(attr => {\n              const value = attr.value || '';\n              if (value.startsWith('{{') && value.endsWith('}}')) {\n                const script = value.slice(2, -2).trim();\n                const result = FunctionUtils.executeReturn({\n                  script,\n                  context: node,\n                  args: groupArgs\n                });\n                node.setAttribute(attr.name, String(result));\n              }\n            });\n          }\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": []
 }