@dooboostore/simple-web-component 1.0.0 → 1.0.2

package/dist/cjs/elements/SwcChoose.js

@@ -0,0 +1,117 @@
+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 SwcChoose_exports = {};
+__export(SwcChoose_exports, {
+  SwcChoose: () => SwcChoose
+});
+module.exports = __toCommonJS(SwcChoose_exports);
+var import__ = require("../index");
+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 SwcChoose = class SwcChoose2 extends HTMLElement {
+  constructor() {
+    super(...arguments);
+    this._observer = null;
+    this._value = void 0;
+  }
+  set value(val) {
+    this._value = val;
+    this.evaluate();
+  }
+  get value() {
+    return this._value;
+  }
+  styles() {
+    return `:host { display: contents; }`;
+  }
+  render() {
+    return `<slot id="choose-slot"></slot>`;
+  }
+  connectedCallback() {
+    this._observer = new MutationObserver(() => this.evaluate());
+    this._observer.observe(this, { attributes: true, subtree: true, childList: true });
+    this.evaluate();
+  }
+  disconnectedCallback() {
+    this._observer?.disconnect();
+  }
+  evaluate() {
+    const whens = Array.from(this.querySelectorAll("swc-when"));
+    const other = this.querySelector("swc-other");
+    let matched = false;
+    const chooseValue = this.getAttribute("value") ?? this._value;
+    whens.forEach((when) => {
+      if (matched) {
+        when.style.display = "none";
+        return;
+      }
+      const testAttr = when.getAttribute("test");
+      if (testAttr === null)
+        return;
+      if (testAttr.includes("{{"))
+        return;
+      let isConditionMet = false;
+      if (chooseValue !== void 0 && chooseValue !== null) {
+        isConditionMet = String(chooseValue) === String(testAttr);
+      } else {
+        try {
+          if (testAttr === "true")
+            isConditionMet = true;
+          else if (testAttr === "false")
+            isConditionMet = false;
+          else
+            isConditionMet = !!new Function(`return ${testAttr}`)();
+        } catch (e) {
+          isConditionMet = false;
+        }
+      }
+      if (isConditionMet) {
+        when.style.display = "";
+        matched = true;
+      } else {
+        when.style.display = "none";
+      }
+    });
+    if (other) {
+      other.style.display = matched ? "none" : "";
+    }
+  }
+};
+__decorate([
+  import__.style,
+  __metadata("design:type", Function),
+  __metadata("design:paramtypes", []),
+  __metadata("design:returntype", void 0)
+], SwcChoose.prototype, "styles", null);
+__decorate([
+  import__.template,
+  __metadata("design:type", Function),
+  __metadata("design:paramtypes", []),
+  __metadata("design:returntype", void 0)
+], SwcChoose.prototype, "render", null);
+SwcChoose = __decorate([
+  (0, import__.elementDefind)({ tagName: "swc-choose", useShadow: true })
+], SwcChoose);
+//# sourceMappingURL=SwcChoose.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/elements/SwcChoose.ts"],
+  "sourcesContent": ["import { elementDefind, template, style } from '../index';\n\n@elementDefind({ tagName: 'swc-choose', useShadow: true })\nexport class SwcChoose extends HTMLElement {\n  private _observer: MutationObserver | null = null;\n  private _value: any = undefined;\n\n  set value(val: any) {\n    this._value = val;\n    this.evaluate();\n  }\n\n  get value() {\n    return this._value;\n  }\n\n  @style\n  styles() {\n    return `:host { display: contents; }`;\n  }\n\n  @template\n  render() {\n    return `<slot id=\"choose-slot\"></slot>`;\n  }\n\n  connectedCallback() {\n    this._observer = new MutationObserver(() => this.evaluate());\n    this._observer.observe(this, { attributes: true, subtree: true, childList: true });\n    this.evaluate();\n  }\n\n  disconnectedCallback() {\n    this._observer?.disconnect();\n  }\n\n  private evaluate() {\n    const whens = Array.from(this.querySelectorAll('swc-when'));\n    const other = this.querySelector('swc-other');\n    let matched = false;\n\n    // 현재 choose에 설정된 value (문자열인 경우 \"null\", \"undefined\" 등 처리)\n    const chooseValue = this.getAttribute('value') ?? this._value;\n\n    whens.forEach(when => {\n      if (matched) {\n        (when as HTMLElement).style.display = 'none';\n        return;\n      }\n\n      const testAttr = when.getAttribute('test');\n      if (testAttr === null) return;\n      if (testAttr.includes('{{')) return; // 아직 치환 전이면 스킵\n\n      let isConditionMet = false;\n\n      if (chooseValue !== undefined && chooseValue !== null) {\n        // 1. 매칭 모드: choose의 value와 when의 test값이 같은지 비교\n        isConditionMet = String(chooseValue) === String(testAttr);\n      } else {\n        // 2. 표현식 모드: testAttr 자체가 실행 가능한 코드인 경우\n        try {\n          if (testAttr === 'true') isConditionMet = true;\n          else if (testAttr === 'false') isConditionMet = false;\n          else isConditionMet = !!new Function(`return ${testAttr}`)();\n        } catch (e) {\n          isConditionMet = false;\n        }\n      }\n\n      if (isConditionMet) {\n        (when as HTMLElement).style.display = '';\n        matched = true;\n      } else {\n        (when as HTMLElement).style.display = 'none';\n      }\n    });\n\n    if (other) {\n      (other as HTMLElement).style.display = matched ? 'none' : '';\n    }\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;AAAA,eAA+C;;;;;;;;;;AAGxC,IAAM,YAAN,MAAMA,mBAAkB,YAAW;EAAnC,cAAA;;AACG,SAAA,YAAqC;AACrC,SAAA,SAAc;EA6ExB;EA3EE,IAAI,MAAM,KAAQ;AAChB,SAAK,SAAS;AACd,SAAK,SAAQ;EACf;EAEA,IAAI,QAAK;AACP,WAAO,KAAK;EACd;EAGA,SAAM;AACJ,WAAO;EACT;EAGA,SAAM;AACJ,WAAO;EACT;EAEA,oBAAiB;AACf,SAAK,YAAY,IAAI,iBAAiB,MAAM,KAAK,SAAQ,CAAE;AAC3D,SAAK,UAAU,QAAQ,MAAM,EAAE,YAAY,MAAM,SAAS,MAAM,WAAW,KAAI,CAAE;AACjF,SAAK,SAAQ;EACf;EAEA,uBAAoB;AAClB,SAAK,WAAW,WAAU;EAC5B;EAEQ,WAAQ;AACd,UAAM,QAAQ,MAAM,KAAK,KAAK,iBAAiB,UAAU,CAAC;AAC1D,UAAM,QAAQ,KAAK,cAAc,WAAW;AAC5C,QAAI,UAAU;AAGd,UAAM,cAAc,KAAK,aAAa,OAAO,KAAK,KAAK;AAEvD,UAAM,QAAQ,UAAO;AACnB,UAAI,SAAS;AACV,aAAqB,MAAM,UAAU;AACtC;MACF;AAEA,YAAM,WAAW,KAAK,aAAa,MAAM;AACzC,UAAI,aAAa;AAAM;AACvB,UAAI,SAAS,SAAS,IAAI;AAAG;AAE7B,UAAI,iBAAiB;AAErB,UAAI,gBAAgB,UAAa,gBAAgB,MAAM;AAErD,yBAAiB,OAAO,WAAW,MAAM,OAAO,QAAQ;MAC1D,OAAO;AAEL,YAAI;AACF,cAAI,aAAa;AAAQ,6BAAiB;mBACjC,aAAa;AAAS,6BAAiB;;AAC3C,6BAAiB,CAAC,CAAC,IAAI,SAAS,UAAU,QAAQ,EAAE,EAAC;QAC5D,SAAS,GAAG;AACV,2BAAiB;QACnB;MACF;AAEA,UAAI,gBAAgB;AACjB,aAAqB,MAAM,UAAU;AACtC,kBAAU;MACZ,OAAO;AACJ,aAAqB,MAAM,UAAU;MACxC;IACF,CAAC;AAED,QAAI,OAAO;AACR,YAAsB,MAAM,UAAU,UAAU,SAAS;IAC5D;EACF;;AAhEA,WAAA;EADC;;;;;AAMD,WAAA;EADC;;;;;AAlBU,YAAS,WAAA;MADrB,wBAAc,EAAE,SAAS,cAAc,WAAW,KAAI,CAAE;GAC5C,SAAS;",
+  "names": ["SwcChoose"]
+}

