dom-render 1.0.60 → 1.0.64

package/dist/bundle.js

@@ -31,6 +31,17 @@ function __extends(d, b) {
     d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
 }
 
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
 function __values(o) {
     var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
     if (m) return m.call(o);
@@ -197,6 +208,9 @@ var StringUtils = (function () {
         }
         return usingVars;
     };
+    StringUtils.escapeSpecialCharacterRegExp = function (data) {
+        return data.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    };
     return StringUtils;
 }());
 
@@ -323,8 +337,8 @@ var DomUtils = (function () {
     return DomUtils;
 }());
 
-var eventManager = new (function () {
-    function class_1() {
+var EventManager = (function () {
+    function EventManager() {
         var _this = this;
         this.attrPrefix = 'dr-';
         this.eventNames = [
@@ -359,7 +373,7 @@ var eventManager = new (function () {
             });
         });
     }
-    class_1.prototype.findAttrElements = function (fragment, config) {
+    EventManager.prototype.findAttrElements = function (fragment, config) {
         var _a, _b;
         var elements = new Set();
         var addAttributes = (_b = (_a = config === null || config === void 0 ? void 0 : config.applyEvents) === null || _a === void 0 ? void 0 : _a.map(function (it) { return it.attrName; })) !== null && _b !== void 0 ? _b : [];
@@ -370,7 +384,7 @@ var eventManager = new (function () {
         });
         return elements;
     };
-    class_1.prototype.applyEvent = function (obj, childNodes, config) {
+    EventManager.prototype.applyEvent = function (obj, childNodes, config) {
         var _this = this;
         this.eventNames.forEach(function (it) {
             _this.addDrEvents(obj, it, childNodes);
@@ -429,7 +443,7 @@ var eventManager = new (function () {
             (_a = config === null || config === void 0 ? void 0 : config.applyEvents) === null || _a === void 0 ? void 0 : _a.filter(function (ta) { return it.getAttribute(ta.attrName); }).forEach(function (ta) { return ta.callBack(it, it.getAttribute(ta.attrName), obj); });
         });
     };
-    class_1.prototype.changeVar = function (obj, elements, varName) {
+    EventManager.prototype.changeVar = function (obj, elements, varName) {
         var _this = this;
         this.procAttr(elements, this.attrPrefix + 'value-link', function (it, attribute) {
             if (attribute && attribute === varName) {
@@ -451,28 +465,47 @@ var eventManager = new (function () {
                 script = 'return ' + script;
             }
             if (_this.isUsingThisVar(script, varName) || varName === undefined) {
-                var data = ScriptUtils.eval("const $target=this.__render.target; " + script + " ", Object.assign(obj, {
+                var data = ScriptUtils.eval("const $element = this.__render.element; " + script + " ", Object.assign(obj, {
                     __render: Object.freeze({
-                        target: it
+                        element: it
                     })
                 }));
                 if (typeof data === 'string') {
                     data.split(',').forEach(function (sit) {
                         var _a = __read(sit.split('='), 2), key = _a[0], value = _a[1];
-                        it.setAttribute(key.trim(), value.trim());
+                        var s = value.trim();
+                        var k = key.trim();
+                        if (s === 'null') {
+                            it.removeAttribute(k);
+                        }
+                        else {
+                            it.setAttribute(k, s);
+                        }
                     });
                 }
                 else if (Array.isArray(data)) {
                     data.forEach(function (sit) {
                         var _a = __read(sit.split('='), 2), key = _a[0], value = _a[1];
-                        it.setAttribute(key.trim(), value.trim());
+                        var s = value.trim();
+                        var k = key.trim();
+                        if (s === 'null') {
+                            it.removeAttribute(k);
+                        }
+                        else {
+                            it.setAttribute(k, s);
+                        }
                     });
                 }
                 else {
                     try {
                         for (var _b = __values(Object.entries(data)), _c = _b.next(); !_c.done; _c = _b.next()) {
                             var _d = __read(_c.value, 2), key = _d[0], value = _d[1];
-                            it.setAttribute(key, String(value));
+                            if (value === null) {
+                                it.removeAttribute(key);
+                            }
+                            else {
+                                it.setAttribute(key, String(value));
+                            }
                         }
                     }
                     catch (e_1_1) { e_1 = { error: e_1_1 }; }
@@ -492,9 +525,9 @@ var eventManager = new (function () {
                 script = 'return ' + script;
             }
             if (_this.isUsingThisVar(script, varName) || varName === undefined) {
-                var data = ScriptUtils.eval("const $target = this.__render.target;  " + script + " ", Object.assign(obj, {
+                var data = ScriptUtils.eval("const $element = this.__render.element;  " + script + " ", Object.assign(obj, {
                     __render: Object.freeze({
-                        target: it
+                        element: it
                     })
                 }));
                 if (typeof data === 'string') {
@@ -529,9 +562,9 @@ var eventManager = new (function () {
                 script = 'return ' + script;
             }
             if (_this.isUsingThisVar(script, varName) || varName === undefined) {
-                var data = ScriptUtils.eval("const $target = this.$target;  " + script + " ", Object.assign(obj, {
+                var data = ScriptUtils.eval("const $element = this.element;  " + script + " ", Object.assign(obj, {
                     __render: Object.freeze({
-                        target: it
+                        element: it
                     })
                 }));
                 if (typeof data === 'string') {
@@ -565,7 +598,7 @@ var eventManager = new (function () {
             }
         });
     };
-    class_1.prototype.addDrEvents = function (obj, eventName, elements) {
+    EventManager.prototype.addDrEvents = function (obj, eventName, elements) {
         var attr = this.attrPrefix + 'event-' + eventName;
         this.procAttr(elements, attr, function (it, attribute) {
             var script = attribute;
@@ -578,7 +611,7 @@ var eventManager = new (function () {
             });
         });
     };
-    class_1.prototype.addDrEventPram = function (obj, attr, elements) {
+    EventManager.prototype.addDrEventPram = function (obj, attr, elements) {
         this.procAttr(elements, attr, function (it, attribute, attributes) {
             var bind = attributes[attr + ':bind'];
             if (bind) {
@@ -605,7 +638,7 @@ var eventManager = new (function () {
             }
         });
     };
-    class_1.prototype.procAttr = function (elements, attrName, callBack) {
+    EventManager.prototype.procAttr = function (elements, attrName, callBack) {
         if (elements === void 0) { elements = new Set(); }
         var sets = new Set();
         elements.forEach(function (it) {
@@ -628,31 +661,42 @@ var eventManager = new (function () {
             }
         });
     };
-    class_1.prototype.getValue = function (obj, name, value) {
+    EventManager.prototype.getValue = function (obj, name, value) {
         var r = ScriptUtils.evalReturn(name, obj);
         if (typeof r === 'function') {
             r = r.bind(obj);
         }
         return r;
     };
-    class_1.prototype.setValue = function (obj, name, value) {
+    EventManager.prototype.setValue = function (obj, name, value) {
         ScriptUtils.eval("this." + name + " = this.value", {
             this: obj,
             value: value
         });
     };
-    class_1.prototype.isUsingThisVar = function (raws, varName) {
+    EventManager.prototype.isUsingThisVar = function (raws, varName) {
         if (varName && raws) {
             if (varName.startsWith('this.')) {
                 varName = varName.replace(/this\./, '');
             }
+            EventManager.VARNAMES.forEach(function (it) {
+                raws = raws.replace(RegExp(it.replace('$', '\\$'), 'g'), "this?.___" + it);
+            });
             var variablePaths = ScriptUtils.getVariablePaths(raws !== null && raws !== void 0 ? raws : '');
             return variablePaths.has(varName);
         }
         return false;
     };
-    return class_1;
-}())();
+    EventManager.SCRIPTS_VARNAME = '$scripts';
+    EventManager.FAG_VARNAME = '$fag';
+    EventManager.RAWSET_VARNAME = '$rawset';
+    EventManager.RANGE_VARNAME = '$range';
+    EventManager.ELEMENT_VARNAME = '$element';
+    EventManager.TARGET_VARNAME = '$target';
+    EventManager.VARNAMES = [EventManager.SCRIPTS_VARNAME, EventManager.FAG_VARNAME, EventManager.RAWSET_VARNAME, EventManager.RANGE_VARNAME, EventManager.ELEMENT_VARNAME, EventManager.TARGET_VARNAME];
+    return EventManager;
+}());
+var eventManager = new EventManager();
 
 var RangeResult = (function () {
     function RangeResult(value, done) {
@@ -751,7 +795,7 @@ var Validator = (function () {
     };
     Validator.prototype.setEvent = function (event) {
         if (event) {
-            this._event = DomRenderProxy.final(event);
+            this._event = this.domRenderFinal(event);
         }
         return this;
     };
@@ -760,10 +804,14 @@ var Validator = (function () {
     };
     Validator.prototype.setTarget = function (target) {
         if (target) {
-            this._target = DomRenderProxy.final(target);
+            this._target = this.domRenderFinal(target);
         }
         return this;
     };
+    Validator.prototype.domRenderFinal = function (obj) {
+        obj._DomRender_isFinal = true;
+        return obj;
+    };
     Object.defineProperty(Validator.prototype, "value", {
         get: function () {
             var _a;
@@ -1012,10 +1060,10 @@ var RawSet = (function () {
                 script = targetAttrNames.map(function (it) { return (element_1.getAttribute(it)); }).filter(function (it) { return it; }).join(';');
             }
             if (script) {
-                RawSet.VARNAMES.forEach(function (it) {
+                EventManager.VARNAMES.forEach(function (it) {
                     script = script.replace(RegExp(it.replace('$', '\\$'), 'g'), "this?.___" + it);
                 });
-                Array.from(ScriptUtils.getVariablePaths(script)).filter(function (it) { return !it.startsWith("___" + RawSet.SCRIPTS_VARNAME) && !it.startsWith("___" + RawSet.SCRIPTS_VARNAME); }).forEach(function (it) { return usingTriggerVariables.add(it); });
+                Array.from(ScriptUtils.getVariablePaths(script)).filter(function (it) { return !it.startsWith("___" + EventManager.SCRIPTS_VARNAME) && !it.startsWith("___" + EventManager.SCRIPTS_VARNAME); }).forEach(function (it) { return usingTriggerVariables.add(it); });
             }
         });
         return usingTriggerVariables;
@@ -1029,15 +1077,28 @@ var RawSet = (function () {
         var drAttrs = [];
         genNode.childNodes.forEach(function (cNode, key) {
             var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4;
+            var __render = Object.freeze({
+                rawset: _this,
+                scripts: RawSet.setBindProperty(config === null || config === void 0 ? void 0 : config.scripts, obj),
+                range: Range.range,
+                element: cNode,
+                bindScript: "\n                    const " + EventManager.SCRIPTS_VARNAME + " = this.__render.scripts;\n                    const " + EventManager.RAWSET_VARNAME + " = this.__render.rawset;\n                    const " + EventManager.ELEMENT_VARNAME + " = this.__render.element;\n                    const " + EventManager.RANGE_VARNAME + " = this.__render.range;\n            "
+            });
             var fag = document.createDocumentFragment();
-            if (cNode.nodeType === Node.TEXT_NODE) {
+            if (cNode.nodeType === Node.TEXT_NODE && cNode.textContent) {
                 var textContent = cNode.textContent;
-                var n = document.createTextNode(ScriptUtils.eval("\n                    const " + RawSet.SCRIPTS_VARNAME + " = this.__render.scripts;\n                    const " + RawSet.RAWSET_VARNAME + " = this.__render.rawset;\n                    return `" + textContent + "`\n                    ", Object.assign(obj, {
-                    __render: Object.freeze({
-                        rawset: _this,
-                        scripts: RawSet.setBindProperty(config === null || config === void 0 ? void 0 : config.scripts, obj)
-                    })
-                })));
+                var runText = RawSet.exporesionGrouops(textContent)[0][1];
+                var n = void 0;
+                if (textContent === null || textContent === void 0 ? void 0 : textContent.startsWith('#')) {
+                    var r = ScriptUtils.eval(__render.bindScript + " return " + runText, Object.assign(obj, { __render: __render }));
+                    var template = document.createElement('template');
+                    template.innerHTML = r;
+                    n = template.content;
+                }
+                else {
+                    var r = ScriptUtils.eval(__render.bindScript + "  return " + runText, Object.assign(obj, { __render: __render }));
+                    n = document.createTextNode(r);
+                }
                 (_a = cNode.parentNode) === null || _a === void 0 ? void 0 : _a.replaceChild(n, cNode);
             }
             else if (cNode.nodeType === Node.ELEMENT_NODE) {
@@ -1050,6 +1111,7 @@ var RawSet = (function () {
                     drRepeat: _this.getAttributeAndDelete(element_2, RawSet.DR_REPEAT_NAME),
                     drThis: _this.getAttributeAndDelete(element_2, RawSet.DR_THIS_NAME),
                     drForm: _this.getAttributeAndDelete(element_2, RawSet.DR_FORM_NAME),
+                    drPre: _this.getAttributeAndDelete(element_2, RawSet.DR_PRE_NAME),
                     drInnerHTML: _this.getAttributeAndDelete(element_2, RawSet.DR_INNERHTML_NAME),
                     drInnerText: _this.getAttributeAndDelete(element_2, RawSet.DR_INNERTEXT_NAME),
                     drItOption: _this.getAttributeAndDelete(element_2, RawSet.DR_IT_OPTIONNAME),
@@ -1060,18 +1122,15 @@ var RawSet = (function () {
                     drStripOption: _this.getAttributeAndDelete(element_2, RawSet.DR_STRIP_OPTIONNAME) === 'true'
                 };
                 drAttrs.push(drAttr_1);
+                if (drAttr_1.drPre != null) {
+                    return;
+                }
                 if (drAttr_1.dr !== null && drAttr_1.dr.length >= 0) {
                     var itRandom = RawSet.drItOtherEncoding(element_2);
                     var vars = RawSet.drVarEncoding(element_2, (_b = drAttr_1.drVarOption) !== null && _b !== void 0 ? _b : '');
                     var newTemp = document.createElement('temp');
-                    ScriptUtils.eval("\n                        const " + RawSet.SCRIPTS_VARNAME + " = this.__render.scripts;\n                        const " + RawSet.RAWSET_VARNAME + " = this.__render.rawset;\n                        const n = this.__render.element.cloneNode(true);\n                        var destIt = " + drAttr_1.drItOption + ";\n                        if (destIt !== undefined) {\n                            n.getAttributeNames().forEach(it => n.setAttribute(it, n.getAttribute(it).replace(/\\#it\\#/g, destIt)))\n                            n.innerHTML = n.innerHTML.replace(/\\#it\\#/g, destIt);\n                        }\n                        if (this.__render.drStripOption) {\n                            Array.from(n.childNodes).forEach(it => this.__fag.append(it));\n                        } else {\n                            this.__render.fag.append(n);\n                        }", Object.assign(obj, {
-                        __render: Object.freeze({
-                            fag: newTemp,
-                            drStripOption: drAttr_1.drStripOption,
-                            element: element_2,
-                            rawset: _this,
-                            scripts: RawSet.setBindProperty(config === null || config === void 0 ? void 0 : config.scripts, obj)
-                        })
+                    ScriptUtils.eval("\n                        " + __render.bindScript + "\n                        const n = $element.cloneNode(true);\n                        var destIt = " + drAttr_1.drItOption + ";\n                        if (destIt !== undefined) {\n                            n.getAttributeNames().forEach(it => n.setAttribute(it, n.getAttribute(it).replace(/\\#it\\#/g, destIt)))\n                            n.innerHTML = n.innerHTML.replace(/\\#it\\#/g, destIt);\n                        }\n                        if (this.__render.drStripOption) {\n                            Array.from(n.childNodes).forEach(it => this.__fag.append(it));\n                        } else {\n                            this.__render.fag.append(n);\n                        }", Object.assign(obj, {
+                        __render: Object.freeze(__assign({ fag: newTemp, drStripOption: drAttr_1.drStripOption }, __render))
                     }));
                     RawSet.drVarDecoding(newTemp, vars);
                     RawSet.drItOtherDecoding(newTemp, itRandom);
@@ -1086,14 +1145,8 @@ var RawSet = (function () {
                     var itRandom = RawSet.drItOtherEncoding(element_2);
                     var vars = RawSet.drVarEncoding(element_2, (_d = drAttr_1.drVarOption) !== null && _d !== void 0 ? _d : '');
                     var newTemp = document.createElement('temp');
-                    ScriptUtils.eval("\n                    const " + RawSet.SCRIPTS_VARNAME + " = this.__render.scripts;\n                    const " + RawSet.RAWSET_VARNAME + " = this.__render.rawset;\n                    " + ((_e = drAttr_1.drBeforeOption) !== null && _e !== void 0 ? _e : '') + "\n                    if(" + drAttr_1.drIf + ") {\n                        const n = this.__render.element.cloneNode(true);\n                        var destIt = " + drAttr_1.drItOption + ";\n                        if (destIt !== undefined) {\n                            n.getAttributeNames().forEach(it => n.setAttribute(it, n.getAttribute(it).replace(/\\#it\\#/g, destIt)))\n                            n.innerHTML = n.innerHTML.replace(/\\#it\\#/g, destIt);\n                        }\n                        if (this.__render.drStripOption) {\n                            Array.from(n.childNodes).forEach(it => this.__render.fag.append(it));\n                        } else {\n                            this.__render.fag.append(n);\n                        }\n                    }\n                    " + ((_f = drAttr_1.drAfterOption) !== null && _f !== void 0 ? _f : '') + "\n                    ", Object.assign(obj, {
-                        __render: Object.freeze({
-                            fag: newTemp,
-                            drStripOption: drAttr_1.drStripOption,
-                            element: element_2,
-                            rawset: _this,
-                            scripts: RawSet.setBindProperty(config === null || config === void 0 ? void 0 : config.scripts, obj)
-                        })
+                    ScriptUtils.eval("\n                    " + __render.bindScript + "\n                    " + ((_e = drAttr_1.drBeforeOption) !== null && _e !== void 0 ? _e : '') + "\n                    if(" + drAttr_1.drIf + ") {\n                        const n = $element.cloneNode(true);\n                        var destIt = " + drAttr_1.drItOption + ";\n                        if (destIt !== undefined) {\n                            n.getAttributeNames().forEach(it => n.setAttribute(it, n.getAttribute(it).replace(/\\#it\\#/g, destIt)))\n                            n.innerHTML = n.innerHTML.replace(/\\#it\\#/g, destIt);\n                        }\n                        if (this.__render.drStripOption) {\n                            Array.from(n.childNodes).forEach(it => this.__render.fag.append(it));\n                        } else {\n                            this.__render.fag.append(n);\n                        }\n                    }\n                    " + ((_f = drAttr_1.drAfterOption) !== null && _f !== void 0 ? _f : '') + "\n                    ", Object.assign(obj, {
+                        __render: Object.freeze(__assign({ fag: newTemp, drStripOption: drAttr_1.drStripOption }, __render))
                     }));
                     RawSet.drVarDecoding(newTemp, vars);
                     RawSet.drItOtherDecoding(newTemp, itRandom);
@@ -1152,14 +1205,10 @@ var RawSet = (function () {
                     raws.push.apply(raws, __spreadArray([], __read(RawSet.checkPointCreates(element_2, config)), false));
                 }
                 if (drAttr_1.drInnerText) {
-                    var data = ScriptUtils.evalReturn(drAttr_1.drInnerText, obj);
                     var newTemp = document.createElement('temp');
-                    ScriptUtils.eval(" \n                        const n = this.__element.cloneNode(true);  \n                        " + ((_k = drAttr_1.drBeforeOption) !== null && _k !== void 0 ? _k : '') + "\n                        n.innerText = this.__data;\n                        if (this.__drStripOption) {\n                            Array.from(n.childNodes).forEach(it => this.__fag.append(it));\n                        } else {\n                            this.__fag.append(n);\n                        }\n                        " + ((_l = drAttr_1.drAfterOption) !== null && _l !== void 0 ? _l : '') + "\n                    ", Object.assign({
-                        __fag: newTemp,
-                        __drStripOption: drAttr_1.drStripOption,
-                        __data: data,
-                        __element: element_2
-                    }, obj));
+                    ScriptUtils.eval(" \n                        " + __render.bindScript + "\n                        const n = $element.cloneNode(true);  \n                        " + ((_k = drAttr_1.drBeforeOption) !== null && _k !== void 0 ? _k : '') + "\n                        n.innerText = " + drAttr_1.drInnerText + ";\n                        if (this.__render.drStripOption) {\n                            Array.from(n.childNodes).forEach(it => this.__render.fag.append(it));\n                        } else {\n                            this.__render.fag.append(n);\n                        }\n                        " + ((_l = drAttr_1.drAfterOption) !== null && _l !== void 0 ? _l : '') + "\n                    ", Object.assign(obj, {
+                        __render: Object.freeze(__assign({ drStripOption: drAttr_1.drStripOption, fag: newTemp }, __render))
+                    }));
                     var tempalte = document.createElement('template');
                     tempalte.innerHTML = newTemp.innerHTML;
                     fag.append(tempalte.content);
@@ -1168,14 +1217,10 @@ var RawSet = (function () {
                     raws.push.apply(raws, __spreadArray([], __read(rr), false));
                 }
                 if (drAttr_1.drInnerHTML) {
-                    var data = ScriptUtils.evalReturn(drAttr_1.drInnerHTML, obj);
                     var newTemp = document.createElement('temp');
-                    ScriptUtils.eval("\n                        const n = this.__element.cloneNode(true);\n                        " + ((_o = drAttr_1.drBeforeOption) !== null && _o !== void 0 ? _o : '') + "\n                        n.innerHTML = this.__data;\n                        if (this.__drStripOption) {\n                            Array.from(n.childNodes).forEach(it => this.__fag.append(it));\n                        } else {\n                            this.__fag.append(n);\n                        }\n                        " + ((_p = drAttr_1.drAfterOption) !== null && _p !== void 0 ? _p : '') + "\n                    ", Object.assign({
-                        __fag: newTemp,
-                        __drStripOption: drAttr_1.drStripOption,
-                        __data: data,
-                        __element: element_2
-                    }, obj));
+                    ScriptUtils.eval("\n                        " + __render.bindScript + "\n                        const n = $element.cloneNode(true);\n                        " + ((_o = drAttr_1.drBeforeOption) !== null && _o !== void 0 ? _o : '') + "\n                        n.innerHTML = " + drAttr_1.drInnerHTML + ";\n                        if (this.__render.drStripOption) {\n                            Array.from(n.childNodes).forEach(it => this.__render.fag.append(it));\n                        } else {\n                            this.__render.fag.append(n);\n                        }\n                        " + ((_p = drAttr_1.drAfterOption) !== null && _p !== void 0 ? _p : '') + "\n                    ", Object.assign(obj, {
+                        __render: Object.freeze(__assign({ drStripOption: drAttr_1.drStripOption, fag: newTemp }, __render))
+                    }));
                     var tempalte = document.createElement('template');
                     tempalte.innerHTML = newTemp.innerHTML;
                     fag.append(tempalte.content);
@@ -1187,14 +1232,8 @@ var RawSet = (function () {
                     var itRandom = RawSet.drItOtherEncoding(element_2);
                     var vars = RawSet.drVarEncoding(element_2, (_r = drAttr_1.drVarOption) !== null && _r !== void 0 ? _r : '');
                     var newTemp = document.createElement('temp');
-                    ScriptUtils.eval("\n                    const " + RawSet.SCRIPTS_VARNAME + " = this.__render.scripts;\n                    const " + RawSet.RANGE_VARNAME + " = this.__render.range;\n                    const " + RawSet.ELEMENT_VARNAME + " = this.__render.element;\n                    " + ((_s = drAttr_1.drBeforeOption) !== null && _s !== void 0 ? _s : '') + "\n                    for(" + drAttr_1.drFor + ") {\n                        const n = this.__render.element.cloneNode(true);\n                        var destIt = " + drAttr_1.drItOption + ";\n                        if (destIt !== undefined) {\n                            n.getAttributeNames().forEach(it => n.setAttribute(it, n.getAttribute(it).replace(/\\#it\\#/g, destIt))) \n                            n.innerHTML = n.innerHTML.replace(/\\#it\\#/g, destIt);\n                        }\n                        if (this.__render.drStripOption) {\n                            Array.from(n.childNodes).forEach(it => this.__render.fag.append(it));\n                        } else {\n                            this.__render.fag.append(n);\n                        }\n                    }\n                    " + ((_t = drAttr_1.drAfterOption) !== null && _t !== void 0 ? _t : '') + "\n                    ", Object.assign(obj, {
-                        __render: Object.freeze({
-                            range: Range.range,
-                            fag: newTemp,
-                            drStripOption: drAttr_1.drStripOption,
-                            element: element_2,
-                            scripts: RawSet.setBindProperty(config === null || config === void 0 ? void 0 : config.scripts, obj)
-                        })
+                    ScriptUtils.eval("\n                    " + __render.bindScript + "\n                    " + ((_s = drAttr_1.drBeforeOption) !== null && _s !== void 0 ? _s : '') + "\n                    for(" + drAttr_1.drFor + ") {\n                        const n = this.__render.element.cloneNode(true);\n                        var destIt = " + drAttr_1.drItOption + ";\n                        if (destIt !== undefined) {\n                            n.getAttributeNames().forEach(it => n.setAttribute(it, n.getAttribute(it).replace(/\\#it\\#/g, destIt))) \n                            n.innerHTML = n.innerHTML.replace(/\\#it\\#/g, destIt);\n                        }\n                        if (this.__render.drStripOption) {\n                            Array.from(n.childNodes).forEach(it => this.__render.fag.append(it));\n                        } else {\n                            this.__render.fag.append(n);\n                        }\n                    }\n                    " + ((_t = drAttr_1.drAfterOption) !== null && _t !== void 0 ? _t : '') + "\n                    ", Object.assign(obj, {
+                        __render: Object.freeze(__assign({ fag: newTemp, drStripOption: drAttr_1.drStripOption }, __render))
                     }));
                     RawSet.drVarDecoding(newTemp, vars);
                     RawSet.drItOtherDecoding(newTemp, itRandom);
@@ -1209,15 +1248,8 @@ var RawSet = (function () {
                     var itRandom = RawSet.drItOtherEncoding(element_2);
                     var vars = RawSet.drVarEncoding(element_2, (_v = drAttr_1.drVarOption) !== null && _v !== void 0 ? _v : '');
                     var newTemp = document.createElement('temp');
-                    ScriptUtils.eval("\n                    const " + RawSet.SCRIPTS_VARNAME + " = this.__render.scripts;\n                    const " + RawSet.RANGE_VARNAME + " = this.__render.range;\n                    const " + RawSet.ELEMENT_VARNAME + " = this.__render.element;\n                    " + ((_w = drAttr_1.drBeforeOption) !== null && _w !== void 0 ? _w : '') + "\n                    var i = 0; \n                    const forOf = " + drAttr_1.drForOf + ";\n                    const forOfStr = `" + drAttr_1.drForOf + "`.trim();\n                    for(const it of forOf) {\n                        var destIt = it;\n                        if (/\\[(.*,?)\\],/g.test(forOfStr)) {\n                            if (typeof it === 'string') {\n                                destIt = it;\n                            } else {\n                                destIt = forOfStr.substring(1, forOfStr.length-1).split(',')[i];\n                            }\n                        } else if (forOf.isRange) {\n                                destIt = it;\n                        }  else {\n                            destIt = forOfStr + '[' + i +']'\n                        }\n                        const n = this.__render.element.cloneNode(true);\n                        n.getAttributeNames().forEach(it => n.setAttribute(it, n.getAttribute(it).replace(/\\#it\\#/g, destIt)))\n                        n.innerHTML = n.innerHTML.replace(/\\#it\\#/g, destIt);\n                        if (this.__render.drStripOption) {\n                            Array.from(n.childNodes).forEach(it => this.__render.fag.append(it));\n                        } else {\n                            this.__render.fag.append(n);\n                        }\n                        i++;\n                    }\n                    " + ((_x = drAttr_1.drAfterOption) !== null && _x !== void 0 ? _x : '') + "\n                    ", Object.assign(obj, {
-                        __render: Object.freeze({
-                            rawset: _this,
-                            range: Range.range,
-                            drStripOption: drAttr_1.drStripOption,
-                            fag: newTemp,
-                            element: element_2,
-                            scripts: RawSet.setBindProperty(config === null || config === void 0 ? void 0 : config.scripts, obj)
-                        })
+                    ScriptUtils.eval("\n                    " + __render.bindScript + "\n                    " + ((_w = drAttr_1.drBeforeOption) !== null && _w !== void 0 ? _w : '') + "\n                    var i = 0; \n                    const forOf = " + drAttr_1.drForOf + ";\n                    const forOfStr = `" + drAttr_1.drForOf + "`.trim();\n                    for(const it of forOf) {\n                        var destIt = it;\n                        if (/\\[(.*,?)\\],/g.test(forOfStr)) {\n                            if (typeof it === 'string') {\n                                destIt = it;\n                            } else {\n                                destIt = forOfStr.substring(1, forOfStr.length-1).split(',')[i];\n                            }\n                        } else if (forOf.isRange) {\n                                destIt = it;\n                        }  else {\n                            destIt = forOfStr + '[' + i +']'\n                        }\n                        const n = this.__render.element.cloneNode(true);\n                        n.getAttributeNames().forEach(it => n.setAttribute(it, n.getAttribute(it).replace(/\\#it\\#/g, destIt)))\n                        n.innerHTML = n.innerHTML.replace(/\\#it\\#/g, destIt);\n                        if (this.__render.drStripOption) {\n                            Array.from(n.childNodes).forEach(it => this.__render.fag.append(it));\n                        } else {\n                            this.__render.fag.append(n);\n                        }\n                        i++;\n                    }\n                    " + ((_x = drAttr_1.drAfterOption) !== null && _x !== void 0 ? _x : '') + "\n                    ", Object.assign(obj, {
+                        __render: Object.freeze(__assign({ drStripOption: drAttr_1.drStripOption, fag: newTemp }, __render))
                     }));
                     RawSet.drVarDecoding(newTemp, vars);
                     RawSet.drItOtherDecoding(newTemp, itRandom);
@@ -1232,14 +1264,8 @@ var RawSet = (function () {
                     var itRandom = RawSet.drItOtherEncoding(element_2);
                     var vars = RawSet.drVarEncoding(element_2, (_z = drAttr_1.drVarOption) !== null && _z !== void 0 ? _z : '');
                     var newTemp = document.createElement('temp');
-                    ScriptUtils.eval("\n                    const " + RawSet.SCRIPTS_VARNAME + " = this.__render.scripts;\n                    const " + RawSet.RANGE_VARNAME + " = this.__render.range;\n                    const " + RawSet.ELEMENT_VARNAME + " = this.__render.element;\n                    " + ((_0 = drAttr_1.drBeforeOption) !== null && _0 !== void 0 ? _0 : '') + "\n                    var i = 0; \n                    const repeat = " + drAttr_1.drRepeat + ";\n                    const repeatStr = `" + drAttr_1.drRepeat + "`;\n                    let range = repeat;\n                    if (typeof repeat === 'number') {\n                        range = " + RawSet.RANGE_VARNAME + "(repeat);\n                    } \n                    for(const it of range) {\n                        var destIt = it;\n                        if (range.isRange) {\n                            destIt = it;\n                        }  else {\n                            destIt = repeatStr + '[' + i +']'\n                        }\n                        const n = this.__render.element.cloneNode(true);\n                        n.getAttributeNames().forEach(it => n.setAttribute(it, n.getAttribute(it).replace(/\\#it\\#/g, destIt)))\n                        n.innerHTML = n.innerHTML.replace(/\\#it\\#/g, destIt);\n                        \n                        if (this.__render.drStripOption) {\n                            Array.from(n.childNodes).forEach(it => this.__render.fag.append(it));\n                        } else {\n                            this.__render.fag.append(n);\n                        }\n                        i++;\n                    }\n                    " + ((_1 = drAttr_1.drAfterOption) !== null && _1 !== void 0 ? _1 : '') + "\n                    ", Object.assign(obj, {
-                        __render: Object.freeze({
-                            range: Range.range,
-                            fag: newTemp,
-                            drStripOption: drAttr_1.drStripOption,
-                            element: element_2,
-                            scripts: RawSet.setBindProperty(config === null || config === void 0 ? void 0 : config.scripts, obj)
-                        })
+                    ScriptUtils.eval("\n                    " + __render.bindScript + "\n                    " + ((_0 = drAttr_1.drBeforeOption) !== null && _0 !== void 0 ? _0 : '') + "\n                    var i = 0; \n                    const repeat = " + drAttr_1.drRepeat + ";\n                    const repeatStr = `" + drAttr_1.drRepeat + "`;\n                    let range = repeat;\n                    if (typeof repeat === 'number') {\n                        range = " + EventManager.RANGE_VARNAME + "(repeat);\n                    } \n                    for(const it of range) {\n                        var destIt = it;\n                        if (range.isRange) {\n                            destIt = it;\n                        }  else {\n                            destIt = repeatStr + '[' + i +']'\n                        }\n                        const n = this.__render.element.cloneNode(true);\n                        n.getAttributeNames().forEach(it => n.setAttribute(it, n.getAttribute(it).replace(/\\#it\\#/g, destIt)))\n                        n.innerHTML = n.innerHTML.replace(/\\#it\\#/g, destIt);\n                        \n                        if (this.__render.drStripOption) {\n                            Array.from(n.childNodes).forEach(it => this.__render.fag.append(it));\n                        } else {\n                            this.__render.fag.append(n);\n                        }\n                        i++;\n                    }\n                    " + ((_1 = drAttr_1.drAfterOption) !== null && _1 !== void 0 ? _1 : '') + "\n                    ", Object.assign(obj, {
+                        __render: Object.freeze(__assign({ fag: newTemp, drStripOption: drAttr_1.drStripOption }, __render))
                     }));
                     RawSet.drVarDecoding(newTemp, vars);
                     RawSet.drItOtherDecoding(newTemp, itRandom);
@@ -1266,7 +1292,8 @@ var RawSet = (function () {
                             raws.push.apply(raws, __spreadArray([], __read(rr), false));
                             onElementInitCallBack.push({
                                 name: name,
-                                obj: obj
+                                obj: obj,
+                                targetElement: it
                             });
                             (_b = it === null || it === void 0 ? void 0 : it.complete) === null || _b === void 0 ? void 0 : _b.call(it, element_2, obj, _this);
                         }
@@ -1298,7 +1325,7 @@ var RawSet = (function () {
         this.replaceBody(genNode);
         drAttrs.forEach(function (it) {
             if (it.drCompleteOption) {
-                ScriptUtils.eval("\n                const " + RawSet.FAG_VARNAME + " = this.__render.fag;\n                const " + RawSet.SCRIPTS_VARNAME + " = this.__render.scripts;\n                const " + RawSet.RAWSET_VARNAME + " = this.__render.rawset;\n                " + it.drCompleteOption + "\n                ", Object.assign(obj, {
+                ScriptUtils.eval("\n                const " + EventManager.FAG_VARNAME + " = this.__render.fag;\n                const " + EventManager.SCRIPTS_VARNAME + " = this.__render.scripts;\n                const " + EventManager.RAWSET_VARNAME + " = this.__render.rawset;\n                " + it.drCompleteOption + "\n                ", Object.assign(obj, {
                     __render: Object.freeze({
                         rawset: _this,
                         fag: genNode,
@@ -1307,7 +1334,7 @@ var RawSet = (function () {
                 }));
             }
         });
-        onElementInitCallBack.forEach(function (it) { var _a; return (_a = config === null || config === void 0 ? void 0 : config.onElementInit) === null || _a === void 0 ? void 0 : _a.call(config, it.name, obj, _this); });
+        onElementInitCallBack.forEach(function (it) { var _a; return (_a = config === null || config === void 0 ? void 0 : config.onElementInit) === null || _a === void 0 ? void 0 : _a.call(config, it.name, obj, _this, it.targetElement); });
         onAttrInitCallBack.forEach(function (it) { var _a; return (_a = config === null || config === void 0 ? void 0 : config.onAttrInit) === null || _a === void 0 ? void 0 : _a.call(config, it.attrName, it.attrValue, obj, _this); });
         return raws;
     };
@@ -1315,6 +1342,10 @@ var RawSet = (function () {
         if (fragment === void 0) { fragment = this.fragment; }
         eventManager.applyEvent(obj, eventManager.findAttrElements(fragment, config), config);
     };
+    RawSet.prototype.getAttribute = function (element, attr) {
+        var data = element.getAttribute(attr);
+        return data;
+    };
     RawSet.prototype.getAttributeAndDelete = function (element, attr) {
         var data = element.getAttribute(attr);
         element.removeAttribute(attr);
@@ -1331,7 +1362,8 @@ var RawSet = (function () {
             acceptNode: function (node) {
                 var _a, _b, _c, _d, _e;
                 if (node.nodeType === Node.TEXT_NODE) {
-                    return /\$\{.*?\}/g.test(StringUtils.deleteEnter((_a = node.data) !== null && _a !== void 0 ? _a : '')) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
+                    var between = RawSet.exporesionGrouops(StringUtils.deleteEnter((_a = node.data) !== null && _a !== void 0 ? _a : ''));
+                    return (between === null || between === void 0 ? void 0 : between.length) > 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
                 }
                 else if (node.nodeType === Node.ELEMENT_NODE) {
                     var element_3 = node;
@@ -1349,7 +1381,7 @@ var RawSet = (function () {
             if (currentNode.nodeType === Node.TEXT_NODE) {
                 var text = (_a = currentNode.textContent) !== null && _a !== void 0 ? _a : '';
                 var template_1 = document.createElement('template');
-                var a = StringUtils.regexExec(/\$\{.*?\}/g, text);
+                var a = RawSet.exporesionGrouops(text);
                 var map = a.map(function (it) {
                     return {
                         uuid: RandomUtils.uuid(),
@@ -1421,6 +1453,9 @@ var RawSet = (function () {
     };
     RawSet.drThisEncoding = function (element, drThis) {
         var thisRandom = RandomUtils.uuid();
+        element.querySelectorAll("[" + RawSet.DR_PRE_NAME + "]").forEach(function (it) {
+            it.innerHTML = it.innerHTML.replace(/this/g, thisRandom);
+        });
         element.querySelectorAll("[" + RawSet.DR_THIS_NAME + "]").forEach(function (it) {
             var message = it.innerHTML;
             StringUtils.regexExec(/([^(dr\-)])?this(?=.?)/g, message).reverse().forEach(function (it) {
@@ -1438,6 +1473,9 @@ var RawSet = (function () {
         return thisRandom;
     };
     RawSet.drThisDecoding = function (element, thisRandom) {
+        element.querySelectorAll("[" + RawSet.DR_PRE_NAME + "]").forEach(function (it) {
+            it.innerHTML = it.innerHTML.replace(RegExp(thisRandom, 'g'), 'this');
+        });
         element.querySelectorAll("[" + RawSet.DR_THIS_NAME + "]").forEach(function (it) {
             it.innerHTML = it.innerHTML.replace(RegExp(thisRandom, 'g'), 'this');
         });
@@ -1467,11 +1505,14 @@ var RawSet = (function () {
     RawSet.drVarEncoding = function (element, drVarOption) {
         var _a;
         var vars = ((_a = drVarOption === null || drVarOption === void 0 ? void 0 : drVarOption.split(',')) !== null && _a !== void 0 ? _a : []).map(function (it) {
+            var _a, _b;
             var s = it.trim().split('=');
+            var name = (_a = s[0]) === null || _a === void 0 ? void 0 : _a.trim();
+            var value = (_b = s[1]) === null || _b === void 0 ? void 0 : _b.trim();
             return {
-                name: s[0],
-                value: s[1],
-                regex: RegExp('\\$var\\.' + s[0] + '(?=.?)', 'g'),
+                name: name,
+                value: value,
+                regex: RegExp('\\$var\\.' + name + '(?=.?)', 'g'),
                 random: RandomUtils.uuid()
             };
         });
@@ -1529,7 +1570,7 @@ var RawSet = (function () {
             return newScripts;
         }
     };
-    RawSet.createComponentTargetElement = function (name, objFactory, template, styles, scripts) {
+    RawSet.createComponentTargetElement = function (name, objFactory, template, styles, scripts, complete) {
         if (template === void 0) { template = ''; }
         if (styles === void 0) { styles = []; }
         var targetElement = {
@@ -1545,22 +1586,25 @@ var RawSet = (function () {
                 var componentKey = '_' + RandomUtils.getRandomString(20);
                 domrenderComponents[componentKey] = objFactory(element, obj, rawSet);
                 var instance = domrenderComponents[componentKey];
+                var attribute = {};
+                element.getAttributeNames().forEach(function (it) {
+                    attribute[it] = element.getAttribute(it);
+                });
+                var render = Object.freeze({
+                    component: instance,
+                    element: element,
+                    innerHTML: element.innerHTML,
+                    attribute: attribute,
+                    rawset: rawSet,
+                    componentKey: componentKey,
+                    scripts: RawSet.setBindProperty(scripts, obj)
+                });
+                this.__render = render;
                 var oninit = element.getAttribute('dr-on-init');
                 if (oninit) {
-                    var attribute_1 = {};
-                    element.getAttributeNames().forEach(function (it) {
-                        attribute_1[it] = element.getAttribute(it);
-                    });
                     var script = "var $component = this.__render.component; var $element = this.__render.$element; var $innerHTML = this.__render.$innerHTML; var $attribute = this.__render.$attribute;  " + oninit + " ";
                     ScriptUtils.eval(script, Object.assign(obj, {
-                        __render: Object.freeze({
-                            component: instance,
-                            element: element,
-                            innerHTML: element.innerHTML,
-                            attribute: attribute_1,
-                            rawset: rawSet,
-                            scripts: RawSet.setBindProperty(scripts, obj)
-                        })
+                        __render: render
                     }));
                 }
                 var fag = document.createDocumentFragment();
@@ -1568,10 +1612,15 @@ var RawSet = (function () {
                 element.innerHTML = innerHTML;
                 fag.append(RawSet.drThisCreate(element, "this.__domrender_components." + componentKey, '', true, obj));
                 return fag;
-            }
+            },
+            complete: complete
         };
         return targetElement;
     };
+    RawSet.exporesionGrouops = function (data) {
+        var reg = /(?:[$#]\{(?:(([$#]\{)??[^$#]*?)\}[$#]))/g;
+        return StringUtils.regexExec(reg, data);
+    };
     RawSet.DR = 'dr';
     RawSet.DR_IF_NAME = 'dr-if';
     RawSet.DR_FOR_OF_NAME = 'dr-for-of';
@@ -1579,6 +1628,7 @@ var RawSet = (function () {
     RawSet.DR_REPEAT_NAME = 'dr-repeat';
     RawSet.DR_THIS_NAME = 'dr-this';
     RawSet.DR_FORM_NAME = 'dr-form';
+    RawSet.DR_PRE_NAME = 'dr-pre';
     RawSet.DR_INNERHTML_NAME = 'dr-inner-html';
     RawSet.DR_INNERTEXT_NAME = 'dr-inner-text';
     RawSet.DR_TAGS = [];
@@ -1588,14 +1638,7 @@ var RawSet = (function () {
     RawSet.DR_COMPLETE_OPTIONNAME = 'dr-complete';
     RawSet.DR_VAR_OPTIONNAME = 'dr-var';
     RawSet.DR_STRIP_OPTIONNAME = 'dr-strip';
-    RawSet.DR_ATTRIBUTES = [RawSet.DR, RawSet.DR_IF_NAME, RawSet.DR_FOR_OF_NAME, RawSet.DR_FOR_NAME, RawSet.DR_THIS_NAME, RawSet.DR_FORM_NAME, RawSet.DR_INNERHTML_NAME, RawSet.DR_INNERTEXT_NAME, RawSet.DR_REPEAT_NAME];
-    RawSet.SCRIPTS_VARNAME = '$scripts';
-    RawSet.FAG_VARNAME = '$fag';
-    RawSet.RAWSET_VARNAME = '$rawset';
-    RawSet.RANGE_VARNAME = '$range';
-    RawSet.ELEMENT_VARNAME = '$element';
-    RawSet.TARGET_VARNAME = '$target';
-    RawSet.VARNAMES = [RawSet.SCRIPTS_VARNAME, RawSet.FAG_VARNAME, RawSet.RAWSET_VARNAME, RawSet.RANGE_VARNAME, RawSet.ELEMENT_VARNAME, RawSet.TARGET_VARNAME];
+    RawSet.DR_ATTRIBUTES = [RawSet.DR, RawSet.DR_IF_NAME, RawSet.DR_FOR_OF_NAME, RawSet.DR_FOR_NAME, RawSet.DR_THIS_NAME, RawSet.DR_FORM_NAME, RawSet.DR_PRE_NAME, RawSet.DR_INNERHTML_NAME, RawSet.DR_INNERTEXT_NAME, RawSet.DR_REPEAT_NAME];
     return RawSet;
 }());