@dooboostore/dom-render 1.0.109 → 1.0.111

package/src/components/input/Input.ts

@@ -11,7 +11,6 @@ import { EventUtils } from '@dooboostore/core-web/event/EventUtils';
 import { debounceTime } from '@dooboostore/core/message/operators/debounceTime';
 import { distinctUntilChanged } from '@dooboostore/core/message/operators/distinctUntilChanged';
 
-
 export namespace Input {
   export const selector = `dr-input`;
   export type Attribute = {
@@ -21,13 +20,10 @@ export namespace Input {
     class?: string;
     debounceTime?: number;
     distinct?: boolean;
-    input?: (value: string, element: Element) => void
-
-  }
+    input?: (value: string, element: Element) => void;
+  };
 
-  export class Base extends ComponentBase<any> {
-
-  }
+  export class Base extends ComponentBase<any> {}
 
   // @Component({
   //   selector: `${selector}`,
@@ -39,16 +35,16 @@ export namespace Input {
     private inputSubscription?: Subscription;
     private resetSubscripton?: Subscription;
 
-    onCreateRender(...param: any[]): void {
-    }
+    onCreateRender(...param: any[]): void {}
 
-
-    onInitRender(param: any, rawSet: RawSet) {
-      super.onInitRender(param, rawSet);
+    async onInitRender(param: any, rawSet: RawSet) {
+      await super.onInitRender(param, rawSet);
       // console.log('dr-input, rawSet', rawSet)
       const inputElement = this.element;
       const debounceTimeAttribute = this.getAttribute('debounceTime');
-      const debounceTimeValue = ValidUtils.isNotNullUndefined(debounceTimeAttribute) ? Number(debounceTimeAttribute) : 0;
+      const debounceTimeValue = ValidUtils.isNotNullUndefined(debounceTimeAttribute)
+        ? Number(debounceTimeAttribute)
+        : 0;
       const distinct = ValidUtils.isNotNullUndefined(this.getAttribute('distinct'));
 
       if (inputElement) {
@@ -87,11 +83,9 @@ export namespace Input {
               // console.log('rrrr?')
               this.getAttribute('input')?.(it, inputElement);
             });
-          })
+          });
         }
       }
-
-
     }
 
     onChangeAttrRender(name: string, value: any, other: OtherData) {
@@ -108,7 +102,6 @@ export namespace Input {
       this.resetSubscripton?.unsubscribe();
       this.inputSubscription?.unsubscribe();
     }
-
   }
 }
 
@@ -116,10 +109,11 @@ export default {
   input: (config?: DomRenderRunConfig) => {
     return RawSet.createComponentTargetElement({
       name: `${Input.selector}`,
-      template: '<Input type="${@this@.getAttribute(\'type\')}$" class="${@this@.getAttribute(\'class\')}$" id="${@this@.getAttribute(\'id\')}$" name="${@this@.getAttribute(\'name\')}$" dr-on-init="@this@.element=$element" >#innerHTML#',
+      template:
+        '<Input type="${@this@.getAttribute(\'type\')}$" class="${@this@.getAttribute(\'class\')}$" id="${@this@.getAttribute(\'id\')}$" name="${@this@.getAttribute(\'name\')}$" dr-on-init="@this@.element=$element" >#innerHTML#',
       objFactory: (e, o, r2, counstructorParam) => {
-        return DomRender.run({rootObject: new Input.Input(...counstructorParam), config: config});
+        return DomRender.run({ rootObject: new Input.Input(...counstructorParam), config: config });
       }
-    })
-  },
-}
+    });
+  }
+};

package/src/components/promise/PromiseSwitch.ts

