@dooboostore/simple-web-component 1.0.1 → 1.0.3

package/src/elements/SwcIf.ts

@@ -1,9 +1,9 @@
-import { elementDefind, template, style } from '../index';
+import { elementDefine, template, style } from '../index';
+import { SwcHTMLElementBase } from './SwcHTMLElementBase';
 
-@elementDefind({ tagName: 'swc-if', useShadow: true })
-export class SwcIf extends HTMLElement {
+@elementDefine({ tagName: 'swc-if', useShadow: true })
+export class SwcIf extends SwcHTMLElementBase {
   private _value: any = false;
-  private _masterTplNodes: Node[] = [];
   private _observer: MutationObserver | null = null;
 
   constructor() {
@@ -21,28 +21,18 @@ export class SwcIf extends HTMLElement {
 
   @style
   styles() {
-    return `
-      :host { display: contents; }
-    `;
+    return `:host { display: contents; }`;
   }
 
   @template
   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') as HTMLSlotElement;
-    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();
   }
 
@@ -54,38 +44,30 @@ export class SwcIf extends HTMLElement {
     if (!this.shadowRoot) return;
 
     const attrValue = this.getAttribute('value');
-    if (attrValue !== null && attrValue.includes('{{')) return; // 치환 전이면 대기
+    if (attrValue !== null && attrValue.includes('{{')) return;
 
-    // 로직 결정: attribute가 있으면 우선, 없으면 property 사용
     let displayValue = attrValue !== null ? attrValue : this._value;
-
-    // "false", "null", "undefined" 문자열 처리 및 기본 truthy 체크
     let isTruthy = !!displayValue;
     if (typeof displayValue === 'string') {
       if (displayValue === 'false' || displayValue === '0' || displayValue === '') isTruthy = false;
       else {
-        // 식인 경우 평가 시도 (예: "10 > 5")
         try {
           isTruthy = !!new Function(`return ${displayValue}`)();
         } catch (e) {
-          // 단순 문자열이면 true로 간주
           isTruthy = true;
         }
       }
     }
 
-    // 1. 기존에 렌더링된 노드들 삭제
     Array.from(this.children).forEach(c => {
       if (c.getAttribute('slot') === 'if-content') {
         c.remove();
       }
     });
 
-    // 2. Shadow DOM의 컨텐츠 슬롯 삭제
     const existingSlot = this.shadowRoot.querySelector('slot[name="if-content"]');
     if (existingSlot) existingSlot.remove();
 
-    // 3. 조건이 참일 때만 노드들을 복제해서 삽입
     if (isTruthy && this._masterTplNodes.length > 0) {
       const contentSlot = document.createElement('slot');
       contentSlot.name = 'if-content';
@@ -95,7 +77,6 @@ export class SwcIf extends HTMLElement {
         const clone = tplNode.cloneNode(true);
         if (clone.nodeType === Node.ELEMENT_NODE) {
           (clone as HTMLElement).setAttribute('slot', 'if-content');
-          (clone as HTMLElement).style.display = '';
         } else if (clone.nodeType === Node.TEXT_NODE) {
           if (clone.textContent?.trim().length === 0) return;
           const span = document.createElement('span');

package/src/elements/SwcObject.ts

@@ -0,0 +1,78 @@
+import { elementDefine, template, style } from '../index';
+import { SwcHTMLElementBase } from './SwcHTMLElementBase';
+
+@elementDefine({ tagName: 'swc-object', useShadow: true })
+export class SwcObject extends SwcHTMLElementBase {
+  private _value: any = {};
+  private _renderedNodes: Node[] = [];
+
+  constructor() {
+    super();
+  }
+
+  set value(val: any) {
+    if (typeof val !== 'object' || val === null) val = {};
+    this._value = this.createReactiveProxy(val, () => this.updateUI());
+    this.render();
+  }
+
+  get value(): any {
+    return this._value;
+  }
+
+  @style
+  styles() {
+    return `:host { display: contents; }`;
+  }
+
+  @template
+  renderTemplate() {
+    return `<slot id="tpl-slot" style="display:none;"></slot>`;
+  }
+
+  connectedCallback() {
+    this.initCore();
+    this.render();
+  }
+
+  private updateUI() {
+    this._renderedNodes.forEach(node => {
+      this.applyData(node, this._value);
+    });
+  }
+
+  private 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 as HTMLSlotElement).name = 'obj-content';
+      this.shadowRoot.appendChild(slot);
+    }
+
+    this._masterTplNodes.forEach(tplNode => {
+      const clone = tplNode.cloneNode(true);
+      if (clone.nodeType === Node.ELEMENT_NODE) {
+        (clone as HTMLElement).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);
+    });
+  }
+}

package/src/elements/SwcOther.ts

@@ -1,6 +1,6 @@
-import { elementDefind, template, style } from '../index';
+import { elementDefine, template, style } from '../index';
 
-@elementDefind({ tagName: 'swc-other', useShadow: true })
+@elementDefine({ tagName: 'swc-other', useShadow: true })
 export class SwcOther extends HTMLElement {
   @style
   styles() {

package/src/elements/SwcWhen.ts

@@ -1,6 +1,6 @@
-import { elementDefind, template, style } from '../index';
+import { elementDefine, template, style } from '../index';
 
-@elementDefind({ tagName: 'swc-when', useShadow: true })
+@elementDefine({ tagName: 'swc-when', useShadow: true })
 export class SwcWhen extends HTMLElement {
   @style
   styles() {

package/src/index.ts

@@ -1,4 +1,4 @@
-export * from './decorators/elementDefind';
+export * from './decorators/elementDefine';
 export * from './decorators/template';
 export * from './decorators/style';
 export * from './decorators/attributeChanged';
@@ -10,3 +10,5 @@ export * from './elements/SwcIf';
 export * from './elements/SwcChoose';
 export * from './elements/SwcWhen';
 export * from './elements/SwcOther';
+export * from './elements/SwcObject';
+export * from './elements/SwcHTMLElementBase';