@dooboostore/simple-web-component 1.0.10 → 1.0.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dooboostore/simple-web-component",
-  "version": "1.0.10",
+  "version": "1.0.12",
   "license": "MIT",
   "type": "module",
   "main": "./dist/cjs/index.js",
@@ -65,24 +65,25 @@
     "@babel/preset-env": "^7.24.0",
     "@babel/preset-typescript": "^7.24.0",
     "@types/jest": "^26.0.22",
-    "raw-loader": "^4.0.2",
+    "@types/node": "^20",
     "@typescript-eslint/eslint-plugin": "^4.16.1",
     "@typescript-eslint/parser": "^4.16.1",
-    "webpack": "^5.93.0",
-    "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^5.2.0",
+    "esbuild": "^0.23.0",
+    "esbuild-plugin-tsc": "^0.5.0",
     "html-webpack-plugin": "^5.6.3",
+    "raw-loader": "^4.0.2",
+    "reflect-metadata": "^0.2.2",
     "ts-loader": "^9.5.1",
     "tslib": "^2.8.1",
-    "@types/node": "^20",
+    "tsx": "^4.21.0",
     "typescript": "^5.9.2",
-    "esbuild-plugin-tsc": "^0.5.0",
-    "esbuild": "^0.23.0",
-    "reflect-metadata": "^0.2.2",
+    "webpack": "^5.93.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^5.2.0",
     "@dooboostore/core": "1.0.28",
     "@dooboostore/core-web": "1.0.9",
-    "@dooboostore/core-node": "1.0.10",
-    "@dooboostore/simple-boot": "1.0.53"
+    "@dooboostore/simple-boot": "1.0.53",
+    "@dooboostore/core-node": "1.0.10"
   },
   "scripts": {
     "clean": "rm -rf dist",
@@ -99,6 +100,8 @@
     "publish:npm": "pnpm run build && cp package.json package.json.back && pnpm pack && TARBALL_NAME=$(ls dooboostore-simple-web-component-*.tgz | head -n 1) && tar -xzf \"$TARBALL_NAME\" -C . --strip-components=1 package/package.json && rm \"$TARBALL_NAME\" && (pnpm publish --no-git-checks || true) && cp package.json.back package.json && rm -rf package.json.back  ",
     "ts:clean": "find . -name '*.js' -o -name '*.map' -o -name '*.d.ts' | xargs rm -f",
     "typecheck": "pnpm exec tsc --noEmit",
+    "generate:is": "tsx generate-is.ts",
+    "generate:is:watch": "node --import tsx --watch --watch-path=./src/elements/base/SwcHTMLElementBase.ts --watch-path=./src/elements/SwcApp.ts generate-is.ts",
     "test": "echo test",
     "test:bundle": "pnpm --filter @dooboostore/simple-web-component-bundle-test dev"
   }

package/src/config/config.ts

