@dooboostore/simple-web-component 1.0.1 → 1.0.2

package/README.md

@@ -8,7 +8,8 @@
 - **Surgical Updates**: High-performance rendering using the "Slot-per-Row" pattern.
 - **Auto-Sync**: Decorators automatically re-bind when the DOM changes (via MutationObserver).
 - **Native-First**: No Virtual DOM, just pure Custom Elements.
-- **Built-in Logic Components**: Includes `swc-for-of`, `swc-if`, and `swc-choose`.
+- **Built-in Logic Components**: Includes `swc-for-of`, `swc-if`, `swc-choose`, and `swc-object`.
+- **Scoped Context**: Support for `as` and `as-index` to avoid naming collisions in nested structures.
 
 ## Installation
 
@@ -32,12 +33,17 @@ pnpm add @dooboostore/simple-web-component
 
 ### Built-in Components
 
+All built-in components extend `SwcHTMLElementBase` and support the `as` attribute for custom data scoping.
+
 #### `swc-for-of` (Looping)
 A high-performance list renderer that uses slots to update only changed items.
+- `as`: (Optional) Alias for the item (default: `value`).
+- `as-index`: (Optional) Alias for the index (default: `index`).
+
 ```html
 <ul>
-  <swc-for-of id="my-list">
-    <li>{{index}}: {{value.name}}</li>
+  <swc-for-of id="my-list" as="item" as-index="i">
+    <li>{{i}}: {{item.name}}</li>
   </swc-for-of>
 </ul>
 <script>
@@ -47,6 +53,20 @@ A high-performance list renderer that uses slots to update only changed items.
 </script>
 ```
 
+#### `swc-object` (Object Binding)
+Binds a single object and updates the UI surgically when properties change.
+```html
+<swc-object id="user-profile" as="u">
+  <div>Name: {{u.name}}</div>
+  <div>Age: {{u.age}}</div>
+</swc-object>
+<script>
+  const el = document.getElementById('user-profile');
+  el.value = { name: 'Kim', age: 20 };
+  el.value.name = 'Lee'; // Automatically updates UI via Proxy
+</script>
+```
+
 #### `swc-if` (Conditional)
 Conditionally renders content based on a truthy value or expression.
 ```html
@@ -65,34 +85,9 @@ Provides a switch-case style branching logic.
 </swc-choose>
 ```
 
-## Example Usage
-
-```typescript
-import { elementDefind, template, style, query, addEventListener } from '@dooboostore/simple-web-component';
-
-@elementDefind({
-  tagName: 'my-component',
-  useShadow: true
-})
-class MyComponent extends HTMLElement {
-  @query('.title') titleEl: HTMLElement;
-
-  @style
-  css() {
-    return `:host { display: block; } .title { color: blue; }`;
-  }
-
-  @template
-  render() {
-    return `<h1 class="title">Hello World</h1><button id="btn">Click</button>`;
-  }
-
-  @addEventListener({ selector: '#btn', eventName: 'click' })
-  onClick(e: Event) {
-    this.titleEl.textContent = 'Button Clicked!';
-  }
-}
-```
+## Advanced: Extending SwcHTMLElementBase
+
+You can create your own high-performance components by extending `SwcHTMLElementBase`. It provides `applyData`, `createReactiveProxy`, and automatic `as` handling.
 
 ## License
 

package/dist/cjs/elements/SwcForOf.js

@@ -21,6 +21,7 @@ __export(SwcForOf_exports, {
 });
 module.exports = __toCommonJS(SwcForOf_exports);
 var import__ = require("../index");
+var import_SwcHTMLElementBase = require("./SwcHTMLElementBase");
 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);
@@ -30,55 +31,28 @@ 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);
 };
