@dooboostore/simple-web-component 1.0.34 → 1.0.36

package/dist/esm/elements/register.js

@@ -7,7 +7,7 @@ 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 { getElementConfig, elementDefine, attributeHost, changedAttributeHost, getAttributeValue } from "../decorators/index.js";
+import { getElementConfig, elementDefine, attributeThis, changedAttributeThis, getAttributeValue } from "../decorators/index.js";
 import { SwcAppMixin } from "./SwcAppMixin.js";
 import { SwcUtils } from "../utils/Utils.js";
 import { FunctionUtils, ActionExpression } from "@dooboostore/core";
@@ -111,22 +111,38 @@ const registerAllElements = (w) => {
     elementDefine("swc-app", { window: w })
   ], SwcApp);
   let SwcIf = 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),
@@ -140,30 +156,38 @@ const registerAllElements = (w) => {
       }
       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() {
@@ -171,54 +195,68 @@ const registerAllElements = (w) => {
     }
   };
   __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);
   SwcIf = __decorate([
-    elementDefine("swc-if", { extends: "template", window: w })
+    elementDefine("swc-if", { extends: "template", window: w }),
+    __metadata("design:paramtypes", [])
   ], SwcIf);
   let SwcLoop = 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
           });
@@ -229,30 +267,95 @@ const registerAllElements = (w) => {
       }
       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 = [];
     }
@@ -261,27 +364,22 @@ const registerAllElements = (w) => {
     }
   };
   __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);
   SwcLoop = __decorate([
-    elementDefine("swc-loop", { extends: "template", window: w })
+    elementDefine("swc-loop", { extends: "template", window: w }),
+    __metadata("design:paramtypes", [])
   ], SwcLoop);
   let SwcChoose = class SwcChoose extends HTMLTemplateElement {
     get value() {
@@ -302,18 +400,28 @@ const registerAllElements = (w) => {
     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),
@@ -329,31 +437,27 @@ const registerAllElements = (w) => {
     }
     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;
@@ -372,12 +476,27 @@ const registerAllElements = (w) => {
       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() {
@@ -389,21 +508,19 @@ const registerAllElements = (w) => {
     }
   };
   __decorate([
-    attributeHost("replace-wrap"),
+    attributeThis("replace-wrap-start"),
     __metadata("design:type", String)
-  ], SwcChoose.prototype, "_replaceWrap", void 0);
+  ], SwcChoose.prototype, "_replaceWrapStart", void 0);
   __decorate([
-    changedAttributeHost("value"),
+    attributeThis("replace-wrap-end"),
+    __metadata("design:type", String)
+  ], SwcChoose.prototype, "_replaceWrapEnd", void 0);
+  __decorate([
+    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);
   SwcChoose = __decorate([
     elementDefine("swc-choose", { extends: "template", window: w }),
     __metadata("design:paramtypes", [])
@@ -422,9 +539,10 @@ const registerAllElements = (w) => {
     setValue(valueAttr) {
       this.executeAsync(this._value);
     }
-    setReplaceWrap() {
-      this.executeAsync(this._value);
-    }
+    // @changedAttributeThis('replace-wrap')
+    // private setReplaceWrap() {
+    //   this.executeAsync(this._value);
+    // }
     executeAsync(result = this._value) {
       if (result === void 0 || result === null) {
         this.refresh("default");
@@ -446,11 +564,19 @@ const registerAllElements = (w) => {
       }
     }
     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),
@@ -465,9 +591,8 @@ const registerAllElements = (w) => {
       return ae.getUnprocessedTemplate();
     }
     refresh(state = "default") {
-      console.log("rrrrrrrrrrrrrrrrr", state);
       this.cleanup();
-      const portal = this.parentElement;
+      const portal = SwcUtils.getParentContainer(this);
       if (!portal)
         return;
       const win = this.ownerDocument?.defaultView || window;
@@ -475,12 +600,16 @@ const registerAllElements = (w) => {
       const t = this.content.querySelector(`template[is="swc-${state}"]`);
       if (t) {
         let htmlString = t.innerHTML;
-        const groupArgs = { ...helperSet, $value: this._value, $state: state };
-        htmlString = this.replaceExpressions(htmlString, groupArgs, this, this._replaceWrap);
+        const groupArgs = { ...helperSet, $value: this._value, $state: state, $templateHost: this };
+        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;
         this._nodes = Array.from(content.childNodes);
+        this._nodes.forEach((node) => {
+          if (node instanceof HTMLElement)
+            node.__template_swc_host = this;
+        });
         portal.insertBefore(content, this.nextSibling);
       }
     }
@@ -493,25 +622,23 @@ const registerAllElements = (w) => {
     }
   };
   __decorate([
-    attributeHost("value"),
+    attributeThis("value"),
     __metadata("design:type", Object)
   ], SwcAsync.prototype, "_value", void 0);
   __decorate([
-    attributeHost("replace-wrap"),
+    attributeThis("replace-wrap-start"),
+    __metadata("design:type", String)
+  ], SwcAsync.prototype, "_replaceWrapStart", void 0);
+  __decorate([
+    attributeThis("replace-wrap-end"),
     __metadata("design:type", String)
-  ], SwcAsync.prototype, "_replaceWrap", void 0);
+  ], SwcAsync.prototype, "_replaceWrapEnd", void 0);
   __decorate([
-    changedAttributeHost("value"),
+    changedAttributeThis("value"),
     __metadata("design:type", Function),
     __metadata("design:paramtypes", [String]),
     __metadata("design:returntype", void 0)
   ], SwcAsync.prototype, "setValue", null);
-  __decorate([
-    changedAttributeHost("replace-wrap"),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
-    __metadata("design:returntype", void 0)
-  ], SwcAsync.prototype, "setReplaceWrap", null);
   SwcAsync = __decorate([
     elementDefine("swc-async", { extends: "template", window: w })
   ], SwcAsync);