@dooboostore/dom-render 1.0.111 → 1.0.113

package/src/DomRenderProxy.ts

@@ -1,7 +1,6 @@
 import { RawSet, RenderResult } from './rawsets/RawSet';
 import { EventManager, NormalAttrDataType } from './events/EventManager';
 import { DomRenderConfig } from './configs/DomRenderConfig';
-import { ScriptUtils } from '@dooboostore/core-web/script/ScriptUtils';
 import { DomRenderFinalProxy, Shield } from './types/Types';
 import { RawSetType } from './rawsets/RawSetType';
 import { DrThisProperty } from './operators/DrThisProperty';
@@ -12,28 +11,29 @@ import { isOnCreateRender } from './lifecycle/OnCreateRender';
 import { isOnInitRender } from './lifecycle/OnInitRender';
 import { isOnCreateRenderData } from './lifecycle/OnCreateRenderData';
 import { isOnChangeAttrRender } from './lifecycle/OnChangeAttrRender';
-import { DocumentUtils } from '@dooboostore/core-web/document/DocumentUtils';
-import { isDefined } from '@dooboostore/core/types';
+import { DocumentUtils } from '@dooboostore/core-web';
 import { isOnBeforeReturnSet } from './lifecycle/OnBeforeReturnSet';
 import { isOnChildRenderedByProperty } from './lifecycle/OnChildRenderedByProperty';
-import { ObjectUtils } from '@dooboostore/core/object/ObjectUtils';
-import { ValidUtils } from '@dooboostore/core/valid/ValidUtils';
+import { ObjectUtils } from '@dooboostore/core';
+import { ValidUtils } from '@dooboostore/core';
 import { isOnProxyDomRender } from './lifecycle/OnProxyDomRender';
 import { isOnRawSetRendered } from './lifecycle/OnRawSetRendered';