-let SwcForOf = class SwcForOf2 extends HTMLElement {
+let SwcForOf = class SwcForOf2 extends import_SwcHTMLElementBase.SwcHTMLElementBase {
   constructor() {
     super();
     this._value = [];
-    this._masterTplNodes = [];
   }
   set value(val) {
     if (!Array.isArray(val))
       val = [];
-    this._value = this.createProxy(val);
+    this._value = this.createReactiveProxy(val, () => this.renderAll(), (idx, v) => this.updateSingleRow(idx, v));
     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; }
-    `;
+    return `:host { display: contents; }`;
   }
   renderTemplate() {
-    return `
-      <slot id="tpl-slot" style="display:none;"></slot>
-    `;
+    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.initCore();
     this.renderAll();
   }
   updateSingleRow(index, newValue) {
@@ -89,50 +63,6 @@ let SwcForOf = class SwcForOf2 extends HTMLElement {
       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;

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

@@ -1,7 +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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",
+  "sourcesContent": ["import { elementDefind, template, style } from '../index';\nimport { SwcHTMLElementBase } from './SwcHTMLElementBase';\n\n@elementDefind({ tagName: 'swc-for-of', useShadow: true })\nexport class SwcForOf extends SwcHTMLElementBase {\n  private _value: any[] = [];\n\n  constructor() {\n    super();\n  }\n\n  set value(val: any[]) {\n    if (!Array.isArray(val)) val = [];\n    this._value = this.createReactiveProxy(\n      val,\n      () => this.renderAll(),\n      (idx, v) => this.updateSingleRow(idx, v)\n    );\n    this.renderAll();\n  }\n\n  get value(): any[] {\n    return this._value;\n  }\n\n  @style\n  styles() {\n    return `:host { display: contents; }`;\n  }\n\n  @template\n  renderTemplate() {\n    return `<slot id=\"tpl-slot\" style=\"display:none;\"></slot>`;\n  }\n\n  connectedCallback() {\n    this.initCore();\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 renderRow(item: any, index: number) {\n    if (!this.shadowRoot || this._masterTplNodes.length === 0) return;\n\n    const slotName = `row-${index}`;\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    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    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": ";;;;;;;;;;;;;;;;;;;;;;AAAA,eAA+C;AAC/C,gCAAmC;;;;;;;;;;AAG5B,IAAM,WAAN,MAAMA,kBAAiB,6CAAkB;EAG9C,cAAA;AACE,UAAK;AAHC,SAAA,SAAgB,CAAA;EAIxB;EAEA,IAAI,MAAM,KAAU;AAClB,QAAI,CAAC,MAAM,QAAQ,GAAG;AAAG,YAAM,CAAA;AAC/B,SAAK,SAAS,KAAK,oBACjB,KACA,MAAM,KAAK,UAAS,GACpB,CAAC,KAAK,MAAM,KAAK,gBAAgB,KAAK,CAAC,CAAC;AAE1C,SAAK,UAAS;EAChB;EAEA,IAAI,QAAK;AACP,WAAO,KAAK;EACd;EAGA,SAAM;AACJ,WAAO;EACT;EAGA,iBAAc;AACZ,WAAO;EACT;EAEA,oBAAiB;AACf,SAAK,SAAQ;AACb,SAAK,UAAS;EAChB;EAEO,gBAAgB,OAAe,UAAa;AACjD,UAAM,UAAU,KAAK,iBAAiB,cAAc,KAAK,IAAI;AAC7D,QAAI,QAAQ,SAAS,GAAG;AACtB,cAAQ,QAAQ,YAAU,KAAK,UAAU,QAAQ,UAAU,KAAK,CAAC;IACnE,OAAO;AACL,WAAK,UAAU,UAAU,KAAK;IAChC;EACF;EAEQ,UAAU,MAAW,OAAa;AACxC,QAAI,CAAC,KAAK,cAAc,KAAK,gBAAgB,WAAW;AAAG;AAE3D,UAAM,WAAW,OAAO,KAAK;AAC7B,QAAI,CAAC,KAAK,WAAW,cAAc,cAAc,QAAQ,IAAI,GAAG;AAC9D,YAAM,OAAO,SAAS,cAAc,MAAM;AAC1C,WAAK,OAAO;AACZ,WAAK,WAAW,YAAY,IAAI;IAClC;AAEA,SAAK,gBAAgB,QAAQ,aAAU;AACrC,YAAM,QAAQ,QAAQ,UAAU,IAAI;AACpC,UAAI,MAAM,aAAa,KAAK,cAAc;AACvC,cAAsB,aAAa,QAAQ,QAAQ;AACnD,cAAsB,MAAM,UAAU;MACzC,WAAW,MAAM,aAAa,KAAK,WAAW;AAC5C,YAAI,MAAM,aAAa,KAAI,EAAG,WAAW;AAAG;AAC5C,cAAM,OAAO,SAAS,cAAc,MAAM;AAC1C,aAAK,aAAa,QAAQ,QAAQ;AAClC,aAAK,YAAY,KAAK;AACtB,aAAK,YAAY,IAAI;AACrB,aAAK,UAAU,MAAM,MAAM,KAAK;AAChC;MACF;AACA,WAAK,YAAY,KAAK;AACtB,WAAK,UAAU,OAAO,MAAM,KAAK;IACnC,CAAC;EACH;EAEQ,YAAS;AACf,QAAI,KAAK,gBAAgB,WAAW,KAAK,CAAC,KAAK;AAAY;AAE3D,UAAM,KAAK,KAAK,QAAQ,EAAE,QAAQ,OAAI;AACpC,YAAM,OAAO,EAAE,aAAa,MAAM;AAClC,UAAI,QAAQ,KAAK,WAAW,MAAM,GAAG;AACnC,UAAE,OAAM;MACV;IACF,CAAC;AAED,UAAM,KAAK,KAAK,WAAW,iBAAiB,MAAM,CAAC,EAAE,QAAQ,OAAI;AAC/D,UAAI,EAAE,OAAO;AAAY,UAAE,OAAM;IACnC,CAAC;AAED,SAAK,OAAO,QAAQ,CAAC,MAAM,UAAU,KAAK,UAAU,MAAM,KAAK,CAAC;EAClE;;AAnEA,WAAA;EADC;;;;;AAMD,WAAA;EADC;;;;;AA1BU,WAAQ,WAAA;MADpB,wBAAc,EAAE,SAAS,cAAc,WAAW,KAAI,CAAE;;GAC5C,QAAQ;",
   "names": ["SwcForOf"]
 }

package/dist/cjs/elements/SwcHTMLElementBase.js

@@ -0,0 +1,102 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var SwcHTMLElementBase_exports = {};
+__export(SwcHTMLElementBase_exports, {
+  SwcHTMLElementBase: () => SwcHTMLElementBase
+});
+module.exports = __toCommonJS(SwcHTMLElementBase_exports);
+class SwcHTMLElementBase extends HTMLElement {
+  constructor() {
+    super();
+    this._masterTplNodes = [];
+    this._asKey = "value";
+    this._asIndexKey = "index";
+  }
+  initCore() {
+    this._asKey = this.getAttribute("as") || "value";
+    this._asIndexKey = this.getAttribute("as-index") || "index";
+    const tplSlot = this.shadowRoot?.getElementById("tpl-slot");
+    if (tplSlot) {
+      this._masterTplNodes = tplSlot.assignedNodes().map((n) => n.cloneNode(true));
+    }
+  }
+  getValueByPath(obj, path) {
+    if (path === this._asKey) return obj;
+    if (path.startsWith(`${this._asKey}.`)) {
+      return path.split(".").slice(1).reduce((acc, part) => acc && acc[part], obj);
+    }
+    return void 0;
+  }
+  applyData(node, data, index) {
+    const context = {};
+    if (index !== void 0) {
+      context[this._asIndexKey] = index.toString();
+    }
+    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 (context[path] !== void 0) return context[path];
+          const val = this.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 (context[path] !== void 0) return context[path];
+            const v = this.getValueByPath(data, path);
+            return v !== void 0 ? v : match;
+          });
+          if (a.value !== val) a.value = val;
+        });
+        el.childNodes.forEach(walk);
+      }
+    };
+    walk(node);
+  }
+  /**
+   * 객체/배열의 변경을 감지하는 Proxy 생성 유틸리티
+   */
+  createReactiveProxy(target, onChange, onIndexChange) {
+    return new Proxy(target, {
+      set: (t, prop, val) => {
+        const isIndex = !isNaN(Number(prop));
+        t[prop] = val;
+        if (isIndex && onIndexChange) {
+          onIndexChange(Number(prop), val);
+        } else {
+          onChange();
+        }
+        return true;
+      },
+      deleteProperty: (t, prop) => {
+        delete t[prop];
+        onChange();
+        return true;
+      }
+    });
+  }
+}
+//# sourceMappingURL=SwcHTMLElementBase.js.map

