@dooboostore/dom-render 1.0.110 → 1.0.112

package/src/components/this/This.ts

@@ -1,7 +1,7 @@
 import { ComponentBase } from '../ComponentBase';
 import { DomRender, DomRenderRunConfig } from '../../DomRender';
 import { RawSet } from '../../rawsets/RawSet';
-import { OtherData } from '../../lifecycle/OnChangeAttrRender';
+import { isOnChangeAttrRender, OtherData } from '../../lifecycle/OnChangeAttrRender';
 import { OnInitRender } from '../../lifecycle/OnInitRender';
 import { ComponentSet } from '../../components/ComponentSet';
 import { OnDestroyRenderParams } from '../../lifecycle/OnDestroyRender';
@@ -20,6 +20,20 @@ export namespace This {
     private value?: ComponentSet;
     private if?: boolean | null = null;
     private createArguments?: any[];
+    private childObject?: any;
+    private childRawSet?: RawSet;
+    private sw = false;
+
+    setValue(value: ComponentSet) {
+      this.sw = false;
+      setTimeout(() => {
+        this.value = value;
+      }, 0)
+
+      setTimeout(() => {
+        this.sw = true;
+      }, 0)
+    }
 
     async onInitRender(param: any, rawSet: RawSet) {
       await super.onInitRender(param, rawSet);
@@ -32,7 +46,7 @@ export namespace This {
     onChangeAttrRender(name: string, value: any, other: OtherData) {
       super.onChangeAttrRender(name, value, other);
       if (this.equalsAttributeName(name, 'value')) {
-        this.value = value;
+        this.setValue(value);
       }
       if (this.equalsAttributeName(name, 'if')) {
         this.if = value;
@@ -42,9 +56,26 @@ export namespace This {
       }
     }
 
-    created(component: any) {
-      component ??= this.value?.obj;
-      this.getAttribute('onCreated')?.(component);
+    created($component: any, $rawSet: RawSet) {
+      this.childObject = $component ??= this.value?.obj;
+      this.childRawSet = $rawSet;
+      
+      if ($component) {
+        this.getAttribute('onCreated')?.($component);
+        
+        // attribute 전달 처리
+        if (isOnChangeAttrRender($component)) {
+          this.getAttributeNames()
+            .filter(it => it.startsWith('attribute-'))
+            .forEach(it => {
+              const attrName = it.replace(/^attribute-/, '');
+              const attrValue = this.getAttribute(it as any);
+              $rawSet.dataSet.render.attribute ??= {};
+              $rawSet.dataSet.render.attribute[attrName] = attrValue;
+              $component.onChangeAttrRender(attrName, attrValue, {rawSet: $rawSet});
+            });
+        }
+      }
     }
   }
 }
@@ -54,7 +85,11 @@ export default {
     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>',
+        `
+        <dr-if value="\${@this@.sw}$">
+            <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, $rawSet)">#innerHTML#</div>
+        </dr-if>
+        `,
       objFactory: (e, o, r2, counstructorParam) => {
         return DomRender.run({ rootObject: new This.This(...counstructorParam), config: config });
       }

package/src/decorators/DomRenderNoProxy.ts

@@ -1,27 +1,30 @@
 import { ValidUtils } from '@dooboostore/core/valid/ValidUtils';
+import {ReflectUtils} from "@dooboostore/core/reflect/ReflectUtils";
 
 export const DomRenderNoProxyKey = 'DomRender:NoProxy'
 export const DomRenderNoProxy = (target: any, propertyKey?: string | symbol) => {
+    ReflectUtils.defineMetadata(DomRenderNoProxyKey, true, target, propertyKey);
     // 클래스 데코레이터로 사용된 경우
-    if (propertyKey === undefined) {
-      // target은 클래스 생성자
-      Reflect.defineMetadata(DomRenderNoProxyKey, true, target);
-      return;
-    }
-
-    // 프로퍼티 데코레이터로 사용된 경우
-    // target은 프로토타입, propertyKey는 프로퍼티 이름
-    Reflect.defineMetadata(DomRenderNoProxyKey, true, target, propertyKey);
+    // if (propertyKey === undefined) {
+    //   // target은 클래스 생성자
+    //   Reflect.defineMetadata(DomRenderNoProxyKey, true, target);
+    //   return;
+    // }
+    //
+    // // 프로퍼티 데코레이터로 사용된 경우
+    // // target은 프로토타입, propertyKey는 프로퍼티 이름
+    // Reflect.defineMetadata(DomRenderNoProxyKey, true, target, propertyKey);
 };
 
 export const getDomRenderNoProxy = (target: any, propertyKey?: string | symbol) => {
   // if (ValidUtils.isNotNullUndefined(target)) {
+    return ReflectUtils.getMetadata(DomRenderNoProxyKey, target, propertyKey);
     // 클래스 데코레이터
-    if (propertyKey === undefined) {
-      return Reflect.getMetadata(DomRenderNoProxyKey, target);
-    }
-    // 프로퍼티 데코레이터
-    return Reflect.getMetadata(DomRenderNoProxyKey, target, propertyKey);
+    // if (propertyKey === undefined) {
+    //   return Reflect.getMetadata(DomRenderNoProxyKey, target);
+    // }
+    // // 프로퍼티 데코레이터
+    // return Reflect.getMetadata(DomRenderNoProxyKey, target, propertyKey);
   // } else {
   //   return undefined;
   // }

package/src/events/EventManager.ts

@@ -2,7 +2,6 @@ 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 { getDomRenderConfig } from '../DomRenderProxy';
 import { ObjectUtils } from '@dooboostore/core/object/ObjectUtils';
 
@@ -15,7 +14,8 @@ type HandlerInfo = {
 };
 export type NormalAttrDataType = {
   originalAttrValue: string;
-  variablePaths: {origin: string, inner: string}[];
+  isStringTemplate: boolean;
+  variablePaths: { origin: string, inner: string }[];
 }
 export class EventManager {
   public static readonly attrPrefix = 'dr-';
@@ -49,11 +49,11 @@ 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';
@@ -147,19 +147,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);
+      });
     }
   }
 
@@ -182,7 +182,7 @@ 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;
@@ -255,7 +255,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;
@@ -286,7 +286,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) {
@@ -311,7 +311,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);
         }
 
