@dooboostore/simple-web-component 1.0.34 → 1.0.36

package/dist/esm/elements/SwcChoose.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 { changedAttributeHost } from "../decorators/changedAttributeHost.js";
+import { changedAttributeThis } from "../decorators/changedAttributeThis.js";
 import { SwcUtils } from "../utils/Utils.js";
 import { FunctionUtils, ActionExpression } from "@dooboostore/core";
 import { ConvertUtils } from "@dooboostore/core-web";
-import { attributeHost, getAttributeValue, getElementConfig } from "../decorators/index.js";
+import { attributeThis, getAttributeValue, getElementConfig } from "../decorators/index.js";
 class SwcChoose extends HTMLTemplateElement {
   get value() {
     return this._value;
@@ -31,18 +31,28 @@ class SwcChoose extends HTMLTemplateElement {
   attributeChangedCallback(na, o, n) {
   }
   setValue(value, o, n) {
+    console.log("chooooooose value", value);
     this._value = value;
     this.refresh(this._value);
   }
-  setReplaceWrap(replaceWrapAttr) {
-    this.refresh();
-  }
+  // @changedAttributeThis('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;
+    if (wrap) {
+      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)) {
+    for (const expr of ae.getExpressions("replace")) {
       try {
         const value = FunctionUtils.executeReturn({
           script: ConvertUtils.decodeHtmlEntity(expr.script, win.document),
@@ -58,31 +68,27 @@ class SwcChoose extends HTMLTemplateElement {
   }
   refresh(value) {
     value = getAttributeValue(this, "value") ?? this._value;
-    const portal = this.parentElement;
-    if (!portal)
+    console.log("[DEBUG] SwcChoose.refresh called, value:", value);
+    const portal = SwcUtils.getParentContainer(this);
+    if (!portal) {
+      console.log("[DEBUG] SwcChoose portal is null!");
       return;
+    }
     const win = (getElementConfig(this).window ?? this.ownerDocument?.defaultView) || window;
     const helperSet = SwcUtils.getHelperAndHostSet(win, this);
-    const groupArgs = { ...helperSet, $value: value };
+    const groupArgs = { ...helperSet, $value: value, $templateHost: this };
     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") || "";
+        const attrVal = t.getAttribute("test") || "";
         let matches = false;
-        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: decodedScript,
-            context: t,
-            args: groupArgs
-          });
-          matches = !!result;
-        } else {
-          matches = String(attrVal) === String(value);
-        }
+        const result = FunctionUtils.executeReturn({
+          script: attrVal,
+          context: t,
+          args: groupArgs
+        });
+        matches = !!result;
         if (matches) {
           selected = t;
           break;
@@ -101,12 +107,27 @@ class SwcChoose extends HTMLTemplateElement {
     this._previousTemplate = target;
     if (target) {
       let htmlString = target.innerHTML;
-      htmlString = this.replaceExpressions(htmlString, groupArgs, this, this._replaceWrap);
+      htmlString = this.replaceExpressions(htmlString, groupArgs, this, { start: this._replaceWrapStart ?? "{#{", end: this._replaceWrapEnd ?? "}#}" });
       const result = this.ownerDocument?.createElement("template") || document.createElement("template");
       result.innerHTML = htmlString;
       const processedFragment = result.content;
       this._nodes = Array.from(processedFragment.childNodes);
+      const setTemplateHost = (element) => {
+        element.__swc_template_host = this;
+        Array.from(element.children).forEach((child) => {
+          if (child instanceof HTMLElement) {
+            setTemplateHost(child);
+          }
+        });
+      };
+      this._nodes.forEach((node) => {
+        if (node instanceof HTMLElement) {
+          setTemplateHost(node);
+        }
+      });
+      console.log(`[DEBUG] SwcChoose before insertBefore, portal: ${portal?.tagName}, isConnected: ${portal?.isConnected}`);
       portal.insertBefore(processedFragment, this.nextSibling);
+      console.log("[DEBUG] SwcChoose after insertBefore");
     }
   }
   cleanup() {
@@ -118,19 +139,17 @@ class SwcChoose extends HTMLTemplateElement {
   }
 }
 __decorate([
-  attributeHost("replace-wrap"),
+  attributeThis("replace-wrap-start"),
+  __metadata("design:type", String)
+], SwcChoose.prototype, "_replaceWrapStart", void 0);
+__decorate([
+  attributeThis("replace-wrap-end"),
   __metadata("design:type", String)
-], SwcChoose.prototype, "_replaceWrap", void 0);
+], SwcChoose.prototype, "_replaceWrapEnd", void 0);
 __decorate([
-  changedAttributeHost("value"),
+  changedAttributeThis("value"),
   __metadata("design:type", Function),
   __metadata("design:paramtypes", [Object, String, String]),
   __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, "setReplaceWrap", null);
 //# sourceMappingURL=SwcChoose.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/elements/SwcChoose.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 { SwcChooseInterface } from '../types';\nimport { attributeHost, getAttributeValue, getElementConfig } from '../decorators';\n\nclass SwcChoose extends HTMLTemplateElement implements SwcChooseInterface {\n  // @attributeHost('value')\n  // fetchValue: any;\n\n  _value: any;\n\n  @attributeHost('replace-wrap')\n  _replaceWrap: string | null;\n\n  private _nodes: Node[] = [];\n  private _previousTemplate: HTMLTemplateElement | null = null;\n\n  get value(): any {\n    return this._value;\n  }\n\n  set value(nv: any) {\n    this._value = nv;\n    this.refresh(this._value);\n  }\n\n  constructor() {\n    super();\n    // console.log('swc chooooooooooooooooooooooooose constructor called!');\n    // console.log('swc cccccccss', this.getAttribute('value'));\n  }\n\n  // static get observedAttributes() {\n  //   return ['value'];\n  // }\n\n  attributeChangedCallback(na, o, n) {\n    // console.log('-----------------choooooooose attr origin', na, o, n);\n  }\n\n  @changedAttributeHost('value')\n  private setValue(value: any, o: string, n: string) {\n    // console.log('-----------------choooooooose attr setValue', value, o, n);\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?: 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?: any) {\n    value = getAttributeValue(this, 'value') ?? this._value;\n    // console.log('chooooooooo refresh->', value);\n    const portal = this.parentElement;\n    if (!portal) return;\n\n    const win = (getElementConfig(this).window ?? this.ownerDocument?.defaultView) || window;\n    const helperSet = SwcUtils.getHelperAndHostSet(win, this);\n    const groupArgs = { ...helperSet, $value: value };\n\n    const templates = Array.from(this.content.querySelectorAll('template'));\n    let selected: HTMLTemplateElement | null = null;\n\n    for (const t of templates) {\n      if (t.getAttribute('is') === 'swc-when') {\n        const attrVal = t.getAttribute('value') || '';\n        let matches = false;\n\n        // Use ActionExpression to parse and extract script from value attribute\n        const ae = new ActionExpression(attrVal);\n        const expr = ae.getFirstExpression('replace');\n\n        if (expr) {\n          const decodedScript = ConvertUtils.decodeHtmlEntity(expr.script, win.document);\n          const result = FunctionUtils.executeReturn({\n            script: decodedScript,\n            context: t,\n            args: groupArgs\n          });\n          matches = !!result;\n        } else {\n          matches = String(attrVal) === String(value);\n        }\n\n        if (matches) {\n          selected = t;\n          break;\n        }\n      }\n    }\n\n    const target = selected || (this.content.querySelector('template[is=\"swc-otherwise\"]') as HTMLTemplateElement);\n\n    const skipValue = target?.getAttribute?.('skip-if-same');\n    const skipValue2 = this._previousTemplate?.getAttribute?.('skip-if-same');\n    const hasSkipIfSame = target?.hasAttribute?.('skip-if-same');\n    const isSame = this._previousTemplate === target;\n    // console.log('---rrrr---', this._previousTemplate, target, hasSkipIfSame, isSame, skipValue, skipValue2);\n    if (hasSkipIfSame && isSame) {\n      return;\n    }\n\n    this.cleanup();\n    this._previousTemplate = target;\n\n    if (target) {\n      let htmlString = target.innerHTML;\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\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": "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",
+  "sourcesContent": ["import { changedAttributeThis } from '../decorators/changedAttributeThis';\nimport { SwcUtils } from '../utils/Utils';\nimport { FunctionUtils, ActionExpression } from '@dooboostore/core';\nimport { ConvertUtils } from '@dooboostore/core-web';\nimport { SwcChooseInterface } from '../types';\nimport { attributeThis, getAttributeValue, getElementConfig } from '../decorators';\n\nclass SwcChoose extends HTMLTemplateElement implements SwcChooseInterface {\n  _value: any;\n\n  @attributeThis('replace-wrap-start')\n  _replaceWrapStart: string | null;\n  @attributeThis('replace-wrap-end')\n  _replaceWrapEnd: string | null;\n\n  private _nodes: Node[] = [];\n  private _previousTemplate: HTMLTemplateElement | null = null;\n\n  get value(): any {\n    return this._value;\n  }\n\n  set value(nv: any) {\n    this._value = nv;\n    this.refresh(this._value);\n  }\n\n  constructor() {\n    super();\n    // console.log('swc chooooooooooooooooooooooooose constructor called!');\n    // console.log('swc cccccccss', this.getAttribute('value'));\n  }\n\n  // static get observedAttributes() {\n  //   return ['value'];\n  // }\n\n  attributeChangedCallback(na, o, n) {\n    // console.log('-----------------choooooooose attr origin', na, o, n);\n  }\n\n  @changedAttributeThis('value')\n  private setValue(value: any, o: string, n: string) {\n    console.log('chooooooose value', value)\n    this._value = value;\n    this.refresh(this._value);\n  }\n\n  // @changedAttributeThis('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    value = getAttributeValue(this, 'value') ?? this._value;\n    console.log('[DEBUG] SwcChoose.refresh called, value:', value);\n    const portal = SwcUtils.getParentContainer(this);\n    if (!portal) {\n      console.log('[DEBUG] SwcChoose portal is null!');\n      return;\n    }\n\n    const win = (getElementConfig(this).window ?? this.ownerDocument?.defaultView) || window;\n    const helperSet = SwcUtils.getHelperAndHostSet(win, this);\n    const groupArgs = { ...helperSet, $value: value, $templateHost: this };\n\n    const templates = Array.from(this.content.querySelectorAll('template'));\n    let selected: HTMLTemplateElement | null = null;\n\n    for (const t of templates) {\n      if (t.getAttribute('is') === 'swc-when') {\n        const attrVal = t.getAttribute('test') || '';\n        let matches = false;\n\n\n\n        const result = FunctionUtils.executeReturn({\n          script: attrVal,\n          context: t,\n          args: groupArgs\n        });\n        matches = !!result;\n        // Use ActionExpression to parse and extract script from value attribute\n        // const ae = new ActionExpression(attrVal);\n        // const expr = ae.getFirstExpression('replace');\n\n        // if (expr) {\n        //   const decodedScript = ConvertUtils.decodeHtmlEntity(expr.script, win.document);\n        //   const result = FunctionUtils.executeReturn({\n        //     script: decodedScript,\n        //     context: t,\n        //     args: groupArgs\n        //   });\n        //   matches = !!result;\n        // } else {\n        //   matches = String(attrVal) === String(value);\n        // }\n\n        if (matches) {\n          selected = t;\n          break;\n        }\n      }\n    }\n\n    const target = selected || (this.content.querySelector('template[is=\"swc-otherwise\"]') as HTMLTemplateElement);\n\n    const skipValue = target?.getAttribute?.('skip-if-same');\n    const skipValue2 = this._previousTemplate?.getAttribute?.('skip-if-same');\n    const hasSkipIfSame = target?.hasAttribute?.('skip-if-same');\n    const isSame = this._previousTemplate === target;\n    // console.log('---rrrr---', this._previousTemplate, target, hasSkipIfSame, isSame, skipValue, skipValue2);\n    if (hasSkipIfSame && isSame) {\n      return;\n    }\n\n    this.cleanup();\n    this._previousTemplate = target;\n\n    if (target) {\n      let htmlString = target.innerHTML;\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      // console.log('[DEBUG] SwcChoose processedFragment children:', processedFragment._childNodesInternal?.length);\n      this._nodes = Array.from(processedFragment.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      this._nodes.forEach((node: any) => {\n        if (node instanceof HTMLElement) {\n          setTemplateHost(node as HTMLElement);\n        }\n      });\n\n      console.log(`[DEBUG] SwcChoose before insertBefore, portal: ${portal?.tagName}, isConnected: ${(portal as any)?.isConnected}`);\n      portal.insertBefore(processedFragment, this.nextSibling);\n      console.log('[DEBUG] SwcChoose after insertBefore');\n    }\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,eAAe,mBAAmB,wBAAwB;AAEnE,MAAM,kBAAkB,oBAAmB;EAWzC,IAAI,QAAK;AACP,WAAO,KAAK;EACd;EAEA,IAAI,MAAM,IAAO;AACf,SAAK,SAAS;AACd,SAAK,QAAQ,KAAK,MAAM;EAC1B;EAEA,cAAA;AACE,UAAK;AAbC,SAAA,SAAiB,CAAA;AACjB,SAAA,oBAAgD;EAexD;;;;EAMA,yBAAyB,IAAI,GAAG,GAAC;EAEjC;EAGQ,SAAS,OAAY,GAAW,GAAS;AAC/C,YAAQ,IAAI,qBAAqB,KAAK;AACtC,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,YAAQ,kBAAkB,MAAM,OAAO,KAAK,KAAK;AACjD,YAAQ,IAAI,4CAA4C,KAAK;AAC7D,UAAM,SAAS,SAAS,mBAAmB,IAAI;AAC/C,QAAI,CAAC,QAAQ;AACX,cAAQ,IAAI,mCAAmC;AAC/C;IACF;AAEA,UAAM,OAAO,iBAAiB,IAAI,EAAE,UAAU,KAAK,eAAe,gBAAgB;AAClF,UAAM,YAAY,SAAS,oBAAoB,KAAK,IAAI;AACxD,UAAM,YAAY,EAAE,GAAG,WAAW,QAAQ,OAAO,eAAe,KAAI;AAEpE,UAAM,YAAY,MAAM,KAAK,KAAK,QAAQ,iBAAiB,UAAU,CAAC;AACtE,QAAI,WAAuC;AAE3C,eAAW,KAAK,WAAW;AACzB,UAAI,EAAE,aAAa,IAAI,MAAM,YAAY;AACvC,cAAM,UAAU,EAAE,aAAa,MAAM,KAAK;AAC1C,YAAI,UAAU;AAId,cAAM,SAAS,cAAc,cAAc;UACzC,QAAQ;UACR,SAAS;UACT,MAAM;SACP;AACD,kBAAU,CAAC,CAAC;AAiBZ,YAAI,SAAS;AACX,qBAAW;AACX;QACF;MACF;IACF;AAEA,UAAM,SAAS,YAAa,KAAK,QAAQ,cAAc,8BAA8B;AAErF,UAAM,YAAY,QAAQ,eAAe,cAAc;AACvD,UAAM,aAAa,KAAK,mBAAmB,eAAe,cAAc;AACxE,UAAM,gBAAgB,QAAQ,eAAe,cAAc;AAC3D,UAAM,SAAS,KAAK,sBAAsB;AAE1C,QAAI,iBAAiB,QAAQ;AAC3B;IACF;AAEA,SAAK,QAAO;AACZ,SAAK,oBAAoB;AAEzB,QAAI,QAAQ;AACV,UAAI,aAAa,OAAO;AACxB,mBAAa,KAAK,mBAAmB,YAAY,WAAW,MAAM,EAAC,OAAM,KAAK,qBAAqB,OAAO,KAAK,KAAK,mBAAmB,MAAK,CAAC;AAE7I,YAAM,SAAS,KAAK,eAAe,cAAc,UAAU,KAAK,SAAS,cAAc,UAAU;AACjG,aAAO,YAAY;AACnB,YAAM,oBAAoB,OAAO;AAGjC,WAAK,SAAS,MAAM,KAAK,kBAAkB,UAAU;AAErD,YAAM,kBAAkB,CAAC,YAAwB;AAC9C,gBAAgB,sBAAsB;AACvC,cAAM,KAAK,QAAQ,QAAQ,EAAE,QAAQ,CAAC,UAAc;AAClD,cAAI,iBAAiB,aAAa;AAChC,4BAAgB,KAAK;UACvB;QACF,CAAC;MACH;AAEA,WAAK,OAAO,QAAQ,CAAC,SAAa;AAChC,YAAI,gBAAgB,aAAa;AAC/B,0BAAgB,IAAmB;QACrC;MACF,CAAC;AAED,cAAQ,IAAI,kDAAkD,QAAQ,OAAO,kBAAmB,QAAgB,WAAW,EAAE;AAC7H,aAAO,aAAa,mBAAmB,KAAK,WAAW;AACvD,cAAQ,IAAI,sCAAsC;IACpD;EACF;EAEQ,UAAO;AACb,SAAK,OAAO,QAAQ,OAAK,EAAE,eAAe,YAAY,CAAC,CAAC;AACxD,SAAK,SAAS,CAAA;EAChB;EAEA,uBAAoB;AAClB,SAAK,QAAO;EACd;;AAjLA,WAAA;EADC,cAAc,oBAAoB;;;AAGnC,WAAA;EADC,cAAc,kBAAkB;;;AA8BzB,WAAA;EADP,qBAAqB,OAAO;;;;;",
   "names": []
 }

package/dist/esm/elements/SwcIf.js

@@ -7,28 +7,44 @@ 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 { changedAttributeHost } from "../decorators/changedAttributeHost.js";
+import { changedAttributeThis } from "../decorators/changedAttributeThis.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 { attributeThis, getAttributeValue } from "../decorators/index.js";
 class SwcIf extends HTMLTemplateElement {
-  constructor() {
-    super(...arguments);
-    this._nodes = [];
-  }
   get value() {
     return this._value;
   }
   set value(nv) {
     this.refresh(nv);
   }
+  constructor() {
+    super();
+    this._nodes = [];
+  }
+  setValue(value, o, n) {
+    this._value = value;
+    this.refresh(this._value);
+  }
+  // @changedAttributeThis('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;
+    if (wrap) {
+      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)) {
+    for (const expr of ae.getExpressions("replace")) {
       try {
         const value = FunctionUtils.executeReturn({
           script: ConvertUtils.decodeHtmlEntity(expr.script, win.document),
@@ -42,30 +58,38 @@ class SwcIf extends HTMLTemplateElement {
     }
     return ae.getUnprocessedTemplate();
   }
-  setValue(valueAttr) {
-    this.refresh();
-  }
-  setReplaceWrap(replaceWrapAttr) {
-    this.refresh();
-  }
-  refresh(value = this._value) {
+  refresh(value) {
+    const targetValue = value !== void 0 ? value : getAttributeValue(this, "value") ?? this._value;
+    if (this.hasAttribute("skip-if-same") && this._value === targetValue && this._nodes.length > 0) {
+      return;
+    }
     this.cleanup();
+    this._value = targetValue;
     const portal = this.parentElement;
-    if (!portal || !value)
+    if (!portal || !this._value)
       return;
     const win = this.ownerDocument?.defaultView || window;
     const helperSet = SwcUtils.getHelperAndHostSet(win, this);
     let htmlString = this.innerHTML;
-    const groupArgs = { ...helperSet, $value: value };
-    htmlString = this.replaceExpressions(htmlString, groupArgs, this, this._replaceWrap);
+    const groupArgs = { ...helperSet, $value: this._value, $templateHost: this };
+    htmlString = this.replaceExpressions(htmlString, groupArgs, this, { start: this._replaceWrapStart ?? "{#{", end: this._replaceWrapEnd ?? "}#}" });
     const result = this.ownerDocument?.createElement("template") || document.createElement("template");
     result.innerHTML = htmlString;
     const processedFragment = result.content;
     this._nodes = Array.from(processedFragment.childNodes);
+    this._nodes.forEach((node) => {
+      if (node instanceof HTMLElement)
+        node.__swc_template_host = this;
+    });
     portal.insertBefore(processedFragment, this.nextSibling);
   }
   cleanup() {
-    this._nodes.forEach((n) => n.parentElement?.removeChild(n));
+    this._nodes.forEach((n) => {
+      const realNode = n.__upgraded_instance || n;
+      if (realNode.parentElement) {
+        realNode.parentElement.removeChild(realNode);
+      }
+    });
     this._nodes = [];
   }
   disconnectedCallback() {
@@ -73,23 +97,21 @@ class SwcIf extends HTMLTemplateElement {
   }
 }
 __decorate([
-  attributeHost("value"),
-  __metadata("design:type", Object)
-], SwcIf.prototype, "_value", void 0);
+  attributeThis("replace-wrap-start"),
+  __metadata("design:type", String)
+], SwcIf.prototype, "_replaceWrapStart", void 0);
 __decorate([
-  attributeHost("replace-wrap"),
+  attributeThis("replace-wrap-end"),
   __metadata("design:type", String)
-], SwcIf.prototype, "_replaceWrap", void 0);
+], SwcIf.prototype, "_replaceWrapEnd", void 0);
 __decorate([
-  changedAttributeHost("value"),
-  __metadata("design:type", Function),
-  __metadata("design:paramtypes", [String]),
-  __metadata("design:returntype", void 0)
-], SwcIf.prototype, "setValue", null);
+  attributeThis("skip-if-same"),
+  __metadata("design:type", String)
+], SwcIf.prototype, "_skipIfSame", void 0);
 __decorate([
-  changedAttributeHost("replace-wrap"),
+  changedAttributeThis("value"),
   __metadata("design:type", Function),
-  __metadata("design:paramtypes", [String]),
+  __metadata("design:paramtypes", [Object, String, String]),
   __metadata("design:returntype", void 0)
-], SwcIf.prototype, "setReplaceWrap", null);
+], SwcIf.prototype, "setValue", 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, 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 { changedAttributeThis } from '../decorators/changedAttributeThis';\nimport { SwcUtils } from '../utils/Utils';\nimport { FunctionUtils, ActionExpression } from '@dooboostore/core';\nimport { ConvertUtils } from '@dooboostore/core-web';\nimport { SwcIfInterface } from '../types';\nimport { attributeThis, getAttributeValue } from '../decorators';\n\nclass SwcIf extends HTMLTemplateElement implements SwcIfInterface {\n  // id =\n  // @attributeThis('value')\n  _value: any;\n\n  @attributeThis('replace-wrap-start')\n  _replaceWrapStart: string | null;\n  @attributeThis('replace-wrap-end')\n  _replaceWrapEnd: string | null;\n\n  @attributeThis('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  @changedAttributeThis('value')\n  private setValue(value: any, o: string, n: string) {\n    this._value = value;\n    this.refresh(this._value);\n  }\n\n  // @changedAttributeThis('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

@@ -7,37 +7,52 @@ 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 { changedAttributeHost } from "../decorators/changedAttributeHost.js";
+import { changedAttributeThis } from "../decorators/changedAttributeThis.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 { attributeThis, 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);
   }
+  // @changedAttributeThis('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);
+  attributeThis("replace-wrap-start"),
+  __metadata("design:type", String)
+], SwcLoop.prototype, "_replaceWrapStart", void 0);
 __decorate([
-  attributeHost("replace-wrap"),
+  attributeThis("replace-wrap-end"),
   __metadata("design:type", String)
-], SwcLoop.prototype, "_replaceWrap", void 0);
+], SwcLoop.prototype, "_replaceWrapEnd", void 0);
 __decorate([
-  changedAttributeHost("value"),
+  changedAttributeThis("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 { changedAttributeThis } from '../decorators/changedAttributeThis';\nimport { SwcUtils } from '../utils/Utils';\nimport { FunctionUtils, ActionExpression } from '@dooboostore/core';\nimport { ConvertUtils } from '@dooboostore/core-web';\nimport { attributeThis, getAttributeValue } from '../decorators';\n\nclass SwcLoop extends HTMLTemplateElement {\n  _value: any[] = [];\n\n  @attributeThis('replace-wrap-start')\n  _replaceWrapStart: string | null;\n  @attributeThis('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  @changedAttributeThis('value')\n  private setValue(value: any, o: string, n: string) {\n    this._value = value;\n    this.refresh(this._value);\n  }\n\n  // @changedAttributeThis('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": []
 }