@dooboostore/dom-render 1.0.111 → 1.0.113

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,22 +1,23 @@
-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 {OnChildRawSetRendered} from "../lifecycle/OnChildRawSetRendered";
 
 
 export const ATTRIBUTE_METADATA_KEY = Symbol('attribute');
@@ -131,11 +132,15 @@ export function event(options: { query: string, name: string, onDestroy?: (compo
 }
 
 
-export type ComponentBaseConfig = { onlyParentType?: ConstructorType<any>[] | ConstructorType<any>, createChildrenDebounce?: number };
+export type ComponentBaseConfig = { onlyParentType?: ConstructorType<any>[] | ConstructorType<any>,
+  createChildrenDebounce?: number,
+  onRawSetRenderedOtherDataDebounce?: number
+  onChildRawSetRenderedOtherDataDebounce?: number
+};
 
 export type ChildrenSet = { instance: any, data: OnCreateRenderDataParams };
 
-export class ComponentBase<T = any, C extends ComponentBaseConfig = ComponentBaseConfig> implements OnChangeAttrRender, OnCreateRenderData, OnCreatedThisChild, OnDrThisBind, OnDrThisUnBind, OnInitRender, OnDestroyRender, OnRawSetRendered {
+export class ComponentBase<T = any, C extends ComponentBaseConfig = ComponentBaseConfig> implements OnChangeAttrRender, OnCreateRenderData, OnCreatedThisChild, OnDrThisBind, OnDrThisUnBind, OnInitRender, OnDestroyRender, OnRawSetRendered, OnChildRawSetRendered {
   @DomRenderNoProxy
   private _rawSet?: RawSet;
   @DomRenderNoProxy
@@ -157,8 +162,20 @@ export class ComponentBase<T = any, C extends ComponentBaseConfig = ComponentBas
   private childrenSetSubject = new Subject<ChildrenSet[]>();
   @DomRenderNoProxy
   private createChildrenDebounceSubscription?: Subscription | undefined;
+  @DomRenderNoProxy
+  private onRawSetRenderedOtherDataSubject = new Subject<OnRawSetRenderedOtherData>();
+  @DomRenderNoProxy
+  private onChildRawSetRenderedOtherDataSubject = new Subject<void>();
+  @DomRenderNoProxy
+  private onRawSetRenderedOtherDataSubjectSubscription?: Subscription | undefined;
+  @DomRenderNoProxy
+  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;
@@ -374,6 +391,11 @@ export class ComponentBase<T = any, C extends ComponentBaseConfig = ComponentBas
   }
 
   async onRawSetRendered(rawSet: RawSet, otherData: OnRawSetRenderedOtherData): Promise<void> {
+    this.onRawSetRenderedOtherDataSubject.next(otherData);
+    // this.onRawSetRenderedOtherDataSubjectSubscription = this.onRawSetRenderedOtherDataSubject.pipe(debounceTime(this.componentConfig?.onRawSetRenderedOtherDataDebounce??0)).subscribe(it => {
+    //   this.onRawSetRenderedDebounce(it);
+    // });
+
     const queries = ReflectUtils.getMetadata<QueryMetadata[]>(QUERY_METADATA_KEY, this.constructor);
     if (queries) {
       queries.filter(it => it.refreshRawSetRendered).forEach(queryInfo => {
@@ -388,6 +410,11 @@ export class ComponentBase<T = any, C extends ComponentBaseConfig = ComponentBas
       });
     }
   }
+
+  async onChildRawSetRendered(): Promise<void> {
+    this.onChildRawSetRenderedOtherDataSubject.next();
+  }
+
   /**
    * Manually refresh all query and event decorators
    * Useful when DOM elements are dynamically added/removed and you want to update bindings
@@ -517,7 +544,20 @@ export class ComponentBase<T = any, C extends ComponentBaseConfig = ComponentBas
       }
     }
   }
-
+getAttributeNames(attribute = this._attribute): string[] {
+  const target = attribute as any;
+  if (!target) return [];
+  const keys = Object.keys(target);
+  const names = new Set<string>();
+  for (const k of keys) {
+    names.add(k);
+    // names.add(ConvertUtils.camelToSnakeCase(k));
+    // names.add(ConvertUtils.snakeToCamelCase(k));
+    // names.add(k.toLowerCase());
+    // names.add(k.toUpperCase());
+  }
+  return Array.from(names);
+}
   getAttribute<K extends keyof T>(name: K, attribute = this._attribute): T[K] | null {
     const target = attribute as any;
     if (!target) {
@@ -624,6 +664,10 @@ export class ComponentBase<T = any, C extends ComponentBaseConfig = ComponentBas
   }
 
   onCreatedThisChildDebounce(childrenSet: ChildrenSet[]) {
+  }
+  onRawSetRenderedDebounce(childrenSet: OnRawSetRenderedOtherData[]) {
+  }
+  onChildRawSetRenderedDebounce(){
 
   }
 
@@ -641,7 +685,7 @@ export class ComponentBase<T = any, C extends ComponentBaseConfig = ComponentBas
   }
 
   onChangeAttrRender(name: string, value: any, other: OtherData): void {
-    if (other.rawSet) {
+    if (other?.rawSet) {
       this.setRawSet(other.rawSet);
     }
 
@@ -664,9 +708,37 @@ export class ComponentBase<T = any, C extends ComponentBaseConfig = ComponentBas
   }
 
   async onInitRender(param: any, rawSet: RawSet) {
-    this.createChildrenDebounceSubscription = this.childrenSetSubject.pipe(debounceTime(this.componentConfig?.createChildrenDebounce??0)).subscribe(it => {
+
+    // console.log('onInitRender ComponentBase', this.constructor.name, rawSet?.uuid);
+    const window = rawSet.dataSet?.config?.window;
+    this.createChildrenDebounceSubscription = this.childrenSetSubject.pipe(
+      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(
+      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(
+      MessageOperator.debounceTime(this.componentConfig?.onChildRawSetRenderedOtherDataDebounce??10, {
+        setTimeout: window ? window.setTimeout.bind(window) : undefined,
+        clearTimeout: window ? window.clearTimeout.bind(window) : undefined,
+      })
+    ).subscribe(it => {
+      this.onChildRawSetRenderedDebounce();
+    });
     if (rawSet) {
       this.setRawSet(rawSet);
 
@@ -699,6 +771,9 @@ export class ComponentBase<T = any, C extends ComponentBaseConfig = ComponentBas
     this._cleanupEventBindings();
     this._clearAllRefreshTimers();
     this.createChildrenDebounceSubscription?.unsubscribe();
+    this.onRawSetRenderedOtherDataSubjectSubscription?.unsubscribe();
+    this.onChildRawSetRenderedOtherDataSubjectSubscription?.unsubscribe();
+    // console.log('ComponentBase onDestroy', this.constructor.name, this.onRawSetRenderedOtherDataSubjectSubscription.closed);
   }
 
 }

package/src/components/ComponentSet.ts

@@ -3,9 +3,9 @@ import { DomRenderFinalProxy } from '../types/Types';
 export type ComponentSetConfig = {objPath?: string | null, beforeComponentSet?: ComponentSet};
 export class ComponentSet<T = any> {
     private _config: ComponentSetConfig;
-    private _template?: string;
-    private _styles?: string[] | string;
-    constructor(public obj: T, source: {template?: string, styles?: (string[]) | string}, config?: ComponentSetConfig) {
+    private _template?: string|(<T>(instance: T) => Promise<string>);
+    private _styles?: string[] | string|(<T>(instance: T) => Promise<string>);
+    constructor(public obj: T, source: {template?: string|(<T>(instance: T) => Promise<string>), styles?: (string[]) | string|(<T>(instance: T) => Promise<string>)}, config?: ComponentSetConfig) {
         this._template = source.template;
         this._styles = source.styles;
         this._config = DomRenderFinalProxy.final(Object.assign({objPath: 'obj'} as ComponentSetConfig, config))

package/src/components/a/A.ts

@@ -1,6 +1,7 @@
 import { attribute, ComponentBase } from '../ComponentBase';
 import { DomRender, DomRenderRunConfig } from '../../DomRender';
 import { RawSet } from '../../rawsets/RawSet';
+import {OtherData} from "../../lifecycle";
 
 export namespace A {
   export const selector = 'dr-a';
@@ -23,6 +24,7 @@ export namespace A {
     style?: string | null;
     class?: string | null;
     click?: ((data: ClickCallbackData) => void) | null;
+    onInit?: (e: HTMLAnchorElement) => void;
     replace?: boolean | null;
     scrollToTop?: boolean | null;
   };
@@ -32,9 +34,11 @@ export namespace A {
     @attribute({ converter: v => v || null }) target: string | null = null;
     @attribute({ converter: v => v || null }) style: string | null = null;
     @attribute({ name: 'class', converter: v => v || null }) classAttr: string | null = null;
+    @attribute({ name: 'dr-class', converter: v => v || null }) drClass: string | null = null;
     @attribute() click?: ((data: ClickCallbackData) => void) | null = null;
     @attribute({ converter: v => v !== null && String(v) !== 'false' }) replace = false;
     @attribute({ converter: v => v !== null && String(v) !== 'false' }) scrollToTop = true;
+    private element?: HTMLElement;
 
     onClick(event: MouseEvent) {
       if (this.click) {
@@ -59,6 +63,25 @@ export namespace A {
         this.domRenderConfig?.router?.go({path: this.href, replace: this.replace, scrollToTop: this.scrollToTop });
       }
     }
+
+    onChangeAttrRender(name: string, value: any, other: OtherData) {
+      super.onChangeAttrRender(name, value, other);
+      if (this.element && name.startsWith('attribute-')) {
+        this.element.setAttribute(name, value);
+      }
+    }
+
+    onAElementInit($element: HTMLElement) {
+      this.element = $element;
+      this.getAttribute('onInit')?.($element as HTMLAnchorElement);
+      this.getAttributeNames()
+        .filter(it => it.startsWith('attribute-'))
+        .forEach(it => {
+          const attrName = it.replace(/^attribute-/, '');
+          const attrValue = this.getAttribute(it as any);
+          this.element.setAttribute(attrName, attrValue);
+        });
+    }
   }
 }
 
@@ -72,6 +95,8 @@ export default {
         style="\${@this@.style}$"
         class="\${@this@.classAttr}$"
         dr-event-click="@this@.onClick($event)"
+        dr-class="\${@this@.drClass}$"
+        dr-on-init="@this@.onAElementInit($element)"
       >#innerHTML#</a>`,
       objFactory: (e, o, r2, constructorParam) => {
         return DomRender.run({ rootObject: new A.A(...constructorParam), config });

package/src/components/appender/Appender.ts

@@ -1,4 +1,4 @@
-import { ComponentBase } from '../ComponentBase';
+import {attribute, ComponentBase} from '../ComponentBase';
 import { DomRender, DomRenderRunConfig } from '../../DomRender';
 import { RawSet } from '../../rawsets/RawSet';
 import { OtherData } from '../../lifecycle/OnChangeAttrRender';
@@ -25,7 +25,7 @@ export namespace Appender {
   // })
   export class Appender<D> extends ComponentBase<Attribute<D>> implements OnInitRender {
     private value?:DomRenderAppender
-
+    @attribute({ name: 'dr-option-item-variable-name', converter: v => v || null }) drOptionItemVariableName: string | null = null;
     // onCreateRender(...param: any) {
     //   console.log('--onCreateRender')
     // }
@@ -70,7 +70,7 @@ export default {
   appender: (config?: DomRenderRunConfig) => {
     return RawSet.createComponentTargetElement({
       name: Appender.selector,
-      template: '<div dr-appender="@this@.value" dr-option-strip="true">#innerHTML#</div>',
+      template: '<div dr-appender="@this@.value" dr-option-item-variable-name="${@this@.drOptionItemVariableName}$" dr-option-strip="true">#innerHTML#</div>',
       objFactory: (e,o,r2, counstructorParam) => {
         return DomRender.run({rootObject: new Appender.Appender(...counstructorParam), config: config});
       }

package/src/components/details/Details.ts

@@ -5,9 +5,9 @@ import { OtherData } from '../../lifecycle/OnChangeAttrRender';
 import { OnInitRender } from '../../lifecycle/OnInitRender';
 import { OnCreateRenderDataParams } from '../../lifecycle/OnCreateRenderData';
 import { OnCreateRender } from '../../lifecycle/OnCreateRender';
-import { type Subscription } from '@dooboostore/core/message/Subscription';
-import { ValidUtils } from '@dooboostore/core-web/valid/ValidUtils';
-import { EventUtils } from '@dooboostore/core-web/event/EventUtils';
+import { type Subscription } from '@dooboostore/core';
+import { ValidUtils } from '@dooboostore/core-web';
+import { EventUtils } from '@dooboostore/core-web';
 
 export namespace Details {
   export const selector = 'dr-details';
@@ -16,6 +16,8 @@ export namespace Details {
     class?: string;
     toggle_form_reset?: boolean;
     disableOtherClickClose?: boolean;
+    onOpen?: () => void;
+    onClose?: () => void;
     toggle?: (open: boolean) => void;
   };
   export type BodyAttribute = {
@@ -101,6 +103,11 @@ export namespace Details {
       if (toggleAttribute) {
         toggleAttribute?.(element.open);
       }
+      if (element.open) {
+        this.getAttribute('onOpen')?.();
+      } else {
+        this.getAttribute('onClose')?.();
+      }
     }
     async onInitRender(param: any, rawSet: RawSet) {
       await super.onInitRender(param, rawSet);

package/src/components/dialog/example/ImageEditorDialog.ts

@@ -2,24 +2,24 @@
 // import template from './imageEditorDialog.html'
 // import styles from './imageEditorDialog.css'
 // import { ComponentBase } from '@dooboostore/app-system/component/ComponentBase';
-// import { AuthStore } from '@src/store/AuthStore';
+// import { AuthStore } from '@lazycollect-src/store/AuthStore';
 // import { OnCreateRender } from '@dooboostore/dom-render/lifecycle/OnCreateRender';
 // import { OnDestroyRender, OnDestroyRenderParams } from '@dooboostore/dom-render/lifecycle/OnDestroyRender';
 // import { Subscription } from '@dooboostore/core/message';
 // import { Inject } from '@dooboostore/simple-boot/decorators/inject/Inject';
-// import { AuthService } from '@src/service/AuthService';
-// import { UserService } from '@src/service/UserService';
-// import { ObjetService } from '@src/service/ObjetService';
-// import { Talks } from '@src/entities/Talks';
-// import { TalkService } from '@src/service/TalkService';
-// import { ItemService } from '@src/service/ItemService';
+// import { AuthService } from '@lazycollect-src/service/AuthService';
+// import { UserService } from '@lazycollect-src/service/UserService';
+// import { ObjetService } from '@lazycollect-src/service/ObjetService';
+// import { Talks } from '@lazycollect-src/entities/Talks';
+// import { TalkService } from '@lazycollect-src/service/TalkService';
+// import { ItemService } from '@lazycollect-src/service/ItemService';
 // import { SimFrontOption } from '@dooboostore/simple-boot-front/option/SimFrontOption';
 // import { DomRenderNoProxy } from '@dooboostore/dom-render/decorators/DomRenderNoProxy';
 // import { Appender } from '@dooboostore/dom-render/operators/Appender';
 // import { ConvertUtils as WebConvertUtils } from '@dooboostore/core-web/convert/ConvertUtils';
-// import { WorldService } from '@src/service/WorldService';
+// import { WorldService } from '@lazycollect-src/service/WorldService';
 // import { ConvertUtils } from '@dooboostore/core/convert/ConvertUtils';
-// import { Router } from '@dooboostore/dom-render/routers/Router';
+// import { Router } from '@dooboostore/core-web/routers/Router';
 //
 // export type ImageEditorDialogData = {}
 //
@@ -112,4 +112,4 @@
 //   }
 //
 //
-// }
+// }

package/src/components/if/If.ts

@@ -7,6 +7,7 @@ import { DomRenderConfig } from '../../configs/DomRenderConfig';
 
 export namespace If {
   export const selector = 'dr-if';
+
   // export type AppenderInterface<D> = {
   //   push(...data:D[]):void;
   //   set(key: string, ...v:D[]):void
@@ -19,7 +20,6 @@ export namespace If {
 
   export class If<D> extends ComponentBase<Attribute<D>> implements OnInitRender {
     private sw: boolean = false;
-
     async onInitRender(param: any, rawSet: RawSet) {
       super.onInitRender(param, rawSet);
     }
@@ -50,9 +50,10 @@ export default {
     //   });
     // }
 
+
     return RawSet.createComponentTargetElement({
       name: If.selector,
-      template: '<div dr-if="@this@.sw" >#innerHTML#</div>',
+      template: '<div dr-if="@this@.sw" dr-option-strip="true" >#innerHTML#</div>',
       objFactory: (e, o, r2, counstructorParam) => {
         return DomRender.run({ rootObject: new If.If(...counstructorParam), config: config });
       }

package/src/components/input/Input.ts

@@ -4,12 +4,10 @@ import { RawSet } from '../../rawsets/RawSet';
 import { OtherData } from '../../lifecycle/OnChangeAttrRender';
 import { OnCreateRender } from '../../lifecycle/OnCreateRender';
 import { OnDestroyRender, OnDestroyRenderParams } from '../../lifecycle/OnDestroyRender';
-import { Subscription } from '@dooboostore/core/message/Subscription';
-import { ValidUtils } from '@dooboostore/core/valid/ValidUtils';
-import { map } from '@dooboostore/core/message/operators/map';
-import { EventUtils } from '@dooboostore/core-web/event/EventUtils';
-import { debounceTime } from '@dooboostore/core/message/operators/debounceTime';
-import { distinctUntilChanged } from '@dooboostore/core/message/operators/distinctUntilChanged';
+import { Subscription } from '@dooboostore/core';
+import { ValidUtils } from '@dooboostore/core';
+import { MessageOperator } from '@dooboostore/core';
+import { EventUtils } from '@dooboostore/core-web';
 
 export namespace Input {
   export const selector = `dr-input`;
@@ -52,7 +50,7 @@ export namespace Input {
           // let result$ = EventUtils.htmlElementEventObservable(inputElement,'input');
 
           let result$ = EventUtils.htmlElementEventObservable(inputElement, 'input').pipe(
-            map((event: Event) => {
+            MessageOperator.map((event: Event) => {
               const target = event.target;
               if (target instanceof HTMLInputElement) {
                 return target.value.trim();
@@ -63,10 +61,10 @@ export namespace Input {
           );
 
           if (ValidUtils.isNotNullUndefined(debounceTimeValue) && debounceTimeValue > 0) {
-            result$ = result$.pipe(debounceTime(debounceTimeValue));
+            result$ = result$.pipe(MessageOperator.debounceTime(debounceTimeValue));
           }
           if (ValidUtils.isNotNullUndefined(distinct) && distinct === true) {
-            result$ = result$.pipe(distinctUntilChanged());
+            result$ = result$.pipe(MessageOperator.distinctUntilChanged());
           }
           return result$;
         };

package/src/components/promise/PromiseSwitch.ts

@@ -3,8 +3,8 @@ import { DomRender, DomRenderRunConfig } from '../../DomRender';
 import { RawSet } from '../../rawsets/RawSet';
 import { OtherData } from '../../lifecycle/OnChangeAttrRender';
 
-import { ValidUtils } from '@dooboostore/core/valid/ValidUtils';
-import { Promises } from '@dooboostore/core/promise/Promises';
+import { ValidUtils } from '@dooboostore/core';
+import { Promises } from '@dooboostore/core';
 import { OnCreateRenderDataParams } from '../../lifecycle/OnCreateRenderData';
 
 export namespace PromiseSwitch {

package/src/components/router/Route.ts

@@ -5,7 +5,7 @@ import { RawSet } from '../../rawsets/RawSet';
 import type { DomRenderConfig } from '../../configs/DomRenderConfig';
 import { DomRenderNoProxy } from '../../decorators/DomRenderNoProxy';
 import { OnDestroyRenderParams } from '../../lifecycle/OnDestroyRender';
-import { Subscription } from '@dooboostore/core/message/Subscription';
+import { Subscription } from '@dooboostore/core';
 
 export namespace Route {
   export const selector = 'dr-route';

package/src/components/router/RouterOutlet.ts

@@ -1,17 +1,17 @@
-import { ChildrenSet, ComponentBase } from '../ComponentBase';
-import { 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, isOnCreatedOutletDebounce } from '../../components/ComponentRouterBase';
-import { OnCreateRenderDataParams } from '../../lifecycle';
+import {ChildrenSet, ComponentBase} from '../ComponentBase';
+import {DomRenderRunConfig} from '../../DomRender';
+import {RawSet} from '../../rawsets/RawSet';
+import {isOnChangeAttrRender, OtherData} from '../../lifecycle/OnChangeAttrRender';
+import {OnInitRender} from '../../lifecycle/OnInitRender';
+import {ComponentSet} from '../../components/ComponentSet';
+import {OnDestroyRenderParams} from '../../lifecycle/OnDestroyRender';
+import {ComponentRouterBase, isOnCreatedOutletDebounce} from '../../components/ComponentRouterBase';
+import {OnCreateRenderDataParams} from '../../lifecycle';
 
 export namespace RouterOutlet {
   export const selector = 'dr-router-outlet';
   export type Attribute = {
-    value: ComponentSet;
+    value: ComponentSet | string;
     if: boolean | null;
     createArguments: any[];
     onCreated?: (value: any) => void;
@@ -23,20 +23,32 @@ export namespace RouterOutlet {
     private value?: ComponentSet;
     private if?: boolean | null = null;
     private createArguments?: any[];
+    private childObject?: any;
+    private childRawSet?: RawSet;
+    private sw = false;
 
     setValue(value: ComponentSet) {
-      this.value = value;
+      this.sw = false;
+      setTimeout(() => {
+        this.value = value;
+      }, 0)
+
+      setTimeout(() => {
+        this.sw = true;
+      }, 0)
       // console.log('sssssssssss');
     }
 
     async onInitRender(param: any, rawSet: RawSet) {
       await super.onInitRender(param, rawSet);
-      const c = this.getParentThis();
+      const c = this.getParentThis<any>();
       const userValue = this.getAttribute('value');
-      if (userValue) {
-        this.value = userValue;
-      } else if (c instanceof ComponentRouterBase) {
-        this.value = c.child;
+      if (typeof userValue === 'string') {
+        this.setValue(c[userValue]);
+      } else if (userValue instanceof ComponentSet) {
+        this.setValue(userValue);
+      } else if (!userValue && c instanceof ComponentRouterBase) {
+        this.setValue(c.child);
       }
       // console.log('------',c);
     }
@@ -45,10 +57,15 @@ export namespace RouterOutlet {
       super.onDestroyRender(data);
     }
 
+    onDestroy() {
+      super.onDestroy();
+    }
+
     onChangeAttrRender(name: string, value: any, other: OtherData) {
       super.onChangeAttrRender(name, value, other);
+      // console.log('--------------', name, value);
       if (this.equalsAttributeName(name, 'value')) {
-        this.value = value;
+        this.setValue(value);
       }
       if (this.equalsAttributeName(name, 'if')) {
         this.if = value;
@@ -56,6 +73,10 @@ export namespace RouterOutlet {
       if (this.equalsAttributeName(name, 'createArguments')) {
         this.createArguments = value;
       }
+
+      if (this.childObject && this.childRawSet && isOnChangeAttrRender(this.childObject)) {
+        this.childObject.onChangeAttrRender(name, value, {rawSet: this.childRawSet});
+      }
     }
 
     onCreatedThisChild(child: any, data: OnCreateRenderDataParams) {
@@ -72,9 +93,26 @@ export namespace RouterOutlet {
       }
       this.getAttribute('onCreatedDebounce')?.(this.value?.obj);
     }
-    created(component: any) {
-      component ??= this.value?.obj;
-      this.getAttribute('onCreated')?.(component);
+
+
+    onCreateDrThis($component: any, $rawSet: RawSet) {
+      this.childObject = $component ??= this.value?.obj;
+      this.childRawSet = $rawSet;
+      if ($component) {
+        this.getAttribute('onCreated')?.($component);
+        // console.log('21222');
+        if (isOnChangeAttrRender($component)) {
+          this.getAttributeNames()
+            .filter(it => it.startsWith('attribute-'))
+            .forEach(it => {
+              const attrName = it.replace(/^attribute-/, '');
+              const attrValue = this.getAttribute(it as any);
+              $rawSet.dataSet.render.attribute ??= {};
+              $rawSet.dataSet.render.attribute[attrName] = attrValue;
+              $component.onChangeAttrRender(attrName, attrValue, {rawSet: $rawSet});
+            });
+        }
+      }
     }
   }
 }
@@ -85,9 +123,13 @@ export default {
     return RawSet.createComponentTargetElement({
       name: RouterOutlet.selector,
       template:
-        '<div dr-this="@this@.value" dr-detect-option-if="@this@?.value && @this@?.if" dr-option-strip="true" dr-on-create:arguments="@this@.createArguments" dr-on-create:callback="@this@?.created?.($component)">#innerHTML#</div>',
+        `
+        <dr-if value="\${@this@.sw}$">
+            <div dr-this="@this@.value" dr-detect-option-if="@this@?.value && @this@?.if" dr-option-strip="true" dr-on-create:arguments="@this@.createArguments" dr-on-create:callback="@this@?.onCreateDrThis?.($component, $rawSet)">#innerHTML#</div>
+        </dr-if>
+        `,
       objFactory: (e, o, r2, counstructorParam) => {
-        return executer?.run({ rootObject: new RouterOutlet.RouterOutlet(...counstructorParam), config: config });
+        return executer?.run({rootObject: new RouterOutlet.RouterOutlet(...counstructorParam), config: config});
       }
     });
   }