-
-const excludeGetSetPropertys = [
-  'onBeforeReturnGet',
-  'onBeforeReturnSet',
-  '__domrender_components',
-  '__render',
-  '_DomRender_isFinal',
-  '_domRender_ref',
-  '_rawSets',
-  '_domRender_proxy',
-  '_targets',
-  '_DomRender_origin',
-  '_DomRender_ref',
-  '_DomRender_proxy'
+import { isOnChildRawSetRendered } from "./lifecycle/OnChildRawSetRendered";
+import { DomRenderComponentMetaKey, DomRenderProxyMetaKey } from './rawsets';
+
+const excludeGetSetPropertys: string[] = [
+  DomRenderComponentMetaKey.DOMRENDER_COMPONENTS_KEY,
+  DomRenderProxyMetaKey.onBeforeReturnGet,
+  DomRenderProxyMetaKey.onBeforeReturnSet,
+  DomRenderProxyMetaKey.__render,
+  DomRenderProxyMetaKey._rawSets,
+  DomRenderProxyMetaKey._targets,
+  DomRenderProxyMetaKey._domRender_proxy,
+  DomRenderProxyMetaKey._DomRender_isFinal,
+  DomRenderProxyMetaKey._domRender_ref,
+  DomRenderProxyMetaKey._DomRender_origin,
+  DomRenderProxyMetaKey._DomRender_ref,
+  DomRenderProxyMetaKey._DomRender_proxy
 ];
 export const isWrapProxyDomRenderProxy = <T>(obj: T): boolean => {
   return obj && typeof obj === 'object' && '_DomRender_isProxy' in obj;
@@ -62,8 +62,8 @@ export class DomRenderProxy<T extends object> implements ProxyHandler<T> {
   public _domRender_ref = new Map<object, Set<string>>();
   public _rawSets = new Map<string, Set<RawSet>>();
   public _domRender_proxy?: T;
-  // public _firstTarget: Node;
   public _targets = new Set<Node>();
+  // public name = Math.random();
 
   constructor(
     public _domRender_origin: T,
@@ -96,6 +96,17 @@ export class DomRenderProxy<T extends object> implements ProxyHandler<T> {
     return ValidUtils.isNull(obj) || DomRenderFinalProxy.isFinal(obj);
   }
 
+  public static isProxy<T = any>(obj: T) {
+    return ValidUtils.isNull(obj) || isWrapProxyDomRenderProxy(obj);
+  }
+
+  public static getOriginalObject (obj: any) {
+    if (isWrapProxyDomRenderProxy(obj)) {
+      return obj._domRender_origin;
+    }
+    return obj;
+  }
+
   public async run(objProxy: T) {
     this._domRender_proxy = objProxy;
     if (isOnProxyDomRender(objProxy)) {
@@ -112,7 +123,7 @@ export class DomRenderProxy<T extends object> implements ProxyHandler<T> {
           if (isNoProxy) {
             return obj;
           }
-        } catch (e) {}
+        } catch (e) { }
         const target = obj[it];
         if (
           target !== undefined &&
@@ -192,10 +203,9 @@ export class DomRenderProxy<T extends object> implements ProxyHandler<T> {
 
     const targetRawSets = await this.render(this.getRawSets());
     for (let targetRawSet of targetRawSets) {
-      const onInit = (target as any).getAttribute?.(RawSet.DR_ON_INIT_ARGUMENTS_OPTIONNAME);
       let initParam: any;
       if (onCreate) {
-        initParam = ScriptUtils.evaluateReturn(onCreate, this._domRender_proxy);
+        initParam = ObjectUtils.Script.evaluateReturn(onCreate, this._domRender_proxy);
       }
       if (isOnInitRender(this._domRender_proxy)) {
         await this._domRender_proxy.onInitRender(
@@ -226,79 +236,136 @@ export class DomRenderProxy<T extends object> implements ProxyHandler<T> {
     }
     const removeRawSets: RawSet[] = [];
     const rawSets = raws ?? this.getRawSets();
+    // console.log('Total RawSets to render:', Array.isArray(rawSets) ? rawSets.length : 0);
 
     // console.log('----', rawSets);
-    for (const it of rawSets as RawSet[]) {
-      it.getUsingTriggerVariables(this._domRender_config).forEach(path => {
-        // console.log('getUsingTriggerVariables->', path);
-        this.addRawSet(path, it);
-      });
+    // console.log('----', rawSets);
+    const CHUNK_SIZE = 50;
+    const chunks:RawSet[][] = [];
+    let rawSetsArray = Array.from(rawSets as RawSet[]);
+    // console.log('--->1', JSON.stringify(rawSetsArray.map(it=>it.type)));
+    // rawSetsArray = rawSetsArray.sort((a, b) => {
+    //   const order = { [RawSetType.TARGET_ELEMENT]: 0, [RawSetType.TARGET_ATTR]: 1, [RawSetType.TEXT]: 2 };
+    //   return (order[a.type] ?? 999) - (order[b.type] ?? 999);
+    // });
+    // console.log('--->2', JSON.stringify(rawSetsArray.map(it=>it.type)));
+    // await Promise.all(rawSetsArray.map(rawSet => this.renderExecute(rawSet, fullPathStr, removeRawSets)));
+    for (const rawSet of rawSetsArray) {
+      await this.renderExecute(rawSet, fullPathStr, removeRawSets);
+    }
+    // 훔....아래 벌크..잘동작이 안되네..아... 위에처럼 하나씩 처리하면 되긴하는데..흠..
+    // const firstRawSet = rawSetsArray.shift();
+    // 이렇게 청크단위로 처리할때  await Promises.sleep(0); 을 넣어줘도 처음에 dr-for-of가 먼저 돌고 그러면 참고하고있는 rawSet들이 isConnect가 false되니깐 처리안되고
+    // 나중에 처리되면서 오류가 난다. 그래서 청크내에서 첫번째꺼는 바로처리하고 그다음꺼부터는 await를 넣어줘서 브라우저가 중간에 처리할 시간을 주도록 한다.
+    // 항상 먼저 등록된 path들에 의해 뒤에게 생성되는경우가 무조건이기떄문에 먼저거 한번 돌려주면 잘된다.
+    // 아니면 renderExecute  안쪽에서 매번 sleep을 줘도되는데.. 그렇게되면 부하가 너무 갈수 있어서.. 우선 첫번쨰것만 처리하도록해본다.
+    // if (firstRawSet) {
+    //   await this.renderExecute(firstRawSet, fullPathStr, removeRawSets);
+    // }
+    // for (let i = 0; i < rawSetsArray.length; i += (CHUNK_SIZE)) {
+    //   chunks.push(rawSetsArray.slice(i, i + CHUNK_SIZE));
+    // }
+    //
+    // for (const chunk of chunks) {
+    //   const promises = chunk.map(async (it, index) => {
+    //     await this.renderExecute(it, fullPathStr, removeRawSets);
+    //     // console.log('----', it);
+    //   });
+    //   // console.log('실행.!')
+    //   await Promise.all(promises);
+    //   if (chunks.length > 1) {
+    //     await new Promise(resolve => requestAnimationFrame(resolve));
+    //   }
+    // }
 
-      let renderResult: RenderResult | undefined;
-      if (it.isConnected) {
-        // 중요 render될때 targetAttribute 체크 해야함.
-        const targetAttrMap = (it.point.node as Element)?.getAttribute?.(EventManager.normalAttrMapAttrName);
-        // console.log('sssssssssSSS?',it, targetAttrMap)
-        // console.log('----2', it, fullPathStr, targetAttrMap, (it.fragment as any).render, it.isConnected, this.getRawSets());
-        if (it.detect?.action) {
-          it.detect.action();
-          // } else if (it.type === RawSetType.TARGET_ELEMENT && it.data && fullPathStr && targetAttrMap && (it.fragment as any).render) {
-        } else if (
-          it.type === RawSetType.TARGET_ELEMENT &&
-          it.dataSet?.render?.currentThis &&
-          fullPathStr &&
-          targetAttrMap
-        ) {
-          new Map<string, NormalAttrDataType>(JSON.parse(targetAttrMap)).forEach((v, k) => {
-            // it?.data.onChangeAttrRender(k, null, v);
-            // console.log('------->?',v,k);
-            const isUsing = v.variablePaths.some(it => EventManager.isUsingThisVar(it.inner, `this.${fullPathStr}`))
-            // console.log('------->?',v,k, isUsing);
-            if (isUsing) {
-              const targetAttrObject = RawSet.getAttributeObject(it.point.node as Element, {
-                script: it.dataSet?.render?.renderScript ?? '',
-                obj: Object.assign(this._domRender_proxy ?? {}, { __render: it.dataSet?.render })
-              });
-              it.dataSet.render ??= {};
-              it.dataSet.render.attribute = targetAttrObject;
-              // const render = it.dataSet?.render;
-              // console.log('render-->!!!!!', it.dataSet.render);
-              // const script = `${render.renderScript} return ${v} `;
-              // const cval = ScriptUtils.eval(script, Object.assign(this._domRender_proxy ?? {}, { __render: render }));
-              if (isOnChangeAttrRender(it.dataSet?.render?.currentThis)) {
-                it.dataSet?.render?.currentThis?.onChangeAttrRender?.(k, targetAttrObject[k], { rawSet: it });
-              }
+    if (isOnChildRawSetRendered(this._domRender_proxy)) {
+      await this._domRender_proxy.onChildRawSetRendered();
+    }
+
+    if (removeRawSets.length > 0) {
+      this.removeRawSet(...removeRawSets);
+    }
+    return this.getRawSets();
+  }
+
+  private async renderExecute(it: RawSet, fullPathStr: string, removeRawSets: RawSet[]) {
+    // console.log('실행?')
+    // await Promises.sleep(0);
+    it.getUsingTriggerVariables(this._domRender_config).forEach(path => {
+      // console.log('getUsingTriggerVariables->', path);
+      this.addRawSet(path, it);
+    });
+
+    let renderResult: RenderResult | undefined;
+    // console.log('isConnected?', it, it.isConnected);
+    if (it.isConnected) {
+      // 중요 render될때 targetAttribute 체크 해야함.
+      const targetAttrMap = (it.point.node as Element)?.getAttribute?.(EventManager.normalAttrMapAttrName);
+      // console.log('sssssssssSSS?',it, targetAttrMap)
+      // console.log('----2', it, fullPathStr, targetAttrMap, (it.fragment as any).render, it.isConnected, this.getRawSets());
+      if (it.detect?.action) {
+        it.detect.action();
+        // } else if (it.type === RawSetType.TARGET_ELEMENT && it.data && fullPathStr && targetAttrMap && (it.fragment as any).render) {
+      } else if (
+        it.type === RawSetType.TARGET_ELEMENT &&
+        it.dataSet?.render?.currentThis &&
+        fullPathStr &&
+        targetAttrMap
+      ) {
+        const attrStart = performance.now();
+        new Map<string, NormalAttrDataType>(JSON.parse(targetAttrMap)).forEach((v, k) => {
+          // it?.data.onChangeAttrRender(k, null, v);
+          // console.log('------->?',v,k);
+          const isUsing = v.variablePaths.some(it => EventManager.isUsingThisVar(it.inner, `this.${fullPathStr}`))
+          // console.log('------->?',v,k, isUsing);
+          if (isUsing) {
+            const targetAttrObject = RawSet.getAttributeObject(it.point.node as Element, {
+              script: it.dataSet?.render?.renderScript ?? '',
+              obj: Object.assign(this._domRender_proxy ?? {}, {__render: it.dataSet?.render})
+            });
+            it.dataSet.render ??= {};
+            it.dataSet.render.attribute = targetAttrObject;
+            // const render = it.dataSet?.render;
+            // console.log('render-->!!!!!', it.dataSet.render);
+            // const script = `${render.renderScript} return ${v} `;
+            // const cval = ScriptUtils.eval(script, Object.assign(this._domRender_proxy ?? {}, { __render: render }));
+            if (isOnChangeAttrRender(it.dataSet?.render?.currentThis)) {
+              it.dataSet?.render?.currentThis?.onChangeAttrRender?.(k, targetAttrObject[k], {rawSet: it});
             }
-            // console.log('---?', v, fullPathStr, isUsing);
-          });
-          // ------------------->
-        } else {
-          const rawSets = await it.render(this._domRender_proxy, this._domRender_config);
-          renderResult = rawSets;
-          // 그외 자식들 render
-          if (rawSets && rawSets.raws.length > 0) {
-            await this.render(rawSets.raws);
           }
-        }
+          // console.log('---?', v, fullPathStr, isUsing);
+        });
+        const attrEnd = performance.now();
+        // if (attrEnd - attrStart > 10) {
+        // console.log('Slow Attr Update:', attrEnd - attrStart, it);
+        // }
+        // ------------------->
       } else {
-        removeRawSets.push(it);
-      }
-
-      const t = it.findNearThis(this._domRender_proxy);
-      // TODO: 호출된곳에서 또 변수를 수정하게되면 무한루프니깐 왠만하면 사용못하게 해야한다.
-      if (isOnRawSetRendered(t)) {
-        await t.onRawSetRendered(it, { path: fullPathStr, renderResult });
+        const renderStart = performance.now();
+        const rawSets = await it.render(this._domRender_proxy, this._domRender_config);
+        // console.log('!!!!!!!!!', rawSets)
+        const renderEnd = performance.now();
+        // if (renderEnd - renderStart > 10) {
+        //   console.log('Slow RawSet Render:', renderEnd - renderStart, it);
+        // }
+        renderResult = rawSets;
+        // 그외 자식들 render
+        if (rawSets && rawSets.raws.length > 0) {
+          await this.render(rawSets.raws);
+        }
       }
-      // console.log('----', it);
+    } else {
+      removeRawSets.push(it);
     }
 
-    if (removeRawSets.length > 0) {
-      this.removeRawSet(...removeRawSets);
+    const t = it.findNearThis(this._domRender_proxy);
+    // TODO: 호출된곳에서 또 변수를 수정하게되면 무한루프니깐 왠만하면 사용못하게 해야한다.
+    if (isOnRawSetRendered(t)) {
+      await t.onRawSetRendered(it, {path: fullPathStr, value: ObjectUtils.Script.evaluateReturn(`this.${fullPathStr}`, this._domRender_proxy), root: this._domRender_proxy, renderResult});
     }
-    return this.getRawSets();
   }
 
-  // domrender_ref로 찾는걸로 바꿈
+// domrender_ref로 찾는걸로 바꿈
   // public findRootDomRenderProxy(): DomRenderProxy<any> {
   //   let current:DomRenderProxy<any>  = this;
   //   while (current.parentProxy) {
@@ -312,19 +379,26 @@ export class DomRenderProxy<T extends object> implements ProxyHandler<T> {
     value?: any,
     lastDoneExecute = true
   ): { path: string; obj: any }[][] {
-    // console.log('root--->', paths, value, this._domRender_ref, this._domRender_origin);
+    // console.time('root_total');
+    const rootStartTime = Date.now();
+    const pathKey = pathInfos.flat().map(i => i.path).join('.');
+
+    // console.group(`🌳 DomRenderProxy root: ${pathKey}`);
+    // console.log('root--->', pathInfos, value, this._domRender_ref, this._domRender_origin);
     const fullPaths: { path: string; obj: any }[][] = [];
     if (this._domRender_ref.size > 0) {
       this._domRender_ref.forEach((it, key) => {
-        if ('_DomRender_isProxy' in key) {
+        if (DomRenderProxyMetaKey._DomRender_isProxy in key) {
           it.forEach(sit => {
             try {
+              const recursiveStartTime = Date.now();
               const concat = pathInfos.concat([[{ path: sit, obj: key }]]);
               const items: { path: string; obj: any }[][] = (key as any)._DomRender_proxy?.root(
                 concat,
                 value,
                 lastDoneExecute
               );
+              // console.log(`🔄 Recursive root call for ${sit}: ${Date.now() - recursiveStartTime}ms`);
 
               fullPaths.push(items.flat());
               // fullPaths.push({path: items.map(it=>it.path).join(','), obj: this._domRender_proxy});
@@ -338,14 +412,16 @@ export class DomRenderProxy<T extends object> implements ProxyHandler<T> {
         }
       });
     } else {
+      // console.time('root_recursive');
+      const pathProcessStartTime = Date.now();
       // const firstPathStr = paths.slice(1).reverse().join('.');
-      const strings = pathInfos.reverse().map(it => it.map(it => it.path).join(','));
+      const shortPaths = pathInfos.reverse().map(it => it.map(it => it.path).join(','));
       // array같은경우도 키값으로 접근하기때문에 특정 인덱스를 찾아서 그부분만 바꿔줄수 있다.
-      const fullPathStr = strings
+      const fullPathStr = shortPaths
         .map(it => (isNaN(Number(it)) ? '.' + it : `[${it}]`))
         .join('')
         .slice(1);
-      // console.log('-------fullPathStr', fullPathStr, lastDoneExecute);
+      // console.log(`🛤️ Path processing time: ${Date.now() - pathProcessStartTime}ms for path: ${fullPathStr}`, lastDoneExecute);
       if (lastDoneExecute) {
         // const firstData = ScriptUtils.evalReturn('this.' + firstPathStr, this._domRender_proxy);
         // console.log('-------', firstPathStr, firstData);
@@ -353,21 +429,32 @@ export class DomRenderProxy<T extends object> implements ProxyHandler<T> {
         // }
         const iterable = this._rawSets.get(fullPathStr);
         // array check
-        const front = strings
-          .slice(0, strings.length - 1)
+        const front = shortPaths
+          .slice(0, shortPaths.length - 1)
           .map(it => (isNaN(Number(it)) ? '.' + it : `[${it}]`))
           .join('');
-        const lastPropertyName = strings[strings.length - 1];
+        const lastPropertyName = shortPaths[shortPaths.length - 1];
         const path = 'this' + front;
-        const data = ScriptUtils.evaluateReturn(ObjectUtils.Path.toOptionalChainPath(path), this._domRender_proxy);
-        // console.log('root-->', this._rawSets, path, data );
+        const data = ObjectUtils.Script.evaluateReturn(ObjectUtils.Path.toOptionalChainPath(path), this._domRender_proxy);
+        // console.log('root-sub-->', this._rawSets, iterable, path, data );
+        
+        // 중요: 값이 undefined/null이 되면 해당 경로로 시작하는 모든 child RawSet들을 정리
+        // 예: users가 undefined가 되면 users[0].imgUrl, users[1].office.name 등의 RawSet들도 제거
+        // if (value === undefined || value === null) {
+        //   this.removeChildRawSetsByPath(fullPathStr);
+        // }
         // console.log('--!!!!', fullPathStr, iterable, data, front, last);
         // 왜여기서 promise를 했을까를 생각해보면......훔.. 변수변경과 화면 뿌려주는걸 동기로하면 성능이 안나오고 비현실적이다.  그래서 promise
+        const promiseStartTime = Date.now();
+        // console.timeEnd('root_recursive');
+        // console.time('root_render_wait');
         new Promise<RawSet[]>(async resolve => {
+          const promiseInnerStartTime = Date.now();
           let rData: RawSet[] = [];
           const firstPathStr = front.slice(1);
 
           // check dictionary
+          const dictionaryCheckStartTime = Date.now();
           // console.log('-promise-------', firstPathStr, this)
           const firstTargets = this._rawSets.get(firstPathStr);
           const firstTargetDictionary: RawSet[] = [];
@@ -378,6 +465,8 @@ export class DomRenderProxy<T extends object> implements ProxyHandler<T> {
               firstTargetDictionary.push(it);
             }
           });
+          // console.log(`📚 Dictionary check time: ${Date.now() - dictionaryCheckStartTime}ms (${firstTargetDictionary.length} found)`);
+
           if (firstTargetDictionary.length > 0) {
             // console.log('ddddddddddd', firstTargetDictionary);
             const rawSets: RawSet[] = [];
@@ -413,6 +502,7 @@ export class DomRenderProxy<T extends object> implements ProxyHandler<T> {
             }
           }
 
+          const renderStartTime = Date.now();
           if (lastPropertyName === 'length' && Array.isArray(data)) {
             const aIterable = this._rawSets.get(firstPathStr);
             if (aIterable) {
@@ -422,6 +512,7 @@ export class DomRenderProxy<T extends object> implements ProxyHandler<T> {
             // console.log('------------',iterable, fullPaths)
             rData = await this.render(Array.from(iterable), fullPathStr);
           }
+          // console.log(`🎨 Render time: ${Date.now() - renderStartTime}ms (${rData?.length || 0} rawSets)`);
 
           // console.log('-----------', this, lastPropertyName );
           // this._targets.forEach(it => {
@@ -432,38 +523,52 @@ export class DomRenderProxy<T extends object> implements ProxyHandler<T> {
           //   }
           // });
 
+          const eventProcessStartTime = Date.now();
           const Node = ((this._domRender_config.window as any).Node)
           this._targets.forEach(it => {
             // return;
             if (it.nodeType === Node.DOCUMENT_FRAGMENT_NODE || it.nodeType === Node.ELEMENT_NODE) {
+              const findAttrStartTime = Date.now();
               const targets = this._domRender_config.eventManager.findAttrElements(
                 it as DocumentFragment | Element,
                 this._domRender_config
               );
+              const targetCount = (targets as any)?.size || (targets as any)?.length || 0;
+              // console.log(`🔍 findAttrElements time: ${Date.now() - findAttrStartTime}ms (${targetCount} elements)`, it);
+
+              const changeVarStartTime = Date.now();
               this._domRender_config.eventManager.changeVar(
                 this._domRender_proxy,
                 targets,
                 `this.${fullPathStr}`,
                 this._domRender_config
               );
+              // console.log(`🔄 changeVar time: ${Date.now() - changeVarStartTime}ms`);
             }
           });
+          // console.log(`⚡ Event processing time: ${Date.now() - eventProcessStartTime}ms (${this._targets.size} targets)`);
+
+          // console.log(`🔄 Promise inner total time: ${Date.now() - promiseInnerStartTime}ms`);
 
           //랜더대상된게있으면
           if (rData?.length > 0 && isOnChildRenderedByProperty(data)) {
-            const propertyValue = ScriptUtils.evaluateReturn(`this.${lastPropertyName}`, data);
+            const propertyValue = ObjectUtils.Script.evaluateReturn(`this.${lastPropertyName}`, data);
             data.onChildRenderedByProperty(lastPropertyName, propertyValue);
             // data
           }
           resolve(rData);
         }).then(it => {
           // console.log('DonrenderProxy root RenderDone')
+          // console.timeEnd('root_render_wait');
+          // console.timeEnd('root_total');
         });
       }
       fullPaths.push([{ path: fullPathStr, obj: this._domRender_proxy }]);
     }
 
-    // console.log('dddddd', fullPaths.flatMap(it=>it).map(it=>it.path))
+    // console.log(`🏁 Root method total time: ${Date.now() - rootStartTime}ms`);
+    // console.log('dddddd', fullPaths.flatMap(it => it).map(it => it.path))
+    // console.groupEnd();
     return fullPaths;
   }
 
@@ -481,7 +586,7 @@ export class DomRenderProxy<T extends object> implements ProxyHandler<T> {
     // console.log('set-->', p, value, target, receiver, Reflect.getMetadata(DomRenderNoProxyKey, target, p) );
 
     if (
-      (typeof p === 'string' && p !== '__domrender_components' && excludeGetSetPropertys.includes(p)) ||
+      (typeof p === 'string' && p !== DomRenderComponentMetaKey.DOMRENDER_COMPONENTS_KEY && excludeGetSetPropertys.includes(p)) ||
       Reflect.getMetadata(DomRenderNoProxyKey, target, p)
     ) {
       (target as any)[p] = value;
@@ -494,15 +599,19 @@ export class DomRenderProxy<T extends object> implements ProxyHandler<T> {
     //     return true;
     // }
     // console.log('set--?', p, target, value);
-
+    let start = performance.now()
     if (typeof p === 'string') {
       value = this.proxy(receiver, value, p);
     }
+    // console.log('set proxy time', performance.now() - start, p);
+    // start = performance.now();
+
 
     // console.log('set typeChecked',  (target as any)[p] instanceof ComponentSet, value instanceof ComponentSet);
     // if ((target as any)[p] instanceof ComponentSet) {
     //   (target as any)[p]?.obj?.onDrThisUnBind?.();
     // }
+    // console.log('---', this._domRender_ref, p, this._domRender_proxy)
     // is ComponentSet
     if (value instanceof ComponentSet && (target as any)[p] instanceof ComponentSet) {
       value.config.beforeComponentSet = (target as any)[p];
@@ -513,6 +622,10 @@ export class DomRenderProxy<T extends object> implements ProxyHandler<T> {
       fullPathInfo = this.root([[{ path: p, obj: this._domRender_proxy }]], value);
     }
 
+
+    // console.log('set proxy root time', performance.now() - start, p);
+    // start = performance.now();
+    //
     // console.log('setRooot', fullPathInfo);
 
     //normal attribute 또한 링크랑 같은 증세라서 이렇게 해줘야한다!!
@@ -528,40 +641,40 @@ export class DomRenderProxy<T extends object> implements ProxyHandler<T> {
           ObjectUtils.Script.evaluateReturn<[string, NormalAttrDataType][]>(elementInfo.value)
         );
         Array.from(targets.entries())
-          .filter(isDefined)
+          .filter(ValidUtils.isDefined<[string, NormalAttrDataType]>)
           .flatMap(([key, valueScript]) => {
             return fullPathInfo
               .flat()
-              .filter(it => valueScript.variablePaths?.some(vit=> vit.inner.includes(`this.${it.path}`)))
+              .filter(it => valueScript.variablePaths?.some(vit => vit.inner.includes(`this.${it.path}`)))
               .flatMap(it => ({ key, valueScript: valueScript, pathInfo: it }));
           })
           .forEach(it => {
             // const optionalPaths = it.valueScript.variablePaths.map(it => ObjectUtils.Path.toOptionalChainPath(it))
             const variablePaths = it.valueScript.variablePaths;
             let targetScript = it.valueScript.originalAttrValue;
-              let script: string;
-              if (it.valueScript.isStringTemplate) {
-                  variablePaths.forEach(it => {
-                      let r = ObjectUtils.Path.toOptionalChainPath(it.inner);
-                      targetScript = targetScript.replaceAll(it.origin, `\${${r}}`);
-                  })
-                  script = '`' + targetScript + '`';
-              } else {
-                  variablePaths.forEach(it => {
-                      let r = ObjectUtils.Path.toOptionalChainPath(it.inner);
-                      targetScript = targetScript.replaceAll(it.origin, `${r}`);
-                  })
-                  script = targetScript;
-              }
+            let script: string;
+            if (it.valueScript.isStringTemplate) {
+              variablePaths.forEach(it => {
+                let r = ObjectUtils.Path.toOptionalChainPath(it.inner);
+                targetScript = targetScript.replaceAll(it.origin, `\${${r}}`);
+              })
+              script = '`' + targetScript + '`';
+            } else {
+              variablePaths.forEach(it => {
+                let r = ObjectUtils.Path.toOptionalChainPath(it.inner);
+                targetScript = targetScript.replaceAll(it.origin, `${r}`);
+              })
+              script = targetScript;
+            }
             // variablePaths.forEach(it => {
             //   let r = ObjectUtils.Path.toOptionalChainPath(it.inner);
             //   targetScript = targetScript.replaceAll(it.origin,`\${${r}}`);
             // })
             const value1 = ObjectUtils.Script.evaluateReturn(script, it.pathInfo.obj);
             // console.log('proxy set!Attribut======', it.key, value1)
-            if (value1 === null) {
+            if (value1 === null || value1 === undefined) {
               elementInfo.element.removeAttribute(it.key);
-              elementInfo.element[it.key] = null;
+              // elementInfo.element[it.key] = null;
             } else {
               elementInfo.element.setAttribute(it.key, value1);
               elementInfo.element[it.key] = value1;
@@ -570,15 +683,20 @@ export class DomRenderProxy<T extends object> implements ProxyHandler<T> {
       }
     );
 
+    // console.log('set proxy normalAttrMapAttrName time', performance.now() - start, p);
+    // start = performance.now();
+
+
+
     //여기서 링크 같은거 해줘야함  *-link로 변수값이 변경되면 그걸 참고하고있는 다른것들에도 해줘야한다.
     DocumentUtils.querySelectorAllByAttributeName(rootElement, EventManager.linkTargetMapAttrName)?.forEach(
       elementInfo => {
         // @ts-ignore
-        const targets = new Map<string, string>(ScriptUtils.evaluateReturn<[string, string][]>(elementInfo.value));
+        const targets = new Map<string, string>(ObjectUtils.Script.evaluateReturn<[string, string][]>(elementInfo.value));
 
         Array.from(targets.entries())
           .filter(([key, value]) => value.trim())
-          .filter(isDefined)
+          .filter(ValidUtils.isDefined<[string, string]>)
           .flatMap(([key, valueScript]) => {
             return fullPathInfo
               .flat()
@@ -586,7 +704,7 @@ export class DomRenderProxy<T extends object> implements ProxyHandler<T> {
               .flatMap(it => ({ key, valueScript: valueScript, pathInfo: it }));
           })
           .forEach(info => {
-            const value1 = ScriptUtils.evaluateReturn(info.valueScript, info.pathInfo.obj);
+            const value1 = ObjectUtils.Script.evaluateReturn(info.valueScript, info.pathInfo.obj);
             const applyAttributeName = EventManager.linkAttrs.find(it => it.name === info.key);
             if (applyAttributeName) {
               if (value1 === null) {
@@ -600,7 +718,7 @@ export class DomRenderProxy<T extends object> implements ProxyHandler<T> {
 
         Array.from(targets.entries())
           .filter(([key, value]) => value.trim())
-          .filter(isDefined)
+          .filter(ValidUtils.isDefined<[string, string]>)
           .flatMap(([key, valueScript]) => {
             return fullPathInfo
               .flat()
@@ -616,9 +734,12 @@ export class DomRenderProxy<T extends object> implements ProxyHandler<T> {
       }
     );
 
+    // console.log('set proxy linkTargetMapAttrName time', performance.now() - start, p);
+    // start = performance.now();
+
     // console.log('---end',receiver);
     if (
-      'onBeforeReturnSet' in receiver &&
+      DomRenderProxyMetaKey.onBeforeReturnSet in receiver &&
       typeof p === 'string' &&
       !(this._domRender_config.proxyExcludeOnBeforeReturnSets ?? []).concat(excludeGetSetPropertys).includes(p)
     ) {
@@ -630,18 +751,20 @@ export class DomRenderProxy<T extends object> implements ProxyHandler<T> {
         );
       }
     }
+
+    // console.log('done!!')
     return true;
   }
 
   get(target: T, p: string | symbol, receiver: any): any {
     // console.log('get-->', target, p, receiver);
-    if (p === '_DomRender_origin' || p === '_domRender_origin') {
+    if (p === DomRenderProxyMetaKey._DomRender_origin || p === DomRenderProxyMetaKey._domRender_origin) {
       return this._domRender_origin;
-    } else if (p === '_DomRender_ref' || p === '_domRender_ref') {
+    } else if (p === DomRenderProxyMetaKey._DomRender_ref || p === DomRenderProxyMetaKey._domRender_ref) {
       return this._domRender_ref;
-    } else if (p === '_DomRender_config' || p === '_domRender_config') {
+    } else if (p === DomRenderProxyMetaKey._DomRender_config || p === DomRenderProxyMetaKey._domRender_config) {
       return this._domRender_config;
-    } else if (p === '_DomRender_proxy' || p === '_domRender_proxy') {
+    } else if (p === DomRenderProxyMetaKey._DomRender_proxy || p === DomRenderProxyMetaKey._domRender_proxy) {
       return this;
     } else {
       // Date라던지 이런놈들은-_-프록시가 이상하게 동작해서
@@ -662,14 +785,14 @@ export class DomRenderProxy<T extends object> implements ProxyHandler<T> {
       if (
         it &&
         typeof it === 'object' &&
-        '_DomRender_isProxy' in it &&
+        DomRenderProxyMetaKey._DomRender_isProxy in it &&
         Object.prototype.toString.call(it._DomRender_origin) === '[object Date]'
       ) {
         it = it._DomRender_origin;
       }
 
       if (
-        'onBeforeReturnGet' in receiver &&
+        DomRenderProxyMetaKey.onBeforeReturnGet in receiver &&
         typeof p === 'string' &&
         !(this._domRender_config.proxyExcludeOnBeforeReturnGets ?? []).concat(excludeGetSetPropertys).includes(p)
       ) {
@@ -692,7 +815,7 @@ export class DomRenderProxy<T extends object> implements ProxyHandler<T> {
   }
 
   has(target: T, p: string | symbol): boolean {
-    return p === '_DomRender_isProxy' || p in target;
+    return p === DomRenderProxyMetaKey._DomRender_isProxy || p in target;
   }
 
   proxy(parentProxy: T, obj: T | any, p: string) {
@@ -717,7 +840,7 @@ export class DomRenderProxy<T extends object> implements ProxyHandler<T> {
       ) {
         return obj;
       }
-    } catch (e) {}
+    } catch (e) { }
 
     /*
     const proxyTarget = (this._domRender_config.proxyExcludeTyps?.filter(it => obj instanceof it) ?? []).length <= 0;
@@ -780,6 +903,7 @@ export class DomRenderProxy<T extends object> implements ProxyHandler<T> {
   // }
 
   public removeRawSet(...raws: RawSet[]) {
+    // console.log('Before removeRawSet, total rawSets:', this.getRawSets().length);
     this._rawSets.forEach(it => {
       it.forEach(sit => {
         if (!sit.isConnected) {
@@ -790,6 +914,33 @@ export class DomRenderProxy<T extends object> implements ProxyHandler<T> {
       });
     });
     this.targetGarbageRawSet();
+    // console.log('After removeRawSet, total rawSets:', this.getRawSets().length);
+  }
+
+  // 특정 경로로 시작하는 모든 child RawSet들을 제거
+  // 예: path가 'users'이면 'users[0]', 'users[0].imgUrl', 'users.length' 등 모두 제거
+  public removeChildRawSetsByPath(parentPath: string) {
+    const pathsToRemove: string[] = [];
+    this._rawSets.forEach((rawSetSet, path) => {
+      // 정확히 일치하거나, 배열 인덱스 접근(users[), 또는 속성 접근(users.)으로 시작하는 경우
+      if (path === parentPath || path.startsWith(parentPath + '[') || path.startsWith(parentPath + '.')) {
+        pathsToRemove.push(path);
+      }
+    });
+    
+    if (pathsToRemove.length > 0) {
+      // console.log(`🧹 Removing child RawSets for path '${parentPath}':`, pathsToRemove);
+      pathsToRemove.forEach(path => {
+        const rawSetSet = this._rawSets.get(path);
+        if (rawSetSet) {
+          rawSetSet.forEach(rawSet => {
+            // DOM에서 제거
+            rawSet.remove?.();
+          });
+          this._rawSets.delete(path);
+        }
+      });
+    }
   }
 
   private targetGarbageRawSet() {