@dooboostore/dom-render 1.0.108 → 1.0.109

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dooboostore/dom-render",
-  "version": "1.0.108",
+  "version": "1.0.109",
   "license": "MIT",
   "type": "module",
   "main": "./dist/cjs/index.js",
@@ -68,9 +68,9 @@
   },
   "peerDependencies": {
     "reflect-metadata": "^0.2.2",
-    "@dooboostore/core-web": "1.0.6",
-    "@dooboostore/core": "1.0.21",
-    "@dooboostore/core-node": "1.0.7"
+    "@dooboostore/core": "1.0.22",
+    "@dooboostore/core-web": "1.0.7",
+    "@dooboostore/core-node": "1.0.8"
   },
   "devDependencies": {
     "@babel/core": "^7.24.0",
@@ -98,13 +98,14 @@
     "clean": "rm -rf dist",
     "build:esm": "node build.mjs esm",
     "watch:esm": "pnpm run build:esm && node build.mjs esm --watch",
-    "build:cjs": "node build.mjs cjs && cp package.cjs.json dist/cjs/package.json",
+    "build:cjs": "node build.mjs cjs",
     "watch:cjs": "pnpm run build:cjs && node build.mjs cjs --watch",
     "build": "pnpm run clean && node build.mjs all",
     "build:umd-bundle": "node build.mjs umd-bundle",
     "watch:umd-bundle": "pnpm run build:umd-bundle && node build.mjs umd-bundle --watch",
     "build:esm-bundle": "node build.mjs esm-bundle",
     "watch:esm-bundle": "pnpm run build:esm-bundle && node build.mjs esm-bundle --watch",
+    "watch": "node build.mjs all --watch",
     "publish:npm": "pnpm run build && cp package.json package.json.back && pnpm pack && TARBALL_NAME=$(ls dooboostore-dom-render-*.tgz | head -n 1) && tar -xzf \"$TARBALL_NAME\" -C . --strip-components=1 package/package.json && rm \"$TARBALL_NAME\" && (pnpm publish --no-git-checks || true) && cp package.json.back package.json && rm -rf package.json.back  ",
     "ts:clean": "find . -name '*.js' -o -name '*.map' -o -name '*.d.ts' | xargs rm -f",
     "typecheck": "pnpm exec tsc --noEmit",

package/src/DomRender.ts

@@ -11,24 +11,30 @@ import { drComponent } from './components';
 import { EventManager } from './events/EventManager';
 import { RandomUtils } from '@dooboostore/core/random/RandomUtils';
 
-export type DomRenderRunConfig<T = any> = Omit<DomRenderConfig<T>, 'router' | 'uuid' | 'eventManager' | 'messenger' | 'root' | 'rootElement'> & { routerType?: 'path' | 'hash' | ((obj: T, window: Window) => Router) | Router };
+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 };
 let eventManager: EventManager | null = null;
 export type DomRenderRunParameter<T extends object> = { rootObject: T | (() => T), target?: Element | null, config?: DomRenderRunConfig | DomRenderConfig };
 
