@dooboostore/dom-render 1.0.111 → 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/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';
 
@@ -16,7 +15,7 @@ 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-';
@@ -50,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';
@@ -148,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);
+      });
     }
   }
 
@@ -183,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;
@@ -256,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;
@@ -287,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) {
@@ -312,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);
         }
 
@@ -371,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;
   }
 
@@ -395,142 +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;
-          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;
-          }
+        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 +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) => {
@@ -555,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),
@@ -581,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);
@@ -600,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),
@@ -619,33 +640,33 @@ 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, {
+        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 {
           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,7 +679,7 @@ 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)
@@ -667,9 +688,9 @@ export class EventManager {
 
         // alert(1)
         if (typeof data === 'string') {
-            data.split(' ').forEach(cit => it.classList.add(cit.trim()));
+          data.split(' ').forEach(cit => it.classList.add(cit.trim()));
         } else if (Array.isArray(data)) {
-            data.forEach(cit => it.classList.add(cit.trim()));
+          data.forEach(cit => it.classList.add(cit.trim()));
         } else {
           for (const [key, value] of Object.entries(data)) {
             if (it instanceof HTMLElement) {
@@ -683,6 +704,62 @@ export class EventManager {
         }
       }
     });
+
+    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) {
@@ -734,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 => {

package/src/lifecycle/OnChildRawSetRendered.ts

@@ -0,0 +1,13 @@
+import { RawSet, RenderResult } from '../rawsets/RawSet';
+
+export type OnRawSetRenderedOtherData = {
+  renderResult?: RenderResult
+  //     rawSet?: RawSet
+}
+export interface OnChildRawSetRendered {
+    onChildRawSetRendered (): Promise<void>;
+}
+
+export const isOnChildRawSetRendered= (obj: any): obj is OnChildRawSetRendered => {
+    return typeof obj?.onChildRawSetRendered === 'function';
+}

package/src/lifecycle/OnRawSetRendered.ts

@@ -1,7 +1,9 @@
 import { RawSet, RenderResult } from '../rawsets/RawSet';
 
 export type OnRawSetRenderedOtherData = {
-  path?: string
+  path?: string;
+  value?: any;
+  root: any;
   renderResult?: RenderResult
   //     rawSet?: RawSet
 }

package/src/operators/Appender.ts

@@ -28,6 +28,13 @@ export class Appender<T = any> implements Iterable<T> {
     }
   }
 
+  get(key: string): T[] | undefined {
+    const o = this.keyMap.get(key);
+    if (o !== undefined) {
+      return this[o];
+    }
+    return undefined;
+  }
   set(key: string, ...v:T[]) {
     const o = this.keyMap.get(key);
     // console.log('set!!', o);
@@ -43,7 +50,7 @@ export class Appender<T = any> implements Iterable<T> {
   delete(key: string) {
     const o = this.keyMap.get(key);
     if (o !== undefined) {
-      this[o] = [];
+      this[o] = this[o].map(it=> undefined);
       this.keyMap.delete(key);
       // this.length--;
     }