@dooboostore/dom-render 1.0.112 → 1.0.113

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dooboostore/dom-render",
-  "version": "1.0.112",
+  "version": "1.0.113",
   "license": "MIT",
   "type": "module",
   "main": "./dist/cjs/index.js",
@@ -41,12 +41,8 @@
     ".": {
       "types": "./dist/types/index.d.ts",
       "import": "./dist/esm/index.js",
-      "require": "./dist/cjs/index.js"
-    },
-    "./*": {
-      "types": "./dist/types/*.d.ts",
-      "import": "./dist/esm/*.js",
-      "require": "./dist/cjs/*.js"
+      "require": "./dist/cjs/index.js",
+      "default": "./dist/esm/index.js"
     }
   },
   "author": "dooboostore <dooboostore@gmail.com> (https://github.com/dooboostore)",
@@ -90,9 +86,9 @@
     "typescript": "^5.9.2",
     "esbuild-plugin-tsc": "^0.5.0",
     "esbuild": "^0.23.0",
-    "@dooboostore/core": "1.0.28",
-    "@dooboostore/core-node": "1.0.10",
-    "@dooboostore/core-web": "1.0.9"
+    "@dooboostore/core": "1.0.30",
+    "@dooboostore/core-node": "1.0.12",
+    "@dooboostore/core-web": "1.0.10"
   },
   "scripts": {
     "clean": "rm -rf dist",

package/src/DomRender.ts

@@ -1,15 +1,15 @@
 import { DomRenderProxy } from './DomRenderProxy';
 import { DomRenderConfig } from './configs/DomRenderConfig';
-import { PathRouter } from './routers/PathRouter';
-import { HashRouter } from './routers/HashRouter';
-import { ConstructorType } from '@dooboostore/core/types';
+import { PathRouter } from '@dooboostore/core-web';
+import { HashRouter } from '@dooboostore/core-web';
+import { ConstructorType } from '@dooboostore/core';
 import { DomRenderFinalProxy } from './types/Types';
 import { RawSet } from './rawsets/RawSet';
 import { DefaultMessenger } from './messenger/DefaultMessenger';
-import { Router } from './routers/Router';
+import { Router } from '@dooboostore/core-web';
 import { drComponent } from './components';
 import { EventManager } from './events/EventManager';
-import { RandomUtils } from '@dooboostore/core/random/RandomUtils';
+import { RandomUtils } from '@dooboostore/core';
 
 export type DomRenderRunConfig<T = any> = Omit<DomRenderConfig<T>, 'router' | 'uuid' | 'eventManager' | 'messenger' | 'root' | 'rootElement'> & { routerType?: 'path' | 'hash' | ((obj: T, targetConfig: DomRenderConfig) => Router) | Router };
 export type CreateComponentParam = { type: ConstructorType<any> | any, tagName?: string, noStrip?: boolean, template?: string, styles?: string[] | string };

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,29 +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';
 import { isOnChildRawSetRendered } from "./lifecycle/OnChildRawSetRendered";
-
-const excludeGetSetPropertys = [
-  'onBeforeReturnGet',
-  'onBeforeReturnSet',
-  '__domrender_components',
-  '__render',
-  '_DomRender_isFinal',
-  '_domRender_ref',
-  '_rawSets',
-  '_domRender_proxy',
-  '_targets',
-  '_DomRender_origin',
-  '_DomRender_ref',
-  '_DomRender_proxy'
+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;
@@ -97,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)) {
@@ -193,7 +203,6 @@ 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 = ObjectUtils.Script.evaluateReturn(onCreate, this._domRender_proxy);
@@ -232,103 +241,131 @@ export class DomRenderProxy<T extends object> implements ProxyHandler<T> {
     // console.log('----', rawSets);
     // console.log('----', rawSets);
     const CHUNK_SIZE = 50;
-    const chunks = [];
-    const rawSetsArray = Array.from(rawSets as RawSet[]);
-    for (let i = 0; i < rawSetsArray.length; i += CHUNK_SIZE) {
-      chunks.push(rawSetsArray.slice(i, i + CHUNK_SIZE));
+    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));
+    //   }
+    // }
+
+    if (isOnChildRawSetRendered(this._domRender_proxy)) {
+      await this._domRender_proxy.onChildRawSetRendered();
     }
 
-    for (const chunk of chunks) {
-      const promises = chunk.map(async (it) => {
-        it.getUsingTriggerVariables(this._domRender_config).forEach(path => {
-          // console.log('getUsingTriggerVariables->', path);
-          this.addRawSet(path, it);
-        });
+    if (removeRawSets.length > 0) {
+      this.removeRawSet(...removeRawSets);
+    }
+    return this.getRawSets();
+  }
 
-        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
-          ) {
-            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);
+  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})
             });