package/dist/cjs/elements/SwcHTMLElementBase.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/elements/SwcHTMLElementBase.ts"],
+  "sourcesContent": ["import { getTemplateMethod } from '../decorators/template';\nimport { getStyleMethod } from '../decorators/style';\n\nexport abstract class SwcHTMLElementBase extends HTMLElement {\n  protected _masterTplNodes: Node[] = [];\n  protected _asKey: string = 'value';\n  protected _asIndexKey: string = 'index';\n\n  constructor() {\n    super();\n  }\n\n  protected initCore() {\n    this._asKey = this.getAttribute('as') || 'value';\n    this._asIndexKey = this.getAttribute('as-index') || 'index';\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  }\n\n  protected getValueByPath(obj: any, path: string) {\n    if (path === this._asKey) return obj;\n    if (path.startsWith(`${this._asKey}.`)) {\n      return path\n        .split('.')\n        .slice(1)\n        .reduce((acc, part) => acc && acc[part], obj);\n    }\n    return undefined;\n  }\n\n  protected applyData(node: Node, data: any, index?: number) {\n    const context: Record<string, any> = {};\n    if (index !== undefined) {\n      context[this._asIndexKey] = index.toString();\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 (context[path] !== undefined) return context[path];\n          const val = this.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 (context[path] !== undefined) return context[path];\n            const v = this.getValueByPath(data, path);\n            return v !== undefined ? v : match;\n          });\n          if (a.value !== val) a.value = val;\n        });\n        el.childNodes.forEach(walk);\n      }\n    };\n    walk(node);\n  }\n\n  /**\n   * \uAC1D\uCCB4/\uBC30\uC5F4\uC758 \uBCC0\uACBD\uC744 \uAC10\uC9C0\uD558\uB294 Proxy \uC0DD\uC131 \uC720\uD2F8\uB9AC\uD2F0\n   */\n  protected createReactiveProxy(target: any, onChange: () => void, onIndexChange?: (index: number, val: any) => void) {\n    return new Proxy(target, {\n      set: (t, prop, val) => {\n        const isIndex = !isNaN(Number(prop));\n        t[prop] = val;\n        if (isIndex && onIndexChange) {\n          onIndexChange(Number(prop), val);\n        } else {\n          onChange();\n        }\n        return true;\n      },\n      deleteProperty: (t, prop) => {\n        delete t[prop];\n        onChange();\n        return true;\n      }\n    });\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGO,MAAe,2BAA2B,YAAY;AAAA,EAK3D,cAAc;AACZ,UAAM;AALR,SAAU,kBAA0B,CAAC;AACrC,SAAU,SAAiB;AAC3B,SAAU,cAAsB;AAAA,EAIhC;AAAA,EAEU,WAAW;AACnB,SAAK,SAAS,KAAK,aAAa,IAAI,KAAK;AACzC,SAAK,cAAc,KAAK,aAAa,UAAU,KAAK;AACpD,UAAM,UAAU,KAAK,YAAY,eAAe,UAAU;AAC1D,QAAI,SAAS;AACX,WAAK,kBAAkB,QAAQ,cAAc,EAAE,IAAI,OAAK,EAAE,UAAU,IAAI,CAAC;AAAA,IAC3E;AAAA,EACF;AAAA,EAEU,eAAe,KAAU,MAAc;AAC/C,QAAI,SAAS,KAAK,OAAQ,QAAO;AACjC,QAAI,KAAK,WAAW,GAAG,KAAK,MAAM,GAAG,GAAG;AACtC,aAAO,KACJ,MAAM,GAAG,EACT,MAAM,CAAC,EACP,OAAO,CAAC,KAAK,SAAS,OAAO,IAAI,IAAI,GAAG,GAAG;AAAA,IAChD;AACA,WAAO;AAAA,EACT;AAAA,EAEU,UAAU,MAAY,MAAW,OAAgB;AACzD,UAAM,UAA+B,CAAC;AACtC,QAAI,UAAU,QAAW;AACvB,cAAQ,KAAK,WAAW,IAAI,MAAM,SAAS;AAAA,IAC7C;AAEA,UAAM,OAAO,CAAC,MAAY;AACxB,UAAI,EAAE,aAAa,KAAK,WAAW;AACjC,YAAI,CAAE,EAAU,UAAW,CAAC,EAAU,YAAY,EAAE;AACpD,YAAI,OAAQ,EAAU;AAEtB,eAAO,KAAK,QAAQ,cAAc,CAAC,OAAe,SAAiB;AACjE,iBAAO,KAAK,KAAK;AACjB,cAAI,QAAQ,IAAI,MAAM,OAAW,QAAO,QAAQ,IAAI;AACpD,gBAAM,MAAM,KAAK,eAAe,MAAM,IAAI;AAC1C,iBAAO,QAAQ,SAAY,MAAM;AAAA,QACnC,CAAC;AACD,YAAI,EAAE,gBAAgB,KAAM,GAAE,cAAc;AAAA,MAC9C,WAAW,EAAE,aAAa,KAAK,cAAc;AAC3C,cAAM,KAAK;AACX,cAAM,KAAK,GAAG,UAAU,EAAE,QAAQ,OAAK;AACrC,cAAI,CAAE,EAAU,UAAW,CAAC,EAAU,YAAY,EAAE;AACpD,cAAI,MAAO,EAAU;AAErB,gBAAM,IAAI,QAAQ,cAAc,CAAC,OAAe,SAAiB;AAC/D,mBAAO,KAAK,KAAK;AACjB,gBAAI,QAAQ,IAAI,MAAM,OAAW,QAAO,QAAQ,IAAI;AACpD,kBAAM,IAAI,KAAK,eAAe,MAAM,IAAI;AACxC,mBAAO,MAAM,SAAY,IAAI;AAAA,UAC/B,CAAC;AACD,cAAI,EAAE,UAAU,IAAK,GAAE,QAAQ;AAAA,QACjC,CAAC;AACD,WAAG,WAAW,QAAQ,IAAI;AAAA,MAC5B;AAAA,IACF;AACA,SAAK,IAAI;AAAA,EACX;AAAA;AAAA;AAAA;AAAA,EAKU,oBAAoB,QAAa,UAAsB,eAAmD;AAClH,WAAO,IAAI,MAAM,QAAQ;AAAA,MACvB,KAAK,CAAC,GAAG,MAAM,QAAQ;AACrB,cAAM,UAAU,CAAC,MAAM,OAAO,IAAI,CAAC;AACnC,UAAE,IAAI,IAAI;AACV,YAAI,WAAW,eAAe;AAC5B,wBAAc,OAAO,IAAI,GAAG,GAAG;AAAA,QACjC,OAAO;AACL,mBAAS;AAAA,QACX;AACA,eAAO;AAAA,MACT;AAAA,MACA,gBAAgB,CAAC,GAAG,SAAS;AAC3B,eAAO,EAAE,IAAI;AACb,iBAAS;AACT,eAAO;AAAA,MACT;AAAA,IACF,CAAC;AAAA,EACH;AACF;",
+  "names": []
+}

