@dooboostore/dom-render 1.0.111 → 1.0.113

package/dist/cjs/rawsets/Render.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/rawsets/Render.ts"],
-  "sourcesContent": ["import { CreatorMetaData } from './CreatorMetaData';\nimport { Router } from '../routers/Router';\nimport { RawSet } from './RawSet';\n\nexport type Render = {\n    rawSet?: RawSet;\n    scripts?: { [n: string]: any };\n    bindScript?: string;\n    renderScript?: string;\n    element?: any;\n    getElement?: <T extends Element>()=>T;\n    attribute?: any;\n    creatorMetaData?: CreatorMetaData;\n    router?: Router;\n    range?: any;\n    value?: any;\n    innerHTML?: string;\n    currentThis?: any;\n    currentThisPath?: any;\n    nearThisPath?: string,\n    nearThis?: any;\n    parentThisPath?: string,\n    parentThis?: any,\n    rootObject?: any,\n    [n: string]: any; // component?: any; //component instance\n}\n"],
+  "sourcesContent": ["import { CreatorMetaData } from './CreatorMetaData';\nimport { Router } from '@dooboostore/core-web';\nimport { RawSet } from './RawSet';\n\nexport type Render = {\n    rawSet?: RawSet;\n    scripts?: { [n: string]: any };\n    bindScript?: string;\n    renderScript?: string;\n    element?: any;\n    getElement?: <T extends Element>()=>T;\n    attribute?: any;\n    creatorMetaData?: CreatorMetaData;\n    router?: Router;\n    range?: any;\n    value?: any;\n    innerHTML?: string;\n    currentThis?: any;\n    currentThisPath?: any;\n    nearThisPath?: string,\n    nearThis?: any;\n    parentThisPath?: string,\n    parentThis?: any,\n    rootObject?: any,\n    [n: string]: any; // component?: any; //component instance\n}\n"],
   "mappings": ";;;;;;;;;;;;;AAAA;AAAA;",
   "names": []
 }

package/dist/cjs/rawsets/index.js

