@dooboostore/dom-render 1.0.111 → 1.0.113

package/src/events/EventManager.ts

@@ -1,10 +1,9 @@
 import { DomRenderConfig } from '../configs/DomRenderConfig';
-import { ScriptUtils } from '@dooboostore/core-web/script/ScriptUtils';
-import { ElementUtils } from '@dooboostore/core-web/element/ElementUtils';
-import { Range } from '../iterators/Range';
-import { DomRenderFinalProxy } from '../types/Types';
+import { ScriptUtils } from '@dooboostore/core-web';
+import { ElementUtils } from '@dooboostore/core-web';
+import { Range } from '@dooboostore/core';
 import { getDomRenderConfig } from '../DomRenderProxy';
-import { ObjectUtils } from '@dooboostore/core/object/ObjectUtils';
+import { ObjectUtils } from '@dooboostore/core';
 
 type HandlerInfo = {
   element: HTMLElement;
@@ -16,30 +15,27 @@ type HandlerInfo = {
 export type NormalAttrDataType = {
   originalAttrValue: string;
   isStringTemplate: boolean;
-  variablePaths: {origin: string, inner: string}[];
-}
+  variablePaths: { origin: string; inner: string }[];
+};
+
 export class EventManager {
   public static readonly attrPrefix = 'dr-';
-  public readonly eventNames = [
-    'click', 'mousedown', 'mouseup', 'dblclick', 'mouseover', 'mouseout', 'mousemove', 'mouseenter', 'mouseleave', 'contextmenu',
-    'keyup', 'keydown', 'keypress', 'toggle',
-    'change', 'input', 'submit', 'resize', 'focus', 'blur',
-    'close', 'cancel'
-  ];
+  public readonly eventNames = ['click', 'mousedown', 'mouseup', 'dblclick', 'mouseover', 'mouseout', 'mousemove', 'mouseenter', 'mouseleave', 'contextmenu', 'keyup', 'keydown', 'keypress', 'toggle', 'change', 'input', 'submit', 'resize', 'focus', 'blur', 'close', 'cancel', 'scroll'];
 
   private readonly delegatableEventMap: { [key: string]: string } = {
     mouseleave: 'mouseout',
     mouseenter: 'mouseover',
     focus: 'focusin',
-    blur: 'focusout',
+    blur: 'focusout'
   };
-  private readonly directAttachEvents = new Set(['close']);
+  private readonly directAttachEvents = new Set(['close', 'scroll']);
 
   public static ownerVariablePathAttrName = EventManager.attrPrefix + 'owner-variable-path';
 
   public static readonly eventParam = EventManager.attrPrefix + 'event';
   public static readonly onInitAttrName = EventManager.attrPrefix + 'on-init';
   public static readonly valueAttrName = EventManager.attrPrefix + 'value';
+  public static readonly srcAttrName = EventManager.attrPrefix + 'src';
   public static readonly checkedAttrName = EventManager.attrPrefix + 'checked';
   public static readonly selectedAttrName = EventManager.attrPrefix + 'selected';
   public static readonly readonlyAttrName = EventManager.attrPrefix + 'readonly';
@@ -50,12 +46,12 @@ export class EventManager {
 
   // link는 쓰지 않는걸 추천한다 라이프 사이클 꼬인다 다른 프레임워크에서도 양방향은 지양 한다
   public static linkAttrs = [
-    {name: EventManager.attrPrefix + 'value-link', property: 'value', event: 'input'},
-    {name: EventManager.attrPrefix + 'hidden-link', property: 'value', event: 'input'},
-    {name: EventManager.attrPrefix + 'required-link', property: 'value', event: 'input'},
-    {name: EventManager.attrPrefix + 'checked-link', property: 'checked', event: 'change'},
-    {name: EventManager.attrPrefix + 'open-link', property: 'open', event: 'toggle'},
-  ]
+    { name: EventManager.attrPrefix + 'value-link', property: 'value', event: 'input' },
+    { name: EventManager.attrPrefix + 'hidden-link', property: 'value', event: 'input' },
+    { name: EventManager.attrPrefix + 'required-link', property: 'value', event: 'input' },
+    { name: EventManager.attrPrefix + 'checked-link', property: 'checked', event: 'change' },
+    { name: EventManager.attrPrefix + 'open-link', property: 'open', event: 'toggle' }
+  ];
   // @ts-ignore  합성이벤트(Synthetic) 처리하면서 의미가 없어졌다
   public static readonly linkTargetMapAttrName = EventManager.attrPrefix + 'link-variables';
 
@@ -93,27 +89,10 @@ export class EventManager {
 
   public static readonly WINDOW_EVENT_POPSTATE = 'popstate';
   public static readonly WINDOW_EVENT_RESIZE = 'resize';
-  public static readonly WINDOW_EVENTS = [EventManager.WINDOW_EVENT_POPSTATE, EventManager.WINDOW_EVENT_RESIZE];
-  public static readonly noDetectAttr = [EventManager.normalAttrMapAttrName]
-  public static readonly attrNames = [
-    EventManager.valueAttrName,
-    EventManager.checkedAttrName,
-    EventManager.selectedAttrName,
-    EventManager.readonlyAttrName,
-    EventManager.disabledAttrName,
-    EventManager.hiddenAttrName,
-    EventManager.requiredAttrName,
-    EventManager.openAttrName,
-    EventManager.attrAttrName,
-    EventManager.normalAttrMapAttrName,
-    EventManager.styleAttrName,
-    EventManager.classAttrName,
-    EventManager.attrPrefix + 'window-event-' + EventManager.WINDOW_EVENT_POPSTATE,
-    EventManager.attrPrefix + 'window-event-' + EventManager.WINDOW_EVENT_RESIZE,
-    EventManager.onInitAttrName,
-    ...EventManager.linkAttrs.map(it => it.name),
-    this.eventParam
-  ];
+  public static readonly WINDOW_EVENT_SCROLL = 'scroll';
+  public static readonly WINDOW_EVENTS = [EventManager.WINDOW_EVENT_POPSTATE, EventManager.WINDOW_EVENT_RESIZE, EventManager.WINDOW_EVENT_SCROLL];
+  public static readonly noDetectAttr = [EventManager.normalAttrMapAttrName];
+  public static readonly attrNames = [EventManager.valueAttrName, EventManager.srcAttrName, EventManager.checkedAttrName, EventManager.selectedAttrName, EventManager.readonlyAttrName, EventManager.disabledAttrName, EventManager.hiddenAttrName, EventManager.requiredAttrName, EventManager.openAttrName, EventManager.attrAttrName, EventManager.normalAttrMapAttrName, EventManager.styleAttrName, EventManager.classAttrName, EventManager.attrPrefix + 'window-event-' + EventManager.WINDOW_EVENT_POPSTATE, EventManager.attrPrefix + 'window-event-' + EventManager.WINDOW_EVENT_RESIZE, EventManager.attrPrefix + 'window-event-' + EventManager.WINDOW_EVENT_SCROLL, EventManager.onInitAttrName, ...EventManager.linkAttrs.map(it => it.name), this.eventParam];
   readonly bindScript = `
         const ${EventManager.VALUE_VARNAME} = this.__render.value;
         const ${EventManager.SCRIPTS_VARNAME} = this.__render.scripts;
@@ -134,7 +113,7 @@ export class EventManager {
 
     if (typeof window !== 'undefined') {
       EventManager.WINDOW_EVENTS.forEach(eventName => {
-        window?.addEventListener(eventName, (event) => {
+        window?.addEventListener(eventName, event => {
           const targetAttr = `dr-window-event-${eventName}`;
           document.querySelectorAll(`[${targetAttr}]`).forEach(it => {
             const script = it.getAttribute(targetAttr);
@@ -148,19 +127,19 @@ export class EventManager {
       });
 
       const rootElement = this.window.document;
-        const listeningEvents = new Set<string>();
-        this.eventNames.forEach(eventName => {
-          if (this.directAttachEvents.has(eventName)) {
-            return;
-          }
-          const delegatedEventName = this.delegatableEventMap[eventName] || eventName;
+      const listeningEvents = new Set<string>();
+      this.eventNames.forEach(eventName => {
+        if (this.directAttachEvents.has(eventName)) {
+          return;
+        }
+        const delegatedEventName = this.delegatableEventMap[eventName] || eventName;
 
-          if (listeningEvents.has(delegatedEventName)) {
-            return;
-          }
-          listeningEvents.add(delegatedEventName);
-          rootElement.addEventListener(delegatedEventName, this.handleEvent.bind(this), true);
-        });
+        if (listeningEvents.has(delegatedEventName)) {
+          return;
+        }
+        listeningEvents.add(delegatedEventName);
+        rootElement.addEventListener(delegatedEventName, this.handleEvent.bind(this), true);
+      });
     }
   }
 
@@ -183,13 +162,11 @@ export class EventManager {
 
   private collectHandlers(event: Event): HandlerInfo[] {
     const handlers: HandlerInfo[] = [];
-    const root =  this.window.document;
+    const root = this.window.document;
     if (!root) return handlers;
 
     const initialTarget = event.target as Node;
-    let currentTarget: HTMLElement | null = (initialTarget.nodeType === 1)
-      ? (initialTarget as HTMLElement)
-      : initialTarget.parentElement;
+    let currentTarget: HTMLElement | null = initialTarget.nodeType === 1 ? (initialTarget as HTMLElement) : initialTarget.parentElement;
     const collectedElements = new Set<HTMLElement>();
 
     const eventMap: { [key: string]: string } = {
@@ -232,7 +209,13 @@ export class EventManager {
       const eventParamAttr = EventManager.eventParam;
       if (currentTarget.hasAttribute(eventParamAttr)) {
         const bindEvents = currentTarget.getAttribute(`${eventParamAttr}:bind`);
-        if (bindEvents && bindEvents.split(',').map(s => s.trim()).includes(mappedEventName)) {
+        if (
+          bindEvents &&
+          bindEvents
+            .split(',')
+            .map(s => s.trim())
+            .includes(mappedEventName)
+        ) {
           handlers.push({
             element: currentTarget,
             attr: eventParamAttr,
@@ -256,7 +239,7 @@ export class EventManager {
 
   private findComponentInstance(element: HTMLElement | null): any {
     let current = element;
-    const root =  this.window.document;
+    const root = this.window.document;
     while (current) {
       if ((current as any).obj) {
         return (current as any).obj;
@@ -287,7 +270,7 @@ export class EventManager {
   }
 
   private executeHandler(event: Event, handler: HandlerInfo, componentInstance: any) {
-    const {element, type, attr} = handler;
+    const { element, type, attr } = handler;
     const config = getDomRenderConfig(componentInstance);
 
     switch (type) {
@@ -312,7 +295,7 @@ export class EventManager {
         let value = (element as any)[handler.property];
 
         if (mapScript) {
-          const context = this.createExecutionContext(event, element, bindObj, config, {value});
+          const context = this.createExecutionContext(event, element, bindObj, config, { value });
           value = ScriptUtils.evaluate(`return ${mapScript}`, context);
         }
 
@@ -367,24 +350,28 @@ export class EventManager {
         const attributes = ElementUtils.getAttributeToObject(element);
         const params = {} as any;
         const prefix = attr + ':';
-        Object.entries(attributes).filter(([k, v]) => k.startsWith(prefix)).forEach(([k, v]) => {
-          params[k.slice(prefix.length)] = v;
-        });
+        Object.entries(attributes)
+          .filter(([k, v]) => k.startsWith(prefix))
+          .forEach(([k, v]) => {
+            params[k.slice(prefix.length)] = v;
+          });
 
-        const paramContext = this.createExecutionContext(event, element, componentInstance, config, {params});
+        const paramContext = this.createExecutionContext(event, element, componentInstance, config, { params });
         ScriptUtils.evaluate(`${this.getBindScript(config)} ${paramScript}`, paramContext);
         break;
     }
   }
 
   public findAttrElements(fragment: DocumentFragment | Element, config?: DomRenderConfig): Set<Element> {
+    // const t0 = performance.now();
     const elements = new Set<Element>();
     const addAttributes = config?.applyEvents?.map(it => it.attrName) ?? [];
-    addAttributes.concat([...EventManager.attrNames]).forEach(attrName => {
-      fragment?.querySelectorAll(`[${attrName}]`).forEach(it => {
-        elements.add(it);
-      });
-    });
+    const attrs = addAttributes.concat([...EventManager.attrNames]).filter(Boolean);
+    if (attrs.length) {
+      const selector = attrs.map(a => `[${a}]`).join(',');
+      fragment?.querySelectorAll(selector).forEach(it => elements.add(it));
+    }
+    // console.log('findAttrElements time', performance.now() - t0);
     return elements;
   }
 
@@ -395,142 +382,200 @@ export class EventManager {
       }
     });
 
+    // let t0 = performance.now();
     this.procAttr<HTMLInputElement>(childNodes, EventManager.valueAttrName, (it, attribute) => {
       const script = attribute;
       if (script) {
-        const data = ScriptUtils.evaluateReturn(script, obj);
+        const data = ObjectUtils.Script.evaluateReturn(script, obj);
         if (it.value !== data) {
           it.value = data;
         }
       }
     });
+    this.procAttr<HTMLInputElement>(childNodes, EventManager.srcAttrName, (it, attribute) => {
+      const script = attribute;
+      if (script) {
+        const data = ObjectUtils.Script.evaluateReturn(script, obj);
+        if (it.src !== data) {
+          it.src = data;
+        }
+      }
+    });
+    // console.log('applyEvent value time', performance.now() - t0);
+    // t0 = performance.now();
     this.procAttr<HTMLInputElement>(childNodes, EventManager.checkedAttrName, (it, attribute) => {
       const script = attribute;
       if (script) {
-        const data = ScriptUtils.evaluateReturn(script, obj);
-        if (it.checked!== data) {
+        const data = ObjectUtils.Script.evaluateReturn(script, obj);
+        if (it.checked !== data) {
           it.checked = data;
         }
       }
     });
+    // console.log('applyEvent value time', performance.now() - t0);
+    // t0 = performance.now();
     this.procAttr<HTMLOptionElement>(childNodes, EventManager.selectedAttrName, (it, attribute) => {
       const script = attribute;
       if (script) {
-        const data = ScriptUtils.evaluateReturn(script, obj);
-        if (it.selected!== data) {
+        const data = ObjectUtils.Script.evaluateReturn(script, obj);
+        if (data) {
+          it.setAttribute('selected', 'selected');
+        } else {
+          it.removeAttribute('selected');
+        }
+        if (it.selected !== data) {
           it.selected = data;
         }
       }
     });
+    // console.log('applyEvent value time', performance.now() - t0);
+    // t0 = performance.now();
     this.procAttr<HTMLInputElement>(childNodes, EventManager.readonlyAttrName, (it, attribute) => {
       const script = attribute;
       if (script) {
-        const data = ScriptUtils.evaluateReturn(script, obj);
-        if (it.readOnly!== data) {
+        const data = ObjectUtils.Script.evaluateReturn(script, obj);
+        if (data) {
+          it.setAttribute('readonly', 'readonly');
+        } else {
+          it.removeAttribute('readonly');
+        }
+        if (it.readOnly !== data) {
           it.readOnly = data;
         }
       }
     });
+    // console.log('applyEvent value time', performance.now() - t0);
+    // t0 = performance.now();
     this.procAttr<HTMLInputElement>(childNodes, EventManager.disabledAttrName, (it, attribute) => {
       const script = attribute;
       if (script) {
-        const data = ScriptUtils.evaluateReturn(script, obj);
-        if (it.disabled!== data) {
+        const data = ObjectUtils.Script.evaluateReturn(script, obj);
+        if (data) {
+          it.setAttribute('disabled', 'disabled');
+        } else {
+          it.removeAttribute('disabled');
+        }
+        if (it.disabled !== data) {
           it.disabled = data;
         }
       }
     });
+    // console.log('applyEvent value time', performance.now() - t0);
+    // t0 = performance.now();
     this.procAttr<HTMLElement>(childNodes, EventManager.hiddenAttrName, (it, attribute) => {
       const script = attribute;
       if (script) {
-        const data = ScriptUtils.evaluateReturn(script, obj);
-        if (it.hidden!== data) {
+        const data = ObjectUtils.Script.evaluateReturn(script, obj);
+        if (data) {
+          it.setAttribute('hidden', 'hidden');
+        } else {
+          it.removeAttribute('hidden');
+        }
+        if (it.hidden !== data) {
           it.hidden = data;
         }
       }
     });
+    // console.log('applyEvent value time', performance.now() - t0);
+    // t0 = performance.now();
     this.procAttr<HTMLInputElement>(childNodes, EventManager.requiredAttrName, (it, attribute) => {
       const script = attribute;
       if (script) {
-        const data = ScriptUtils.evaluateReturn(script, obj);
-        if (it.required!== data) {
+        const data = ObjectUtils.Script.evaluateReturn(script, obj);
+        if (data) {
+          it.setAttribute('required', 'required');
+        } else {
+          it.removeAttribute('required');
+        }
+        if (it.required !== data) {
           it.required = data;
         }
       }
     });
+    // console.log('applyEvent value time', performance.now() - t0);
+    // t0 = performance.now();
     this.procAttr<HTMLDialogElement>(childNodes, EventManager.openAttrName, (it, attribute) => {
       const script = attribute;
       if (script) {
-        const data = ScriptUtils.evaluateReturn(script, obj);
-        if (it.open!== data) {
+        const data = ObjectUtils.Script.evaluateReturn(script, obj);
+        if (data) {
+          it.setAttribute('open', 'open');
+        } else {
+          it.removeAttribute('open');
+        }
+        if (it.open !== data) {
           it.open = data;
         }
       }
     });
-
+    // console.log('applyEvent value time', performance.now() - t0);
+    // t0 = performance.now();
     this.procAttr(childNodes, EventManager.normalAttrMapAttrName, (it, attribute) => {
       const map = new Map<string, NormalAttrDataType>(JSON.parse(attribute));
       map.forEach((v, k) => {
-
         const variablePaths = v.variablePaths;
-        let targetScript = v.originalAttrValue;//typeof v.originalAttrValue === 'string' ? JSON.parse(v.originalAttrValue) : v.originalAttrValue;
-          let script: string;
-          if (v.isStringTemplate) {
-              variablePaths.forEach(it => {
-                  let r = ObjectUtils.Path.toOptionalChainPath(it.inner);
-                  targetScript = targetScript.replaceAll(it.origin, `\${${r}}`);
-              })
-                script = '`' + targetScript + '`';
-          } else {
-              variablePaths.forEach(it => {
-                  let r = ObjectUtils.Path.toOptionalChainPath(it.inner);
-                  targetScript = targetScript.replaceAll(it.origin, `${r}`);
-              })
-              script = targetScript;
-          }
-        const data = ObjectUtils.Script.evaluate(`const $element = this.element;  return ${script}`, Object.assign(obj, {
-          __render: Object.freeze({
-            element: it,
-            attribute: ElementUtils.getAttributeToObject(it)
+        let targetScript = v.originalAttrValue; //typeof v.originalAttrValue === 'string' ? JSON.parse(v.originalAttrValue) : v.originalAttrValue;
+        let script: string;
+        if (v.isStringTemplate) {
+          variablePaths.forEach(it => {
+            let r = ObjectUtils.Path.toOptionalChainPath(it.inner);
+            targetScript = targetScript.replaceAll(it.origin, `\${${r}}`);
+          });
+          script = '`' + targetScript + '`';
+        } else {
+          variablePaths.forEach(it => {
+            let r = ObjectUtils.Path.toOptionalChainPath(it.inner);
+            targetScript = targetScript.replaceAll(it.origin, `${r}`);
+          });
+          script = targetScript;
+        }
+        const data = ObjectUtils.Script.evaluate(
+          `const $element = this.element;  return ${script}`,
+          Object.assign(obj, {
+            __render: Object.freeze({
+              element: it,
+              attribute: ElementUtils.getAttributeToObject(it)
+            })
           })
-        }));
-          // console.log('!!!!!!!!!!!', k, data, script, variablePaths, v)
-        if (data === null) {
+        );
+        // console.log('!!!!!!!!!!!', k, data, script, variablePaths, v)
+        if (data === null || data === undefined) {
           it.removeAttribute(k);
         } else {
           it.setAttribute(k, data);
         }
       });
     });
+    // console.log('applyEvent value time', performance.now() - t0);
+    // t0 = performance.now();
 
     EventManager.WINDOW_EVENTS.forEach(it => {
       this.procAttr<HTMLInputElement>(childNodes, EventManager.attrPrefix + 'window-event-' + it, (it, attribute) => {
         (it as any).obj = obj;
       });
     });
-
+    // console.log('applyEvent value time', performance.now() - t0);
+    // t0 = performance.now();
     EventManager.linkAttrs.forEach(linkInfo => {
       this.procAttr<HTMLElement>(childNodes, linkInfo.name, (it, varName) => {
-
-        // console.log('ink??????????')
         if (varName) {
           const ownerVariablePathName = it.getAttribute(EventManager.ownerVariablePathAttrName);
           const mapScript = it.getAttribute(`${linkInfo.name}:map`);
           let bindObj = obj;
           if (ownerVariablePathName) {
-            bindObj = ScriptUtils.evaluateReturn(ownerVariablePathName, obj);
+            bindObj = ObjectUtils.Script.evaluateReturn(ownerVariablePathName, obj);
           }
           const getValue = this.getValue(obj, varName, bindObj);
           if (typeof getValue === 'function' && getValue) {
             let setValue = (it as any)[linkInfo.property];
             if (mapScript) {
-              setValue = ScriptUtils.evaluate(`${this.getBindScript(config)} return ${mapScript}`, Object.assign(bindObj, {__render: Object.freeze({element: it, target: bindObj, range: Range.range, value: setValue, scripts: EventManager.setBindProperty(config?.scripts, obj), ...config?.eventVariables})}));
+              setValue = ObjectUtils.Script.evaluate(`${this.getBindScript(config)} return ${mapScript}`, Object.assign(bindObj, { __render: Object.freeze({ element: it, target: bindObj, range: Range.range, value: setValue, scripts: EventManager.setBindProperty(config?.scripts, obj), ...config?.eventVariables }) }));
             }
             getValue(setValue);
           } else if (getValue) {
             let setValue = getValue;
             if (mapScript) {
-              setValue = ScriptUtils.evaluate(`${this.getBindScript(config)} return ${mapScript}`, Object.assign(bindObj, {__render: Object.freeze({element: it, target: bindObj, range: Range.range, value: setValue, scripts: EventManager.setBindProperty(config?.scripts, obj), ...config?.eventVariables})}));
+              setValue = ObjectUtils.Script.evaluate(`${this.getBindScript(config)} return ${mapScript}`, Object.assign(bindObj, { __render: Object.freeze({ element: it, target: bindObj, range: Range.range, value: setValue, scripts: EventManager.setBindProperty(config?.scripts, obj), ...config?.eventVariables }) }));
             }
             if (setValue === null) {
               it.removeAttribute(linkInfo.property);
@@ -543,7 +588,8 @@ export class EventManager {
         }
       });
     });
-
+    // console.log('applyEvent value time', performance.now() - t0);
+    // t0 = performance.now();
     this.directAttachEvents.forEach(eventName => {
       const attr = `${EventManager.attrPrefix}event-${eventName}`;
       this.procAttr<HTMLElement>(childNodes, attr, (element, script) => {
@@ -555,36 +601,43 @@ export class EventManager {
           const filterScript = element.getAttribute(`${attr}:filter`);
           let filter = true;
           if (filterScript) {
-            filter = ScriptUtils.evaluate<boolean>(`${this.getBindScript(config)} return ${filterScript}`, context) ?? false;
+            filter = ObjectUtils.Script.evaluate<boolean>(`${this.getBindScript(config)} return ${filterScript}`, context) ?? false;
           }
           if (filter) {
-            ScriptUtils.evaluate(`${this.getBindScript(config)} ${script}`, context);
+            ObjectUtils.Script.evaluate(`${this.getBindScript(config)} ${script}`, context);
           }
         };
         element.addEventListener(eventName, handler);
         // TODO: Add logic to remove this listener when the element is destroyed.
       });
     });
-
+    // console.log('applyEvent value time', performance.now() - t0);
+    // t0 = performance.now();
     this.procAttr<HTMLElement>(childNodes, EventManager.onInitAttrName, (it, attribute) => {
       let script = attribute;
       if (script) {
         script = 'return ' + script;
       }
       if (script) {
-        ScriptUtils.evaluate(`${this.getBindScript(config)}; ${script} `, Object.assign(obj, {
-          __render: Object.freeze({
-            element: it,
-            attribute: ElementUtils.getAttributeToObject(it),
-            ...config?.eventVariables
+        ObjectUtils.Script.evaluate(
+          `${this.getBindScript(config)}; ${script} `,
+          Object.assign(obj, {
+            __render: Object.freeze({
+              element: it,
+              attribute: ElementUtils.getAttributeToObject(it),
+              ...config?.eventVariables
+            })
           })
-        }));
+        );
       }
     });
-
+    // console.log('applyEvent value time', performance.now() - t0);
+    // t0 = performance.now();
     this.onRenderedEvent(obj, childNodes, config);
     this.changeVar(obj, childNodes, undefined, config);
-    const elements = Array.from(childNodes).filter(it => it.nodeType === 1).map(it => it as Element);
+    const elements = Array.from(childNodes)
+      .filter(it => it.nodeType === 1)
+      .map(it => it as Element);
     elements.forEach(it => {
       config?.applyEvents?.filter(ta => it.getAttribute(ta.attrName) !== null).forEach(ta => ta.callBack(it, it.getAttribute(ta.attrName)!, obj));
     });
@@ -600,18 +653,23 @@ export class EventManager {
         script = 'return ' + script;
       }
       if (script) {
-        ScriptUtils.evaluate(`${this.getBindScript(config)}; ${script} `, Object.assign(obj, {
-          __render: Object.freeze({
-            element: it,
-            attribute: ElementUtils.getAttributeToObject(it),
-            ...config?.eventVariables
+        ObjectUtils.Script.evaluate(
+          `${this.getBindScript(config)}; ${script} `,
+          Object.assign(obj, {
+            __render: Object.freeze({
+              element: it,
+              attribute: ElementUtils.getAttributeToObject(it),
+              ...config?.eventVariables
+            })
           })
-        }));
+        );
       }
     });
   }
 
   public changeVar(obj: any, elements: Set<Element> | Set<ChildNode>, varName?: string, config?: DomRenderConfig) {
+    // 아래 이부분을 적용해야될지 말아야될지....성능이슈가.. 그래서 우선 timeout으로 테스크큐로.. 우선..
+
     // console.log('changeVar', obj, elements, varName)
     this.procAttr(elements, EventManager.styleAttrName, (it: HTMLElement, attribute) => {
       let script = attribute;
@@ -619,33 +677,36 @@ export class EventManager {
         script = 'return ' + script;
       }
       if (EventManager.isUsingThisVar(script, varName) || varName === undefined) {
-        const data = ScriptUtils.evaluate(`const $element = this.__render.element;  ${script} `, Object.assign(obj, {
-          __render: Object.freeze({
-            element: it,
-            attribute: ElementUtils.getAttributeToObject(it)
+        const data = ObjectUtils.Script.evaluate(
+          `const $element = this.__render.element;  ${script} `,
+          Object.assign(obj, {
+            __render: Object.freeze({
+              element: it,
+              attribute: ElementUtils.getAttributeToObject(it)
+            })
           })
-        }));
+        );
         if (typeof data === 'string') {
-            data.split(';').forEach(sit => {
-                const [key, value] = sit.split(':').map(s => s.trim());
-                if (key && value) {
-                    (it.style as any)[key] = value;
-                }
-            })
+          data.split(';').forEach(sit => {
+            const [key, value] = sit.split(':').map(s => s.trim());
+            if (key && value) {
+              (it.style as any)[key] = value;
+            }
+          });
           // it.setAttribute('style', data);
         } else if (Array.isArray(data)) {
-            data.forEach(sit => {
-                const [key, value] = sit.split(':').map(s => s.trim());
-                if (key && value) {
-                    (it.style as any)[key] = value;
-                }
-            })
+          data.forEach(sit => {
+            const [key, value] = sit.split(':').map(s => s.trim());
+            if (key && value) {
+              (it.style as any)[key] = value;
+            }
+          });
 
           // it.setAttribute('style', data.join(';'));
-        } else {
+        } else if (data) {
           for (const [key, value] of Object.entries(data)) {
             // if (it instanceof HTMLElement) {
-              (it.style as any)[key] = value === null ? null :String(value);
+            (it.style as any)[key] = value === null ? null : String(value);
             // }
           }
         }
@@ -658,34 +719,101 @@ export class EventManager {
         script = 'return ' + script;
       }
       if (EventManager.isUsingThisVar(script, varName) || varName === undefined) {
-        const data = ScriptUtils.evaluate(`const $element = this.element;  ${script} `, Object.assign(obj, {
-          __render: Object.freeze({
-            element: it,
-            attribute: ElementUtils.getAttributeToObject(it)
+        const data = ObjectUtils.Script.evaluate(
+          `const $element = this.element;  ${script} `,
+          Object.assign(obj, {
+            __render: Object.freeze({
+              element: it,
+              attribute: ElementUtils.getAttributeToObject(it)
+            })
           })
-        }));
+        );
 
         // alert(1)
         if (typeof data === 'string') {
-            data.split(' ').forEach(cit => it.classList.add(cit.trim()));
+          data
+            .split(' ')
+            .map(it => it.trim())
+            .filter(it => it.length > 0)
+            .forEach(cit => it.classList.add(cit.trim()));
         } else if (Array.isArray(data)) {
-            data.forEach(cit => it.classList.add(cit.trim()));
-        } else {
+          data
+            .map(it => it.trim())
+            .filter(it => it.length > 0)
+            .forEach(cit => it.classList.add(cit.trim()));
+        } else if (data) {
           for (const [key, value] of Object.entries(data)) {
             if (it instanceof HTMLElement) {
-              if (value) {
-                it.classList.add(key.trim());
-              } else {
-                it.classList.remove(key.trim());
+              const v = key.trim();
+              if (value && v) {
+                it.classList.add(v);
+              } else if (v) {
+                it.classList.remove(v);
               }
             }
           }
         }
       }
     });
+
+    this.procAttr<HTMLInputElement>(elements, EventManager.valueAttrName, (it, attribute) => {
+      if (EventManager.isUsingThisVar(attribute, varName) || varName === undefined) {
+        const data = ObjectUtils.Script.evaluateReturn(attribute, obj);
+        if (it.value !== data) it.value = data;
+      }
+    });
+
+    this.procAttr<HTMLInputElement>(elements, EventManager.checkedAttrName, (it, attribute) => {
+      if (EventManager.isUsingThisVar(attribute, varName) || varName === undefined) {
+        const data = ObjectUtils.Script.evaluateReturn(attribute, obj);
+        if (it.checked !== data) it.checked = data;
+      }
+    });
+
+    this.procAttr<HTMLOptionElement>(elements, EventManager.selectedAttrName, (it, attribute) => {
+      if (EventManager.isUsingThisVar(attribute, varName) || varName === undefined) {
+        const data = ObjectUtils.Script.evaluateReturn(attribute, obj);
+        if (it.selected !== data) it.selected = data;
+      }
+    });
+
+    this.procAttr<HTMLInputElement>(elements, EventManager.readonlyAttrName, (it, attribute) => {
+      if (EventManager.isUsingThisVar(attribute, varName) || varName === undefined) {
+        const data = ObjectUtils.Script.evaluateReturn(attribute, obj);
+        if (it.readOnly !== data) it.readOnly = data;
+      }
+    });
+
+    this.procAttr<HTMLInputElement>(elements, EventManager.disabledAttrName, (it, attribute) => {
+      if (EventManager.isUsingThisVar(attribute, varName) || varName === undefined) {
+        const data = ObjectUtils.Script.evaluateReturn(attribute, obj);
+        if (it.disabled !== data) it.disabled = data;
+      }
+    });
+
+    this.procAttr<HTMLElement>(elements, EventManager.hiddenAttrName, (it, attribute) => {
+      if (EventManager.isUsingThisVar(attribute, varName) || varName === undefined) {
+        const data = ObjectUtils.Script.evaluateReturn(attribute, obj);
+        if (it.hidden !== data) it.hidden = data;
+      }
+    });
+
+    this.procAttr<HTMLInputElement>(elements, EventManager.requiredAttrName, (it, attribute) => {
+      if (EventManager.isUsingThisVar(attribute, varName) || varName === undefined) {
+        const data = ObjectUtils.Script.evaluateReturn(attribute, obj);
+        if (it.required !== data) it.required = data;
+      }
+    });
+
+    this.procAttr<HTMLDialogElement>(elements, EventManager.openAttrName, (it, attribute) => {
+      if (EventManager.isUsingThisVar(attribute, varName) || varName === undefined) {
+        const data = ObjectUtils.Script.evaluateReturn(attribute, obj);
+        if (it.open !== data) it.open = data;
+      }
+    });
   }
 
-  public procAttr<T extends Element = Element>(elements: Set<Element> | Set<ChildNode> | Node[] = new Set(), attrName: string, callBack: (h: T, value: string, attributes: any) => void) {
+  public deepAttributeElements(elements: Set<Element> | Set<ChildNode> | Node[] = new Set(), attrName: string): Set<Element> {
     const sets = new Set<Element>();
     elements.forEach(it => {
       if (!it) {
@@ -693,17 +821,26 @@ export class EventManager {
       }
       if (it.nodeType === 1) {
         const e = it as Element;
-        sets.add(e);
-        e.querySelectorAll<T>(`[${attrName}]`).forEach(it => {
+        if (e.hasAttribute(attrName)) {
+          sets.add(e);
+        }
+        e.querySelectorAll<Element>(`[${attrName}]`).forEach(it => {
           sets.add(it);
         });
       }
     });
+    return sets;
+  }
+
+  public procAttr<T extends Element = Element>(elements: Set<Element> | Set<ChildNode> | Node[] = new Set(), attrName: string, callBack: (h: T, value: string, attributes: any) => void) {
+    const sets = this.deepAttributeElements(elements, attrName);
     sets.forEach(it => {
       const attr = it.getAttribute(attrName);
       const attrs = ElementUtils.getAttributeToObject(it);
       if (attr) {
+        // setTimeout(() => {
         callBack(it as T, attr, attrs);
+        // }, 0)
       }
     });
   }
@@ -718,23 +855,31 @@ export class EventManager {
 
   public setValue(obj: any, name: string, value?: any) {
     name = name.replaceAll('this.', 'this.this.');
-    ScriptUtils.evaluate(`${name} = this.value;`, {
+    ObjectUtils.Script.evaluate(`${name} = this.value;`, {
       this: obj,
       value: value
     });
   }
 
-  public static isUsingThisVar(raws: string | null | undefined, varName: string | null | undefined): boolean {
-    if (varName && raws) {
-      if (varName.startsWith('this.')) {
-        varName = varName.replace(/this\./, '');
-      }
+  public static decodeScriptVar(raws: string | null | undefined): string | undefined {
+    if (raws) {
       // TODO: 훔.. 꼭필요한가..?  트리거될때 스크립트변수 까지 감지해야될까?
       EventManager.VARNAMES.forEach(it => {
         // raws = raws!.replace(RegExp(it.replace('$', '\\$'), 'g'), `this?.___${it}`);
         raws = raws!.replace(RegExp(it.replace('$', '\\$'), 'g'), `this.___${it}`);
       });
-      const variablePaths = ObjectUtils.Path.detectPathFromScript(raws ?? '', {excludeThis: true});
+      return raws;
+    }
+    return undefined;
+  }
+
+  public static isUsingThisVar(raws: string | null | undefined, varName: string | null | undefined): boolean {
+    raws = EventManager.decodeScriptVar(raws);
+    if (varName && raws) {
+      if (varName.startsWith('this.')) {
+        varName = varName.replace(/this\./, '');
+      }
+      const variablePaths = ObjectUtils.Path.detectPathFromScript(raws, { excludeThis: true });
       return variablePaths.has(varName);
     }
     return false;
@@ -754,13 +899,15 @@ export class EventManager {
 
   getBindScript(config?: DomRenderConfig) {
     if (config?.eventVariables) {
-      const bindScript = Object.entries(config.eventVariables).filter(([key, value]) => !this.bindScript.includes(`const ${key}`)).map(([key, value]) => {
-        return `const ${key} = this.__render.${key};`;
-      }).join(';');
+      const bindScript = Object.entries(config.eventVariables)
+        .filter(([key, value]) => !this.bindScript.includes(`const ${key}`))
+        .map(([key, value]) => {
+          return `const ${key} = this.__render.${key};`;
+        })
+        .join(';');
       return this.bindScript + '' + bindScript;
     } else {
       return this.bindScript;
     }
   }
 }
-