@@ -0,0 +1,59 @@
+export const HTML_TAG_ENTRIES: [string, string][] = [
+  ['HTMLAnchorElement', 'a'],
+  ['HTMLAreaElement', 'area'],
+  ['HTMLAudioElement', 'audio'],
+  ['HTMLBaseElement', 'base'],
+  ['HTMLButtonElement', 'button'],
+  ['HTMLCanvasElement', 'canvas'],
+  ['HTMLDataElement', 'data'],
+  ['HTMLDataListElement', 'datalist'],
+  ['HTMLDetailsElement', 'details'],
+  ['HTMLDialogElement', 'dialog'],
+  ['HTMLDivElement', 'div'],
+  ['HTMLDListElement', 'dl'],
+  ['HTMLEmbedElement', 'embed'],
+  ['HTMLFieldSetElement', 'fieldset'],
+  ['HTMLFormElement', 'form'],
+  ['HTMLHRElement', 'hr'],
+  ['HTMLIFrameElement', 'iframe'],
+  ['HTMLImageElement', 'img'],
+  ['HTMLInputElement', 'input'],
+  ['HTMLLabelElement', 'label'],
+  ['HTMLLegendElement', 'legend'],
+  ['HTMLLIElement', 'li'],
+  ['HTMLLinkElement', 'link'],
+  ['HTMLMapElement', 'map'],
+  ['HTMLMetaElement', 'meta'],
+  ['HTMLMeterElement', 'meter'],
+  ['HTMLModElement', 'del'],
+  ['HTMLObjectElement', 'object'],
+  ['HTMLOListElement', 'ol'],
+  ['HTMLOptGroupElement', 'optgroup'],
+  ['HTMLOptionElement', 'option'],
+  ['HTMLOutputElement', 'output'],
+  ['HTMLParagraphElement', 'p'],
+  ['HTMLParamElement', 'param'],
+  ['HTMLPictureElement', 'picture'],
+  ['HTMLPreElement', 'pre'],
+  ['HTMLProgressElement', 'progress'],
+  ['HTMLQuoteElement', 'blockquote'],
+  ['HTMLScriptElement', 'script'],
+  ['HTMLSelectElement', 'select'],
+  ['HTMLSlotElement', 'slot'],
+  ['HTMLSourceElement', 'source'],
+  ['HTMLSpanElement', 'span'],
+  ['HTMLStyleElement', 'style'],
+  ['HTMLTableElement', 'table'],
+  ['HTMLTableSectionElement', 'tbody'],
+  ['HTMLTableCellElement', 'td'],
+  ['HTMLTemplateElement', 'template'],
+  ['HTMLTextAreaElement', 'textarea'],
+  ['HTMLTimeElement', 'time'],
+  ['HTMLTitleElement', 'title'],
+  ['HTMLTableRowElement', 'tr'],
+  ['HTMLTrackElement', 'track'],
+  ['HTMLUListElement', 'ul'],
+  ['HTMLVideoElement', 'video'],
+  ['HTMLHeadingElement', 'h1'],
+  ['HTMLBodyElement', 'body']
+];

package/src/decorators/elementDefine.ts

@@ -8,6 +8,7 @@ import { getAttributeMetadataList } from './attribute';
 import { getStateMetadataList } from './state';
 import { getEmitCustomEventMetadataList } from './emitCustomEvent';
 import { SwcUtils, SWC_NOT_FOUND } from '../utils/Utils';
