@dooboostore/simple-web-component 1.0.11 → 1.0.13

package/dist/esm/decorators/index.js

@@ -0,0 +1,10 @@
+export * from "./addEventListener.js";
+export * from "./attribute.js";
+export * from "./elementDefine.js";
+export * from "./emitCustomEvent.js";
+export * from "./innerHtml.js";
+export * from "./lifecycles.js";
+export * from "./query.js";
+export * from "./queryAll.js";
+export * from "./state.js";
+//# sourceMappingURL=index.js.map

package/dist/esm/decorators/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/decorators/index.ts"],
+  "sourcesContent": ["export * from  './addEventListener'\nexport * from  './attribute'\nexport * from  './elementDefine'\nexport * from  './emitCustomEvent'\nexport * from  './innerHtml'\nexport * from  './lifecycles'\nexport * from  './query'\nexport * from  './queryAll'\nexport * from  './state'"],
+  "mappings": "AAAA,cAAe;AACf,cAAe;AACf,cAAe;AACf,cAAe;AACf,cAAe;AACf,cAAe;AACf,cAAe;AACf,cAAe;AACf,cAAe;",
+  "names": []
+}

package/dist/esm/elements/SwcChoose.js

@@ -8,61 +8,67 @@ var __metadata = function(k, v) {
   if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 import { attribute, elementDefine, onAttributeChanged } from "../index.js";
-import { SwcHTMLElementBase } from "./base/SwcHTMLElementBase.js";
-let SwcChoose = class SwcChoose2 extends SwcHTMLElementBase {
+import { SwcHTMLTemplateElementBase } from "./base/SwcHTMLTemplateElementBase.js";
+let SwcChoose = class SwcChoose2 extends SwcHTMLTemplateElementBase {
   constructor() {
     super();
-    this._placeholder = document.createComment("swc-choose-placeholder");
-    this._isShowing = true;
-    this._isInitialized = false;
-    this._observer = null;
-    this._swcValue = void 0;
+    this._endMarker = document.createComment("swc-choose-end");
+    this._value = void 0;
     this._branches = [];
     this._otherBranch = null;
-    this._branchInit = false;
   }
   onValueChange() {
     this.evaluate();
   }
-  set swcValue(val) {
-    this._swcValue = val;
+  set value(val) {
+    this._value = val;
+    this.onValueChange();
   }
-  get swcValue() {
-    return this._swcValue;
+  get value() {
+    return this._value;
   }
   connectedCallback() {
     if (this._isInitialized)
       return;
     this._isInitialized = true;
+    if (this.nextSibling !== this._endMarker) {
+      this.parentNode?.insertBefore(this._endMarker, this.nextSibling);
+    }
     this._initBranches();
-    this._observer = new MutationObserver(() => this.evaluate());
-    this._observer.observe(this, { attributes: true });
     this.evaluate();
   }
   _initBranches() {
-    if (this._branchInit)
-      return;
-    const children = Array.from(this.children);
-    children.forEach((c) => {
-      const isWhen = c.localName === "swc-when" || c.getAttribute("is")?.startsWith("swc-when-");
-      const isOther = c.localName === "swc-other" || c.getAttribute("is")?.startsWith("swc-other-");
-      const branch = {
-        tpl: c.cloneNode(true),
-        test: c.getAttribute("test")
-      };
-      if (isWhen)
-        this._branches.push(branch);
-      else if (isOther)
-        this._otherBranch = branch;
+    const content = this.content;
+    Array.from(content.children).forEach((c) => {
+      const tagName = c.localName.toLowerCase();
+      const isAttr = (c.getAttribute("is") || "").toLowerCase();
+      const isWhen = tagName === "swc-when" || isAttr.includes("swc-when");
+      const isOther = tagName === "swc-other" || isAttr.includes("swc-other");
+      if (isWhen || isOther) {
+        const branch = {
+          tpl: document.createDocumentFragment(),
+          test: c.getAttribute("test")
+        };
+        const source = c instanceof HTMLTemplateElement ? c.content : c;
+        Array.from(source.childNodes).forEach((child) => branch.tpl.appendChild(child.cloneNode(true)));
+        if (isWhen)
+          this._branches.push(branch);
+        else
+          this._otherBranch = branch;
+      }
     });
-    this._branchInit = true;
-  }
-  disconnectedCallback() {
-    this._observer?.disconnect();
   }
   evaluate() {
+    if (!this.isConnected)
+      return;
+    let curr = this.nextSibling;
+    while (curr && curr !== this._endMarker) {
+      const next = curr.nextSibling;
+      curr.parentElement?.removeChild(curr);
+      curr = next;
+    }
     let matchedBranch = null;
-    const chooseValue = this.getAttribute("swc-value") ?? this.getAttribute("value") ?? this._swcValue;
+    const chooseValue = this.getAttribute("value") ?? this._value;
     for (const branch of this._branches) {
       const testAttr = branch.test;
       if (testAttr === null || testAttr.includes("{{"))
@@ -77,7 +83,7 @@ let SwcChoose = class SwcChoose2 extends SwcHTMLElementBase {
           else if (testAttr === "false")
             isMet = false;
           else
-            isMet = !!new Function("return " + testAttr)();
+            isMet = !!new Function(`return ${testAttr}`)();
         } catch (e) {
           isMet = false;
         }
@@ -90,41 +96,27 @@ let SwcChoose = class SwcChoose2 extends SwcHTMLElementBase {
     if (!matchedBranch && this._otherBranch) {
       matchedBranch = this._otherBranch;
     }
-    if (!matchedBranch && this._isShowing) {
-      if (this.parentNode) {
-        this.parentNode.insertBefore(this._placeholder, this);
-        this.remove();
-        this._isShowing = false;
-      }
-    } else if (matchedBranch) {
-      if (!this._isShowing) {
-        if (this._placeholder.parentNode) {
-          this._placeholder.parentNode.insertBefore(this, this._placeholder);
-          this._placeholder.remove();
-          this._isShowing = true;
-        }
-      }
-      if (this._isShowing) {
-        this.innerHTML = "";
-        const clone = matchedBranch.tpl.cloneNode(true);
-        clone.style.display = "contents";
-        this.appendChild(clone);
-      }
+    if (matchedBranch) {
+      const clone = matchedBranch.tpl.cloneNode(true);
+      Array.from(clone.childNodes).forEach((node) => {
+        this.applyData(node, this._value);
+      });
+      this.parentNode?.insertBefore(clone, this._endMarker);
     }
   }
 };
 __decorate([
-  attribute("swc-value"),
+  attribute("value"),
   __metadata("design:type", Object)
-], SwcChoose.prototype, "_swcValue", void 0);
+], SwcChoose.prototype, "_value", void 0);
 __decorate([
-  onAttributeChanged("swc-value"),
+  onAttributeChanged("value"),
   __metadata("design:type", Function),
   __metadata("design:paramtypes", []),
   __metadata("design:returntype", void 0)
 ], SwcChoose.prototype, "onValueChange", null);
 SwcChoose = __decorate([
-  elementDefine({ name: "swc-choose" }),
+  elementDefine({ name: "swc-choose", extends: "template" }),
   __metadata("design:paramtypes", [])
 ], SwcChoose);
 export {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/elements/SwcChoose.ts"],
-  "sourcesContent": ["import { attribute, elementDefine, onAttributeChanged } from '../index';\nimport { SwcHTMLElementBase } from './base/SwcHTMLElementBase';\n\ninterface Branch {\n  tpl: HTMLElement;\n  test: string | null;\n}\n\n@elementDefine({ name: 'swc-choose' })\nexport class SwcChoose extends SwcHTMLElementBase {\n  private _placeholder = document.createComment('swc-choose-placeholder');\n  private _isShowing = true;\n  private _isInitialized = false;\n  private _observer: MutationObserver | null = null;\n\n  @attribute('swc-value')\n  _swcValue: any = undefined;\n\n  private _branches: Branch[] = [];\n  private _otherBranch: Branch | null = null;\n  private _branchInit = false;\n\n  constructor() {\n    super();\n  }\n\n  @onAttributeChanged('swc-value')\n  onValueChange() {\n    this.evaluate();\n  }\n\n  set swcValue(val: any) {\n    this._swcValue = val;\n  }\n\n  get swcValue() {\n    return this._swcValue;\n  }\n\n  connectedCallback() {\n    if (this._isInitialized) return;\n    this._isInitialized = true;\n    this._initBranches();\n    this._observer = new MutationObserver(() => this.evaluate());\n    this._observer.observe(this, { attributes: true });\n    this.evaluate();\n  }\n\n  private _initBranches() {\n    if (this._branchInit) return;\n    const children = Array.from(this.children);\n    children.forEach(c => {\n      const isWhen = c.localName === 'swc-when' || c.getAttribute('is')?.startsWith('swc-when-');\n      const isOther = c.localName === 'swc-other' || c.getAttribute('is')?.startsWith('swc-other-');\n      const branch: Branch = {\n        tpl: c.cloneNode(true) as HTMLElement,\n        test: c.getAttribute('test')\n      };\n      if (isWhen) this._branches.push(branch);\n      else if (isOther) this._otherBranch = branch;\n    });\n    this._branchInit = true;\n  }\n\n  disconnectedCallback() {\n    this._observer?.disconnect();\n  }\n\n  private evaluate() {\n    let matchedBranch: Branch | null = null;\n    const chooseValue = this.getAttribute('swc-value') ?? this.getAttribute('value') ?? this._swcValue;\n\n    for (const branch of this._branches) {\n      const testAttr = branch.test;\n      if (testAttr === null || testAttr.includes('{{')) continue;\n\n      let isMet = false;\n      if (chooseValue !== undefined && chooseValue !== null) {\n        isMet = String(chooseValue) === String(testAttr);\n      } else {\n        try {\n          if (testAttr === 'true') isMet = true;\n          else if (testAttr === 'false') isMet = false;\n          else isMet = !!new Function('return ' + testAttr)();\n        } catch (e) {\n          isMet = false;\n        }\n      }\n\n      if (isMet) {\n        matchedBranch = branch;\n        break;\n      }\n    }\n\n    if (!matchedBranch && this._otherBranch) {\n      matchedBranch = this._otherBranch;\n    }\n\n    if (!matchedBranch && this._isShowing) {\n      if (this.parentNode) {\n        this.parentNode.insertBefore(this._placeholder, this);\n        this.remove();\n        this._isShowing = false;\n      }\n    } else if (matchedBranch) {\n      if (!this._isShowing) {\n        if (this._placeholder.parentNode) {\n          this._placeholder.parentNode.insertBefore(this, this._placeholder);\n          this._placeholder.remove();\n          this._isShowing = true;\n        }\n      }\n      if (this._isShowing) {\n        this.innerHTML = '';\n        const clone = matchedBranch.tpl.cloneNode(true) as HTMLElement;\n        (clone as any).style.display = 'contents';\n        this.appendChild(clone);\n      }\n    }\n  }\n}\n"],
-  "mappings": ";;;;;;;;;AAAA,SAAS,WAAW,eAAe,0BAA0B;AAC7D,SAAS,0BAA0B;AAQ5B,IAAM,YAAN,MAAMA,mBAAkB,mBAAkB;EAa/C,cAAA;AACE,UAAK;AAbC,SAAA,eAAe,SAAS,cAAc,wBAAwB;AAC9D,SAAA,aAAa;AACb,SAAA,iBAAiB;AACjB,SAAA,YAAqC;AAG7C,SAAA,YAAiB;AAET,SAAA,YAAsB,CAAA;AACtB,SAAA,eAA8B;AAC9B,SAAA,cAAc;EAItB;EAGA,gBAAa;AACX,SAAK,SAAQ;EACf;EAEA,IAAI,SAAS,KAAQ;AACnB,SAAK,YAAY;EACnB;EAEA,IAAI,WAAQ;AACV,WAAO,KAAK;EACd;EAEA,oBAAiB;AACf,QAAI,KAAK;AAAgB;AACzB,SAAK,iBAAiB;AACtB,SAAK,cAAa;AAClB,SAAK,YAAY,IAAI,iBAAiB,MAAM,KAAK,SAAQ,CAAE;AAC3D,SAAK,UAAU,QAAQ,MAAM,EAAE,YAAY,KAAI,CAAE;AACjD,SAAK,SAAQ;EACf;EAEQ,gBAAa;AACnB,QAAI,KAAK;AAAa;AACtB,UAAM,WAAW,MAAM,KAAK,KAAK,QAAQ;AACzC,aAAS,QAAQ,OAAI;AACnB,YAAM,SAAS,EAAE,cAAc,cAAc,EAAE,aAAa,IAAI,GAAG,WAAW,WAAW;AACzF,YAAM,UAAU,EAAE,cAAc,eAAe,EAAE,aAAa,IAAI,GAAG,WAAW,YAAY;AAC5F,YAAM,SAAiB;QACrB,KAAK,EAAE,UAAU,IAAI;QACrB,MAAM,EAAE,aAAa,MAAM;;AAE7B,UAAI;AAAQ,aAAK,UAAU,KAAK,MAAM;eAC7B;AAAS,aAAK,eAAe;IACxC,CAAC;AACD,SAAK,cAAc;EACrB;EAEA,uBAAoB;AAClB,SAAK,WAAW,WAAU;EAC5B;EAEQ,WAAQ;AACd,QAAI,gBAA+B;AACnC,UAAM,cAAc,KAAK,aAAa,WAAW,KAAK,KAAK,aAAa,OAAO,KAAK,KAAK;AAEzF,eAAW,UAAU,KAAK,WAAW;AACnC,YAAM,WAAW,OAAO;AACxB,UAAI,aAAa,QAAQ,SAAS,SAAS,IAAI;AAAG;AAElD,UAAI,QAAQ;AACZ,UAAI,gBAAgB,UAAa,gBAAgB,MAAM;AACrD,gBAAQ,OAAO,WAAW,MAAM,OAAO,QAAQ;MACjD,OAAO;AACL,YAAI;AACF,cAAI,aAAa;AAAQ,oBAAQ;mBACxB,aAAa;AAAS,oBAAQ;;AAClC,oBAAQ,CAAC,CAAC,IAAI,SAAS,YAAY,QAAQ,EAAC;QACnD,SAAS,GAAG;AACV,kBAAQ;QACV;MACF;AAEA,UAAI,OAAO;AACT,wBAAgB;AAChB;MACF;IACF;AAEA,QAAI,CAAC,iBAAiB,KAAK,cAAc;AACvC,sBAAgB,KAAK;IACvB;AAEA,QAAI,CAAC,iBAAiB,KAAK,YAAY;AACrC,UAAI,KAAK,YAAY;AACnB,aAAK,WAAW,aAAa,KAAK,cAAc,IAAI;AACpD,aAAK,OAAM;AACX,aAAK,aAAa;MACpB;IACF,WAAW,eAAe;AACxB,UAAI,CAAC,KAAK,YAAY;AACpB,YAAI,KAAK,aAAa,YAAY;AAChC,eAAK,aAAa,WAAW,aAAa,MAAM,KAAK,YAAY;AACjE,eAAK,aAAa,OAAM;AACxB,eAAK,aAAa;QACpB;MACF;AACA,UAAI,KAAK,YAAY;AACnB,aAAK,YAAY;AACjB,cAAM,QAAQ,cAAc,IAAI,UAAU,IAAI;AAC7C,cAAc,MAAM,UAAU;AAC/B,aAAK,YAAY,KAAK;MACxB;IACF;EACF;;AAxGA,WAAA;EADC,UAAU,WAAW;;;AAYtB,WAAA;EADC,mBAAmB,WAAW;;;;;AAjBpB,YAAS,WAAA;EADrB,cAAc,EAAE,MAAM,aAAY,CAAE;;GACxB,SAAS;",
+  "sourcesContent": ["import { attribute, elementDefine, onAttributeChanged } from '../index';\nimport { SwcHTMLTemplateElementBase } from './base/SwcHTMLTemplateElementBase';\n\ninterface Branch {\n  tpl: DocumentFragment;\n  test: string | null;\n}\n\n@elementDefine({ name: 'swc-choose', extends: 'template' })\nexport class SwcChoose extends SwcHTMLTemplateElementBase {\n  private _endMarker = document.createComment('swc-choose-end');\n\n  @attribute('value')\n  _value: any = undefined;\n\n  private _branches: Branch[] = [];\n  private _otherBranch: Branch | null = null;\n\n  constructor() {\n    super();\n  }\n\n  @onAttributeChanged('value')\n  onValueChange() {\n    this.evaluate();\n  }\n\n  set value(val: any) {\n    this._value = val;\n    this.onValueChange();\n  }\n\n  get value() {\n    return this._value;\n  }\n\n  connectedCallback() {\n    if (this._isInitialized) return;\n    this._isInitialized = true;\n\n    if (this.nextSibling !== this._endMarker) {\n      this.parentNode?.insertBefore(this._endMarker, this.nextSibling);\n    }\n    this._initBranches();\n    this.evaluate();\n  }\n\n  private _initBranches() {\n    const content = this.content;\n    Array.from(content.children).forEach(c => {\n      const tagName = c.localName.toLowerCase();\n      const isAttr = (c.getAttribute('is') || '').toLowerCase();\n\n      const isWhen = tagName === 'swc-when' || isAttr.includes('swc-when');\n      const isOther = tagName === 'swc-other' || isAttr.includes('swc-other');\n\n      if (isWhen || isOther) {\n        const branch: Branch = {\n          tpl: document.createDocumentFragment(),\n          test: c.getAttribute('test')\n        };\n\n        const source = c instanceof HTMLTemplateElement ? c.content : c;\n        Array.from(source.childNodes).forEach(child => branch.tpl.appendChild(child.cloneNode(true)));\n\n        if (isWhen) this._branches.push(branch);\n        else this._otherBranch = branch;\n      }\n    });\n  }\n\n  private evaluate() {\n    if (!this.isConnected) return;\n\n    let curr = this.nextSibling;\n    while (curr && curr !== this._endMarker) {\n      const next = curr.nextSibling;\n      curr.parentElement?.removeChild(curr);\n      curr = next;\n    }\n\n    let matchedBranch: Branch | null = null;\n    const chooseValue = this.getAttribute('value') ?? this._value;\n\n    for (const branch of this._branches) {\n      const testAttr = branch.test;\n      if (testAttr === null || testAttr.includes('{{')) continue;\n\n      let isMet = false;\n      if (chooseValue !== undefined && chooseValue !== null) {\n        isMet = String(chooseValue) === String(testAttr);\n      } else {\n        try {\n          if (testAttr === 'true') isMet = true;\n          else if (testAttr === 'false') isMet = false;\n          else isMet = !!new Function(`return ${testAttr}`)();\n        } catch (e) {\n          isMet = false;\n        }\n      }\n\n      if (isMet) {\n        matchedBranch = branch;\n        break;\n      }\n    }\n\n    if (!matchedBranch && this._otherBranch) {\n      matchedBranch = this._otherBranch;\n    }\n\n    if (matchedBranch) {\n      const clone = matchedBranch.tpl.cloneNode(true);\n      Array.from(clone.childNodes).forEach(node => {\n        this.applyData(node, this._value);\n      });\n      this.parentNode?.insertBefore(clone, this._endMarker);\n    }\n  }\n}\n"],
+  "mappings": ";;;;;;;;;AAAA,SAAS,WAAW,eAAe,0BAA0B;AAC7D,SAAS,kCAAkC;AAQpC,IAAM,YAAN,MAAMA,mBAAkB,2BAA0B;EASvD,cAAA;AACE,UAAK;AATC,SAAA,aAAa,SAAS,cAAc,gBAAgB;AAG5D,SAAA,SAAc;AAEN,SAAA,YAAsB,CAAA;AACtB,SAAA,eAA8B;EAItC;EAGA,gBAAa;AACX,SAAK,SAAQ;EACf;EAEA,IAAI,MAAM,KAAQ;AAChB,SAAK,SAAS;AACd,SAAK,cAAa;EACpB;EAEA,IAAI,QAAK;AACP,WAAO,KAAK;EACd;EAEA,oBAAiB;AACf,QAAI,KAAK;AAAgB;AACzB,SAAK,iBAAiB;AAEtB,QAAI,KAAK,gBAAgB,KAAK,YAAY;AACxC,WAAK,YAAY,aAAa,KAAK,YAAY,KAAK,WAAW;IACjE;AACA,SAAK,cAAa;AAClB,SAAK,SAAQ;EACf;EAEQ,gBAAa;AACnB,UAAM,UAAU,KAAK;AACrB,UAAM,KAAK,QAAQ,QAAQ,EAAE,QAAQ,OAAI;AACvC,YAAM,UAAU,EAAE,UAAU,YAAW;AACvC,YAAM,UAAU,EAAE,aAAa,IAAI,KAAK,IAAI,YAAW;AAEvD,YAAM,SAAS,YAAY,cAAc,OAAO,SAAS,UAAU;AACnE,YAAM,UAAU,YAAY,eAAe,OAAO,SAAS,WAAW;AAEtE,UAAI,UAAU,SAAS;AACrB,cAAM,SAAiB;UACrB,KAAK,SAAS,uBAAsB;UACpC,MAAM,EAAE,aAAa,MAAM;;AAG7B,cAAM,SAAS,aAAa,sBAAsB,EAAE,UAAU;AAC9D,cAAM,KAAK,OAAO,UAAU,EAAE,QAAQ,WAAS,OAAO,IAAI,YAAY,MAAM,UAAU,IAAI,CAAC,CAAC;AAE5F,YAAI;AAAQ,eAAK,UAAU,KAAK,MAAM;;AACjC,eAAK,eAAe;MAC3B;IACF,CAAC;EACH;EAEQ,WAAQ;AACd,QAAI,CAAC,KAAK;AAAa;AAEvB,QAAI,OAAO,KAAK;AAChB,WAAO,QAAQ,SAAS,KAAK,YAAY;AACvC,YAAM,OAAO,KAAK;AAClB,WAAK,eAAe,YAAY,IAAI;AACpC,aAAO;IACT;AAEA,QAAI,gBAA+B;AACnC,UAAM,cAAc,KAAK,aAAa,OAAO,KAAK,KAAK;AAEvD,eAAW,UAAU,KAAK,WAAW;AACnC,YAAM,WAAW,OAAO;AACxB,UAAI,aAAa,QAAQ,SAAS,SAAS,IAAI;AAAG;AAElD,UAAI,QAAQ;AACZ,UAAI,gBAAgB,UAAa,gBAAgB,MAAM;AACrD,gBAAQ,OAAO,WAAW,MAAM,OAAO,QAAQ;MACjD,OAAO;AACL,YAAI;AACF,cAAI,aAAa;AAAQ,oBAAQ;mBACxB,aAAa;AAAS,oBAAQ;;AAClC,oBAAQ,CAAC,CAAC,IAAI,SAAS,UAAU,QAAQ,EAAE,EAAC;QACnD,SAAS,GAAG;AACV,kBAAQ;QACV;MACF;AAEA,UAAI,OAAO;AACT,wBAAgB;AAChB;MACF;IACF;AAEA,QAAI,CAAC,iBAAiB,KAAK,cAAc;AACvC,sBAAgB,KAAK;IACvB;AAEA,QAAI,eAAe;AACjB,YAAM,QAAQ,cAAc,IAAI,UAAU,IAAI;AAC9C,YAAM,KAAK,MAAM,UAAU,EAAE,QAAQ,UAAO;AAC1C,aAAK,UAAU,MAAM,KAAK,MAAM;MAClC,CAAC;AACD,WAAK,YAAY,aAAa,OAAO,KAAK,UAAU;IACtD;EACF;;AAzGA,WAAA;EADC,UAAU,OAAO;;;AAWlB,WAAA;EADC,mBAAmB,OAAO;;;;;AAbhB,YAAS,WAAA;EADrB,cAAc,EAAE,MAAM,cAAc,SAAS,WAAU,CAAE;;GAC7C,SAAS;",
   "names": ["SwcChoose"]
 }

package/dist/esm/elements/SwcForOf.js

@@ -7,130 +7,79 @@ 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 { attribute, elementDefine, innerHtml, onAttributeChanged } from "../index.js";
-import { SwcHTMLElementBase } from "./base/SwcHTMLElementBase.js";
-let SwcForOf = class SwcForOf2 extends SwcHTMLElementBase {
+import { attribute, elementDefine, onAttributeChanged } from "../index.js";
+import { SwcHTMLTemplateElementBase } from "./base/SwcHTMLTemplateElementBase.js";
+let SwcForOf = class SwcForOf2 extends SwcHTMLTemplateElementBase {
   constructor() {
-    super();
-    this._placeholder = document.createComment("swc-for-of-placeholder");
-    this._isShowing = true;
-    this._isConnected = false;
-    this._swcValue = [];
+    super(...arguments);
+    this._endMarker = document.createComment("swc-for-of-end");
     this._rowNodes = [];
+    this._value = [];
   }
   onValueChange() {
-    if (!Array.isArray(this._swcValue))
-      this._swcValue = [];
-    if (!this._swcValue.__swc_is_proxy) {
-      this._swcValue = this.createReactiveProxy(this._swcValue, () => this.renderAll(), (idx, v) => this.updateSingleRow(idx, v));
+    if (!Array.isArray(this._value))
+      this._value = [];
+    if (!this._value.__swc_is_proxy) {
+      this._value = this.createReactiveProxy(this._value, () => this.render(), (idx, v) => this.updateSingleRow(idx, v));
     }
-    if (this._isConnected) {
-      if (this._masterTplNodes.length === 0)
-        this.initCore();
-      this.evaluate();
-    }
-  }
-  set swcValue(val) {
-    this._swcValue = val;
+    this.render();
   }
-  get swcValue() {
-    return this._swcValue;
+  set value(val) {
+    this._value = val;
+    this.onValueChange();
   }
-  renderTemplate() {
-    return `
-      <style>:host { display: contents; }</style>
-      <slot id="tpl-slot" style="display:none;"></slot>
-    `;
+  get value() {
+    return this._value;
   }
   connectedCallback() {
-    this._isConnected = true;
-    this.initCore();
-    this.evaluate();
-  }
-  evaluate() {
-    if (this._masterTplNodes.length === 0)
-      this.initCore();
-    const hasData = Array.isArray(this._swcValue) && this._swcValue.length > 0;
-    if (!hasData && this._isShowing) {
-      if (this.parentNode) {
-        this.parentNode.insertBefore(this._placeholder, this);
-        this.remove();
-        this._isShowing = false;
-      }
-    } else if (hasData) {
-      if (!this._isShowing) {
-        if (this._placeholder.parentNode) {
-          this._placeholder.parentNode.insertBefore(this, this._placeholder);
-          this._placeholder.remove();
-          this._isShowing = true;
-        }
-      }
-      this.renderAll();
+    if (this._isInitialized)
+      return;
+    this._isInitialized = true;
+    if (this.nextSibling !== this._endMarker) {
+      this.parentNode?.insertBefore(this._endMarker, this.nextSibling);
     }
+    this.render();
   }
   updateSingleRow(index, newValue) {
-    if (!this._isShowing)
-      return;
     const nodes = this._rowNodes[index];
     if (nodes && nodes.length > 0) {
-      nodes.forEach((node) => this.applyData(node, newValue, index));
-    } else if (index === this._rowNodes.length) {
-      this.renderRow(newValue, index);
-    }
-  }
-  addRow(item) {
-    this._swcValue.push(item);
-  }
-  removeRow(index) {
-    if (index < 0 || index >= this._rowNodes.length)
-      return;
-    this._rowNodes[index].forEach((node) => node.remove());
-    this._rowNodes.splice(index, 1);
-    this._swcValue.splice(index, 1);
-    for (let i = index; i < this._rowNodes.length; i++) {
-      this._rowNodes[i].forEach((node) => this.applyData(node, this._swcValue[i], i));
+      nodes.forEach((node) => {
+        this.applyData(node, newValue, index);
+      });
+    } else {
+      this.render();
     }
-    this.evaluate();
   }
-  renderRow(item, index) {
-    if (this._masterTplNodes.length === 0)
+  render() {
+    if (!this.isConnected)
       return;
-    const currentNodes = [];
-    this._masterTplNodes.forEach((tplNode) => {
-      const clone = tplNode.cloneNode(true);
-      this.appendChild(clone);
-      this.applyData(clone, item, index);
-      currentNodes.push(clone);
-    });
-    this._rowNodes[index] = currentNodes;
-  }
-  renderAll() {
-    this.innerHTML = "";
+    this._rowNodes.forEach((nodes) => nodes.forEach((n) => n.parentElement?.removeChild(n)));
     this._rowNodes = [];
-    if (Array.isArray(this._swcValue)) {
-      this._swcValue.forEach((item, index) => this.renderRow(item, index));
+    if (Array.isArray(this._value)) {
+      this._value.forEach((item, index) => {
+        const clone = this.content.cloneNode(true);
+        const currentNodes = Array.from(clone.childNodes);
+        currentNodes.forEach((node) => {
+          this.applyData(node, item, index);
+        });
+        this.parentNode?.insertBefore(clone, this._endMarker);
+        this._rowNodes[index] = currentNodes;
+      });
     }
   }
 };
 __decorate([
-  attribute("swc-value"),
+  attribute("value"),
   __metadata("design:type", Array)
-], SwcForOf.prototype, "_swcValue", void 0);
+], SwcForOf.prototype, "_value", void 0);
 __decorate([
-  onAttributeChanged("swc-value"),
+  onAttributeChanged("value"),
   __metadata("design:type", Function),
   __metadata("design:paramtypes", []),
   __metadata("design:returntype", void 0)
 ], SwcForOf.prototype, "onValueChange", null);
-__decorate([
-  innerHtml({ useShadow: true }),
-  __metadata("design:type", Function),
-  __metadata("design:paramtypes", []),
-  __metadata("design:returntype", void 0)
-], SwcForOf.prototype, "renderTemplate", null);
 SwcForOf = __decorate([
-  elementDefine({ name: "swc-for-of" }),
-  __metadata("design:paramtypes", [])
+  elementDefine({ name: "swc-for-of", extends: "template" })
 ], SwcForOf);
 export {
   SwcForOf

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/elements/SwcForOf.ts"],
-  "sourcesContent": ["import { attribute, elementDefine, innerHtml, onAttributeChanged } from '../index';\nimport { SwcHTMLElementBase } from './base/SwcHTMLElementBase';\n\n@elementDefine({ name: 'swc-for-of' })\nexport class SwcForOf extends SwcHTMLElementBase {\n  private _placeholder = document.createComment('swc-for-of-placeholder');\n  private _isShowing = true;\n  private _isConnected = false;\n\n  @attribute('swc-value')\n  _swcValue: any[] = [];\n\n  private _rowNodes: Node[][] = [];\n\n  constructor() {\n    super();\n  }\n\n  @onAttributeChanged('swc-value')\n  onValueChange() {\n    if (!Array.isArray(this._swcValue)) this._swcValue = [];\n\n    // 이미 Proxy가 아닌 경우에만 새 Proxy 생성\n    if (!(this._swcValue as any).__swc_is_proxy) {\n      this._swcValue = this.createReactiveProxy(\n        this._swcValue,\n        () => this.renderAll(),\n        (idx, v) => this.updateSingleRow(idx, v)\n      );\n    }\n\n    // connectedCallback 이후에만 렌더링 (DOM이 준비된 상태)\n    if (this._isConnected) {\n      if (this._masterTplNodes.length === 0) this.initCore();\n      this.evaluate();\n    }\n  }\n\n  set swcValue(val: any[]) {\n    this._swcValue = val;\n  }\n\n  get swcValue(): any[] {\n    return this._swcValue;\n  }\n\n  @innerHtml({ useShadow: true })\n  renderTemplate() {\n    return `\n      <style>:host { display: contents; }</style>\n      <slot id=\"tpl-slot\" style=\"display:none;\"></slot>\n    `;\n  }\n\n  connectedCallback() {\n    this._isConnected = true;\n    this.initCore();\n    this.evaluate();\n  }\n\n  private evaluate() {\n    if (this._masterTplNodes.length === 0) this.initCore();\n\n    const hasData = Array.isArray(this._swcValue) && this._swcValue.length > 0;\n\n    if (!hasData && this._isShowing) {\n      if (this.parentNode) {\n        this.parentNode.insertBefore(this._placeholder, this);\n        this.remove();\n        this._isShowing = false;\n      }\n    } else if (hasData) {\n      if (!this._isShowing) {\n        if (this._placeholder.parentNode) {\n          this._placeholder.parentNode.insertBefore(this, this._placeholder);\n          this._placeholder.remove();\n          this._isShowing = true;\n        }\n      }\n      this.renderAll();\n    }\n  }\n\n  public updateSingleRow(index: number, newValue: any) {\n    if (!this._isShowing) return;\n    const nodes = this._rowNodes[index];\n    if (nodes && nodes.length > 0) {\n      nodes.forEach(node => this.applyData(node, newValue, index));\n    } else if (index === this._rowNodes.length) {\n      this.renderRow(newValue, index);\n    }\n  }\n\n  public addRow(item: any) {\n    this._swcValue.push(item);\n  }\n\n  public removeRow(index: number) {\n    if (index < 0 || index >= this._rowNodes.length) return;\n\n    this._rowNodes[index].forEach(node => (node as Element).remove());\n    this._rowNodes.splice(index, 1);\n    this._swcValue.splice(index, 1);\n\n    for (let i = index; i < this._rowNodes.length; i++) {\n      this._rowNodes[i].forEach(node => this.applyData(node, this._swcValue[i], i));\n    }\n\n    this.evaluate();\n  }\n\n  private renderRow(item: any, index: number) {\n    if (this._masterTplNodes.length === 0) return;\n    const currentNodes: Node[] = [];\n    this._masterTplNodes.forEach(tplNode => {\n      const clone = tplNode.cloneNode(true);\n      this.appendChild(clone);\n      this.applyData(clone, item, index);\n      currentNodes.push(clone);\n    });\n    this._rowNodes[index] = currentNodes;\n  }\n\n  private renderAll() {\n    this.innerHTML = '';\n    this._rowNodes = [];\n    if (Array.isArray(this._swcValue)) {\n      this._swcValue.forEach((item, index) => this.renderRow(item, index));\n    }\n  }\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { attribute, elementDefine, onAttributeChanged } from '../index';\nimport { SwcHTMLTemplateElementBase } from './base/SwcHTMLTemplateElementBase';\n\n@elementDefine({ name: 'swc-for-of', extends: 'template' })\nexport class SwcForOf extends SwcHTMLTemplateElementBase {\n  private _endMarker = document.createComment('swc-for-of-end');\n  private _rowNodes: Node[][] = [];\n\n  @attribute('value')\n  _value: any[] = [];\n\n  @onAttributeChanged('value')\n  onValueChange() {\n    if (!Array.isArray(this._value)) this._value = [];\n    if (!(this._value as any).__swc_is_proxy) {\n      this._value = this.createReactiveProxy(\n        this._value,\n        () => this.render(),\n        (idx, v) => this.updateSingleRow(idx, v)\n      );\n    }\n    this.render();\n  }\n\n  set value(val: any[]) {\n    this._value = val;\n    this.onValueChange();\n  }\n\n  get value(): any[] {\n    return this._value;\n  }\n\n  connectedCallback() {\n    if (this._isInitialized) return;\n    this._isInitialized = true;\n\n    if (this.nextSibling !== this._endMarker) {\n      this.parentNode?.insertBefore(this._endMarker, this.nextSibling);\n    }\n    this.render();\n  }\n\n  public updateSingleRow(index: number, newValue: any) {\n    const nodes = this._rowNodes[index];\n    if (nodes && nodes.length > 0) {\n      nodes.forEach(node => {\n        this.applyData(node, newValue, index);\n      });\n    } else {\n      this.render();\n    }\n  }\n\n  private render() {\n    if (!this.isConnected) return;\n\n    // Remove existing rows\n    this._rowNodes.forEach(nodes => nodes.forEach(n => n.parentElement?.removeChild(n)));\n    this._rowNodes = [];\n\n    if (Array.isArray(this._value)) {\n      this._value.forEach((item, index) => {\n        const clone = this.content.cloneNode(true);\n        const currentNodes: Node[] = Array.from(clone.childNodes);\n\n        currentNodes.forEach(node => {\n          this.applyData(node, item, index);\n        });\n\n        this.parentNode?.insertBefore(clone, this._endMarker);\n        this._rowNodes[index] = currentNodes;\n      });\n    }\n  }\n}\n"],
+  "mappings": ";;;;;;;;;AAAA,SAAS,WAAW,eAAe,0BAA0B;AAC7D,SAAS,kCAAkC;AAGpC,IAAM,WAAN,MAAMA,kBAAiB,2BAA0B;EAAjD,cAAA;;AACG,SAAA,aAAa,SAAS,cAAc,gBAAgB;AACpD,SAAA,YAAsB,CAAA;AAG9B,SAAA,SAAgB,CAAA;EAkElB;EA/DE,gBAAa;AACX,QAAI,CAAC,MAAM,QAAQ,KAAK,MAAM;AAAG,WAAK,SAAS,CAAA;AAC/C,QAAI,CAAE,KAAK,OAAe,gBAAgB;AACxC,WAAK,SAAS,KAAK,oBACjB,KAAK,QACL,MAAM,KAAK,OAAM,GACjB,CAAC,KAAK,MAAM,KAAK,gBAAgB,KAAK,CAAC,CAAC;IAE5C;AACA,SAAK,OAAM;EACb;EAEA,IAAI,MAAM,KAAU;AAClB,SAAK,SAAS;AACd,SAAK,cAAa;EACpB;EAEA,IAAI,QAAK;AACP,WAAO,KAAK;EACd;EAEA,oBAAiB;AACf,QAAI,KAAK;AAAgB;AACzB,SAAK,iBAAiB;AAEtB,QAAI,KAAK,gBAAgB,KAAK,YAAY;AACxC,WAAK,YAAY,aAAa,KAAK,YAAY,KAAK,WAAW;IACjE;AACA,SAAK,OAAM;EACb;EAEO,gBAAgB,OAAe,UAAa;AACjD,UAAM,QAAQ,KAAK,UAAU,KAAK;AAClC,QAAI,SAAS,MAAM,SAAS,GAAG;AAC7B,YAAM,QAAQ,UAAO;AACnB,aAAK,UAAU,MAAM,UAAU,KAAK;MACtC,CAAC;IACH,OAAO;AACL,WAAK,OAAM;IACb;EACF;EAEQ,SAAM;AACZ,QAAI,CAAC,KAAK;AAAa;AAGvB,SAAK,UAAU,QAAQ,WAAS,MAAM,QAAQ,OAAK,EAAE,eAAe,YAAY,CAAC,CAAC,CAAC;AACnF,SAAK,YAAY,CAAA;AAEjB,QAAI,MAAM,QAAQ,KAAK,MAAM,GAAG;AAC9B,WAAK,OAAO,QAAQ,CAAC,MAAM,UAAS;AAClC,cAAM,QAAQ,KAAK,QAAQ,UAAU,IAAI;AACzC,cAAM,eAAuB,MAAM,KAAK,MAAM,UAAU;AAExD,qBAAa,QAAQ,UAAO;AAC1B,eAAK,UAAU,MAAM,MAAM,KAAK;QAClC,CAAC;AAED,aAAK,YAAY,aAAa,OAAO,KAAK,UAAU;AACpD,aAAK,UAAU,KAAK,IAAI;MAC1B,CAAC;IACH;EACF;;AAjEA,WAAA;EADC,UAAU,OAAO;;;AAIlB,WAAA;EADC,mBAAmB,OAAO;;;;;AAPhB,WAAQ,WAAA;EADpB,cAAc,EAAE,MAAM,cAAc,SAAS,WAAU,CAAE;GAC7C,QAAQ;",
   "names": ["SwcForOf"]
 }

package/dist/esm/elements/SwcIf.js

@@ -8,31 +8,43 @@ var __metadata = function(k, v) {
   if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 import { attribute, elementDefine, onAttributeChanged } from "../index.js";
-import { SwcHTMLElementBase } from "./base/SwcHTMLElementBase.js";
-let SwcIf = class SwcIf2 extends SwcHTMLElementBase {
+import { SwcHTMLTemplateElementBase } from "./base/SwcHTMLTemplateElementBase.js";
+let SwcIf = class SwcIf2 extends SwcHTMLTemplateElementBase {
   constructor() {
-    super();
-    this._placeholder = document.createComment("swc-if-placeholder");
-    this._isShowing = true;
-    this._swcValue = false;
+    super(...arguments);
+    this._endMarker = document.createComment("swc-if-end");
+    this._value = false;
   }
   onValueChange() {
-    this.evaluate();
+    this.render();
   }
-  set swcValue(val) {
-    this._swcValue = val;
+  set value(val) {
+    this._value = val;
+    this.onValueChange();
   }
-  get swcValue() {
-    return this._swcValue;
+  get value() {
+    return this._value;
   }
   connectedCallback() {
-    this.evaluate();
+    if (this._isInitialized)
+      return;
+    this._isInitialized = true;
+    if (this.nextSibling !== this._endMarker) {
+      this.parentNode?.insertBefore(this._endMarker, this.nextSibling);
+    }
+    this.render();
   }
-  evaluate() {
-    const attrValue = this.getAttribute("swc-value") || this.getAttribute("value");
-    if (attrValue !== null && attrValue.includes("{{"))
+  render() {
+    if (!this.isConnected)
       return;
-    let displayValue = attrValue !== null ? attrValue : this._swcValue;
+    let curr = this.nextSibling;
+    while (curr && curr !== this._endMarker) {
+      const next = curr.nextSibling;
+      curr.parentElement?.removeChild(curr);
+      curr = next;
+    }
+    const attrValue = this.getAttribute("value");
+    let displayValue = attrValue !== null ? attrValue : this._value;
     let isTruthy = !!displayValue;
     if (typeof displayValue === "string") {
       if (displayValue === "false" || displayValue === "0" || displayValue === "")
@@ -45,34 +57,27 @@ let SwcIf = class SwcIf2 extends SwcHTMLElementBase {
         }
       }
     }
-    if (!isTruthy && this._isShowing) {
-      if (this.parentNode) {
-        this.parentNode.insertBefore(this._placeholder, this);
-        this.remove();
-        this._isShowing = false;
-      }
-    } else if (isTruthy && !this._isShowing) {
-      if (this._placeholder.parentNode) {
-        this._placeholder.parentNode.insertBefore(this, this._placeholder);
-        this._placeholder.remove();
-        this._isShowing = true;
-      }
+    if (isTruthy) {
+      const clone = this.content.cloneNode(true);
+      Array.from(clone.childNodes).forEach((node) => {
+        this.applyData(node, this._value);
+      });
+      this.parentNode?.insertBefore(clone, this._endMarker);
     }
   }
 };
 __decorate([
-  attribute("swc-value"),
+  attribute("value"),
   __metadata("design:type", Object)
-], SwcIf.prototype, "_swcValue", void 0);
+], SwcIf.prototype, "_value", void 0);
 __decorate([
-  onAttributeChanged("swc-value"),
+  onAttributeChanged("value"),
   __metadata("design:type", Function),
   __metadata("design:paramtypes", []),
   __metadata("design:returntype", void 0)
 ], SwcIf.prototype, "onValueChange", null);
 SwcIf = __decorate([
-  elementDefine({ name: "swc-if" }),
-  __metadata("design:paramtypes", [])
+  elementDefine({ name: "swc-if", extends: "template" })
 ], SwcIf);
 export {
   SwcIf

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/elements/SwcIf.ts"],
-  "sourcesContent": ["import { attribute, elementDefine, onAttributeChanged } from '../index';\nimport { SwcHTMLElementBase } from './base/SwcHTMLElementBase';\n\n@elementDefine({ name: 'swc-if' })\nexport class SwcIf extends SwcHTMLElementBase {\n  private _placeholder = document.createComment('swc-if-placeholder');\n  private _isShowing = true;\n\n  @attribute('swc-value')\n  _swcValue: any = false;\n\n  constructor() {\n    super();\n  }\n\n  @onAttributeChanged('swc-value')\n  onValueChange() {\n    this.evaluate();\n  }\n\n  set swcValue(val: any) {\n    this._swcValue = val;\n  }\n\n  get swcValue(): any {\n    return this._swcValue;\n  }\n\n  connectedCallback() {\n    this.evaluate();\n  }\n\n  private evaluate() {\n    const attrValue = this.getAttribute('swc-value') || this.getAttribute('value');\n    if (attrValue !== null && attrValue.includes('{{')) return;\n\n    let displayValue = attrValue !== null ? attrValue : this._swcValue;\n    let isTruthy = !!displayValue;\n    if (typeof displayValue === 'string') {\n      if (displayValue === 'false' || displayValue === '0' || displayValue === '') isTruthy = false;\n      else {\n        try {\n          isTruthy = !!new Function(`return ${displayValue}`)();\n        } catch (e) {\n          isTruthy = true;\n        }\n      }\n    }\n\n    if (!isTruthy && this._isShowing) {\n      if (this.parentNode) {\n        this.parentNode.insertBefore(this._placeholder, this);\n        this.remove();\n        this._isShowing = false;\n      }\n    } else if (isTruthy && !this._isShowing) {\n      if (this._placeholder.parentNode) {\n        this._placeholder.parentNode.insertBefore(this, this._placeholder);\n        this._placeholder.remove();\n        this._isShowing = true;\n      }\n    }\n  }\n}\n"],
-  "mappings": ";;;;;;;;;AAAA,SAAS,WAAW,eAAe,0BAA0B;AAC7D,SAAS,0BAA0B;AAG5B,IAAM,QAAN,MAAMA,eAAc,mBAAkB;EAO3C,cAAA;AACE,UAAK;AAPC,SAAA,eAAe,SAAS,cAAc,oBAAoB;AAC1D,SAAA,aAAa;AAGrB,SAAA,YAAiB;EAIjB;EAGA,gBAAa;AACX,SAAK,SAAQ;EACf;EAEA,IAAI,SAAS,KAAQ;AACnB,SAAK,YAAY;EACnB;EAEA,IAAI,WAAQ;AACV,WAAO,KAAK;EACd;EAEA,oBAAiB;AACf,SAAK,SAAQ;EACf;EAEQ,WAAQ;AACd,UAAM,YAAY,KAAK,aAAa,WAAW,KAAK,KAAK,aAAa,OAAO;AAC7E,QAAI,cAAc,QAAQ,UAAU,SAAS,IAAI;AAAG;AAEpD,QAAI,eAAe,cAAc,OAAO,YAAY,KAAK;AACzD,QAAI,WAAW,CAAC,CAAC;AACjB,QAAI,OAAO,iBAAiB,UAAU;AACpC,UAAI,iBAAiB,WAAW,iBAAiB,OAAO,iBAAiB;AAAI,mBAAW;WACnF;AACH,YAAI;AACF,qBAAW,CAAC,CAAC,IAAI,SAAS,UAAU,YAAY,EAAE,EAAC;QACrD,SAAS,GAAG;AACV,qBAAW;QACb;MACF;IACF;AAEA,QAAI,CAAC,YAAY,KAAK,YAAY;AAChC,UAAI,KAAK,YAAY;AACnB,aAAK,WAAW,aAAa,KAAK,cAAc,IAAI;AACpD,aAAK,OAAM;AACX,aAAK,aAAa;MACpB;IACF,WAAW,YAAY,CAAC,KAAK,YAAY;AACvC,UAAI,KAAK,aAAa,YAAY;AAChC,aAAK,aAAa,WAAW,aAAa,MAAM,KAAK,YAAY;AACjE,aAAK,aAAa,OAAM;AACxB,aAAK,aAAa;MACpB;IACF;EACF;;AArDA,WAAA;EADC,UAAU,WAAW;;;AAQtB,WAAA;EADC,mBAAmB,WAAW;;;;;AAXpB,QAAK,WAAA;EADjB,cAAc,EAAE,MAAM,SAAQ,CAAE;;GACpB,KAAK;",
+  "sourcesContent": ["import { attribute, elementDefine, onAttributeChanged } from '../index';\nimport { SwcHTMLTemplateElementBase } from './base/SwcHTMLTemplateElementBase';\n\n@elementDefine({ name: 'swc-if', extends: 'template' })\nexport class SwcIf extends SwcHTMLTemplateElementBase {\n  private _endMarker = document.createComment('swc-if-end');\n\n  @attribute('value')\n  _value: any = false;\n\n  @onAttributeChanged('value')\n  onValueChange() {\n    this.render();\n  }\n\n  set value(val: any) {\n    this._value = val;\n    this.onValueChange();\n  }\n\n  get value() {\n    return this._value;\n  }\n\n  connectedCallback() {\n    if (this._isInitialized) return;\n    this._isInitialized = true;\n\n    if (this.nextSibling !== this._endMarker) {\n      this.parentNode?.insertBefore(this._endMarker, this.nextSibling);\n    }\n    this.render();\n  }\n\n  private render() {\n    if (!this.isConnected) return;\n\n    let curr = this.nextSibling;\n    while (curr && curr !== this._endMarker) {\n      const next = curr.nextSibling;\n      curr.parentElement?.removeChild(curr);\n      curr = next;\n    }\n\n    const attrValue = this.getAttribute('value');\n    let displayValue = attrValue !== null ? attrValue : this._value;\n    let isTruthy = !!displayValue;\n\n    if (typeof displayValue === 'string') {\n      if (displayValue === 'false' || displayValue === '0' || displayValue === '') isTruthy = false;\n      else {\n        try {\n          isTruthy = !!new Function(`return ${displayValue}`)();\n        } catch (e) {\n          isTruthy = true;\n        }\n      }\n    }\n\n    if (isTruthy) {\n      const clone = this.content.cloneNode(true);\n      Array.from(clone.childNodes).forEach(node => {\n        this.applyData(node, this._value);\n      });\n      this.parentNode?.insertBefore(clone, this._endMarker);\n    }\n  }\n}\n"],
+  "mappings": ";;;;;;;;;AAAA,SAAS,WAAW,eAAe,0BAA0B;AAC7D,SAAS,kCAAkC;AAGpC,IAAM,QAAN,MAAMA,eAAc,2BAA0B;EAA9C,cAAA;;AACG,SAAA,aAAa,SAAS,cAAc,YAAY;AAGxD,SAAA,SAAc;EA2DhB;EAxDE,gBAAa;AACX,SAAK,OAAM;EACb;EAEA,IAAI,MAAM,KAAQ;AAChB,SAAK,SAAS;AACd,SAAK,cAAa;EACpB;EAEA,IAAI,QAAK;AACP,WAAO,KAAK;EACd;EAEA,oBAAiB;AACf,QAAI,KAAK;AAAgB;AACzB,SAAK,iBAAiB;AAEtB,QAAI,KAAK,gBAAgB,KAAK,YAAY;AACxC,WAAK,YAAY,aAAa,KAAK,YAAY,KAAK,WAAW;IACjE;AACA,SAAK,OAAM;EACb;EAEQ,SAAM;AACZ,QAAI,CAAC,KAAK;AAAa;AAEvB,QAAI,OAAO,KAAK;AAChB,WAAO,QAAQ,SAAS,KAAK,YAAY;AACvC,YAAM,OAAO,KAAK;AAClB,WAAK,eAAe,YAAY,IAAI;AACpC,aAAO;IACT;AAEA,UAAM,YAAY,KAAK,aAAa,OAAO;AAC3C,QAAI,eAAe,cAAc,OAAO,YAAY,KAAK;AACzD,QAAI,WAAW,CAAC,CAAC;AAEjB,QAAI,OAAO,iBAAiB,UAAU;AACpC,UAAI,iBAAiB,WAAW,iBAAiB,OAAO,iBAAiB;AAAI,mBAAW;WACnF;AACH,YAAI;AACF,qBAAW,CAAC,CAAC,IAAI,SAAS,UAAU,YAAY,EAAE,EAAC;QACrD,SAAS,GAAG;AACV,qBAAW;QACb;MACF;IACF;AAEA,QAAI,UAAU;AACZ,YAAM,QAAQ,KAAK,QAAQ,UAAU,IAAI;AACzC,YAAM,KAAK,MAAM,UAAU,EAAE,QAAQ,UAAO;AAC1C,aAAK,UAAU,MAAM,KAAK,MAAM;MAClC,CAAC;AACD,WAAK,YAAY,aAAa,OAAO,KAAK,UAAU;IACtD;EACF;;AA1DA,WAAA;EADC,UAAU,OAAO;;;AAIlB,WAAA;EADC,mBAAmB,OAAO;;;;;AANhB,QAAK,WAAA;EADjB,cAAc,EAAE,MAAM,UAAU,SAAS,WAAU,CAAE;GACzC,KAAK;",
   "names": ["SwcIf"]
 }

package/dist/esm/elements/SwcInterfaces.js

@@ -0,0 +1,16 @@
+var InjectSituationType = /* @__PURE__ */ ((InjectSituationType2) => {
+  InjectSituationType2["HOST_SET"] = "SIMPLE_WEB_COMPONENT://HOSTSET";
+  InjectSituationType2["APP_HOST"] = "SIMPLE_WEB_COMPONENT://APPHOST";
+  InjectSituationType2["APP_HOSTS"] = "SIMPLE_WEB_COMPONENT://APPHOSTS";
+  InjectSituationType2["HOST"] = "SIMPLE_WEB_COMPONENT://HOST";
+  InjectSituationType2["HOSTS"] = "SIMPLE_WEB_COMPONENT://HOSTS";
+  InjectSituationType2["FIRST_HOST"] = "SIMPLE_WEB_COMPONENT://FIRSTHOST";
+  InjectSituationType2["LAST_HOST"] = "SIMPLE_WEB_COMPONENT://LASTHOST";
+  InjectSituationType2["FIRST_APP_HOST"] = "SIMPLE_WEB_COMPONENT://FIRSTAPPHOST";
+  InjectSituationType2["LAST_APP_HOST"] = "SIMPLE_WEB_COMPONENT://LASTAPPHOST";
+  return InjectSituationType2;
+})(InjectSituationType || {});
+export {
+  InjectSituationType
+};
+//# sourceMappingURL=SwcInterfaces.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/elements/SwcInterfaces.ts"],
+  "sourcesContent": ["import { SimpleApplication } from '@dooboostore/simple-boot/SimpleApplication';\nimport { ConstructorType, Optional } from '@dooboostore/core/types';\nexport enum InjectSituationType {\n  HOST_SET = 'SIMPLE_WEB_COMPONENT://HOSTSET',\n  APP_HOST = 'SIMPLE_WEB_COMPONENT://APPHOST',\n  APP_HOSTS = 'SIMPLE_WEB_COMPONENT://APPHOSTS',\n  HOST = 'SIMPLE_WEB_COMPONENT://HOST',\n  HOSTS = 'SIMPLE_WEB_COMPONENT://HOSTS',\n  FIRST_HOST = 'SIMPLE_WEB_COMPONENT://FIRSTHOST',\n  LAST_HOST = 'SIMPLE_WEB_COMPONENT://LASTHOST',\n  FIRST_APP_HOST = 'SIMPLE_WEB_COMPONENT://FIRSTAPPHOST',\n  LAST_APP_HOST = 'SIMPLE_WEB_COMPONENT://LASTAPPHOST',\n}\nexport type HostSet = {\n  $host: SwcHTMLElementInterface | null;\n  $hosts: SwcHTMLElementInterface[];\n  $firstHost: SwcHTMLElementInterface | null;\n  $lastHost: SwcHTMLElementInterface | null;\n  $appHost: SwcAppInterface | null;\n  $appHosts: SwcAppInterface[];\n  $firstAppHost: SwcAppInterface | null;\n  $lastAppHost: SwcAppInterface | null;\n};\n\nexport interface SwcHTMLElementInterface extends HTMLElement {\n  getAppHost(): SwcAppInterface | undefined;\n  getAppHosts(): SwcAppInterface[];\n  getFirstAppHost(): SwcAppInterface | undefined;\n  getLastAppHost(): SwcAppInterface | undefined;\n  getHosts(): SwcHTMLElementInterface[];\n  getHost(): SwcHTMLElementInterface | undefined;\n  getFirstHost(): SwcHTMLElementInterface | undefined;\n  getLastHost(): SwcHTMLElementInterface | undefined;\n  getHostSet(): HostSet;\n}\n\nexport type SwcConfigType = {\n  rootRouter: ConstructorType<any>;\n  routeType: 'path' | 'hash';\n  path?: string;\n  window: Window;\n};\n\nexport type SwcAttributeConfigType = Optional<SwcConfigType, 'routeType' | 'window'>;\n\nexport interface SwcAppInterface extends SwcHTMLElementInterface {\n  simpleApplication?: SimpleApplication;\n  routing(path: string): Promise<void>;\n}\n"],
+  "mappings": "AAEO,IAAK,sBAAL,kBAAKA,yBAAL;AACL,EAAAA,qBAAA,cAAW;AACX,EAAAA,qBAAA,cAAW;AACX,EAAAA,qBAAA,eAAY;AACZ,EAAAA,qBAAA,UAAO;AACP,EAAAA,qBAAA,WAAQ;AACR,EAAAA,qBAAA,gBAAa;AACb,EAAAA,qBAAA,eAAY;AACZ,EAAAA,qBAAA,oBAAiB;AACjB,EAAAA,qBAAA,mBAAgB;AATN,SAAAA;AAAA,GAAA;",
+  "names": ["InjectSituationType"]
+}