@dooboostore/dom-render 1.0.112 → 1.0.114

package/src/components/ComponentBase.ts

@@ -1,29 +1,28 @@
-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 { debounceTime, bufferTime } from '@dooboostore/core/message/operators';
+import type { Subscription } from '@dooboostore/core';
 import { OnRawSetRendered, OnRawSetRenderedOtherData } from "../lifecycle/OnRawSetRendered";
-import {bufferTime} from "@dooboostore/core/message/operators/bufferTime";
 import {OnChildRawSetRendered} from "../lifecycle/OnChildRawSetRendered";
 
 
-export const ATTRIBUTE_METADATA_KEY = Symbol('attribute');
-export const QUERY_METADATA_KEY = Symbol('query');
-export const EVENT_METADATA_KEY = Symbol('event');
+export const ATTRIBUTE_METADATA_KEY = Symbol.for('dom-render:attribute-metadata');
+export const QUERY_METADATA_KEY = Symbol.for('dom-render:query-metadata');
+export const EVENT_METADATA_KEY = Symbol.for('dom-render:event-metadata');
 
 export interface AttributeMetadata {
     propertyKey: string | symbol;
@@ -173,6 +172,10 @@ export class ComponentBase<T = any, C extends ComponentBaseConfig = ComponentBas
   private onChildRawSetRenderedOtherDataSubjectSubscription?: Subscription | undefined;
 
   constructor(private _config?: C) {
+    // console.log('ComponentBase created', this);
+    // setTimeout(()=>{
+    //   console.log('ComponentBase created', this.constructor.name, this._rawSet?.uuid);
+    // }, 1000)
   }
   get componentConfig(): C | undefined {
     return this._config;
@@ -705,19 +708,34 @@ getAttributeNames(attribute = this._attribute): string[] {
   }
 
   async onInitRender(param: any, rawSet: RawSet) {
+
+    // console.log('onInitRender ComponentBase', this.constructor.name, rawSet?.uuid);
+    const window = rawSet.dataSet?.config?.window;
     this.createChildrenDebounceSubscription = this.childrenSetSubject.pipe(
-      debounceTime(this.componentConfig?.createChildrenDebounce??0)
+      debounceTime(this.componentConfig?.createChildrenDebounce??1, {
+        setTimeout: window ? window.setTimeout.bind(window) : undefined,
+        clearTimeout: window ? window.clearTimeout.bind(window) : undefined,
+      })
     ).subscribe(it => {
       // console.log('call onCreatedThisChildDebounce', it);
       this.onCreatedThisChildDebounce(it);
     });
     this.onRawSetRenderedOtherDataSubjectSubscription = this.onRawSetRenderedOtherDataSubject.pipe(
-      bufferTime(this.componentConfig?.onRawSetRenderedOtherDataDebounce??0)
+      bufferTime(this.componentConfig?.onRawSetRenderedOtherDataDebounce??1, {
+        skipEmpty: true,
+        setInterval: window ? window.setInterval.bind(window) : undefined,
+        clearInterval: window ? window.clearInterval.bind(window) : undefined,
+        setTimeout: window ? window.setTimeout.bind(window) : undefined,
+        clearTimeout: window ? window.clearTimeout.bind(window) : undefined,
+      })
     ).subscribe(it => {
       this.onRawSetRenderedDebounce(it);
     });
     this.onChildRawSetRenderedOtherDataSubjectSubscription = this.onChildRawSetRenderedOtherDataSubject.pipe(
-      debounceTime(this.componentConfig?.onChildRawSetRenderedOtherDataDebounce??0)
+      debounceTime(this.componentConfig?.onChildRawSetRenderedOtherDataDebounce??10, {
+        setTimeout: window ? window.setTimeout.bind(window) : undefined,
+        clearTimeout: window ? window.clearTimeout.bind(window) : undefined,
+      })
     ).subscribe(it => {
       this.onChildRawSetRenderedDebounce();
     });
@@ -755,6 +773,7 @@ getAttributeNames(attribute = this._attribute): string[] {
     this.createChildrenDebounceSubscription?.unsubscribe();
     this.onRawSetRenderedOtherDataSubjectSubscription?.unsubscribe();
     this.onChildRawSetRenderedOtherDataSubjectSubscription?.unsubscribe();
+    // console.log('ComponentBase onDestroy', this.constructor.name, this.onRawSetRenderedOtherDataSubjectSubscription.closed);
   }
 
 }

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/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';

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/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 { map, debounceTime, distinctUntilChanged} from '@dooboostore/core/message/operators';
+import { EventUtils } from '@dooboostore/core-web';
 
 export namespace Input {
   export const selector = `dr-input`;

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

@@ -57,6 +57,10 @@ 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);

package/src/components/select/Select.ts

@@ -4,13 +4,13 @@ import {RawSet} from '../../rawsets/RawSet';
 import {OnCreateRenderData} from '../../lifecycle/OnCreateRenderData';
 import {OnInitRender} from '../../lifecycle/OnInitRender';
 import {OnDestroyRender} from '../../lifecycle/OnDestroyRender';
-import {EventUtils} from '@dooboostore/core-web/event/EventUtils';
-import {type Subscription} from '@dooboostore/core/message/Subscription';
-import {ValidUtils} from '@dooboostore/core-web/valid/ValidUtils';
+import {EventUtils} from '@dooboostore/core-web';
+import {type Subscription} from '@dooboostore/core';
+import {ValidUtils} from '@dooboostore/core-web';
 import {DomRenderNoProxy} from '../../decorators/DomRenderNoProxy';
 import {OnCreateRender} from '../../lifecycle/OnCreateRender';
 import {DomRenderConfig} from '../../configs/DomRenderConfig';
-import {WindowUtils} from '@dooboostore/core-web/window/WindowUtils';
+import {WindowUtils} from '@dooboostore/core-web';
 import {OnRawSetRenderedOtherData} from '../../lifecycle';
 
 /** 사용법

package/src/components/this/This.ts

@@ -42,6 +42,9 @@ export namespace This {
     onDestroyRender(data: OnDestroyRenderParams) {
       super.onDestroyRender(data);
     }
+    onDestroy() {
+      super.onDestroy();
+    }
 
     onChangeAttrRender(name: string, value: any, other: OtherData) {
       super.onChangeAttrRender(name, value, other);

package/src/configs/DomRenderConfig.ts

@@ -1,12 +1,12 @@
-import { ConstructorType } from '@dooboostore/core/types';
-import { RawSet } from '../rawsets/RawSet';
-import { Router } from '../routers/Router';
-import { Messenger } from '../messenger/Messenger';
-import { TargetElement } from './TargetElement';
-import { TargetAttr } from './TargetAttr';
-import { Attrs } from '../rawsets/Attrs';
-import { OperatorAround } from '../operators/OperatorExecuter';
-import { EventManager } from '../events/EventManager';
+import {ConstructorType} from '@dooboostore/core';
+import {RawSet} from '../rawsets/RawSet';
+import {Messenger} from '../messenger/Messenger';
+import {TargetElement} from './TargetElement';
+import {TargetAttr} from './TargetAttr';
+import {Attrs} from '../rawsets/Attrs';
+import {OperatorAround} from '../operators/OperatorExecuter';
+import {EventManager} from '../events/EventManager';
+import {Router} from "@dooboostore/core-web";
 
 export type DomRenderConfig<T = any> = {
   window: Window;

package/src/configs/TargetElement.ts

@@ -4,11 +4,11 @@ import {Attrs} from '../rawsets/Attrs';
 import {CreatorMetaData} from '../rawsets/CreatorMetaData';
 import {Render} from '../rawsets/Render';
 
-export type TargetElement = {
+export type TargetElement<T = any> = {
     name: string;
     noStrip?:boolean;
-    template?: string;
-    styles?: string | (string[]);
+    template?: string | ((instance: T)=> Promise<string>);
+    styles?: string | (string[]) | ((instance: T)=> Promise<string>);
     callBack: (target: Element, obj: any, rawSet: RawSet, attrs: Attrs, config: DomRenderConfig) => Promise<DocumentFragment | undefined>;
     complete?: (target: Element, obj: any, rawSet: RawSet) => void;
     __render?: Render;

package/src/decorators/DomRenderNoProxy.ts

@@ -1,5 +1,5 @@
-import { ValidUtils } from '@dooboostore/core/valid/ValidUtils';
-import {ReflectUtils} from "@dooboostore/core/reflect/ReflectUtils";
+import { ValidUtils } from '@dooboostore/core';
+import {ReflectUtils} from "@dooboostore/core";
 
 export const DomRenderNoProxyKey = 'DomRender:NoProxy'
 export const DomRenderNoProxy = (target: any, propertyKey?: string | symbol) => {