-            const attrEnd = performance.now();
-            // if (attrEnd - attrStart > 10) {
-              // console.log('Slow Attr Update:', attrEnd - attrStart, it);
-            // }
-            // ------------------->
-          } else {
-            const renderStart = performance.now();
-            const rawSets = await it.render(this._domRender_proxy, this._domRender_config);
-            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);
+            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});
             }
           }
-        } else {
-          removeRawSets.push(it);
-        }
-
-        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 });
+          // console.log('---?', v, fullPathStr, isUsing);
+        });
+        const attrEnd = performance.now();
+        // if (attrEnd - attrStart > 10) {
+        // console.log('Slow Attr Update:', attrEnd - attrStart, it);
+        // }
+        // ------------------->
+      } else {
+        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);
-      });
-      await Promise.all(promises);
-      if (chunks.length > 1) {
-        await new Promise(resolve => requestAnimationFrame(resolve));
       }
+    } else {
+      removeRawSets.push(it);
     }
 
-    if (isOnChildRawSetRendered(this._domRender_proxy)) {
-      await this._domRender_proxy.onChildRawSetRendered();
-    }
-
-    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) {
@@ -351,7 +388,7 @@ export class DomRenderProxy<T extends object> implements ProxyHandler<T> {
     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();
@@ -378,13 +415,13 @@ export class DomRenderProxy<T extends object> implements ProxyHandler<T> {
       // 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(`🛤️ Path processing time: ${Date.now() - pathProcessStartTime}ms for path: ${fullPathStr}`);
+      // 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);
@@ -392,14 +429,20 @@ 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 = ObjectUtils.Script.evaluateReturn(ObjectUtils.Path.toOptionalChainPath(path), this._domRender_proxy);
-        // console.log('root-->', this._rawSets, path, data );
+        // 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();
@@ -543,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;
@@ -598,7 +641,7 @@ 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()
@@ -653,7 +696,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()
@@ -675,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()
@@ -696,7 +739,7 @@ export class DomRenderProxy<T extends object> implements ProxyHandler<T> {
 
     // console.log('---end',receiver);
     if (
-      'onBeforeReturnSet' in receiver &&
+      DomRenderProxyMetaKey.onBeforeReturnSet in receiver &&
       typeof p === 'string' &&
       !(this._domRender_config.proxyExcludeOnBeforeReturnSets ?? []).concat(excludeGetSetPropertys).includes(p)
     ) {
@@ -715,13 +758,13 @@ export class DomRenderProxy<T extends object> implements ProxyHandler<T> {
 
   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라던지 이런놈들은-_-프록시가 이상하게 동작해서
@@ -742,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)
       ) {
@@ -772,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) {
@@ -860,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) {
@@ -870,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() {

package/src/bundle-entry.ts

@@ -9,12 +9,10 @@ export * from './DomRenderProxy';
 export * from './configs';
 export * from './decorators';
 export * from './events';
-export * from './iterators';
+export * from '@dooboostore/core';
 export * from './lifecycle';
 export * from './messenger';
 export * from './operators';
 export * from './rawsets';
-export * from './routers';
 export * from './types';
-export * from './validators';
-export { drComponent , If, This, Appender as AppenderComponent, PromiseSwitch, Choose, CheckBox, Radio, Select, Timer, Details, Input, Route, RouterOutlet, A } from './components';
+export { drComponent, If, This, Appender as AppenderComponent, PromiseSwitch, Choose, CheckBox, Radio, Select, Timer, Details, Input, Route, RouterOutlet, A } from './components';

package/src/components/ComponentBase.ts

@@ -1,23 +1,22 @@
-import { ElementUtils } from '@dooboostore/core-web/element/ElementUtils';
+import { ElementUtils } from '@dooboostore/core-web';
 import { OnChangeAttrRender, OtherData } from '../lifecycle/OnChangeAttrRender';
 import { OnCreateRenderData, OnCreateRenderDataParams } from '../lifecycle/OnCreateRenderData';
 import { RawSet } from '../rawsets/RawSet';
-import { ConstructorType } from '@dooboostore/core/types';
+import { ConstructorType } from '@dooboostore/core';
 import { OnCreatedThisChild } from '../lifecycle/OnCreatedThisChild';
 import { DomRenderNoProxy } from '../decorators/DomRenderNoProxy';
 import { OnInitRender } from '../lifecycle/OnInitRender';
-import { ConvertUtils } from '@dooboostore/core/convert/ConvertUtils';
+import { ConvertUtils } from '@dooboostore/core';
 import { OnDestroyRender, OnDestroyRenderParams } from '../lifecycle/OnDestroyRender';
 import { OnDrThisUnBind } from '../lifecycle/dr-this/OnDrThisUnBind';
 import { OnDrThisBind } from '../lifecycle/dr-this/OnDrThisBind';
 import type { Render } from '../rawsets/Render';
-import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';
+import { ReflectUtils } from '@dooboostore/core';
 import { DomRenderConfig } from '../configs/DomRenderConfig';
-import { Subject } from '@dooboostore/core/message/Subject';
-import { debounceTime } from '@dooboostore/core/message/operators/debounceTime';
-import type { Subscription } from '@dooboostore/core/message/Subscription';
+import { Subject } from '@dooboostore/core';
+import { MessageOperator } from '@dooboostore/core';
+import type { Subscription } from '@dooboostore/core';
 import { OnRawSetRendered, OnRawSetRenderedOtherData } from "../lifecycle/OnRawSetRendered";
-import {bufferTime} from "@dooboostore/core/message/operators/bufferTime";
 import {OnChildRawSetRendered} from "../lifecycle/OnChildRawSetRendered";
 
 
@@ -173,6 +172,10 @@ export class ComponentBase<T = any, C extends ComponentBaseConfig = ComponentBas
   private onChildRawSetRenderedOtherDataSubjectSubscription?: Subscription | undefined;
 
   constructor(private _config?: C) {
+    // console.log('ComponentBase created', this);
+    // setTimeout(()=>{
+    //   console.log('ComponentBase created', this.constructor.name, this._rawSet?.uuid);
+    // }, 1000)
   }
   get componentConfig(): C | undefined {
     return this._config;
@@ -705,19 +708,34 @@ getAttributeNames(attribute = this._attribute): string[] {
   }
 
   async onInitRender(param: any, rawSet: RawSet) {
+
+    // console.log('onInitRender ComponentBase', this.constructor.name, rawSet?.uuid);
+    const window = rawSet.dataSet?.config?.window;
     this.createChildrenDebounceSubscription = this.childrenSetSubject.pipe(
-      debounceTime(this.componentConfig?.createChildrenDebounce??0)
+      MessageOperator.debounceTime(this.componentConfig?.createChildrenDebounce??1, {
+        setTimeout: window ? window.setTimeout.bind(window) : undefined,
+        clearTimeout: window ? window.clearTimeout.bind(window) : undefined,
+      })
     ).subscribe(it => {
       // console.log('call onCreatedThisChildDebounce', it);
       this.onCreatedThisChildDebounce(it);
     });
     this.onRawSetRenderedOtherDataSubjectSubscription = this.onRawSetRenderedOtherDataSubject.pipe(
-      bufferTime(this.componentConfig?.onRawSetRenderedOtherDataDebounce??0)
+      MessageOperator.bufferTime(this.componentConfig?.onRawSetRenderedOtherDataDebounce??1, {
+        skipEmpty: true,
+        setInterval: window ? window.setInterval.bind(window) : undefined,
+        clearInterval: window ? window.clearInterval.bind(window) : undefined,
+        setTimeout: window ? window.setTimeout.bind(window) : undefined,
+        clearTimeout: window ? window.clearTimeout.bind(window) : undefined,
+      })
     ).subscribe(it => {
       this.onRawSetRenderedDebounce(it);
     });
     this.onChildRawSetRenderedOtherDataSubjectSubscription = this.onChildRawSetRenderedOtherDataSubject.pipe(
-      debounceTime(this.componentConfig?.onChildRawSetRenderedOtherDataDebounce??0)
+      MessageOperator.debounceTime(this.componentConfig?.onChildRawSetRenderedOtherDataDebounce??10, {
+        setTimeout: window ? window.setTimeout.bind(window) : undefined,
+        clearTimeout: window ? window.clearTimeout.bind(window) : undefined,
+      })
     ).subscribe(it => {
       this.onChildRawSetRenderedDebounce();
     });
@@ -755,6 +773,7 @@ getAttributeNames(attribute = this._attribute): string[] {
     this.createChildrenDebounceSubscription?.unsubscribe();
     this.onRawSetRenderedOtherDataSubjectSubscription?.unsubscribe();
     this.onChildRawSetRenderedOtherDataSubjectSubscription?.unsubscribe();
+    // console.log('ComponentBase onDestroy', this.constructor.name, this.onRawSetRenderedOtherDataSubjectSubscription.closed);
   }
 
 }