dom-render 1.0.75 → 1.0.78

package/DomRenderProxy.d.ts

@@ -14,7 +14,7 @@ export declare class DomRenderProxy<T extends object> implements ProxyHandler<T>
     run(objProxy: T): void;
     initRender(target: Node): void;
     getRawSets(): RawSet[];
-    render(raws?: RawSet[] | string): void;
+    render(raws?: RawSet[] | string, fullPathStr?: string): void;
     root(paths: string[], value?: any, lastDoneExecute?: boolean): string[];
     set(target: T, p: string | symbol, value: any, receiver: T): boolean;
     get(target: T, p: string | symbol, receiver: any): any;

package/DomRenderProxy.js

@@ -28,9 +28,9 @@ var DomRenderProxy = /** @class */ (function () {
     };
     DomRenderProxy.prototype.run = function (objProxy) {
         var _this = this;
-        var _a;
+        var _a, _b;
         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);
+        (_b = (_a = objProxy) === null || _a === void 0 ? void 0 : _a.onProxyDomRender) === null || _b === void 0 ? void 0 : _b.call(_a, this.config);
         var obj = objProxy._DomRender_origin;
         if (obj) {
             Object.keys(obj).forEach(function (it) {
@@ -56,8 +56,8 @@ var DomRenderProxy = /** @class */ (function () {
     DomRenderProxy.prototype.initRender = function (target) {
         var _this = this;
         var _a, _b, _c, _d, _e, _f, _g;
-        var onCreate = (_b = (_a = target).getAttribute) === null || _b === void 0 ? void 0 : _b.call(_a, 'dr-on-create');
-        var createParam = undefined;
+        var onCreate = (_b = (_a = target).getAttribute) === null || _b === void 0 ? void 0 : _b.call(_a, "".concat(EventManager_1.EventManager.attrPrefix, "on-create"));
+        var createParam;
         if (onCreate) {
             createParam = ScriptUtils_1.ScriptUtils.evalReturn(onCreate, this._domRender_proxy);
         }
@@ -65,6 +65,8 @@ var DomRenderProxy = /** @class */ (function () {
         var innerHTML = (_e = target.innerHTML) !== null && _e !== void 0 ? _e : '';
         this._targets.add(target);
         var rawSets = RawSet_1.RawSet.checkPointCreates(target, this.config);
+        // console.log('initRender -------rawSet', rawSets)
+        // 중요 초기에 한번 튕겨줘야함.
         EventManager_1.eventManager.applyEvent(this._domRender_proxy, EventManager_1.eventManager.findAttrElements(target, this.config), this.config);
         rawSets.forEach(function (it) {
             var variables = it.getUsingTriggerVariables(_this.config);
@@ -93,7 +95,8 @@ var DomRenderProxy = /** @class */ (function () {
         });
         return Array.from(set);
     };
-    DomRenderProxy.prototype.render = function (raws) {
+    // 중요 important
+    DomRenderProxy.prototype.render = function (raws, fullPathStr) {
         var _this = this;
         if (typeof raws === 'string') {
             var iter = this._rawSets.get(raws);
@@ -106,15 +109,40 @@ var DomRenderProxy = /** @class */ (function () {
         }
         var removeRawSets = [];
         (raws !== null && raws !== void 0 ? raws : this.getRawSets()).forEach(function (it) {
-            var _a;
+            var _a, _b, _c;
             it.getUsingTriggerVariables(_this.config).forEach(function (path) { return _this.addRawSet(path, it); });
-            // console.log('------->', it, it.isConnected)
+            // console.log('------->', it, it.isConnected);
             if (it.isConnected) {
-                if ((_a = it.detect) === null || _a === void 0 ? void 0 : _a.action) {
+                // 중요 render될때 targetAttribute 체크 해야함.
+                var targetAttrMap = (_b = (_a = it.point.node) === null || _a === void 0 ? void 0 : _a.getAttribute) === null || _b === void 0 ? void 0 : _b.call(_a, EventManager_1.EventManager.normalAttrMapAttrName);
+                if ((_c = it.detect) === null || _c === void 0 ? void 0 : _c.action) {
                     it.detect.action();
                 }
+                else if (it.type === RawSet_1.RawSetType.TARGET_ELEMENT && it.data && fullPathStr && targetAttrMap && it.fragment.render) {
+                    new Map(JSON.parse(targetAttrMap)).forEach(function (v, k) {
+                        // it?.data.onChangeAttrRender(k, null, v);
+                        var isUsing = EventManager_1.EventManager.isUsingThisVar(v, "this.".concat(fullPathStr));
+                        if (isUsing) {
+                            var render = it.fragment.render;
+                            // console.log('render-->', (it.fragment as any).render)
+                            var script = "".concat(render.renderScript, " return ").concat(v, " ");
+                            var cval = ScriptUtils_1.ScriptUtils.eval(script, Object.assign(_this._domRender_proxy, { __render: render }));
+                            it.data.onChangeAttrRender(k, cval);
+                        }
+                        // console.log('---?', v, fullPathStr, isUsing);
+                    });
+                    // ------------------->
+                }
                 else {
                     var rawSets = it.render(_this._domRender_proxy, _this.config);
+                    // 대상 attribute 있으면
+                    // const targetAttrs = (it.point.node as Element).getAttribute(EventManager.normalAttrMapAttrName);
+                    // if (it?.data.onChangeAttrRender && it.type === RawSetType.TARGET_ELEMENT && targetAttrs) {
+                    //     new Map<string, string>(JSON.parse(targetAttrs)).forEach((v, k) => {
+                    //         it?.data.onChangeAttrRender(k, null, v);
+                    //     });
+                    // }
+                    // 그외 자식들 render
                     if (rawSets && rawSets.length > 0) {
                         _this.render(rawSets);
                     }
@@ -157,6 +185,7 @@ var DomRenderProxy = /** @class */ (function () {
             var fullPathStr_1 = strings.map(function (it) { return isNaN(Number(it)) ? '.' + it : "[".concat(it, "]"); }).join('').slice(1);
             if (lastDoneExecute) {
                 var iterable = this._rawSets.get(fullPathStr_1);
+                // console.log('----->', iterable);
                 // array check
                 var front = strings.slice(0, strings.length - 1).map(function (it) { return isNaN(Number(it)) ? '.' + it : "[".concat(it, "]"); }).join('');
                 var last = strings[strings.length - 1];
@@ -168,11 +197,14 @@ var DomRenderProxy = /** @class */ (function () {
                     }
                 }
                 else if (iterable) {
-                    this.render(Array.from(iterable));
+                    this.render(Array.from(iterable), fullPathStr_1);
                 }
                 this._targets.forEach(function (it) {
+                    // console.log('target------->,', it)
+                    // return;
                     if (it.nodeType === Node.DOCUMENT_FRAGMENT_NODE || it.nodeType === Node.ELEMENT_NODE) {
                         var targets = EventManager_1.eventManager.findAttrElements(it, _this.config);
+                        // console.log('------>', targets);
                         EventManager_1.eventManager.changeVar(_this._domRender_proxy, targets, "this.".concat(fullPathStr_1), _this.config);
                     }
                 });
@@ -182,7 +214,7 @@ var DomRenderProxy = /** @class */ (function () {
         return fullPaths;
     };
     DomRenderProxy.prototype.set = function (target, p, value, receiver) {
-        var _a, _b;
+        var _a, _b, _c;
         if (typeof p === 'string' && p !== '__domrender_components' && excludeGetSetPropertys.includes(p)) {
             target[p] = value;
             return true;
@@ -203,12 +235,12 @@ var DomRenderProxy = /** @class */ (function () {
         }
         // console.log('full path:', fullPath);
         if (('onBeforeReturnSet' in receiver) && typeof p === 'string' && !((_a = this.config.proxyExcludeOnBeforeReturnSets) !== null && _a !== void 0 ? _a : []).concat(excludeGetSetPropertys).includes(p)) {
-            (_b = receiver === null || receiver === void 0 ? void 0 : receiver.onBeforeReturnSet) === null || _b === void 0 ? void 0 : _b.call(receiver, p, value, fullPath);
+            (_c = (_b = receiver) === null || _b === void 0 ? void 0 : _b.onBeforeReturnSet) === null || _c === void 0 ? void 0 : _c.call(_b, p, value, fullPath);
         }
         return true;
     };
     DomRenderProxy.prototype.get = function (target, p, receiver) {
-        var _a, _b;
+        var _a, _b, _c;
         // console.log('get-->', target, p, receiver);
         if (p === '_DomRender_origin') {
             return this._domRender_origin;
@@ -239,7 +271,7 @@ var DomRenderProxy = /** @class */ (function () {
                 it_1 = it_1._DomRender_origin;
             }
             if (('onBeforeReturnGet' in receiver) && typeof p === 'string' && !((_a = this.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_1, this.root([p], it_1, false));
+                (_c = (_b = receiver) === null || _b === void 0 ? void 0 : _b.onBeforeReturnGet) === null || _c === void 0 ? void 0 : _c.call(_b, p, it_1, this.root([p], it_1, false));
             }
             return it_1;
         }
@@ -279,7 +311,7 @@ var DomRenderProxy = /** @class */ (function () {
     };
     DomRenderProxy.prototype.addRawSet = function (path, rawSet) {
         var _a;
-        // console.log('addRawSet-->', path, rawSet)
+        // console.log('addRawSet--> path:', path, 'rawSet:', rawSet)
         if (!this._rawSets.get(path)) {
             this._rawSets.set(path, new Set());
         }

package/README.MD

@@ -7,7 +7,7 @@ DOM-RENDER
 
 # 🚀 Quick start 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/dom-render@1.0.75/dist/bundle.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/dom-render@1.0.78/dist/bundle.js"></script>
 ```
 ```html
 <!DOCTYPE html>
@@ -54,6 +54,32 @@ ${this.name}$  <!-- outout: <i>my name is dom-render</i> -->
 
 # dom-render attributes
 
+
+## attribute change, bind
+<details>
+  <summary>attribute<strong>🔻(click)</strong></summary>
+
+### attribute
+```html
+<body id="app">
+  <input type="text" value="${this.name}$" style="${'color: '+this.color}$">
+  <button dr-event-click="this.changeData();">change</button>
+</body>
+```
+```typescript
+class Data {
+    name = 'my name is dom-render';
+    color = '#ff0000';
+
+    changeData() {
+        this.name = RandomUtils.getRandomString(10);
+        this.color = RandomUtils.getRandomColor();
+    }
+}
+const data = DomRender.run(new Data(), document.querySelector('#app')!);
+```
+</details>
+
 ## control, print Statement
 <details>
   <summary>dr-if<strong>🔻(click)</strong></summary>
@@ -73,6 +99,10 @@ ${this.name}$  <!-- outout: <i>my name is dom-render</i> -->
 ```
 </details>
 
+
+
+
+
 <details>
   <summary>dr-for, dr-for-of<strong>🔻(click)</strong></summary>
 

package/RawSet.d.ts

@@ -47,6 +47,12 @@ export declare type ElementInitCallBack = {
     targetElement: TargetElement;
     creatorMetaData: CreatorMetaData;
 };
+export declare enum RawSetType {
+    TEXT = "TEXT",
+    TARGET_ELEMENT = "TARGET_ELEMENT",
+    TARGET_ATTR = "TARGET_ATTR",
+    UNKOWN = "UNKOWN"
+}
 export declare type Render = {
     rawset?: RawSet;
     scripts?: {
@@ -63,8 +69,10 @@ export declare type Render = {
 };
 export declare class RawSet {
     uuid: string;
+    type: RawSetType;
     point: {
         start: Comment;
+        node: Node;
         end: Comment;
         thisVariableName?: string | null;
     };
@@ -72,7 +80,7 @@ export declare class RawSet {
     detect?: {
         action: Function;
     } | undefined;
-    data: any;
+    data?: any;
     static readonly DR = "dr";
     static readonly DR_IF_NAME = "dr-if";
     static readonly DR_FOR_NAME = "dr-for";
@@ -96,8 +104,9 @@ export declare class RawSet {
     static readonly drAttrsOriginName: Attrs;
     static readonly DR_TAGS: never[];
     static readonly DR_ATTRIBUTES: string[];
-    constructor(uuid: string, point: {
+    constructor(uuid: string, type: RawSetType, point: {
         start: Comment;
+        node: Node;
         end: Comment;
         thisVariableName?: string | null;
     }, fragment: DocumentFragment, detect?: {
@@ -133,7 +142,8 @@ export declare class RawSet {
     static drThisCreate(element: Element, drThis: string, drVarOption: string, drStripOption: boolean | string | null, obj: any, config: Config, set?: ComponentSet): DocumentFragment;
     static createComponentTargetAttribute(name: string, getThisObj: (element: Element, attrValue: string, obj: any, rawSet: RawSet) => any, factory: (element: Element, attrValue: string, obj: any, rawSet: RawSet) => DocumentFragment): TargetAttr;
     static createComponentTargetElement(name: string, objFactory: (element: Element, obj: any, rawSet: RawSet, counstructorParam: any[]) => any, template: string | undefined, styles: string[] | undefined, styleLocale: boolean, config: Config): TargetElement;
-    static exporesionGrouops(data: string): RegExpExecArray[];
+    static isExporesion(data: string | null): boolean;
+    static exporesionGrouops(data: string | null): RegExpExecArray[];
     static styleTransformLocal(styleBody: string | string[], id: string, styleTagWrap?: boolean, locale?: boolean): string;
     static destroy(obj: any | undefined, parameter: any[], config: Config, destroyOptions?: (DestroyOptionType | string)[]): void;
 }

package/RawSet.js

@@ -20,7 +20,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RawSet = exports.DestroyOptionType = void 0;
+exports.RawSet = exports.RawSetType = exports.DestroyOptionType = void 0;
 var RandomUtils_1 = require("./utils/random/RandomUtils");
 var StringUtils_1 = require("./utils/string/StringUtils");
 var ScriptUtils_1 = require("./utils/script/ScriptUtils");
@@ -47,14 +47,22 @@ var DestroyOptionType;
     DestroyOptionType["NO_DESTROY"] = "NO_DESTROY";
     DestroyOptionType["NO_MESSENGER_DESTROY"] = "NO_MESSENGER_DESTROY";
 })(DestroyOptionType = exports.DestroyOptionType || (exports.DestroyOptionType = {}));
+var RawSetType;
+(function (RawSetType) {
+    RawSetType["TEXT"] = "TEXT";
+    RawSetType["TARGET_ELEMENT"] = "TARGET_ELEMENT";
+    RawSetType["TARGET_ATTR"] = "TARGET_ATTR";
+    RawSetType["UNKOWN"] = "UNKOWN";
+})(RawSetType = exports.RawSetType || (exports.RawSetType = {}));
 var RawSet = /** @class */ (function () {
-    function RawSet(uuid, point, fragment, detect, data) {
-        if (data === void 0) { data = {}; }
+    function RawSet(uuid, type, point, fragment, detect, data) {
         this.uuid = uuid;
+        this.type = type;
         this.point = point;
         this.fragment = fragment;
         this.detect = detect;
         this.data = data;
+        // console.log('rawset constructor->', (this.point.node as Element).getAttributeNames());
     }
     Object.defineProperty(RawSet.prototype, "isConnected", {
         get: function () {
@@ -63,6 +71,7 @@ var RawSet = /** @class */ (function () {
         enumerable: false,
         configurable: true
     });
+    // 중요
     RawSet.prototype.getUsingTriggerVariables = function (config) {
         var usingTriggerVariables = new Set();
         this.fragment.childNodes.forEach(function (cNode, key) {
@@ -70,11 +79,28 @@ var RawSet = /** @class */ (function () {
             var script = '';
             if (cNode.nodeType === Node.TEXT_NODE) {
                 script = "`".concat((_a = cNode.textContent) !== null && _a !== void 0 ? _a : '', "`");
+                // console.log('???????', script)
             }
             else if (cNode.nodeType === Node.ELEMENT_NODE) {
                 var element_1 = cNode;
-                var targetAttrNames = ((_c = (_b = config === null || config === void 0 ? void 0 : config.targetAttrs) === null || _b === void 0 ? void 0 : _b.map(function (it) { return it.name; })) !== null && _c !== void 0 ? _c : []).concat(RawSet.DR_ATTRIBUTES);
-                script = targetAttrNames.map(function (it) { return (element_1.getAttribute(it)); }).filter(function (it) { return it; }).join(';');
+                var targetAttrNames = ((_c = (_b = config === null || config === void 0 ? void 0 : config.targetAttrs) === null || _b === void 0 ? void 0 : _b.map(function (it) { return it.name; })) !== null && _c !== void 0 ? _c : []).concat(RawSet.DR_ATTRIBUTES); // .concat(EventManager.normalAttrMapAttrName);
+                var targetScripts_1 = targetAttrNames.map(function (it) { return element_1.getAttribute(it); }).filter(function (it) { return it; });
+                var targetAttrMap = element_1.getAttribute(EventManager_1.EventManager.normalAttrMapAttrName);
+                if (targetAttrMap) {
+                    // console.log('----->', targetAttr);
+                    new Map(JSON.parse(targetAttrMap)).forEach(function (v, k) {
+                        targetScripts_1.push(v);
+                    });
+                }
+                script = targetScripts_1.join(';');
+                // attribute쪽 체크하는거 추가
+                // console.log('----!!!!!-->', targetAttrNames)
+                // const otherAttrs = element.getAttributeNames()
+                //     .filter(it => !targetAttrNames.includes(it.toLowerCase()) && RawSet.isExporesion(element.getAttribute(it)))
+                //     .map(it => {
+                //         return `\`${element.getAttribute(it) ?? ''}\``;
+                //     }).join(';');
+                // script += ';' + otherAttrs
             }
             if (script) {
                 // script = script.replace('}$','}');
@@ -92,6 +118,7 @@ var RawSet = /** @class */ (function () {
         // console.log('usingTriggerVariable----------->', usingTriggerVariables)
         return usingTriggerVariables;
     };
+    // 중요 render
     RawSet.prototype.render = function (obj, config) {
         var _this = this;
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
@@ -121,7 +148,7 @@ var RawSet = /** @class */ (function () {
             if (cNode.nodeType === Node.TEXT_NODE && cNode.textContent) {
                 var textContent = cNode.textContent;
                 var runText = RawSet.exporesionGrouops(textContent)[0][1];
-                // console.log('--->', textContent,runText, runText[0][1])
+                // console.log('--->', RawSet.exporesionGrouops(textContent), textContent,runText, runText[0][1])
                 var n = void 0;
                 if (textContent === null || textContent === void 0 ? void 0 : textContent.startsWith('#')) {
                     var r = ScriptUtils_1.ScriptUtils.eval("".concat(__render.bindScript, " return ").concat(runText), Object.assign(obj, { __render: __render }));
@@ -137,6 +164,7 @@ var RawSet = /** @class */ (function () {
             }
             else if (cNode.nodeType === Node.ELEMENT_NODE) {
                 var element = cNode;
+                // console.log('target-->', element)
                 var drAttr = {
                     dr: this.getAttributeAndDelete(element, RawSet.DR),
                     drIf: this.getAttributeAndDelete(element, RawSet.DR_IF_NAME),
@@ -222,8 +250,8 @@ var RawSet = /** @class */ (function () {
                 var rawSet = domrenderComponentNew === null || domrenderComponentNew === void 0 ? void 0 : domrenderComponentNew.rawSet;
                 var drAttrs = domrenderComponentNew === null || domrenderComponentNew === void 0 ? void 0 : domrenderComponentNew.drAttrs;
                 if (rawSet && !rawSet.isConnected) {
-                    var domrenderComponent = obj.__domrender_components[key];
-                    console.log('component destroy--->', key, rawSet, rawSet.isConnected, domrenderComponent.name, domrenderComponent);
+                    // const domrenderComponent = obj.__domrender_components[key];
+                    // console.log('component destroy--->', key, rawSet, rawSet.isConnected, domrenderComponent.name, domrenderComponent);
                     var destroyOptions = (_c = (_b = drAttrs === null || drAttrs === void 0 ? void 0 : drAttrs.drDestroyOption) === null || _b === void 0 ? void 0 : _b.split(',')) !== null && _c !== void 0 ? _c : [];
                     RawSet.destroy(obj.__domrender_components[key], [domrenderComponentNew], config, destroyOptions);
                     delete obj.__domrender_components[key];
@@ -274,8 +302,9 @@ var RawSet = /** @class */ (function () {
         this.childAllRemove();
         (_a = this.point.start.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(genNode, this.point.start.nextSibling);
     };
+    // 중요 important
     RawSet.checkPointCreates = function (element, config) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         var thisVariableName = element.__domrender_this_variable_name;
         // console.log('checkPointCreates thisVariableName', thisVariableName);
         var nodeIterator = config.window.document.createNodeIterator(element, NodeFilter.SHOW_ALL, {
@@ -284,7 +313,7 @@ var RawSet = /** @class */ (function () {
                 if (node.nodeType === Node.TEXT_NODE) {
                     // console.log('????????', node.parentElement, node.parentElement?.getAttribute('dr-pre'));
                     // console.log('???????/',node.textContent, node.parentElement?.getAttribute('dr-pre'))
-                    // 나중에
+                    // TODO: 나중에
                     // const between = StringUtils.betweenRegexpStr('[$#]\\{', '\\}', StringUtils.deleteEnter((node as Text).data ?? ''))
                     var between = RawSet.exporesionGrouops(StringUtils_1.StringUtils.deleteEnter((_a = node.data) !== null && _a !== void 0 ? _a : ''));
                     // console.log('bbbb', between)
@@ -294,9 +323,23 @@ var RawSet = /** @class */ (function () {
                 }
                 else if (node.nodeType === Node.ELEMENT_NODE) {
                     var element_2 = node;
+                    // console.log('------>', element);
                     var isElement = ((_c = (_b = config.targetElements) === null || _b === void 0 ? void 0 : _b.map(function (it) { return it.name.toLowerCase(); })) !== null && _c !== void 0 ? _c : []).includes(element_2.tagName.toLowerCase());
                     var targetAttrNames_1 = ((_e = (_d = config.targetAttrs) === null || _d === void 0 ? void 0 : _d.map(function (it) { return it.name; })) !== null && _e !== void 0 ? _e : []).concat(RawSet.DR_ATTRIBUTES);
-                    var isAttr = element_2.getAttributeNames().filter(function (it) { return targetAttrNames_1.includes(it.toLowerCase()); }).length > 0;
+                    var normalAttrs_1 = new Map();
+                    var isAttr = element_2.getAttributeNames().filter(function (it) {
+                        var value = element_2.getAttribute(it);
+                        if (value && RawSet.isExporesion(value)) {
+                            normalAttrs_1.set(it, RawSet.exporesionGrouops(value)[0][1]);
+                        }
+                        // console.log(element.getAttribute(it), attrExpresion);
+                        var isTargetAttr = targetAttrNames_1.includes(it.toLowerCase());
+                        return isTargetAttr;
+                    }).length > 0;
+                    // 기본 attribute를 처리하기위해
+                    if (normalAttrs_1.size) {
+                        element_2.setAttribute(EventManager_1.EventManager.normalAttrMapAttrName, JSON.stringify(Array.from(normalAttrs_1.entries())));
+                    }
                     return (isAttr || isElement) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
                 }
                 return NodeFilter.FILTER_REJECT;
@@ -307,52 +350,53 @@ var RawSet = /** @class */ (function () {
         var _loop_1 = function () {
             if (currentNode.nodeType === Node.TEXT_NODE) {
                 var text = (_a = currentNode.textContent) !== null && _a !== void 0 ? _a : '';
-                var template_1 = config.window.document.createElement('template');
+                var template = config.window.document.createElement('template');
                 // const a = StringUtils.regexExec(/\$\{.*?\}/g, text);
                 // const a = StringUtils.regexExec(/[$#]\{.*?\}/g, text);
-                // const a = StringUtils.betweenRegexpStr('[$#]\\{', '\\}', text); // <--나중에..
-                var a = RawSet.exporesionGrouops(text); // <--나중에..
-                var map = a.map(function (it) {
-                    return {
-                        uuid: RandomUtils_1.RandomUtils.uuid(),
-                        content: it[0],
-                        regexArr: it
-                    };
-                });
-                var lasterIndex_1 = 0;
-                map.forEach(function (it) {
-                    var regexArr = it.regexArr;
-                    var preparedText = regexArr.input.substring(lasterIndex_1, regexArr.index);
-                    var start = config.window.document.createComment("start text ".concat(it.uuid));
-                    var end = config.window.document.createComment("end text ".concat(it.uuid));
+                // const a = StringUtils.betweenRegexpStr('[$#]\\{', '\\}', text); // <--TODO: 나중에..
+                var groups = RawSet.exporesionGrouops(text);
+                var map = groups.map(function (it) { return ({ uuid: RandomUtils_1.RandomUtils.uuid(), content: it[0], regexArr: it }); });
+                var lasterIndex = 0;
+                for (var i = 0; i < map.length; i++) {
+                    var it_4 = map[i];
+                    var regexArr = it_4.regexArr;
+                    var preparedText = regexArr.input.substring(lasterIndex, regexArr.index);
+                    var start = config.window.document.createComment("start text ".concat(it_4.uuid));
+                    var end = config.window.document.createComment("end text ".concat(it_4.uuid));
                     // layout setting
-                    template_1.content.append(document.createTextNode(preparedText)); // 사이사이값.
-                    template_1.content.append(start);
-                    template_1.content.append(end);
+                    template.content.append(document.createTextNode(preparedText)); // 사이사이값.
+                    template.content.append(start);
+                    template.content.append(end);
                     // content
                     var fragment = config.window.document.createDocumentFragment();
-                    fragment.append(config.window.document.createTextNode(it.content));
-                    pars.push(new RawSet(it.uuid, {
+                    fragment.append(config.window.document.createTextNode(it_4.content));
+                    pars.push(new RawSet(it_4.uuid, RawSetType.TEXT, {
                         start: start,
+                        node: currentNode,
                         end: end,
                         thisVariableName: thisVariableName
                     }, fragment));
-                    lasterIndex_1 = regexArr.index + it.content.length;
-                });
-                template_1.content.append(config.window.document.createTextNode(text.substring(lasterIndex_1, text.length)));
-                (_b = currentNode === null || currentNode === void 0 ? void 0 : currentNode.parentNode) === null || _b === void 0 ? void 0 : _b.replaceChild(template_1.content, currentNode);
+                    lasterIndex = regexArr.index + it_4.content.length;
+                }
+                template.content.append(config.window.document.createTextNode(text.substring(lasterIndex, text.length)));
+                (_b = currentNode === null || currentNode === void 0 ? void 0 : currentNode.parentNode) === null || _b === void 0 ? void 0 : _b.replaceChild(template.content, currentNode);
             }
-            else {
+            else if (currentNode.nodeType === Node.ELEMENT_NODE) {
                 var uuid = RandomUtils_1.RandomUtils.uuid();
+                var element_3 = currentNode;
                 var fragment = config.window.document.createDocumentFragment();
                 var start = config.window.document.createComment("start ".concat(uuid));
                 var end = config.window.document.createComment("end ".concat(uuid));
                 // console.log('start--', uuid)
-                (_c = currentNode === null || currentNode === void 0 ? void 0 : currentNode.parentNode) === null || _c === void 0 ? void 0 : _c.insertBefore(start, currentNode);
-                (_d = currentNode === null || currentNode === void 0 ? void 0 : currentNode.parentNode) === null || _d === void 0 ? void 0 : _d.insertBefore(end, currentNode.nextSibling);
+                var isElement = ((_d = (_c = config.targetElements) === null || _c === void 0 ? void 0 : _c.map(function (it) { return it.name.toLowerCase(); })) !== null && _d !== void 0 ? _d : []).includes(element_3.tagName.toLowerCase());
+                var targetAttrNames_2 = ((_f = (_e = config.targetAttrs) === null || _e === void 0 ? void 0 : _e.map(function (it) { return it.name; })) !== null && _f !== void 0 ? _f : []).concat(RawSet.DR_ATTRIBUTES);
+                var isAttr = element_3.getAttributeNames().filter(function (it) { return targetAttrNames_2.includes(it.toLowerCase()); }).length > 0;
+                (_g = currentNode === null || currentNode === void 0 ? void 0 : currentNode.parentNode) === null || _g === void 0 ? void 0 : _g.insertBefore(start, currentNode);
+                (_h = currentNode === null || currentNode === void 0 ? void 0 : currentNode.parentNode) === null || _h === void 0 ? void 0 : _h.insertBefore(end, currentNode.nextSibling);
                 fragment.append(currentNode);
-                pars.push(new RawSet(uuid, {
+                pars.push(new RawSet(uuid, isElement ? RawSetType.TARGET_ELEMENT : (isAttr ? RawSetType.TARGET_ATTR : RawSetType.UNKOWN), {
                     start: start,
+                    node: currentNode,
                     end: end,
                     thisVariableName: thisVariableName
                 }, fragment));
@@ -430,8 +474,8 @@ var RawSet = /** @class */ (function () {
             var nodeIterator = config.window.document.createNodeIterator(subElement, NodeFilter.SHOW_ELEMENT, {
                 acceptNode: function (node) {
                     if (node.nodeType === Node.ELEMENT_NODE) {
-                        var element_3 = node;
-                        return element_3.hasAttribute(as) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
+                        var element_4 = node;
+                        return element_4.hasAttribute(as) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
                     }
                     else {
                         return NodeFilter.FILTER_REJECT;
@@ -441,9 +485,9 @@ var RawSet = /** @class */ (function () {
             var node;
             // eslint-disable-next-line no-cond-assign
             while (node = nodeIterator.nextNode()) {
-                var element_4 = node;
-                element_4.setAttribute(to, (_a = element_4.getAttribute(as)) !== null && _a !== void 0 ? _a : '');
-                element_4.removeAttribute(as);
+                var element_5 = node;
+                element_5.setAttribute(to, (_a = element_5.getAttribute(as)) !== null && _a !== void 0 ? _a : '');
+                element_5.removeAttribute(as);
             }
         });
     };
@@ -553,7 +597,7 @@ var RawSet = /** @class */ (function () {
             template: template,
             callBack: function (element, obj, rawSet, attrs) {
                 var _a, _b, _c, _d;
-                // console.log('callback------->')
+                // console.log('callback------->', element)
                 if (!obj.__domrender_components) {
                     obj.__domrender_components = {};
                 }
@@ -562,6 +606,7 @@ var RawSet = /** @class */ (function () {
                 var attribute = DomUtils_1.DomUtils.getAttributeToObject(element);
                 var renderScript = 'var $component = this.__render.component; var $element = this.__render.element; var $router = this.__render.router; var $innerHTML = this.__render.innerHTML; var $attribute = this.__render.attribute; var $creatorMetaData = this.__render.creatorMetaData;';
                 var render = Object.freeze({
+                    renderScript: renderScript,
                     element: element,
                     innerHTML: element.innerHTML,
                     attribute: attribute,
@@ -597,6 +642,16 @@ var RawSet = /** @class */ (function () {
                 i.creator = new Proxy(rawSet.point.thisVariableName ? ScriptUtils_1.ScriptUtils.evalReturn(rawSet.point.thisVariableName, obj) : obj, new Types_1.DomRenderFinalProxy());
                 this.__creatorMetaData = i;
                 render = __assign({ component: instance, creatorMetaData: i }, render);
+                // 중요 dr-normal-attr-map
+                var normalAttrMap = element.getAttribute(EventManager_1.EventManager.normalAttrMapAttrName);
+                if (instance.onChangeAttrRender && normalAttrMap) {
+                    new Map(JSON.parse(normalAttrMap)).forEach(function (value, key) {
+                        var script = "".concat(renderScript, " return ").concat(value, " ");
+                        var cval = ScriptUtils_1.ScriptUtils.eval(script, Object.assign(obj, { __render: render }));
+                        // element.setAttribute(key, cval);
+                        instance.onChangeAttrRender(key, cval);
+                    });
+                }
                 // dr-on-create onCreateRender
                 var onCreate = element.getAttribute("".concat(EventManager_1.EventManager.attrPrefix, "on-create"));
                 this.__render = render;
@@ -634,10 +689,10 @@ var RawSet = /** @class */ (function () {
                 var data = RawSet.drThisCreate(element, "this.__domrender_components.".concat(componentKey), '', true, obj, config);
                 // 넘어온 innerHTML에 this가 있는걸 다시 복호화해서 제대로 작동하도록한다.
                 if (innerHTMLThisRandom) {
-                    var template_2 = config.window.document.createElement('template');
-                    template_2.content.append(data);
-                    template_2.innerHTML = template_2.innerHTML.replace(RegExp(innerHTMLThisRandom, 'g'), 'this.');
-                    data = template_2.content;
+                    var template_1 = config.window.document.createElement('template');
+                    template_1.content.append(data);
+                    template_1.innerHTML = template_1.innerHTML.replace(RegExp(innerHTMLThisRandom, 'g'), 'this.');
+                    data = template_1.content;
                 }
                 data.render = render;
                 return data;
@@ -646,10 +701,14 @@ var RawSet = /** @class */ (function () {
         };
         return targetElement;
     };
+    RawSet.isExporesion = function (data) {
+        var reg = /(?:[$#]\{(?:(([$#]\{)??[^$#]?[^{]*?)\}[$#]))/g;
+        return reg.test(data !== null && data !== void 0 ? data : '');
+    };
     RawSet.exporesionGrouops = function (data) {
         // const reg = /(?:[$#]\{(?:(([$#]\{)??[^$#]*?)\}[$#]))/g;
         var reg = /(?:[$#]\{(?:(([$#]\{)??[^$#]?[^{]*?)\}[$#]))/g;
-        return StringUtils_1.StringUtils.regexExec(reg, data);
+        return StringUtils_1.StringUtils.regexExec(reg, data !== null && data !== void 0 ? data : '');
     };
     RawSet.styleTransformLocal = function (styleBody, id, styleTagWrap, locale) {
         if (styleTagWrap === void 0) { styleTagWrap = true; }