@dooboostore/dom-render 1.0.100 → 1.0.103

package/DomRender.d.ts

@@ -2,7 +2,7 @@ import { Config } from './configs/Config';
 import { ConstructorType } from '@dooboostore/core/types';
 import { RawSet } from './rawsets/RawSet';
 import { Router } from './routers/Router';
-export type RunConfig<T = any> = Omit<Config<T>, 'router'> & {
+export type DomRenderRunConfig<T = any> = Omit<Config<T>, 'router' | 'uuid' | 'eventManager' | 'messenger' | 'root' | 'rootElement'> & {
     routerType?: 'path' | 'hash' | ((obj: T, window: Window) => Router) | Router;
 };
 export type CreateComponentParam = {
@@ -12,12 +12,27 @@ export type CreateComponentParam = {
     template?: string;
     styles?: string[] | string;
 };
-export declare class DomRender {
-    static run<T extends object>({ rootObject, target, config }: {
-        rootObject: T | (() => T);
+export type DomRenderRunParameter<T extends object> = {
+    rootObject: T | (() => T);
+    target?: Element | null;
+    config?: DomRenderRunConfig;
+};
+export declare class DomRender<T extends object = any> {
+    private _config;
+    private _target;
+    private _rootObject;
+    constructor(parameter: DomRenderRunParameter<T>, executeConfig?: {
+        autoGo?: string;
+    });
+    get rootObject(): T;
+    get config(): Config;
+    get target(): Element;
+    static run<T extends object>(data: DomRenderRunParameter<T>): T;
+    static runSet<T extends object>({ rootObject, target, config }: DomRenderRunParameter<T>): {
+        rootObject: T;
         target?: Element | null;
-        config?: RunConfig;
-    }): T;
+        config: Config;
+    };
     static createComponent(param: CreateComponentParam): import("./configs/TargetElement").TargetElement;
     static createAttribute(attrName: string, getThisObj: (element: Element, attrValue: string, obj: any, rawSet: RawSet) => any, factory: (element: Element, attrValue: string, obj: any, rawSet: RawSet) => DocumentFragment): import("./configs/TargetAttr").TargetAttr;
 }

package/DomRender.js

@@ -5,37 +5,54 @@ import { DomRenderFinalProxy } from './types/Types';
 import { RawSet } from './rawsets/RawSet';
 import { DefaultMessenger } from './messenger/DefaultMessenger';
 import { drComponent } from './components';
+import { EventManager } from './events/EventManager';
+import { RandomUtils } from '@dooboostore/core/random/RandomUtils';
+let eventManager = null;
 export class DomRender {
-    static run({ rootObject, target, config }) {
-        var _a, _b, _c;
+    constructor(parameter, executeConfig) {
+        var _a;
+        const s = DomRender.runSet(parameter);
+        this._config = s.config;
+        this._target = s.target;
+        this._rootObject = s.rootObject;
+        if (executeConfig && (executeConfig === null || executeConfig === void 0 ? void 0 : executeConfig.autoGo)) {
+            (_a = this._config.router) === null || _a === void 0 ? void 0 : _a.go(executeConfig.autoGo);
+        }
+    }
+    get rootObject() {
+        return this._rootObject;
+    }
+    get config() {
+        return this._config;
+    }
+    get target() {
+        return this._target;
+    }
+    static run(data) {
+        return DomRender.runSet(data).rootObject;
+    }
+    static runSet({ rootObject, target, config }) {
+        var _a, _b, _c, _d;
+        var _e;
+        // public static run<T extends object>({rootObject, target, config}: DomRenderRunParameter<T>): T {
+        //   console.log('runSet')
         rootObject = typeof rootObject === 'function' ? rootObject() : rootObject;
-        const targetConfig = Object.assign({}, config);
         let targetObject = rootObject;
         if ('_DomRender_isProxy' in rootObject) {
             if (target) {
                 rootObject._DomRender_proxy.initRender(target);
             }
             targetObject = rootObject;
-            return targetObject; // { rootObject: targetObject, target, config: targetConfig };
-        }
-        // const domRenderConfig = Object.assign()
-        // if (config && !config.window) {
-        //   config.window = window;
-        // }
-        // config.routerType = config.routerType || 'none';
-        targetConfig.messenger = DomRenderFinalProxy.final((_a = targetConfig.messenger) !== null && _a !== void 0 ? _a : new DefaultMessenger(targetConfig));
-        targetConfig.proxyExcludeTyps = (_b = targetConfig.proxyExcludeTyps) !== null && _b !== void 0 ? _b : [];
-        (_c = targetConfig.targetElements) !== null && _c !== void 0 ? _c : (targetConfig.targetElements = []);
-        for (const value of Object.values(drComponent)) {
-            const a = value(config);
-            if (!targetConfig.targetElements.find(it => it.name === a.name)) {
-                targetConfig.targetElements.push(a);
-            }
-            // if (targetConfig.targetElements.indexOf(value) === -1) {
-            // }
+            // return targetObject;
+            return { rootObject: targetObject, target, config: rootObject._domRender_config };
         }
-        // console.log('----------', targetConfig.proxyExcludeTyps)
-        // console.log('----------', targetConfig.targetElements)
+        const targetConfig = Object.assign({}, config);
+        eventManager !== null && eventManager !== void 0 ? eventManager : (eventManager = new EventManager(targetConfig.window));
+        (_a = (_e = targetConfig.window).domRender) !== null && _a !== void 0 ? _a : (_e.domRender = { configs: [] });
+        targetConfig.uuid = RandomUtils.uuid4();
+        targetConfig.messenger = DomRenderFinalProxy.final((_b = targetConfig.messenger) !== null && _b !== void 0 ? _b : new DefaultMessenger(targetConfig));
+        targetConfig.proxyExcludeTyps = (_c = targetConfig.proxyExcludeTyps) !== null && _c !== void 0 ? _c : [];
+        (_d = targetConfig.targetElements) !== null && _d !== void 0 ? _d : (targetConfig.targetElements = []);
         if (typeof Window !== 'undefined' && targetConfig.proxyExcludeTyps.indexOf(Window) === -1) {
             targetConfig.proxyExcludeTyps.push(Window);
         }
@@ -48,6 +65,9 @@ export class DomRender {
         if (typeof Promise !== 'undefined' && targetConfig.proxyExcludeTyps.indexOf(Promise) === -1) {
             targetConfig.proxyExcludeTyps.push(Promise);
         }
+        if (typeof ResizeObserver !== 'undefined' && targetConfig.proxyExcludeTyps.indexOf(ResizeObserver) === -1) {
+            targetConfig.proxyExcludeTyps.push(ResizeObserver);
+        }
         if (typeof ImageBitmap !== 'undefined' && targetConfig.proxyExcludeTyps.indexOf(ImageBitmap) === -1) {
             targetConfig.proxyExcludeTyps.push(ImageBitmap);
         }
@@ -60,9 +80,13 @@ export class DomRender {
         if (targetConfig.proxyExcludeTyps.indexOf(RawSet) === -1) {
             targetConfig.proxyExcludeTyps.push(RawSet);
         }
+        targetConfig.rootElement = target;
+        targetConfig.eventManager = eventManager;
+        targetConfig.window.domRender.configs.push(targetConfig);
         const domRender = new DomRenderProxy(rootObject, target, targetConfig);
         const dest = new Proxy(rootObject, domRender);
         targetObject = dest;
+        targetConfig.root = targetObject;
         // proxy 된 targetObject를 넣어줘야되서 뒤쪽에서 router를 생성해야함
         let targetRouter;
         if ((config === null || config === void 0 ? void 0 : config.routerType) === 'hash') {
@@ -78,6 +102,12 @@ export class DomRender {
             targetRouter = config.routerType;
         }
         targetConfig.router = targetRouter;
+        for (const value of Object.values(drComponent)) {
+            const a = value(targetConfig);
+            if (!targetConfig.targetElements.find(it => it.name === a.name)) {
+                targetConfig.targetElements.push(a);
+            }
+        }
         // console.log('cccccccccccccccccc', targetRouter)
         // targetRouter.go({path: targetRouter.getUrl()})
         // if (!config.router) {
@@ -90,7 +120,8 @@ export class DomRender {
         //   }
         // }
         domRender.run(targetObject);
-        return targetObject; // { rootObject: targetObject, config: targetConfig, target };
+        return { rootObject: targetObject, config: targetConfig, target };
+        // return targetObject;
     }
     static createComponent(param) {
         var _a, _b;

package/DomRenderProxy.d.ts

@@ -1,19 +1,23 @@
 import 'reflect-metadata';
 import { RawSet } from './rawsets/RawSet';
 import { Config } from './configs/Config';
+export declare const isWrapProxyDomRenderProxy: <T>(obj: T) => boolean;
+export declare const getDomRenderOriginObject: <T>(obj: T) => T;
+export declare const getDomRenderConfig: (obj: any) => Config | undefined;
+export declare const getDomRenderProxy: <T>(obj: T) => DomRenderProxy<T> | undefined;
 export declare class DomRenderProxy<T extends object> implements ProxyHandler<T> {
     _domRender_origin: T;
-    config: Config;
+    _domRender_config: Config;
     _domRender_ref: Map<object, Set<string>>;
     _rawSets: Map<string, Set<RawSet>>;
     _domRender_proxy?: T;
     _targets: Set<Node>;
-    constructor(_domRender_origin: T, target: Node | null | undefined, config: Config);
+    constructor(_domRender_origin: T, target: Node | null | undefined, _domRender_config: Config);
     static unFinal<T = any>(obj: T): T;
     static final<T = any>(obj: T): T;
     static isFinal<T = any>(obj: T): boolean;
     run(objProxy: T): void;
-    initRender(target: Node): void;
+    initRender(target: Node, rawSet?: RawSet): void;
     getRawSets(): RawSet[];
     render(raws?: RawSet[] | string, fullPathStr?: string): Promise<RawSet[]>;
     root(pathInfos: {

package/DomRenderProxy.js

@@ -9,14 +9,14 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import 'reflect-metadata';
 import { RawSet } from './rawsets/RawSet';
-import { EventManager, eventManager } from './events/EventManager';
+import { EventManager } from './events/EventManager';
 import { ScriptUtils } from '@dooboostore/core-web/script/ScriptUtils';
 import { DomRenderFinalProxy, Shield } from './types/Types';
 import { RawSetType } from './rawsets/RawSetType';
 import { DrThisProperty } from './operators/DrThisProperty';
 import { RawSetOperatorType } from './rawsets/RawSetOperatorType';
 import { ComponentSet } from './components/ComponentSet';
-import { DomRenderNoProxyKey } from './decorators/DomRenderNoProxy';
+import { DomRenderNoProxyKey, isDomRenderNoProxy } from './decorators/DomRenderNoProxy';
 import { isOnCreateRender } from './lifecycle/OnCreateRender';
 import { isOnInitRender } from './lifecycle/OnInitRender';
 import { isOnCreateRenderData } from './lifecycle/OnCreateRenderData';
@@ -25,17 +25,52 @@ import { DocumentUtils } from '@dooboostore/core-web/document/DocumentUtils';
 import { isDefined } from '@dooboostore/core/types';
 import { isOnBeforeReturnSet } from './lifecycle/OnBeforeReturnSet';
 import { isOnChildRenderedByProperty } from './lifecycle/OnChildRenderedByProperty';
+import { ObjectUtils } from '@dooboostore/core/object';
+import { ValidUtils } from '@dooboostore/core/valid';
+import { isOnProxyDomRender } from './lifecycle/OnProxyDomRender';
 const excludeGetSetPropertys = ['onBeforeReturnGet', 'onBeforeReturnSet', '__domrender_components', '__render', '_DomRender_isFinal', '_domRender_ref', '_rawSets', '_domRender_proxy', '_targets', '_DomRender_origin', '_DomRender_ref', '_DomRender_proxy'];
+export const isWrapProxyDomRenderProxy = (obj) => {
+    return obj && typeof obj === 'object' && ('_DomRender_isProxy' in obj);
+};
+export const getDomRenderOriginObject = (obj) => {
+    if (isWrapProxyDomRenderProxy(obj)) {
+        return obj._domRender_origin;
+    }
+    return obj;
+};
+export const getDomRenderConfig = (obj) => {
+    if (isWrapProxyDomRenderProxy(obj)) {
+        return obj._domRender_config;
+    }
+    return undefined;
+};
+//@ts-ignore
+export const getDomRenderProxy = (obj) => {
+    if (isWrapProxyDomRenderProxy(obj)) {
+        //@ts-ignore
+        return obj._domRender_proxy;
+    }
+    return undefined;
+};
 export class DomRenderProxy {
-    constructor(_domRender_origin, target, config) {
+    constructor(_domRender_origin, target, _domRender_config) {
         this._domRender_origin = _domRender_origin;
-        this.config = config;
+        this._domRender_config = _domRender_config;
         this._domRender_ref = new Map();
         this._rawSets = new Map();
+        // public _firstTarget: Node;
         this._targets = new Set();
         if (target) {
             this._targets.add(target);
+            // this._firstTarget = target;
         }
+        // setInterval(() => {
+        //   this._rawSets.forEach(it => {
+        //     Array.from(it).forEach(it => {
+        //       console.log(it, it.isConnected)
+        //     })
+        //   });
+        // }, 1000)
     }
     static unFinal(obj) {
         return DomRenderFinalProxy.unFinal(obj);
@@ -47,10 +82,11 @@ export class DomRenderProxy {
         return DomRenderFinalProxy.isFinal(obj);
     }
     run(objProxy) {
-        var _a;
         this._domRender_proxy = objProxy;
-        (_a = objProxy === null || objProxy === void 0 ? void 0 : objProxy.onProxyDomRender) === null || _a === void 0 ? void 0 : _a.call(objProxy, this.config);
-        const obj = objProxy._DomRender_origin;
+        if (isOnProxyDomRender(objProxy)) {
+            objProxy.onProxyDomRender(this._domRender_config);
+        }
+        const obj = getDomRenderOriginObject(objProxy);
         if (obj) {
             Object.keys(obj).forEach(it => {
                 var _a, _b;
@@ -65,8 +101,9 @@ export class DomRenderProxy {
                 }
                 const target = obj[it];
                 if (target !== undefined && target !== null && typeof target === 'object' && !DomRenderProxy.isFinal(target) && !Object.isFrozen(target) && !(obj instanceof Shield)) {
-                    const filter = (_b = (_a = this.config.proxyExcludeTyps) === null || _a === void 0 ? void 0 : _a.filter(it => target instanceof it)) !== null && _b !== void 0 ? _b : [];
-                    if (filter.length === 0) {
+                    const isExcluded = (_b = (_a = this._domRender_config.proxyExcludeTyps) === null || _a === void 0 ? void 0 : _a.some(it => target instanceof it)) !== null && _b !== void 0 ? _b : false;
+                    // const filter = this._domRender_config.proxyExcludeTyps?.filter(it => target instanceof it) ?? [];
+                    if (!isExcluded) {
                         const proxyAfter = this.proxy(objProxy, target, it);
                         obj[it] = proxyAfter;
                     }
@@ -78,7 +115,7 @@ export class DomRenderProxy {
             this.initRender(target);
         });
     }
-    initRender(target) {
+    initRender(target, rawSet) {
         var _a, _b, _c;
         // if (target instanceof Element) {
         //   target.setAttribute('dr-this', 'this');
@@ -110,12 +147,12 @@ export class DomRenderProxy {
         }
         // const innerHTML = (target as any).innerHTML ?? '';
         this._targets.add(target);
-        const rawSets = RawSet.checkPointCreates(target, this._domRender_proxy, this.config);
+        const rawSets = RawSet.checkPointCreates(target, this._domRender_proxy, this._domRender_config);
         // console.log('initRender -------rawSet', rawSets)
         // 중요 초기에 한번 튕겨줘야함.
-        eventManager.applyEvent(this._domRender_proxy, eventManager.findAttrElements(target, this.config), this.config);
+        this._domRender_config.eventManager.applyEvent(this._domRender_proxy, this._domRender_config.eventManager.findAttrElements(target, this._domRender_config), this._domRender_config);
         rawSets.forEach(it => {
-            const variables = it.getUsingTriggerVariables(this.config);
+            const variables = it.getUsingTriggerVariables(this._domRender_config);
             if (variables.size <= 0) {
                 this.addRawSet('', it);
             }
@@ -125,7 +162,6 @@ export class DomRenderProxy {
                 });
             }
         });
-        // console.log('1111111111111', this.getRawSets());
         this.render(this.getRawSets()).then(it => {
             var _a, _b;
             // const render = {target} as Render;
@@ -143,7 +179,7 @@ export class DomRenderProxy {
                 // }
             }
             if (isOnInitRender(this._domRender_proxy)) {
-                this._domRender_proxy.onInitRender(initParam, {});
+                this._domRender_proxy.onInitRender(initParam, rawSet !== null && rawSet !== void 0 ? rawSet : {});
             }
         });
     }
@@ -171,7 +207,7 @@ export class DomRenderProxy {
             const rawSets = raws !== null && raws !== void 0 ? raws : this.getRawSets();
             // console.log('----', rawSets);
             for (const it of rawSets) {
-                it.getUsingTriggerVariables(this.config).forEach(path => {
+                it.getUsingTriggerVariables(this._domRender_config).forEach(path => {
                     // console.log('getUsingTriggerVariables->', path);
                     this.addRawSet(path, it);
                 });
@@ -186,20 +222,20 @@ export class DomRenderProxy {
                     }
                     else if (it.type === RawSetType.TARGET_ELEMENT && ((_e = (_d = it.dataSet) === null || _d === void 0 ? void 0 : _d.render) === null || _e === void 0 ? void 0 : _e.currentThis) && fullPathStr && targetAttrMap) {
                         new Map(JSON.parse(targetAttrMap)).forEach((v, k) => {
-                            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-                            var _m;
+                            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+                            var _o;
                             // it?.data.onChangeAttrRender(k, null, v);
                             const isUsing = EventManager.isUsingThisVar(v, `this.${fullPathStr}`);
                             if (isUsing) {
-                                const targetAttrObject = RawSet.getAttributeObject(it.point.node, { script: (_c = (_b = (_a = it.dataSet) === null || _a === void 0 ? void 0 : _a.render) === null || _b === void 0 ? void 0 : _b.renderScript) !== null && _c !== void 0 ? _c : '', obj: Object.assign(this._domRender_proxy, { __render: (_d = it.dataSet) === null || _d === void 0 ? void 0 : _d.render }) });
-                                (_e = (_m = it.dataSet).render) !== null && _e !== void 0 ? _e : (_m.render = {});
+                                const targetAttrObject = RawSet.getAttributeObject(it.point.node, { script: (_c = (_b = (_a = it.dataSet) === null || _a === void 0 ? void 0 : _a.render) === null || _b === void 0 ? void 0 : _b.renderScript) !== null && _c !== void 0 ? _c : '', obj: Object.assign((_d = this._domRender_proxy) !== null && _d !== void 0 ? _d : {}, { __render: (_e = it.dataSet) === null || _e === void 0 ? void 0 : _e.render }) });
+                                (_f = (_o = it.dataSet).render) !== null && _f !== void 0 ? _f : (_o.render = {});
                                 it.dataSet.render.attribute = targetAttrObject;
                                 // const render = it.dataSet?.render;
                                 // console.log('render-->!!!!!', it.dataSet.render);
                                 // const script = `${render.renderScript} return ${v} `;
                                 // const cval = ScriptUtils.eval(script, Object.assign(this._domRender_proxy ?? {}, { __render: render }));
-                                if (isOnChangeAttrRender((_g = (_f = it.dataSet) === null || _f === void 0 ? void 0 : _f.render) === null || _g === void 0 ? void 0 : _g.currentThis)) {
-                                    (_l = (_k = (_j = (_h = it.dataSet) === null || _h === void 0 ? void 0 : _h.render) === null || _j === void 0 ? void 0 : _j.currentThis) === null || _k === void 0 ? void 0 : _k.onChangeAttrRender) === null || _l === void 0 ? void 0 : _l.call(_k, k, targetAttrObject[k], { rawSet: it });
+                                if (isOnChangeAttrRender((_h = (_g = it.dataSet) === null || _g === void 0 ? void 0 : _g.render) === null || _h === void 0 ? void 0 : _h.currentThis)) {
+                                    (_m = (_l = (_k = (_j = it.dataSet) === null || _j === void 0 ? void 0 : _j.render) === null || _k === void 0 ? void 0 : _k.currentThis) === null || _l === void 0 ? void 0 : _l.onChangeAttrRender) === null || _m === void 0 ? void 0 : _m.call(_l, k, targetAttrObject[k], { rawSet: it });
                                 }
                             }
                             // console.log('---?', v, fullPathStr, isUsing);
@@ -207,7 +243,7 @@ export class DomRenderProxy {
                         // ------------------->
                     }
                     else {
-                        const rawSets = yield it.render(this._domRender_proxy, this.config);
+                        const rawSets = yield it.render(this._domRender_proxy, this._domRender_config);
                         // 그외 자식들 render
                         if (rawSets && rawSets.length > 0) {
                             yield this.render(rawSets);
@@ -272,7 +308,7 @@ export class DomRenderProxy {
                 const front = strings.slice(0, strings.length - 1).map(it => isNaN(Number(it)) ? '.' + it : `[${it}]`).join('');
                 const lastPropertyName = strings[strings.length - 1];
                 const path = 'this' + front;
-                const data = ScriptUtils.evalReturn(path, this._domRender_proxy);
+                const data = ScriptUtils.evalReturn(ObjectUtils.Path.toOptionalChainPath(path), this._domRender_proxy);
                 // console.log('root-->', this._rawSets, path, data );
                 // console.log('--!!!!', fullPathStr, iterable, data, front, last);
                 // 왜여기서 promise를 했을까를 생각해보면......훔.. 변수변경과 화면 뿌려주는걸 동기로하면 성능이 안나오고 비현실적이다.  그래서 promise
@@ -305,7 +341,7 @@ export class DomRenderProxy {
                                 startElement.setAttribute(RawSet.DR_HAS_KEYS_OPTIONNAME, keys.filter(it => it !== lastPropertyName).join(','));
                             }
                             if (!keys.includes(lastPropertyName)) {
-                                const raws = DrThisProperty.append(this._domRender_proxy, fullPathStr, lastPropertyName, it, this.config);
+                                const raws = DrThisProperty.append(this._domRender_proxy, fullPathStr, lastPropertyName, it, this._domRender_config);
                                 if (raws) {
                                     rawSets.push(...raws);
                                 }
@@ -325,6 +361,7 @@ export class DomRenderProxy {
                         }
                     }
                     else if (iterable) {
+                        // console.log('------------',iterable, fullPaths)
                         rData = yield this.render(Array.from(iterable), fullPathStr);
                     }
                     // console.log('-----------', this, lastPropertyName );
@@ -338,8 +375,8 @@ export class DomRenderProxy {
                     this._targets.forEach(it => {
                         // return;
                         if (it.nodeType === Node.DOCUMENT_FRAGMENT_NODE || it.nodeType === Node.ELEMENT_NODE) {
-                            const targets = eventManager.findAttrElements(it, this.config);
-                            eventManager.changeVar(this._domRender_proxy, targets, `this.${fullPathStr}`, this.config);
+                            const targets = this._domRender_config.eventManager.findAttrElements(it, this._domRender_config);
+                            this._domRender_config.eventManager.changeVar(this._domRender_proxy, targets, `this.${fullPathStr}`, this._domRender_config);
                         }
                     });
                     //랜더대상된게있으면
@@ -367,7 +404,7 @@ export class DomRenderProxy {
         //     return obj;
         //   }
         // }catch (e) {}
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e;
         // console.log('set-->', p, value, target, receiver, Reflect.getMetadata(DomRenderNoProxyKey, target, p) );
         if ((typeof p === 'string' && p !== '__domrender_components' && excludeGetSetPropertys.includes(p)) ||
             Reflect.getMetadata(DomRenderNoProxyKey, target, p)) {
@@ -402,12 +439,16 @@ export class DomRenderProxy {
         // const rootDomRenderProxy = this.findRootDomRenderProxy();
         // console.log('set!!!!!!!', fullPathInfo, rootDomRenderProxy)
         // console.log('--------rootDom',fullPathInfo, rootDomRenderProxy, rootDomRenderProxy._domRender_proxy)
-        (_a = DocumentUtils.querySelectorAllByAttributeName(this.config.window.document, EventManager.normalAttrMapAttrName)) === null || _a === void 0 ? void 0 : _a.forEach(elementInfo => {
+        const rootElement = (_a = this._domRender_config.rootElement) !== null && _a !== void 0 ? _a : this._domRender_config.window.document;
+        (_b = DocumentUtils.querySelectorAllByAttributeName(rootElement, EventManager.normalAttrMapAttrName)) === null || _b === void 0 ? void 0 : _b.forEach(elementInfo => {
+            // @ts-ignore
+            // const optionalPath = ObjectUtils.Path.toOptionalChainPath(elementInfo.value);
             const targets = new Map(ScriptUtils.evalReturn(elementInfo.value));
             Array.from(targets.entries()).filter(([key, value]) => value.trim()).filter(isDefined).flatMap(([key, valueScript]) => {
                 return fullPathInfo.flat().filter(it => valueScript.includes(`this.${it.path}`)).flatMap(it => ({ key, valueScript: valueScript, pathInfo: it }));
             }).forEach(it => {
-                const value1 = ScriptUtils.evalReturn(it.valueScript, it.pathInfo.obj);
+                const optionalPath = ObjectUtils.Path.toOptionalChainPath(it.valueScript);
+                const value1 = ScriptUtils.evalReturn(optionalPath, it.pathInfo.obj);
                 // console.log('proxy set!Attribut======', it.key, value1)
                 if (value1 === null) {
                     elementInfo.element.removeAttribute(it.key);
@@ -419,18 +460,23 @@ export class DomRenderProxy {
                 }
             });
         });
-        // 여기서 링크 같은거 해줘야함
-        (_b = DocumentUtils.querySelectorAllByAttributeName(this.config.window.document, EventManager.linkTargetMapAttrName)) === null || _b === void 0 ? void 0 : _b.forEach(elementInfo => {
+        //여기서 링크 같은거 해줘야함  *-link로 변수값이 변경되면 그걸 참고하고있는 다른것들에도 해줘야한다.
+        (_c = DocumentUtils.querySelectorAllByAttributeName(rootElement, EventManager.linkTargetMapAttrName)) === null || _c === void 0 ? void 0 : _c.forEach(elementInfo => {
+            // @ts-ignore
             const targets = new Map(ScriptUtils.evalReturn(elementInfo.value));
             Array.from(targets.entries()).filter(([key, value]) => value.trim()).filter(isDefined).flatMap(([key, valueScript]) => {
                 return fullPathInfo.flat().filter(it => valueScript.includes(`this.${it.path}`)).flatMap(it => ({ key, valueScript: valueScript, pathInfo: it }));
             }).forEach(info => {
                 const value1 = ScriptUtils.evalReturn(info.valueScript, info.pathInfo.obj);
-                if (value1 === null) {
-                    elementInfo.element.removeAttribute(info.key);
-                }
-                else {
-                    elementInfo.element.setAttribute(info.key, value1);
+                const applyAttributeName = EventManager.linkAttrs.find(it => it.name === info.key);
+                if (applyAttributeName) {
+                    if (value1 === null) {
+                        elementInfo.element.removeAttribute(applyAttributeName.property);
+                    }
+                    else {
+                        // console.log('ppppppppppppppppppppppp', applyAttributeName, elementInfo)
+                        elementInfo.element.setAttribute(applyAttributeName.property, value1);
+                    }
                 }
             });
             Array.from(targets.entries()).filter(([key, value]) => value.trim()).filter(isDefined).flatMap(([key, valueScript]) => {
@@ -442,9 +488,9 @@ export class DomRenderProxy {
                 }
             });
         });
-        if (('onBeforeReturnSet' in receiver) && typeof p === 'string' && !((_c = this.config.proxyExcludeOnBeforeReturnSets) !== null && _c !== void 0 ? _c : []).concat(excludeGetSetPropertys).includes(p)) {
+        if (('onBeforeReturnSet' in receiver) && typeof p === 'string' && !((_d = this._domRender_config.proxyExcludeOnBeforeReturnSets) !== null && _d !== void 0 ? _d : []).concat(excludeGetSetPropertys).includes(p)) {
             if (isOnBeforeReturnSet(receiver)) {
-                (_d = receiver.onBeforeReturnSet) === null || _d === void 0 ? void 0 : _d.call(receiver, p, value, fullPathInfo.map(it => it.map(it => it.path).join()));
+                (_e = receiver.onBeforeReturnSet) === null || _e === void 0 ? void 0 : _e.call(receiver, p, value, fullPathInfo.map(it => it.map(it => it.path).join()));
             }
         }
         return true;
@@ -452,13 +498,16 @@ export class DomRenderProxy {
     get(target, p, receiver) {
         var _a, _b;
         // console.log('get-->', target, p, receiver);
-        if (p === '_DomRender_origin') {
+        if (p === '_DomRender_origin' || p === '_domRender_origin') {
             return this._domRender_origin;
         }
-        else if (p === '_DomRender_ref') {
+        else if (p === '_DomRender_ref' || p === '_domRender_ref') {
             return this._domRender_ref;
         }
-        else if (p === '_DomRender_proxy') {
+        else if (p === '_DomRender_config' || p === '_domRender_config') {
+            return this._domRender_config;
+        }
+        else if (p === '_DomRender_proxy' || p === '_domRender_proxy') {
             return this;
         }
         else {
@@ -480,7 +529,7 @@ export class DomRenderProxy {
             if (it && typeof it === 'object' && ('_DomRender_isProxy' in it) && Object.prototype.toString.call(it._DomRender_origin) === '[object Date]') {
                 it = it._DomRender_origin;
             }
-            if (('onBeforeReturnGet' in receiver) && typeof p === 'string' && !((_a = this.config.proxyExcludeOnBeforeReturnGets) !== null && _a !== void 0 ? _a : []).concat(excludeGetSetPropertys).includes(p)) {
+            if (('onBeforeReturnGet' in receiver) && typeof p === 'string' && !((_a = this._domRender_config.proxyExcludeOnBeforeReturnGets) !== null && _a !== void 0 ? _a : []).concat(excludeGetSetPropertys).includes(p)) {
                 (_b = receiver === null || receiver === void 0 ? void 0 : receiver.onBeforeReturnGet) === null || _b === void 0 ? void 0 : _b.call(receiver, p, it, this.root([[{ path: p, obj: this._domRender_proxy }]], it, false));
             }
             return it;
@@ -499,22 +548,44 @@ export class DomRenderProxy {
     proxy(parentProxy, obj, p) {
         var _a, _b;
         try {
-            const isNoProxy = Reflect.getMetadata(DomRenderNoProxyKey, obj, p) || Reflect.getMetadata(DomRenderNoProxyKey, Object.getPrototypeOf(obj).constructor);
-            if (isNoProxy) {
+            // const isNoProxy = Reflect.getMetadata(DomRenderNoProxyKey, obj, p) || Reflect.getMetadata(DomRenderNoProxyKey, Object.getPrototypeOf(obj).constructor);
+            const isObject = typeof obj === 'object';
+            const isNoProxy = isObject && isDomRenderNoProxy(obj, p);
+            const isExclude = (_b = ((_a = this._domRender_config.proxyExcludeTyps) === null || _a === void 0 ? void 0 : _a.some(it => obj instanceof it))) !== null && _b !== void 0 ? _b : false;
+            const isFinal = isObject && DomRenderProxy.isFinal(obj);
+            const isFrozen = Object.isFrozen(obj);
+            const isShield = obj instanceof Shield;
+            if (isNoProxy || isExclude || ValidUtils.isNullOrUndefined(obj) || !isObject || isFinal || isFrozen || isShield) {
                 return obj;
             }
         }
         catch (e) {
         }
-        const proxyTarget = ((_b = (_a = this.config.proxyExcludeTyps) === null || _a === void 0 ? void 0 : _a.filter(it => obj instanceof it)) !== null && _b !== void 0 ? _b : []).length <= 0;
-        if (proxyTarget && obj !== undefined && obj !== null && typeof obj === 'object' && !('_DomRender_isProxy' in obj) && !DomRenderProxy.isFinal(obj) && !Object.isFrozen(obj) && !(obj instanceof Shield)) {
-            const domRender = new DomRenderProxy(obj, undefined, this.config);
+        /*
+            const proxyTarget = (this._domRender_config.proxyExcludeTyps?.filter(it => obj instanceof it) ?? []).length <= 0;
+            if (proxyTarget && obj !== undefined && obj !== null && typeof obj === 'object' && !('_DomRender_isProxy' in obj) && !DomRenderProxy.isFinal(obj) && !Object.isFrozen(obj) && !(obj instanceof Shield)) {
+              const domRender = new DomRenderProxy(obj, undefined, this._domRender_config);
+              domRender.addRef(parentProxy, p);
+              const proxy = new Proxy(obj, domRender);
+              domRender.run(proxy);
+              return proxy;
+            }
+            if (proxyTarget && obj !== undefined && obj !== null && typeof obj === 'object' && ('_DomRender_isProxy' in obj) && !DomRenderProxy.isFinal(obj) && !Object.isFrozen(obj) && !(obj instanceof Shield)) {
+              const d = (obj as any)._DomRender_proxy as DomRenderProxy<T>;
+              d.addRef(this._domRender_proxy!, p);
+              return obj;
+            } else {
+              return obj;
+            }
+         */
+        if (!isWrapProxyDomRenderProxy(obj)) {
+            const domRender = new DomRenderProxy(obj, undefined, this._domRender_config);
             domRender.addRef(parentProxy, p);
             const proxy = new Proxy(obj, domRender);
             domRender.run(proxy);
             return proxy;
         }
-        if (proxyTarget && obj !== undefined && obj !== null && typeof obj === 'object' && ('_DomRender_isProxy' in obj) && !DomRenderProxy.isFinal(obj) && !Object.isFrozen(obj) && !(obj instanceof Shield)) {
+        if (isWrapProxyDomRenderProxy(obj)) {
             const d = obj._DomRender_proxy;
             d.addRef(this._domRender_proxy, p);
             return obj;