@@ -370,20 +370,22 @@ export class EventManager {
           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;
   }
 
@@ -394,131 +396,159 @@ 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;
         }
       }
     });
+    // 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 (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 (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 (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 (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 (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 (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;
-        variablePaths.forEach(it => {
-          let r = ObjectUtils.Path.toOptionalChainPath(it.inner);
-          targetScript = targetScript.replaceAll(it.origin,`\${${r}}`);
-        })
-        const data = ObjectUtils.Script.evaluate(`const $element = this.element;  return ${'`'+targetScript+'`'} `, Object.assign(obj, {
+        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)
           })
         }));
-        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);
@@ -531,7 +561,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) => {
@@ -543,24 +574,25 @@ 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, {
+        ObjectUtils.Script.evaluate(`${this.getBindScript(config)}; ${script} `, Object.assign(obj, {
           __render: Object.freeze({
             element: it,
             attribute: ElementUtils.getAttributeToObject(it),
@@ -569,7 +601,8 @@ export class EventManager {
         }));
       }
     });
-
+    // 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);
@@ -588,7 +621,7 @@ export class EventManager {
         script = 'return ' + script;
       }
       if (script) {
-        ScriptUtils.evaluate(`${this.getBindScript(config)}; ${script} `, Object.assign(obj, {
+        ObjectUtils.Script.evaluate(`${this.getBindScript(config)}; ${script} `, Object.assign(obj, {
           __render: Object.freeze({
             element: it,
             attribute: ElementUtils.getAttributeToObject(it),
@@ -601,27 +634,40 @@ export class EventManager {
 
   public changeVar(obj: any, elements: Set<Element> | Set<ChildNode>, varName?: string, config?: DomRenderConfig) {
     // console.log('changeVar', obj, elements, varName)
-    this.procAttr(elements, EventManager.styleAttrName, (it, attribute) => {
+    this.procAttr(elements, EventManager.styleAttrName, (it: HTMLElement, attribute) => {
       let script = attribute;
       if (script) {
         script = 'return ' + script;
       }
       if (EventManager.isUsingThisVar(script, varName) || varName === undefined) {
-        const data = ScriptUtils.evaluate(`const $element = this.__render.element;  ${script} `, Object.assign(obj, {
+        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') {
-          it.setAttribute('style', data);
+          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)) {
-          it.setAttribute('style', data.join(';'));
+          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 {
           for (const [key, value] of Object.entries(data)) {
-            if (it instanceof HTMLElement) {
-              (it.style as any)[key] = String(value);
-            }
+            // if (it instanceof HTMLElement) {
+            (it.style as any)[key] = value === null ? null : String(value);
+            // }
           }
         }
       }
@@ -633,30 +679,87 @@ 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, {
+        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') {
-          it.setAttribute('class', data);
+          data.split(' ').forEach(cit => it.classList.add(cit.trim()));
         } else if (Array.isArray(data)) {
-          it.setAttribute('class', data.join(' '));
+          data.forEach(cit => it.classList.add(cit.trim()));
         } else {
           for (const [key, value] of Object.entries(data)) {
             if (it instanceof HTMLElement) {
               if (value) {
-                it.classList.add(key);
+                it.classList.add(key.trim());
               } else {
-                it.classList.remove(key);
+                it.classList.remove(key.trim());
               }
             }
           }
         }
       }
     });
+
+    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) {
@@ -708,7 +811,7 @@ export class EventManager {
         // 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});
+      const variablePaths = ObjectUtils.Path.detectPathFromScript(raws ?? '', { excludeThis: true });
       return variablePaths.has(varName);
     }
     return false;

package/src/lifecycle/OnChangeAttrRender.ts

@@ -4,7 +4,7 @@ export type OtherData = {
     rawSet?: RawSet
 }
 export interface OnChangeAttrRender {
-    onChangeAttrRender(name: string, value: any, other: OtherData): void;
+    onChangeAttrRender(name: string, value: any, other?: OtherData): void;
 }
 
 export const isOnChangeAttrRender = (obj: any): obj is OnChangeAttrRender => {