@dooboostore/simple-web-component 1.0.0 → 1.0.1

package/dist/esm/elements/SwcForOf.js

@@ -0,0 +1,177 @@
+var __decorate = function(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = function(k, v) {
+  if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { elementDefind, template, style } from "../index.js";
+let SwcForOf = class SwcForOf2 extends HTMLElement {
+  constructor() {
+    super();
+    this._value = [];
+    this._masterTplNodes = [];
+  }
+  set value(val) {
+    if (!Array.isArray(val))
+      val = [];
+    this._value = this.createProxy(val);
+    this.renderAll();
+  }
+  get value() {
+    return this._value;
+  }
+  createProxy(arr) {
+    return new Proxy(arr, {
+      set: (target, prop, val) => {
+        const isIndex = !isNaN(Number(prop));
+        target[prop] = val;
+        if (isIndex) {
+          this.updateSingleRow(Number(prop), val);
+        } else if (prop === "length" && val < target.length) {
+          this.renderAll();
+        }
+        return true;
+      },
+      deleteProperty: (target, prop) => {
+        const res = delete target[prop];
+        this.renderAll();
+        return res;
+      }
+    });
+  }
+  styles() {
+    return `
+      :host { display: contents; }
+    `;
+  }
+  renderTemplate() {
+    return `
+      <slot id="tpl-slot" style="display:none;"></slot>
+    `;
+  }
+  connectedCallback() {
+    const tplSlot = this.shadowRoot?.getElementById("tpl-slot");
+    if (tplSlot) {
+      this._masterTplNodes = tplSlot.assignedNodes().map((n) => n.cloneNode(true));
+    }
+    this.renderAll();
+  }
+  updateSingleRow(index, newValue) {
+    const targets = this.querySelectorAll(`[slot="row-${index}"]`);
+    if (targets.length > 0) {
+      targets.forEach((target) => this.applyData(target, newValue, index));
+    } else {
+      this.renderRow(newValue, index);
+    }
+  }
+  applyData(node, data, index) {
+    const getValueByPath = (obj, path) => {
+      if (path === "value")
+        return obj;
+      if (path.startsWith("value.")) {
+        return path.split(".").slice(1).reduce((acc, part) => acc && acc[part], obj);
+      }
+      return void 0;
+    };
+    const walk = (n) => {
+      if (n.nodeType === Node.TEXT_NODE) {
+        if (!n._original)
+          n._original = n.textContent;
+        let text = n._original;
+        text = text.replace(/{{(.*?)}}/g, (match, path) => {
+          path = path.trim();
+          if (path === "index")
+            return index.toString();
+          const val = getValueByPath(data, path);
+          return val !== void 0 ? val : match;
+        });
+        if (n.textContent !== text)
+          n.textContent = text;
+      } else if (n.nodeType === Node.ELEMENT_NODE) {
+        const el = n;
+        Array.from(el.attributes).forEach((a) => {
+          if (!a._original)
+            a._original = a.value;
+          let val = a._original;
+          val = val.replace(/{{(.*?)}}/g, (match, path) => {
+            path = path.trim();
+            if (path === "index")
+              return index.toString();
+            const v = getValueByPath(data, path);
+            return v !== void 0 ? v : match;
+          });
+          if (a.value !== val)
+            a.value = val;
+        });
+        el.childNodes.forEach(walk);
+      }
+    };
+    walk(node);
+  }
+  renderRow(item, index) {
+    if (!this.shadowRoot || this._masterTplNodes.length === 0)
+      return;
+    const slotName = `row-${index}`;
+    if (!this.shadowRoot.querySelector(`slot[name="${slotName}"]`)) {
+      const slot = document.createElement("slot");
+      slot.name = slotName;
+      this.shadowRoot.appendChild(slot);
+    }
+    this._masterTplNodes.forEach((tplNode) => {
+      const clone = tplNode.cloneNode(true);
+      if (clone.nodeType === Node.ELEMENT_NODE) {
+        clone.setAttribute("slot", slotName);
+        clone.style.display = "";
+      } else if (clone.nodeType === Node.TEXT_NODE) {
+        if (clone.textContent?.trim().length === 0)
+          return;
+        const span = document.createElement("span");
+        span.setAttribute("slot", slotName);
+        span.appendChild(clone);
+        this.appendChild(span);
+        this.applyData(span, item, index);
+        return;
+      }
+      this.appendChild(clone);
+      this.applyData(clone, item, index);
+    });
+  }
+  renderAll() {
+    if (this._masterTplNodes.length === 0 || !this.shadowRoot)
+      return;
+    Array.from(this.children).forEach((c) => {
+      const slot = c.getAttribute("slot");
+      if (slot && slot.startsWith("row-")) {
+        c.remove();
+      }
+    });
+    Array.from(this.shadowRoot.querySelectorAll("slot")).forEach((s) => {
+      if (s.id !== "tpl-slot")
+        s.remove();
+    });
+    this._value.forEach((item, index) => this.renderRow(item, index));
+  }
+};
+__decorate([
+  style,
+  __metadata("design:type", Function),
+  __metadata("design:paramtypes", []),
+  __metadata("design:returntype", void 0)
+], SwcForOf.prototype, "styles", null);
+__decorate([
+  template,
+  __metadata("design:type", Function),
+  __metadata("design:paramtypes", []),
+  __metadata("design:returntype", void 0)
+], SwcForOf.prototype, "renderTemplate", null);
+SwcForOf = __decorate([
+  elementDefind({ tagName: "swc-for-of", useShadow: true }),
+  __metadata("design:paramtypes", [])
+], SwcForOf);
+export {
+  SwcForOf
+};
+//# sourceMappingURL=SwcForOf.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/elements/SwcForOf.ts"],
+  "sourcesContent": ["import { elementDefind, template, style } from '../index';\n\n@elementDefind({ tagName: 'swc-for-of', useShadow: true })\nexport class SwcForOf extends HTMLElement {\n  private _value: any[] = [];\n  private _masterTplNodes: Node[] = [];\n\n  constructor() {\n    super();\n  }\n\n  set value(val: any[]) {\n    if (!Array.isArray(val)) val = [];\n    this._value = this.createProxy(val);\n    this.renderAll();\n  }\n\n  get value(): any[] {\n    return this._value;\n  }\n\n  private createProxy(arr: any[]) {\n    return new Proxy(arr, {\n      set: (target, prop, val) => {\n        const isIndex = !isNaN(Number(prop));\n        target[prop as any] = val;\n\n        if (isIndex) {\n          this.updateSingleRow(Number(prop), val);\n        } else if (prop === 'length' && val < target.length) {\n          this.renderAll();\n        }\n        return true;\n      },\n      deleteProperty: (target, prop) => {\n        const res = delete target[prop as any];\n        this.renderAll();\n        return res;\n      }\n    });\n  }\n\n  @style\n  styles() {\n    // display: contents를 통해 swc-for-of 태그 자체를 레이아웃에서 투명하게 만듭니다.\n    return `\n      :host { display: contents; }\n    `;\n  }\n\n  @template\n  renderTemplate() {\n    // 감싸는 div 없이 tpl-slot만 둡니다.\n    return `\n      <slot id=\"tpl-slot\" style=\"display:none;\"></slot>\n    `;\n  }\n\n  connectedCallback() {\n    const tplSlot = this.shadowRoot?.getElementById('tpl-slot') as HTMLSlotElement;\n    if (tplSlot) {\n      this._masterTplNodes = tplSlot.assignedNodes().map(n => n.cloneNode(true));\n    }\n    this.renderAll();\n  }\n\n  public updateSingleRow(index: number, newValue: any) {\n    const targets = this.querySelectorAll(`[slot=\"row-${index}\"]`);\n    if (targets.length > 0) {\n      targets.forEach(target => this.applyData(target, newValue, index));\n    } else {\n      this.renderRow(newValue, index);\n    }\n  }\n\n  private applyData(node: Node, data: any, index: number) {\n    const getValueByPath = (obj: any, path: string) => {\n      if (path === 'value') return obj;\n      if (path.startsWith('value.')) {\n        return path\n          .split('.')\n          .slice(1)\n          .reduce((acc, part) => acc && acc[part], obj);\n      }\n      return undefined;\n    };\n\n    const walk = (n: Node) => {\n      if (n.nodeType === Node.TEXT_NODE) {\n        if (!(n as any)._original) (n as any)._original = n.textContent;\n        let text = (n as any)._original;\n\n        text = text.replace(/{{(.*?)}}/g, (match: string, path: string) => {\n          path = path.trim();\n          if (path === 'index') return index.toString();\n          const val = getValueByPath(data, path);\n          return val !== undefined ? val : match;\n        });\n        if (n.textContent !== text) n.textContent = text;\n      } else if (n.nodeType === Node.ELEMENT_NODE) {\n        const el = n as Element;\n        Array.from(el.attributes).forEach(a => {\n          if (!(a as any)._original) (a as any)._original = a.value;\n          let val = (a as any)._original;\n\n          val = val.replace(/{{(.*?)}}/g, (match: string, path: string) => {\n            path = path.trim();\n            if (path === 'index') return index.toString();\n            const v = getValueByPath(data, path);\n            return v !== undefined ? v : match;\n          });\n          if (a.value !== val) a.value = val;\n        });\n\n        // 중요: swc-choose 같은 커스텀 엘리먼트 내부의 자식들도 템플릿 치환이 필요함\n        el.childNodes.forEach(walk);\n      }\n    };\n    walk(node);\n  }\n\n  private renderRow(item: any, index: number) {\n    if (!this.shadowRoot || this._masterTplNodes.length === 0) return;\n\n    const slotName = `row-${index}`;\n    // Shadow Root에 직접 슬롯 추가\n    if (!this.shadowRoot.querySelector(`slot[name=\"${slotName}\"]`)) {\n      const slot = document.createElement('slot');\n      slot.name = slotName;\n      this.shadowRoot.appendChild(slot);\n    }\n\n    this._masterTplNodes.forEach(tplNode => {\n      const clone = tplNode.cloneNode(true);\n      if (clone.nodeType === Node.ELEMENT_NODE) {\n        (clone as HTMLElement).setAttribute('slot', slotName);\n        (clone as HTMLElement).style.display = '';\n      } else if (clone.nodeType === Node.TEXT_NODE) {\n        if (clone.textContent?.trim().length === 0) return;\n        const span = document.createElement('span');\n        span.setAttribute('slot', slotName);\n        span.appendChild(clone);\n        this.appendChild(span);\n        this.applyData(span, item, index);\n        return;\n      }\n      this.appendChild(clone);\n      this.applyData(clone, item, index);\n    });\n  }\n\n  private renderAll() {\n    if (this._masterTplNodes.length === 0 || !this.shadowRoot) return;\n\n    // 기존 데이터 노드 삭제\n    Array.from(this.children).forEach(c => {\n      const slot = c.getAttribute('slot');\n      if (slot && slot.startsWith('row-')) {\n        c.remove();\n      }\n    });\n\n    // Shadow Root의 기존 슬롯들 삭제 (tpl-slot 제외)\n    Array.from(this.shadowRoot.querySelectorAll('slot')).forEach(s => {\n      if (s.id !== 'tpl-slot') s.remove();\n    });\n\n    this._value.forEach((item, index) => this.renderRow(item, index));\n  }\n}\n"],
+  "mappings": "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",
+  "names": ["SwcForOf"]
+}

package/dist/esm/elements/SwcIf.js

@@ -0,0 +1,116 @@
+var __decorate = function(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = function(k, v) {
+  if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { elementDefind, template, style } from "../index.js";
+let SwcIf = class SwcIf2 extends HTMLElement {
+  constructor() {
+    super();
+    this._value = false;
+    this._masterTplNodes = [];
+    this._observer = null;
+  }
+  set value(val) {
+    this._value = val;
+    this.render();
+  }
+  get value() {
+    return this._value;
+  }
+  styles() {
+    return `
+      :host { display: contents; }
+    `;
+  }
+  renderTemplate() {
+    return `
+      <slot id="tpl-slot" style="display:none;"></slot>
+    `;
+  }
+  connectedCallback() {
+    const tplSlot = this.shadowRoot?.getElementById("tpl-slot");
+    if (tplSlot) {
+      this._masterTplNodes = tplSlot.assignedNodes().map((n) => n.cloneNode(true));
+    }
+    this._observer = new MutationObserver(() => this.render());
+    this._observer.observe(this, { attributes: true });
+    this.render();
+  }
+  disconnectedCallback() {
+    this._observer?.disconnect();
+  }
+  render() {
+    if (!this.shadowRoot)
+      return;
+    const attrValue = this.getAttribute("value");
+    if (attrValue !== null && attrValue.includes("{{"))
+      return;
+    let displayValue = attrValue !== null ? attrValue : this._value;
+    let isTruthy = !!displayValue;
+    if (typeof displayValue === "string") {
+      if (displayValue === "false" || displayValue === "0" || displayValue === "")
+        isTruthy = false;
+      else {
+        try {
+          isTruthy = !!new Function(`return ${displayValue}`)();
+        } catch (e) {
+          isTruthy = true;
+        }
+      }
+    }
+    Array.from(this.children).forEach((c) => {
+      if (c.getAttribute("slot") === "if-content") {
+        c.remove();
+      }
+    });
+    const existingSlot = this.shadowRoot.querySelector('slot[name="if-content"]');
+    if (existingSlot)
+      existingSlot.remove();
+    if (isTruthy && this._masterTplNodes.length > 0) {
+      const contentSlot = document.createElement("slot");
+      contentSlot.name = "if-content";
+      this.shadowRoot.appendChild(contentSlot);
+      this._masterTplNodes.forEach((tplNode) => {
+        const clone = tplNode.cloneNode(true);
+        if (clone.nodeType === Node.ELEMENT_NODE) {
+          clone.setAttribute("slot", "if-content");
+          clone.style.display = "";
+        } else if (clone.nodeType === Node.TEXT_NODE) {
+          if (clone.textContent?.trim().length === 0)
+            return;
+          const span = document.createElement("span");
+          span.setAttribute("slot", "if-content");
+          span.appendChild(clone);
+          this.appendChild(span);
+          return;
+        }
+        this.appendChild(clone);
+      });
+    }
+  }
+};
+__decorate([
+  style,
+  __metadata("design:type", Function),
+  __metadata("design:paramtypes", []),
+  __metadata("design:returntype", void 0)
+], SwcIf.prototype, "styles", null);
+__decorate([
+  template,
+  __metadata("design:type", Function),
+  __metadata("design:paramtypes", []),
+  __metadata("design:returntype", void 0)
+], SwcIf.prototype, "renderTemplate", null);
+SwcIf = __decorate([
+  elementDefind({ tagName: "swc-if", useShadow: true }),
+  __metadata("design:paramtypes", [])
+], SwcIf);
+export {
+  SwcIf
+};
+//# sourceMappingURL=SwcIf.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/elements/SwcIf.ts"],
+  "sourcesContent": ["import { elementDefind, template, style } from '../index';\n\n@elementDefind({ tagName: 'swc-if', useShadow: true })\nexport class SwcIf extends HTMLElement {\n  private _value: any = false;\n  private _masterTplNodes: Node[] = [];\n  private _observer: MutationObserver | null = null;\n\n  constructor() {\n    super();\n  }\n\n  set value(val: any) {\n    this._value = val;\n    this.render();\n  }\n\n  get value(): any {\n    return this._value;\n  }\n\n  @style\n  styles() {\n    return `\n      :host { display: contents; }\n    `;\n  }\n\n  @template\n  renderTemplate() {\n    return `\n      <slot id=\"tpl-slot\" style=\"display:none;\"></slot>\n    `;\n  }\n\n  connectedCallback() {\n    const tplSlot = this.shadowRoot?.getElementById('tpl-slot') as HTMLSlotElement;\n    if (tplSlot) {\n      // 초기 자식들을 템플릿으로 보관\n      this._masterTplNodes = tplSlot.assignedNodes().map(n => n.cloneNode(true));\n    }\n\n    this._observer = new MutationObserver(() => this.render());\n    this._observer.observe(this, { attributes: true });\n\n    this.render();\n  }\n\n  disconnectedCallback() {\n    this._observer?.disconnect();\n  }\n\n  private render() {\n    if (!this.shadowRoot) return;\n\n    const attrValue = this.getAttribute('value');\n    if (attrValue !== null && attrValue.includes('{{')) return; // 치환 전이면 대기\n\n    // 로직 결정: attribute가 있으면 우선, 없으면 property 사용\n    let displayValue = attrValue !== null ? attrValue : this._value;\n\n    // \"false\", \"null\", \"undefined\" 문자열 처리 및 기본 truthy 체크\n    let isTruthy = !!displayValue;\n    if (typeof displayValue === 'string') {\n      if (displayValue === 'false' || displayValue === '0' || displayValue === '') isTruthy = false;\n      else {\n        // 식인 경우 평가 시도 (예: \"10 > 5\")\n        try {\n          isTruthy = !!new Function(`return ${displayValue}`)();\n        } catch (e) {\n          // 단순 문자열이면 true로 간주\n          isTruthy = true;\n        }\n      }\n    }\n\n    // 1. 기존에 렌더링된 노드들 삭제\n    Array.from(this.children).forEach(c => {\n      if (c.getAttribute('slot') === 'if-content') {\n        c.remove();\n      }\n    });\n\n    // 2. Shadow DOM의 컨텐츠 슬롯 삭제\n    const existingSlot = this.shadowRoot.querySelector('slot[name=\"if-content\"]');\n    if (existingSlot) existingSlot.remove();\n\n    // 3. 조건이 참일 때만 노드들을 복제해서 삽입\n    if (isTruthy && this._masterTplNodes.length > 0) {\n      const contentSlot = document.createElement('slot');\n      contentSlot.name = 'if-content';\n      this.shadowRoot.appendChild(contentSlot);\n\n      this._masterTplNodes.forEach(tplNode => {\n        const clone = tplNode.cloneNode(true);\n        if (clone.nodeType === Node.ELEMENT_NODE) {\n          (clone as HTMLElement).setAttribute('slot', 'if-content');\n          (clone as HTMLElement).style.display = '';\n        } else if (clone.nodeType === Node.TEXT_NODE) {\n          if (clone.textContent?.trim().length === 0) return;\n          const span = document.createElement('span');\n          span.setAttribute('slot', 'if-content');\n          span.appendChild(clone);\n          this.appendChild(span);\n          return;\n        }\n        this.appendChild(clone);\n      });\n    }\n  }\n}\n"],
+  "mappings": ";;;;;;;;;AAAA,SAAS,eAAe,UAAU,aAAa;AAGxC,IAAM,QAAN,MAAMA,eAAc,YAAW;EAKpC,cAAA;AACE,UAAK;AALC,SAAA,SAAc;AACd,SAAA,kBAA0B,CAAA;AAC1B,SAAA,YAAqC;EAI7C;EAEA,IAAI,MAAM,KAAQ;AAChB,SAAK,SAAS;AACd,SAAK,OAAM;EACb;EAEA,IAAI,QAAK;AACP,WAAO,KAAK;EACd;EAGA,SAAM;AACJ,WAAO;;;EAGT;EAGA,iBAAc;AACZ,WAAO;;;EAGT;EAEA,oBAAiB;AACf,UAAM,UAAU,KAAK,YAAY,eAAe,UAAU;AAC1D,QAAI,SAAS;AAEX,WAAK,kBAAkB,QAAQ,cAAa,EAAG,IAAI,OAAK,EAAE,UAAU,IAAI,CAAC;IAC3E;AAEA,SAAK,YAAY,IAAI,iBAAiB,MAAM,KAAK,OAAM,CAAE;AACzD,SAAK,UAAU,QAAQ,MAAM,EAAE,YAAY,KAAI,CAAE;AAEjD,SAAK,OAAM;EACb;EAEA,uBAAoB;AAClB,SAAK,WAAW,WAAU;EAC5B;EAEQ,SAAM;AACZ,QAAI,CAAC,KAAK;AAAY;AAEtB,UAAM,YAAY,KAAK,aAAa,OAAO;AAC3C,QAAI,cAAc,QAAQ,UAAU,SAAS,IAAI;AAAG;AAGpD,QAAI,eAAe,cAAc,OAAO,YAAY,KAAK;AAGzD,QAAI,WAAW,CAAC,CAAC;AACjB,QAAI,OAAO,iBAAiB,UAAU;AACpC,UAAI,iBAAiB,WAAW,iBAAiB,OAAO,iBAAiB;AAAI,mBAAW;WACnF;AAEH,YAAI;AACF,qBAAW,CAAC,CAAC,IAAI,SAAS,UAAU,YAAY,EAAE,EAAC;QACrD,SAAS,GAAG;AAEV,qBAAW;QACb;MACF;IACF;AAGA,UAAM,KAAK,KAAK,QAAQ,EAAE,QAAQ,OAAI;AACpC,UAAI,EAAE,aAAa,MAAM,MAAM,cAAc;AAC3C,UAAE,OAAM;MACV;IACF,CAAC;AAGD,UAAM,eAAe,KAAK,WAAW,cAAc,yBAAyB;AAC5E,QAAI;AAAc,mBAAa,OAAM;AAGrC,QAAI,YAAY,KAAK,gBAAgB,SAAS,GAAG;AAC/C,YAAM,cAAc,SAAS,cAAc,MAAM;AACjD,kBAAY,OAAO;AACnB,WAAK,WAAW,YAAY,WAAW;AAEvC,WAAK,gBAAgB,QAAQ,aAAU;AACrC,cAAM,QAAQ,QAAQ,UAAU,IAAI;AACpC,YAAI,MAAM,aAAa,KAAK,cAAc;AACvC,gBAAsB,aAAa,QAAQ,YAAY;AACvD,gBAAsB,MAAM,UAAU;QACzC,WAAW,MAAM,aAAa,KAAK,WAAW;AAC5C,cAAI,MAAM,aAAa,KAAI,EAAG,WAAW;AAAG;AAC5C,gBAAM,OAAO,SAAS,cAAc,MAAM;AAC1C,eAAK,aAAa,QAAQ,YAAY;AACtC,eAAK,YAAY,KAAK;AACtB,eAAK,YAAY,IAAI;AACrB;QACF;AACA,aAAK,YAAY,KAAK;MACxB,CAAC;IACH;EACF;;AAvFA,WAAA;EADC;;;;;AAQD,WAAA;EADC;;;;;AAzBU,QAAK,WAAA;EADjB,cAAc,EAAE,SAAS,UAAU,WAAW,KAAI,CAAE;;GACxC,KAAK;",
+  "names": ["SwcIf"]
+}

package/dist/esm/elements/SwcOther.js

@@ -0,0 +1,37 @@
+var __decorate = function(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = function(k, v) {
+  if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { elementDefind, template, style } from "../index.js";
+let SwcOther = class SwcOther2 extends HTMLElement {
+  styles() {
+    return `:host { display: contents; }`;
+  }
+  render() {
+    return `<slot></slot>`;
+  }
+};
+__decorate([
+  style,
+  __metadata("design:type", Function),
+  __metadata("design:paramtypes", []),
+  __metadata("design:returntype", void 0)
+], SwcOther.prototype, "styles", null);
+__decorate([
+  template,
+  __metadata("design:type", Function),
+  __metadata("design:paramtypes", []),
+  __metadata("design:returntype", void 0)
+], SwcOther.prototype, "render", null);
+SwcOther = __decorate([
+  elementDefind({ tagName: "swc-other", useShadow: true })
+], SwcOther);
+export {
+  SwcOther
+};
+//# sourceMappingURL=SwcOther.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/elements/SwcOther.ts"],
+  "sourcesContent": ["import { elementDefind, template, style } from '../index';\n\n@elementDefind({ tagName: 'swc-other', useShadow: true })\nexport class SwcOther extends HTMLElement {\n  @style\n  styles() {\n    return `:host { display: contents; }`;\n  }\n\n  @template\n  render() {\n    return `<slot></slot>`;\n  }\n}\n"],
+  "mappings": ";;;;;;;;;AAAA,SAAS,eAAe,UAAU,aAAa;AAGxC,IAAM,WAAN,MAAMA,kBAAiB,YAAW;EAEvC,SAAM;AACJ,WAAO;EACT;EAGA,SAAM;AACJ,WAAO;EACT;;AAPA,WAAA;EADC;;;;;AAMD,WAAA;EADC;;;;;AANU,WAAQ,WAAA;EADpB,cAAc,EAAE,SAAS,aAAa,WAAW,KAAI,CAAE;GAC3C,QAAQ;",
+  "names": ["SwcOther"]
+}

package/dist/esm/elements/SwcWhen.js

@@ -0,0 +1,37 @@
+var __decorate = function(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = function(k, v) {
+  if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { elementDefind, template, style } from "../index.js";
+let SwcWhen = class SwcWhen2 extends HTMLElement {
+  styles() {
+    return `:host { display: contents; }`;
+  }
+  render() {
+    return `<slot></slot>`;
+  }
+};
+__decorate([
+  style,
+  __metadata("design:type", Function),
+  __metadata("design:paramtypes", []),
+  __metadata("design:returntype", void 0)
+], SwcWhen.prototype, "styles", null);
+__decorate([
+  template,
+  __metadata("design:type", Function),
+  __metadata("design:paramtypes", []),
+  __metadata("design:returntype", void 0)
+], SwcWhen.prototype, "render", null);
+SwcWhen = __decorate([
+  elementDefind({ tagName: "swc-when", useShadow: true })
+], SwcWhen);
+export {
+  SwcWhen
+};
+//# sourceMappingURL=SwcWhen.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/elements/SwcWhen.ts"],
+  "sourcesContent": ["import { elementDefind, template, style } from '../index';\n\n@elementDefind({ tagName: 'swc-when', useShadow: true })\nexport class SwcWhen extends HTMLElement {\n  @style\n  styles() {\n    return `:host { display: contents; }`;\n  }\n\n  @template\n  render() {\n    return `<slot></slot>`;\n  }\n}\n"],
+  "mappings": ";;;;;;;;;AAAA,SAAS,eAAe,UAAU,aAAa;AAGxC,IAAM,UAAN,MAAMA,iBAAgB,YAAW;EAEtC,SAAM;AACJ,WAAO;EACT;EAGA,SAAM;AACJ,WAAO;EACT;;AAPA,WAAA;EADC;;;;;AAMD,WAAA;EADC;;;;;AANU,UAAO,WAAA;EADnB,cAAc,EAAE,SAAS,YAAY,WAAW,KAAI,CAAE;GAC1C,OAAO;",
+  "names": ["SwcWhen"]
+}

package/dist/esm/index.js

@@ -1,5 +1,13 @@
-export * from "./decorators/element.js";
+export * from "./decorators/elementDefind.js";
 export * from "./decorators/template.js";
 export * from "./decorators/style.js";
 export * from "./decorators/attributeChanged.js";
+export * from "./decorators/query.js";
+export * from "./decorators/queryAll.js";
+export * from "./decorators/addEventListener.js";
+export * from "./elements/SwcForOf.js";
+export * from "./elements/SwcIf.js";
+export * from "./elements/SwcChoose.js";
+export * from "./elements/SwcWhen.js";
+export * from "./elements/SwcOther.js";
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.ts"],
-  "sourcesContent": ["export * from './decorators/element';\nexport * from './decorators/template';\nexport * from './decorators/style';\nexport * from './decorators/attributeChanged';"],
-  "mappings": "AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
+  "sourcesContent": ["export * from './decorators/elementDefind';\nexport * from './decorators/template';\nexport * from './decorators/style';\nexport * from './decorators/attributeChanged';\nexport * from './decorators/query';\nexport * from './decorators/queryAll';\nexport * from './decorators/addEventListener';\nexport * from './elements/SwcForOf';\nexport * from './elements/SwcIf';\nexport * from './elements/SwcChoose';\nexport * from './elements/SwcWhen';\nexport * from './elements/SwcOther';\n"],
+  "mappings": "AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
   "names": []
 }