+export type ExecuteConfig = { firstUrl?: string };
+
 export class DomRender<T extends object = any> {
   private _config: DomRenderConfig;
   private _target: Element | null | undefined;
   private _rootObject: T;
+  private _router: Router;
+  private _eventManager: EventManager;
 
-  constructor(parameter: DomRenderRunParameter<T>, executeConfig?: { autoGo?: string }) {
-    const s = DomRender.runSet(parameter);
+  constructor(parameter: DomRenderRunParameter<T>, executeConfig?: ExecuteConfig) {
+    const s = DomRender.runSet(parameter,executeConfig);
     this._config = s.config;
     this._target = s.target;
     this._rootObject = s.rootObject;
-    if (executeConfig && executeConfig?.autoGo) {
-      this._config.router?.go(executeConfig.autoGo);
-    }
+    this._router = s.config.router;
+    this._eventManager = s.config.eventManager;
+    // if (executeConfig && executeConfig?.autoGo) {
+    //   this._config.router?.go(executeConfig.autoGo);
+    // }
   }
 
   public get rootObject(): T {
@@ -38,8 +44,14 @@ export class DomRender<T extends object = any> {
   public get config(): DomRenderConfig {
     return this._config;
   }
+  public get router(): Router {
+    return this._router;
+  }
 
-  public get target(): Element | null |undefined {
+  public get eventManager(): EventManager {
+    return this._eventManager;
+  }
+  public get target(): Element | null | undefined {
     return this._target;
   }
 
@@ -47,7 +59,11 @@ export class DomRender<T extends object = any> {
     return DomRender.runSet(data).rootObject;
   }
 
-  public static runSet<T extends object>({rootObject, target, config}: DomRenderRunParameter<T>): { rootObject: T, target?: Element | null, config: DomRenderConfig } {
+  public static runSet<T extends object>({
+    rootObject,
+    target,
+    config
+  }: DomRenderRunParameter<T>, executeConfig?: ExecuteConfig): { rootObject: T; target?: Element | null; config: DomRenderConfig } {
     // public static run<T extends object>({rootObject, target, config}: DomRenderRunParameter<T>): T {
     //   console.log('runSet')
     rootObject = typeof rootObject === 'function' ? rootObject() : rootObject;
@@ -58,7 +74,7 @@ export class DomRender<T extends object = any> {
       }
       targetObject = rootObject;
       // return targetObject;
-      return {rootObject: targetObject, target, config: (rootObject as any)._domRender_config};
+      return { rootObject: targetObject, target, config: (rootObject as any)._domRender_config };
     }
     const targetConfig = Object.assign({}, config) as DomRenderConfig;
     eventManager ??= new EventManager(targetConfig.window);
@@ -68,7 +84,6 @@ export class DomRender<T extends object = any> {
     targetConfig.proxyExcludeTyps = targetConfig.proxyExcludeTyps ?? [];
     targetConfig.targetElements ??= [];
 
-
     if (typeof Window !== 'undefined' && !targetConfig.proxyExcludeTyps.some(it => it === Window)) {
       targetConfig.proxyExcludeTyps.push(Window);
     }
@@ -87,12 +102,27 @@ export class DomRender<T extends object = any> {
     if (typeof ImageBitmap !== 'undefined' && !targetConfig.proxyExcludeTyps.some(it => it === ImageBitmap)) {
       targetConfig.proxyExcludeTyps.push(ImageBitmap);
     }
-    if (typeof CanvasRenderingContext2D !== 'undefined' && !targetConfig.proxyExcludeTyps.some(it => it === CanvasRenderingContext2D)) {
+    if ( typeof CanvasRenderingContext2D !== 'undefined' && !targetConfig.proxyExcludeTyps.some(it => it === CanvasRenderingContext2D) ) {
       targetConfig.proxyExcludeTyps.push(CanvasRenderingContext2D);
     }
-    if (typeof HTMLCanvasElement !== 'undefined' && !targetConfig.proxyExcludeTyps.some(it => it === HTMLCanvasElement)) {
-      targetConfig.proxyExcludeTyps.push(HTMLCanvasElement);
+    if ( typeof CSSStyleDeclaration !== 'undefined' && !targetConfig.proxyExcludeTyps.some(it => it === CSSStyleDeclaration) ) {
+      targetConfig.proxyExcludeTyps.push(CSSStyleDeclaration);
     }
+    if ( typeof Date !== 'undefined' && !targetConfig.proxyExcludeTyps.some(it => it === Date) ) {
+      targetConfig.proxyExcludeTyps.push(Date);
+    }
+    if ( typeof MutationObserver !== 'undefined' && !targetConfig.proxyExcludeTyps.some(it => it === IntersectionObserver) ) {
+      targetConfig.proxyExcludeTyps.push(IntersectionObserver);
+    }
+    if ( typeof IntersectionObserver !== 'undefined' && !targetConfig.proxyExcludeTyps.some(it => it === IntersectionObserver) ) {
+      targetConfig.proxyExcludeTyps.push(IntersectionObserver);
+    }
+    if (typeof HTMLElement !== 'undefined' && !targetConfig.proxyExcludeTyps.some(it => it === HTMLElement)) {
+      targetConfig.proxyExcludeTyps.push(HTMLElement);
+    }
+    // if (typeof HTMLCanvasElement !== 'undefined' && !targetConfig.proxyExcludeTyps.some(it => it === HTMLCanvasElement)) {
+    //   targetConfig.proxyExcludeTyps.push(HTMLCanvasElement);
+    // }
     if (!targetConfig.proxyExcludeTyps.some(it => it === RawSet)) {
       targetConfig.proxyExcludeTyps.push(RawSet);
     }
@@ -112,11 +142,11 @@ export class DomRender<T extends object = any> {
     if (!targetConfig.router) {
       let targetRouter: Router<any> | undefined;
       if ('routerType' in config && config?.routerType === 'hash') {
-        targetRouter = new HashRouter({rootObject: targetObject, window: targetConfig.window});
+        targetRouter = new HashRouter({ rootObject: targetObject, window: targetConfig.window, firstUrl: executeConfig?.firstUrl });
       } else if ('routerType' in config && config?.routerType === 'path') {
-        targetRouter = new PathRouter({rootObject: targetObject, window: targetConfig.window});
+        targetRouter = new PathRouter({ rootObject: targetObject, window: targetConfig.window, firstUrl: executeConfig?.firstUrl });
       } else if ('routerType' in config && typeof config?.routerType === 'function') {
-        targetRouter = config.routerType(targetObject, targetConfig.window);
+        targetRouter = config.routerType(targetObject, targetConfig);
       } else if ('routerType' in config && typeof config?.routerType === 'object') {
         targetRouter = config.routerType;
       }
@@ -141,33 +171,31 @@ export class DomRender<T extends object = any> {
     //   }
     // }
     domRender.run(targetObject);
-    return {rootObject: targetObject, config: targetConfig, target};
+    return { rootObject: targetObject, config: targetConfig, target };
     // return targetObject;
   }
 
   public static createComponent(param: CreateComponentParam) {
     // console.log('===>', typeof param.type, param.type.name, param.type.constructor.name)
-    const component = RawSet.createComponentTargetElement(
-      {
-        name: param.tagName ?? (typeof param.type === 'function' ? param.type.name : param.type.constructor.name),
-        objFactory: (e, o, r2, counstructorParam) => {
-          return typeof param.type === 'function' ? new param.type(...counstructorParam) : param.type;
-        },
-        noStrip: param.noStrip,
-        template: param.template ?? '',
-        styles: Array.isArray(param.styles) ? param.styles : (param.styles ? [param.styles] : undefined)
-      }
-    );
+    const component = RawSet.createComponentTargetElement({
+      name: param.tagName ?? (typeof param.type === 'function' ? param.type.name : param.type.constructor.name),
+      objFactory: (e, o, r2, counstructorParam) => {
+        return typeof param.type === 'function' ? new param.type(...counstructorParam) : param.type;
+      },
+      noStrip: param.noStrip,
+      template: param.template ?? '',
+      styles: Array.isArray(param.styles) ? param.styles : param.styles ? [param.styles] : undefined
+    });
     return component;
   }
 
   // ?? 언제 쓰는거지?? 훔..
-  public static createAttribute(attrName: string, getThisObj: (element: Element, attrValue: string, obj: any, rawSet: RawSet) => any, factory: (element: Element, attrValue: string, obj: any, rawSet: RawSet) => DocumentFragment) {
-    const targetAttribute = RawSet.createComponentTargetAttribute(
-      attrName,
-      getThisObj,
-      factory
-    );
+  public static createAttribute(
+    attrName: string,
+    getThisObj: (element: Element, attrValue: string, obj: any, rawSet: RawSet) => any,
+    factory: (element: Element, attrValue: string, obj: any, rawSet: RawSet) => DocumentFragment
+  ) {
+    const targetAttribute = RawSet.createComponentTargetAttribute(attrName, getThisObj, factory);
     return targetAttribute;
   }
 }

package/src/DomRenderProxy.ts

@@ -1,4 +1,4 @@
-import { RawSet } from './rawsets/RawSet';
+import { RawSet, RenderResult } from './rawsets/RawSet';
 import { EventManager } from './events/EventManager';
 import { DomRenderConfig } from './configs/DomRenderConfig';
 import { ScriptUtils } from '@dooboostore/core-web/script/ScriptUtils';
@@ -19,6 +19,7 @@ import { isOnChildRenderedByProperty } from './lifecycle/OnChildRenderedByProper
 import { ObjectUtils } from '@dooboostore/core/object/ObjectUtils';
 import {ValidUtils} from '@dooboostore/core/valid/ValidUtils'
 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'];
 export const isWrapProxyDomRenderProxy = <T>(obj: T): boolean => {
@@ -75,7 +76,7 @@ export class DomRenderProxy<T extends object> implements ProxyHandler<T> {
   }
 
   public static isFinal<T = any>(obj: T) {
-    return DomRenderFinalProxy.isFinal(obj);
+    return ValidUtils.isNull(obj) || DomRenderFinalProxy.isFinal(obj);
   }
 
   public run(objProxy: T) {
@@ -209,6 +210,8 @@ export class DomRenderProxy<T extends object> implements ProxyHandler<T> {
         // console.log('getUsingTriggerVariables->', path);
         this.addRawSet(path, it);
       });
+
+      let renderResult: RenderResult | undefined;
       if (it.isConnected) {
         // 중요 render될때 targetAttribute 체크 해야함.
         const targetAttrMap = (it.point.node as Element)?.getAttribute?.(EventManager.normalAttrMapAttrName);
@@ -238,14 +241,22 @@ export class DomRenderProxy<T extends object> implements ProxyHandler<T> {
           // ------------------->
         } else {
           const rawSets = await it.render(this._domRender_proxy, this._domRender_config);
+          renderResult = rawSets;
           // 그외 자식들 render
-          if (rawSets && rawSets.length > 0) {
-            await this.render(rawSets);
+          if (rawSets && rawSets.raws.length > 0) {
+            await this.render(rawSets.raws);
           }
         }
       } else {
         removeRawSets.push(it);
       }
+
+      const t = it.findNearThis(this._domRender_proxy)
+      // TODO: 호출된곳에서 또 변수를 수정하게되면 무한루프니깐 왠만하면 사용못하게 해야한다.
+      if(isOnRawSetRendered(t)){
+        await t.onRawSetRendered(it, {path: fullPathStr, renderResult});
+      }
+      // console.log('----', it);
     }
 
     if (removeRawSets.length > 0) {
@@ -316,7 +327,7 @@ export class DomRenderProxy<T extends object> implements ProxyHandler<T> {
           const firstTargetDictionary: RawSet[] = [];
           firstTargets?.forEach(it => {
             // console.log('----forEach---', it);
-            const type = (it.point.start as Element).getAttribute?.('type');
+            const type = (it.point.start as Element)?.getAttribute?.('type');
             if (type === RawSetOperatorType.DR_THIS_PROPERTY) {
               firstTargetDictionary.push(it);
             }
@@ -397,6 +408,7 @@ export class DomRenderProxy<T extends object> implements ProxyHandler<T> {
 
   public set(target: T, p: string | symbol, value: any, receiver: T): boolean {
     // console.log('set------->', target, p, value, receiver, Date.now())
+    // console.log('set------->', p,value)
     // console.log('set------->', target, p, value, receiver, Date.now())
     // try {
     //   const isNoProxy = Reflect.getMetadata(DomRenderNoProxyKey, target, p) || Reflect.getMetadata(DomRenderNoProxyKey, Object.getPrototypeOf(obj).constructor);
@@ -497,6 +509,8 @@ export class DomRenderProxy<T extends object> implements ProxyHandler<T> {
         }
       })
     })
+
+    // console.log('---end',receiver);
     if (('onBeforeReturnSet' in receiver) && typeof p === 'string' && !(this._domRender_config.proxyExcludeOnBeforeReturnSets ?? []).concat(excludeGetSetPropertys).includes(p)) {
       if(isOnBeforeReturnSet(receiver)){
         receiver.onBeforeReturnSet?.(p, value, fullPathInfo.map(it => it.map(it=>it.path).join()));
@@ -555,8 +569,6 @@ export class DomRenderProxy<T extends object> implements ProxyHandler<T> {
   }
 
   proxy(parentProxy: T, obj: T | any, p: string) {
-
-
     try {
       // const isNoProxy = Reflect.getMetadata(DomRenderNoProxyKey, obj, p) || Reflect.getMetadata(DomRenderNoProxyKey, Object.getPrototypeOf(obj).constructor);
       const isObject = typeof obj === 'object';
@@ -565,7 +577,7 @@ export class DomRenderProxy<T extends object> implements ProxyHandler<T> {
       const isFinal = isObject && DomRenderProxy.isFinal(obj);
       const isFrozen = Object.isFrozen(obj);
       const isShield = obj instanceof Shield;
-      if (isNoProxy || isExclude || ValidUtils.isNullOrUndefined(obj) || !isObject || isFinal || isFrozen || isShield) {
+      if (obj === undefined || obj === null || isNoProxy || isExclude || ValidUtils.isNullOrUndefined(obj) || !isObject || isFinal || isFrozen || isShield) {
         return obj;
       }
     } catch (e) {

package/src/bundle-entry.ts

@@ -1,3 +1,6 @@
+import 'reflect-metadata';
+export * as Core from '@dooboostore/core/bundle-entry';
+export * as CoreWeb from '@dooboostore/core-web/bundle-entry';
 // export { DomRender, type DomRenderRunConfig, type CreateComponentParam } from './DomRender';
 // export { DomRenderProxy, getDomRenderConfig, getDomRenderOriginObject, getDomRenderProxy, isWrapProxyDomRenderProxy } from './DomRenderProxy';
 
@@ -9,10 +12,9 @@ export * from './events';
 export * from './iterators';
 export * from './lifecycle';
 export * from './messenger';
-// export * from './operators';
-export { Appender as AppenderArray, Dr, DrAppender, DrFor, DrForOf, DrForm, DrIf, DrInnerHTML, DrInnerText, DrPre, DrRepeat, DrStripElement, DrTargetAttr, DrTargetElement, DrTargetElementIsElement, DrThis, DrThisProperty, OperatorExecuter, OperatorExecuterAttrRequire } from './operators';
+export * from './operators';
 export * from './rawsets';
 export * from './routers';
 export * from './types';
 export * from './validators';
-export * 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

@@ -16,6 +16,7 @@ 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 { OnRawSetRendered, OnRawSetRenderedOtherData } from "../lifecycle/OnRawSetRendered";
 
 
 export const ATTRIBUTE_METADATA_KEY = Symbol('attribute');
@@ -36,6 +37,7 @@ export interface QueryMetadata {
     convert?: (e: Element) => any;
     onDestroy?: (componentInstance: any, element: Element) => void;
     refreshTime?: number; // milliseconds
+    refreshRawSetRendered?: boolean;
 }
 
 export interface EventMetadata {
@@ -44,6 +46,7 @@ export interface EventMetadata {
     methodName: string | symbol;
     onDestroy?: (componentInstance: any, element: Element) => void;
     refreshTime?: number; // milliseconds
+    refreshRawSetRendered?: boolean;
 }
 
 export function attribute(nameOrOptions?: string | { name?: string, converter?: (value: any | string | null) => any }): (target: object, propertyKey: string | symbol, descriptor?: PropertyDescriptor) => void {
@@ -74,7 +77,7 @@ export function attribute(nameOrOptions?: string | { name?: string, converter?:
     };
 }
 
-export function query(selectorOrOptions: string | { selector: string, convert?: (e: Element) => any, onDestroy?: (componentInstance: any, element: Element) => void, refreshIntervalTime?: number }): (target: object, propertyKey: string | symbol, descriptor?: PropertyDescriptor) => void {
+export function query(selectorOrOptions: string | { selector: string, convert?: (e: Element) => any, onDestroy?: (componentInstance: any, element: Element) => void, refreshIntervalTime?: number, refreshRawSetRendered?: boolean }): (target: object, propertyKey: string | symbol, descriptor?: PropertyDescriptor) => void {
     return (target: object, propertyKey: string | symbol, descriptor?: PropertyDescriptor) => {
         const queries = ReflectUtils.getMetadata<QueryMetadata[]>(QUERY_METADATA_KEY, target.constructor) || [];
         
@@ -82,7 +85,8 @@ export function query(selectorOrOptions: string | { selector: string, convert?:
         let convert: ((e: Element) => any) | undefined;
         let onDestroy: ((componentInstance: any, element: Element) => void) | undefined;
         let refreshTime: number | undefined;
-        
+        let refreshRawSetRendered: boolean | undefined;
+
         if (typeof selectorOrOptions === 'string') {
             selector = selectorOrOptions;
         } else {
@@ -90,6 +94,7 @@ export function query(selectorOrOptions: string | { selector: string, convert?:
             convert = selectorOrOptions.convert;
             onDestroy = selectorOrOptions.onDestroy;
             refreshTime = selectorOrOptions.refreshIntervalTime;
+            refreshRawSetRendered = selectorOrOptions.refreshRawSetRendered;
         }
         
         const queryMetadata: QueryMetadata = {
@@ -98,7 +103,8 @@ export function query(selectorOrOptions: string | { selector: string, convert?:
             isMethod: !!descriptor,
             convert: convert,
             onDestroy: onDestroy,
-            refreshTime: refreshTime
+            refreshTime: refreshTime,
+            refreshRawSetRendered
         };
         
         queries.push(queryMetadata);
@@ -106,7 +112,7 @@ export function query(selectorOrOptions: string | { selector: string, convert?:
     };
 }
 
-export function event(options: { query: string, name: string, onDestroy?: (componentInstance: any, element: Element) => void, refreshTime?: number }): MethodDecorator {
+export function event(options: { query: string, name: string, onDestroy?: (componentInstance: any, element: Element) => void, refreshTime?: number, refreshRawSetRendered?: boolean }): MethodDecorator {
     return (target: object, propertyKey: string | symbol, descriptor: PropertyDescriptor) => {
         const events = ReflectUtils.getMetadata<EventMetadata[]>(EVENT_METADATA_KEY, target.constructor) || [];
         
@@ -115,7 +121,8 @@ export function event(options: { query: string, name: string, onDestroy?: (compo
             eventName: options.name,
             methodName: propertyKey,
             onDestroy: options.onDestroy,
-            refreshTime: options.refreshTime
+            refreshTime: options.refreshTime,
+            refreshRawSetRendered: options.refreshRawSetRendered
         };
         
         events.push(eventMetadata);
@@ -128,7 +135,7 @@ export type ComponentBaseConfig = { onlyParentType?: ConstructorType<any>[] | Co
 
 export type ChildrenSet = { instance: any, data: OnCreateRenderDataParams };
 
-export class ComponentBase<T = any, C extends ComponentBaseConfig = ComponentBaseConfig> implements OnChangeAttrRender, OnCreateRenderData, OnCreatedThisChild, OnDrThisBind, OnDrThisUnBind, OnInitRender, OnDestroyRender {
+export class ComponentBase<T = any, C extends ComponentBaseConfig = ComponentBaseConfig> implements OnChangeAttrRender, OnCreateRenderData, OnCreatedThisChild, OnDrThisBind, OnDrThisUnBind, OnInitRender, OnDestroyRender, OnRawSetRendered {
   @DomRenderNoProxy
   private _rawSet?: RawSet;
   @DomRenderNoProxy
@@ -366,6 +373,21 @@ export class ComponentBase<T = any, C extends ComponentBaseConfig = ComponentBas
     this._refreshTimers.clear();
   }
 
+  async onRawSetRendered(rawSet: RawSet, otherData: OnRawSetRenderedOtherData): Promise<void> {
+    const queries = ReflectUtils.getMetadata<QueryMetadata[]>(QUERY_METADATA_KEY, this.constructor);
+    if (queries) {
+      queries.filter(it => it.refreshRawSetRendered).forEach(queryInfo => {
+        this._updateQueryBinding(queryInfo, rawSet, true);
+      });
+    }
+
+    const events = ReflectUtils.getMetadata<EventMetadata[]>(EVENT_METADATA_KEY, this.constructor);
+    if (events) {
+      events.filter(it => it.refreshRawSetRendered).forEach(eventInfo => {
+        this._updateEventBinding(eventInfo, rawSet, true);
+      });
+    }
+  }
   /**
    * Manually refresh all query and event decorators
    * Useful when DOM elements are dynamically added/removed and you want to update bindings
@@ -587,7 +609,7 @@ export class ComponentBase<T = any, C extends ComponentBaseConfig = ComponentBas
 
   // TODO: rawSet isConnected로 체크해서 들어가있는것만 처리되도록 또는 이미들어가있는것도 뺴야될것같은데.. 적용하긴했음..지켜봐야될듯.
   onCreatedThisChild(child: any, data: OnCreateRenderDataParams) {
-    // console.log('------------------------',child, data, data.render?.rawSet?.isConnected)
+    // console.log('onCreatedThisChild------------------------',child, data, data.render?.rawSet?.isConnected)
     const n = [...this._children];
     n.push({instance:child, data});
     this._children = n.filter(it=>it.data.render?.rawSet?.isConnected)

package/src/components/ComponentRouterBase.ts

@@ -1,8 +1,19 @@
 import { ChildrenSet, ComponentBase, ComponentBaseConfig } from './ComponentBase';
 import { ComponentSet } from './ComponentSet';
 import { isOnDrThisUnBind } from '../lifecycle/dr-this/OnDrThisUnBind';
+import {RouterOutlet} from '../components/router/RouterOutlet';
 
+export interface OnCreatedOutlet {
+  onCreatedOutlet(child: any): void;
+}
+export const isOnCreatedOutlet = (obj: any): obj is OnCreatedOutlet =>
+  typeof obj?.onCreatedOutlet === 'function';
 
+export interface OnCreatedOutletDebounce {
+  onCreatedOutletDebounce(child: any): void;
+}
+export const isOnCreatedOutletDebounce = (obj: any): obj is OnCreatedOutletDebounce =>
+  typeof obj?.onCreatedOutletDebounce === 'function';
 export type ComponentRouterBaseConfig = ComponentBaseConfig & { sameRouteNoApply?: boolean };
 
 export abstract class ComponentRouterBase<T = any>
@@ -19,17 +30,21 @@ export abstract class ComponentRouterBase<T = any>
   //   return this._child;
   // }
 
+
   setChild(child: ComponentSet) {
-    // console.log('setChild!!', child, (this as any).name)
+    console.log('setChild!!', child, (this as any).name)
     if (child) {
       this.child = child;
     } else {
       this.child = undefined;
     }
+    const routerOutletChildren = this.getChildren(RouterOutlet.RouterOutlet);
+    routerOutletChildren.forEach(it => {
+      it.setValue(this.child)
+    })
   }
 
   onDrThisUnBind(): void {
-    // console.log('--ComponentRouterBase--onDrThisUnBind-')
     super.onDrThisUnBind();
     if (this.child && isOnDrThisUnBind(this.child?.obj)) {
       this.child.obj.onDrThisUnBind();

package/src/components/choose/Choose.ts

@@ -58,7 +58,9 @@ export namespace Choose {
       child.data = this.getAttribute('data') as any;
       // when.hidden = true;
 
+      console.log('eeeeeee?', child, child.getAttribute('test'), this.getAttribute('data'));
       if (!this.choose && child instanceof When && child.getAttribute('test')?.(this.getAttribute('data'))) {
+      console.log('eeeeeee?2');
         // console.log('------------', child.attribute?.test?.(this.attribute?.data))
         this.choose = child;
         if (child.hidden) {
@@ -69,12 +71,14 @@ export namespace Choose {
         child.hidden = true;
       }
 
+      console.log('eeeeeee?3');
       if (!this.choose && child instanceof OtherWise) {
         this.choose = child;
         if (child.hidden) {
           child.hidden = false;
         }
       }
+      console.log('eeeeeee?34');
     }
   }
 }

package/src/components/router/RouterOutlet.ts

@@ -1,11 +1,12 @@
-import { ComponentBase } from '../ComponentBase';
+import { ChildrenSet, ComponentBase } from '../ComponentBase';
 import { DomRender, DomRenderRunConfig } from '../../DomRender';
 import { RawSet } from '../../rawsets/RawSet';
 import { OtherData } from '../../lifecycle/OnChangeAttrRender';
 import { OnInitRender } from '../../lifecycle/OnInitRender';
 import { ComponentSet } from '../../components/ComponentSet';
 import { OnDestroyRenderParams } from '../../lifecycle/OnDestroyRender';
-import { ComponentRouterBase } from '../../components/ComponentRouterBase';
+import { ComponentRouterBase, isOnCreatedOutletDebounce } from '../../components/ComponentRouterBase';
+import { OnCreateRenderDataParams } from 'src/lifecycle';
 export namespace RouterOutlet {
   export const selector = 'dr-router-outlet';
   export type Attribute = {
@@ -13,6 +14,7 @@ export namespace RouterOutlet {
     if: boolean | null;
     createArguments: any[];
     onCreated?: (value: any) => void;
+    onCreatedDebounce?: (value: any) => void;
     onDestroyRender?: () => void;
   };
 
@@ -23,13 +25,17 @@ export namespace RouterOutlet {
 
     setValue(value: ComponentSet) {
       this.value = value;
+      // console.log('sssssssssss');
     }
 
     onInitRender(param: any, rawSet: RawSet) {
       super.onInitRender(param, rawSet);
       const c = this.getParentThis();
-      if (c instanceof ComponentRouterBase){
-        this.value = c.child
+      const userValue = this.getAttribute('value');
+      if (userValue) {
+        this.value = userValue;
+      } else if (c instanceof ComponentRouterBase) {
+        this.value = c.child;
       }
       // console.log('------',c);
     }
@@ -51,6 +57,20 @@ export namespace RouterOutlet {
       }
     }
 
+    onCreatedThisChild(child:any, data:OnCreateRenderDataParams){
+      super.onCreatedThisChild(child, data);
+      // console.log('outlet--oncreatedThisChild',child);
+    }
+
+    onCreatedThisChildDebounce(childrenSet: ChildrenSet[]) {
+      super.onCreatedThisChildDebounce(childrenSet);
+      let parentThis = this.getParentThis();
+      // console.log('---', parentThis);
+      if (isOnCreatedOutletDebounce(parentThis)) {
+        parentThis.onCreatedOutletDebounce(this.value?.obj);
+      }
+      this.getAttribute('onCreatedDebounce')?.(this.value?.obj);
+    }
     created(component: any) {
       component ??= this.value?.obj;
       this.getAttribute('onCreated')?.(component);
@@ -60,7 +80,7 @@ export namespace RouterOutlet {
 
 export default {
   // TODO: 왜 이놈만 webpack에서 순환참조 에러나는지모르겠다.. 왜 이놈만.. 그래서 이렇게 하긴함.
-  routerOutlet: (config?: DomRenderRunConfig, executer?: {run: (...data: any[])=>any}) => {
+  routerOutlet: (config?: DomRenderRunConfig, executer?: { run: (...data: any[]) => any }) => {
     return RawSet.createComponentTargetElement({
       name: RouterOutlet.selector,
       template: