@dooboostore/simple-web-component 1.0.33 → 1.0.35

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, 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;;;;;",
+  "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, getAttributeValue } from '../decorators';\n\nclass SwcIf extends HTMLTemplateElement implements SwcIfInterface {\n  // id =\n  // @attributeHost('value')\n  _value: any;\n\n  @attributeHost('replace-wrap-start')\n  _replaceWrapStart: string | null;\n  @attributeHost('replace-wrap-end')\n  _replaceWrapEnd: string | null;\n\n  @attributeHost('skip-if-same')\n  _skipIfSame: 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  constructor() {\n    super();\n  }\n\n  @changedAttributeHost('value')\n  private setValue(value: any, o: string, n: string) {\n    this._value = value;\n    this.refresh(this._value);\n  }\n\n  // @changedAttributeHost('replace-wrap')\n  // private setReplaceWrap(replaceWrapAttr?: string | null) {\n  //   this.refresh();\n  // }\n\n  private replaceExpressions(html: string, groupArgs: any, context: any, wrap: {start: string, end: string}): string {\n    let config: any = undefined;\n    if (wrap) {\n      config = {\n        expression: {\n          replace: { start: `${wrap.start}`, end: `${wrap.end}` },\n          callReturn: { start: `${wrap.start}=`, end: `${wrap.end}` },\n          call: { start: `${wrap.start}@`, end: `${wrap.end}` }\n        }\n      };\n    }\n    const ae = new ActionExpression(html, config);\n    const win = this.ownerDocument?.defaultView || window;\n\n    // @ts-ignore\n    for (const expr of ae.getExpressions('replace')) {\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?: any) {\n    const targetValue = value !== undefined ? value : (getAttributeValue(this, 'value') ?? this._value);\n\n    // skip-if-same 속성이 존재하고(true/빈 문자열), 이전 값과 새로운 값이 완전히 동일하면 렌더링 스킵!\n    if (this.hasAttribute('skip-if-same') && this._value === targetValue && this._nodes.length > 0) {\n      return;\n    }\n\n    this.cleanup();\n    this._value = targetValue;\n\n    const portal = this.parentElement;\n    if (!portal || !this._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: this._value, $templateHost: this };\n\n    htmlString = this.replaceExpressions(htmlString, groupArgs, this, {start:this._replaceWrapStart ?? '{#{', end: this._replaceWrapEnd ?? '}#}'});\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    this._nodes.forEach((node: any) => {\n      if (node instanceof HTMLElement) (node as any).__swc_template_host = this;\n    });\n\n    portal.insertBefore(processedFragment, this.nextSibling);\n  }\n\n  private cleanup() {\n    this._nodes.forEach(n => {\n      const realNode = (n as any).__upgraded_instance || n;\n      if (realNode.parentElement) {\n        realNode.parentElement.removeChild(realNode);\n      }\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,eAAe,yBAAyB;AAEjD,MAAM,cAAc,oBAAmB;EAerC,IAAI,QAAK;AACP,WAAO,KAAK;EACd;EAEA,IAAI,MAAM,IAAO;AAEf,SAAK,QAAQ,EAAE;EACjB;EAEA,cAAA;AACE,UAAK;AAZC,SAAA,SAAiB,CAAA;EAazB;EAGQ,SAAS,OAAY,GAAW,GAAS;AAC/C,SAAK,SAAS;AACd,SAAK,QAAQ,KAAK,MAAM;EAC1B;;;;;EAOQ,mBAAmB,MAAc,WAAgB,SAAc,MAAkC;AACvG,QAAI,SAAc;AAClB,QAAI,MAAM;AACR,eAAS;QACP,YAAY;UACV,SAAS,EAAE,OAAO,GAAG,KAAK,KAAK,IAAI,KAAK,GAAG,KAAK,GAAG,GAAE;UACrD,YAAY,EAAE,OAAO,GAAG,KAAK,KAAK,KAAK,KAAK,GAAG,KAAK,GAAG,GAAE;UACzD,MAAM,EAAE,OAAO,GAAG,KAAK,KAAK,KAAK,KAAK,GAAG,KAAK,GAAG,GAAE;;;IAGzD;AACA,UAAM,KAAK,IAAI,iBAAiB,MAAM,MAAM;AAC5C,UAAM,MAAM,KAAK,eAAe,eAAe;AAG/C,eAAW,QAAQ,GAAG,eAAe,SAAS,GAAG;AAC/C,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,OAAW;AACjB,UAAM,cAAc,UAAU,SAAY,QAAS,kBAAkB,MAAM,OAAO,KAAK,KAAK;AAG5F,QAAI,KAAK,aAAa,cAAc,KAAK,KAAK,WAAW,eAAe,KAAK,OAAO,SAAS,GAAG;AAC9F;IACF;AAEA,SAAK,QAAO;AACZ,SAAK,SAAS;AAEd,UAAM,SAAS,KAAK;AACpB,QAAI,CAAC,UAAU,CAAC,KAAK;AAAQ;AAE7B,UAAM,MAAM,KAAK,eAAe,eAAe;AAC/C,UAAM,YAAY,SAAS,oBAAoB,KAAK,IAAI;AAExD,QAAI,aAAa,KAAK;AACtB,UAAM,YAAY,EAAE,GAAG,WAAW,QAAQ,KAAK,QAAQ,eAAe,KAAI;AAE1E,iBAAa,KAAK,mBAAmB,YAAY,WAAW,MAAM,EAAC,OAAM,KAAK,qBAAqB,OAAO,KAAK,KAAK,mBAAmB,MAAK,CAAC;AAE7I,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,SAAK,OAAO,QAAQ,CAAC,SAAa;AAChC,UAAI,gBAAgB;AAAc,aAAa,sBAAsB;IACvE,CAAC;AAED,WAAO,aAAa,mBAAmB,KAAK,WAAW;EACzD;EAEQ,UAAO;AACb,SAAK,OAAO,QAAQ,OAAI;AACtB,YAAM,WAAY,EAAU,uBAAuB;AACnD,UAAI,SAAS,eAAe;AAC1B,iBAAS,cAAc,YAAY,QAAQ;MAC7C;IACF,CAAC;AACD,SAAK,SAAS,CAAA;EAChB;EAEA,uBAAoB;AAClB,SAAK,QAAO;EACd;;AA7GA,WAAA;EADC,cAAc,oBAAoB;;;AAGnC,WAAA;EADC,cAAc,kBAAkB;;;AAIjC,WAAA;EADC,cAAc,cAAc;;;AAmBrB,WAAA;EADP,qBAAqB,OAAO;;;;;",
   "names": []
 }

package/dist/esm/elements/SwcLoop.js

@@ -11,33 +11,48 @@ import { changedAttributeHost } from "../decorators/changedAttributeHost.js";
 import { SwcUtils } from "../utils/Utils.js";
 import { FunctionUtils, ActionExpression } from "@dooboostore/core";
 import { ConvertUtils } from "@dooboostore/core-web";
-import { attributeHost } from "../decorators/index.js";
+import { attributeHost, getAttributeValue } from "../decorators/index.js";
 class SwcLoop extends HTMLTemplateElement {
-  constructor() {
-    super(...arguments);
-    this._nodeGroups = [];
-  }
   get value() {
     return this._value;
   }
   set value(nv) {
+    this._value = nv;
     this.refresh(nv);
   }
-  setValue() {
-    this.refresh();
+  getValue(index) {
+    return this._value?.[index];
+  }
+  constructor() {
+    super();
+    this._value = [];
+    this._nodeGroups = [];
   }
-  setReplaceWrap() {
-    this.refresh();
+  setValue(value, o, n) {
+    this._value = value;
+    this.refresh(this._value);
   }
+  // @changedAttributeHost('replace-wrap')
+  // private setReplaceWrap(replaceWrapAttr?: string | null) {
+  //   this.refresh();
+  // }
   replaceExpressions(html, groupArgs, context, wrap) {
-    const config = wrap ? { wrapExpression: wrap } : void 0;
+    let config = void 0;
+    config = {
+      expression: {
+        replace: { start: `${wrap.start}`, end: `${wrap.end}` },
+        callReturn: { start: `${wrap.start}=`, end: `${wrap.end}` },
+        call: { start: `${wrap.start}@`, end: `${wrap.end}` }
+      }
+    };
     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)) {
+    const expressions = ae.getExpressions("replace");
+    for (const expr of expressions) {
+      const script = ConvertUtils.decodeHtmlEntity(expr.script, win.document);
       try {
         const value = FunctionUtils.executeReturn({
-          script: ConvertUtils.decodeHtmlEntity(expr.script, win.document),
+          script,
           context,
           args: groupArgs
         });
@@ -48,30 +63,95 @@ class SwcLoop extends HTMLTemplateElement {
     }
     return ae.getUnprocessedTemplate();
   }
-  refresh(value = this._value) {
-    this.cleanup();
-    if (value?.length <= 0)
-      return;
-    const portal = this.parentElement;
-    if (!portal)
-      return;
+  createFragmentAndNodes(items, helperSet, startIndex = 0) {
     const win = this.ownerDocument?.defaultView || window;
-    const helperSet = SwcUtils.getHelperAndHostSet(win, this);
     const fragment = win.document.createDocumentFragment();
-    value.forEach((item, index) => {
+    const newNodesGroup = [];
+    items.forEach((item, i) => {
+      const index = startIndex + i;
       let htmlString = this.innerHTML;
       const groupArgs = { ...helperSet, $item: item, $index: index, $value: this._value };
-      htmlString = this.replaceExpressions(htmlString, groupArgs, this, this._replaceWrap);
+      htmlString = this.replaceExpressions(htmlString, groupArgs, this, { start: this._replaceWrapStart ?? "{#{", end: this._replaceWrapEnd ?? "}#}" });
       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);
+      const setTemplateHost = (element) => {
+        element.__swc_template_host = this;
+        Array.from(element.children).forEach((child) => {
+          if (child instanceof HTMLElement) {
+            setTemplateHost(child);
+          }
+        });
+      };
+      nodes.forEach((node) => {
+        if (node instanceof HTMLElement) {
+          setTemplateHost(node);
+        }
+      });
+      newNodesGroup.push(nodes);
       fragment.appendChild(content);
     });
+    return { fragment, newNodesGroup };
+  }
+  appendItem(...items) {
+    if (!items || items.length <= 0)
+      return;
+    const portal = SwcUtils.getParentContainer(this);
+    if (!portal)
+      return;
+    const win = this.ownerDocument?.defaultView || window;
+    const helperSet = SwcUtils.getHelperAndHostSet(win, this);
+    const startIndex = this._value ? this._value.length : 0;
+    if (this._value !== items) {
+      this._value = [...this._value || [], ...items];
+    }
+    const { fragment, newNodesGroup } = this.createFragmentAndNodes(items, helperSet, startIndex);
+    this._nodeGroups.push(...newNodesGroup);
+    console.log("\uBB50\uC57C \uC528\uBC1C");
+    let insertReference = this.nextSibling;
+    if (this._nodeGroups.length > items.length) {
+      const lastExistingGroup = this._nodeGroups[this._nodeGroups.length - items.length - 1];
+      if (lastExistingGroup && lastExistingGroup.length > 0) {
+        const lastNode = lastExistingGroup[lastExistingGroup.length - 1];
+        insertReference = lastNode.nextSibling;
+      }
+    }
+    portal.insertBefore(fragment, insertReference);
+  }
+  async prependItem(...items) {
+    if (!items || items.length <= 0)
+      return;
+    const portal = SwcUtils.getParentContainer(this);
+    if (!portal)
+      return;
+    const win = this.ownerDocument?.defaultView || window;
+    const helperSet = SwcUtils.getHelperAndHostSet(win, this);
+    if (this._value !== items) {
+      this._value = [...items, ...this._value || []];
+    }
+    const { fragment, newNodesGroup } = this.createFragmentAndNodes(items, helperSet, 0);
+    this._nodeGroups = [...newNodesGroup, ...this._nodeGroups];
     portal.insertBefore(fragment, this.nextSibling);
   }
+  refresh(value) {
+    const targetValue = value !== void 0 ? value : getAttributeValue(this, "value") ?? this._value ?? [];
+    this.cleanup();
+    this._value = targetValue;
+    if (!this._value || this._value.length <= 0)
+      return;
+    const win = this.ownerDocument?.defaultView || window;
+    const helperSet = SwcUtils.getHelperAndHostSet(win, this);
+    helperSet.$templateHost = this;
+    const { fragment, newNodesGroup } = this.createFragmentAndNodes(this._value, helperSet, 0);
+    this._nodeGroups = newNodesGroup;
+    const portal = SwcUtils.getParentContainer(this);
+    if (portal) {
+      portal.insertBefore(fragment, this.nextSibling);
+    }
+  }
   cleanup() {
+    console.log("\uB204\uAC00 cleanup");
     this._nodeGroups.forEach((nodes) => nodes.forEach((n) => n.parentElement?.removeChild(n)));
     this._nodeGroups = [];
   }
@@ -80,23 +160,17 @@ class SwcLoop extends HTMLTemplateElement {
   }
 }
 __decorate([
-  attributeHost("value"),
-  __metadata("design:type", Array)
-], SwcLoop.prototype, "_value", void 0);
+  attributeHost("replace-wrap-start"),
+  __metadata("design:type", String)
+], SwcLoop.prototype, "_replaceWrapStart", void 0);
 __decorate([
-  attributeHost("replace-wrap"),
+  attributeHost("replace-wrap-end"),
   __metadata("design:type", String)
-], SwcLoop.prototype, "_replaceWrap", void 0);
+], SwcLoop.prototype, "_replaceWrapEnd", void 0);
 __decorate([
   changedAttributeHost("value"),
   __metadata("design:type", Function),
-  __metadata("design:paramtypes", []),
+  __metadata("design:paramtypes", [Object, String, String]),
   __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, "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, 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;;;;;",
+  "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, getAttributeValue } from '../decorators';\n\nclass SwcLoop extends HTMLTemplateElement {\n  _value: any[] = [];\n\n  @attributeHost('replace-wrap-start')\n  _replaceWrapStart: string | null;\n  @attributeHost('replace-wrap-end')\n  _replaceWrapEnd: string | null;\n\n  private _nodeGroups: Node[][] = [];\n\n  get value(): any[] {\n    return this._value;\n  }\n\n  set value(nv: any[]) {\n    this._value = nv;\n    this.refresh(nv);\n  }\n\n  getValue(index: number) {\n    return this._value?.[index];\n  }\n\n  constructor() {\n    super();\n    // console.log('swc SwcLoop constructor called!');\n    // console.log('swc SwcLoop', this.getAttribute('value'));\n  }\n\n  @changedAttributeHost('value')\n  private setValue(value: any, o: string, n: string) {\n    this._value = value;\n    this.refresh(this._value);\n  }\n\n  // @changedAttributeHost('replace-wrap')\n  // private setReplaceWrap(replaceWrapAttr?: string | null) {\n  //   this.refresh();\n  // }\n\n  private replaceExpressions(html: string, groupArgs: any, context: any, wrap: {start: string, end: string}): string {\n    let config: any = undefined;\n    config = {\n      expression: {\n        replace: { start: `${wrap.start}`, end: `${wrap.end}` },\n        callReturn: { start: `${wrap.start}=`, end: `${wrap.end}` },\n        call: { start: `${wrap.start}@`, end: `${wrap.end}` }\n      }\n    };\n    const ae = new ActionExpression(html, config);\n    const win = this.ownerDocument?.defaultView || window;\n\n    // @ts-ignore\n    const expressions = ae.getExpressions('replace');\n    for (const expr of expressions) {\n      const script = ConvertUtils.decodeHtmlEntity(expr.script, win.document);\n      try {\n        const value = FunctionUtils.executeReturn({\n          script: script,\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  private createFragmentAndNodes(items: any[], helperSet: any, startIndex: number = 0): { fragment: DocumentFragment; newNodesGroup: Node[][] } {\n    const win = this.ownerDocument?.defaultView || window;\n    const fragment = win.document.createDocumentFragment();\n    const newNodesGroup: Node[][] = [];\n\n    items.forEach((item, i) => {\n      const index = startIndex + i;\n      let htmlString = this.innerHTML;\n      const groupArgs = { ...helperSet, $item: item, $index: index, $value: this._value };\n\n      htmlString = this.replaceExpressions(htmlString, groupArgs, this, {start:this._replaceWrapStart ?? '{#{', end: this._replaceWrapEnd ?? '}#}'});\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\n      const setTemplateHost = (element: HTMLElement) => {\n        (element as any).__swc_template_host = this;\n        Array.from(element.children).forEach((child: any) => {\n          if (child instanceof HTMLElement) {\n            setTemplateHost(child);\n          }\n        });\n      };\n\n      nodes.forEach((node: any) => {\n        if (node instanceof HTMLElement) {\n          setTemplateHost(node as HTMLElement);\n        }\n      });\n      newNodesGroup.push(nodes);\n      fragment.appendChild(content);\n    });\n\n    return { fragment, newNodesGroup };\n  }\n\n  appendItem(...items: any[]) {\n    if (!items || items.length <= 0) return;\n    const portal = SwcUtils.getParentContainer(this);\n    if (!portal) return;\n\n    const win = this.ownerDocument?.defaultView || window;\n    const helperSet = SwcUtils.getHelperAndHostSet(win, this);\n\n    const startIndex = this._value ? this._value.length : 0;\n\n    // 내부 상태(value) 업데이트 (기존 배열에 새 아이템 추가)\n    if (this._value !== items) {\n      this._value = [...(this._value || []), ...items];\n    }\n\n    const { fragment, newNodesGroup } = this.createFragmentAndNodes(items, helperSet, startIndex);\n    this._nodeGroups.push(...newNodesGroup);\n\n    console.log('뭐야 씨발');\n    // append 위치 계산: 기존에 그려진 마지막 노드 뒤에 삽입, 없으면 템플릿 바로 뒤에 삽입\n    let insertReference: Node | null = this.nextSibling;\n    if (this._nodeGroups.length > items.length) {\n      const lastExistingGroup = this._nodeGroups[this._nodeGroups.length - items.length - 1];\n      if (lastExistingGroup && lastExistingGroup.length > 0) {\n        const lastNode = lastExistingGroup[lastExistingGroup.length - 1];\n        insertReference = lastNode.nextSibling;\n      }\n    }\n\n    portal.insertBefore(fragment, insertReference);\n  }\n\n  async prependItem(...items: any[]) {\n    if (!items || items.length <= 0) return;\n    const portal = SwcUtils.getParentContainer(this);\n    if (!portal) return;\n\n    const win = this.ownerDocument?.defaultView || window;\n    const helperSet = SwcUtils.getHelperAndHostSet(win, this);\n\n    // 내부 상태(value) 업데이트 (기존 배열의 앞쪽에 새 아이템 추가)\n    if (this._value !== items) {\n      this._value = [...items, ...(this._value || [])];\n    }\n\n    const { fragment, newNodesGroup } = this.createFragmentAndNodes(items, helperSet, 0);\n\n    // 기존의 nodeGroups 배열 맨 앞에 새로운 그룹들을 추가\n    this._nodeGroups = [...newNodesGroup, ...this._nodeGroups];\n\n    // prepend 위치: 이 템플릿(SwcLoop) 노드의 바로 다음 위치 (가장 위)\n    portal.insertBefore(fragment, this.nextSibling);\n  }\n\n  refresh(value?: any) {\n    // 1. 그릴 대상 확정\n    const targetValue = value !== undefined ? value : (getAttributeValue(this, 'value') ?? this._value ?? []);\n\n    // 2. 화면 정리\n    this.cleanup();\n\n    // 3. 상태 완전 교체 (이어붙이지 않음!)\n    this._value = targetValue;\n\n    if (!this._value || this._value.length <= 0) return;\n\n    // 4. 화면 다시 그리기 (appendItem을 쓰지 않고 바로 그리기)\n    const win = this.ownerDocument?.defaultView || window;\n    const helperSet = SwcUtils.getHelperAndHostSet(win, this);\n    helperSet.$templateHost = this;\n    const { fragment, newNodesGroup } = this.createFragmentAndNodes(this._value, helperSet, 0);\n\n    this._nodeGroups = newNodesGroup;\n    const portal = SwcUtils.getParentContainer(this);\n    if (portal) {\n      // console.log('append????!~~~~~!?',fragment)\n      portal.insertBefore(fragment, this.nextSibling);\n    }\n  }\n\n  private cleanup() {\n    console.log('누가 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": "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",
   "names": []
 }