package/dist/cjs/elements/SwcForOf.js

@@ -0,0 +1,126 @@
+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 SwcForOf_exports = {};
+__export(SwcForOf_exports, {
+  SwcForOf: () => SwcForOf
+});
+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);
+  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 SwcForOf = class SwcForOf2 extends import_SwcHTMLElementBase.SwcHTMLElementBase {
+  constructor() {
+    super();
+    this._value = [];
+  }
+  set value(val) {
+    if (!Array.isArray(val))
+      val = [];
+    this._value = this.createReactiveProxy(val, () => this.renderAll(), (idx, v) => this.updateSingleRow(idx, v));
+    this.renderAll();
+  }
+  get value() {
+    return this._value;
+  }
+  styles() {
+    return `:host { display: contents; }`;
+  }
+  renderTemplate() {
+    return `<slot id="tpl-slot" style="display:none;"></slot>`;
+  }
+  connectedCallback() {
+    this.initCore();
+    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);
+    }
+  }
+  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([
+  import__.style,
+  __metadata("design:type", Function),
+  __metadata("design:paramtypes", []),
+  __metadata("design:returntype", void 0)
+], SwcForOf.prototype, "styles", null);
+__decorate([
+  import__.template,
+  __metadata("design:type", Function),
+  __metadata("design:paramtypes", []),
+  __metadata("design:returntype", void 0)
+], SwcForOf.prototype, "renderTemplate", null);
+SwcForOf = __decorate([
+  (0, import__.elementDefind)({ tagName: "swc-for-of", useShadow: true }),
+  __metadata("design:paramtypes", [])
+], SwcForOf);
+//# sourceMappingURL=SwcForOf.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/elements/SwcForOf.ts"],
+  "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

@@ -0,0 +1,127 @@
+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 SwcIf_exports = {};
+__export(SwcIf_exports, {
+  SwcIf: () => SwcIf
+});
+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);
+  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 SwcIf = class SwcIf2 extends import_SwcHTMLElementBase.SwcHTMLElementBase {
+  constructor() {
+    super();
+    this._value = false;
+    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() {
+    this.initCore();
+    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");
+        } 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([
+  import__.style,
+  __metadata("design:type", Function),
+  __metadata("design:paramtypes", []),
+  __metadata("design:returntype", void 0)
+], SwcIf.prototype, "styles", null);
+__decorate([
+  import__.template,
+  __metadata("design:type", Function),
+  __metadata("design:paramtypes", []),
+  __metadata("design:returntype", void 0)
+], SwcIf.prototype, "renderTemplate", null);
+SwcIf = __decorate([
+  (0, import__.elementDefind)({ tagName: "swc-if", useShadow: true }),
+  __metadata("design:paramtypes", [])
+], SwcIf);
+//# sourceMappingURL=SwcIf.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/elements/SwcIf.ts"],
+  "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"]
+}