@dooboostore/simple-web-component 1.0.1 → 1.0.3

package/dist/esm-bundle/dooboostore-simple-web-component.esm.js

@@ -183,7 +183,7 @@ var getAddEventListenerMetadata = (target) => {
   return ReflectUtils.getMetadata(ADD_EVENT_LISTENER_METADATA_KEY, constructor);
 };
 
-// src/decorators/elementDefind.ts
+// src/decorators/elementDefine.ts
 var ELEMENT_CONFIG_KEY = Symbol("simple-web-component:element-config");
 var BUILT_IN_TAG_MAP = /* @__PURE__ */ new Map();
 var registerTag = (className, tagName) => {
@@ -249,7 +249,7 @@ var registerTag = (className, tagName) => {
   ["HTMLVideoElement", "video"],
   ["HTMLHeadingElement", "h1"]
 ].forEach(([cls, tag]) => registerTag(cls, tag));
-var elementDefind = (inConfig) => (constructor) => {
+var elementDefine = (inConfig) => (constructor) => {
   const config = typeof inConfig === "string" ? { tagName: inConfig } : inConfig;
   let extendsTagName = config.extends;
   if (!extendsTagName) {
@@ -414,6 +414,87 @@ var getElementConfig = (target) => {
   return ReflectUtils.getMetadata(ELEMENT_CONFIG_KEY, constructor);
 };
 
+// src/elements/SwcHTMLElementBase.ts
+var SwcHTMLElementBase = class 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;
+      }
+    });
+  }
+};
+
 // src/elements/SwcForOf.ts
 var __decorate = function(decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -424,55 +505,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);
 };
-var SwcForOf = class SwcForOf2 extends HTMLElement {
+var SwcForOf = class SwcForOf2 extends 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) {
@@ -483,50 +537,6 @@ var 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;
@@ -584,7 +594,7 @@ __decorate([
   __metadata("design:returntype", void 0)
 ], SwcForOf.prototype, "renderTemplate", null);
 SwcForOf = __decorate([
-  elementDefind({ tagName: "swc-for-of", useShadow: true }),
+  elementDefine({ tagName: "swc-for-of", useShadow: true }),
   __metadata("design:paramtypes", [])
 ], SwcForOf);
 
@@ -598,11 +608,10 @@ var __decorate2 = function(decorators, target, key, desc) {
 var __metadata2 = function(k, v) {
   if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
-var SwcIf = class SwcIf2 extends HTMLElement {
+var SwcIf = class SwcIf2 extends SwcHTMLElementBase {
   constructor() {
     super();
     this._value = false;
-    this._masterTplNodes = [];
     this._observer = null;
   }
   set value(val) {
@@ -613,20 +622,13 @@ var 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();
@@ -669,7 +671,6 @@ var 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;
@@ -697,7 +698,7 @@ __decorate2([
   __metadata2("design:returntype", void 0)
 ], SwcIf.prototype, "renderTemplate", null);
 SwcIf = __decorate2([
-  elementDefind({ tagName: "swc-if", useShadow: true }),
+  elementDefine({ tagName: "swc-if", useShadow: true }),
   __metadata2("design:paramtypes", [])
 ], SwcIf);
 
@@ -793,7 +794,7 @@ __decorate3([
   __metadata3("design:returntype", void 0)
 ], SwcChoose.prototype, "render", null);
 SwcChoose = __decorate3([
-  elementDefind({ tagName: "swc-choose", useShadow: true })
+  elementDefine({ tagName: "swc-choose", useShadow: true })
 ], SwcChoose);
 
 // src/elements/SwcWhen.ts
@@ -827,7 +828,7 @@ __decorate4([
   __metadata4("design:returntype", void 0)
 ], SwcWhen.prototype, "render", null);
 SwcWhen = __decorate4([
-  elementDefind({ tagName: "swc-when", useShadow: true })
+  elementDefine({ tagName: "swc-when", useShadow: true })
 ], SwcWhen);
 
 // src/elements/SwcOther.ts
@@ -861,8 +862,100 @@ __decorate5([
   __metadata5("design:returntype", void 0)
 ], SwcOther.prototype, "render", null);
 SwcOther = __decorate5([
-  elementDefind({ tagName: "swc-other", useShadow: true })
+  elementDefine({ tagName: "swc-other", useShadow: true })
 ], SwcOther);
+
+// src/elements/SwcObject.ts
+var __decorate6 = 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 __metadata6 = function(k, v) {
+  if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+var SwcObject = class SwcObject2 extends 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);
+    });
+  }
+};
+__decorate6([
+  style,
+  __metadata6("design:type", Function),
+  __metadata6("design:paramtypes", []),
+  __metadata6("design:returntype", void 0)
+], SwcObject.prototype, "styles", null);
+__decorate6([
+  template,
+  __metadata6("design:type", Function),
+  __metadata6("design:paramtypes", []),
+  __metadata6("design:returntype", void 0)
+], SwcObject.prototype, "renderTemplate", null);
+SwcObject = __decorate6([
+  elementDefine({ tagName: "swc-object", useShadow: true }),
+  __metadata6("design:paramtypes", [])
+], SwcObject);
 export {
   ADD_EVENT_LISTENER_METADATA_KEY,
   ATTRIBUTE_CHANGED_METADATA_KEY,
@@ -873,13 +966,15 @@ export {
   STYLE_METHOD_KEY,
   SwcChoose,
   SwcForOf,
+  SwcHTMLElementBase,
   SwcIf,
+  SwcObject,
   SwcOther,
   SwcWhen,
   TEMPLATE_METHOD_KEY,
   addEventListener,
   attributeChanged,
-  elementDefind,
+  elementDefine,
   getAddEventListenerMetadata,
   getAttributeChangedMap,
   getElementConfig,