@dooboostore/dom-render 1.0.108 → 1.0.110

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
@@ -238,11 +245,11 @@ export class ComponentBase<T = any, C extends ComponentBaseConfig = ComponentBas
           const paramTypes = ReflectUtils.getParameterTypes(this, propertyKey);
           if (paramTypes && paramTypes.length > 0 && paramTypes[0] === Array) {
               // For array methods, pass only new elements
-              method.call(this, processedNewElements, processedElements);
+              method.call(this, processedNewElements, {all: processedElements});
           } else {
               // For single element methods, pass first new element
               if (processedNewElements.length > 0) {
-                  method.call(this, processedNewElements[0]);
+                  method.call(this, processedNewElements[0], {all: processedElements, newAll: processedNewElements});
               }
           }
       }
@@ -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
@@ -556,7 +578,7 @@ export class ComponentBase<T = any, C extends ComponentBaseConfig = ComponentBas
   }
 
   getFirstChild<T>(type: ConstructorType<T>): T | undefined {
-    return this._children.find(it => it instanceof type)?.instance;
+    return this._children.find(it => it.instance instanceof type)?.instance;
   }
 
   getParentThis<P>():P {
@@ -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)
@@ -641,7 +663,7 @@ export class ComponentBase<T = any, C extends ComponentBaseConfig = ComponentBas
     }
   }
 
