@dooboostore/simple-web-component 1.0.7 → 1.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dooboostore/simple-web-component",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "license": "MIT",
   "type": "module",
   "main": "./dist/cjs/index.js",
@@ -79,8 +79,8 @@
     "esbuild-plugin-tsc": "^0.5.0",
     "esbuild": "^0.23.0",
     "reflect-metadata": "^0.2.2",
-    "@dooboostore/core": "1.0.28",
     "@dooboostore/core-web": "1.0.9",
+    "@dooboostore/core": "1.0.28",
     "@dooboostore/core-node": "1.0.10"
   },
   "scripts": {

package/src/decorators/elementDefine.ts

@@ -125,15 +125,19 @@ export const elementDefine =
 
       constructor(...args: any[]) {
         super(...args);
+
         if (stateList) {
           stateList.forEach(meta => {
             const key = meta.propertyKey;
             const stateName = meta.options.name!;
+
+            // 필드 초기화로 덮어씌워지기 전/후의 값을 확실히 낚아챔
             const initialVal = (this as any)[key];
             this._internalStates.set(
               key,
               SwcUtils.createReactiveProxy(initialVal, () => this._updateState(stateName))
             );
+
             Object.defineProperty(this, key, {
               get: () => this._internalStates.get(key),
               set: newVal => {
@@ -149,6 +153,7 @@ export const elementDefine =
             });
           });
         }
+
         const innerHtmlList = getInnerHtmlMetadataList(this);
         if (innerHtmlList?.some(it => it.options.useShadow === true) && !this.shadowRoot) {
           this.attachShadow({ mode: 'open' });
@@ -157,7 +162,6 @@ export const elementDefine =
 
       private _syncDecorators() {
         this._buildStateMap();
-
         const getSearchRoots = (rootOption?: string): Node[] => {
           const roots: Node[] = [];
           if (rootOption === 'shadow') {
@@ -168,7 +172,6 @@ export const elementDefine =
             if (this.shadowRoot) roots.push(this.shadowRoot);
             roots.push(this as any as Node);
           } else {
-            // Default: 'auto'
             roots.push(this.shadowRoot || (this as any as Node));
           }
           return roots;
@@ -252,8 +255,7 @@ export const elementDefine =
       }
 
       private _buildStateMap() {
-        this._stateBindings.clear();
-        this._externalSources.clear();
+        // 기존 바인딩 맵을 완전히 비우지 않고 유지하면서 새로운 노드만 추가함 (바인딩 소실 방지 핵심)
         const scan = (root: Node) => {
           const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT);
           let node: Node | null = null;
@@ -262,7 +264,7 @@ export const elementDefine =
             else if (node.nodeType === Node.ELEMENT_NODE) {
               const el = node as HTMLElement;
               const alias = el.getAttribute('as');
-              if (alias) {
+              if (alias && !this._externalSources.has(alias)) {
                 this._externalSources.set(alias, el);
                 el.addEventListener(STATE_CHANGE_EVENT, () => this._updateState(alias));
               }
@@ -275,20 +277,36 @@ export const elementDefine =
       }
 
       private _parseAndBind(node: Node | Attr, type: 'text' | 'attribute', owner?: HTMLElement) {
-        const content = node.textContent || '';
+        const tplKey = `__swc_original_${this._swcId}`;
+        // 이미 이 인스턴스에 의해 바인딩된 노드라면 스킵 (중복 방지)
+        const isAlreadyBound = (node as any).__swc_bound_ids?.has(this._swcId);
+
+        // 텍스트는 원본 템플릿(tplKey)에서, 없으면 현재 내용에서 추출
+        const content = (node as any)[tplKey] || node.textContent || '';
         const matches = Array.from(content.matchAll(/{{(.*?)}}/g));
         if (matches.length === 0) return;
+
+        if (isAlreadyBound) return;
+
         matches.forEach(match => {
           const fullPath = match[1].trim();
           const rootName = fullPath.split('.')[0];
+
           const isState = stateList?.some(s => s.options.name === rootName);
           const isLogicKey = (this as any)._asKey === rootName || (this as any)._asIndexKey === rootName;
           const isExternal = this._externalSources.has(rootName);
           const isSelfAlias = this.getAttribute('as') === rootName;
+
           if (!isState && !isLogicKey && !isExternal && !isSelfAlias) return;
+
           if (!this._stateBindings.has(rootName)) this._stateBindings.set(rootName, []);
-          const tplKey = `__swc_original_${this._swcId}`;
+
           if (!(node as any)[tplKey]) (node as any)[tplKey] = content;
+
+          // 바인딩 ID 기록
+          if (!(node as any).__swc_bound_ids) (node as any).__swc_bound_ids = new Set();
+          (node as any).__swc_bound_ids.add(this._swcId);
+
           this._stateBindings.get(rootName)!.push({ node, type, owner, path: fullPath });
           this._updateState(rootName);
         });
@@ -306,14 +324,20 @@ export const elementDefine =
         const bindings = this._stateBindings.get(stateName);
         if (!bindings) return;
         const tplKey = `__swc_original_${this._swcId}`;
+
         bindings.forEach(bin => {
           let text = (bin.node as any)[tplKey];
+          if (!text) return;
+
           const matches = Array.from(text.matchAll(/{{(.*?)}}/g));
+          let updatedText = text;
+
           for (const match of matches) {
             const path = match[1].trim();
             const root = path.split('.')[0];
             let val: any = undefined;
             let current: HTMLElement | null = this as any as HTMLElement;
+
             while (current) {
               const currentNewClass = current as any;
               if (current.getAttribute('as') === root) {
@@ -338,16 +362,24 @@ export const elementDefine =
               }
               current = current.parentElement || (current.getRootNode() as any).host;
             }
+
             if (val !== undefined) {
               const strVal = val === null || val === undefined ? '' : typeof val === 'object' ? '[Object]' : String(val);
-              text = text.replace(match[0], strVal);
+              updatedText = updatedText.replace(match[0], strVal);
+
               if (bin.type === 'attribute' && bin.owner) {
-                if (val === null || val === undefined) bin.owner.removeAttribute(bin.attrName!);
-                else bin.owner.setAttribute(bin.attrName!, text);
+                const attrName = (bin.node as Attr).name;
+                if (val === null || val === undefined) bin.owner.removeAttribute(attrName);
+                else {
+                  bin.owner.setAttribute(attrName, updatedText);
+                  if ((attrName === 'value' || attrName === 'checked') && bin.owner.tagName.match(/INPUT|TEXTAREA|SELECT/)) {
+                    (bin.owner as any)[attrName] = updatedText;
+                  }
+                }
               }
             }
           }
-          if (bin.type === 'text') bin.node.textContent = text;
+          if (bin.type === 'text') bin.node.textContent = updatedText;
         });
       }
 

package/src/utils/Utils.ts

@@ -1,45 +1,33 @@
 export class SwcUtils {
-  static getValueByPath(obj: any, path: string, asKey: string) {
+  static getValueByPath(obj: any, path: string, rootName: string) {
     if (!obj || !path) return undefined;
 
     const parts = path.split('.');
 
-    // 1. Try resolving directly on the provided object (Full path)
-    let result = obj;
-    let success = true;
-    for (const part of parts) {
-      if (result !== null && typeof result === 'object' && part in result) {
-        result = result[part];
-      } else {
-        success = false;
-        break;
-      }
-    }
-
-    if (success && result !== obj && !(result instanceof HTMLElement)) {
-      return result;
-    }
-
-    // 2. Handle asKey fallback (for swc-for-of where obj IS the data)
-    if (path === asKey) return obj;
-    if (path.startsWith(asKey + '.')) {
+    // 1. If the path starts with the rootName (alias), strip it and resolve within obj
+    // e.g., getValueByPath({name: 'Kim'}, 'u.name', 'u') -> returns 'Kim'
+    if (parts[0] === rootName && parts.length > 1) {
       const subParts = parts.slice(1);
       let subResult = obj;
       for (const part of subParts) {
-        if (subResult !== null && typeof subResult === 'object' && part in subResult) {
-          subResult = subResult[part];
-        } else {
-          return undefined;
-        }
+        if (subResult === null || subResult === undefined) return undefined;
+        subResult = subResult[part];
       }
       return subResult;
     }
 
-    // 3. 상위 스코프 탐색 (Bubbling Up)
-    // 만약 현재 엘리먼트에서 못 찾았다면, 부모 엘리먼트에게 물어봅니다.
-    if (obj instanceof HTMLElement && obj.parentElement) {
-      // 부모의 바인딩 시스템에 접근하기 위해 이벤트를 쏘거나 직접 참조할 수 있음
-      // 여기서는 엔진 레벨에서 처리하기 위해 elementDefine에서 루프를 돌릴 예정입니다.
+    // 2. Fallback: resolve directly on obj (standard behavior)
+    let result = obj;
+    for (const part of parts) {
+      if (result === null || result === undefined || !(part in result)) {
+        return undefined;
+      }
+      result = result[part];
+    }
+
+    // Safety: don't return the instance itself or a DOM element as a template value
+    if (result !== obj && !(result instanceof HTMLElement)) {
+      return result;
     }
 
     return undefined;
@@ -100,9 +88,7 @@ export class SwcUtils {
         set: (t, prop, val) => {
           const oldVal = t[prop];
           if (oldVal === val) return true;
-
           t[prop] = makeRecursiveProxy(val);
-
           const isIndex = !isNaN(Number(prop)) && Array.isArray(t);
           if (isIndex && onIndexChange) {
             onIndexChange(Number(prop), val);