@dooboostore/simple-web-component 1.0.1 → 1.0.2

package/dist/types/elements/SwcHTMLElementBase.d.ts

@@ -0,0 +1,14 @@
+export declare abstract class SwcHTMLElementBase extends HTMLElement {
+    protected _masterTplNodes: Node[];
+    protected _asKey: string;
+    protected _asIndexKey: string;
+    constructor();
+    protected initCore(): void;
+    protected getValueByPath(obj: any, path: string): any;
+    protected applyData(node: Node, data: any, index?: number): void;
+    /**
+     * 객체/배열의 변경을 감지하는 Proxy 생성 유틸리티
+     */
+    protected createReactiveProxy(target: any, onChange: () => void, onIndexChange?: (index: number, val: any) => void): any;
+}
+//# sourceMappingURL=SwcHTMLElementBase.d.ts.map

package/dist/types/elements/SwcHTMLElementBase.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwcHTMLElementBase.d.ts","sourceRoot":"","sources":["../../../src/elements/SwcHTMLElementBase.ts"],"names":[],"mappings":"AAGA,8BAAsB,kBAAmB,SAAQ,WAAW;IAC1D,SAAS,CAAC,eAAe,EAAE,IAAI,EAAE,CAAM;IACvC,SAAS,CAAC,MAAM,EAAE,MAAM,CAAW;IACnC,SAAS,CAAC,WAAW,EAAE,MAAM,CAAW;;IAMxC,SAAS,CAAC,QAAQ;IASlB,SAAS,CAAC,cAAc,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM;IAW/C,SAAS,CAAC,SAAS,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,EAAE,MAAM;IAsCzD;;OAEG;IACH,SAAS,CAAC,mBAAmB,CAAC,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,IAAI,EAAE,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,IAAI;CAmBnH"}

package/dist/types/elements/SwcIf.d.ts

@@ -1,6 +1,6 @@
-export declare class SwcIf extends HTMLElement {
+import { SwcHTMLElementBase } from './SwcHTMLElementBase';
+export declare class SwcIf extends SwcHTMLElementBase {
     private _value;
-    private _masterTplNodes;
     private _observer;
     constructor();
     set value(val: any);

package/dist/types/elements/SwcIf.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SwcIf.d.ts","sourceRoot":"","sources":["../../../src/elements/SwcIf.ts"],"names":[],"mappings":"AAEA,qBACa,KAAM,SAAQ,WAAW;IACpC,OAAO,CAAC,MAAM,CAAc;IAC5B,OAAO,CAAC,eAAe,CAAc;IACrC,OAAO,CAAC,SAAS,CAAiC;;IAMlD,IAAI,KAAK,CAAC,GAAG,EAAE,GAAG,EAGjB;IAED,IAAI,KAAK,IAAI,GAAG,CAEf;IAGD,MAAM;IAON,cAAc;IAMd,iBAAiB;IAajB,oBAAoB;IAIpB,OAAO,CAAC,MAAM;CA0Df"}
+{"version":3,"file":"SwcIf.d.ts","sourceRoot":"","sources":["../../../src/elements/SwcIf.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAE1D,qBACa,KAAM,SAAQ,kBAAkB;IAC3C,OAAO,CAAC,MAAM,CAAc;IAC5B,OAAO,CAAC,SAAS,CAAiC;;IAMlD,IAAI,KAAK,CAAC,GAAG,EAAE,GAAG,EAGjB;IAED,IAAI,KAAK,IAAI,GAAG,CAEf;IAGD,MAAM;IAKN,cAAc;IAId,iBAAiB;IAOjB,oBAAoB;IAIpB,OAAO,CAAC,MAAM;CAiDf"}

package/dist/types/elements/SwcObject.d.ts

@@ -0,0 +1,14 @@
+import { SwcHTMLElementBase } from './SwcHTMLElementBase';
+export declare class SwcObject extends SwcHTMLElementBase {
+    private _value;
+    private _renderedNodes;
+    constructor();
+    set value(val: any);
+    get value(): any;
+    styles(): string;
+    renderTemplate(): string;
+    connectedCallback(): void;
+    private updateUI;
+    private render;
+}
+//# sourceMappingURL=SwcObject.d.ts.map

package/dist/types/elements/SwcObject.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwcObject.d.ts","sourceRoot":"","sources":["../../../src/elements/SwcObject.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAE1D,qBACa,SAAU,SAAQ,kBAAkB;IAC/C,OAAO,CAAC,MAAM,CAAW;IACzB,OAAO,CAAC,cAAc,CAAc;;IAMpC,IAAI,KAAK,CAAC,GAAG,EAAE,GAAG,EAIjB;IAED,IAAI,KAAK,IAAI,GAAG,CAEf;IAGD,MAAM;IAKN,cAAc;IAId,iBAAiB;IAKjB,OAAO,CAAC,QAAQ;IAMhB,OAAO,CAAC,MAAM;CAkCf"}

package/dist/types/index.d.ts

@@ -10,4 +10,6 @@ export * from './elements/SwcIf';
 export * from './elements/SwcChoose';
 export * from './elements/SwcWhen';
 export * from './elements/SwcOther';
+export * from './elements/SwcObject';
+export * from './elements/SwcHTMLElementBase';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC;AAC3C,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC;AAC3C,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,+BAA+B,CAAC"}

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

@@ -29,7 +29,9 @@ 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,
@@ -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;
@@ -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;
@@ -914,6 +917,98 @@ var dooboostoreSimpleWebComponent = (() => {
   SwcOther = __decorate5([
     elementDefind({ 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([
+    elementDefind({ tagName: "swc-object", useShadow: true }),
+    __metadata6("design:paramtypes", [])
+  ], SwcObject);
   return __toCommonJS(bundle_entry_exports);
 })();
 //# sourceMappingURL=dooboostore-simple-web-component.umd.js.map