-  onInitRender(param: any, rawSet: RawSet) {
+  async onInitRender(param: any, rawSet: RawSet) {
     this.createChildrenDebounceSubscription = this.childrenSetSubject.pipe(debounceTime(this.componentConfig?.createChildrenDebounce??0)).subscribe(it => {
       this.onCreatedThisChildDebounce(it);
     });

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/appender/Appender.ts

@@ -33,13 +33,8 @@ export namespace Appender {
     // test() {
     //   console.log('t', this.getAttribute('appender'))
     // }
-    onInitRender(param: any, rawSet: RawSet) {
-      // console.log('--onInitRender onInitRender')
-      super.onInitRender(param, rawSet);
 
 
-    }
-
     // push(...data:D[]) {
     //   console.log('push/////', data);
     //   this.appender.push(...data);

package/src/components/checkbox/CheckBox.ts

@@ -2,22 +2,20 @@ import { 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 { OnCreateRenderDataParams } from '../../lifecycle/OnCreateRenderData';
 
 export namespace CheckBox {
   export const selector = 'dr-checkbox';
   export type Attribute = {
     class?: string;
-  }
+  };
   export type ChangeOption = { type: 'initialize' | 'event' | 'attributeChange' };
   export type WrapAttribute = {
     class?: string;
     name?: string;
     checked?: boolean;
-    change?: (checked: boolean, option: ChangeOption) => void
-  }
+    change?: (checked: boolean, option: ChangeOption) => void;
+  };
 
   class CheckBoxBase extends ComponentBase<Attribute> {
     public hidden = true;
@@ -32,7 +30,7 @@ export namespace CheckBox {
     public name = 'checked';
 
     constructor() {
-      super({onlyParentType: CheckBox});
+      super({ onlyParentType: CheckBox });
     }
   }
 
@@ -45,7 +43,7 @@ export namespace CheckBox {
     public name = 'unChecked';
 
     constructor() {
-      super({onlyParentType: CheckBox});
+      super({ onlyParentType: CheckBox });
     }
   }
 
@@ -58,7 +56,8 @@ export namespace CheckBox {
     private checked = false;
     private inputElement?: HTMLInputElement;
 
-    change(option: ChangeOption, checked?: boolean) { checked = checked ?? this.checked;
+    change(option: ChangeOption, checked?: boolean) {
+      checked = checked ?? this.checked;
       this.checked = checked;
       this.setChildrenHidden(checked);
       this.getAttribute('change')?.(checked, option);
@@ -82,7 +81,7 @@ export namespace CheckBox {
       // console.log('---cr', element)
       this.inputElement = element;
       this.inputElement.checked = !!this.getAttribute('checked');
-      this.change({type: 'initialize'}, !!this.getAttribute('checked'));
+      this.change({ type: 'initialize' }, !!this.getAttribute('checked'));
     }
 
     onChangeAttrRender(name: string, val: any, other: OtherData) {
@@ -90,38 +89,36 @@ export namespace CheckBox {
       // console.log('Checkbox ChangeAttr------', name, val, this.inputElement)
       if (this.inputElement && this.getAttribute('checked') !== this.checked) {
         this.inputElement.checked = !!this.getAttribute('checked');
-        this.change({type: 'attributeChange'}, !!this.getAttribute('checked'));
+        this.change({ type: 'attributeChange' }, !!this.getAttribute('checked'));
       }
     }
-
   }
 }
 
-
-
 export default {
   checkBoxChecked: (config?: DomRenderRunConfig) => {
     return RawSet.createComponentTargetElement({
       name: `${CheckBox.selector}-checked`,
       template: '<div dr-if="!@this@.hidden" dr-option-strip="true">#innerHTML#</div>',
-      objFactory: (e,o,r2, counstructorParam) => {
-        return DomRender.run({rootObject: new CheckBox.Checked(), config: config});
+      objFactory: (e, o, r2, counstructorParam) => {
+        return DomRender.run({ rootObject: new CheckBox.Checked(), config: config });
       }
-    })
+    });
   },
   checkBoxUnchecked: (config?: DomRenderRunConfig) => {
     return RawSet.createComponentTargetElement({
       name: `${CheckBox.selector}-unchecked`,
       template: '<div dr-if="!@this@.hidden" dr-option-strip="true" >#innerHTML#</div>',
-      objFactory: (e,o,r2, counstructorParam) => {
-        return DomRender.run({rootObject: new CheckBox.UnChecked(), config: config});
+      objFactory: (e, o, r2, counstructorParam) => {
+        return DomRender.run({ rootObject: new CheckBox.UnChecked(), config: config });
       }
-    })
+    });
   },
   checkBox: (config?: DomRenderRunConfig) => {
     return RawSet.createComponentTargetElement({
       name: `${CheckBox.selector}`,
-      template: '<label class="${@this@.getAttribute(\'class\')}$">\n' +
+      template:
+        '<label class="${@this@.getAttribute(\'class\')}$">\n' +
         '  <input\n' +
         '    name="${@this@.getAttribute(\'name\')}$"\n' +
         '    dr-on-init="@this@.onInitInputElement($element)"\n' +
@@ -129,9 +126,9 @@ export default {
         '    type="checkbox" hidden="hidden"/>\n' +
         '  #innerHTML#\n' +
         '</label>',
-      objFactory: (e,o,r2, counstructorParam) => {
-        return DomRender.run({rootObject: new CheckBox.CheckBox(...counstructorParam), config: config});
+      objFactory: (e, o, r2, counstructorParam) => {
+        return DomRender.run({ rootObject: new CheckBox.CheckBox(...counstructorParam), config: config });
       }
-    })
-  },
-}
+    });
+  }
+};

package/src/components/choose/Choose.ts

@@ -2,18 +2,16 @@ import { 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 { OnCreateRenderDataParams } from '../../lifecycle/OnCreateRenderData';
 
 export namespace Choose {
   export const selector = 'dr-choose';
   export type Attribute<D> = {
     data: D;
-  }
+  };
   export type WhenAttribute<D> = {
     test: (data?: D | null) => boolean;
-  }
+  };
 
   class ChildOtherWiseBase<A> extends ComponentBase<A> {
     public hidden = true;
@@ -25,18 +23,17 @@ export namespace Choose {
 
   export class When<D> extends ChildBase<D> {
     constructor() {
-      super({onlyParentType: Choose<D>});
+      super({ onlyParentType: Choose<D> });
     }
   }
 
   export class OtherWise<D> extends ChildBase<D> {
     constructor() {
-      super({onlyParentType: Choose<D>});
+      super({ onlyParentType: Choose<D> });
     }
   }
 
   export class Choose<D> extends ComponentBase<Attribute<D>> {
-
     private choose?: When<D> | OtherWise<D>;
 
     onCreatedThisChild(child: any, data: OnCreateRenderDataParams) {
@@ -48,9 +45,10 @@ export namespace Choose {
       super.onChangeAttrRender(name, value, other);
       if (this.equalsAttributeName(name, 'data')) {
         this.choose = undefined;
-        const children = this.getChildren([When, OtherWise]).sort((a, b) => (a instanceof OtherWise ? 1 : 0) - (b instanceof OtherWise ? 1 : 0));
+        const children = this.getChildren([When, OtherWise]).sort(
+          (a, b) => (a instanceof OtherWise ? 1 : 0) - (b instanceof OtherWise ? 1 : 0)
+        );
         children.forEach(it => this.setChange(it as any));
-
       }
     }
 
@@ -58,7 +56,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,43 +69,44 @@ 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');
     }
   }
 }
 
-
 export default {
   chooseWhen: (config?: DomRenderRunConfig) => {
     return RawSet.createComponentTargetElement({
       name: `${Choose.selector}-when`,
       template: '<div dr-if="!@this@.hidden" dr-option-strip="true" >#innerHTML#</div>',
       objFactory: (e, o, r2, counstructorParam) => {
-        return DomRender.run({rootObject: new Choose.When(), config: config});
+        return DomRender.run({ rootObject: new Choose.When(), config: config });
       }
-    })
+    });
   },
   chooseOtherWise: (config?: DomRenderRunConfig) => {
     return RawSet.createComponentTargetElement({
       name: `${Choose.selector}-other-wise`,
       template: '<div dr-if="!@this@.hidden" dr-option-strip="true" >#innerHTML#</div>',
       objFactory: (e, o, r2, counstructorParam) => {
-        return DomRender.run({rootObject: new Choose.OtherWise(), config: config});
+        return DomRender.run({ rootObject: new Choose.OtherWise(), config: config });
       }
-    })
+    });
   },
   choose: (config?: DomRenderRunConfig) => {
     return RawSet.createComponentTargetElement({
       name: `${Choose.selector}`,
       template: '#innerHTML#',
       objFactory: (e, o, r2, counstructorParam) => {
-        return DomRender.run({rootObject: new Choose.Choose(...counstructorParam), config: config});
+        return DomRender.run({ rootObject: new Choose.Choose(...counstructorParam), config: config });
       }
-    })
-  },
-}
+    });
+  }
+};