@dooboostore/simple-web-component 1.0.1 → 1.0.3

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

@@ -29,13 +29,15 @@ var dooboostoreSimpleWebComponent = (() => {
     STYLE_METHOD_KEY: () => STYLE_METHOD_KEY,
     SwcChoose: () => SwcChoose,
     SwcForOf: () => SwcForOf,
+    SwcHTMLElementBase: () => SwcHTMLElementBase,
     SwcIf: () => SwcIf,
+    SwcObject: () => SwcObject,
     SwcOther: () => SwcOther,
     SwcWhen: () => SwcWhen,
     TEMPLATE_METHOD_KEY: () => TEMPLATE_METHOD_KEY,
     addEventListener: () => addEventListener,
     attributeChanged: () => attributeChanged,
-    elementDefind: () => elementDefind,
+    elementDefine: () => elementDefine,
     getAddEventListenerMetadata: () => getAddEventListenerMetadata,
     getAttributeChangedMap: () => getAttributeChangedMap,
     getElementConfig: () => getElementConfig,
@@ -234,7 +236,7 @@ var dooboostoreSimpleWebComponent = (() => {
     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) => {
@@ -300,7 +302,7 @@ var dooboostoreSimpleWebComponent = (() => {
     ["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) {
@@ -465,6 +467,87 @@ var dooboostoreSimpleWebComponent = (() => {
     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;
@@ -475,55 +558,28 @@ var dooboostoreSimpleWebComponent = (() => {
   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) {
@@ -534,50 +590,6 @@ var dooboostoreSimpleWebComponent = (() => {
         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;
@@ -635,7 +647,7 @@ var dooboostoreSimpleWebComponent = (() => {
     __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);
 
@@ -649,11 +661,10 @@ var dooboostoreSimpleWebComponent = (() => {
   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) {
@@ -664,20 +675,13 @@ var dooboostoreSimpleWebComponent = (() => {
       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();
@@ -720,7 +724,6 @@ var dooboostoreSimpleWebComponent = (() => {
           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;
@@ -748,7 +751,7 @@ var dooboostoreSimpleWebComponent = (() => {
     __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);
 
@@ -844,7 +847,7 @@ var dooboostoreSimpleWebComponent = (() => {
     __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
@@ -878,7 +881,7 @@ var dooboostoreSimpleWebComponent = (() => {
     __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
@@ -912,8 +915,100 @@ var dooboostoreSimpleWebComponent = (() => {
     __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);
   return __toCommonJS(bundle_entry_exports);
 })();
 //# sourceMappingURL=dooboostore-simple-web-component.umd.js.map