@dooboostore/dom-render 1.0.108 → 1.0.109

package/src/rawsets/Render.ts

@@ -14,6 +14,7 @@ export type Render = {
     router?: Router;
     range?: any;
     value?: any;
+    innerHTML?: string;
     currentThis?: any;
     currentThisPath?: any;
     nearThisPath?: string,

package/src/routers/Router.ts

@@ -18,7 +18,7 @@ export type PopCurrentState = PopStateCurrentTargetDomrenderRouter;
 export const isPopStateCurrentTargetDomrenderRouter = (obj: any): obj is PopStateCurrentTargetDomrenderRouter =>
   obj?.currentTargetName === 'domRenderRouter';
 
-export type RouterConfig<T = any> = { rootObject?: T, window: Window, disableAttach?: boolean,
+export type RouterConfig<T = any> = { rootObject?: T, window: Window, firstUrl?: string,
   // changeStateConvertDate?:(data: any)=>any
 };
 export type ChangeStateResult = {data?: any}
@@ -33,6 +33,35 @@ export abstract class Router<T = any> {
   private behaviorSubject: BehaviorSubject<RouteData>;
   private _config: RouterConfig<T>;
 
+  constructor(config: RouterConfig<any>) {
+    this._config = config;
+
+    let routeData: RouteData;
+    if (config?.firstUrl) {
+      const path = config.firstUrl.split('?');
+      routeData = {
+        url: config.firstUrl,
+        path: path[0],
+        searchParams: new URLSearchParams(path[1]??''),
+        router: this,
+      }
+      this.behaviorSubject = new BehaviorSubject<RouteData>(routeData);
+      this.go(config.firstUrl);
+    } else {
+      routeData = this.getRouteData();
+      this.behaviorSubject = new BehaviorSubject<RouteData>(routeData);
+    }
+    this.config.window.addEventListener('popstate', (event: PopStateEvent) => {
+      // domrender에서 발생하지 않은 즉 back, previous 일떄에도 이벤트가도록 처리
+      if(!isPopStateCurrentTargetDomrenderRouter(event.state)) {
+        // console.log('-------');
+        const routeData = this.getRouteData();
+        this.behaviorSubject.next(routeData);
+      }
+    })
+  }
+
+
   get observable(): Observable<RouteData> {
     return this.behaviorSubject.asObservable();
   }
@@ -45,18 +74,6 @@ export abstract class Router<T = any> {
     return this._config;
   }
 
-  constructor(config: RouterConfig<any>) {
-    this._config = config;
-    this.behaviorSubject = new BehaviorSubject<RouteData>(this.getRouteData());
-    this.config.window.addEventListener('popstate', (event: PopStateEvent) => {
-      if(!isPopStateCurrentTargetDomrenderRouter(event.state)) {
-        // console.log('-------');
-        const routeData = this.getRouteData();
-        this.behaviorSubject.next(routeData);
-      }
-    })
-  }
-
   public getSearchFirstParamsObject<T = any>(defaultValue?: T) {
     const a = ConvertUtils.toObject<T>(this.getSearchParams(), {firstValue: true});
     return Object.assign({}, defaultValue, a);
@@ -66,13 +83,13 @@ export abstract class Router<T = any> {
     return ConvertUtils.toObject<T>(this.getHashSearchParams(), {firstValue: true});
   }
 
-  async attach(): Promise<void> {
-    // const proxy = getDomRenderProxy(this.config.rootObject)
-    // if (proxy) {
-    //   const key = `___${EventManager.ROUTER_VARNAME}`;
-    //   await proxy.render(key);
-    // }
-  }
+  // async attach(): Promise<void> {
+  //   // const proxy = getDomRenderProxy(this.config.rootObject)
+  //   // if (proxy) {
+  //   //   const key = `___${EventManager.ROUTER_VARNAME}`;
+  //   //   await proxy.render(key);
+  //   // }
+  // }
 
   testRegexp(regexp?: string): boolean {
     if (regexp) {
@@ -156,9 +173,9 @@ export abstract class Router<T = any> {
     } else {
       this.push(config.path, config.data, config.title);
     }
-    if (!this.config.disableAttach) {
-      await this.attach();
-    }
+    // if (!this.config.disableAttach) {
+    //   await this.attach();
+    // }
     
     // 스크롤 제어 (기본값: true - 맨 위로 스크롤)
     if (config.scrollToTop !== false) {

package/types.d.ts

@@ -6,8 +6,9 @@ declare module "@dooboostore/dom-render/DomRender" {
   import { ConstructorType } from '@dooboostore/core/types';
   import { RawSet } from '@dooboostore/dom-render/rawsets/RawSet";
   import { Router } from '@dooboostore/dom-render/routers/Router";
+  import { EventManager } from '@dooboostore/dom-render/events/EventManager";
   export type DomRenderRunConfig<T = any> = Omit<DomRenderConfig<T>, 'router' | 'uuid' | 'eventManager' | 'messenger' | 'root' | 'rootElement'> & {
-      routerType?: 'path' | 'hash' | ((obj: T, window: Window) => Router) | Router;
+      routerType?: 'path' | 'hash' | ((obj: T, targetConfig: DomRenderConfig) => Router) | Router;
   };
   export type CreateComponentParam = {
       type: ConstructorType<any> | any;
@@ -21,18 +22,23 @@ declare module "@dooboostore/dom-render/DomRender" {
       target?: Element | null;
       config?: DomRenderRunConfig | DomRenderConfig;
   };
+  export type ExecuteConfig = {
+      firstUrl?: string;
+  };
   export declare class DomRender<T extends object = any> {
       private _config;
       private _target;
       private _rootObject;
-      constructor(parameter: DomRenderRunParameter<T>, executeConfig?: {
-          autoGo?: string;
-      });
+      private _router;
+      private _eventManager;
+      constructor(parameter: DomRenderRunParameter<T>, executeConfig?: ExecuteConfig);
       get rootObject(): T;
       get config(): DomRenderConfig;
+      get router(): Router;
+      get eventManager(): EventManager;
       get target(): Element | null | undefined;
       static run<T extends object>(data: DomRenderRunParameter<T>): T;
-      static runSet<T extends object>({ rootObject, target, config }: DomRenderRunParameter<T>): {
+      static runSet<T extends object>({ rootObject, target, config }: DomRenderRunParameter<T>, executeConfig?: ExecuteConfig): {
           rootObject: T;
           target?: Element | null;
           config: DomRenderConfig;
@@ -99,6 +105,7 @@ declare module "@dooboostore/dom-render/components/ComponentBase" {
   import { OnDrThisBind } from '@dooboostore/dom-render/components/lifecycle/dr-this/OnDrThisBind";
   import type { Render } from '@dooboostore/dom-render/components/rawsets/Render";
   import { DomRenderConfig } from '@dooboostore/dom-render/components/configs/DomRenderConfig";
+  import { OnRawSetRendered, OnRawSetRenderedOtherData } from "@dooboostore/dom-render/components/lifecycle/OnRawSetRendered";
   export declare const ATTRIBUTE_METADATA_KEY: unique symbol;
   export declare const QUERY_METADATA_KEY: unique symbol;
   export declare const EVENT_METADATA_KEY: unique symbol;
@@ -115,6 +122,7 @@ declare module "@dooboostore/dom-render/components/ComponentBase" {
       convert?: (e: Element) => any;
       onDestroy?: (componentInstance: any, element: Element) => void;
       refreshTime?: number;
+      refreshRawSetRendered?: boolean;
   }
   export interface EventMetadata {
       query: string;
@@ -122,6 +130,7 @@ declare module "@dooboostore/dom-render/components/ComponentBase" {
       methodName: string | symbol;
       onDestroy?: (componentInstance: any, element: Element) => void;
       refreshTime?: number;
+      refreshRawSetRendered?: boolean;
   }
   export declare function attribute(nameOrOptions?: string | {
       name?: string;
@@ -132,12 +141,14 @@ declare module "@dooboostore/dom-render/components/ComponentBase" {
       convert?: (e: Element) => any;
       onDestroy?: (componentInstance: any, element: Element) => void;
       refreshIntervalTime?: number;
+      refreshRawSetRendered?: boolean;
   }): (target: object, propertyKey: string | symbol, descriptor?: PropertyDescriptor) => void;
   export declare function event(options: {
       query: string;
       name: string;
       onDestroy?: (componentInstance: any, element: Element) => void;
       refreshTime?: number;
+      refreshRawSetRendered?: boolean;
   }): MethodDecorator;
   export type ComponentBaseConfig = {
       onlyParentType?: ConstructorType<any>[] | ConstructorType<any>;
@@ -147,7 +158,7 @@ declare module "@dooboostore/dom-render/components/ComponentBase" {
       instance: any;
       data: OnCreateRenderDataParams;
   };
-  export declare class ComponentBase<T = any, C extends ComponentBaseConfig = ComponentBaseConfig> implements OnChangeAttrRender, OnCreateRenderData, OnCreatedThisChild, OnDrThisBind, OnDrThisUnBind, OnInitRender, OnDestroyRender {
+  export declare class ComponentBase<T = any, C extends ComponentBaseConfig = ComponentBaseConfig> implements OnChangeAttrRender, OnCreateRenderData, OnCreatedThisChild, OnDrThisBind, OnDrThisUnBind, OnInitRender, OnDestroyRender, OnRawSetRendered {
       private _config?;
       private _rawSet?;
       private _children;
@@ -176,6 +187,7 @@ declare module "@dooboostore/dom-render/components/ComponentBase" {
       private _setupRefreshTimer;
       private _clearRefreshTimer;
       private _clearAllRefreshTimers;
+      onRawSetRendered(rawSet: RawSet, otherData: OnRawSetRenderedOtherData): Promise<void>;
       /**
        * Manually refresh all query and event decorators
        * Useful when DOM elements are dynamically added/removed and you want to update bindings
@@ -224,6 +236,14 @@ declare module "@dooboostore/dom-render/components/ComponentBase" {
 declare module "@dooboostore/dom-render/components/ComponentRouterBase" {
   import { ChildrenSet, ComponentBase, ComponentBaseConfig } from '@dooboostore/dom-render/components/ComponentBase";
   import { ComponentSet } from '@dooboostore/dom-render/components/ComponentSet";
+  export interface OnCreatedOutlet {
+      onCreatedOutlet(child: any): void;
+  }
+  export declare const isOnCreatedOutlet: (obj: any) => obj is OnCreatedOutlet;
+  export interface OnCreatedOutletDebounce {
+      onCreatedOutletDebounce(child: any): void;
+  }
+  export declare const isOnCreatedOutletDebounce: (obj: any) => obj is OnCreatedOutletDebounce;
   export type ComponentRouterBaseConfig = ComponentBaseConfig & {
       sameRouteNoApply?: boolean;
   };
@@ -601,7 +621,7 @@ declare module "@dooboostore/dom-render/components" {
       detailsBody: (config?: import("../DomRender").DomRenderRunConfig) => import("../configs").TargetElement;
       detailsForm: (config?: import("../DomRender").DomRenderRunConfig) => import("../configs").TargetElement;
       details: (config?: import("../DomRender").DomRenderRunConfig) => import("../configs").TargetElement;
-      choose: (config?: import("../DomRender").DomRenderRunConfig) => import("../configs").TargetElement;
+      timer: (config?: import("../DomRender").DomRenderRunConfig) => import("../configs").TargetElement;
       select: (config?: import("../configs").DomRenderConfig) => import("../configs").TargetElement;
       selectSummary: (config?: import("../DomRender").DomRenderRunConfig) => import("../configs").TargetElement;
       selectSummaryPlaceholder: (config?: import("../DomRender").DomRenderRunConfig) => import("../configs").TargetElement;
@@ -620,6 +640,7 @@ declare module "@dooboostore/dom-render/components" {
       checkBox: (config?: import("../DomRender").DomRenderRunConfig) => import("../configs").TargetElement;
       chooseWhen: (config?: import("../DomRender").DomRenderRunConfig) => import("../configs").TargetElement;
       chooseOtherWise: (config?: import("../DomRender").DomRenderRunConfig) => import("../configs").TargetElement;
+      choose: (config?: import("../DomRender").DomRenderRunConfig) => import("../configs").TargetElement;
       promiseDefault: (config?: import("../DomRender").DomRenderRunConfig) => import("../configs").TargetElement;
       promisePending: (config?: import("../DomRender").DomRenderRunConfig) => import("../configs").TargetElement;
       promiseFulfilled: (config?: import("../DomRender").DomRenderRunConfig) => import("../configs").TargetElement;
@@ -831,13 +852,14 @@ declare module "@dooboostore/dom-render/components/router/Route" {
 }
 
 declare module "@dooboostore/dom-render/components/router/RouterOutlet" {
-  import { ComponentBase } from '@dooboostore/dom-render/components/router/ComponentBase";
+  import { ChildrenSet, ComponentBase } from '@dooboostore/dom-render/components/router/ComponentBase";
   import { DomRenderRunConfig } from '@dooboostore/dom-render/components/DomRender";
   import { RawSet } from '@dooboostore/dom-render/components/rawsets/RawSet";
   import { OtherData } from '@dooboostore/dom-render/components/lifecycle/OnChangeAttrRender";
   import { OnInitRender } from '@dooboostore/dom-render/components/lifecycle/OnInitRender";
   import { ComponentSet } from '@dooboostore/dom-render/components/components/ComponentSet";
   import { OnDestroyRenderParams } from '@dooboostore/dom-render/components/lifecycle/OnDestroyRender";
+  import { OnCreateRenderDataParams } from 'src/lifecycle';
   export declare namespace RouterOutlet {
       const selector = "dr-router-outlet";
       type Attribute = {
@@ -845,6 +867,7 @@ declare module "@dooboostore/dom-render/components/router/RouterOutlet" {
           if: boolean | null;
           createArguments: any[];
           onCreated?: (value: any) => void;
+          onCreatedDebounce?: (value: any) => void;
           onDestroyRender?: () => void;
       };
       class RouterOutlet extends ComponentBase<Attribute> implements OnInitRender {
@@ -855,6 +878,8 @@ declare module "@dooboostore/dom-render/components/router/RouterOutlet" {
           onInitRender(param: any, rawSet: RawSet): void;
           onDestroyRender(data: OnDestroyRenderParams): void;
           onChangeAttrRender(name: string, value: any, other: OtherData): void;
+          onCreatedThisChild(child: any, data: OnCreateRenderDataParams): void;
+          onCreatedThisChildDebounce(childrenSet: ChildrenSet[]): void;
           created(component: any): void;
       }
   }
@@ -882,6 +907,7 @@ declare module "@dooboostore/dom-render/components/select/Select" {
   import { OnDestroyRender } from '@dooboostore/dom-render/components/lifecycle/OnDestroyRender";
   import { OnCreateRender } from '@dooboostore/dom-render/components/lifecycle/OnCreateRender";
   import { DomRenderConfig } from '@dooboostore/dom-render/components/configs/DomRenderConfig";
+  import { OnRawSetRenderedOtherData } from 'src/lifecycle';
   /** 사용법
    <dr-select class="card-select-container" changeSelected="${(data) => @this@.changeSelected(data)}$">  <!-- multiple attribute optional-->
    <dr-select-summary class="card-select-summary-container">
@@ -960,7 +986,6 @@ declare module "@dooboostore/dom-render/components/select/Select" {
           private options;
           private disabled;
           element?: HTMLElement;
-          constructor();
           setDisabled(disabled: boolean): void;
           setOptions(options?: Option[]): void;
           onInitRender(param: any, rawSet: RawSet): void;
@@ -973,7 +998,7 @@ declare module "@dooboostore/dom-render/components/select/Select" {
           classAttr: string | null;
           float: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right' | null;
           constructor();
-          onCreatedThisChildDebounce(childrenSet: ChildrenSet[]): void;
+          onRawSetRendered(rawSet: RawSet, otherData: OnRawSetRenderedOtherData): Promise<void>;
           changeOptionState(option?: Option): void;
       }
       export type SelectAttribute = {
@@ -1083,11 +1108,13 @@ declare module "@dooboostore/dom-render/components/timer/Timer" {
   export declare namespace Timer {
       const selector = "dr-timer";
       type Attribute = {
-          timeSecond?: string;
+          value?: string;
+          interval?: number;
+          onCreated?: (timer: Timer) => void;
       };
       class Timer extends ComponentBase<Attribute> {
           private interval?;
-          private timeSecond?;
+          private value?;
           onInitRender(param: any, rawSet: RawSet): void;
           isRunning(): boolean;
           start(): void;
@@ -1097,7 +1124,7 @@ declare module "@dooboostore/dom-render/components/timer/Timer" {
       }
   }
   declare const _default: {
-      choose: (config?: DomRenderRunConfig) => import("../../configs").TargetElement;
+      timer: (config?: DomRenderRunConfig) => import("../../configs").TargetElement;
   };
   export default _default;
   //# sourceMappingURL=Timer.d.ts.map
@@ -1425,6 +1452,19 @@ declare module "@dooboostore/dom-render/lifecycle/OnProxyDomRender" {
   //# sourceMappingURL=OnProxyDomRender.d.ts.map
 }
 
+declare module "@dooboostore/dom-render/lifecycle/OnRawSetRendered" {
+  import { RawSet, RenderResult } from '@dooboostore/dom-render/lifecycle/rawsets/RawSet";
+  export type OnRawSetRenderedOtherData = {
+      path?: string;
+      renderResult?: RenderResult;
+  };
+  export interface OnRawSetRendered {
+      onRawSetRendered(rawSet: RawSet, otherData: OnRawSetRenderedOtherData): Promise<void>;
+  }
+  export declare const isOnRawSetRendered: (obj: any) => obj is OnRawSetRendered;
+  //# sourceMappingURL=OnRawSetRendered.d.ts.map
+}
+
 declare module "@dooboostore/dom-render/lifecycle/dr-this/OnDrThisBind" {
   export interface OnDrThisBind {
       onDrThisBind(): void;
@@ -1459,6 +1499,7 @@ declare module "@dooboostore/dom-render/lifecycle" {
   export * from '@dooboostore/dom-render/OnDestroyRender";
   export * from '@dooboostore/dom-render/OnInitRender";
   export * from '@dooboostore/dom-render/OnProxyDomRender";
+  export * from '@dooboostore/dom-render/OnRawSetRendered";
   export * from '@dooboostore/dom-render/dr-this";
   //# sourceMappingURL=index.d.ts.map
 }
@@ -1944,6 +1985,7 @@ declare module "@dooboostore/dom-render/rawsets/ElementInitCallBack" {
 declare module "@dooboostore/dom-render/rawsets/RawSet" {
   import type { DomRenderConfig } from '@dooboostore/dom-render/rawsets/configs/DomRenderConfig";
   import { ComponentSet } from '@dooboostore/dom-render/rawsets/components/ComponentSet";
+  import { OperatorExecuter } from '@dooboostore/dom-render/rawsets/operators/OperatorExecuter";
   import { TargetElement } from '@dooboostore/dom-render/rawsets/configs/TargetElement";
   import { TargetAttr } from '@dooboostore/dom-render/rawsets/configs/TargetAttr";
   import { DestroyOptionType } from '@dooboostore/dom-render/rawsets/DestroyOptionType";
@@ -1951,13 +1993,18 @@ declare module "@dooboostore/dom-render/rawsets/RawSet" {
   import { RawSetType } from '@dooboostore/dom-render/rawsets/RawSetType";
   import { Render } from '@dooboostore/dom-render/rawsets/Render";
   import { OnDestroyRenderParams } from '@dooboostore/dom-render/rawsets/lifecycle/OnDestroyRender";
+  export type RenderResult = {
+      raws: RawSet[];
+      executedOperators: OperatorExecuter[];
+  };
   export declare class RawSet {
       uuid: string;
       type: RawSetType;
       point: {
-          start: (Comment | Text | HTMLMetaElement);
+          start: Comment | Text | HTMLMetaElement;
           node: Node;
           end: Comment | Text | HTMLMetaElement;
+          innerHTML?: string;
           parent?: Node | null;
           parentRawSet?: RawSet;
           childrenRawSets?: RawSet[];
@@ -2021,9 +2068,10 @@ declare module "@dooboostore/dom-render/rawsets/RawSet" {
       static readonly DR_TAGS: any[];
       static readonly DR_ATTRIBUTES: readonly ["dr", "dr-appender", "dr-if", "dr-for-of", "dr-this-property", "dr-for", "dr-this", "dr-form", "dr-pre", "dr-inner-html", "dr-inner-text", "dr-repeat", "dr-detect", "dr-strip"];
       constructor(uuid: string, type: RawSetType, point: {
-          start: (Comment | Text | HTMLMetaElement);
+          start: Comment | Text | HTMLMetaElement;
           node: Node;
           end: Comment | Text | HTMLMetaElement;
+          innerHTML?: string;
           parent?: Node | null;
           parentRawSet?: RawSet;
           childrenRawSets?: RawSet[];
@@ -2036,7 +2084,7 @@ declare module "@dooboostore/dom-render/rawsets/RawSet" {
       });
       get isConnected(): boolean;
       getUsingTriggerVariables(config?: DomRenderConfig): Set<string>;
-      render(obj: any, config: DomRenderConfig): Promise<RawSet[]>;
+      render(obj: any, config: DomRenderConfig): Promise<RenderResult>;
       private static generateRuleSelector;
       static generateStyleTransform(styleBody: string | string[], componentKey: string, styleTagWrap?: boolean): string;
       applyEvent(obj: any, fragment?: DocumentFragment, config?: DomRenderConfig): void;
@@ -2105,7 +2153,7 @@ declare module "@dooboostore/dom-render/rawsets/RawSet" {
           noStrip?: boolean;
           objFactory: (element: Element, obj: any, rawSet: RawSet, counstructorParam: any[]) => any;
           template?: string;
-          styles?: string | (string[]);
+          styles?: string | string[];
       }): TargetElement;
       static isExpression(data: string | null): boolean;
       static expressionGroups(data: string | null): any[];
@@ -2160,6 +2208,7 @@ declare module "@dooboostore/dom-render/rawsets/Render" {
       router?: Router;
       range?: any;
       value?: any;
+      innerHTML?: string;
       currentThis?: any;
       currentThisPath?: any;
       nearThisPath?: string;
@@ -2261,7 +2310,7 @@ declare module "@dooboostore/dom-render/routers/Router" {
   export type RouterConfig<T = any> = {
       rootObject?: T;
       window: Window;
-      disableAttach?: boolean;
+      firstUrl?: string;
   };
   export type ChangeStateResult = {
       data?: any;
@@ -2273,15 +2322,14 @@ declare module "@dooboostore/dom-render/routers/Router" {
   export declare abstract class Router<T = any> {
       private behaviorSubject;
       private _config;
+      constructor(config: RouterConfig<any>);
       get observable(): Observable<RouteData>;
       get searchParamObject(): {
           [key: string]: string | string[];
       };
       get config(): RouterConfig<T>;
-      constructor(config: RouterConfig<any>);
       getSearchFirstParamsObject<T = any>(defaultValue?: T): T & import("@dooboostore/core/types").FieldType<T, string>;
       getHashSearchFirstParamsObject<T = any>(): import("@dooboostore/core/types").FieldType<T, string>;
-      attach(): Promise<void>;
       testRegexp(regexp?: string): boolean;
       test(urlExpression?: string): boolean;
       getRouteData(config?: {