package/dist/cjs/elements/SwcIf.js

@@ -21,6 +21,7 @@ __export(SwcIf_exports, {
 });
 module.exports = __toCommonJS(SwcIf_exports);
 var import__ = require("../index");
+var import_SwcHTMLElementBase = require("./SwcHTMLElementBase");
 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);
@@ -30,11 +31,10 @@ 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);
 };
-let SwcIf = class SwcIf2 extends HTMLElement {
+let SwcIf = class SwcIf2 extends import_SwcHTMLElementBase.SwcHTMLElementBase {
   constructor() {
     super();
     this._value = false;
-    this._masterTplNodes = [];
     this._observer = null;
   }
   set value(val) {
@@ -45,20 +45,13 @@ let SwcIf = class SwcIf2 extends HTMLElement {
     return this._value;
   }
   styles() {
-    return `
-      :host { display: contents; }
-    `;
+    return `:host { display: contents; }`;
   }
   renderTemplate() {
-    return `
-      <slot id="tpl-slot" style="display:none;"></slot>
-    `;
+    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.initCore();
     this._observer = new MutationObserver(() => this.render());
     this._observer.observe(this, { attributes: true });
     this.render();
@@ -101,7 +94,6 @@ let SwcIf = class SwcIf2 extends HTMLElement {
         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;

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

@@ -1,7 +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,eAA+C;;;;;;;;;;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;MADjB,wBAAc,EAAE,SAAS,UAAU,WAAW,KAAI,CAAE;;GACxC,KAAK;",
+  "sourcesContent": ["import { elementDefind, template, style } from '../index';\nimport { SwcHTMLElementBase } from './SwcHTMLElementBase';\n\n@elementDefind({ tagName: 'swc-if', useShadow: true })\nexport class SwcIf extends SwcHTMLElementBase {\n  private _value: any = false;\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 `:host { display: contents; }`;\n  }\n\n  @template\n  renderTemplate() {\n    return `<slot id=\"tpl-slot\" style=\"display:none;\"></slot>`;\n  }\n\n  connectedCallback() {\n    this.initCore();\n    this._observer = new MutationObserver(() => this.render());\n    this._observer.observe(this, { attributes: true });\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    let displayValue = attrValue !== null ? attrValue : this._value;\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    Array.from(this.children).forEach(c => {\n      if (c.getAttribute('slot') === 'if-content') {\n        c.remove();\n      }\n    });\n\n    const existingSlot = this.shadowRoot.querySelector('slot[name=\"if-content\"]');\n    if (existingSlot) existingSlot.remove();\n\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        } 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,eAA+C;AAC/C,gCAAmC;;;;;;;;;;AAG5B,IAAM,QAAN,MAAMA,eAAc,6CAAkB;EAI3C,cAAA;AACE,UAAK;AAJC,SAAA,SAAc;AACd,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;EACT;EAGA,iBAAc;AACZ,WAAO;EACT;EAEA,oBAAiB;AACf,SAAK,SAAQ;AACb,SAAK,YAAY,IAAI,iBAAiB,MAAM,KAAK,OAAM,CAAE;AACzD,SAAK,UAAU,QAAQ,MAAM,EAAE,YAAY,KAAI,CAAE;AACjD,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;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,UAAM,KAAK,KAAK,QAAQ,EAAE,QAAQ,OAAI;AACpC,UAAI,EAAE,aAAa,MAAM,MAAM,cAAc;AAC3C,UAAE,OAAM;MACV;IACF,CAAC;AAED,UAAM,eAAe,KAAK,WAAW,cAAc,yBAAyB;AAC5E,QAAI;AAAc,mBAAa,OAAM;AAErC,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;QAC1D,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;;AApEA,WAAA;EADC;;;;;AAMD,WAAA;EADC;;;;;AAtBU,QAAK,WAAA;MADjB,wBAAc,EAAE,SAAS,UAAU,WAAW,KAAI,CAAE;;GACxC,KAAK;",
   "names": ["SwcIf"]
 }

package/dist/cjs/elements/SwcObject.js

@@ -0,0 +1,115 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var SwcObject_exports = {};
+__export(SwcObject_exports, {
+  SwcObject: () => SwcObject
+});
+module.exports = __toCommonJS(SwcObject_exports);
+var import__ = require("../index");
+var import_SwcHTMLElementBase = require("./SwcHTMLElementBase");
+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);
+};
+let SwcObject = class SwcObject2 extends import_SwcHTMLElementBase.SwcHTMLElementBase {
+  constructor() {
+    super();
+    this._value = {};
+    this._renderedNodes = [];
+  }
+  set value(val) {
+    if (typeof val !== "object" || val === null)
+      val = {};
+    this._value = this.createReactiveProxy(val, () => this.updateUI());
+    this.render();
+  }
+  get value() {
+    return this._value;
+  }
+  styles() {
+    return `:host { display: contents; }`;
+  }
+  renderTemplate() {
+    return `<slot id="tpl-slot" style="display:none;"></slot>`;
+  }
+  connectedCallback() {
+    this.initCore();
+    this.render();
+  }
+  updateUI() {
+    this._renderedNodes.forEach((node) => {
+      this.applyData(node, this._value);
+    });
+  }
+  render() {
+    if (!this.shadowRoot || this._masterTplNodes.length === 0)
+      return;
+    this._renderedNodes.forEach((n) => {
+      if (n.parentElement === this)
+        this.removeChild(n);
+    });
+    this._renderedNodes = [];
+    let slot = this.shadowRoot.querySelector('slot[name="obj-content"]');
+    if (!slot) {
+      slot = document.createElement("slot");
+      slot.name = "obj-content";
+      this.shadowRoot.appendChild(slot);
+    }
+    this._masterTplNodes.forEach((tplNode) => {
+      const clone = tplNode.cloneNode(true);
+      if (clone.nodeType === Node.ELEMENT_NODE) {
+        clone.setAttribute("slot", "obj-content");
+      } else if (clone.nodeType === Node.TEXT_NODE) {
+        if (clone.textContent?.trim().length === 0)
+          return;
+        const span = document.createElement("span");
+        span.setAttribute("slot", "obj-content");
+        span.appendChild(clone);
+        this.appendChild(span);
+        this._renderedNodes.push(span);
+        this.applyData(span, this._value);
+        return;
+      }
+      this.appendChild(clone);
+      this._renderedNodes.push(clone);
+      this.applyData(clone, this._value);
+    });
+  }
+};
+__decorate([
+  import__.style,
+  __metadata("design:type", Function),
+  __metadata("design:paramtypes", []),
+  __metadata("design:returntype", void 0)
+], SwcObject.prototype, "styles", null);
+__decorate([
+  import__.template,
+  __metadata("design:type", Function),
+  __metadata("design:paramtypes", []),
+  __metadata("design:returntype", void 0)
+], SwcObject.prototype, "renderTemplate", null);
+SwcObject = __decorate([
+  (0, import__.elementDefind)({ tagName: "swc-object", useShadow: true }),
+  __metadata("design:paramtypes", [])
+], SwcObject);
+//# sourceMappingURL=SwcObject.js.map

package/dist/cjs/elements/SwcObject.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/elements/SwcObject.ts"],
+  "sourcesContent": ["import { elementDefind, template, style } from '../index';\nimport { SwcHTMLElementBase } from './SwcHTMLElementBase';\n\n@elementDefind({ tagName: 'swc-object', useShadow: true })\nexport class SwcObject extends SwcHTMLElementBase {\n  private _value: any = {};\n  private _renderedNodes: Node[] = [];\n\n  constructor() {\n    super();\n  }\n\n  set value(val: any) {\n    if (typeof val !== 'object' || val === null) val = {};\n    this._value = this.createReactiveProxy(val, () => this.updateUI());\n    this.render();\n  }\n\n  get value(): any {\n    return this._value;\n  }\n\n  @style\n  styles() {\n    return `:host { display: contents; }`;\n  }\n\n  @template\n  renderTemplate() {\n    return `<slot id=\"tpl-slot\" style=\"display:none;\"></slot>`;\n  }\n\n  connectedCallback() {\n    this.initCore();\n    this.render();\n  }\n\n  private updateUI() {\n    this._renderedNodes.forEach(node => {\n      this.applyData(node, this._value);\n    });\n  }\n\n  private render() {\n    if (!this.shadowRoot || this._masterTplNodes.length === 0) return;\n\n    this._renderedNodes.forEach(n => {\n      if (n.parentElement === this) this.removeChild(n);\n    });\n    this._renderedNodes = [];\n\n    let slot = this.shadowRoot.querySelector('slot[name=\"obj-content\"]');\n    if (!slot) {\n      slot = document.createElement('slot');\n      (slot as HTMLSlotElement).name = 'obj-content';\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', 'obj-content');\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', 'obj-content');\n        span.appendChild(clone);\n        this.appendChild(span);\n        this._renderedNodes.push(span);\n        this.applyData(span, this._value);\n        return;\n      }\n      this.appendChild(clone);\n      this._renderedNodes.push(clone);\n      this.applyData(clone, this._value);\n    });\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;AAAA,eAA+C;AAC/C,gCAAmC;;;;;;;;;;AAG5B,IAAM,YAAN,MAAMA,mBAAkB,6CAAkB;EAI/C,cAAA;AACE,UAAK;AAJC,SAAA,SAAc,CAAA;AACd,SAAA,iBAAyB,CAAA;EAIjC;EAEA,IAAI,MAAM,KAAQ;AAChB,QAAI,OAAO,QAAQ,YAAY,QAAQ;AAAM,YAAM,CAAA;AACnD,SAAK,SAAS,KAAK,oBAAoB,KAAK,MAAM,KAAK,SAAQ,CAAE;AACjE,SAAK,OAAM;EACb;EAEA,IAAI,QAAK;AACP,WAAO,KAAK;EACd;EAGA,SAAM;AACJ,WAAO;EACT;EAGA,iBAAc;AACZ,WAAO;EACT;EAEA,oBAAiB;AACf,SAAK,SAAQ;AACb,SAAK,OAAM;EACb;EAEQ,WAAQ;AACd,SAAK,eAAe,QAAQ,UAAO;AACjC,WAAK,UAAU,MAAM,KAAK,MAAM;IAClC,CAAC;EACH;EAEQ,SAAM;AACZ,QAAI,CAAC,KAAK,cAAc,KAAK,gBAAgB,WAAW;AAAG;AAE3D,SAAK,eAAe,QAAQ,OAAI;AAC9B,UAAI,EAAE,kBAAkB;AAAM,aAAK,YAAY,CAAC;IAClD,CAAC;AACD,SAAK,iBAAiB,CAAA;AAEtB,QAAI,OAAO,KAAK,WAAW,cAAc,0BAA0B;AACnE,QAAI,CAAC,MAAM;AACT,aAAO,SAAS,cAAc,MAAM;AACnC,WAAyB,OAAO;AACjC,WAAK,WAAW,YAAY,IAAI;IAClC;AAEA,SAAK,gBAAgB,QAAQ,aAAU;AACrC,YAAM,QAAQ,QAAQ,UAAU,IAAI;AACpC,UAAI,MAAM,aAAa,KAAK,cAAc;AACvC,cAAsB,aAAa,QAAQ,aAAa;MAC3D,WAAW,MAAM,aAAa,KAAK,WAAW;AAC5C,YAAI,MAAM,aAAa,KAAI,EAAG,WAAW;AAAG;AAC5C,cAAM,OAAO,SAAS,cAAc,MAAM;AAC1C,aAAK,aAAa,QAAQ,aAAa;AACvC,aAAK,YAAY,KAAK;AACtB,aAAK,YAAY,IAAI;AACrB,aAAK,eAAe,KAAK,IAAI;AAC7B,aAAK,UAAU,MAAM,KAAK,MAAM;AAChC;MACF;AACA,WAAK,YAAY,KAAK;AACtB,WAAK,eAAe,KAAK,KAAK;AAC9B,WAAK,UAAU,OAAO,KAAK,MAAM;IACnC,CAAC;EACH;;AArDA,WAAA;EADC;;;;;AAMD,WAAA;EADC;;;;;AAvBU,YAAS,WAAA;MADrB,wBAAc,EAAE,SAAS,cAAc,WAAW,KAAI,CAAE;;GAC5C,SAAS;",
+  "names": ["SwcObject"]
+}

package/dist/cjs/index.js

@@ -26,4 +26,6 @@ __reExport(src_exports, require("./elements/SwcIf"), module.exports);
 __reExport(src_exports, require("./elements/SwcChoose"), module.exports);
 __reExport(src_exports, require("./elements/SwcWhen"), module.exports);
 __reExport(src_exports, require("./elements/SwcOther"), module.exports);
+__reExport(src_exports, require("./elements/SwcObject"), module.exports);
+__reExport(src_exports, require("./elements/SwcHTMLElementBase"), module.exports);
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.ts"],
-  "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;AAAA;AAAA,wBAAc,uCAAd;AACA,wBAAc,kCADd;AAEA,wBAAc,+BAFd;AAGA,wBAAc,0CAHd;AAIA,wBAAc,+BAJd;AAKA,wBAAc,kCALd;AAMA,wBAAc,0CANd;AAOA,wBAAc,gCAPd;AAQA,wBAAc,6BARd;AASA,wBAAc,iCATd;AAUA,wBAAc,+BAVd;AAWA,wBAAc,gCAXd;",
+  "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';\nexport * from './elements/SwcObject';\nexport * from './elements/SwcHTMLElementBase';\n"],
+  "mappings": ";;;;;;;;;;;;;;AAAA;AAAA;AAAA,wBAAc,uCAAd;AACA,wBAAc,kCADd;AAEA,wBAAc,+BAFd;AAGA,wBAAc,0CAHd;AAIA,wBAAc,+BAJd;AAKA,wBAAc,kCALd;AAMA,wBAAc,0CANd;AAOA,wBAAc,gCAPd;AAQA,wBAAc,6BARd;AASA,wBAAc,iCATd;AAUA,wBAAc,+BAVd;AAWA,wBAAc,gCAXd;AAYA,wBAAc,iCAZd;AAaA,wBAAc,0CAbd;",
   "names": []
 }