@@ -2,6 +2,10 @@ var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
 var __copyProps = (to, from, except, desc) => {
   if (from && typeof from === "object" || typeof from === "function") {
     for (let key of __getOwnPropNames(from))
@@ -13,6 +17,10 @@ var __copyProps = (to, from, except, desc) => {
 var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var rawsets_exports = {};
+__export(rawsets_exports, {
+  DomRenderComponentMetaKey: () => DomRenderComponentMetaKey,
+  DomRenderProxyMetaKey: () => DomRenderProxyMetaKey
+});
 module.exports = __toCommonJS(rawsets_exports);
 __reExport(rawsets_exports, require("./AttrInitCallBack"), module.exports);
 __reExport(rawsets_exports, require("./Attrs"), module.exports);
@@ -23,4 +31,26 @@ __reExport(rawsets_exports, require("./RawSet"), module.exports);
 __reExport(rawsets_exports, require("./RawSetOperatorType"), module.exports);
 __reExport(rawsets_exports, require("./RawSetType"), module.exports);
 __reExport(rawsets_exports, require("./Render"), module.exports);
+var DomRenderComponentMetaKey = /* @__PURE__ */ ((DomRenderComponentMetaKey2) => {
+  DomRenderComponentMetaKey2["DOMRENDER_COMPONENTS_KEY"] = "__domrender_components";
+  return DomRenderComponentMetaKey2;
+})(DomRenderComponentMetaKey || {});
+var DomRenderProxyMetaKey = /* @__PURE__ */ ((DomRenderProxyMetaKey2) => {
+  DomRenderProxyMetaKey2["onBeforeReturnGet"] = "onBeforeReturnGet";
+  DomRenderProxyMetaKey2["onBeforeReturnSet"] = "onBeforeReturnSet";
+  DomRenderProxyMetaKey2["__render"] = "__render";
+  DomRenderProxyMetaKey2["_rawSets"] = "_rawSets";
+  DomRenderProxyMetaKey2["_targets"] = "_targets";
+  DomRenderProxyMetaKey2["_domRender_proxy"] = "_domRender_proxy";
+  DomRenderProxyMetaKey2["_DomRender_isProxy"] = "_DomRender_isProxy";
+  DomRenderProxyMetaKey2["_DomRender_isFinal"] = "_DomRender_isFinal";
+  DomRenderProxyMetaKey2["_DomRender_ref"] = "_DomRender_ref";
+  DomRenderProxyMetaKey2["_domRender_ref"] = "_domRender_ref";
+  DomRenderProxyMetaKey2["_DomRender_origin"] = "_DomRender_origin";
+  DomRenderProxyMetaKey2["_domRender_origin"] = "_domRender_origin";
+  DomRenderProxyMetaKey2["_DomRender_config"] = "_DomRender_config";
+  DomRenderProxyMetaKey2["_domRender_config"] = "_domRender_config";
+  DomRenderProxyMetaKey2["_DomRender_proxy"] = "_DomRender_proxy";
+  return DomRenderProxyMetaKey2;
+})(DomRenderProxyMetaKey || {});
 //# sourceMappingURL=index.js.map

package/dist/cjs/rawsets/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/rawsets/index.ts"],
-  "sourcesContent": ["export * from './AttrInitCallBack';\nexport * from './Attrs';\nexport * from './CreatorMetaData';\nexport * from './DestroyOptionType';\nexport * from './ElementInitCallBack';\nexport * from './RawSet';\nexport * from './RawSetOperatorType';\nexport * from './RawSetType';\nexport * from './Render';\n"],
-  "mappings": ";;;;;;;;;;;;;;AAAA;AAAA;AAAA,4BAAc,+BAAd;AACA,4BAAc,oBADd;AAEA,4BAAc,8BAFd;AAGA,4BAAc,gCAHd;AAIA,4BAAc,kCAJd;AAKA,4BAAc,qBALd;AAMA,4BAAc,iCANd;AAOA,4BAAc,yBAPd;AAQA,4BAAc,qBARd;",
-  "names": []
+  "sourcesContent": ["export * from './AttrInitCallBack';\nexport * from './Attrs';\nexport * from './CreatorMetaData';\nexport * from './DestroyOptionType';\nexport * from './ElementInitCallBack';\nexport * from './RawSet';\nexport * from './RawSetOperatorType';\nexport * from './RawSetType';\nexport * from './Render';\n\n\nexport const enum DomRenderComponentMetaKey {\n  DOMRENDER_COMPONENTS_KEY = '__domrender_components'\n}\n\nexport const enum DomRenderProxyMetaKey {\n  onBeforeReturnGet = 'onBeforeReturnGet',\n  onBeforeReturnSet = 'onBeforeReturnSet',\n  __render = '__render',\n  _rawSets = '_rawSets',\n  _targets = '_targets',\n  _domRender_proxy = '_domRender_proxy',\n  _DomRender_isProxy = '_DomRender_isProxy',\n  _DomRender_isFinal = '_DomRender_isFinal',\n  _DomRender_ref = '_DomRender_ref',\n  _domRender_ref = '_domRender_ref',\n  _DomRender_origin = '_DomRender_origin',\n  _domRender_origin = '_domRender_origin',\n  _DomRender_config = '_DomRender_config',\n  _domRender_config = '_domRender_config',\n  _DomRender_proxy = '_DomRender_proxy',\n}"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAAc,+BAAd;AACA,4BAAc,oBADd;AAEA,4BAAc,8BAFd;AAGA,4BAAc,gCAHd;AAIA,4BAAc,kCAJd;AAKA,4BAAc,qBALd;AAMA,4BAAc,iCANd;AAOA,4BAAc,yBAPd;AAQA,4BAAc,qBARd;AAWO,IAAW,4BAAX,kBAAWA,+BAAX;AACL,EAAAA,2BAAA,8BAA2B;AADX,SAAAA;AAAA,GAAA;AAIX,IAAW,wBAAX,kBAAWC,2BAAX;AACL,EAAAA,uBAAA,uBAAoB;AACpB,EAAAA,uBAAA,uBAAoB;AACpB,EAAAA,uBAAA,cAAW;AACX,EAAAA,uBAAA,cAAW;AACX,EAAAA,uBAAA,cAAW;AACX,EAAAA,uBAAA,sBAAmB;AACnB,EAAAA,uBAAA,wBAAqB;AACrB,EAAAA,uBAAA,wBAAqB;AACrB,EAAAA,uBAAA,oBAAiB;AACjB,EAAAA,uBAAA,oBAAiB;AACjB,EAAAA,uBAAA,uBAAoB;AACpB,EAAAA,uBAAA,uBAAoB;AACpB,EAAAA,uBAAA,uBAAoB;AACpB,EAAAA,uBAAA,uBAAoB;AACpB,EAAAA,uBAAA,sBAAmB;AAfH,SAAAA;AAAA,GAAA;",
+  "names": ["DomRenderComponentMetaKey", "DomRenderProxyMetaKey"]
 }

package/dist/esm/DomRender.js

@@ -1,12 +1,12 @@
 import { DomRenderProxy } from "./DomRenderProxy.js";
-import { PathRouter } from "./routers/PathRouter.js";
-import { HashRouter } from "./routers/HashRouter.js";
+import { PathRouter } from "@dooboostore/core-web";
+import { HashRouter } from "@dooboostore/core-web";
 import { DomRenderFinalProxy } from "./types/Types.js";
 import { RawSet } from "./rawsets/RawSet.js";
 import { DefaultMessenger } from "./messenger/DefaultMessenger.js";
 import { drComponent } from "./components/index.js";
 import { EventManager } from "./events/EventManager.js";
-import { RandomUtils } from "@dooboostore/core/random/RandomUtils";
+import { RandomUtils } from "@dooboostore/core";
 let eventManager = null;
 class DomRender {
   constructor(parameter, executeConfig) {

package/dist/esm/DomRender.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/DomRender.ts"],
-  "sourcesContent": ["import { DomRenderProxy } from './DomRenderProxy';\nimport { DomRenderConfig } from './configs/DomRenderConfig';\nimport { PathRouter } from './routers/PathRouter';\nimport { HashRouter } from './routers/HashRouter';\nimport { ConstructorType } from '@dooboostore/core/types';\nimport { DomRenderFinalProxy } from './types/Types';\nimport { RawSet } from './rawsets/RawSet';\nimport { DefaultMessenger } from './messenger/DefaultMessenger';\nimport { Router } from './routers/Router';\nimport { drComponent } from './components';\nimport { EventManager } from './events/EventManager';\nimport { RandomUtils } from '@dooboostore/core/random/RandomUtils';\n\nexport type DomRenderRunConfig<T = any> = Omit<DomRenderConfig<T>, 'router' | 'uuid' | 'eventManager' | 'messenger' | 'root' | 'rootElement'> & { routerType?: 'path' | 'hash' | ((obj: T, targetConfig: DomRenderConfig) => Router) | Router };\nexport type CreateComponentParam = { type: ConstructorType<any> | any, tagName?: string, noStrip?: boolean, template?: string, styles?: string[] | string };\nlet eventManager: EventManager | null = null;\nexport type DomRenderRunParameter<T extends object> = { rootObject: T | (() => T), target?: Element | null, config?: DomRenderRunConfig | DomRenderConfig };\n\nexport type ExecuteConfig = { firstUrl?: string };\n\nexport class DomRender<T extends object = any> {\n  private _config: DomRenderConfig;\n  private _target: Element | null | undefined;\n  private _rootObject: T;\n  private _router: Router;\n  private _eventManager: EventManager;\n\n  constructor(parameter: DomRenderRunParameter<T>, executeConfig?: ExecuteConfig) {\n    const s = DomRender.runSet(parameter,executeConfig);\n    this._config = s.config;\n    this._target = s.target;\n    this._rootObject = s.rootObject;\n    this._router = s.config.router;\n    this._eventManager = s.config.eventManager;\n    // if (executeConfig && executeConfig?.autoGo) {\n    //   this._config.router?.go(executeConfig.autoGo);\n    // }\n  }\n\n  public get rootObject(): T {\n    return this._rootObject;\n  }\n\n  public get config(): DomRenderConfig {\n    return this._config;\n  }\n  public get router(): Router {\n    return this._router;\n  }\n\n  public get eventManager(): EventManager {\n    return this._eventManager;\n  }\n  public get target(): Element | null | undefined {\n    return this._target;\n  }\n\n  public static run<T extends object>(data: DomRenderRunParameter<T>): T {\n    return DomRender.runSet(data).rootObject;\n  }\n\n  public static runSet<T extends object>({\n    rootObject,\n    target,\n    config\n  }: DomRenderRunParameter<T>, executeConfig?: ExecuteConfig): { rootObject: T; target?: Element | null; config: DomRenderConfig } {\n    // public static run<T extends object>({rootObject, target, config}: DomRenderRunParameter<T>): T {\n    //   console.log('runSet')\n    rootObject = typeof rootObject === 'function' ? rootObject() : rootObject;\n    let targetObject = rootObject;\n    if ('_DomRender_isProxy' in rootObject) {\n      if (target) {\n        ((rootObject as any)._DomRender_proxy as DomRenderProxy<T>).initRender(target);\n      }\n      targetObject = rootObject;\n      // return targetObject;\n      return { rootObject: targetObject, target, config: (rootObject as any)._domRender_config };\n    }\n    const targetConfig = Object.assign({}, config) as DomRenderConfig;\n    eventManager ??= new EventManager(targetConfig.window);\n\n    targetConfig.uuid = RandomUtils.uuid4();\n    targetConfig.messenger = DomRenderFinalProxy.final(targetConfig.messenger ?? new DefaultMessenger(targetConfig));\n    targetConfig.proxyExcludeTyps = targetConfig.proxyExcludeTyps ?? [];\n    targetConfig.targetElements ??= [];\n\n    if (typeof Window !== 'undefined' && !targetConfig.proxyExcludeTyps.some(it => it === Window)) {\n      targetConfig.proxyExcludeTyps.push(Window);\n    }\n    if (typeof Map !== 'undefined' && !targetConfig.proxyExcludeTyps.some(it => it === Map)) {\n      targetConfig.proxyExcludeTyps.push(Map);\n    }\n    if (typeof Set !== 'undefined' && !targetConfig.proxyExcludeTyps.some(it => it === Set)) {\n      targetConfig.proxyExcludeTyps.push(Set);\n    }\n    if (typeof Promise !== 'undefined' && !targetConfig.proxyExcludeTyps.some(it => it === Promise)) {\n      targetConfig.proxyExcludeTyps.push(Promise);\n    }\n    if (typeof ResizeObserver !== 'undefined' && !targetConfig.proxyExcludeTyps.some(it => it === ResizeObserver)) {\n      targetConfig.proxyExcludeTyps.push(ResizeObserver);\n    }\n    if (typeof ImageBitmap !== 'undefined' && !targetConfig.proxyExcludeTyps.some(it => it === ImageBitmap)) {\n      targetConfig.proxyExcludeTyps.push(ImageBitmap);\n    }\n    if ( typeof CanvasRenderingContext2D !== 'undefined' && !targetConfig.proxyExcludeTyps.some(it => it === CanvasRenderingContext2D) ) {\n      targetConfig.proxyExcludeTyps.push(CanvasRenderingContext2D);\n    }\n    if ( typeof CSSStyleDeclaration !== 'undefined' && !targetConfig.proxyExcludeTyps.some(it => it === CSSStyleDeclaration) ) {\n      targetConfig.proxyExcludeTyps.push(CSSStyleDeclaration);\n    }\n    if ( typeof Date !== 'undefined' && !targetConfig.proxyExcludeTyps.some(it => it === Date) ) {\n      targetConfig.proxyExcludeTyps.push(Date);\n    }\n    if ( typeof MutationObserver !== 'undefined' && !targetConfig.proxyExcludeTyps.some(it => it === IntersectionObserver) ) {\n      targetConfig.proxyExcludeTyps.push(IntersectionObserver);\n    }\n    if ( typeof IntersectionObserver !== 'undefined' && !targetConfig.proxyExcludeTyps.some(it => it === IntersectionObserver) ) {\n      targetConfig.proxyExcludeTyps.push(IntersectionObserver);\n    }\n    if (typeof HTMLElement !== 'undefined' && !targetConfig.proxyExcludeTyps.some(it => it === HTMLElement)) {\n      targetConfig.proxyExcludeTyps.push(HTMLElement);\n    }\n    // if (typeof HTMLCanvasElement !== 'undefined' && !targetConfig.proxyExcludeTyps.some(it => it === HTMLCanvasElement)) {\n    //   targetConfig.proxyExcludeTyps.push(HTMLCanvasElement);\n    // }\n    if (!targetConfig.proxyExcludeTyps.some(it => it === RawSet)) {\n      targetConfig.proxyExcludeTyps.push(RawSet);\n    }\n    if (!targetConfig.proxyExcludeTyps.some(it => it === DomRender)) {\n      targetConfig.proxyExcludeTyps.push(DomRender);\n    }\n    targetConfig.rootElement = target;\n    targetConfig.eventManager = eventManager;\n    // (targetConfig.window as any).domRender ??= {configs: []};\n    // (targetConfig.window as any).domRender.configs.push(targetConfig);\n    const domRender = new DomRenderProxy(rootObject, target, targetConfig);\n    const dest = new Proxy(rootObject, domRender);\n    targetObject = dest;\n    targetConfig.root = targetObject;\n\n    // proxy \uB41C targetObject\uB97C \uB123\uC5B4\uC918\uC57C\uB418\uC11C \uB4A4\uCABD\uC5D0\uC11C router\uB97C \uC0DD\uC131\uD574\uC57C\uD568\n    if (!targetConfig.router) {\n      let targetRouter: Router<any> | undefined;\n      if ('routerType' in config && config?.routerType === 'hash') {\n        targetRouter = new HashRouter({ rootObject: targetObject, window: targetConfig.window, firstUrl: executeConfig?.firstUrl });\n      } else if ('routerType' in config && config?.routerType === 'path') {\n        targetRouter = new PathRouter({ rootObject: targetObject, window: targetConfig.window, firstUrl: executeConfig?.firstUrl });\n      } else if ('routerType' in config && typeof config?.routerType === 'function') {\n        targetRouter = config.routerType(targetObject, targetConfig);\n      } else if ('routerType' in config && typeof config?.routerType === 'object') {\n        targetRouter = config.routerType;\n      }\n      targetConfig.router = targetRouter;\n    }\n\n    for (const value of Object.values(drComponent)) {\n      const a = value(targetConfig, DomRender);\n      if (!targetConfig.targetElements.some(it => it.name === a.name)) {\n        targetConfig.targetElements.push(a);\n      }\n    }\n    // console.log('cccccccccccccccccc', targetRouter)\n    // targetRouter.go({path: targetRouter.getUrl()})\n    // if (!config.router) {\n    //   if (config.routerType === 'path') {\n    //     config.router = new PathRouter(targetObject, config.window);\n    //   } else if (config.routerType === 'hash') {\n    //     config.router = new HashRouter(targetObject, config.window);\n    //   } else { // none\n    //     config.router = new HashRouter(targetObject, config.window);\n    //   }\n    // }\n    domRender.run(targetObject);\n    return { rootObject: targetObject, config: targetConfig, target };\n    // return targetObject;\n  }\n\n  public static createComponent(param: CreateComponentParam) {\n    // console.log('===>', typeof param.type, param.type.name, param.type.constructor.name)\n    const component = RawSet.createComponentTargetElement({\n      name: param.tagName ?? (typeof param.type === 'function' ? param.type.name : param.type.constructor.name),\n      objFactory: (e, o, r2, counstructorParam) => {\n        return typeof param.type === 'function' ? new param.type(...counstructorParam) : param.type;\n      },\n      noStrip: param.noStrip,\n      template: param.template ?? '',\n      styles: Array.isArray(param.styles) ? param.styles : param.styles ? [param.styles] : undefined\n    });\n    return component;\n  }\n\n  // ?? \uC5B8\uC81C \uC4F0\uB294\uAC70\uC9C0?? \uD6D4..\n  public static createAttribute(\n    attrName: string,\n    getThisObj: (element: Element, attrValue: string, obj: any, rawSet: RawSet) => any,\n    factory: (element: Element, attrValue: string, obj: any, rawSet: RawSet) => DocumentFragment\n  ) {\n    const targetAttribute = RawSet.createComponentTargetAttribute(attrName, getThisObj, factory);\n    return targetAttribute;\n  }\n}\n"],
+  "sourcesContent": ["import { DomRenderProxy } from './DomRenderProxy';\nimport { DomRenderConfig } from './configs/DomRenderConfig';\nimport { PathRouter } from '@dooboostore/core-web';\nimport { HashRouter } from '@dooboostore/core-web';\nimport { ConstructorType } from '@dooboostore/core';\nimport { DomRenderFinalProxy } from './types/Types';\nimport { RawSet } from './rawsets/RawSet';\nimport { DefaultMessenger } from './messenger/DefaultMessenger';\nimport { Router } from '@dooboostore/core-web';\nimport { drComponent } from './components';\nimport { EventManager } from './events/EventManager';\nimport { RandomUtils } from '@dooboostore/core';\n\nexport type DomRenderRunConfig<T = any> = Omit<DomRenderConfig<T>, 'router' | 'uuid' | 'eventManager' | 'messenger' | 'root' | 'rootElement'> & { routerType?: 'path' | 'hash' | ((obj: T, targetConfig: DomRenderConfig) => Router) | Router };\nexport type CreateComponentParam = { type: ConstructorType<any> | any, tagName?: string, noStrip?: boolean, template?: string, styles?: string[] | string };\nlet eventManager: EventManager | null = null;\nexport type DomRenderRunParameter<T extends object> = { rootObject: T | (() => T), target?: Element | null, config?: DomRenderRunConfig | DomRenderConfig };\n\nexport type ExecuteConfig = { firstUrl?: string };\n\nexport class DomRender<T extends object = any> {\n  private _config: DomRenderConfig;\n  private _target: Element | null | undefined;\n  private _rootObject: T;\n  private _router: Router;\n  private _eventManager: EventManager;\n\n  constructor(parameter: DomRenderRunParameter<T>, executeConfig?: ExecuteConfig) {\n    const s = DomRender.runSet(parameter,executeConfig);\n    this._config = s.config;\n    this._target = s.target;\n    this._rootObject = s.rootObject;\n    this._router = s.config.router;\n    this._eventManager = s.config.eventManager;\n    // if (executeConfig && executeConfig?.autoGo) {\n    //   this._config.router?.go(executeConfig.autoGo);\n    // }\n  }\n\n  public get rootObject(): T {\n    return this._rootObject;\n  }\n\n  public get config(): DomRenderConfig {\n    return this._config;\n  }\n  public get router(): Router {\n    return this._router;\n  }\n\n  public get eventManager(): EventManager {\n    return this._eventManager;\n  }\n  public get target(): Element | null | undefined {\n    return this._target;\n  }\n\n  public static run<T extends object>(data: DomRenderRunParameter<T>): T {\n    return DomRender.runSet(data).rootObject;\n  }\n\n  public static runSet<T extends object>({\n    rootObject,\n    target,\n    config\n  }: DomRenderRunParameter<T>, executeConfig?: ExecuteConfig): { rootObject: T; target?: Element | null; config: DomRenderConfig } {\n    // public static run<T extends object>({rootObject, target, config}: DomRenderRunParameter<T>): T {\n    //   console.log('runSet')\n    rootObject = typeof rootObject === 'function' ? rootObject() : rootObject;\n    let targetObject = rootObject;\n    if ('_DomRender_isProxy' in rootObject) {\n      if (target) {\n        ((rootObject as any)._DomRender_proxy as DomRenderProxy<T>).initRender(target);\n      }\n      targetObject = rootObject;\n      // return targetObject;\n      return { rootObject: targetObject, target, config: (rootObject as any)._domRender_config };\n    }\n    const targetConfig = Object.assign({}, config) as DomRenderConfig;\n    eventManager ??= new EventManager(targetConfig.window);\n\n    targetConfig.uuid = RandomUtils.uuid4();\n    targetConfig.messenger = DomRenderFinalProxy.final(targetConfig.messenger ?? new DefaultMessenger(targetConfig));\n    targetConfig.proxyExcludeTyps = targetConfig.proxyExcludeTyps ?? [];\n    targetConfig.targetElements ??= [];\n\n    if (typeof Window !== 'undefined' && !targetConfig.proxyExcludeTyps.some(it => it === Window)) {\n      targetConfig.proxyExcludeTyps.push(Window);\n    }\n    if (typeof Map !== 'undefined' && !targetConfig.proxyExcludeTyps.some(it => it === Map)) {\n      targetConfig.proxyExcludeTyps.push(Map);\n    }\n    if (typeof Set !== 'undefined' && !targetConfig.proxyExcludeTyps.some(it => it === Set)) {\n      targetConfig.proxyExcludeTyps.push(Set);\n    }\n    if (typeof Promise !== 'undefined' && !targetConfig.proxyExcludeTyps.some(it => it === Promise)) {\n      targetConfig.proxyExcludeTyps.push(Promise);\n    }\n    if (typeof ResizeObserver !== 'undefined' && !targetConfig.proxyExcludeTyps.some(it => it === ResizeObserver)) {\n      targetConfig.proxyExcludeTyps.push(ResizeObserver);\n    }\n    if (typeof ImageBitmap !== 'undefined' && !targetConfig.proxyExcludeTyps.some(it => it === ImageBitmap)) {\n      targetConfig.proxyExcludeTyps.push(ImageBitmap);\n    }\n    if ( typeof CanvasRenderingContext2D !== 'undefined' && !targetConfig.proxyExcludeTyps.some(it => it === CanvasRenderingContext2D) ) {\n      targetConfig.proxyExcludeTyps.push(CanvasRenderingContext2D);\n    }\n    if ( typeof CSSStyleDeclaration !== 'undefined' && !targetConfig.proxyExcludeTyps.some(it => it === CSSStyleDeclaration) ) {\n      targetConfig.proxyExcludeTyps.push(CSSStyleDeclaration);\n    }\n    if ( typeof Date !== 'undefined' && !targetConfig.proxyExcludeTyps.some(it => it === Date) ) {\n      targetConfig.proxyExcludeTyps.push(Date);\n    }\n    if ( typeof MutationObserver !== 'undefined' && !targetConfig.proxyExcludeTyps.some(it => it === IntersectionObserver) ) {\n      targetConfig.proxyExcludeTyps.push(IntersectionObserver);\n    }\n    if ( typeof IntersectionObserver !== 'undefined' && !targetConfig.proxyExcludeTyps.some(it => it === IntersectionObserver) ) {\n      targetConfig.proxyExcludeTyps.push(IntersectionObserver);\n    }\n    if (typeof HTMLElement !== 'undefined' && !targetConfig.proxyExcludeTyps.some(it => it === HTMLElement)) {\n      targetConfig.proxyExcludeTyps.push(HTMLElement);\n    }\n    // if (typeof HTMLCanvasElement !== 'undefined' && !targetConfig.proxyExcludeTyps.some(it => it === HTMLCanvasElement)) {\n    //   targetConfig.proxyExcludeTyps.push(HTMLCanvasElement);\n    // }\n    if (!targetConfig.proxyExcludeTyps.some(it => it === RawSet)) {\n      targetConfig.proxyExcludeTyps.push(RawSet);\n    }\n    if (!targetConfig.proxyExcludeTyps.some(it => it === DomRender)) {\n      targetConfig.proxyExcludeTyps.push(DomRender);\n    }\n    targetConfig.rootElement = target;\n    targetConfig.eventManager = eventManager;\n    // (targetConfig.window as any).domRender ??= {configs: []};\n    // (targetConfig.window as any).domRender.configs.push(targetConfig);\n    const domRender = new DomRenderProxy(rootObject, target, targetConfig);\n    const dest = new Proxy(rootObject, domRender);\n    targetObject = dest;\n    targetConfig.root = targetObject;\n\n    // proxy \uB41C targetObject\uB97C \uB123\uC5B4\uC918\uC57C\uB418\uC11C \uB4A4\uCABD\uC5D0\uC11C router\uB97C \uC0DD\uC131\uD574\uC57C\uD568\n    if (!targetConfig.router) {\n      let targetRouter: Router<any> | undefined;\n      if ('routerType' in config && config?.routerType === 'hash') {\n        targetRouter = new HashRouter({ rootObject: targetObject, window: targetConfig.window, firstUrl: executeConfig?.firstUrl });\n      } else if ('routerType' in config && config?.routerType === 'path') {\n        targetRouter = new PathRouter({ rootObject: targetObject, window: targetConfig.window, firstUrl: executeConfig?.firstUrl });\n      } else if ('routerType' in config && typeof config?.routerType === 'function') {\n        targetRouter = config.routerType(targetObject, targetConfig);\n      } else if ('routerType' in config && typeof config?.routerType === 'object') {\n        targetRouter = config.routerType;\n      }\n      targetConfig.router = targetRouter;\n    }\n\n    for (const value of Object.values(drComponent)) {\n      const a = value(targetConfig, DomRender);\n      if (!targetConfig.targetElements.some(it => it.name === a.name)) {\n        targetConfig.targetElements.push(a);\n      }\n    }\n    // console.log('cccccccccccccccccc', targetRouter)\n    // targetRouter.go({path: targetRouter.getUrl()})\n    // if (!config.router) {\n    //   if (config.routerType === 'path') {\n    //     config.router = new PathRouter(targetObject, config.window);\n    //   } else if (config.routerType === 'hash') {\n    //     config.router = new HashRouter(targetObject, config.window);\n    //   } else { // none\n    //     config.router = new HashRouter(targetObject, config.window);\n    //   }\n    // }\n    domRender.run(targetObject);\n    return { rootObject: targetObject, config: targetConfig, target };\n    // return targetObject;\n  }\n\n  public static createComponent(param: CreateComponentParam) {\n    // console.log('===>', typeof param.type, param.type.name, param.type.constructor.name)\n    const component = RawSet.createComponentTargetElement({\n      name: param.tagName ?? (typeof param.type === 'function' ? param.type.name : param.type.constructor.name),\n      objFactory: (e, o, r2, counstructorParam) => {\n        return typeof param.type === 'function' ? new param.type(...counstructorParam) : param.type;\n      },\n      noStrip: param.noStrip,\n      template: param.template ?? '',\n      styles: Array.isArray(param.styles) ? param.styles : param.styles ? [param.styles] : undefined\n    });\n    return component;\n  }\n\n  // ?? \uC5B8\uC81C \uC4F0\uB294\uAC70\uC9C0?? \uD6D4..\n  public static createAttribute(\n    attrName: string,\n    getThisObj: (element: Element, attrValue: string, obj: any, rawSet: RawSet) => any,\n    factory: (element: Element, attrValue: string, obj: any, rawSet: RawSet) => DocumentFragment\n  ) {\n    const targetAttribute = RawSet.createComponentTargetAttribute(attrName, getThisObj, factory);\n    return targetAttribute;\n  }\n}\n"],
   "mappings": "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",
   "names": []
 }

package/dist/esm/DomRenderProxy.js

@@ -1,6 +1,5 @@
 import { RawSet } from "./rawsets/RawSet.js";
 import { EventManager } from "./events/EventManager.js";
-import { ScriptUtils } from "@dooboostore/core-web/script/ScriptUtils";
 import { DomRenderFinalProxy, Shield } from "./types/Types.js";
 import { RawSetType } from "./rawsets/RawSetType.js";
 import { DrThisProperty } from "./operators/DrThisProperty.js";
@@ -11,27 +10,28 @@ import { isOnCreateRender } from "./lifecycle/OnCreateRender.js";
 import { isOnInitRender } from "./lifecycle/OnInitRender.js";
 import { isOnCreateRenderData } from "./lifecycle/OnCreateRenderData.js";
 import { isOnChangeAttrRender } from "./lifecycle/OnChangeAttrRender.js";
-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.js";
 import { isOnChildRenderedByProperty } from "./lifecycle/OnChildRenderedByProperty.js";
-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.js";
 import { isOnRawSetRendered } from "./lifecycle/OnRawSetRendered.js";
+import { isOnChildRawSetRendered } from "./lifecycle/OnChildRawSetRendered.js";
+import { DomRenderComponentMetaKey, DomRenderProxyMetaKey } from "./rawsets/index.js";
 const excludeGetSetPropertys = [
-  "onBeforeReturnGet",
-  "onBeforeReturnSet",
-  "__domrender_components",
-  "__render",
-  "_DomRender_isFinal",
-  "_domRender_ref",
-  "_rawSets",
-  "_domRender_proxy",
-  "_targets",
-  "_DomRender_origin",
-  "_DomRender_ref",
-  "_DomRender_proxy"
+  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
 ];
 const isWrapProxyDomRenderProxy = (obj) => {
   return obj && typeof obj === "object" && "_DomRender_isProxy" in obj;
@@ -55,12 +55,12 @@ const getDomRenderProxy = (obj) => {
   return void 0;
 };
 class DomRenderProxy {
+  // public name = Math.random();
   constructor(_domRender_origin, target, _domRender_config) {
     this._domRender_origin = _domRender_origin;
     this._domRender_config = _domRender_config;
     this._domRender_ref = /* @__PURE__ */ new Map();
     this._rawSets = /* @__PURE__ */ new Map();
-    // public _firstTarget: Node;
     this._targets = /* @__PURE__ */ new Set();
     if (target) {
       this._targets.add(target);
@@ -75,6 +75,15 @@ class DomRenderProxy {
   static isFinal(obj) {
     return ValidUtils.isNull(obj) || DomRenderFinalProxy.isFinal(obj);
   }
+  static isProxy(obj) {
+    return ValidUtils.isNull(obj) || isWrapProxyDomRenderProxy(obj);
+  }
+  static getOriginalObject(obj) {
+    if (isWrapProxyDomRenderProxy(obj)) {
+      return obj._domRender_origin;
+    }
+    return obj;
+  }
   async run(objProxy) {
     this._domRender_proxy = objProxy;
     if (isOnProxyDomRender(objProxy)) {
@@ -141,10 +150,9 @@ class DomRenderProxy {
     });
     const targetRawSets = await this.render(this.getRawSets());
     for (let targetRawSet of targetRawSets) {
-      const onInit = target.getAttribute?.(RawSet.DR_ON_INIT_ARGUMENTS_OPTIONNAME);
       let initParam;
       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(
@@ -173,50 +181,63 @@ class DomRenderProxy {
     }
     const removeRawSets = [];
     const rawSets = raws ?? this.getRawSets();
-    for (const it of rawSets) {
-      it.getUsingTriggerVariables(this._domRender_config).forEach((path) => {
-        this.addRawSet(path, it);
-      });
-      let renderResult;
-      if (it.isConnected) {
-        const targetAttrMap = it.point.node?.getAttribute?.(EventManager.normalAttrMapAttrName);
-        if (it.detect?.action) {
-          it.detect.action();
-        } else if (it.type === RawSetType.TARGET_ELEMENT && it.dataSet?.render?.currentThis && fullPathStr && targetAttrMap) {
-          new Map(JSON.parse(targetAttrMap)).forEach((v, k) => {
-            var _a;
-            const isUsing = v.variablePaths.some((it2) => EventManager.isUsingThisVar(it2.inner, `this.${fullPathStr}`));
-            if (isUsing) {
-              const targetAttrObject = RawSet.getAttributeObject(it.point.node, {
-                script: it.dataSet?.render?.renderScript ?? "",
-                obj: Object.assign(this._domRender_proxy ?? {}, { __render: it.dataSet?.render })
-              });
-              (_a = it.dataSet).render ?? (_a.render = {});
-              it.dataSet.render.attribute = targetAttrObject;
-              if (isOnChangeAttrRender(it.dataSet?.render?.currentThis)) {
-                it.dataSet?.render?.currentThis?.onChangeAttrRender?.(k, targetAttrObject[k], { rawSet: it });
-              }
+    const CHUNK_SIZE = 50;
+    const chunks = [];
+    let rawSetsArray = Array.from(rawSets);
+    for (const rawSet of rawSetsArray) {
+      await this.renderExecute(rawSet, fullPathStr, removeRawSets);
+    }
+    if (isOnChildRawSetRendered(this._domRender_proxy)) {
+      await this._domRender_proxy.onChildRawSetRendered();
+    }
+    if (removeRawSets.length > 0) {
+      this.removeRawSet(...removeRawSets);
+    }
+    return this.getRawSets();
+  }
+  async renderExecute(it, fullPathStr, removeRawSets) {
+    it.getUsingTriggerVariables(this._domRender_config).forEach((path) => {
+      this.addRawSet(path, it);
+    });
+    let renderResult;
+    if (it.isConnected) {
+      const targetAttrMap = it.point.node?.getAttribute?.(EventManager.normalAttrMapAttrName);
+      if (it.detect?.action) {
+        it.detect.action();
+      } else if (it.type === RawSetType.TARGET_ELEMENT && it.dataSet?.render?.currentThis && fullPathStr && targetAttrMap) {
+        const attrStart = performance.now();
+        new Map(JSON.parse(targetAttrMap)).forEach((v, k) => {
+          var _a;
+          const isUsing = v.variablePaths.some((it2) => EventManager.isUsingThisVar(it2.inner, `this.${fullPathStr}`));
+          if (isUsing) {
+            const targetAttrObject = RawSet.getAttributeObject(it.point.node, {
+              script: it.dataSet?.render?.renderScript ?? "",
+              obj: Object.assign(this._domRender_proxy ?? {}, { __render: it.dataSet?.render })
+            });
+            (_a = it.dataSet).render ?? (_a.render = {});
+            it.dataSet.render.attribute = targetAttrObject;
+            if (isOnChangeAttrRender(it.dataSet?.render?.currentThis)) {
+              it.dataSet?.render?.currentThis?.onChangeAttrRender?.(k, targetAttrObject[k], { rawSet: it });
             }
-          });
-        } else {
-          const rawSets2 = await it.render(this._domRender_proxy, this._domRender_config);
-          renderResult = rawSets2;
-          if (rawSets2 && rawSets2.raws.length > 0) {
-            await this.render(rawSets2.raws);
           }
-        }
+        });
+        const attrEnd = performance.now();
       } else {
-        removeRawSets.push(it);
-      }
-      const t = it.findNearThis(this._domRender_proxy);
-      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);
+        const renderEnd = performance.now();
+        renderResult = rawSets;
+        if (rawSets && rawSets.raws.length > 0) {
+          await this.render(rawSets.raws);
+        }
       }
+    } else {
+      removeRawSets.push(it);
     }
-    if (removeRawSets.length > 0) {
-      this.removeRawSet(...removeRawSets);
+    const t = it.findNearThis(this._domRender_proxy);
+    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로 찾는걸로 바꿈
   // public findRootDomRenderProxy(): DomRenderProxy<any> {
@@ -227,12 +248,15 @@ class DomRenderProxy {
   //   return current;
   // }
   root(pathInfos, value, lastDoneExecute = true) {
+    const rootStartTime = Date.now();
+    const pathKey = pathInfos.flat().map((i) => i.path).join(".");
     const fullPaths = [];
     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 = key._DomRender_proxy?.root(
                 concat,
@@ -246,17 +270,21 @@ class DomRenderProxy {
         }
       });
     } else {
-      const strings = pathInfos.reverse().map((it) => it.map((it2) => it2.path).join(","));
-      const fullPathStr = strings.map((it) => isNaN(Number(it)) ? "." + it : `[${it}]`).join("").slice(1);
+      const pathProcessStartTime = Date.now();
+      const shortPaths = pathInfos.reverse().map((it) => it.map((it2) => it2.path).join(","));
+      const fullPathStr = shortPaths.map((it) => isNaN(Number(it)) ? "." + it : `[${it}]`).join("").slice(1);
       if (lastDoneExecute) {
         const iterable = this._rawSets.get(fullPathStr);
-        const front = strings.slice(0, strings.length - 1).map((it) => isNaN(Number(it)) ? "." + it : `[${it}]`).join("");
-        const lastPropertyName = strings[strings.length - 1];
+        const front = shortPaths.slice(0, shortPaths.length - 1).map((it) => isNaN(Number(it)) ? "." + it : `[${it}]`).join("");
+        const lastPropertyName = shortPaths[shortPaths.length - 1];
         const path = "this" + front;
-        const data = ScriptUtils.evaluateReturn(ObjectUtils.Path.toOptionalChainPath(path), this._domRender_proxy);
+        const data = ObjectUtils.Script.evaluateReturn(ObjectUtils.Path.toOptionalChainPath(path), this._domRender_proxy);
+        const promiseStartTime = Date.now();
         new Promise(async (resolve) => {
+          const promiseInnerStartTime = Date.now();
           let rData = [];
           const firstPathStr = front.slice(1);
+          const dictionaryCheckStartTime = Date.now();
           const firstTargets = this._rawSets.get(firstPathStr);
           const firstTargetDictionary = [];
           firstTargets?.forEach((it) => {
@@ -298,6 +326,7 @@ class DomRenderProxy {
               rData = await this.render(rawSets);
             }
           }
+          const renderStartTime = Date.now();
           if (lastPropertyName === "length" && Array.isArray(data)) {
             const aIterable = this._rawSets.get(firstPathStr);
             if (aIterable) {
@@ -306,13 +335,17 @@ class DomRenderProxy {
           } else if (iterable) {
             rData = await this.render(Array.from(iterable), fullPathStr);
           }
+          const eventProcessStartTime = Date.now();
           const Node = this._domRender_config.window.Node;
           this._targets.forEach((it) => {
             if (it.nodeType === Node.DOCUMENT_FRAGMENT_NODE || it.nodeType === Node.ELEMENT_NODE) {
+              const findAttrStartTime = Date.now();
               const targets = this._domRender_config.eventManager.findAttrElements(
                 it,
                 this._domRender_config
               );
+              const targetCount = targets?.size || targets?.length || 0;
+              const changeVarStartTime = Date.now();
               this._domRender_config.eventManager.changeVar(
                 this._domRender_proxy,
                 targets,
@@ -322,7 +355,7 @@ class DomRenderProxy {
             }
           });
           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);
           }
           resolve(rData);
@@ -334,10 +367,11 @@ class DomRenderProxy {
     return fullPaths;
   }
   set(target, p, value, receiver) {
-    if (typeof p === "string" && p !== "__domrender_components" && excludeGetSetPropertys.includes(p) || Reflect.getMetadata(DomRenderNoProxyKey, target, p)) {
+    if (typeof p === "string" && p !== DomRenderComponentMetaKey.DOMRENDER_COMPONENTS_KEY && excludeGetSetPropertys.includes(p) || Reflect.getMetadata(DomRenderNoProxyKey, target, p)) {
       target[p] = value;
       return true;
     }
+    let start = performance.now();
     if (typeof p === "string") {
       value = this.proxy(receiver, value, p);
     }
@@ -355,7 +389,7 @@ class DomRenderProxy {
         const targets = new Map(
           ObjectUtils.Script.evaluateReturn(elementInfo.value)
         );
-        Array.from(targets.entries()).filter(isDefined).flatMap(([key, valueScript]) => {
+        Array.from(targets.entries()).filter(ValidUtils.isDefined).flatMap(([key, valueScript]) => {
           return fullPathInfo.flat().filter((it) => valueScript.variablePaths?.some((vit) => vit.inner.includes(`this.${it.path}`))).flatMap((it) => ({ key, valueScript, pathInfo: it }));
         }).forEach((it) => {
           const variablePaths = it.valueScript.variablePaths;
@@ -375,9 +409,8 @@ class DomRenderProxy {
             script = targetScript;
           }
           const value1 = ObjectUtils.Script.evaluateReturn(script, it.pathInfo.obj);
-          if (value1 === null) {
+          if (value1 === null || value1 === void 0) {
             elementInfo.element.removeAttribute(it.key);
-            elementInfo.element[it.key] = null;
           } else {
             elementInfo.element.setAttribute(it.key, value1);
             elementInfo.element[it.key] = value1;
@@ -387,11 +420,11 @@ class DomRenderProxy {
     );
     DocumentUtils.querySelectorAllByAttributeName(rootElement, EventManager.linkTargetMapAttrName)?.forEach(
       (elementInfo) => {
-        const targets = new Map(ScriptUtils.evaluateReturn(elementInfo.value));
-        Array.from(targets.entries()).filter(([key, value2]) => value2.trim()).filter(isDefined).flatMap(([key, valueScript]) => {
+        const targets = new Map(ObjectUtils.Script.evaluateReturn(elementInfo.value));
+        Array.from(targets.entries()).filter(([key, value2]) => value2.trim()).filter(ValidUtils.isDefined).flatMap(([key, valueScript]) => {
           return fullPathInfo.flat().filter((it) => valueScript.includes(`this.${it.path}`)).flatMap((it) => ({ key, 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) {
@@ -401,7 +434,7 @@ class DomRenderProxy {
             }
           }
         });
-        Array.from(targets.entries()).filter(([key, value2]) => value2.trim()).filter(isDefined).flatMap(([key, valueScript]) => {
+        Array.from(targets.entries()).filter(([key, value2]) => value2.trim()).filter(ValidUtils.isDefined).flatMap(([key, valueScript]) => {
           return fullPathInfo.flat().filter((it) => valueScript.includes(`this.${it.path}`)).flatMap((it) => ({ key, valueScript, pathInfo: it }));
         }).forEach((info) => {
           const linkInfo = EventManager.linkAttrs.find((it) => it.name === info.key);
@@ -411,7 +444,7 @@ class DomRenderProxy {
         });
       }
     );
-    if ("onBeforeReturnSet" in receiver && typeof p === "string" && !(this._domRender_config.proxyExcludeOnBeforeReturnSets ?? []).concat(excludeGetSetPropertys).includes(p)) {
+    if (DomRenderProxyMetaKey.onBeforeReturnSet in receiver && typeof p === "string" && !(this._domRender_config.proxyExcludeOnBeforeReturnSets ?? []).concat(excludeGetSetPropertys).includes(p)) {
       if (isOnBeforeReturnSet(receiver)) {
         receiver.onBeforeReturnSet?.(
           p,
@@ -423,20 +456,20 @@ class DomRenderProxy {
     return true;
   }
   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 {
       let it = target[p];
-      if (it && typeof it === "object" && "_DomRender_isProxy" in it && Object.prototype.toString.call(it._DomRender_origin) === "[object Date]") {
+      if (it && typeof it === "object" && DomRenderProxyMetaKey._DomRender_isProxy in it && Object.prototype.toString.call(it._DomRender_origin) === "[object Date]") {
         it = it._DomRender_origin;
       }
-      if ("onBeforeReturnGet" in receiver && typeof p === "string" && !(this._domRender_config.proxyExcludeOnBeforeReturnGets ?? []).concat(excludeGetSetPropertys).includes(p)) {
+      if (DomRenderProxyMetaKey.onBeforeReturnGet in receiver && typeof p === "string" && !(this._domRender_config.proxyExcludeOnBeforeReturnGets ?? []).concat(excludeGetSetPropertys).includes(p)) {
         receiver?.onBeforeReturnGet?.(
           p,
           it,
@@ -454,7 +487,7 @@ class DomRenderProxy {
     return true;
   }
   has(target, p) {
-    return p === "_DomRender_isProxy" || p in target;
+    return p === DomRenderProxyMetaKey._DomRender_isProxy || p in target;
   }
   proxy(parentProxy, obj, p) {
     try {
@@ -518,6 +551,27 @@ class DomRenderProxy {
     });
     this.targetGarbageRawSet();
   }
+  // 특정 경로로 시작하는 모든 child RawSet들을 제거
+  // 예: path가 'users'이면 'users[0]', 'users[0].imgUrl', 'users.length' 등 모두 제거
+  removeChildRawSetsByPath(parentPath) {
+    const pathsToRemove = [];
+    this._rawSets.forEach((rawSetSet, path) => {
+      if (path === parentPath || path.startsWith(parentPath + "[") || path.startsWith(parentPath + ".")) {
+        pathsToRemove.push(path);
+      }
+    });
+    if (pathsToRemove.length > 0) {
+      pathsToRemove.forEach((path) => {
+        const rawSetSet = this._rawSets.get(path);
+        if (rawSetSet) {
+          rawSetSet.forEach((rawSet) => {
+            rawSet.remove?.();
+          });
+          this._rawSets.delete(path);
+        }
+      });
+    }
+  }
   targetGarbageRawSet() {
     this._targets.forEach((it) => {
       if (!it.isConnected) {