@@ -3,19 +3,22 @@ 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 { Promises } from '@dooboostore/core/promise/Promises';
 import { OnCreateRenderDataParams } from '../../lifecycle/OnCreateRenderData';
 
 export namespace PromiseSwitch {
   export const selector = 'dr-promise-switch';
-  export type ChangeParams<T> = { status: 'pending' } | { status: 'finally' } | { status: 'fulfilled', data: T } | { status: 'rejected', data: any };
+  export type ChangeParams<T> =
+    | { status: 'pending' }
+    | { status: 'finally' }
+    | { status: 'fulfilled'; data: T }
+    | { status: 'rejected'; data: any };
   export type Attribute = {
     // trigger?: boolean;
     data: Promise<any> | (() => Promise<any>);
     change?: <T>(data: ChangeParams<T>) => void;
-  }
+  };
 
   class ChildBase<T = any> extends ComponentBase<T> {
     public hidden = true;
@@ -25,8 +28,7 @@ export namespace PromiseSwitch {
   //   template: '<div dr-if="!@this@.hidden" dr-strip="true">#innerHTML#</div>',
   //   selector: `${selector}.Default`
   // })
-  export class Default extends ChildBase {
-  }
+  export class Default extends ChildBase {}
 
   // @Component({
   //   template: '<div dr-if="!@this@.hidden" dr-strip="true">#innerHTML#</div>',
@@ -72,7 +74,6 @@ export namespace PromiseSwitch {
     }
   }
 
-
   /*
       <dr-promise-switch data="${@this@.pickWorldPromise}$">
         ${@nearThis@.promiseState.status}$
@@ -98,7 +99,7 @@ export namespace PromiseSwitch {
     //
     // }
     private promiseState?: Promises.Result.PromiseState<any, unknown>;
-    private status?: Promises.Result.PromiseState<any, unknown>["status"];
+    private state?: Promises.Result.PromiseState<any, unknown>['status'];
 
     onCreatedThisChild(child: any, data: OnCreateRenderDataParams) {
       super.onCreatedThisChild(child, data);
@@ -110,36 +111,36 @@ export namespace PromiseSwitch {
       const pendings = this.getChildren(Pending);
       const fulfilleds = this.getChildren(Fulfilled);
       const rejecteds = this.getChildren(Rejected);
-      const full = [...fulfilleds, ...rejecteds, ...pendings, ...defaults]
+      const full = [...fulfilleds, ...rejecteds, ...pendings, ...defaults];
       // console.log('----!!!!!!-------', this.promiseState, full)
       if (this.promiseState === undefined) {
-        this.status = undefined;
-        full.filter(it => !it.hidden).forEach(it => it.hidden = true)
-        defaults.filter(it => it.hidden).forEach(it => it.hidden = false);
-        pendings.filter(it => it.getAttribute('defaultView') && it.hidden).forEach(it => it.hidden = false);
+        this.state = undefined;
+        full.filter(it => !it.hidden).forEach(it => (it.hidden = true));
+        defaults.filter(it => it.hidden).forEach(it => (it.hidden = false));
+        pendings.filter(it => it.getAttribute('defaultView') && it.hidden).forEach(it => (it.hidden = false));
       } else if (this.promiseState.status === 'pending') {
-        this.status = 'pending';
-        full.filter(it => !it.hidden).forEach(it => it.hidden = true)
-        pendings.filter(it => it.hidden).forEach(it => it.hidden = false);
+        this.state = 'pending';
+        full.filter(it => !it.hidden).forEach(it => (it.hidden = true));
+        pendings.filter(it => it.hidden).forEach(it => (it.hidden = false));
       } else if (this.promiseState.status === 'fulfilled') {
-        this.status = 'fulfilled';
+        this.state = 'fulfilled';
         const value = this.promiseState.value;
         // console.log('-----------fulfilled promises', value);
-        full.filter(it => !it.hidden).forEach(it => it.hidden = true)
+        full.filter(it => !it.hidden).forEach(it => (it.hidden = true));
         fulfilleds.forEach(it => {
-          it.setData(value)
-        })
-        fulfilleds.filter(it => it.hidden).forEach(it => it.hidden = false);
+          it.setData(value);
+        });
+        fulfilleds.filter(it => it.hidden).forEach(it => (it.hidden = false));
       } else if (this.promiseState.status === 'rejected') {
-        this.status = 'rejected';
+        this.state = 'rejected';
         const value = this.promiseState.reason;
-        full.filter(it => !it.hidden).forEach(it => it.hidden = true)
+        full.filter(it => !it.hidden).forEach(it => (it.hidden = true));
         rejecteds.forEach(it => {
-          it.setData(value)
-        })
-        rejecteds.filter(it => it.hidden).forEach(it => it.hidden = false);
+          it.setData(value);
+        });
+        rejecteds.filter(it => it.hidden).forEach(it => (it.hidden = false));
       }
-      return this.status;
+      return this.state;
       // console.log('----!!!!!!-end------', this.promiseState, full.map(it=>it.hidden))
     }
 
@@ -149,31 +150,33 @@ export namespace PromiseSwitch {
       if (this.equalsAttributeName(name, 'data') && value) {
         // this.childStateChange();
         this.promiseState = undefined;
-        this.status = undefined;
-        this.promiseState = Promises.Result.wrap(typeof value === 'function' ? value() : value as Promise<any>);
-        this.getAttribute('change')?.({status: 'pending'});
+        this.state = undefined;
+        this.promiseState = Promises.Result.wrap(typeof value === 'function' ? value() : (value as Promise<any>));
+        this.getAttribute('change')?.({ status: 'pending' });
         this.childStateChange();
         // console.log('----?', this.promiseState)
-        this.promiseState.then(data => {
-          // console.log('------------then', data);
-          this.childStateChange();
-          this.getAttribute('change')?.({status: 'fulfilled', data: data});
-          return data;
-        }).catch((e) => {
-          // console.log('catch', e)
-          this.childStateChange();
-          this.getAttribute('change')?.({status: 'rejected', data: e});
-          throw e;
-        }).finally(() => {
-          // console.log('-------------finally--------rrrrrrrrrrr', this.promiseState)
-          // this.childStateChange();
-          this.getAttribute('change')?.({status: 'finally'});
-        })
+        this.promiseState
+          .then(data => {
+            // console.log('------------then', data);
+            this.childStateChange();
+            this.getAttribute('change')?.({ status: 'fulfilled', data: data });
+            return data;
+          })
+          .catch(e => {
+            // console.log('catch', e)
+            this.childStateChange();
+            this.getAttribute('change')?.({ status: 'rejected', data: e });
+            throw e;
+          })
+          .finally(() => {
+            // console.log('-------------finally--------rrrrrrrrrrr', this.promiseState)
+            // this.childStateChange();
+            this.getAttribute('change')?.({ status: 'finally' });
+          });
         // await this.promiseState;
 
-
         // console.log('---------------------rrrrrrrrrrr', this.promiseState)
-      } else if(this.equalsAttributeName(name, 'data') && ValidUtils.isNullOrUndefined(value)) {
+      } else if (this.equalsAttributeName(name, 'data') && ValidUtils.isNullOrUndefined(value)) {
         this.promiseState = undefined;
         this.childStateChange();
       }
@@ -181,52 +184,50 @@ export namespace PromiseSwitch {
   }
 }
 
-
 export default {
   promiseDefault: (config?: DomRenderRunConfig) => {
     return RawSet.createComponentTargetElement({
       name: `${PromiseSwitch.selector}-default`,
       template: '<div dr-if="!@this@.hidden" dr-option-strip="true">#innerHTML#</div>',
-      objFactory: (e,o,r2, counstructorParam) => {
-        return DomRender.run({rootObject: new PromiseSwitch.Default(...counstructorParam), config: config});
+      objFactory: (e, o, r2, counstructorParam) => {
+        return DomRender.run({ rootObject: new PromiseSwitch.Default(...counstructorParam), config: config });
       }
-    })
+    });
   },
   promisePending: (config?: DomRenderRunConfig) => {
     return RawSet.createComponentTargetElement({
       name: `${PromiseSwitch.selector}-pending`,
       template: '<div dr-if="!@this@.hidden" dr-option-strip="true">#innerHTML#</div>',
-      objFactory: (e,o,r2, counstructorParam) => {
-        return DomRender.run({rootObject: new PromiseSwitch.Pending(...counstructorParam), config: config});
+      objFactory: (e, o, r2, counstructorParam) => {
+        return DomRender.run({ rootObject: new PromiseSwitch.Pending(...counstructorParam), config: config });
       }
-    })
+    });
   },
   promiseFulfilled: (config?: DomRenderRunConfig) => {
     return RawSet.createComponentTargetElement({
       name: `${PromiseSwitch.selector}-fulfilled`,
       template: '<div dr-if="!@this@.hidden" dr-option-strip="true">#innerHTML#</div>',
-      objFactory: (e,o,r2, counstructorParam) => {
-        return DomRender.run({rootObject: new PromiseSwitch.Fulfilled(...counstructorParam), config: config});
+      objFactory: (e, o, r2, counstructorParam) => {
+        return DomRender.run({ rootObject: new PromiseSwitch.Fulfilled(...counstructorParam), config: config });
       }
-    })
+    });
   },
   promiseRejected: (config?: DomRenderRunConfig) => {
     return RawSet.createComponentTargetElement({
       name: `${PromiseSwitch.selector}-rejected`,
       template: '<div dr-if="!@this@.hidden" dr-option-strip="true">#innerHTML#</div>',
-      objFactory: (e,o,r2, counstructorParam) => {
-        return DomRender.run({rootObject: new PromiseSwitch.Rejected(...counstructorParam), config: config});
+      objFactory: (e, o, r2, counstructorParam) => {
+        return DomRender.run({ rootObject: new PromiseSwitch.Rejected(...counstructorParam), config: config });
       }
-    })
+    });
   },
   promiseSwitch: (config?: DomRenderRunConfig) => {
     return RawSet.createComponentTargetElement({
       name: `${PromiseSwitch.selector}`,
       template: '#innerHTML#',
-      objFactory: (e,o,r2, counstructorParam) => {
-        return DomRender.run({rootObject: new PromiseSwitch.PromiseSwitch(...counstructorParam), config: config});
+      objFactory: (e, o, r2, counstructorParam) => {
+        return DomRender.run({ rootObject: new PromiseSwitch.PromiseSwitch(...counstructorParam), config: config });
       }
-    })
-  },
-
-}
+    });
+  }
+};

package/src/components/radio/Radio.ts

@@ -2,24 +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 Radio {
   export const selector = 'System:Radio';
   export type Attribute = {
     class?: string;
-  }
+  };
   export type LabelAttribute = {
     class?: string;
     name?: string;
     value?: string;
     checked?: boolean;
-    on_change_checked?: (checked: boolean, element: HTMLInputElement) => void
-  }
+    on_change_checked?: (checked: boolean, element: HTMLInputElement) => void;
+  };
 
   class RadioBase extends ComponentBase<Attribute> {
     public hidden = true;
@@ -29,7 +25,7 @@ export namespace Radio {
     public name = 'Checked';
 
     constructor() {
-      super({onlyParentType: Radio});
+      super({ onlyParentType: Radio });
     }
   }
 
@@ -37,7 +33,7 @@ export namespace Radio {
     public name = 'unChecked';
 
     constructor() {
-      super({onlyParentType: Radio});
+      super({ onlyParentType: Radio });
     }
   }
 
@@ -45,10 +41,11 @@ export namespace Radio {
     private checked = false;
     private inputElement?: HTMLInputElement;
 
-    change(checked?: boolean) { checked = checked ?? this.checked;
+    change(checked?: boolean) {
+      checked = checked ?? this.checked;
       this.checked = checked;
       this.setChildrenHidden(checked);
-      console.log('radio checked!!!!!!!', checked, this.checked, this.inputElement?.checked)
+      console.log('radio checked!!!!!!!', checked, this.checked, this.inputElement?.checked);
       if (this.getAttribute('on_change_checked')) {
         this.getAttribute('on_change_checked')?.(checked, this.inputElement!);
       }
@@ -76,39 +73,37 @@ export namespace Radio {
       super.onChangeAttrRender(name, val, other);
       if (this.inputElement && this.getAttribute('checked') !== this.checked) {
         this.inputElement.checked = !!this.getAttribute('checked');
-        console.log('----changeAttribute', this.getAttribute('checked'))
+        console.log('----changeAttribute', this.getAttribute('checked'));
         this.change(!!this.getAttribute('checked'));
       }
     }
-
   }
 }
 
-
-
 export default {
   radioChecked: (config?: DomRenderRunConfig) => {
     return RawSet.createComponentTargetElement({
       name: `${Radio.selector}-checked`,
       template: '<div dr-if="!@this@.hidden" dr-option-strip="true" >#innerHTML#</div>',
-      objFactory: (e,o,r2, counstructorParam) => {
-        return DomRender.run({rootObject: new Radio.Checked(), config: config});
+      objFactory: (e, o, r2, counstructorParam) => {
+        return DomRender.run({ rootObject: new Radio.Checked(), config: config });
       }
-    })
+    });
   },
   radioUnChecked: (config?: DomRenderRunConfig) => {
     return RawSet.createComponentTargetElement({
       name: `${Radio.selector}-unchecked`,
       template: '<div dr-if="!@this@.hidden" dr-option-strip="true" >#innerHTML#</div>',
-      objFactory: (e,o,r2, counstructorParam) => {
-        return DomRender.run({rootObject: new Radio.UnChecked(), config: config});
+      objFactory: (e, o, r2, counstructorParam) => {
+        return DomRender.run({ rootObject: new Radio.UnChecked(), config: config });
       }
-    })
+    });
   },
   radio: (config?: DomRenderRunConfig) => {
     return RawSet.createComponentTargetElement({
       name: `${Radio.selector}`,
-      template: '<label class="${@this@.getAttribute(\'class\')}$">\n' +
+      template:
+        '<label class="${@this@.getAttribute(\'class\')}$">\n' +
         '  <input\n' +
         '    name="${@this@.getAttribute(\'name\')}$"\n' +
         '    checked="${@this@.getAttribute(\'checked\')}$"\n' +
@@ -118,12 +113,12 @@ export default {
         '    type="radio"\n' +
         '\n' +
         '  />\n' +
-        '  ${@this@.getAttribute(\'checked\')}$\n' +
+        "  ${@this@.getAttribute('checked')}$\n" +
         '  #innerHTML#\n' +
         '</label>',
-      objFactory: (e,o,r2, counstructorParam) => {
-        return DomRender.run({rootObject: new Radio.Radio(...counstructorParam), config: config});
+      objFactory: (e, o, r2, counstructorParam) => {
+        return DomRender.run({ rootObject: new Radio.Radio(...counstructorParam), config: config });
       }
-    })
-  },
-}
+    });
+  }
+};

package/src/components/router/Route.ts

@@ -1,5 +1,4 @@
 import { attribute, ComponentBase } from '../ComponentBase';
-import { OtherData } from '../../lifecycle/OnChangeAttrRender';
 import { DomRender } from '../../DomRender';
 import { OnInitRender } from '../../lifecycle/OnInitRender';
 import { RawSet } from '../../rawsets/RawSet';
@@ -7,17 +6,16 @@ import type { DomRenderConfig } from '../../configs/DomRenderConfig';
 import { DomRenderNoProxy } from '../../decorators/DomRenderNoProxy';
 import { OnDestroyRenderParams } from '../../lifecycle/OnDestroyRender';
 import { Subscription } from '@dooboostore/core/message/Subscription';
-import { If } from '../if/If';
 
 export namespace Route {
   export const selector = 'dr-route';
   export type Attribute<D> = {
     value?: null | string;
-  }
+  };
 
   abstract class CheckerBase<D> extends ComponentBase<Attribute<D>> implements OnInitRender {
     protected sw: boolean = false;
-    @attribute({name: 'value'})
+    @attribute({ name: 'value' })
     value?: string;
     @DomRenderNoProxy
     private inputDomRenderConfig?: DomRenderConfig;
@@ -28,8 +26,8 @@ export namespace Route {
       this.inputDomRenderConfig = domRenderConfig;
     }
 
-    onInitRender(param: any, rawSet: RawSet) {
-      super.onInitRender(param, rawSet);
+    async onInitRender(param: any, rawSet: RawSet) {
+      await super.onInitRender(param, rawSet);
       this.routerSubscription = this.inputDomRenderConfig?.router?.observable.subscribe(it => {
         if (this.value && this.inputDomRenderConfig) {
           this.sw = this.check(this.inputDomRenderConfig);
@@ -55,7 +53,6 @@ export namespace Route {
     abstract check(config?: DomRenderConfig): boolean;
   }
 
-
   export class Match<D> extends CheckerBase<D> {
     check(config?: DomRenderConfig): boolean {
       return !!config?.router?.test(this.value);
@@ -75,17 +72,17 @@ export default {
       name: `${Route.selector}-match`,
       template: '<div dr-if="@this@.sw" dr-option-strip="true">#innerHTML#</div>',
       objFactory: (e, o, r2, counstructorParam) => {
-        return DomRender.run({rootObject: new Route.Match(config), config: config});
+        return DomRender.run({ rootObject: new Route.Match(config), config: config });
       }
-    })
+    });
   },
   regexp: (config?: DomRenderConfig) => {
     return RawSet.createComponentTargetElement({
       name: `${Route.selector}-regexp`,
       template: '<div dr-if="@this@.sw" dr-option-strip="true">#innerHTML#</div>',
       objFactory: (e, o, r2, counstructorParam) => {
-        return DomRender.run({rootObject: new Route.Regexp(config), config: config});
+        return DomRender.run({ rootObject: new Route.Regexp(config), config: config });
       }
-    })
-  },
-}
+    });
+  }
+};

package/src/components/router/RouterOutlet.ts

@@ -1,12 +1,13 @@
 import { ChildrenSet, ComponentBase } from '../ComponentBase';
-import { DomRender, DomRenderRunConfig } from '../../DomRender';
+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 'src/lifecycle';
+import { OnCreateRenderDataParams } from '../../lifecycle';
+
 export namespace RouterOutlet {
   export const selector = 'dr-router-outlet';
   export type Attribute = {
@@ -28,8 +29,8 @@ export namespace RouterOutlet {
       // console.log('sssssssssss');
     }
 
-    onInitRender(param: any, rawSet: RawSet) {
-      super.onInitRender(param, rawSet);
+    async onInitRender(param: any, rawSet: RawSet) {
+      await super.onInitRender(param, rawSet);
       const c = this.getParentThis();
       const userValue = this.getAttribute('value');
       if (userValue) {
@@ -57,7 +58,7 @@ export namespace RouterOutlet {
       }
     }
 
-    onCreatedThisChild(child:any, data:OnCreateRenderDataParams){
+    onCreatedThisChild(child: any, data: OnCreateRenderDataParams) {
       super.onCreatedThisChild(child, data);
       // console.log('outlet--oncreatedThisChild',child);
     }

package/src/components/select/Select.ts

@@ -1,7 +1,7 @@
 import { attribute, ChildrenSet, ComponentBase } from '../ComponentBase';
 import { DomRender, DomRenderRunConfig } from '../../DomRender';
 import { RawSet } from '../../rawsets/RawSet';
-import { OnCreateRenderData, OnCreateRenderDataParams } from '../../lifecycle/OnCreateRenderData';
+import { OnCreateRenderData } from '../../lifecycle/OnCreateRenderData';
 import { OnInitRender } from '../../lifecycle/OnInitRender';
 import { OnDestroyRender } from '../../lifecycle/OnDestroyRender';
 import { EventUtils } from '@dooboostore/core-web/event/EventUtils';
@@ -11,7 +11,7 @@ import { DomRenderNoProxy } from '../../decorators/DomRenderNoProxy';
 import { OnCreateRender } from '../../lifecycle/OnCreateRender';
 import { DomRenderConfig } from '../../configs/DomRenderConfig';
 import { WindowUtils } from '@dooboostore/core-web/window/WindowUtils';
-import { OnRawSetRenderedOtherData } from 'src/lifecycle';
+import { OnRawSetRenderedOtherData } from '../../lifecycle';
 
 /** 사용법
  <dr-select class="card-select-container" changeSelected="${(data) => @this@.changeSelected(data)}$">  <!-- multiple attribute optional-->
@@ -122,8 +122,8 @@ export namespace Select {
       super({onlyParentType: SelectBody});
     }
 
-    onInitRender(param: any, rawSet: RawSet) {
-      super.onInitRender(param, rawSet);
+    async onInitRender(param: any, rawSet: RawSet) {
+      await super.onInitRender(param, rawSet);
       // console.log('-----', this.value, this.selected)
       // this.getElement()?.addEventListener('click', (e) => {
       //   e.stopPropagation();
@@ -251,8 +251,8 @@ export namespace Select {
       }
     }
 
-    onInitRender(param: any, rawSet: RawSet) {
-      super.onInitRender(param, rawSet);
+    async onInitRender(param: any, rawSet: RawSet) {
+      await super.onInitRender(param, rawSet);
       // this.getElement()?.addEventListener('click', (e) => {
       //   e.stopPropagation();
       //   this.getParentThis<Select>().toggle();
@@ -380,8 +380,8 @@ export namespace Select {
 
     }
 
-    onInitRender(param: any, rawSet: RawSet) {
-      super.onInitRender(param, rawSet);
+    async onInitRender(param: any, rawSet: RawSet) {
+      await super.onInitRender(param, rawSet);
       // console.log('select onInitRender', this.multiple)
 
       if (ValidUtils.isBrowser() && this.rawSet?.dataSet.config.window) {

package/src/components/this/This.ts

@@ -5,6 +5,7 @@ import { OtherData } from '../../lifecycle/OnChangeAttrRender';
 import { OnInitRender } from '../../lifecycle/OnInitRender';
 import { ComponentSet } from '../../components/ComponentSet';
 import { OnDestroyRenderParams } from '../../lifecycle/OnDestroyRender';
+
 export namespace This {
   export const selector = 'dr-this';
   export type Attribute = {
@@ -13,15 +14,15 @@ export namespace This {
     createArguments: any[];
     onCreated?: (value: any) => void;
     onDestroyRender?: () => void;
-  }
+  };
 
   export class This extends ComponentBase<Attribute> implements OnInitRender {
-    private value?: ComponentSet
+    private value?: ComponentSet;
     private if?: boolean | null = null;
-    private createArguments?: any[]
+    private createArguments?: any[];
 
-    onInitRender(param: any, rawSet: RawSet) {
-      super.onInitRender(param, rawSet);
+    async onInitRender(param: any, rawSet: RawSet) {
+      await super.onInitRender(param, rawSet);
     }
 
     onDestroyRender(data: OnDestroyRenderParams) {
@@ -41,8 +42,8 @@ export namespace This {
       }
     }
 
-    created(component: any){
-      component??=this.value?.obj;
+    created(component: any) {
+      component ??= this.value?.obj;
       this.getAttribute('onCreated')?.(component);
     }
   }
@@ -52,11 +53,11 @@ export default {
   this: (config?: DomRenderRunConfig) => {
     return RawSet.createComponentTargetElement({
       name: This.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>',
+      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>',
       objFactory: (e, o, r2, counstructorParam) => {
-        return DomRender.run({rootObject: new This.This(...counstructorParam), config: config});
+        return DomRender.run({ rootObject: new This.This(...counstructorParam), config: config });
       }
-    })
+    });
   }
-}
-
+};