+import { HTML_TAG_ENTRIES } from '../config/config';
 
 export interface ElementConfig {
   name: string;
@@ -23,28 +24,6 @@ export const STATE_CHANGE_EVENT = 'swc:state-change';
 
 // --- 환경 초기화 헬퍼 ---
 
-const HTML_TAG_ENTRIES: [string, string][] = [
-  ['HTMLAnchorElement', 'a'], ['HTMLAreaElement', 'area'], ['HTMLAudioElement', 'audio'],
-  ['HTMLBaseElement', 'base'], ['HTMLButtonElement', 'button'], ['HTMLCanvasElement', 'canvas'],
-  ['HTMLDataElement', 'data'], ['HTMLDataListElement', 'datalist'], ['HTMLDetailsElement', 'details'],
-  ['HTMLDialogElement', 'dialog'], ['HTMLDivElement', 'div'], ['HTMLDListElement', 'dl'],
-  ['HTMLEmbedElement', 'embed'], ['HTMLFieldSetElement', 'fieldset'], ['HTMLFormElement', 'form'],
-  ['HTMLHRElement', 'hr'], ['HTMLIFrameElement', 'iframe'], ['HTMLImageElement', 'img'],
-  ['HTMLInputElement', 'input'], ['HTMLLabelElement', 'label'], ['HTMLLegendElement', 'legend'],
-  ['HTMLLIElement', 'li'], ['HTMLLinkElement', 'link'], ['HTMLMapElement', 'map'],
-  ['HTMLMetaElement', 'meta'], ['HTMLMeterElement', 'meter'], ['HTMLModElement', 'del'],
-  ['HTMLObjectElement', 'object'], ['HTMLOListElement', 'ol'], ['HTMLOptGroupElement', 'optgroup'],
-  ['HTMLOptionElement', 'option'], ['HTMLOutputElement', 'output'], ['HTMLParagraphElement', 'p'],
-  ['HTMLParamElement', 'param'], ['HTMLPictureElement', 'picture'], ['HTMLPreElement', 'pre'],
-  ['HTMLProgressElement', 'progress'], ['HTMLQuoteElement', 'blockquote'], ['HTMLScriptElement', 'script'],
-  ['HTMLSelectElement', 'select'], ['HTMLSlotElement', 'slot'], ['HTMLSourceElement', 'source'],
-  ['HTMLSpanElement', 'span'], ['HTMLStyleElement', 'style'], ['HTMLTableElement', 'table'],
-  ['HTMLTableSectionElement', 'tbody'], ['HTMLTableCellElement', 'td'], ['HTMLTemplateElement', 'template'],
-  ['HTMLTextAreaElement', 'textarea'], ['HTMLTimeElement', 'time'], ['HTMLTitleElement', 'title'],
-  ['HTMLTableRowElement', 'tr'], ['HTMLTrackElement', 'track'], ['HTMLUListElement', 'ul'],
-  ['HTMLVideoElement', 'video'], ['HTMLHeadingElement', 'h1'],
-];
-
 function buildEnv(configWindow?: Window) {
   const win: any = configWindow || (typeof window !== 'undefined' ? window : undefined);
   const doc: Document = win?.document;
@@ -59,7 +38,7 @@ function buildEnv(configWindow?: Window) {
     $w: win,
     $q: (sel: string, root?: Element | Document | ShadowRoot) => (root ?? doc).querySelector(sel),
     $qa: (sel: string, root?: Element | Document | ShadowRoot) => Array.from((root ?? doc).querySelectorAll(sel)),
-    $qi: (id: string, root?: Document | ShadowRoot) => (root ?? doc).getElementById(id),
+    $qi: (id: string, root?: Document | ShadowRoot) => (root ?? doc).getElementById(id)
   } as const;
 
   return { win, doc, builtInTagMap, domHelpers };
@@ -70,17 +49,19 @@ export const elementDefine =
   (constructor: any) => {
     const config: ElementConfig = typeof inConfig === 'string' ? { name: inConfig } : inConfig;
     const { win, doc, builtInTagMap: BUILT_IN_TAG_MAP, domHelpers: SWC_DOM_HELPERS } = buildEnv(config.window);
+    config.window = win;
     const SWC_DOM_HELPER_KEYS = Object.keys(SWC_DOM_HELPERS) as (keyof typeof SWC_DOM_HELPERS)[];
     const SWC_DOM_HELPER_VALS = () => SWC_DOM_HELPER_KEYS.map(k => (SWC_DOM_HELPERS as any)[k]);
 
     let extendsTagName = config.extends;
     if (!extendsTagName) {
-      let proto = Object.getPrototypeOf(constructor);
+      let proto = constructor;
       while (proto && proto !== HTMLElement && proto !== Function.prototype) {
         extendsTagName = BUILT_IN_TAG_MAP.get(proto);
         if (extendsTagName) break;
         proto = Object.getPrototypeOf(proto);
       }
+      config.extends = extendsTagName;
     }
 
     const attributePropsList = getAttributeMetadataList(constructor);
@@ -105,6 +86,8 @@ export const elementDefine =
       // name→value 컨텍스트 반환 (applyData의 hostContext용)
       _getHostContext(): Record<string, any> {
         const ctx: Record<string, any> = {};
+
+        // 1. @state 및 @attribute 속성들 수집
         if (stateList) {
           stateList.forEach(meta => {
             const name = meta.options.name!;
@@ -119,6 +102,19 @@ export const elementDefine =
             ctx[name] = val;
           });
         }
+
+        // 2. 'as' 별칭 및 기본 'value' 처리
+        const alias = this.getAttribute('as');
+        const hostVal = (this as any).value !== undefined ? (this as any).value : this;
+
+        // 항상 'value'로 접근 가능하도록 유지
+        ctx['value'] = hostVal;
+
+        if (alias && alias !== 'value') {
+          // 사용자가 지정한 별칭으로도 접근 가능 (예: as="list" -> {{list}})
+          ctx[alias] = hostVal;
+        }
+
         return ctx;
       }
 
@@ -341,11 +337,35 @@ export const elementDefine =
                   this._boundElements.set(el, bound);
                 }
                 if (!bound.has(aliasKey)) {
+                  // 부모가 자식의 STATE_CHANGE_EVENT를 듣고 업데이트 (기존 버블링용)
                   el.addEventListener(STATE_CHANGE_EVENT, () => this._updateState(alias));
                   bound.add(aliasKey);
                 }
               }
 
+              // --- [FIX] 부모 호스트의 상태 변경 구독 ---
+              // 현재 엘리먼트가 상위 호스트의 별칭(예: t1)을 참조하고 있다면,
+              // 상위 호스트에서 발생하는 이벤트를 감지해야 함.
+              const $hosts = SwcUtils.findAllSwcHosts(el);
+              $hosts.forEach(host => {
+                const hAlias = host.getAttribute('as');
+                if (hAlias) {
+                  const hostBindKey = `parent-host-event:${hAlias}`;
+                  let hBound = this._boundElements.get(host);
+                  if (!hBound) {
+                    hBound = new Set();
+                    this._boundElements.set(host, hBound);
+                  }
+                  if (!hBound.has(hostBindKey)) {
+                    host.addEventListener(STATE_CHANGE_EVENT, () => {
+                      // 부모 별칭이 바뀌었으므로, 해당 별칭을 사용하는 자신의 바인딩들 갱신
+                      this._updateState(hAlias);
+                    });
+                    hBound.add(hostBindKey);
+                  }
+                }
+              });
+
               Array.from(el.attributes).forEach(attr => {
                 if (attr.name.startsWith('swc-on-') && !swcLifecycleAttributes.includes(attr.name)) {
                   const eventName = attr.name.substring(7);
@@ -436,7 +456,19 @@ export const elementDefine =
           const isExternal = this._externalSources.has(rootName);
           const isSelfAlias = this.getAttribute('as') === rootName;
           const isInstanceProp = rootName in this;
-          if (!isState && !isAttr && !isLogicKey && !isExternal && !isSelfAlias && !isInstanceProp) return;
+
+          // --- [FIX] 부모 호스트 체인에서 별칭 확인 추가 ---
+          let isParentAlias = false;
+          let curr: any = (this as any).parentElement || ((this as any).getRootNode?.() as any)?.host;
+          while (curr) {
+            if (curr.getAttribute?.('as') === rootName) {
+              isParentAlias = true;
+              break;
+            }
+            curr = curr.parentElement || (curr.getRootNode?.() as any)?.host;
+          }
+
+          if (!isState && !isAttr && !isLogicKey && !isExternal && !isSelfAlias && !isInstanceProp && !isParentAlias) return;
 
           if (!this._stateBindings.has(rootName)) this._stateBindings.set(rootName, []);
           if (!(node as any)[tplKey]) (node as any)[tplKey] = content;
@@ -457,7 +489,15 @@ export const elementDefine =
           this._executeBindingUpdate(stateName);
           const selfAlias = this.getAttribute('as');
           if (selfAlias && selfAlias !== stateName) this._executeBindingUpdate(selfAlias);
-          this.dispatchEvent(new CustomEvent(STATE_CHANGE_EVENT, { bubbles: true, composed: true }));
+
+          // --- [FIX] 자식들에게 상태 변경 알림 ---
+          this.dispatchEvent(
+            new CustomEvent(STATE_CHANGE_EVENT, {
+              bubbles: true,
+              composed: true,
+              detail: { source: stateName, host: this }
+            })
+          );
         } finally {
           this._isUpdatingState = false;
         }
@@ -678,10 +718,7 @@ export const elementDefine =
         const fireMutationCallbacks = (mutationList: MutationRecord[], observer: MutationObserver, root: 'light' | 'shadow') => {
           mutationMetaList?.forEach(meta => {
             const r = meta.options.root ?? 'auto';
-            const matches =
-              r === 'all' ||
-              r === root ||
-              (r === 'auto' && (this.shadowRoot ? root === 'shadow' : root === 'light'));
+            const matches = r === 'all' || r === root || (r === 'auto' && (this.shadowRoot ? root === 'shadow' : root === 'light'));
             if (matches && typeof (this as any)[meta.propertyKey] === 'function') {
               (this as any)[meta.propertyKey](mutationList, observer, root);
             }
@@ -756,13 +793,15 @@ export const elementDefine =
       }
     };
 
+    ReflectUtils.defineMetadata(ELEMENT_CONFIG_KEY, config, NewClass);
+    ReflectUtils.defineMetadata(ELEMENT_CONFIG_KEY, config, constructor);
+
     const registry = config.customElementRegistry || (typeof win !== 'undefined' ? win.customElements : undefined);
     if (registry && !registry.get(config.name)) {
       const options = config.extends ? { extends: config.extends } : undefined;
       registry.define(config.name, NewClass as any, options);
     }
 
-    ReflectUtils.defineMetadata(ELEMENT_CONFIG_KEY, config, NewClass);
     return NewClass as any;
   };
 

package/src/elements/SwcAppInterface.ts

@@ -0,0 +1,19 @@
+import { SimpleApplication } from '@dooboostore/simple-boot/SimpleApplication';
+import { SwcHTMLElementInterface } from './SwcHTMLElementInterface';
+import { ConstructorType, Optional } from '@dooboostore/core/types';
+import { RouterConfig } from "@dooboostore/simple-boot/decorators/route/Router";
+
+export type SwcConfigType = {
+  rootRouter: ConstructorType<any>;
+  routeType: 'path' | 'hash';
+  path?: string;
+  // routerConfig: RouterConfig;
+  window: Window;
+};
+
+export type SwcAttributeConfigType = Optional<SwcConfigType, 'routeType' | 'window'>;
+
+export interface SwcAppInterface extends SwcHTMLElementInterface {
+  simpleApplication?: SimpleApplication;
+  routing(path: string): Promise<void>;
+}

package/src/elements/SwcChoose.ts

@@ -1,74 +1,86 @@
 import { attribute, elementDefine, onAttributeChanged } from '../index';
-import { SwcHTMLElementBase } from './SwcHTMLElementBase';
+import { SwcHTMLTemplateElementBase } from './base/SwcHTMLTemplateElementBase';
 
 interface Branch {
-  tpl: HTMLElement;
+  tpl: DocumentFragment;
   test: string | null;
 }
 
-@elementDefine({ name: 'swc-choose' })
-export class SwcChoose extends SwcHTMLElementBase {
-  private _placeholder = document.createComment('swc-choose-placeholder');
-  private _isShowing = true;
-  private _isInitialized = false;
-  private _observer: MutationObserver | null = null;
+@elementDefine({ name: 'swc-choose', extends: 'template' })
+export class SwcChoose extends SwcHTMLTemplateElementBase {
+  private _endMarker = document.createComment('swc-choose-end');
 
-  @attribute('swc-value')
-  _swcValue: any = undefined;
+  @attribute('value')
+  _value: any = undefined;
 
   private _branches: Branch[] = [];
   private _otherBranch: Branch | null = null;
-  private _branchInit = false;
 
   constructor() {
     super();
   }
 
-  @onAttributeChanged('swc-value')
+  @onAttributeChanged('value')
   onValueChange() {
     this.evaluate();
   }
 
-  set swcValue(val: any) {
-    this._swcValue = val;
+  set value(val: any) {
+    this._value = val;
+    this.onValueChange();
   }
 
-  get swcValue() {
-    return this._swcValue;
+  get value() {
+    return this._value;
   }
 
   connectedCallback() {
     if (this._isInitialized) return;
     this._isInitialized = true;
+
+    if (this.nextSibling !== this._endMarker) {
+      this.parentNode?.insertBefore(this._endMarker, this.nextSibling);
+    }
     this._initBranches();
-    this._observer = new MutationObserver(() => this.evaluate());
-    this._observer.observe(this, { attributes: true });
     this.evaluate();
   }
 
   private _initBranches() {
-    if (this._branchInit) return;
-    const children = Array.from(this.children);
-    children.forEach(c => {
-      const isWhen = c.localName === 'swc-when' || c.getAttribute('is')?.startsWith('swc-when-');
-      const isOther = c.localName === 'swc-other' || c.getAttribute('is')?.startsWith('swc-other-');
-      const branch: Branch = {
-        tpl: c.cloneNode(true) as HTMLElement,
-        test: c.getAttribute('test')
-      };
-      if (isWhen) this._branches.push(branch);
-      else if (isOther) this._otherBranch = branch;
-    });
-    this._branchInit = true;
-  }
+    const content = this.content;
+    Array.from(content.children).forEach(c => {
+      const tagName = c.localName.toLowerCase();
+      const isAttr = (c.getAttribute('is') || '').toLowerCase();
 
-  disconnectedCallback() {
-    this._observer?.disconnect();
+      const isWhen = tagName === 'swc-when' || isAttr.includes('swc-when');
+      const isOther = tagName === 'swc-other' || isAttr.includes('swc-other');
+
+      if (isWhen || isOther) {
+        const branch: Branch = {
+          tpl: document.createDocumentFragment(),
+          test: c.getAttribute('test')
+        };
+
+        const source = c instanceof HTMLTemplateElement ? c.content : c;
+        Array.from(source.childNodes).forEach(child => branch.tpl.appendChild(child.cloneNode(true)));
+
+        if (isWhen) this._branches.push(branch);
+        else this._otherBranch = branch;
+      }
+    });
   }
 
   private evaluate() {
+    if (!this.isConnected) return;
+
+    let curr = this.nextSibling;
+    while (curr && curr !== this._endMarker) {
+      const next = curr.nextSibling;
+      curr.parentElement?.removeChild(curr);
+      curr = next;
+    }
+
     let matchedBranch: Branch | null = null;
-    const chooseValue = this.getAttribute('swc-value') ?? this.getAttribute('value') ?? this._swcValue;
+    const chooseValue = this.getAttribute('value') ?? this._value;
 
     for (const branch of this._branches) {
       const testAttr = branch.test;
@@ -81,7 +93,7 @@ export class SwcChoose extends SwcHTMLElementBase {
         try {
           if (testAttr === 'true') isMet = true;
           else if (testAttr === 'false') isMet = false;
-          else isMet = !!new Function('return ' + testAttr)();
+          else isMet = !!new Function(`return ${testAttr}`)();
         } catch (e) {
           isMet = false;
         }
@@ -97,26 +109,12 @@ export class SwcChoose extends SwcHTMLElementBase {
       matchedBranch = this._otherBranch;
     }
 
-    if (!matchedBranch && this._isShowing) {
-      if (this.parentNode) {
-        this.parentNode.insertBefore(this._placeholder, this);
-        this.remove();
-        this._isShowing = false;
-      }
-    } else if (matchedBranch) {
-      if (!this._isShowing) {
-        if (this._placeholder.parentNode) {
-          this._placeholder.parentNode.insertBefore(this, this._placeholder);
-          this._placeholder.remove();
-          this._isShowing = true;
-        }
-      }
-      if (this._isShowing) {
-        this.innerHTML = '';
-        const clone = matchedBranch.tpl.cloneNode(true) as HTMLElement;
-        (clone as any).style.display = 'contents';
-        this.appendChild(clone);
-      }
+    if (matchedBranch) {
+      const clone = matchedBranch.tpl.cloneNode(true);
+      Array.from(clone.childNodes).forEach(node => {
+        this.applyData(node, this._value);
+      });
+      this.parentNode?.insertBefore(clone, this._endMarker);
     }
   }
 }

package/src/elements/SwcForOf.ts

@@ -1,131 +1,76 @@
-import { attribute, elementDefine, innerHtml, onAttributeChanged } from '../index';
-import { SwcHTMLElementBase } from './SwcHTMLElementBase';
-
-@elementDefine({ name: 'swc-for-of' })
-export class SwcForOf extends SwcHTMLElementBase {
-  private _placeholder = document.createComment('swc-for-of-placeholder');
-  private _isShowing = true;
-  private _isConnected = false;
-
-  @attribute('swc-value')
-  _swcValue: any[] = [];
+import { attribute, elementDefine, onAttributeChanged } from '../index';
+import { SwcHTMLTemplateElementBase } from './base/SwcHTMLTemplateElementBase';
 
+@elementDefine({ name: 'swc-for-of', extends: 'template' })
+export class SwcForOf extends SwcHTMLTemplateElementBase {
+  private _endMarker = document.createComment('swc-for-of-end');
   private _rowNodes: Node[][] = [];
 
-  constructor() {
-    super();
-  }
+  @attribute('value')
+  _value: any[] = [];
 
-  @onAttributeChanged('swc-value')
+  @onAttributeChanged('value')
   onValueChange() {
-    if (!Array.isArray(this._swcValue)) this._swcValue = [];
-
-    // 이미 Proxy가 아닌 경우에만 새 Proxy 생성
-    if (!(this._swcValue as any).__swc_is_proxy) {
-      this._swcValue = this.createReactiveProxy(
-        this._swcValue,
-        () => this.renderAll(),
+    if (!Array.isArray(this._value)) this._value = [];
+    if (!(this._value as any).__swc_is_proxy) {
+      this._value = this.createReactiveProxy(
+        this._value,
+        () => this.render(),
         (idx, v) => this.updateSingleRow(idx, v)
       );
     }
-
-    // connectedCallback 이후에만 렌더링 (DOM이 준비된 상태)
-    if (this._isConnected) {
-      if (this._masterTplNodes.length === 0) this.initCore();
-      this.evaluate();
-    }
-  }
-
-  set swcValue(val: any[]) {
-    this._swcValue = val;
+    this.render();
   }
 
-  get swcValue(): any[] {
-    return this._swcValue;
+  set value(val: any[]) {
+    this._value = val;
+    this.onValueChange();
   }
 
-  @innerHtml({ useShadow: true })
-  renderTemplate() {
-    return `
-      <style>:host { display: contents; }</style>
-      <slot id="tpl-slot" style="display:none;"></slot>
-    `;
+  get value(): any[] {
+    return this._value;
   }
 
   connectedCallback() {
-    this._isConnected = true;
-    this.initCore();
-    this.evaluate();
-  }
-
-  private evaluate() {
-    if (this._masterTplNodes.length === 0) this.initCore();
+    if (this._isInitialized) return;
+    this._isInitialized = true;
 
-    const hasData = Array.isArray(this._swcValue) && this._swcValue.length > 0;
-
-    if (!hasData && this._isShowing) {
-      if (this.parentNode) {
-        this.parentNode.insertBefore(this._placeholder, this);
-        this.remove();
-        this._isShowing = false;
-      }
-    } else if (hasData) {
-      if (!this._isShowing) {
-        if (this._placeholder.parentNode) {
-          this._placeholder.parentNode.insertBefore(this, this._placeholder);
-          this._placeholder.remove();
-          this._isShowing = true;
-        }
-      }
-      this.renderAll();
+    if (this.nextSibling !== this._endMarker) {
+      this.parentNode?.insertBefore(this._endMarker, this.nextSibling);
     }
+    this.render();
   }
 
   public updateSingleRow(index: number, newValue: any) {
-    if (!this._isShowing) return;
     const nodes = this._rowNodes[index];
     if (nodes && nodes.length > 0) {
-      nodes.forEach(node => this.applyData(node, newValue, index));
-    } else if (index === this._rowNodes.length) {
-      this.renderRow(newValue, index);
+      nodes.forEach(node => {
+        this.applyData(node, newValue, index);
+      });
+    } else {
+      this.render();
     }
   }
 
-  public addRow(item: any) {
-    this._swcValue.push(item);
-  }
-
-  public removeRow(index: number) {
-    if (index < 0 || index >= this._rowNodes.length) return;
+  private render() {
+    if (!this.isConnected) return;
 
-    this._rowNodes[index].forEach(node => (node as Element).remove());
-    this._rowNodes.splice(index, 1);
-    this._swcValue.splice(index, 1);
-
-    for (let i = index; i < this._rowNodes.length; i++) {
-      this._rowNodes[i].forEach(node => this.applyData(node, this._swcValue[i], i));
-    }
+    // Remove existing rows
+    this._rowNodes.forEach(nodes => nodes.forEach(n => n.parentElement?.removeChild(n)));
+    this._rowNodes = [];
 
-    this.evaluate();
-  }
+    if (Array.isArray(this._value)) {
+      this._value.forEach((item, index) => {
+        const clone = this.content.cloneNode(true);
+        const currentNodes: Node[] = Array.from(clone.childNodes);
 
-  private renderRow(item: any, index: number) {
-    if (this._masterTplNodes.length === 0) return;
-    const currentNodes: Node[] = [];
-    this._masterTplNodes.forEach(tplNode => {
-      const clone = tplNode.cloneNode(true);
-      this.appendChild(clone);
-      this.applyData(clone, item, index);
-      currentNodes.push(clone);
-    });
-    this._rowNodes[index] = currentNodes;
-  }
+        currentNodes.forEach(node => {
+          this.applyData(node, item, index);
+        });
 
-  private renderAll() {
-    this.innerHTML = '';
-    this._rowNodes = [];
-    if (Array.isArray(this._swcValue)) {
-      this._swcValue.forEach((item, index) => this.renderRow(item, index));
+        this.parentNode?.insertBefore(clone, this._endMarker);
+        this._rowNodes[index] = currentNodes;
+      });
     }
   }
 }