@dooboostore/dom-render 1.0.100 → 1.0.103

package/events/EventManager.js

@@ -1,20 +1,24 @@
 var _a;
 import { ScriptUtils } from '@dooboostore/core-web/script/ScriptUtils';
-import { DomUtils } from '@dooboostore/core-web/dom/DomUtils';
+import { ElementUtils } from '@dooboostore/core-web/element/ElementUtils';
 import { Range } from '../iterators/Range';
-import { DomRenderFinalProxy } from '../types/Types';
+import { getDomRenderConfig } from '../DomRenderProxy';
 export class EventManager {
-    constructor() {
+    constructor(window) {
+        this.window = window;
         this.eventNames = [
             'click', 'mousedown', 'mouseup', 'dblclick', 'mouseover', 'mouseout', 'mousemove', 'mouseenter', 'mouseleave', 'contextmenu',
             'keyup', 'keydown', 'keypress', 'toggle',
             'change', 'input', 'submit', 'resize', 'focus', 'blur',
-            'close', 'cancel' // dialog cancel 이벤트는 close 이벤트의 하위 이벤트로, ESC 키나 취소 버튼으로 닫힐 때만 발생.    (close// 추가 로직 (예: 닫힘 후 처리))
-            /*
-            close 이벤트: <dialog>가 닫힐 때 발생. 사용자가 취소 버튼, 확인 버튼, 또는 dialog.close() 메서드로 닫을 때 모두 트리거됩니다.
-            cancel 이벤트: <dialog>가 ESC 키나 취소 버튼으로 닫힐 때 발생. close 이벤트의 하위 이벤트로 볼 수 있습니다.
-             */
+            'close', 'cancel'
         ];
+        this.delegatableEventMap = {
+            mouseleave: 'mouseout',
+            mouseenter: 'mouseover',
+            focus: 'focusin',
+            blur: 'focusout',
+        };
+        this.directAttachEvents = new Set(['close']);
         this.bindScript = `
         const ${_a.VALUE_VARNAME} = this.__render.value;
         const ${_a.SCRIPTS_VARNAME} = this.__render.scripts;
@@ -35,36 +39,210 @@ export class EventManager {
                 window === null || window === void 0 ? void 0 : window.addEventListener(eventName, (event) => {
                     const targetAttr = `dr-window-event-${eventName}`;
                     document.querySelectorAll(`[${targetAttr}]`).forEach(it => {
-                        var _b;
                         const script = it.getAttribute(targetAttr);
                         if (script) {
-                            const obj = it.obj;
-                            const config = (_b = obj === null || obj === void 0 ? void 0 : obj._DomRender_proxy) === null || _b === void 0 ? void 0 : _b.config;
-                            ScriptUtils.eval(`${this.bindScript} ${script} `, Object.assign(obj, {
-                                __render: Object.freeze({
-                                    target: DomRenderFinalProxy.final(event.target),
-                                    element: it,
-                                    event: event,
-                                    range: Range.range,
-                                    scripts: _a.setBindProperty(config === null || config === void 0 ? void 0 : config.scripts, obj)
-                                    // ...EventManager.eventVariables
-                                })
-                            }));
+                            const obj = this.findComponentInstance(it);
+                            const config = getDomRenderConfig(obj);
+                            ScriptUtils.eval(`${this.bindScript} ${script} `, this.createExecutionContext(event, it, obj, config));
                         }
                     });
                 });
             });
+            const rootElement = this.window.document;
+            const listeningEvents = new Set();
+            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);
+            });
+        }
+    }
+    handleEvent(event) {
+        const handlers = this.collectHandlers(event);
+        // console.log('handlers', handlers, event);
+        for (const handler of handlers) {
+            if (event.cancelBubble) {
+                break;
+            }
+            const componentInstance = this.findComponentInstance(handler.element);
+            if (!componentInstance) {
+                continue;
+            }
+            // console.log('executeHandler', event,handler,componentInstance)
+            this.executeHandler(event, handler, componentInstance);
+        }
+    }
+    collectHandlers(event) {
+        const handlers = [];
+        const root = this.window.document;
+        if (!root)
+            return handlers;
+        const initialTarget = event.target;
+        let currentTarget = (initialTarget.nodeType === 1)
+            ? initialTarget
+            : initialTarget.parentElement;
+        const collectedElements = new Set();
+        const eventMap = {
+            mouseout: 'mouseleave',
+            mouseover: 'mouseenter',
+            focusout: 'blur',
+            focusin: 'focus'
+        };
+        const mappedEventName = eventMap[event.type] || event.type;
+        while (currentTarget) {
+            if (collectedElements.has(currentTarget)) {
+                break;
+            }
+            // Priority 1: Link attributes
+            const matchingLinkAttr = _a.linkAttrs.find(la => la.event === mappedEventName && (currentTarget === null || currentTarget === void 0 ? void 0 : currentTarget.hasAttribute(la.name)));
+            if (matchingLinkAttr) {
+                handlers.push({
+                    element: currentTarget,
+                    attr: matchingLinkAttr.name,
+                    type: 'link',
+                    priority: 1,
+                    property: matchingLinkAttr.property
+                });
+            }
+            // Priority 2: dr-event-* attributes
+            const eventAttr = `${_a.attrPrefix}event-${mappedEventName}`;
+            if (currentTarget.hasAttribute(eventAttr)) {
+                handlers.push({
+                    element: currentTarget,
+                    attr: eventAttr,
+                    type: 'event',
+                    priority: 2
+                });
+            }
+            // Priority 3: dr-event with params
+            const eventParamAttr = _a.eventParam;
+            if (currentTarget.hasAttribute(eventParamAttr)) {
+                const bindEvents = currentTarget.getAttribute(`${eventParamAttr}:bind`);
+                if (bindEvents && bindEvents.split(',').map(s => s.trim()).includes(mappedEventName)) {
+                    handlers.push({
+                        element: currentTarget,
+                        attr: eventParamAttr,
+                        type: 'event-param',
+                        priority: 3
+                    });
+                }
+            }
+            collectedElements.add(currentTarget);
+            if (currentTarget === root.documentElement) {
+                break;
+            }
+            currentTarget = currentTarget.parentElement;
+        }
+        return handlers.sort((a, b) => a.priority - b.priority);
+    }
+    findComponentInstance(element) {
+        let current = element;
+        const root = this.window.document;
+        while (current) {
+            if (current.obj) {
+                return current.obj;
+            }
+            if (current === root.documentElement) {
+                break;
+            }
+            current = current.parentElement;
+        }
+        return this.window;
+    }
+    createExecutionContext(event, element, componentInstance, config, extraVars = {}) {
+        // console.log('---------->', config?.eventVariables)
+        return Object.assign(componentInstance, {
+            __render: Object.freeze(Object.assign(Object.assign({ event,
+                element, target: event.target, attribute: ElementUtils.getAttributeToObject(element), router: config === null || config === void 0 ? void 0 : config.router, range: Range.range, scripts: _a.setBindProperty(config === null || config === void 0 ? void 0 : config.scripts, componentInstance) }, config === null || config === void 0 ? void 0 : config.eventVariables), extraVars))
+        });
+    }
+    executeHandler(event, handler, componentInstance) {
+        const { element, type, attr } = handler;
+        const config = getDomRenderConfig(componentInstance);
+        switch (type) {
+            case 'link':
+                const varName = element.getAttribute(attr);
+                if (!varName || !handler.property)
+                    return;
+                if (attr.includes('leave') || attr.includes('enter') || attr.includes('focus') || attr.includes('blur')) {
+                    const relatedTarget = event.relatedTarget;
+                    if (relatedTarget && element.contains(relatedTarget)) {
+                        return;
+                    }
+                }
+                const ownerVariablePath = element.getAttribute(_a.ownerVariablePathAttrName);
+                let bindObj = componentInstance;
+                if (ownerVariablePath) {
+                    bindObj = ScriptUtils.evalReturn(ownerVariablePath, componentInstance);
+                }
+                const mapScript = element.getAttribute(`${attr}:map`);
+                let value = element[handler.property];
+                if (mapScript) {
+                    const context = this.createExecutionContext(event, element, bindObj, config, { value });
+                    value = ScriptUtils.eval(`return ${mapScript}`, context);
+                }
+                if (typeof this.getValue(componentInstance, varName, bindObj) === 'function') {
+                    this.getValue(componentInstance, varName, bindObj)(value, event);
+                }
+                else {
+                    this.setValue(componentInstance, varName, value);
+                }
+                break;
+            case 'event':
+                const script = element.getAttribute(attr);
+                if (!script)
+                    return;
+                if (attr.endsWith('mouseleave') || attr.endsWith('mouseenter') || attr.endsWith('blur') || attr.endsWith('focus')) {
+                    const relatedTarget = event.relatedTarget;
+                    if (relatedTarget && element.contains(relatedTarget)) {
+                        return;
+                    }
+                }
+                const context = this.createExecutionContext(event, element, componentInstance, config);
+                const filterScript = element.getAttribute(`${attr}:filter`);
+                let filter = true;
+                // 개발자가 사용중에 문제가 발생될(디버깅) 버그를 유발할수있는 기능 흐름제어가 안될수있어 기능을 제거한다.
+                // if (filterScript) {
+                //     filter = ScriptUtils.eval<boolean>(`${this.getBindScript(config)} return ${filterScript}`, context) ?? false;
+                // }
+                if (filter) {
+                    ScriptUtils.eval(`${this.getBindScript(config)} ${script}`, context);
+                }
+                // 개발자가 사용중에 문제가 발생될(디버깅) 버그를 유발할수있는 기능 흐름제어가 안될수있어 기능을 제거한다.
+                // const hasDispatch = element.hasAttribute(`${attr}:dispatch`);
+                // if (hasDispatch) {
+                //   element.dispatchEvent(new Event(event.type));
+                // }
+                break;
+            case 'event-param':
+                const paramScript = element.getAttribute(attr);
+                if (!paramScript)
+                    return;
+                if (attr.endsWith('mouseleave') || attr.endsWith('mouseenter') || attr.endsWith('blur') || attr.endsWith('focus')) {
+                    const relatedTarget = event.relatedTarget;
+                    if (relatedTarget && element.contains(relatedTarget)) {
+                        return;
+                    }
+                }
+                const attributes = ElementUtils.getAttributeToObject(element);
+                const params = {};
+                const prefix = attr + ':';
+                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 });
+                ScriptUtils.eval(`${this.getBindScript(config)} ${paramScript}`, paramContext);
+                break;
         }
     }
-    // // 순환참조때문에 우선 여기에 뺴놓는다.
-    // public DomrenderProxyFinal(obj: any) {
-    //     (obj as any)._DomRender_isFinal = true;
-    //     return obj;
-    // }
-    // 중요 이벤트에 대상이될 Elements를 찾는다.
     findAttrElements(fragment, config) {
         var _b, _c;
-        // const datas: {name: string, value: string | null, element: Element}[] = [];
         const elements = new Set();
         const addAttributes = (_c = (_b = config === null || config === void 0 ? void 0 : config.applyEvents) === null || _b === void 0 ? void 0 : _b.map(it => it.attrName)) !== null && _c !== void 0 ? _c : [];
         addAttributes.concat([..._a.attrNames]).forEach(attrName => {
@@ -74,23 +252,12 @@ export class EventManager {
         });
         return elements;
     }
-    // 중요 처음 이벤트 처리
-    // eslint-disable-next-line no-undef
     applyEvent(obj, childNodes, config) {
-        // console.log('eventManager applyEvent==>', obj, childNodes, config)
-        // Node.ELEMENT_NODE = 1
-        // event
-        // childNodes.forEach(it => {
-        //     if (it instanceof Element) {
-        //         it.setAttribute('dr-thieVariableName', 'this')
-        //     }
-        // })
-        // 중요 이벤트 걸어줌
-        this.eventNames.forEach(it => {
-            this.addDrEvents(obj, it, childNodes, config);
+        childNodes.forEach(node => {
+            if (node.nodeType === 1) {
+                node.obj = obj;
+            }
         });
-        this.addDrEventPram(obj, _a.eventParam, childNodes, config);
-        // value
         this.procAttr(childNodes, _a.valueAttrName, (it, attribute) => {
             const script = attribute;
             if (script) {
@@ -100,17 +267,78 @@ export class EventManager {
                 }
             }
         });
-        // normal-attr-map
+        this.procAttr(childNodes, _a.checkedAttrName, (it, attribute) => {
+            const script = attribute;
+            if (script) {
+                const data = ScriptUtils.evalReturn(script, obj);
+                if (it.checked !== data) {
+                    it.checked = data;
+                }
+            }
+        });
+        this.procAttr(childNodes, _a.selectedAttrName, (it, attribute) => {
+            const script = attribute;
+            if (script) {
+                const data = ScriptUtils.evalReturn(script, obj);
+                if (it.selected !== data) {
+                    it.selected = data;
+                }
+            }
+        });
+        this.procAttr(childNodes, _a.readonlyAttrName, (it, attribute) => {
+            const script = attribute;
+            if (script) {
+                const data = ScriptUtils.evalReturn(script, obj);
+                if (it.readOnly !== data) {
+                    it.readOnly = data;
+                }
+            }
+        });
+        this.procAttr(childNodes, _a.disabledAttrName, (it, attribute) => {
+            const script = attribute;
+            if (script) {
+                const data = ScriptUtils.evalReturn(script, obj);
+                if (it.disabled !== data) {
+                    it.disabled = data;
+                }
+            }
+        });
+        this.procAttr(childNodes, _a.hiddenAttrName, (it, attribute) => {
+            const script = attribute;
+            if (script) {
+                const data = ScriptUtils.evalReturn(script, obj);
+                if (it.hidden !== data) {
+                    it.hidden = data;
+                }
+            }
+        });
+        this.procAttr(childNodes, _a.requiredAttrName, (it, attribute) => {
+            const script = attribute;
+            if (script) {
+                const data = ScriptUtils.evalReturn(script, obj);
+                if (it.required !== data) {
+                    it.required = data;
+                }
+            }
+        });
+        this.procAttr(childNodes, _a.openAttrName, (it, attribute) => {
+            const script = attribute;
+            if (script) {
+                const data = ScriptUtils.evalReturn(script, obj);
+                if (it.open !== data) {
+                    it.open = data;
+                }
+            }
+        });
         this.procAttr(childNodes, _a.normalAttrMapAttrName, (it, attribute) => {
             const map = new Map(JSON.parse(attribute));
             map.forEach((v, k) => {
                 const data = ScriptUtils.eval(`const $element = this.element;  return ${v} `, Object.assign(obj, {
                     __render: Object.freeze({
                         element: it,
-                        attribute: DomUtils.getAttributeToObject(it)
+                        attribute: ElementUtils.getAttributeToObject(it)
                     })
                 }));
-                // console.log('-------normalAttribute---datadatadata',data)
                 if (data === null) {
                     it.removeAttribute(k);
                 }
@@ -119,25 +347,22 @@ export class EventManager {
                 }
             });
         });
-        // window event
         _a.WINDOW_EVENTS.forEach(it => {
             this.procAttr(childNodes, _a.attrPrefix + 'window-event-' + it, (it, attribute) => {
                 it.obj = obj;
             });
         });
-        // value-link event
         _a.linkAttrs.forEach(linkInfo => {
             this.procAttr(childNodes, linkInfo.name, (it, varName) => {
+                // console.log('ink??????????')
                 if (varName) {
                     const ownerVariablePathName = it.getAttribute(_a.ownerVariablePathAttrName);
                     const mapScript = it.getAttribute(`${linkInfo.name}:map`);
-                    // const inMapScript = it.getAttribute(`${valueLinkAttrName}:in-map`);
                     let bindObj = obj;
                     if (ownerVariablePathName) {
                         bindObj = ScriptUtils.evalReturn(ownerVariablePathName, obj);
                     }
                     const getValue = this.getValue(obj, varName, bindObj);
-                    // TODO: 아래 나중에 리팩토링 필요함
                     if (typeof getValue === 'function' && getValue) {
                         let setValue = it[linkInfo.property];
                         if (mapScript) {
@@ -150,64 +375,62 @@ export class EventManager {
                         if (mapScript) {
                             setValue = ScriptUtils.eval(`${this.getBindScript(config)} return ${mapScript}`, Object.assign(bindObj, { __render: Object.freeze(Object.assign({ element: it, target: bindObj, range: Range.range, value: setValue, scripts: _a.setBindProperty(config === null || config === void 0 ? void 0 : config.scripts, obj) }, config === null || config === void 0 ? void 0 : config.eventVariables)) }));
                         }
-                        // console.log('------->',it.value, setValue)
                         if (setValue === null) {
                             it.removeAttribute(linkInfo.property);
                         }
                         else {
-                            // console.log('-----------',it, setValue)
                             it[linkInfo.property] = setValue;
                         }
-                        // 여기서 value가 먼저냐 value-link가 먼저냐 선을 정해야되는거네..-> 라고해서 undefined일때에는 element값을 먼저셋팅해준다.
                     }
                     else if (getValue === undefined) {
                         this.setValue(obj, varName, it[linkInfo.property]);
                     }
-                    it.addEventListener(linkInfo.event, (event) => {
-                        let value = it[linkInfo.property];
-                        if (mapScript) {
-                            value = ScriptUtils.eval(`${this.getBindScript(config)} return ${mapScript}`, Object.assign(bindObj, {
-                                __render: Object.freeze(Object.assign({ event, element: it, attribute: DomUtils.getAttributeToObject(it), target: event.target, range: Range.range, scripts: _a.setBindProperty(config === null || config === void 0 ? void 0 : config.scripts, obj) }, config === null || config === void 0 ? void 0 : config.eventVariables))
-                            }));
-                        }
-                        if (typeof this.getValue(obj, varName, bindObj) === 'function') {
-                            this.getValue(obj, varName, bindObj)(value, event);
-                        }
-                        else {
-                            this.setValue(obj, varName, value);
-                        }
-                    });
                 }
             });
         });
-        // on-init event
+        this.directAttachEvents.forEach(eventName => {
+            const attr = `${_a.attrPrefix}event-${eventName}`;
+            this.procAttr(childNodes, attr, (element, script) => {
+                const handler = (event) => {
+                    var _b;
+                    const componentInstance = this.findComponentInstance(element);
+                    if (!componentInstance)
+                        return;
+                    const context = this.createExecutionContext(event, element, componentInstance, config);
+                    const filterScript = element.getAttribute(`${attr}:filter`);
+                    let filter = true;
+                    if (filterScript) {
+                        filter = (_b = ScriptUtils.eval(`${this.getBindScript(config)} return ${filterScript}`, context)) !== null && _b !== void 0 ? _b : false;
+                    }
+                    if (filter) {
+                        ScriptUtils.eval(`${this.getBindScript(config)} ${script}`, context);
+                    }
+                };
+                element.addEventListener(eventName, handler);
+                // TODO: Add logic to remove this listener when the element is destroyed.
+            });
+        });
         this.procAttr(childNodes, _a.onInitAttrName, (it, attribute) => {
-            // it.removeAttribute(EventManager.onInitAttrName);
             let script = attribute;
             if (script) {
                 script = 'return ' + script;
             }
             if (script) {
                 ScriptUtils.eval(`${this.getBindScript(config)}; ${script} `, Object.assign(obj, {
-                    __render: Object.freeze(Object.assign({ element: it, attribute: DomUtils.getAttributeToObject(it) }, config === null || config === void 0 ? void 0 : config.eventVariables))
+                    __render: Object.freeze(Object.assign({ element: it, attribute: ElementUtils.getAttributeToObject(it) }, config === null || config === void 0 ? void 0 : config.eventVariables))
                 }));
             }
         });
         this.onRenderedEvent(obj, childNodes, config);
         this.changeVar(obj, childNodes, undefined, config);
-        // console.log('eventManager-applyEvent-->', config?.applyEvents)
         const elements = Array.from(childNodes).filter(it => it.nodeType === 1).map(it => it);
         elements.forEach(it => {
             var _b;
             (_b = config === null || config === void 0 ? void 0 : config.applyEvents) === null || _b === void 0 ? void 0 : _b.filter(ta => it.getAttribute(ta.attrName) !== null).forEach(ta => ta.callBack(it, it.getAttribute(ta.attrName), obj));
         });
     }
-    // RawSet에서 replaceBody이후에 호출
     onRenderedEvent(obj, childNodes, config) {
-        // console.log('--------onRenderedEvent', obj, childNodes);
-        // console.log(document.querySelectorAll(`[${EventManager.onRenderedInitAttrName}]`))
         this.procAttr(childNodes, _a.onRenderedInitAttrName, (it, attribute) => {
-            // it.removeAttribute(EventManager.onRenderedInitAttrName);
             if (!it.isConnected) {
                 return;
             }
@@ -215,17 +438,15 @@ export class EventManager {
             if (script) {
                 script = 'return ' + script;
             }
-            // console.log('onRendered!!')
             if (script) {
                 ScriptUtils.eval(`${this.getBindScript(config)}; ${script} `, Object.assign(obj, {
-                    __render: Object.freeze(Object.assign({ element: it, attribute: DomUtils.getAttributeToObject(it) }, config === null || config === void 0 ? void 0 : config.eventVariables))
+                    __render: Object.freeze(Object.assign({ element: it, attribute: ElementUtils.getAttributeToObject(it) }, config === null || config === void 0 ? void 0 : config.eventVariables))
                 }));
             }
         });
     }
-    // eslint-disable-next-line no-undef
     changeVar(obj, elements, varName, config) {
-        // style
+        // console.log('changeVar', obj, elements, varName)
         this.procAttr(elements, _a.styleAttrName, (it, attribute) => {
             let script = attribute;
             if (script) {
@@ -235,7 +456,7 @@ export class EventManager {
                 const data = ScriptUtils.eval(`const $element = this.__render.element;  ${script} `, Object.assign(obj, {
                     __render: Object.freeze({
                         element: it,
-                        attribute: DomUtils.getAttributeToObject(it)
+                        attribute: ElementUtils.getAttributeToObject(it)
                     })
                 }));
                 if (typeof data === 'string') {
@@ -253,7 +474,6 @@ export class EventManager {
                 }
             }
         });
-        // class
         this.procAttr(elements, _a.classAttrName, (it, attribute) => {
             let script = attribute;
             if (script) {
@@ -263,7 +483,7 @@ export class EventManager {
                 const data = ScriptUtils.eval(`const $element = this.element;  ${script} `, Object.assign(obj, {
                     __render: Object.freeze({
                         element: it,
-                        attribute: DomUtils.getAttributeToObject(it)
+                        attribute: ElementUtils.getAttributeToObject(it)
                     })
                 }));
                 if (typeof data === 'string') {
@@ -286,63 +506,13 @@ export class EventManager {
                 }
             }
         });
-        // this.onRenderedEvent(obj,elements, config);
-    }
-    addDrEvents(obj, eventName, elements, config) {
-        // console.log('-------?', config?.router)
-        const attr = _a.attrPrefix + 'event-' + eventName;
-        this.procAttr(elements, attr, (it, attribute) => {
-            const script = attribute;
-            const hasDispatch = it.hasAttribute(`${attr}:dispatch`);
-            // console.log('hasDispatch',hasDispatch, attr, it);
-            it.addEventListener(eventName, (event) => {
-                let filter = true;
-                const filterScript = it.getAttribute(`${attr}:filter`);
-                const thisTarget = Object.assign(obj, {
-                    __render: Object.freeze(Object.assign({ event, element: it, target: event.target, range: Range.range, attribute: DomUtils.getAttributeToObject(it), router: config === null || config === void 0 ? void 0 : config.router, scripts: _a.setBindProperty(config === null || config === void 0 ? void 0 : config.scripts, obj) }, config === null || config === void 0 ? void 0 : config.eventVariables))
-                });
-                if (filterScript) {
-                    filter = ScriptUtils.eval(`${this.getBindScript(config)} return ${filterScript}`, thisTarget);
-                }
-                if (filter) {
-                    ScriptUtils.eval(`${this.getBindScript(config)} ${script} `, thisTarget);
-                }
-            });
-            if (hasDispatch) {
-                it.dispatchEvent(new Event(eventName));
-            }
-        });
-    }
-    // eslint-disable-next-line no-undef
-    addDrEventPram(obj, attr, elements, config) {
-        this.procAttr(elements, attr, (it, attribute, attributes) => {
-            const bind = attributes[attr + ':bind'];
-            if (bind) {
-                const script = attribute;
-                const params = {};
-                const prefix = attr + ':';
-                Object.entries(attributes).filter(([k, v]) => k.startsWith(prefix)).forEach(([k, v]) => {
-                    params[k.slice(prefix.length)] = v;
-                });
-                bind.split(',').forEach(eventName => {
-                    it.addEventListener(eventName.trim(), (event) => {
-                        ScriptUtils.eval(`const $params = this.__render.params; ${this.getBindScript(config)}  ${script} `, Object.assign(obj, {
-                            __render: Object.freeze(Object.assign({ event, element: it, attribute: DomUtils.getAttributeToObject(it), target: event.target, range: Range.range, scripts: _a.setBindProperty(config === null || config === void 0 ? void 0 : config.scripts, obj), params }, config === null || config === void 0 ? void 0 : config.eventVariables))
-                        }));
-                    });
-                });
-            }
-        });
     }
-    // eslint-disable-next-line no-undef
     procAttr(elements = new Set(), attrName, callBack) {
         const sets = new Set();
         elements.forEach(it => {
-            // console.log('--->type', it, it.nodeType)
             if (!it) {
                 return;
             }
-            // Node.ELEMENT_NODE = 1
             if (it.nodeType === 1) {
                 const e = it;
                 sets.add(e);
@@ -351,17 +521,15 @@ export class EventManager {
                 });
             }
         });
-        // console.log('---setr',sets);
         sets.forEach(it => {
             const attr = it.getAttribute(attrName);
-            const attrs = DomUtils.getAttributeToObject(it);
+            const attrs = ElementUtils.getAttributeToObject(it);
             if (attr) {
                 callBack(it, attr, attrs);
             }
         });
     }
     getValue(obj, name, bindObj) {
-        // let r = obj[name];
         let r = ScriptUtils.evalReturn(name, obj);
         if (typeof r === 'function') {
             r = r.bind(bindObj !== null && bindObj !== void 0 ? bindObj : obj);
@@ -376,8 +544,6 @@ export class EventManager {
         });
     }
     static isUsingThisVar(raws, varName) {
-        // console.log('isUsingV', raws)
-        // console.log('isUsingV', raws, varName, ScriptUtils.getVariablePaths(raws ?? ''))
         if (varName && raws) {
             if (varName.startsWith('this.')) {
                 varName = varName.replace(/this\./, '');
@@ -393,7 +559,6 @@ export class EventManager {
     }
     static setBindProperty(scripts, obj) {
         if (scripts) {
-            // const newScripts = Object.assign({}, scripts)
             const newScripts = Object.assign({}, scripts);
             for (const [key, value] of Object.entries(newScripts)) {
                 if (typeof value === 'function') {
@@ -421,6 +586,14 @@ EventManager.ownerVariablePathAttrName = _a.attrPrefix + 'owner-variable-path';
 EventManager.eventParam = _a.attrPrefix + 'event';
 EventManager.onInitAttrName = _a.attrPrefix + 'on-init';
 EventManager.valueAttrName = _a.attrPrefix + 'value';
+EventManager.checkedAttrName = _a.attrPrefix + 'checked';
+EventManager.selectedAttrName = _a.attrPrefix + 'selected';
+EventManager.readonlyAttrName = _a.attrPrefix + 'readonly';
+EventManager.disabledAttrName = _a.attrPrefix + 'disabled';
+EventManager.hiddenAttrName = _a.attrPrefix + 'hidden';
+EventManager.requiredAttrName = _a.attrPrefix + 'required';
+EventManager.openAttrName = _a.attrPrefix + 'open';
+// link는 쓰지 않는걸 추천한다 라이프 사이클 꼬인다 다른 프레임워크에서도 양방향은 지양 한다
 EventManager.linkAttrs = [
     { name: _a.attrPrefix + 'value-link', property: 'value', event: 'input' },
     { name: _a.attrPrefix + 'hidden-link', property: 'value', event: 'input' },
@@ -428,6 +601,7 @@ EventManager.linkAttrs = [
     { name: _a.attrPrefix + 'checked-link', property: 'checked', event: 'change' },
     { name: _a.attrPrefix + 'open-link', property: 'open', event: 'toggle' },
 ];
+// @ts-ignore  합성이벤트(Synthetic) 처리하면서 의미가 없어졌다
 EventManager.linkTargetMapAttrName = _a.attrPrefix + 'link-variables';
 EventManager.onRenderedInitAttrName = _a.attrPrefix + 'on-rendered-init';
 EventManager.attrAttrName = _a.attrPrefix + 'attr';
@@ -457,12 +631,19 @@ EventManager.PARENT_THIS_PATH_VARNAME = '$parentPath';
 EventManager.CURRENT_THIS_VARNAME = '$currentThis';
 EventManager.CURRENT_THIS_PATH_VARNAME = '$currentThisPath';
 EventManager.NEAR_THIS_PATH_VARNAME = '$nearThisPath';
-EventManager.VARNAMES = [_a.SCRIPTS_VARNAME, _a.FAG_VARNAME, _a.RAWSET_VARNAME, _a.RANGE_VARNAME, _a.ROUTER_VARNAME, _a.ELEMENT_VARNAME, _a.TARGET_VARNAME, _a.EVENT_VARNAME, _a.COMPONENT_VARNAME, _a.INNERHTML_VARNAME, _a.ATTRIBUTE_VARNAME, _a.ATTRIBUTE_VARNAME, _a.CREATOR_META_DATA_VARNAME, _a.PARENT_THIS_PATH_VARNAME, _a.PARENT_THIS_VARNAME, _a.attrAttrName];
+EventManager.VARNAMES = [_a.SCRIPTS_VARNAME, _a.FAG_VARNAME, _a.RAWSET_VARNAME, _a.RANGE_VARNAME, _a.ROUTER_VARNAME, _a.ELEMENT_VARNAME, _a.TARGET_VARNAME, _a.EVENT_VARNAME, _a.COMPONENT_VARNAME, _a.INNERHTML_VARNAME, _a.ATTRIBUTE_VARNAME, _a.ATTRIBUTE_VARNAME, _a.CREATOR_META_DATA_VARNAME, _a.PARENT_THIS_PATH_VARNAME, _a.PARENT_THIS_VARNAME];
 EventManager.WINDOW_EVENT_POPSTATE = 'popstate';
 EventManager.WINDOW_EVENT_RESIZE = 'resize';
 EventManager.WINDOW_EVENTS = [_a.WINDOW_EVENT_POPSTATE, _a.WINDOW_EVENT_RESIZE];
 EventManager.attrNames = [
     _a.valueAttrName,
+    _a.checkedAttrName,
+    _a.selectedAttrName,
+    _a.readonlyAttrName,
+    _a.disabledAttrName,
+    _a.hiddenAttrName,
+    _a.requiredAttrName,
+    _a.openAttrName,
     _a.attrAttrName,
     _a.normalAttrMapAttrName,
     _a.styleAttrName,
@@ -473,5 +654,4 @@ EventManager.attrNames = [
     ..._a.linkAttrs.map(it => it.name),
     _a.eventParam
 ];
-export const eventManager = new EventManager();
 //# sourceMappingURL=EventManager.js.map