dom-render 1.0.97 → 1.0.98

package/dist/bundle.js

@@ -2,7 +2,7 @@
 
 try{if(!exports){exports = {};} }catch(e){var exports = {}};
 
-/*! *****************************************************************************
+/******************************************************************************
 Copyright (c) Microsoft Corporation.
 
 Permission to use, copy, modify, and/or distribute this software for any
@@ -16,8 +16,8 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
-
 /* global Reflect, Promise */
+
 var extendStatics = function (d, b) {
   extendStatics = Object.setPrototypeOf || {
     __proto__: []
@@ -26,31 +26,24 @@ var extendStatics = function (d, b) {
   } || function (d, b) {
     for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p];
   };
-
   return extendStatics(d, b);
 };
-
 function __extends(d, b) {
   if (typeof b !== "function" && b !== null) throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
   extendStatics(d, b);
-
   function __() {
     this.constructor = d;
   }
-
   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 __awaiter(thisArg, _arguments, P, generator) {
@@ -59,7 +52,6 @@ function __awaiter(thisArg, _arguments, P, generator) {
       resolve(value);
     });
   }
-
   return new (P || (P = Promise))(function (resolve, reject) {
     function fulfilled(value) {
       try {
@@ -68,7 +60,6 @@ function __awaiter(thisArg, _arguments, P, generator) {
         reject(e);
       }
     }
-
     function rejected(value) {
       try {
         step(generator["throw"](value));
@@ -76,28 +67,26 @@ function __awaiter(thisArg, _arguments, P, generator) {
         reject(e);
       }
     }
-
     function step(result) {
       result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
     }
-
     step((generator = generator.apply(thisArg, _arguments || [])).next());
   });
 }
 function __generator(thisArg, body) {
   var _ = {
-    label: 0,
-    sent: function () {
-      if (t[0] & 1) throw t[1];
-      return t[1];
+      label: 0,
+      sent: function () {
+        if (t[0] & 1) throw t[1];
+        return t[1];
+      },
+      trys: [],
+      ops: []
     },
-    trys: [],
-    ops: []
-  },
-      f,
-      y,
-      t,
-      g;
+    f,
+    y,
+    t,
+    g;
   return g = {
     next: verb(0),
     "throw": verb(1),
@@ -105,78 +94,59 @@ function __generator(thisArg, body) {
   }, typeof Symbol === "function" && (g[Symbol.iterator] = function () {
     return this;
   }), g;
-
   function verb(n) {
     return function (v) {
       return step([n, v]);
     };
   }
-
   function step(op) {
     if (f) throw new TypeError("Generator is already executing.");
-
-    while (_) try {
+    while (g && (g = 0, op[0] && (_ = 0)), _) try {
       if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
       if (y = 0, t) op = [op[0] & 2, t.value];
-
       switch (op[0]) {
         case 0:
         case 1:
           t = op;
           break;
-
         case 4:
           _.label++;
           return {
             value: op[1],
             done: false
           };
-
         case 5:
           _.label++;
           y = op[1];
           op = [0];
           continue;
-
         case 7:
           op = _.ops.pop();
-
           _.trys.pop();
-
           continue;
-
         default:
           if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
             _ = 0;
             continue;
           }
-
           if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) {
             _.label = op[1];
             break;
           }
-
           if (op[0] === 6 && _.label < t[1]) {
             _.label = t[1];
             t = op;
             break;
           }
-
           if (t && _.label < t[2]) {
             _.label = t[2];
-
             _.ops.push(op);
-
             break;
           }
-
           if (t[2]) _.ops.pop();
-
           _.trys.pop();
-
           continue;
       }
-
       op = body.call(thisArg, _);
     } catch (e) {
       op = [6, e];
@@ -184,7 +154,6 @@ function __generator(thisArg, body) {
     } finally {
       f = t = 0;
     }
-
     if (op[0] & 5) throw op[1];
     return {
       value: op[0] ? op[1] : void 0,
@@ -407,7 +376,7 @@ var ScriptUtils = /** @class */ (function () {
         }, new GetDetectProxy());
         try {
             // eslint-disable-next-line no-new-func,no-unused-expressions
-            Function("\"use strict\"; " + script + "; ").bind(destUser)();
+            Function("\"use strict\"; ".concat(script, "; ")).bind(destUser)();
         }
         catch (e) {
             console.error(e);
@@ -423,7 +392,7 @@ var ScriptUtils = /** @class */ (function () {
     };
     ScriptUtils.eval = function (script, thisTarget) {
         // eslint-disable-next-line no-new-func,no-unused-expressions
-        return Function("\"use strict\"; " + script + " ").bind(thisTarget)();
+        return Function("\"use strict\"; ".concat(script, " ")).bind(thisTarget)();
     };
     ScriptUtils.loadElement = function (name, attribute, document) {
         return new Promise(function (resolve, reject) {
@@ -633,21 +602,21 @@ var EventManager = /** @class */ (function () {
             EventManager.onInitAttrName,
             this.eventParam
         ];
-        this.bindScript = "\n        const " + EventManager.VALUE_VARNAME + " = this.__render.value;\n        const " + EventManager.SCRIPTS_VARNAME + " = this.__render.scripts;\n        const " + EventManager.RANGE_VARNAME + " = this.__render.range;\n        const " + EventManager.ROUTER_VARNAME + " = this.__render.router;\n        const " + EventManager.ATTRIBUTE_VARNAME + " = this.__render.attribute;\n        const " + EventManager.ELEMENT_VARNAME + " = this.__render.element;\n        const " + EventManager.TARGET_VARNAME + " = this.__render.target;\n        const " + EventManager.EVENT_VARNAME + " = this.__render.event;\n    ";
+        this.bindScript = "\n        const ".concat(EventManager.VALUE_VARNAME, " = this.__render.value;\n        const ").concat(EventManager.SCRIPTS_VARNAME, " = this.__render.scripts;\n        const ").concat(EventManager.RANGE_VARNAME, " = this.__render.range;\n        const ").concat(EventManager.ROUTER_VARNAME, " = this.__render.router;\n        const ").concat(EventManager.ATTRIBUTE_VARNAME, " = this.__render.attribute;\n        const ").concat(EventManager.ELEMENT_VARNAME, " = this.__render.element;\n        const ").concat(EventManager.TARGET_VARNAME, " = this.__render.target;\n        const ").concat(EventManager.EVENT_VARNAME, " = this.__render.event;\n    ");
         this.eventNames.forEach(function (it) {
             _this.attrNames.push(EventManager.attrPrefix + 'event-' + it);
         });
         if (typeof window !== 'undefined') {
             EventManager.WINDOW_EVENTS.forEach(function (eventName) {
                 window === null || window === void 0 ? void 0 : window.addEventListener(eventName, function (event) {
-                    var targetAttr = "dr-window-event-" + eventName;
-                    document.querySelectorAll("[" + targetAttr + "]").forEach(function (it) {
+                    var targetAttr = "dr-window-event-".concat(eventName);
+                    document.querySelectorAll("[".concat(targetAttr, "]")).forEach(function (it) {
                         var _a;
                         var script = it.getAttribute(targetAttr);
                         if (script) {
                             var obj = it.obj;
                             var config = (_a = obj === null || obj === void 0 ? void 0 : obj._DomRender_proxy) === null || _a === void 0 ? void 0 : _a.config;
-                            ScriptUtils.eval(_this.bindScript + " " + script + " ", Object.assign(obj, {
+                            ScriptUtils.eval("".concat(_this.bindScript, " ").concat(script, " "), Object.assign(obj, {
                                 __render: Object.freeze({
                                     target: DomRenderFinalProxy.final(event.target),
                                     element: it,
@@ -675,7 +644,7 @@ var EventManager = /** @class */ (function () {
         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 : [];
         addAttributes.concat(this.attrNames).forEach(function (attrName) {
-            fragment === null || fragment === void 0 ? void 0 : fragment.querySelectorAll("[" + attrName + "]").forEach(function (it) {
+            fragment === null || fragment === void 0 ? void 0 : fragment.querySelectorAll("[".concat(attrName, "]")).forEach(function (it) {
                 elements.add(it);
             });
         });
@@ -711,7 +680,7 @@ var EventManager = /** @class */ (function () {
         this.procAttr(childNodes, EventManager.normalAttrMapAttrName, function (it, attribute) {
             var map = new Map(JSON.parse(attribute));
             map.forEach(function (v, k) {
-                var data = ScriptUtils.eval("const $element = this.element;  return " + v + " ", Object.assign(obj, {
+                var data = ScriptUtils.eval("const $element = this.element;  return ".concat(v, " "), Object.assign(obj, {
                     __render: Object.freeze({
                         element: it,
                         attribute: DomUtils.getAttributeToObject(it)
@@ -730,7 +699,7 @@ var EventManager = /** @class */ (function () {
         this.procAttr(childNodes, EventManager.valueLinkAttrName, function (it, varName) {
             if (varName) {
                 var ownerVariablePathName = it.getAttribute(EventManager.ownerVariablePathAttrName);
-                var mapScript_1 = it.getAttribute(EventManager.valueLinkAttrName + ":map");
+                var mapScript_1 = it.getAttribute("".concat(EventManager.valueLinkAttrName, ":map"));
                 // const inMapScript = it.getAttribute(`${valueLinkAttrName}:in-map`);
                 var bindObj_1 = obj;
                 if (ownerVariablePathName) {
@@ -741,7 +710,7 @@ var EventManager = /** @class */ (function () {
                 if (typeof getValue === 'function' && getValue) {
                     var setValue = it.value;
                     if (mapScript_1) {
-                        setValue = ScriptUtils.eval(_this.getBindScript(config) + " return " + mapScript_1, Object.assign(bindObj_1, { __render: Object.freeze(__assign({ element: it, target: bindObj_1, range: Range.range, value: setValue, scripts: EventManager.setBindProperty(config === null || config === void 0 ? void 0 : config.scripts, obj) }, config === null || config === void 0 ? void 0 : config.eventVariables)) }));
+                        setValue = ScriptUtils.eval("".concat(_this.getBindScript(config), " return ").concat(mapScript_1), Object.assign(bindObj_1, { __render: Object.freeze(__assign({ element: it, target: bindObj_1, range: Range.range, value: setValue, scripts: EventManager.setBindProperty(config === null || config === void 0 ? void 0 : config.scripts, obj) }, config === null || config === void 0 ? void 0 : config.eventVariables)) }));
                     }
                     getValue(setValue);
                     // 여기서 value가 먼저냐 value-link가 먼저냐 선을 정해야되는거네...
@@ -749,14 +718,14 @@ var EventManager = /** @class */ (function () {
                 else if (getValue) {
                     var setValue = getValue;
                     if (mapScript_1) {
-                        setValue = ScriptUtils.eval(_this.getBindScript(config) + " return " + mapScript_1, Object.assign(bindObj_1, { __render: Object.freeze(__assign({ element: it, target: bindObj_1, range: Range.range, value: setValue, scripts: EventManager.setBindProperty(config === null || config === void 0 ? void 0 : config.scripts, obj) }, config === null || config === void 0 ? void 0 : config.eventVariables)) }));
+                        setValue = ScriptUtils.eval("".concat(_this.getBindScript(config), " return ").concat(mapScript_1), Object.assign(bindObj_1, { __render: Object.freeze(__assign({ element: it, target: bindObj_1, range: Range.range, value: setValue, scripts: EventManager.setBindProperty(config === null || config === void 0 ? void 0 : config.scripts, obj) }, config === null || config === void 0 ? void 0 : config.eventVariables)) }));
                     }
                     it.value = setValue;
                 }
                 it.addEventListener('input', function (event) {
                     var value = it.value;
                     if (mapScript_1) {
-                        value = ScriptUtils.eval(_this.getBindScript(config) + " return " + mapScript_1, Object.assign(bindObj_1, {
+                        value = ScriptUtils.eval("".concat(_this.getBindScript(config), " return ").concat(mapScript_1), Object.assign(bindObj_1, {
                             __render: Object.freeze(__assign({ event: event, element: it, attribute: DomUtils.getAttributeToObject(it), target: event.target, range: Range.range, scripts: EventManager.setBindProperty(config === null || config === void 0 ? void 0 : config.scripts, obj) }, config === null || config === void 0 ? void 0 : config.eventVariables))
                         }));
                     }
@@ -776,7 +745,7 @@ var EventManager = /** @class */ (function () {
                 script = 'return ' + script;
             }
             if (script) {
-                ScriptUtils.eval(_this.getBindScript(config) + "; " + script + " ", Object.assign(obj, {
+                ScriptUtils.eval("".concat(_this.getBindScript(config), "; ").concat(script, " "), Object.assign(obj, {
                     __render: Object.freeze(__assign({ element: it, attribute: DomUtils.getAttributeToObject(it) }, config === null || config === void 0 ? void 0 : config.eventVariables))
                 }));
                 // console.log('onInit--->', obj, varName, it)
@@ -807,20 +776,20 @@ var EventManager = /** @class */ (function () {
             if (ownerVariablePathName) {
                 bindObj = ScriptUtils.evalReturn(ownerVariablePathName, obj);
             }
-            var mapScript = it.getAttribute(EventManager.valueLinkAttrName + ":map");
+            var mapScript = it.getAttribute("".concat(EventManager.valueLinkAttrName, ":map"));
             if (attribute && attribute === varName) {
                 var getValue = _this.getValue(obj, attribute, bindObj);
                 if (typeof getValue === 'function' && getValue) {
                     var setValue = it.value;
                     if (mapScript) {
-                        setValue = ScriptUtils.eval(_this.getBindScript(config) + " return " + mapScript, Object.assign(bindObj, { __render: Object.freeze(__assign({ element: it, target: bindObj, range: Range.range, value: setValue, scripts: EventManager.setBindProperty(config === null || config === void 0 ? void 0 : config.scripts, obj) }, config === null || config === void 0 ? void 0 : config.eventVariables)) }));
+                        setValue = ScriptUtils.eval("".concat(_this.getBindScript(config), " return ").concat(mapScript), Object.assign(bindObj, { __render: Object.freeze(__assign({ element: it, target: bindObj, range: Range.range, value: setValue, scripts: EventManager.setBindProperty(config === null || config === void 0 ? void 0 : config.scripts, obj) }, config === null || config === void 0 ? void 0 : config.eventVariables)) }));
                     }
                     getValue(setValue);
                 }
                 else { //  if (getValue !== undefined && getValue !== null)
                     var setValue = getValue;
                     if (mapScript) {
-                        setValue = ScriptUtils.eval(_this.getBindScript(config) + " return " + mapScript, Object.assign(bindObj, { __render: Object.freeze(__assign({ element: it, target: bindObj, range: Range.range, value: setValue, scripts: EventManager.setBindProperty(config === null || config === void 0 ? void 0 : config.scripts, obj) }, config === null || config === void 0 ? void 0 : config.eventVariables)) }));
+                        setValue = ScriptUtils.eval("".concat(_this.getBindScript(config), " return ").concat(mapScript), Object.assign(bindObj, { __render: Object.freeze(__assign({ element: it, target: bindObj, range: Range.range, value: setValue, scripts: EventManager.setBindProperty(config === null || config === void 0 ? void 0 : config.scripts, obj) }, config === null || config === void 0 ? void 0 : config.eventVariables)) }));
                     }
                     it.value = setValue;
                 }
@@ -833,7 +802,7 @@ var EventManager = /** @class */ (function () {
                 script = 'return ' + script;
             }
             if (EventManager.isUsingThisVar(script, varName) || varName === undefined) {
-                var data = ScriptUtils.eval("const $element = this.__render.element; " + script + " ", Object.assign(obj, {
+                var data = ScriptUtils.eval("const $element = this.__render.element; ".concat(script, " "), Object.assign(obj, {
                     __render: Object.freeze({
                         element: it,
                         attribute: DomUtils.getAttributeToObject(it)
@@ -885,7 +854,7 @@ var EventManager = /** @class */ (function () {
                 script = 'return ' + script;
             }
             if (EventManager.isUsingThisVar(script, varName) || varName === undefined) {
-                var data = ScriptUtils.eval("const $element = this.__render.element;  " + script + " ", Object.assign(obj, {
+                var data = ScriptUtils.eval("const $element = this.__render.element;  ".concat(script, " "), Object.assign(obj, {
                     __render: Object.freeze({
                         element: it,
                         attribute: DomUtils.getAttributeToObject(it)
@@ -914,7 +883,7 @@ var EventManager = /** @class */ (function () {
                 script = 'return ' + script;
             }
             if (EventManager.isUsingThisVar(script, varName) || varName === undefined) {
-                var data = ScriptUtils.eval("const $element = this.element;  " + script + " ", Object.assign(obj, {
+                var data = ScriptUtils.eval("const $element = this.element;  ".concat(script, " "), Object.assign(obj, {
                     __render: Object.freeze({
                         element: it,
                         attribute: DomUtils.getAttributeToObject(it)
@@ -949,7 +918,7 @@ var EventManager = /** @class */ (function () {
                 var isUsing = EventManager.isUsingThisVar(v, varName);
                 // console.log('---isUsing--> varName:', varName, 'k:', k, 'v:', v, 'isUsing:', isUsing);
                 if (isUsing) {
-                    var data = ScriptUtils.eval("const $element = this.element;  return " + v + " ", Object.assign(obj, {
+                    var data = ScriptUtils.eval("const $element = this.element;  return ".concat(v, " "), Object.assign(obj, {
                         __render: Object.freeze({
                             element: it,
                             attribute: DomUtils.getAttributeToObject(it)
@@ -969,15 +938,15 @@ var EventManager = /** @class */ (function () {
             var script = attribute;
             it.addEventListener(eventName, function (event) {
                 var filter = true;
-                var filterScript = it.getAttribute(attr + ":filter");
+                var filterScript = it.getAttribute("".concat(attr, ":filter"));
                 var thisTarget = Object.assign(obj, {
                     __render: Object.freeze(__assign({ event: event, element: it, target: event.target, range: Range.range, attribute: DomUtils.getAttributeToObject(it), router: config === null || config === void 0 ? void 0 : config.router, scripts: EventManager.setBindProperty(config === null || config === void 0 ? void 0 : config.scripts, obj) }, config === null || config === void 0 ? void 0 : config.eventVariables))
                 });
                 if (filterScript) {
-                    filter = ScriptUtils.eval(_this.getBindScript(config) + " return " + filterScript, thisTarget);
+                    filter = ScriptUtils.eval("".concat(_this.getBindScript(config), " return ").concat(filterScript), thisTarget);
                 }
                 if (filter) {
-                    ScriptUtils.eval(_this.getBindScript(config) + " " + script + " ", thisTarget);
+                    ScriptUtils.eval("".concat(_this.getBindScript(config), " ").concat(script, " "), thisTarget);
                 }
             });
         });
@@ -1000,7 +969,7 @@ var EventManager = /** @class */ (function () {
                 });
                 bind.split(',').forEach(function (eventName) {
                     it.addEventListener(eventName.trim(), function (event) {
-                        ScriptUtils.eval("const $params = this.__render.params; " + _this.getBindScript(config) + "  " + script_1 + " ", Object.assign(obj, {
+                        ScriptUtils.eval("const $params = this.__render.params; ".concat(_this.getBindScript(config), "  ").concat(script_1, " "), Object.assign(obj, {
                             __render: Object.freeze(__assign({ event: event, element: it, attribute: DomUtils.getAttributeToObject(it), target: event.target, range: Range.range, scripts: EventManager.setBindProperty(config === null || config === void 0 ? void 0 : config.scripts, obj), params: params_1 }, config === null || config === void 0 ? void 0 : config.eventVariables))
                         }));
                     });
@@ -1021,7 +990,7 @@ var EventManager = /** @class */ (function () {
             if (it.nodeType === 1) {
                 var e = it;
                 sets.add(e);
-                e.querySelectorAll("[" + attrName + "]").forEach(function (it) {
+                e.querySelectorAll("[".concat(attrName, "]")).forEach(function (it) {
                     sets.add(it);
                 });
             }
@@ -1044,7 +1013,7 @@ var EventManager = /** @class */ (function () {
     };
     EventManager.prototype.setValue = function (obj, name, value) {
         name = name.replaceAll('this.', 'this.this.');
-        ScriptUtils.eval(name + " = this.value;", {
+        ScriptUtils.eval("".concat(name, " = this.value;"), {
             this: obj,
             value: value
         });
@@ -1058,7 +1027,7 @@ var EventManager = /** @class */ (function () {
             }
             EventManager.VARNAMES.forEach(function (it) {
                 // raws = raws!.replace(RegExp(it.replace('$', '\\$'), 'g'), `this?.___${it}`);
-                raws = raws.replace(RegExp(it.replace('$', '\\$'), 'g'), "this.___" + it);
+                raws = raws.replace(RegExp(it.replace('$', '\\$'), 'g'), "this.___".concat(it));
             });
             var variablePaths = ScriptUtils.getVariablePaths(raws !== null && raws !== void 0 ? raws : '');
             return variablePaths.has(varName);
@@ -1083,10 +1052,10 @@ var EventManager = /** @class */ (function () {
         if (config === null || config === void 0 ? void 0 : config.eventVariables) {
             var bindScript = Object.entries(config.eventVariables).filter(function (_a) {
                 var key = _a[0]; _a[1];
-                return !_this.bindScript.includes("const " + key);
+                return !_this.bindScript.includes("const ".concat(key));
             }).map(function (_a) {
                 var key = _a[0]; _a[1];
-                return "const " + key + " = this.__render." + key + ";";
+                return "const ".concat(key, " = this.__render.").concat(key, ";");
             }).join(';');
             return this.bindScript + '' + bindScript;
         }
@@ -1153,7 +1122,7 @@ var OperatorExecuter = /** @class */ (function () {
                         }
                         r = attrValue;
                         if (r && this.startingExecute) {
-                            r = ScriptUtils.eval(" " + this.render.bindScript + "; return " + attrValue, Object.assign(this.source.obj, { __render: this.render }));
+                            r = ScriptUtils.eval(" ".concat(this.render.bindScript, "; return ").concat(attrValue), Object.assign(this.source.obj, { __render: this.render }));
                         }
                         if ((_c = this.source.operatorAround) === null || _c === void 0 ? void 0 : _c.before) {
                             r = (_d = this.source.operatorAround) === null || _d === void 0 ? void 0 : _d.before(r, this);
@@ -1173,10 +1142,8 @@ var OperatorExecuter = /** @class */ (function () {
 var DrPre = /** @class */ (function (_super) {
     __extends(DrPre, _super);
     function DrPre(rawSet, render, returnContainer, elementSource, source, afterCallBack) {
-        var _this = this;
         source.operatorAround = undefined;
-        _this = _super.call(this, rawSet, render, returnContainer, elementSource, source, afterCallBack) || this;
-        return _this;
+        return _super.call(this, rawSet, render, returnContainer, elementSource, source, afterCallBack) || this;
     }
     DrPre.prototype.execute = function (value) {
         return __awaiter(this, void 0, void 0, function () {
@@ -1225,7 +1192,7 @@ var Dr = /** @class */ (function (_super) {
                 itRandom = RawSet.drItOtherEncoding(this.elementSource.element);
                 vars = RawSet.drVarEncoding(this.elementSource.element, (_a = this.elementSource.attrs.drVarOption) !== null && _a !== void 0 ? _a : '');
                 newTemp = this.source.config.window.document.createElement('temp');
-                ScriptUtils.eval("\n                    " + this.render.bindScript + "\n                    const n = $element.cloneNode(true);\n                    var destIt = " + this.elementSource.attrs.drItOption + ";\n                    if (destIt !== undefined) {\n                        n.getAttributeNames().forEach(it => n.setAttribute(it, n.getAttribute(it).replace(/\\#it\\#/g, destIt)))\n                        // console.log('----', n.innerHTML);\n                        n.innerHTML = n.innerHTML.replace(/\\#it\\#/g, destIt);\n                        // console.log('----', n.innerHTML);\n                    }\n                    if (this.__render.drStripOption === 'true') {\n                        Array.from(n.childNodes).forEach(it => this.__fag.append(it));\n                    } else {\n                        this.__render.fag.append(n);\n                    }", Object.assign(this.source.obj, {
+                ScriptUtils.eval("\n                    ".concat(this.render.bindScript, "\n                    const n = $element.cloneNode(true);\n                    var destIt = ").concat(this.elementSource.attrs.drItOption, ";\n                    if (destIt !== undefined) {\n                        n.getAttributeNames().forEach(it => n.setAttribute(it, n.getAttribute(it).replace(/\\#it\\#/g, destIt)))\n                        // console.log('----', n.innerHTML);\n                        n.innerHTML = n.innerHTML.replace(/\\#it\\#/g, destIt);\n                        // console.log('----', n.innerHTML);\n                    }\n                    if (this.__render.drStripOption === 'true') {\n                        Array.from(n.childNodes).forEach(it => this.__fag.append(it));\n                    } else {\n                        this.__render.fag.append(n);\n                    }"), Object.assign(this.source.obj, {
                     __render: Object.freeze(__assign({ fag: newTemp, drStripOption: this.elementSource.attrs.drStripOption }, this.render))
                 }));
                 RawSet.drVarDecoding(newTemp, vars);
@@ -1246,10 +1213,8 @@ var Dr = /** @class */ (function (_super) {
 var DrIf = /** @class */ (function (_super) {
     __extends(DrIf, _super);
     function DrIf(rawSet, render, returnContainer, elementSource, source, afterCallBack) {
-        var _this = this;
         source.operatorAround = undefined;
-        _this = _super.call(this, rawSet, render, returnContainer, elementSource, source, afterCallBack, false) || this;
-        return _this;
+        return _super.call(this, rawSet, render, returnContainer, elementSource, source, afterCallBack, false) || this;
     }
     DrIf.prototype.executeAttrRequire = function (attr) {
         var _a, _b, _c, _d;
@@ -1260,7 +1225,7 @@ var DrIf = /** @class */ (function (_super) {
                 itRandom = RawSet.drItOtherEncoding(this.elementSource.element);
                 vars = RawSet.drVarEncoding(this.elementSource.element, (_a = this.elementSource.attrs.drVarOption) !== null && _a !== void 0 ? _a : '');
                 newTemp = this.source.config.window.document.createElement('temp');
-                keepgoing = ScriptUtils.eval("\n                " + this.render.bindScript + "\n                " + ((_b = this.elementSource.attrs.drBeforeOption) !== null && _b !== void 0 ? _b : '') + "\n                if ($rawset.data === (" + attr + ")) {\n                    return false;\n                }\n                $rawset.data = " + attr + ";\n                if($rawset.data) {\n                    const n = $element.cloneNode(true);\n                    Object.entries(this.__render.drAttr).filter(([k,v]) => k !== 'drIf' && v).forEach(([k, v]) => n.setAttribute(this.__render.drAttrsOriginName[k], v));\n                    var destIt = " + this.elementSource.attrs.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 === 'true') {\n                        Array.from(n.childNodes).forEach(it => this.__render.fag.append(it));\n                    } else {\n                        this.__render.fag.append(n);\n                    }\n                }\n                " + ((_c = this.elementSource.attrs.drAfterOption) !== null && _c !== void 0 ? _c : '') + ";\n                return true;\n                ", Object.assign(this.source.obj, {
+                keepgoing = ScriptUtils.eval("\n                ".concat(this.render.bindScript, "\n                ").concat((_b = this.elementSource.attrs.drBeforeOption) !== null && _b !== void 0 ? _b : '', "\n                if ($rawset.data === (").concat(attr, ")) {\n                    return false;\n                }\n                $rawset.data = ").concat(attr, ";\n                if($rawset.data) {\n                    const n = $element.cloneNode(true);\n                    Object.entries(this.__render.drAttr).filter(([k,v]) => k !== 'drIf' && v).forEach(([k, v]) => n.setAttribute(this.__render.drAttrsOriginName[k], v));\n                    var destIt = ").concat(this.elementSource.attrs.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 === 'true') {\n                        Array.from(n.childNodes).forEach(it => this.__render.fag.append(it));\n                    } else {\n                        this.__render.fag.append(n);\n                    }\n                }\n                ").concat((_c = this.elementSource.attrs.drAfterOption) !== null && _c !== void 0 ? _c : '', ";\n                return true;\n                "), Object.assign(this.source.obj, {
                     __render: Object.freeze(__assign({ fag: newTemp, drAttr: this.elementSource.attrs, drAttrsOriginName: RawSet.drAttrsOriginName, drStripOption: this.elementSource.attrs.drStripOption }, this.render))
                 }));
                 // TODO: 뭐지?? 지워야되는거 아닌가?
@@ -1312,7 +1277,7 @@ var DrThis = /** @class */ (function (_super) {
                             RawSet.destroy(this.rawSet.data.obj, [], this.source.config, destroyOptions);
                         }
                         this.rawSet.data = attr;
-                        return [4 /*yield*/, RawSet.drThisCreate(this.rawSet, this.elementSource.element, "" + this.elementSource.attrs.drThis + (attr.config.objPath ? ('.' + attr.config.objPath) : ''), (_c = this.elementSource.attrs.drVarOption) !== null && _c !== void 0 ? _c : '', this.elementSource.attrs.drStripOption, this.source.obj, this.source.config, attr)];
+                        return [4 /*yield*/, RawSet.drThisCreate(this.rawSet, this.elementSource.element, "".concat(this.elementSource.attrs.drThis).concat(attr.config.objPath ? ('.' + attr.config.objPath) : ''), (_c = this.elementSource.attrs.drVarOption) !== null && _c !== void 0 ? _c : '', this.elementSource.attrs.drStripOption, this.source.obj, this.source.config, attr)];
                     case 1:
                         componentBody = _j.sent();
                         this.returnContainer.fag.append(componentBody);
@@ -1683,9 +1648,9 @@ var DrForm = /** @class */ (function (_super) {
             var _this = this;
             return __generator(this, function (_c) {
                 RawSet.drFormOtherMoveAttr(this.elementSource.element, 'name', 'temp-name', this.source.config);
-                data = ScriptUtils.evalReturn("" + attr, this.source.obj);
+                data = ScriptUtils.evalReturn("".concat(attr), this.source.obj);
                 childs = Array.from(this.elementSource.element.querySelectorAll('[name]'));
-                fromName = ScriptUtils.evalReturn((_a = this.elementSource.element.getAttribute(RawSet.DR_FORM_NAME + ":name")) !== null && _a !== void 0 ? _a : '', this.source.obj);
+                fromName = ScriptUtils.evalReturn((_a = this.elementSource.element.getAttribute("".concat(RawSet.DR_FORM_NAME, ":name"))) !== null && _a !== void 0 ? _a : '', this.source.obj);
                 thisName = fromName !== null && fromName !== void 0 ? fromName : this.elementSource.element.getAttribute('name');
                 // // 자기자신이 Input 대상일때
                 if (childs.length <= 0 && thisName) {
@@ -1698,32 +1663,32 @@ var DrForm = /** @class */ (function (_super) {
                 }
                 childs.forEach(function (it) {
                     var _a, _b, _c, _d, _e;
-                    var eventName = (_a = it.getAttribute(RawSet.DR_FORM_NAME + ":event")) !== null && _a !== void 0 ? _a : 'change';
-                    var validatorName = it.getAttribute(RawSet.DR_FORM_NAME + ":validator");
+                    var eventName = (_a = it.getAttribute("".concat(RawSet.DR_FORM_NAME, ":event"))) !== null && _a !== void 0 ? _a : 'change';
+                    var validatorName = it.getAttribute("".concat(RawSet.DR_FORM_NAME, ":validator"));
                     var attrEventName = EventManager.attrPrefix + 'event-' + eventName;
-                    var varpath = (_c = ScriptUtils.evalReturn((_b = _this.elementSource.element.getAttribute(RawSet.DR_FORM_NAME + ":name")) !== null && _b !== void 0 ? _b : '', _this.source.obj)) !== null && _c !== void 0 ? _c : it.getAttribute('name');
+                    var varpath = (_c = ScriptUtils.evalReturn((_b = _this.elementSource.element.getAttribute("".concat(RawSet.DR_FORM_NAME, ":name"))) !== null && _b !== void 0 ? _b : '', _this.source.obj)) !== null && _c !== void 0 ? _c : it.getAttribute('name');
                     if (varpath != null) {
                         if (validatorName) {
-                            ScriptUtils.eval("\n                                " + _this.render.bindScript + "\n                                const validator = typeof " + validatorName + " ==='function' ?  new  " + validatorName + "() : " + validatorName + ";\n                                " + attr + "['" + varpath + "'] = validator;\n                            ", Object.assign(_this.source.obj, {
+                            ScriptUtils.eval("\n                                ".concat(_this.render.bindScript, "\n                                const validator = typeof ").concat(validatorName, " ==='function' ?  new  ").concat(validatorName, "() : ").concat(validatorName, ";\n                                ").concat(attr, "['").concat(varpath, "'] = validator;\n                            "), Object.assign(_this.source.obj, {
                                 __render: Object.freeze(__assign({ drStripOption: _this.elementSource.attrs.drStripOption }, _this.render))
                             }));
                         }
-                        varpath = attr + "['" + varpath + "']";
-                        var data_1 = ScriptUtils.evalReturn("" + varpath, _this.source.obj);
+                        varpath = "".concat(attr, "['").concat(varpath, "']");
+                        var data_1 = ScriptUtils.evalReturn("".concat(varpath), _this.source.obj);
                         if (data_1 instanceof ValidatorArray) {
-                            it.setAttribute(attrEventName, varpath + ".setArrayValue($target, $target.value, $event); " + ((_d = it.getAttribute(attrEventName)) !== null && _d !== void 0 ? _d : '') + ";");
+                            it.setAttribute(attrEventName, "".concat(varpath, ".setArrayValue($target, $target.value, $event); ").concat((_d = it.getAttribute(attrEventName)) !== null && _d !== void 0 ? _d : '', ";"));
                             data_1.addValidator(it.value, it);
                         }
                         else if (data_1 instanceof Validator) {
                             // varpath += (varpath ? '.value' : 'value');
                             // varpath = drAttr.drForm + '.' + varpath;
                             // it.setAttribute(attrEventName, `${varpath} = $target.value; ${target}=$target; ${event}=$event;`);
-                            it.setAttribute(attrEventName, varpath + ".set($target.value, $target, $event); " + ((_e = it.getAttribute(attrEventName)) !== null && _e !== void 0 ? _e : '') + ";");
+                            it.setAttribute(attrEventName, "".concat(varpath, ".set($target.value, $target, $event); ").concat((_e = it.getAttribute(attrEventName)) !== null && _e !== void 0 ? _e : '', ";"));
                             data_1.setTarget(it);
                             data_1.value = it.value;
                         }
                         else {
-                            it.setAttribute(attrEventName, varpath + " = $target.value;");
+                            it.setAttribute(attrEventName, "".concat(varpath, " = $target.value;"));
                         }
                     }
                 });
@@ -1748,7 +1713,7 @@ var DrInnerText = /** @class */ (function (_super) {
             var _d;
             return __generator(this, function (_e) {
                 newTemp = this.source.config.window.document.createElement('temp');
-                ScriptUtils.eval(" \n                        " + this.render.bindScript + "\n                        const n = $element.cloneNode(true);  \n                        " + ((_a = this.elementSource.attrs.drBeforeOption) !== null && _a !== void 0 ? _a : '') + "\n                        n.innerText = " + attr + ";\n                        if (this.__render.drStripOption === 'true') {\n                            Array.from(n.childNodes).forEach(it => this.__render.fag.append(it));\n                        } else {\n                            this.__render.fag.append(n);\n                        }\n                        " + ((_b = this.elementSource.attrs.drAfterOption) !== null && _b !== void 0 ? _b : '') + "\n                    ", Object.assign(this.source.obj, {
+                ScriptUtils.eval(" \n                        ".concat(this.render.bindScript, "\n                        const n = $element.cloneNode(true);  \n                        ").concat((_a = this.elementSource.attrs.drBeforeOption) !== null && _a !== void 0 ? _a : '', "\n                        n.innerText = ").concat(attr, ";\n                        if (this.__render.drStripOption === 'true') {\n                            Array.from(n.childNodes).forEach(it => this.__render.fag.append(it));\n                        } else {\n                            this.__render.fag.append(n);\n                        }\n                        ").concat((_b = this.elementSource.attrs.drAfterOption) !== null && _b !== void 0 ? _b : '', "\n                    "), Object.assign(this.source.obj, {
                     __render: Object.freeze(__assign({ drStripOption: this.elementSource.attrs.drStripOption, fag: newTemp }, this.render))
                 }));
                 tempalte = this.source.config.window.document.createElement('template');
@@ -1776,7 +1741,7 @@ var DrInnerHTML = /** @class */ (function (_super) {
             var _d;
             return __generator(this, function (_e) {
                 newTemp = this.source.config.window.document.createElement('temp');
-                ScriptUtils.eval("\n                        " + this.render.bindScript + "\n                        const n = $element.cloneNode(true);\n                        " + ((_a = this.elementSource.attrs.drBeforeOption) !== null && _a !== void 0 ? _a : '') + "\n                        n.innerHTML = " + attr + ";\n                        if (this.__render.drStripOption === 'true') {\n                            Array.from(n.childNodes).forEach(it => this.__render.fag.append(it));\n                        } else {\n                            this.__render.fag.append(n);\n                        }\n                        " + ((_b = this.elementSource.attrs.drAfterOption) !== null && _b !== void 0 ? _b : '') + "\n                    ", Object.assign(this.source.obj, {
+                ScriptUtils.eval("\n                        ".concat(this.render.bindScript, "\n                        const n = $element.cloneNode(true);\n                        ").concat((_a = this.elementSource.attrs.drBeforeOption) !== null && _a !== void 0 ? _a : '', "\n                        n.innerHTML = ").concat(attr, ";\n                        if (this.__render.drStripOption === 'true') {\n                            Array.from(n.childNodes).forEach(it => this.__render.fag.append(it));\n                        } else {\n                            this.__render.fag.append(n);\n                        }\n                        ").concat((_b = this.elementSource.attrs.drAfterOption) !== null && _b !== void 0 ? _b : '', "\n                    "), Object.assign(this.source.obj, {
                     __render: Object.freeze(__assign({ drStripOption: this.elementSource.attrs.drStripOption, fag: newTemp }, this.render
                     // eslint-disable-next-line no-use-before-define
                     ))
@@ -1797,10 +1762,8 @@ var DrInnerHTML = /** @class */ (function (_super) {
 var DrFor = /** @class */ (function (_super) {
     __extends(DrFor, _super);
     function DrFor(rawSet, render, returnContainer, elementSource, source, afterCallBack) {
-        var _this = this;
         source.operatorAround = undefined;
-        _this = _super.call(this, rawSet, render, returnContainer, elementSource, source, afterCallBack, false) || this;
-        return _this;
+        return _super.call(this, rawSet, render, returnContainer, elementSource, source, afterCallBack, false) || this;
     }
     DrFor.prototype.executeAttrRequire = function (attr) {
         var _a, _b, _c, _d;
@@ -1811,7 +1774,7 @@ var DrFor = /** @class */ (function (_super) {
                 itRandom = RawSet.drItOtherEncoding(this.elementSource.element);
                 vars = RawSet.drVarEncoding(this.elementSource.element, (_a = this.elementSource.attrs.drVarOption) !== null && _a !== void 0 ? _a : '');
                 newTemp = this.source.config.window.document.createElement('temp');
-                ScriptUtils.eval("\n                    " + this.render.bindScript + "\n                    " + ((_b = this.elementSource.attrs.drBeforeOption) !== null && _b !== void 0 ? _b : '') + "\n                    for(" + attr + ") {\n                        const n = this.__render.element.cloneNode(true);\n                        var destIt = " + this.elementSource.attrs.drItOption + ";\n                        if (destIt !== undefined) {\n                            n.getAttributeNames().forEach(it => n.setAttribute(it, n.getAttribute(it).replace(/\\#it\\#/g, destIt).replace(/\\#nearForIt\\#/g, destIt).replace(/\\#nearForIndex\\#/g, destIt))) \n                            n.innerHTML = n.innerHTML.replace(/\\#it\\#/g, destIt).replace(/\\#index\\#/g, destIt);\n                        }\n                        if (this.__render.drStripOption === 'true') {\n                            Array.from(n.childNodes).forEach(it => this.__render.fag.append(it));\n                        } else {\n                            this.__render.fag.append(n);\n                        }\n                    }\n                    " + ((_c = this.elementSource.attrs.drAfterOption) !== null && _c !== void 0 ? _c : '') + "\n                    ", Object.assign(this.source.obj, {
+                ScriptUtils.eval("\n                    ".concat(this.render.bindScript, "\n                    ").concat((_b = this.elementSource.attrs.drBeforeOption) !== null && _b !== void 0 ? _b : '', "\n                    for(").concat(attr, ") {\n                        const n = this.__render.element.cloneNode(true);\n                        var destIt = ").concat(this.elementSource.attrs.drItOption, ";\n                        if (destIt !== undefined) {\n                            n.getAttributeNames().forEach(it => n.setAttribute(it, n.getAttribute(it).replace(/\\#it\\#/g, destIt).replace(/\\#nearForIt\\#/g, destIt).replace(/\\#nearForIndex\\#/g, destIt))) \n                            n.innerHTML = n.innerHTML.replace(/\\#it\\#/g, destIt).replace(/\\#index\\#/g, destIt);\n                        }\n                        if (this.__render.drStripOption === 'true') {\n                            Array.from(n.childNodes).forEach(it => this.__render.fag.append(it));\n                        } else {\n                            this.__render.fag.append(n);\n                        }\n                    }\n                    ").concat((_c = this.elementSource.attrs.drAfterOption) !== null && _c !== void 0 ? _c : '', "\n                    "), Object.assign(this.source.obj, {
                     __render: Object.freeze(__assign({ fag: newTemp, drStripOption: this.elementSource.attrs.drStripOption }, this.render))
                 }));
                 RawSet.drVarDecoding(newTemp, vars);
@@ -1832,10 +1795,8 @@ var DrFor = /** @class */ (function (_super) {
 var DrForOf = /** @class */ (function (_super) {
     __extends(DrForOf, _super);
     function DrForOf(rawSet, render, returnContainer, elementSource, source, afterCallBack) {
-        var _this = this;
         source.operatorAround = undefined;
-        _this = _super.call(this, rawSet, render, returnContainer, elementSource, source, afterCallBack, false) || this;
-        return _this;
+        return _super.call(this, rawSet, render, returnContainer, elementSource, source, afterCallBack, false) || this;
     }
     DrForOf.prototype.executeAttrRequire = function (attr) {
         var _a, _b, _c, _d;
@@ -1846,7 +1807,7 @@ var DrForOf = /** @class */ (function (_super) {
                 itRandom = RawSet.drItOtherEncoding(this.elementSource.element);
                 vars = RawSet.drVarEncoding(this.elementSource.element, (_a = this.elementSource.attrs.drVarOption) !== null && _a !== void 0 ? _a : '');
                 newTemp = this.source.config.window.document.createElement('temp');
-                ScriptUtils.eval("\n                    " + this.render.bindScript + "\n                    " + ((_b = this.elementSource.attrs.drBeforeOption) !== null && _b !== void 0 ? _b : '') + "\n                    var i = 0; \n                    const forOf = " + attr + ";\n                    const forOfStr = `" + attr + "`.trim();\n                    if (forOf) {\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                            Object.entries(this.__render.drAttr).filter(([k,v]) => k !== 'drForOf' && k !== 'drNextOption' && v).forEach(([k, v]) => n.setAttribute(this.__render.drAttrsOriginName[k], v));\n                            n.getAttributeNames().forEach(it => n.setAttribute(it, n.getAttribute(it).replace(/\\#it\\#/g, destIt).replace(/\\#nearForOfIt\\#/g, destIt).replace(/\\#it\\#/g, destIt).replace(/\\#nearForOfIndex\\#/g, i)))\n                            n.innerHTML = n.innerHTML.replace(/\\#it\\#/g, destIt).replace(/\\#index\\#/g, i);\n                            if (this.__render.drStripOption === 'true') {\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                        \n                        if('" + this.elementSource.attrs.drNextOption + "' !== 'null') {\n                            const n = this.__render.element.cloneNode(true);\n                            Object.entries(this.__render.drAttr).filter(([k,v]) => k !== 'drForOf' && k !== 'drNextOption' && v).forEach(([k, v]) => n.setAttribute(this.__render.drAttrsOriginName[k], v));\n                            const [name, idx] = '" + this.elementSource.attrs.drNextOption + "'.split(',');\n                            n.setAttribute('dr-for-of', name + '[' + idx + ']');\n                            n.setAttribute('dr-next', name + ',' +  (Number(idx) + 1));\n                            this.__render.fag.append(n);\n                        }\n                    }\n                    " + ((_c = this.elementSource.attrs.drAfterOption) !== null && _c !== void 0 ? _c : '') + "\n                    ", Object.assign(this.source.obj, {
+                ScriptUtils.eval("\n                    ".concat(this.render.bindScript, "\n                    ").concat((_b = this.elementSource.attrs.drBeforeOption) !== null && _b !== void 0 ? _b : '', "\n                    var i = 0; \n                    const forOf = ").concat(attr, ";\n                    const forOfStr = `").concat(attr, "`.trim();\n                    if (forOf) {\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                            Object.entries(this.__render.drAttr).filter(([k,v]) => k !== 'drForOf' && k !== 'drNextOption' && v).forEach(([k, v]) => n.setAttribute(this.__render.drAttrsOriginName[k], v));\n                            n.getAttributeNames().forEach(it => n.setAttribute(it, n.getAttribute(it).replace(/\\#it\\#/g, destIt).replace(/\\#nearForOfIt\\#/g, destIt).replace(/\\#it\\#/g, destIt).replace(/\\#nearForOfIndex\\#/g, i)))\n                            n.innerHTML = n.innerHTML.replace(/\\#it\\#/g, destIt).replace(/\\#index\\#/g, i);\n                            if (this.__render.drStripOption === 'true') {\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                        \n                        if('").concat(this.elementSource.attrs.drNextOption, "' !== 'null') {\n                            const n = this.__render.element.cloneNode(true);\n                            Object.entries(this.__render.drAttr).filter(([k,v]) => k !== 'drForOf' && k !== 'drNextOption' && v).forEach(([k, v]) => n.setAttribute(this.__render.drAttrsOriginName[k], v));\n                            const [name, idx] = '").concat(this.elementSource.attrs.drNextOption, "'.split(',');\n                            n.setAttribute('dr-for-of', name + '[' + idx + ']');\n                            n.setAttribute('dr-next', name + ',' +  (Number(idx) + 1));\n                            this.__render.fag.append(n);\n                        }\n                    }\n                    ").concat((_c = this.elementSource.attrs.drAfterOption) !== null && _c !== void 0 ? _c : '', "\n                    "), Object.assign(this.source.obj, {
                     __render: Object.freeze(__assign({ drStripOption: this.elementSource.attrs.drStripOption, drAttr: this.elementSource.attrs, drAttrsOriginName: RawSet.drAttrsOriginName, fag: newTemp }, this.render
                     // eslint-disable-next-line no-use-before-define
                     ))
@@ -1870,10 +1831,8 @@ var DrForOf = /** @class */ (function (_super) {
 var DrAppender = /** @class */ (function (_super) {
     __extends(DrAppender, _super);
     function DrAppender(rawSet, render, returnContainer, elementSource, source, afterCallBack) {
-        var _this = this;
         source.operatorAround = undefined;
-        _this = _super.call(this, rawSet, render, returnContainer, elementSource, source, afterCallBack, false) || this;
-        return _this;
+        return _super.call(this, rawSet, render, returnContainer, elementSource, source, afterCallBack, false) || this;
     }
     DrAppender.prototype.executeAttrRequire = function (attr) {
         var _a, _b, _c, _d;
@@ -1884,7 +1843,7 @@ var DrAppender = /** @class */ (function (_super) {
                 itRandom = RawSet.drItOtherEncoding(this.elementSource.element);
                 vars = RawSet.drVarEncoding(this.elementSource.element, (_a = this.elementSource.attrs.drVarOption) !== null && _a !== void 0 ? _a : '');
                 newTemp = this.source.config.window.document.createElement('temp');
-                ScriptUtils.eval("\n                    try{\n                    " + this.render.bindScript + "\n                    " + ((_b = this.elementSource.attrs.drBeforeOption) !== null && _b !== void 0 ? _b : '') + "\n                        const ifWrap = document.createElement('div');\n                        ifWrap.setAttribute('dr-strip', 'true');\n                        ifWrap.setAttribute('dr-if', '" + this.elementSource.attrs.drAppender + " && " + this.elementSource.attrs.drAppender + ".length > 0');\n                        const n = this.__render.element.cloneNode(true);\n                        Object.entries(this.__render.drAttr).filter(([k,v]) => k !== 'drAppender' && v).forEach(([k, v]) => n.setAttribute(this.__render.drAttrsOriginName[k], v));\n                        n.setAttribute('dr-for-of', '" + this.elementSource.attrs.drAppender + "[' + (" + this.elementSource.attrs.drAppender + ".length-1) + ']');\n                        n.setAttribute('dr-next', '" + this.elementSource.attrs.drAppender + ",' + " + this.elementSource.attrs.drAppender + ".length);\n                        ifWrap.append(n);\n                        this.__render.fag.append(ifWrap);\n                    " + ((_c = this.elementSource.attrs.drAfterOption) !== null && _c !== void 0 ? _c : '') + "\n                    }catch(e){}\n                    ", Object.assign(this.source.obj, {
+                ScriptUtils.eval("\n                    try{\n                    ".concat(this.render.bindScript, "\n                    ").concat((_b = this.elementSource.attrs.drBeforeOption) !== null && _b !== void 0 ? _b : '', "\n                        const ifWrap = document.createElement('div');\n                        ifWrap.setAttribute('dr-strip', 'true');\n                        ifWrap.setAttribute('dr-if', '").concat(this.elementSource.attrs.drAppender, " && ").concat(this.elementSource.attrs.drAppender, ".length > 0');\n                        const n = this.__render.element.cloneNode(true);\n                        Object.entries(this.__render.drAttr).filter(([k,v]) => k !== 'drAppender' && v).forEach(([k, v]) => n.setAttribute(this.__render.drAttrsOriginName[k], v));\n                        n.setAttribute('dr-for-of', '").concat(this.elementSource.attrs.drAppender, "[' + (").concat(this.elementSource.attrs.drAppender, ".length-1) + ']');\n                        n.setAttribute('dr-next', '").concat(this.elementSource.attrs.drAppender, ",' + ").concat(this.elementSource.attrs.drAppender, ".length);\n                        ifWrap.append(n);\n                        this.__render.fag.append(ifWrap);\n                    ").concat((_c = this.elementSource.attrs.drAfterOption) !== null && _c !== void 0 ? _c : '', "\n                    }catch(e){}\n                    "), Object.assign(this.source.obj, {
                     __render: Object.freeze(__assign({ drStripOption: this.elementSource.attrs.drStripOption, drAttr: this.elementSource.attrs, drAttrsOriginName: RawSet.drAttrsOriginName, fag: newTemp }, this.render
                     // eslint-disable-next-line no-use-before-define
                     ))
@@ -1908,10 +1867,8 @@ var DrAppender = /** @class */ (function (_super) {
 var DrRepeat = /** @class */ (function (_super) {
     __extends(DrRepeat, _super);
     function DrRepeat(rawSet, render, returnContainer, elementSource, source, afterCallBack) {
-        var _this = this;
         source.operatorAround = undefined;
-        _this = _super.call(this, rawSet, render, returnContainer, elementSource, source, afterCallBack, false) || this;
-        return _this;
+        return _super.call(this, rawSet, render, returnContainer, elementSource, source, afterCallBack, false) || this;
     }
     DrRepeat.prototype.executeAttrRequire = function (attr) {
         var _a, _b, _c, _d;
@@ -1922,7 +1879,7 @@ var DrRepeat = /** @class */ (function (_super) {
                 itRandom = RawSet.drItOtherEncoding(this.elementSource.element);
                 vars = RawSet.drVarEncoding(this.elementSource.element, (_a = this.elementSource.attrs.drVarOption) !== null && _a !== void 0 ? _a : '');
                 newTemp = this.source.config.window.document.createElement('temp');
-                ScriptUtils.eval("\n                    " + this.render.bindScript + "\n                    " + ((_b = this.elementSource.attrs.drBeforeOption) !== null && _b !== void 0 ? _b : '') + "\n                    var i = 0; \n                    const repeat = " + attr + ";\n                    const repeatStr = `" + attr + "`;\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).replace(/\\#nearRangeIt\\#/g, destIt).replace(/\\#nearRangeIndex\\#/g, destIt)))\n                        n.innerHTML = n.innerHTML.replace(/\\#it\\#/g, destIt).replace(/\\#index\\#/g, destIt);\n                        \n                        if (this.__render.drStripOption === 'true') {\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                    " + ((_c = this.elementSource.attrs.drAfterOption) !== null && _c !== void 0 ? _c : '') + "\n                    ", Object.assign(this.source.obj, {
+                ScriptUtils.eval("\n                    ".concat(this.render.bindScript, "\n                    ").concat((_b = this.elementSource.attrs.drBeforeOption) !== null && _b !== void 0 ? _b : '', "\n                    var i = 0; \n                    const repeat = ").concat(attr, ";\n                    const repeatStr = `").concat(attr, "`;\n                    let range = repeat;\n                    if (typeof repeat === 'number') {\n                        range = ").concat(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).replace(/\\#nearRangeIt\\#/g, destIt).replace(/\\#nearRangeIndex\\#/g, destIt)))\n                        n.innerHTML = n.innerHTML.replace(/\\#it\\#/g, destIt).replace(/\\#index\\#/g, destIt);\n                        \n                        if (this.__render.drStripOption === 'true') {\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                    ").concat((_c = this.elementSource.attrs.drAfterOption) !== null && _c !== void 0 ? _c : '', "\n                    "), Object.assign(this.source.obj, {
                     __render: Object.freeze(__assign({ fag: newTemp, drStripOption: this.elementSource.attrs.drStripOption }, this.render))
                 }));
                 RawSet.drVarDecoding(newTemp, vars);
@@ -1943,10 +1900,8 @@ var DrRepeat = /** @class */ (function (_super) {
 var DrTargetElement = /** @class */ (function (_super) {
     __extends(DrTargetElement, _super);
     function DrTargetElement(rawSet, render, returnContainer, elementSource, source, afterCallBack) {
-        var _this = this;
         source.operatorAround = undefined;
-        _this = _super.call(this, rawSet, render, returnContainer, elementSource, source, afterCallBack, false) || this;
-        return _this;
+        return _super.call(this, rawSet, render, returnContainer, elementSource, source, afterCallBack, false) || this;
     }
     DrTargetElement.prototype.execute = function () {
         var _a, _b, _c, _d;
@@ -1970,7 +1925,7 @@ var DrTargetElement = /** @class */ (function (_super) {
                             if (detectAction_1 && render_1) {
                                 this.rawSet.detect = {
                                     action: function () {
-                                        var script = "var $component = this.__render.component; var $element = this.__render.element; var $innerHTML = this.__render.innerHTML; var $attribute = this.__render.attribute;  " + detectAction_1 + " ";
+                                        var script = "var $component = this.__render.component; var $element = this.__render.element; var $innerHTML = this.__render.innerHTML; var $attribute = this.__render.attribute;  ".concat(detectAction_1, " ");
                                         ScriptUtils.eval(script, Object.assign(_this.source.obj, {
                                             __render: render_1
                                         }));
@@ -2000,10 +1955,8 @@ var DrTargetElement = /** @class */ (function (_super) {
 var DrTargetAttr = /** @class */ (function (_super) {
     __extends(DrTargetAttr, _super);
     function DrTargetAttr(rawSet, render, returnContainer, elementSource, source, afterCallBack) {
-        var _this = this;
         source.operatorAround = undefined;
-        _this = _super.call(this, rawSet, render, returnContainer, elementSource, source, afterCallBack, false) || this;
-        return _this;
+        return _super.call(this, rawSet, render, returnContainer, elementSource, source, afterCallBack, false) || this;
     }
     DrTargetAttr.prototype.execute = function () {
         var _a, _b, _c, _d;
@@ -2057,10 +2010,8 @@ exports.RawSetType = void 0;
 var DrThisProperty = /** @class */ (function (_super) {
     __extends(DrThisProperty, _super);
     function DrThisProperty(rawSet, render, returnContainer, elementSource, source, afterCallBack) {
-        var _this = this;
         source.operatorAround = undefined;
-        _this = _super.call(this, rawSet, render, returnContainer, elementSource, source, afterCallBack, false) || this;
-        return _this;
+        return _super.call(this, rawSet, render, returnContainer, elementSource, source, afterCallBack, false) || this;
     }
     DrThisProperty.prototype.executeAttrRequire = function (attr) {
         var _a, _b, _c, _d, _e;
@@ -2079,7 +2030,7 @@ var DrThisProperty = /** @class */ (function (_super) {
                 // }
                 // await new Promise(resolve => setTimeout(resolve, 1000));
                 // console.log('!!!!!!!!!!!!!!', this.rawSet);
-                ScriptUtils.eval("\n                    " + this.render.bindScript + "\n                    " + ((_c = this.elementSource.attrs.drBeforeOption) !== null && _c !== void 0 ? _c : '') + "\n                    var i = 0; \n                    const dictionary = " + attr + ";\n                    const dictionaryKey = '" + dictionaryKey + "';\n                    const dictionaryStr = `" + attr + "`.trim();\n                    // console.log('----@#!@#@!#', this.__render.oldChild);\n                    if (dictionary) {\n                        for(const it in dictionary) {\n                            var destIt = dictionaryStr + '[\"' + it + '\"]';\n                            const n = this.__render.element.cloneNode(true);\n                            n.setAttribute('dr-this', destIt);\n                            n.setAttribute('dr-key', it);\n                            // n.setAttribute('dr-dictionary-key', it);\n                            this.__render.fag.append(n);\n                            i++;\n                        }\n                         this.__render.rawset.point.start.setAttribute('dr-has-keys',Object.keys(dictionary).join(','));\n                    }\n                    " + ((_d = this.elementSource.attrs.drAfterOption) !== null && _d !== void 0 ? _d : '') + "\n                    ", Object.assign(this.source.obj, {
+                ScriptUtils.eval("\n                    ".concat(this.render.bindScript, "\n                    ").concat((_c = this.elementSource.attrs.drBeforeOption) !== null && _c !== void 0 ? _c : '', "\n                    var i = 0; \n                    const dictionary = ").concat(attr, ";\n                    const dictionaryKey = '").concat(dictionaryKey, "';\n                    const dictionaryStr = `").concat(attr, "`.trim();\n                    // console.log('----@#!@#@!#', this.__render.oldChild);\n                    if (dictionary) {\n                        for(const it in dictionary) {\n                            var destIt = dictionaryStr + '[\"' + it + '\"]';\n                            const n = this.__render.element.cloneNode(true);\n                            n.setAttribute('dr-this', destIt);\n                            n.setAttribute('dr-key', it);\n                            // n.setAttribute('dr-dictionary-key', it);\n                            this.__render.fag.append(n);\n                            i++;\n                        }\n                         this.__render.rawset.point.start.setAttribute('dr-has-keys',Object.keys(dictionary).join(','));\n                    }\n                    ").concat((_d = this.elementSource.attrs.drAfterOption) !== null && _d !== void 0 ? _d : '', "\n                    "), Object.assign(this.source.obj, {
                     __render: Object.freeze(__assign({ drStripOption: this.elementSource.attrs.drStripOption, drAttr: this.elementSource.attrs, drAttrsOriginName: RawSet.drAttrsOriginName, fag: newTemp }, this.render))
                 }));
                 RawSet.drVarDecoding(newTemp, vars);
@@ -2105,7 +2056,7 @@ var DrThisProperty = /** @class */ (function (_super) {
             var cNode = _c[_i];
             var element = cNode.cloneNode(true);
             element.removeAttribute(RawSet.DR_THIS_PROPERTY_NAME);
-            element.setAttribute(RawSet.DR_THIS_NAME, "this." + fullPath);
+            element.setAttribute(RawSet.DR_THIS_NAME, "this.".concat(fullPath));
             element.setAttribute(RawSet.DR_KEY_OPTIONNAME, key);
             // rawSet.point.end.after(element);
             var fg = config.window.document.createDocumentFragment();
@@ -2138,12 +2089,14 @@ exports.RawSetOperatorType = void 0;
 var commentre = /\/\*[^*]*\*+([^/*][^*]*\*+)*\//g;
 function cssParse (css, options) {
   options = options || {};
+
   /**
    * Positional.
    */
 
   var lineno = 1;
   var column = 1;
+
   /**
    * Update lineno and column based on `str`.
    */
@@ -2154,11 +2107,11 @@ function cssParse (css, options) {
     var i = str.lastIndexOf('\n');
     column = ~i ? str.length - i : column + str.length;
   }
+
   /**
    * Mark position and patch `node.position`.
    */
 
-
   function position() {
     var start = {
       line: lineno,
@@ -2170,11 +2123,11 @@ function cssParse (css, options) {
       return node;
     };
   }
+
   /**
    * Store position information for a node
    */
 
-
   function Position(start) {
     this.start = start;
     this.end = {
@@ -2183,18 +2136,18 @@ function cssParse (css, options) {
     };
     this.source = options.source;
   }
+
   /**
    * Non-enumerable source string
    */
 
-
   Position.prototype.content = css;
+
   /**
    * Error `msg`.
    */
 
   var errorsList = [];
-
   function error(msg) {
     var err = new Error(options.source + ':' + lineno + ':' + column + ': ' + msg);
     err.reason = msg;
@@ -2202,18 +2155,17 @@ function cssParse (css, options) {
     err.line = lineno;
     err.column = column;
     err.source = css;
-
     if (options.silent) {
       errorsList.push(err);
     } else {
       throw err;
     }
   }
+
   /**
    * Parse stylesheet.
    */
 
-
   function stylesheet() {
     var rulesList = rules();
     return {
@@ -2225,47 +2177,45 @@ function cssParse (css, options) {
       }
     };
   }
+
   /**
    * Opening brace.
    */
 
-
   function open() {
     return match(/^{\s*/);
   }
+
   /**
    * Closing brace.
    */
 
-
   function close() {
     return match(/^}/);
   }
+
   /**
    * Parse ruleset.
    */
 
-
   function rules() {
     var node;
     var rules = [];
     whitespace();
     comments(rules);
-
     while (css.length && css.charAt(0) != '}' && (node = atrule() || rule())) {
       if (node !== false) {
         rules.push(node);
         comments(rules);
       }
     }
-
     return rules;
   }
+
   /**
    * Match `re` and return captures.
    */
 
-
   function match(re) {
     var m = re.exec(css);
     if (!m) return;
@@ -2274,49 +2224,43 @@ function cssParse (css, options) {
     css = css.slice(str.length);
     return m;
   }
+
   /**
    * Parse whitespace.
    */
 
-
   function whitespace() {
     match(/^\s*/);
   }
+
   /**
    * Parse comments;
    */
 
-
   function comments(rules) {
     var c;
     rules = rules || [];
-
     while (c = comment()) {
       if (c !== false) {
         rules.push(c);
       }
     }
-
     return rules;
   }
+
   /**
    * Parse comment.
    */
 
-
   function comment() {
     var pos = position();
     if ('/' != css.charAt(0) || '*' != css.charAt(1)) return;
     var i = 2;
-
     while ("" != css.charAt(i) && ('*' != css.charAt(i) || '/' != css.charAt(i + 1))) ++i;
-
     i += 2;
-
     if ("" === css.charAt(i - 1)) {
       return error('End of comment missing');
     }
-
     var str = css.slice(2, i - 2);
     column += 2;
     updatePosition(str);
@@ -2327,84 +2271,84 @@ function cssParse (css, options) {
       comment: str
     });
   }
+
   /**
    * Parse selector.
    */
 
-
   function selector() {
     var m = match(/^([^{]+)/);
     if (!m) return;
     /* @fix Remove all comments from selectors
      * http://ostermiller.org/findcomment.html */
-
     return trim(m[0]).replace(/\/\*([^*]|[\r\n]|(\*+([^*/]|[\r\n])))*\*\/+/g, '').replace(/"(?:\\"|[^"])*"|'(?:\\'|[^'])*'/g, function (m) {
       return m.replace(/,/g, '\u200C');
     }).split(/\s*(?![^(]*\)),\s*/).map(function (s) {
       return s.replace(/\u200C/g, ',');
     });
   }
+
   /**
    * Parse declaration.
    */
 
-
   function declaration() {
-    var pos = position(); // prop
+    var pos = position();
 
+    // prop
     var prop = match(/^(\*?[-#\/\*\\\w]+(\[[0-9a-z_-]+\])?)\s*/);
     if (!prop) return;
-    prop = trim(prop[0]); // :
+    prop = trim(prop[0]);
 
-    if (!match(/^:\s*/)) return error("property missing ':'"); // val
+    // :
+    if (!match(/^:\s*/)) return error("property missing ':'");
 
+    // val
     var val = match(/^((?:'(?:\\'|.)*?'|"(?:\\"|.)*?"|\([^\)]*?\)|[^};])+)/);
     var ret = pos({
       type: 'declaration',
       property: prop.replace(commentre, ''),
       value: val ? trim(val[0]).replace(commentre, '') : ''
-    }); // ;
+    });
 
+    // ;
     match(/^[;\s]*/);
     return ret;
   }
+
   /**
    * Parse declarations.
    */
 
-
   function declarations() {
     var decls = [];
     if (!open()) return error("missing '{'");
-    comments(decls); // declarations
+    comments(decls);
 
+    // declarations
     var decl;
-
     while (decl = declaration()) {
       if (decl !== false) {
         decls.push(decl);
         comments(decls);
       }
     }
-
     if (!close()) return error("missing '}'");
     return decls;
   }
+
   /**
    * Parse keyframe.
    */
 
-
   function keyframe() {
     var m;
     var vals = [];
     var pos = position();
-
     while (m = match(/^((\d+\.\d+|\.\d+|\d+)%?|[a-z]+)\s*/)) {
       vals.push(m[1]);
       match(/^,\s*/);
     }
-
     if (!vals.length) return;
     return pos({
       type: 'keyframe',
@@ -2412,29 +2356,28 @@ function cssParse (css, options) {
       declarations: declarations()
     });
   }
+
   /**
    * Parse keyframes.
    */
 
-
   function atkeyframes() {
     var pos = position();
     var m = match(/^@([-\w]+)?keyframes\s*/);
     if (!m) return;
-    var vendor = m[1]; // identifier
+    var vendor = m[1];
 
+    // identifier
     var m = match(/^([-\w]+)\s*/);
     if (!m) return error("@keyframes missing name");
     var name = m[1];
     if (!open()) return error("@keyframes missing '{'");
     var frame;
     var frames = comments();
-
     while (frame = keyframe()) {
       frames.push(frame);
       frames = frames.concat(comments());
     }
-
     if (!close()) return error("@keyframes missing '}'");
     return pos({
       type: 'keyframes',
@@ -2443,11 +2386,11 @@ function cssParse (css, options) {
       keyframes: frames
     });
   }
+
   /**
    * Parse supports.
    */
 
-
   function atsupports() {
     var pos = position();
     var m = match(/^@supports *([^{]+)/);
@@ -2462,11 +2405,11 @@ function cssParse (css, options) {
       rules: style
     });
   }
+
   /**
    * Parse host.
    */
 
-
   function athost() {
     var pos = position();
     var m = match(/^@host\s*/);
@@ -2479,11 +2422,11 @@ function cssParse (css, options) {
       rules: style
     });
   }
+
   /**
    * Parse media.
    */
 
-
   function atmedia() {
     var pos = position();
     var m = match(/^@media *([^{]+)/);
@@ -2498,11 +2441,11 @@ function cssParse (css, options) {
       rules: style
     });
   }
+
   /**
    * Parse custom-media.
    */
 
-
   function atcustommedia() {
     var pos = position();
     var m = match(/^@custom-media\s+(--[^\s]+)\s*([^{;]+);/);
@@ -2513,26 +2456,25 @@ function cssParse (css, options) {
       media: trim(m[2])
     });
   }
+
   /**
    * Parse paged media.
    */
 
-
   function atpage() {
     var pos = position();
     var m = match(/^@page */);
     if (!m) return;
     var sel = selector() || [];
     if (!open()) return error("@page missing '{'");
-    var decls = comments(); // declarations
+    var decls = comments();
 
+    // declarations
     var decl;
-
     while (decl = declaration()) {
       decls.push(decl);
       decls = decls.concat(comments());
     }
-
     if (!close()) return error("@page missing '}'");
     return pos({
       type: 'page',
@@ -2540,11 +2482,11 @@ function cssParse (css, options) {
       declarations: decls
     });
   }
+
   /**
    * Parse document.
    */
 
-
   function atdocument() {
     var pos = position();
     var m = match(/^@([-\w]+)?document *([^{]+)/);
@@ -2561,54 +2503,53 @@ function cssParse (css, options) {
       rules: style
     });
   }
+
   /**
    * Parse font-face.
    */
 
-
   function atfontface() {
     var pos = position();
     var m = match(/^@font-face\s*/);
     if (!m) return;
     if (!open()) return error("@font-face missing '{'");
-    var decls = comments(); // declarations
+    var decls = comments();
 
+    // declarations
     var decl;
-
     while (decl = declaration()) {
       decls.push(decl);
       decls = decls.concat(comments());
     }
-
     if (!close()) return error("@font-face missing '}'");
     return pos({
       type: 'font-face',
       declarations: decls
     });
   }
+
   /**
    * Parse import
    */
 
-
   var atimport = _compileAtrule('import');
+
   /**
    * Parse charset
    */
 
-
   var atcharset = _compileAtrule('charset');
+
   /**
    * Parse namespace
    */
 
-
   var atnamespace = _compileAtrule('namespace');
+
   /**
    * Parse non-block at-rules
    */
 
-
   function _compileAtrule(name) {
     var re = new RegExp('^@' + name + '\\s*([^;]+);');
     return function () {
@@ -2622,20 +2563,20 @@ function cssParse (css, options) {
       return pos(ret);
     };
   }
+
   /**
    * Parse at rule.
    */
 
-
   function atrule() {
     if (css[0] != '@') return;
     return atkeyframes() || atmedia() || atcustommedia() || atsupports() || atimport() || atcharset() || atnamespace() || atdocument() || atpage() || athost() || atfontface();
   }
+
   /**
    * Parse rule.
    */
 
-
   function rule() {
     var pos = position();
     var sel = selector();
@@ -2647,9 +2588,9 @@ function cssParse (css, options) {
       declarations: declarations()
     });
   }
-
   return addParent(stylesheet());
 }
+
 /**
  * Trim `str`.
  */
@@ -2657,18 +2598,16 @@ function cssParse (css, options) {
 function trim(str) {
   return str ? str.replace(/^\s+|\s+$/g, '') : '';
 }
+
 /**
  * Adds non-enumerable parent node reference to each node.
  */
 
-
 function addParent(obj, parent) {
   var isNode = obj && typeof obj.type === 'string';
   var childParent = isNode ? obj : parent;
-
   for (var k in obj) {
     var value = obj[k];
-
     if (Array.isArray(value)) {
       value.forEach(function (v) {
         addParent(v, childParent);
@@ -2677,7 +2616,6 @@ function addParent(obj, parent) {
       addParent(value, childParent);
     }
   }
-
   if (isNode) {
     Object.defineProperty(obj, 'parent', {
       configurable: true,
@@ -2686,16 +2624,16 @@ function addParent(obj, parent) {
       value: parent || null
     });
   }
-
   return obj;
 }
 
 /**
  * Module dependencies.
  */
-var Compressed = require('./compress');
 
+var Compressed = require('./compress');
 var Identity = require('./identity');
+
 /**
  * Stringfy the given AST `node`.
  *
@@ -2710,10 +2648,11 @@ var Identity = require('./identity');
  * @api public
  */
 
-
 function cssStringify (node, options) {
   options = options || {};
-  var compiler = options.compress ? new Compressed(options) : new Identity(options); // source maps
+  var compiler = options.compress ? new Compressed(options) : new Identity(options);
+
+  // source maps
   // if (options.sourcemap) {
   //   var sourcemaps = require('./source-map-support');
   //   sourcemaps(compiler);
@@ -2757,7 +2696,7 @@ var RawSet = /** @class */ (function () {
             var _a, _b, _c;
             var script = '';
             if (cNode.nodeType === Node.TEXT_NODE) {
-                script = "`" + ((_a = cNode.textContent) !== null && _a !== void 0 ? _a : '') + "`";
+                script = "`".concat((_a = cNode.textContent) !== null && _a !== void 0 ? _a : '', "`");
                 // console.log('???????', script)
             }
             else if (cNode.nodeType === Node.ELEMENT_NODE) {
@@ -2786,11 +2725,11 @@ var RawSet = /** @class */ (function () {
                 EventManager.VARNAMES.forEach(function (it) {
                     // script = script.replace(RegExp(it.replace('$', '\\$'), 'g'), `this?.___${it}`);
                     // script = script.replace(RegExp(it.replace('$', '\\$'), 'g'), `this.___${it}`);
-                    script = script.replace(RegExp(it.replace('$', '\\$'), 'g'), "this.___" + it);
+                    script = script.replace(RegExp(it.replace('$', '\\$'), 'g'), "this.___".concat(it));
                     // console.log('scripts-->', script)
                 });
                 // console.log('----------', script);
-                Array.from(ScriptUtils.getVariablePaths(script)).filter(function (it) { return !it.startsWith("___" + EventManager.SCRIPTS_VARNAME); }).forEach(function (it) { return usingTriggerVariables.add(it); });
+                Array.from(ScriptUtils.getVariablePaths(script)).filter(function (it) { return !it.startsWith("___".concat(EventManager.SCRIPTS_VARNAME)); }).forEach(function (it) { return usingTriggerVariables.add(it); });
             }
         });
         // console.log('usingTriggerVariable----------->', usingTriggerVariables)
@@ -2827,7 +2766,7 @@ var RawSet = /** @class */ (function () {
                             range: Range.range,
                             element: cNode,
                             attribute: attribute,
-                            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.ATTRIBUTE_VARNAME + " = this.__render.attribute;\n                    const " + EventManager.RANGE_VARNAME + " = this.__render.range;\n                    const " + EventManager.ROUTER_VARNAME + " = this.__render.router;\n            "
+                            bindScript: "\n                    const ".concat(EventManager.SCRIPTS_VARNAME, " = this.__render.scripts;\n                    const ").concat(EventManager.RAWSET_VARNAME, " = this.__render.rawset;\n                    const ").concat(EventManager.ELEMENT_VARNAME, " = this.__render.element;\n                    const ").concat(EventManager.ATTRIBUTE_VARNAME, " = this.__render.attribute;\n                    const ").concat(EventManager.RANGE_VARNAME, " = this.__render.range;\n                    const ").concat(EventManager.ROUTER_VARNAME, " = this.__render.router;\n            ")
                             // eslint-disable-next-line no-use-before-define
                         });
                         fag = config.window.document.createDocumentFragment();
@@ -2836,13 +2775,13 @@ var RawSet = /** @class */ (function () {
                         runText = RawSet.exporesionGrouops(textContent)[0][1];
                         newNode = void 0;
                         if (textContent === null || textContent === void 0 ? void 0 : textContent.startsWith('#')) {
-                            r = ScriptUtils.eval(__render.bindScript + " return " + runText, Object.assign(obj, { __render: __render }));
+                            r = ScriptUtils.eval("".concat(__render.bindScript, " return ").concat(runText), Object.assign(obj, { __render: __render }));
                             template = config.window.document.createElement('template');
                             template.innerHTML = r;
                             newNode = template.content;
                         }
                         else {
-                            r = ScriptUtils.eval(__render.bindScript + "  return " + runText, Object.assign(obj, { __render: __render }));
+                            r = ScriptUtils.eval("".concat(__render.bindScript, "  return ").concat(runText), Object.assign(obj, { __render: __render }));
                             newNode = config.window.document.createTextNode(r);
                         }
                         (_a = cNode.parentNode) === null || _a === void 0 ? void 0 : _a.replaceChild(newNode, cNode);
@@ -2927,7 +2866,7 @@ var RawSet = /** @class */ (function () {
                                     fag: genNode,
                                     scripts: EventManager.setBindProperty(config === null || config === void 0 ? void 0 : config.scripts, 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, Object.assign(obj, { __render: render }));
+                                ScriptUtils.eval("\n                const ".concat(EventManager.FAG_VARNAME, " = this.__render.fag;\n                const ").concat(EventManager.SCRIPTS_VARNAME, " = this.__render.scripts;\n                const ").concat(EventManager.RAWSET_VARNAME, " = this.__render.rawset;\n                ").concat(it.drCompleteOption), Object.assign(obj, { __render: render }));
                             }
                         });
                         // 중요 style isolation 나중에 :scope로 대체 가능할듯.
@@ -2943,7 +2882,7 @@ var RawSet = /** @class */ (function () {
                                 oninit = it_2.targetElement.__render.element.getAttribute(RawSet.DR_ON_INIT_ARGUMENTS_OPTIONNAME);
                                 param = [];
                                 if (oninit) {
-                                    script = it_2.targetElement.__render.renderScript + " return " + oninit + " ";
+                                    script = "".concat(it_2.targetElement.__render.renderScript, " return ").concat(oninit, " ");
                                     param = ScriptUtils.eval(script, Object.assign(obj, {
                                         __render: it_2.targetElement.__render
                                     }));
@@ -3005,8 +2944,8 @@ var RawSet = /** @class */ (function () {
     };
     RawSet.generateCSS = function (id, cssRule) {
         var _this = this;
-        var start = "#" + id + "-start";
-        var end = "#" + id + "-end";
+        var start = "#".concat(id, "-start");
+        var end = "#".concat(id, "-end");
         if (cssRule.constructor.name === 'CSSStyleRule') {
             var rule = cssRule;
             // rule.selectorText = `${start} ~ *:not(${start} ~ ${end} ~ *) ${rule.selectorText}`;
@@ -3015,14 +2954,14 @@ var RawSet = /** @class */ (function () {
             if (!rule.selectorText.startsWith(':root')) {
                 // rule.selectorText = `${start} ~ ${rule.selectorText}:not(${start} ~ ${end} ~ *)`;
                 // rule.selectorText = `${start} ~ ${rule.selectorText}:not(${start} ~ ${end} ~ *)`;
-                var selectorText = ":is(" + start + " ~ *:not(" + start + " ~ " + end + " ~ *))";
+                var selectorText = ":is(".concat(start, " ~ *:not(").concat(start, " ~ ").concat(end, " ~ *))");
                 if (rule.selectorText.startsWith('.')) {
-                    rule.selectorText = "" + selectorText + rule.selectorText + ", " + selectorText + " " + rule.selectorText;
+                    rule.selectorText = "".concat(selectorText).concat(rule.selectorText, ", ").concat(selectorText, " ").concat(rule.selectorText);
                     //     rule.selectorText = `${start} ~ *:not(${start} ~ ${end} ~ *)${rule.selectorText}`;
                 }
                 else {
-                    var divText = start + " ~ " + rule.selectorText + ":not(" + start + " ~ " + end + " ~ *)";
-                    rule.selectorText = selectorText + " " + rule.selectorText + ", " + divText;
+                    var divText = "".concat(start, " ~ ").concat(rule.selectorText, ":not(").concat(start, " ~ ").concat(end, " ~ *)");
+                    rule.selectorText = "".concat(selectorText, " ").concat(rule.selectorText, ", ").concat(divText);
                     // rule.selectorText = `${selectorText} ${rule.selectorText}`;
                     //     rule.selectorText = `${rule.selectorText} ~ ${start} ~ *:not(${start} ~ ${end} ~ *)`;
                 }
@@ -3043,10 +2982,10 @@ var RawSet = /** @class */ (function () {
         if (Array.isArray(styleBody)) {
             styleBody = styleBody.join('\n');
         }
-        var start = "#" + componentKey + "-start";
-        var end = "#" + componentKey + "-end";
+        var start = "#".concat(componentKey, "-start");
+        var end = "#".concat(componentKey, "-end");
         var before = StringUtils.regexExecArrayReplace(styleBody, /(\$\{.*?\}\$)/g, function (data) {
-            return "var(--domrender-" + data[0] + ")";
+            return "var(--domrender-".concat(data[0], ")");
         });
         var cssobject = cssParse(before);
         (_a = cssobject.stylesheet) === null || _a === void 0 ? void 0 : _a.rules.forEach(function (rule) {
@@ -3054,13 +2993,13 @@ var RawSet = /** @class */ (function () {
             var isRoot = (_a = rule.selectors) === null || _a === void 0 ? void 0 : _a.find(function (it) { return it.startsWith(':root'); });
             if (rule.type === 'rule' && !isRoot) { //  && !!isRoot
                 rule.selectors = (_b = rule.selectors) === null || _b === void 0 ? void 0 : _b.map(function (sit) {
-                    var selectorText = ":is(" + start + " ~ *:not(" + start + " ~ " + end + " ~ *))";
+                    var selectorText = ":is(".concat(start, " ~ *:not(").concat(start, " ~ ").concat(end, " ~ *))");
                     if (sit.startsWith('.')) {
-                        return "" + selectorText + sit + ", " + selectorText + " " + sit;
+                        return "".concat(selectorText).concat(sit, ", ").concat(selectorText, " ").concat(sit);
                     }
                     else {
-                        var divText = start + " ~ " + sit + ":not(" + start + " ~ " + end + " ~ *)";
-                        return selectorText + " " + sit + ", " + divText;
+                        var divText = "".concat(start, " ~ ").concat(sit, ":not(").concat(start, " ~ ").concat(end, " ~ *)");
+                        return "".concat(selectorText, " ").concat(sit, ", ").concat(divText);
                     }
                 });
             }
@@ -3070,7 +3009,7 @@ var RawSet = /** @class */ (function () {
             return data[2];
         });
         if (styleTagWrap) {
-            styleBody = "<style id='" + componentKey + "-style' domstyle>" + after + "</style>";
+            styleBody = "<style id='".concat(componentKey, "-style' domstyle>").concat(after, "</style>");
         }
         return styleBody;
     };
@@ -3091,13 +3030,13 @@ var RawSet = /** @class */ (function () {
         var data = element.getAttribute(RawSet.DR_APPENDER_NAME);
         // if (data && !/\[[0-9]+\]/g.test(data)) {
         if (data && !/\[.+\]/g.test(data)) {
-            var currentIndex = ScriptUtils.evalReturn(data + "?.length -1", obj);
+            var currentIndex = ScriptUtils.evalReturn("".concat(data, "?.length -1"), obj);
             // console.log('------?', currentIndex)
             // if (currentIndex === undefined || isNaN(currentIndex)) {
             //     return undefined;
             // }
             // const currentIndex = ScriptUtils.evalReturn(`${data}.length`, obj);
-            data = data + "[" + currentIndex + "]";
+            data = "".concat(data, "[").concat(currentIndex, "]");
             element.setAttribute(RawSet.DR_APPENDER_NAME, data);
             // element.setAttribute(RawSet.DR_IF_NAME, data);
             // element.setAttribute('dr-id', data);
@@ -3241,7 +3180,7 @@ var RawSet = /** @class */ (function () {
             var element = node;
             var start = config.window.document.createElement('meta');
             var end = config.window.document.createElement('meta');
-            start.setAttribute('id', id + "-start");
+            start.setAttribute('id', "".concat(id, "-start"));
             var keys = element.getAttribute(RawSet.DR_KEY_OPTIONNAME);
             var thisPropertyType = element.getAttribute(RawSet.DR_THIS_PROPERTY_NAME);
             if (thisPropertyType) {
@@ -3251,19 +3190,19 @@ var RawSet = /** @class */ (function () {
                 element.removeAttribute(RawSet.DR_KEY_OPTIONNAME);
                 start.setAttribute(RawSet.DR_KEY_OPTIONNAME, keys);
             }
-            end.setAttribute('id', id + "-end");
+            end.setAttribute('id', "".concat(id, "-end"));
             return { start: start, end: end };
         }
         else if (type === exports.RawSetType.STYLE_TEXT) {
             return {
-                start: config.window.document.createTextNode("/*start text " + id + "*/"),
-                end: config.window.document.createTextNode("/*end text " + id + "*/")
+                start: config.window.document.createTextNode("/*start text ".concat(id, "*/")),
+                end: config.window.document.createTextNode("/*end text ".concat(id, "*/"))
             };
         }
         else { // text
             return {
-                start: config.window.document.createComment("start text " + id),
-                end: config.window.document.createComment("end text " + id)
+                start: config.window.document.createComment("start text ".concat(id)),
+                end: config.window.document.createComment("end text ".concat(id))
             };
         }
     };
@@ -3310,13 +3249,13 @@ var RawSet = /** @class */ (function () {
     RawSet.drItOtherEncoding = function (element) {
         var random = RandomUtils.uuid();
         var regex = /#it#/g;
-        element.querySelectorAll("[" + RawSet.DR_IT_OPTIONNAME + "], [" + RawSet.DR_FOR_OF_NAME + "], [" + RawSet.DR_REPEAT_NAME + "]").forEach(function (it) {
+        element.querySelectorAll("[".concat(RawSet.DR_IT_OPTIONNAME, "], [").concat(RawSet.DR_FOR_OF_NAME, "], [").concat(RawSet.DR_REPEAT_NAME, "]")).forEach(function (it) {
             it.innerHTML = it.innerHTML.replace(regex, random);
         });
         return random;
     };
     RawSet.drItOtherDecoding = function (element, random) {
-        element.querySelectorAll("[" + RawSet.DR_IT_OPTIONNAME + "], [" + RawSet.DR_FOR_OF_NAME + "], [" + RawSet.DR_REPEAT_NAME + "]").forEach(function (it) {
+        element.querySelectorAll("[".concat(RawSet.DR_IT_OPTIONNAME, "], [").concat(RawSet.DR_FOR_OF_NAME, "], [").concat(RawSet.DR_REPEAT_NAME, "]")).forEach(function (it) {
             it.innerHTML = it.innerHTML.replace(RegExp(random, 'g'), '#it#');
         });
     };
@@ -3329,35 +3268,36 @@ var RawSet = /** @class */ (function () {
         // element.querySelectorAll(`[${RawSet.DR_PRE_NAME}]`).forEach(it => {
         //     let message = it.innerHTML;
         // })
-        element.querySelectorAll("[" + RawSet.DR_PRE_NAME + "]").forEach(function (it) {
-            it.innerHTML = it.innerHTML.replace(/this/g, thisRandom);
+        element.querySelectorAll("[".concat(RawSet.DR_PRE_NAME, "]")).forEach(function (it) {
+            it.innerHTML = it.innerHTML.replace(/@this@/g, thisRandom);
         });
-        element.querySelectorAll("[" + RawSet.DR_THIS_NAME + "]").forEach(function (it) {
+        element.querySelectorAll("[".concat(RawSet.DR_THIS_NAME, "]")).forEach(function (it) {
             var message = it.innerHTML;
-            StringUtils.regexExec(/([^(dr\-)])?this(?=.?)/g, message).reverse().forEach(function (it) {
+            // StringUtils.regexExec(/([^(dr\-)])?this(?=.?)/g, message).reverse().forEach(it => {
+            StringUtils.regexExec(/@this@/g, message).reverse().forEach(function (it) {
                 var _a;
-                message = message.substr(0, it.index) + message.substr(it.index).replace(it[0], "" + ((_a = it[1]) !== null && _a !== void 0 ? _a : '') + drThis);
+                message = message.substr(0, it.index) + message.substr(it.index).replace(it[0], "".concat((_a = it[1]) !== null && _a !== void 0 ? _a : '').concat(drThis));
             });
             it.innerHTML = message;
         });
         var message = element.innerHTML;
-        StringUtils.regexExec(/([^(dr\-)])?this(?=.?)/g, message).reverse().forEach(function (it) {
+        StringUtils.regexExec(/@this@/g, message).reverse().forEach(function (it) {
             var _a;
-            message = message.substr(0, it.index) + message.substr(it.index).replace(it[0], "" + ((_a = it[1]) !== null && _a !== void 0 ? _a : '') + drThis);
+            message = message.substr(0, it.index) + message.substr(it.index).replace(it[0], "".concat((_a = it[1]) !== null && _a !== void 0 ? _a : '').concat(drThis));
         });
         element.innerHTML = message;
         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("[".concat(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');
+        element.querySelectorAll("[".concat(RawSet.DR_THIS_NAME, "]")).forEach(function (it) {
+            it.innerHTML = it.innerHTML.replace(RegExp(thisRandom, 'g'), '@this@');
         });
     };
     RawSet.drFormOtherMoveAttr = function (element, as, to, config) {
-        element.querySelectorAll("[" + RawSet.DR_FORM_NAME + "]").forEach(function (subElement) {
+        element.querySelectorAll("[".concat(RawSet.DR_FORM_NAME, "]")).forEach(function (subElement) {
             var _a;
             var nodeIterator = config.window.document.createNodeIterator(subElement, NodeFilter.SHOW_ELEMENT, {
                 acceptNode: function (node) {
@@ -3395,7 +3335,7 @@ var RawSet = /** @class */ (function () {
             };
         });
         // element.querySelectorAll(`[${RawSet.DR_THIS_NAME}]`).forEach(it => {
-        element.querySelectorAll("[" + RawSet.DR_VAR_OPTIONNAME + "]").forEach(function (it) {
+        element.querySelectorAll("[".concat(RawSet.DR_VAR_OPTIONNAME, "]")).forEach(function (it) {
             vars.filter(function (vit) { return vit.value && vit.name; }).forEach(function (vit) {
                 it.innerHTML = it.innerHTML.replace(vit.regex, vit.random);
             });
@@ -3406,7 +3346,7 @@ var RawSet = /** @class */ (function () {
         return vars;
     };
     RawSet.drVarDecoding = function (element, vars) {
-        element.querySelectorAll("[" + RawSet.DR_THIS_NAME + "]").forEach(function (it) {
+        element.querySelectorAll("[".concat(RawSet.DR_THIS_NAME, "]")).forEach(function (it) {
             vars.filter(function (vit) { return vit.value && vit.name; }).forEach(function (vit) {
                 it.innerHTML = it.innerHTML.replace(RegExp(vit.random, 'g'), vit.value);
             });
@@ -3468,7 +3408,7 @@ var RawSet = /** @class */ (function () {
                         renderScript = '';
                         createParam = [];
                         if (onCreate) {
-                            script = renderScript + " return " + onCreate + " ";
+                            script = "".concat(renderScript, " return ").concat(onCreate, " ");
                             createParam = ScriptUtils.eval(script, obj);
                             if (!Array.isArray(createParam)) {
                                 createParam = [createParam];
@@ -3477,12 +3417,12 @@ var RawSet = /** @class */ (function () {
                         (_e = (_d = set.obj) === null || _d === void 0 ? void 0 : _d.onCreateRender) === null || _e === void 0 ? void 0 : _e.call.apply(_e, __spreadArray([_d], createParam, false));
                         oninit = element.getAttribute(RawSet.DR_ON_CREATED_CALLBACK_OPTIONNAME);
                         if (oninit) {
-                            script = renderScript + "  " + oninit + " ";
+                            script = "".concat(renderScript, "  ").concat(oninit, " ");
                             ScriptUtils.eval(script, obj);
                         }
                         _m.label = 12;
                     case 12:
-                        n.querySelectorAll(eventManager.attrNames.map(function (it) { return "[" + it + "]"; }).join(',')).forEach(function (it) {
+                        n.querySelectorAll(eventManager.attrNames.map(function (it) { return "[".concat(it, "]"); }).join(',')).forEach(function (it) {
                             it.setAttribute(EventManager.ownerVariablePathAttrName, 'this');
                         });
                         // attribute
@@ -3610,7 +3550,7 @@ var RawSet = /** @class */ (function () {
                                 constructorParam = [];
                                 // dr-constructor
                                 if (constructor) {
-                                    script = renderScript + " return " + constructor + " ";
+                                    script = "".concat(renderScript, " return ").concat(constructor, " ");
                                     param = (_b = ScriptUtils.eval(script, Object.assign(obj, { __render: render }))) !== null && _b !== void 0 ? _b : [];
                                     if (!Array.isArray(param)) {
                                         param = [param];
@@ -3622,7 +3562,7 @@ var RawSet = /** @class */ (function () {
                                 instance = domrenderComponents[componentKey];
                                 i = instance.__domrender_component_new = ((_c = instance.__domrender_component_new) !== null && _c !== void 0 ? _c : new Proxy({}, new DomRenderFinalProxy()));
                                 i.thisVariableName = rawSet.point.thisVariableName;
-                                i.thisFullVariableName = "this.__domrender_components." + componentKey;
+                                i.thisFullVariableName = "this.__domrender_components.".concat(componentKey);
                                 i.componentKey = componentKey;
                                 i.rawSet = rawSet;
                                 i.attribute = attribute;
@@ -3637,7 +3577,7 @@ var RawSet = /** @class */ (function () {
                                 normalAttrMap = element.getAttribute(EventManager.normalAttrMapAttrName);
                                 if (instance.onChangeAttrRender && normalAttrMap) {
                                     new Map(JSON.parse(normalAttrMap)).forEach(function (value, key) {
-                                        var script = renderScript + " return " + value + " ";
+                                        var script = "".concat(renderScript, " return ").concat(value, " ");
                                         var cval = ScriptUtils.eval(script, Object.assign(obj, { __render: render }));
                                         // element.setAttribute(key, cval);
                                         instance.onChangeAttrRender(key, cval);
@@ -3647,7 +3587,7 @@ var RawSet = /** @class */ (function () {
                                 this.__render = render;
                                 createParam = [];
                                 if (onCreate) {
-                                    script = renderScript + " return " + onCreate + " ";
+                                    script = "".concat(renderScript, " return ").concat(onCreate, " ");
                                     createParam = ScriptUtils.eval(script, Object.assign(obj, { __render: render }));
                                     if (!Array.isArray(createParam)) {
                                         createParam = [createParam];
@@ -3663,20 +3603,20 @@ var RawSet = /** @class */ (function () {
                                     innerHTMLThisRandom = RandomUtils.uuid();
                                     applayTemplate = applayTemplate.replace(/this\./g, innerHTMLThisRandom);
                                     // }
-                                    applayTemplate = applayTemplate.replace(RegExp("#" + componentName + "#", 'g'), 'this');
+                                    applayTemplate = applayTemplate.replace(RegExp("#".concat(componentName, "#"), 'g'), 'this');
                                 }
                                 // applayTemplate = template.replace(RegExp(`#${innerHTMLName}#`, 'g'), applayTemplate);
-                                applayTemplate = ((_g = this.template) !== null && _g !== void 0 ? _g : '').replace(RegExp("#" + innerHTMLName + "#", 'g'), applayTemplate);
+                                applayTemplate = ((_g = this.template) !== null && _g !== void 0 ? _g : '').replace(RegExp("#".concat(innerHTMLName, "#"), 'g'), applayTemplate);
                                 oninit = element.getAttribute(RawSet.DR_ON_CREATED_CALLBACK_OPTIONNAME);
                                 if (oninit) {
-                                    script = renderScript + "  " + oninit + " ";
+                                    script = "".concat(renderScript, "  ").concat(oninit, " ");
                                     ScriptUtils.eval(script, Object.assign(obj, {
                                         __render: render
                                     }));
                                 }
                                 style = RawSet.generateStyleTransform(this.styles, componentKey, true);
                                 element.innerHTML = style + (applayTemplate !== null && applayTemplate !== void 0 ? applayTemplate : '');
-                                return [4 /*yield*/, RawSet.drThisCreate(rawSet, element, "this.__domrender_components." + componentKey, '', true, obj, config)];
+                                return [4 /*yield*/, RawSet.drThisCreate(rawSet, element, "this.__domrender_components.".concat(componentKey), '', true, obj, config)];
                             case 12:
                                 data = _p.sent();
                                 // 넘어온 innerHTML에 this가 있는걸 다시 복호화해서 제대로 작동하도록한다.
@@ -3807,9 +3747,9 @@ var DomRenderProxy = /** @class */ (function () {
     };
     DomRenderProxy.prototype.run = function (objProxy) {
         var _this = this;
-        var _a, _b;
+        var _a;
         this._domRender_proxy = objProxy;
-        (_b = (_a = objProxy) === null || _a === void 0 ? void 0 : _a.onProxyDomRender) === null || _b === void 0 ? void 0 : _b.call(_a, this.config);
+        (_a = objProxy === null || objProxy === void 0 ? void 0 : objProxy.onProxyDomRender) === null || _a === void 0 ? void 0 : _a.call(objProxy, this.config);
         var obj = objProxy._DomRender_origin;
         if (obj) {
             Object.keys(obj).forEach(function (it) {
@@ -3836,6 +3776,9 @@ var DomRenderProxy = /** @class */ (function () {
     DomRenderProxy.prototype.initRender = function (target) {
         var _this = this;
         var _a, _b, _c, _d;
+        if (target instanceof Element) {
+            target.innerHTML = target.innerHTML.replace(/@this@/g, 'this');
+        }
         var onCreate = (_b = (_a = target).getAttribute) === null || _b === void 0 ? void 0 : _b.call(_a, RawSet.DR_ON_CREATE_ARGUMENTS_OPTIONNAME);
         var createParam = [];
         if (onCreate) {
@@ -3845,6 +3788,7 @@ var DomRenderProxy = /** @class */ (function () {
             }
         }
         (_d = (_c = this._domRender_proxy) === null || _c === void 0 ? void 0 : _c.onCreateRender) === null || _d === void 0 ? void 0 : _d.call.apply(_d, __spreadArray([_c], createParam, false));
+        // const innerHTML = (target as any).innerHTML ?? '';
         this._targets.add(target);
         var rawSets = RawSet.checkPointCreates(target, this._domRender_proxy, this.config);
         // console.log('initRender -------rawSet', rawSets)
@@ -3923,11 +3867,11 @@ var DomRenderProxy = /** @class */ (function () {
                                         new Map(JSON.parse(targetAttrMap)).forEach(function (v, k) {
                                             var _a;
                                             // it?.data.onChangeAttrRender(k, null, v);
-                                            var isUsing = EventManager.isUsingThisVar(v, "this." + fullPathStr);
+                                            var isUsing = EventManager.isUsingThisVar(v, "this.".concat(fullPathStr));
                                             if (isUsing) {
                                                 var render = it_1.fragment.render;
                                                 // console.log('render-->', (it.fragment as any).render)
-                                                var script = render.renderScript + " return " + v + " ";
+                                                var script = "".concat(render.renderScript, " return ").concat(v, " ");
                                                 var cval = ScriptUtils.eval(script, Object.assign((_a = _this._domRender_proxy) !== null && _a !== void 0 ? _a : {}, { __render: render }));
                                                 it_1.data.onChangeAttrRender(k, cval);
                                             }
@@ -3999,7 +3943,7 @@ var DomRenderProxy = /** @class */ (function () {
             // const firstPathStr = paths.slice(1).reverse().join('.');
             var strings = paths.reverse();
             // array같은경우도 키값으로 접근하기때문에 특정 인덱스를 찾아서 그부분만 바꿔줄수 있다.
-            var fullPathStr_1 = strings.map(function (it) { return isNaN(Number(it)) ? '.' + it : "[" + it + "]"; }).join('').slice(1);
+            var fullPathStr_1 = strings.map(function (it) { return isNaN(Number(it)) ? '.' + it : "[".concat(it, "]"); }).join('').slice(1);
             // console.log('-------fullPathStr', fullPathStr, lastDoneExecute);
             if (lastDoneExecute) {
                 // const firstData = ScriptUtils.evalReturn('this.' + firstPathStr, this._domRender_proxy);
@@ -4008,7 +3952,7 @@ var DomRenderProxy = /** @class */ (function () {
                 // }
                 var iterable_1 = this._rawSets.get(fullPathStr_1);
                 // array check
-                var front_1 = strings.slice(0, strings.length - 1).map(function (it) { return isNaN(Number(it)) ? '.' + it : "[" + it + "]"; }).join('');
+                var front_1 = strings.slice(0, strings.length - 1).map(function (it) { return isNaN(Number(it)) ? '.' + it : "[".concat(it, "]"); }).join('');
                 var last_1 = strings[strings.length - 1];
                 var data_1 = ScriptUtils.evalReturn('this' + front_1, this._domRender_proxy);
                 // console.log('-------!!!!!', fullPathStr, iterable, data, front, last);
@@ -4063,12 +4007,14 @@ var DomRenderProxy = /** @class */ (function () {
                         return _this.render(Array.from(iterable_1), fullPathStr_1);
                     }
                 }).then(function (it) {
+                    console.log('target1------->,', it);
                     _this._targets.forEach(function (it) {
+                        console.log('target2------->,', it);
                         // return;
                         if (it.nodeType === Node.DOCUMENT_FRAGMENT_NODE || it.nodeType === Node.ELEMENT_NODE) {
                             var targets = eventManager.findAttrElements(it, _this.config);
                             // console.log('------>', targets);
-                            eventManager.changeVar(_this._domRender_proxy, targets, "this." + fullPathStr_1, _this.config);
+                            eventManager.changeVar(_this._domRender_proxy, targets, "this.".concat(fullPathStr_1), _this.config);
                         }
                     });
                 });
@@ -4078,7 +4024,7 @@ var DomRenderProxy = /** @class */ (function () {
         return fullPaths;
     };
     DomRenderProxy.prototype.set = function (target, p, value, receiver) {
-        var _a, _b, _c;
+        var _a, _b;
         // console.log('set-->', p, value, target, receiver);
         if (typeof p === 'string' && p !== '__domrender_components' && excludeGetSetPropertys.includes(p)) {
             target[p] = value;
@@ -4100,12 +4046,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)) {
-            (_c = (_b = receiver) === null || _b === void 0 ? void 0 : _b.onBeforeReturnSet) === null || _c === void 0 ? void 0 : _c.call(_b, p, value, fullPath);
+            (_b = receiver === null || receiver === void 0 ? void 0 : receiver.onBeforeReturnSet) === null || _b === void 0 ? void 0 : _b.call(receiver, p, value, fullPath);
         }
         return true;
     };
     DomRenderProxy.prototype.get = function (target, p, receiver) {
-        var _a, _b, _c;
+        var _a, _b;
         // console.log('get-->', target, p, receiver);
         if (p === '_DomRender_origin') {
             return this._domRender_origin;
@@ -4136,7 +4082,7 @@ var DomRenderProxy = /** @class */ (function () {
                 it_2 = it_2._DomRender_origin;
             }
             if (('onBeforeReturnGet' in receiver) && typeof p === 'string' && !((_a = this.config.proxyExcludeOnBeforeReturnGets) !== null && _a !== void 0 ? _a : []).concat(excludeGetSetPropertys).includes(p)) {
-                (_c = (_b = receiver) === null || _b === void 0 ? void 0 : _b.onBeforeReturnGet) === null || _c === void 0 ? void 0 : _c.call(_b, p, it_2, this.root([p], it_2, false));
+                (_b = receiver === null || receiver === void 0 ? void 0 : receiver.onBeforeReturnGet) === null || _b === void 0 ? void 0 : _b.call(receiver, p, it_2, this.root([p], it_2, false));
             }
             return it_2;
         }
@@ -4252,7 +4198,7 @@ var Router = /** @class */ (function () {
         var _this = this;
         var proxy = this.rootObj._DomRender_proxy;
         if (proxy) {
-            var key = "___" + EventManager.ROUTER_VARNAME;
+            var key = "___".concat(EventManager.ROUTER_VARNAME);
             proxy.render(key);
         }
         this.attachCallbacks.forEach(function (it) {
@@ -4679,7 +4625,7 @@ var DomRender = /** @class */ (function () {
     function DomRender() {
     }
     DomRender.run = function (obj, target, oConfig) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         var robj = obj;
         if ('_DomRender_isProxy' in obj) {
             if (target) {
@@ -4706,7 +4652,10 @@ var DomRender = /** @class */ (function () {
         else if (config.routerType === 'hash') {
             config.router = (_c = config.router) !== null && _c !== void 0 ? _c : new HashRouter(robj, config.window);
         }
-        else ;
+        else { // default
+            config.routerType = 'hash';
+            config.router = (_d = config.router) !== null && _d !== void 0 ? _d : new HashRouter(robj, config.window);
+        }
         domRender.run(robj);
         return robj;
     };
@@ -4828,19 +4777,6 @@ var AllUnCheckedValidatorArray = /** @class */ (function (_super) {
     return AllUnCheckedValidatorArray;
 }(ValidatorArray));
 
-var CheckedValidator = /** @class */ (function (_super) {
-    __extends(CheckedValidator, _super);
-    function CheckedValidator(value, target, event, autoValid) {
-        if (autoValid === void 0) { autoValid = true; }
-        return _super.call(this, value, target, event, autoValid) || this;
-    }
-    CheckedValidator.prototype.valid = function () {
-        var _a, _b;
-        return (_b = (_a = this.getTarget()) === null || _a === void 0 ? void 0 : _a.checked) !== null && _b !== void 0 ? _b : false;
-    };
-    return CheckedValidator;
-}(Validator));
-
 var CountEqualsUnCheckedValidatorArray = /** @class */ (function (_super) {
     __extends(CountEqualsUnCheckedValidatorArray, _super);
     function CountEqualsUnCheckedValidatorArray(count, value, target, event, autoValid) {
@@ -4856,6 +4792,19 @@ var CountEqualsUnCheckedValidatorArray = /** @class */ (function (_super) {
     return CountEqualsUnCheckedValidatorArray;
 }(ValidatorArray));
 
+var CheckedValidator = /** @class */ (function (_super) {
+    __extends(CheckedValidator, _super);
+    function CheckedValidator(value, target, event, autoValid) {
+        if (autoValid === void 0) { autoValid = true; }
+        return _super.call(this, value, target, event, autoValid) || this;
+    }
+    CheckedValidator.prototype.valid = function () {
+        var _a, _b;
+        return (_b = (_a = this.getTarget()) === null || _a === void 0 ? void 0 : _a.checked) !== null && _b !== void 0 ? _b : false;
+    };
+    return CheckedValidator;
+}(Validator));
+
 var CountGreaterThanCheckedValidatorArray = /** @class */ (function (_super) {
     __extends(CountGreaterThanCheckedValidatorArray, _super);
     function CountGreaterThanCheckedValidatorArray(count, value, target, event, autoValid) {
@@ -4871,34 +4820,19 @@ var CountGreaterThanCheckedValidatorArray = /** @class */ (function (_super) {
     return CountGreaterThanCheckedValidatorArray;
 }(ValidatorArray));
 
-var CountEqualsCheckedValidatorArray = /** @class */ (function (_super) {
-    __extends(CountEqualsCheckedValidatorArray, _super);
-    function CountEqualsCheckedValidatorArray(count, value, target, event, autoValid) {
-        if (autoValid === void 0) { autoValid = true; }
-        var _this = _super.call(this, value, target, event, autoValid) || this;
-        _this.count = count;
-        return _this;
-    }
-    CountEqualsCheckedValidatorArray.prototype.valid = function () {
-        var _a;
-        return ((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return it.checked; }).length === this.count;
-    };
-    return CountEqualsCheckedValidatorArray;
-}(ValidatorArray));
-
-var CountGreaterThanUnCheckedValidatorArray = /** @class */ (function (_super) {
-    __extends(CountGreaterThanUnCheckedValidatorArray, _super);
-    function CountGreaterThanUnCheckedValidatorArray(count, value, target, event, autoValid) {
+var CountGreaterThanEqualsCheckedValidatorArray = /** @class */ (function (_super) {
+    __extends(CountGreaterThanEqualsCheckedValidatorArray, _super);
+    function CountGreaterThanEqualsCheckedValidatorArray(count, value, target, event, autoValid) {
         if (autoValid === void 0) { autoValid = true; }
         var _this = _super.call(this, value, target, event, autoValid) || this;
         _this.count = count;
         return _this;
     }
-    CountGreaterThanUnCheckedValidatorArray.prototype.valid = function () {
+    CountGreaterThanEqualsCheckedValidatorArray.prototype.valid = function () {
         var _a;
-        return ((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return !it.checked; }).length > this.count;
+        return ((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return it.checked; }).length >= this.count;
     };
-    return CountGreaterThanUnCheckedValidatorArray;
+    return CountGreaterThanEqualsCheckedValidatorArray;
 }(ValidatorArray));
 
 var CountGreaterThanEqualsUnCheckedValidatorArray = /** @class */ (function (_super) {
@@ -4916,19 +4850,19 @@ var CountGreaterThanEqualsUnCheckedValidatorArray = /** @class */ (function (_su
     return CountGreaterThanEqualsUnCheckedValidatorArray;
 }(ValidatorArray));
 
-var CountGreaterThanEqualsCheckedValidatorArray = /** @class */ (function (_super) {
-    __extends(CountGreaterThanEqualsCheckedValidatorArray, _super);
-    function CountGreaterThanEqualsCheckedValidatorArray(count, value, target, event, autoValid) {
+var CountLessThanEqualsCheckedValidatorArray = /** @class */ (function (_super) {
+    __extends(CountLessThanEqualsCheckedValidatorArray, _super);
+    function CountLessThanEqualsCheckedValidatorArray(count, value, target, event, autoValid) {
         if (autoValid === void 0) { autoValid = true; }
         var _this = _super.call(this, value, target, event, autoValid) || this;
         _this.count = count;
         return _this;
     }
-    CountGreaterThanEqualsCheckedValidatorArray.prototype.valid = function () {
+    CountLessThanEqualsCheckedValidatorArray.prototype.valid = function () {
         var _a;
-        return ((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return it.checked; }).length >= this.count;
+        return ((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return it.checked; }).length <= this.count;
     };
-    return CountGreaterThanEqualsCheckedValidatorArray;
+    return CountLessThanEqualsCheckedValidatorArray;
 }(ValidatorArray));
 
 var CountLessThanCheckedValidatorArray = /** @class */ (function (_super) {
@@ -4946,34 +4880,65 @@ var CountLessThanCheckedValidatorArray = /** @class */ (function (_super) {
     return CountLessThanCheckedValidatorArray;
 }(ValidatorArray));
 
-var CountLessThanUnCheckedValidatorArray = /** @class */ (function (_super) {
-    __extends(CountLessThanUnCheckedValidatorArray, _super);
-    function CountLessThanUnCheckedValidatorArray(count, value, target, event, autoValid) {
+var CountLessThanEqualsUnCheckedValidatorArray = /** @class */ (function (_super) {
+    __extends(CountLessThanEqualsUnCheckedValidatorArray, _super);
+    function CountLessThanEqualsUnCheckedValidatorArray(count, value, target, event, autoValid) {
         if (autoValid === void 0) { autoValid = true; }
         var _this = _super.call(this, value, target, event, autoValid) || this;
         _this.count = count;
         return _this;
     }
-    CountLessThanUnCheckedValidatorArray.prototype.valid = function () {
+    CountLessThanEqualsUnCheckedValidatorArray.prototype.valid = function () {
         var _a;
-        return ((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return !it.checked; }).length < this.count;
+        return ((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return !it.checked; }).length <= this.count;
     };
-    return CountLessThanUnCheckedValidatorArray;
+    return CountLessThanEqualsUnCheckedValidatorArray;
 }(ValidatorArray));
 
-var EmptyValidator = /** @class */ (function (_super) {
-    __extends(EmptyValidator, _super);
-    function EmptyValidator(value, target, event, autoValid) {
+var CountEqualsCheckedValidatorArray = /** @class */ (function (_super) {
+    __extends(CountEqualsCheckedValidatorArray, _super);
+    function CountEqualsCheckedValidatorArray(count, value, target, event, autoValid) {
         if (autoValid === void 0) { autoValid = true; }
-        return _super.call(this, value, target, event, autoValid) || this;
+        var _this = _super.call(this, value, target, event, autoValid) || this;
+        _this.count = count;
+        return _this;
     }
-    EmptyValidator.prototype.valid = function () {
-        var _a, _b;
-        var value = this.value;
-        return value === undefined || value === null || ((_b = (_a = value) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) <= 0;
+    CountEqualsCheckedValidatorArray.prototype.valid = function () {
+        var _a;
+        return ((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return it.checked; }).length === this.count;
     };
-    return EmptyValidator;
-}(Validator));
+    return CountEqualsCheckedValidatorArray;
+}(ValidatorArray));
+
+var CountUnCheckedValidatorArray = /** @class */ (function (_super) {
+    __extends(CountUnCheckedValidatorArray, _super);
+    function CountUnCheckedValidatorArray(count, value, target, event, autoValid) {
+        if (autoValid === void 0) { autoValid = true; }
+        var _this = _super.call(this, value, target, event, autoValid) || this;
+        _this.count = count;
+        return _this;
+    }
+    CountUnCheckedValidatorArray.prototype.valid = function () {
+        var _a;
+        return ((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return !it.checked; }).length >= this.count;
+    };
+    return CountUnCheckedValidatorArray;
+}(ValidatorArray));
+
+var CountGreaterThanUnCheckedValidatorArray = /** @class */ (function (_super) {
+    __extends(CountGreaterThanUnCheckedValidatorArray, _super);
+    function CountGreaterThanUnCheckedValidatorArray(count, value, target, event, autoValid) {
+        if (autoValid === void 0) { autoValid = true; }
+        var _this = _super.call(this, value, target, event, autoValid) || this;
+        _this.count = count;
+        return _this;
+    }
+    CountGreaterThanUnCheckedValidatorArray.prototype.valid = function () {
+        var _a;
+        return ((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return !it.checked; }).length > this.count;
+    };
+    return CountGreaterThanUnCheckedValidatorArray;
+}(ValidatorArray));
 
 var ExcludeCheckedValidatorArray = /** @class */ (function (_super) {
     __extends(ExcludeCheckedValidatorArray, _super);
@@ -4997,6 +4962,20 @@ var ExcludeCheckedValidatorArray = /** @class */ (function (_super) {
     return ExcludeCheckedValidatorArray;
 }(ValidatorArray));
 
+var EmptyValidator = /** @class */ (function (_super) {
+    __extends(EmptyValidator, _super);
+    function EmptyValidator(value, target, event, autoValid) {
+        if (autoValid === void 0) { autoValid = true; }
+        return _super.call(this, value, target, event, autoValid) || this;
+    }
+    EmptyValidator.prototype.valid = function () {
+        var _a;
+        var value = this.value;
+        return value === undefined || value === null || ((_a = value === null || value === void 0 ? void 0 : value.length) !== null && _a !== void 0 ? _a : 0) <= 0;
+    };
+    return EmptyValidator;
+}(Validator));
+
 var IncludeCheckedValidatorArray = /** @class */ (function (_super) {
     __extends(IncludeCheckedValidatorArray, _super);
     function IncludeCheckedValidatorArray(include, allRequired, value, target, event, autoValid) {
@@ -5019,24 +4998,6 @@ var IncludeCheckedValidatorArray = /** @class */ (function (_super) {
     return IncludeCheckedValidatorArray;
 }(ValidatorArray));
 
-var FormValidator = /** @class */ (function (_super) {
-    __extends(FormValidator, _super);
-    function FormValidator(target, event, autoValid) {
-        if (autoValid === void 0) { autoValid = true; }
-        return _super.call(this, undefined, target, event, autoValid) || this;
-    }
-    FormValidator.prototype.validAction = function () {
-        return _super.prototype.childValidAction.call(this);
-    };
-    FormValidator.prototype.valid = function () {
-        return this.childValid();
-    };
-    FormValidator.prototype.reset = function () {
-        this.targetReset();
-    };
-    return FormValidator;
-}(Validator));
-
 var MultipleValidator = /** @class */ (function (_super) {
     __extends(MultipleValidator, _super);
     function MultipleValidator(validators, value, target, event, autoValid) {
@@ -5066,20 +5027,60 @@ var MultipleValidator = /** @class */ (function (_super) {
     return MultipleValidator;
 }(Validator));
 
-var CountUnCheckedValidatorArray = /** @class */ (function (_super) {
-    __extends(CountUnCheckedValidatorArray, _super);
-    function CountUnCheckedValidatorArray(count, value, target, event, autoValid) {
+var FormValidator = /** @class */ (function (_super) {
+    __extends(FormValidator, _super);
+    function FormValidator(target, event, autoValid) {
+        if (autoValid === void 0) { autoValid = true; }
+        return _super.call(this, undefined, target, event, autoValid) || this;
+    }
+    FormValidator.prototype.validAction = function () {
+        return _super.prototype.childValidAction.call(this);
+    };
+    FormValidator.prototype.valid = function () {
+        return this.childValid();
+    };
+    FormValidator.prototype.reset = function () {
+        this.targetReset();
+    };
+    return FormValidator;
+}(Validator));
+
+var NotEmptyValidator = /** @class */ (function (_super) {
+    __extends(NotEmptyValidator, _super);
+    function NotEmptyValidator(value, target, event, autoValid) {
+        if (autoValid === void 0) { autoValid = true; }
+        return _super.call(this, value, target, event, autoValid) || this;
+    }
+    NotEmptyValidator.prototype.valid = function () {
+        var _a;
+        var value = this.value;
+        // console.log('NotEmptyValidator', value, value !== undefined && value !== null && ((value as any)?.length ?? 0) > 0)
+        return value !== undefined && value !== null && ((_a = value === null || value === void 0 ? void 0 : value.length) !== null && _a !== void 0 ? _a : 0) > 0;
+    };
+    return NotEmptyValidator;
+}(Validator));
+
+var NotRegExpTestValidator = /** @class */ (function (_super) {
+    __extends(NotRegExpTestValidator, _super);
+    function NotRegExpTestValidator(regexp, value, target, event, autoValid) {
         if (autoValid === void 0) { autoValid = true; }
         var _this = _super.call(this, value, target, event, autoValid) || this;
-        _this.count = count;
+        _this.regexp = DomRenderProxy.final(regexp);
         return _this;
     }
-    CountUnCheckedValidatorArray.prototype.valid = function () {
+    NotRegExpTestValidator.prototype.valid = function () {
         var _a;
-        return ((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return !it.checked; }).length >= this.count;
+        var value = this.value;
+        var regExp = (_a = this.regexp._DomRender_origin) !== null && _a !== void 0 ? _a : this.regexp;
+        if (value) {
+            return !regExp.test(value);
+        }
+        else {
+            return true;
+        }
     };
-    return CountUnCheckedValidatorArray;
-}(ValidatorArray));
+    return NotRegExpTestValidator;
+}(Validator));
 
 var RegExpTestValidator = /** @class */ (function (_super) {
     __extends(RegExpTestValidator, _super);
@@ -5104,55 +5105,32 @@ var RegExpTestValidator = /** @class */ (function (_super) {
     return RegExpTestValidator;
 }(Validator));
 
-var RequiredValidator = /** @class */ (function (_super) {
-    __extends(RequiredValidator, _super);
-    function RequiredValidator(value, target, event, autoValid) {
-        if (autoValid === void 0) { autoValid = true; }
-        return _super.call(this, value, target, event, autoValid) || this;
-    }
-    RequiredValidator.prototype.valid = function () {
-        var value = this.value;
-        // console.log('required', value, value !== undefined && value !== null)
-        return value !== undefined && value !== null;
-    };
-    return RequiredValidator;
-}(Validator));
-
-var NotRegExpTestValidator = /** @class */ (function (_super) {
-    __extends(NotRegExpTestValidator, _super);
-    function NotRegExpTestValidator(regexp, value, target, event, autoValid) {
+var ValidValidator = /** @class */ (function (_super) {
+    __extends(ValidValidator, _super);
+    function ValidValidator(validCallBack, value, target, event, autoValid) {
         if (autoValid === void 0) { autoValid = true; }
         var _this = _super.call(this, value, target, event, autoValid) || this;
-        _this.regexp = DomRenderProxy.final(regexp);
+        _this.validCallBack = validCallBack;
         return _this;
     }
-    NotRegExpTestValidator.prototype.valid = function () {
-        var _a;
-        var value = this.value;
-        var regExp = (_a = this.regexp._DomRender_origin) !== null && _a !== void 0 ? _a : this.regexp;
-        if (value) {
-            return !regExp.test(value);
-        }
-        else {
-            return true;
-        }
+    ValidValidator.prototype.valid = function (value, target, event) {
+        return this.validCallBack(value, target, event);
     };
-    return NotRegExpTestValidator;
+    return ValidValidator;
 }(Validator));
 
-var NotEmptyValidator = /** @class */ (function (_super) {
-    __extends(NotEmptyValidator, _super);
-    function NotEmptyValidator(value, target, event, autoValid) {
+var RequiredValidator = /** @class */ (function (_super) {
+    __extends(RequiredValidator, _super);
+    function RequiredValidator(value, target, event, autoValid) {
         if (autoValid === void 0) { autoValid = true; }
         return _super.call(this, value, target, event, autoValid) || this;
     }
-    NotEmptyValidator.prototype.valid = function () {
-        var _a, _b;
+    RequiredValidator.prototype.valid = function () {
         var value = this.value;
-        // console.log('NotEmptyValidator', value, value !== undefined && value !== null && ((value as any)?.length ?? 0) > 0)
-        return value !== undefined && value !== null && ((_b = (_a = value) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) > 0;
+        // console.log('required', value, value !== undefined && value !== null)
+        return value !== undefined && value !== null;
     };
-    return NotEmptyValidator;
+    return RequiredValidator;
 }(Validator));
 
 var ValidMultipleValidator = /** @class */ (function (_super) {
@@ -5183,34 +5161,6 @@ var UnCheckedValidator = /** @class */ (function (_super) {
     return UnCheckedValidator;
 }(Validator));
 
-var ValidValidator = /** @class */ (function (_super) {
-    __extends(ValidValidator, _super);
-    function ValidValidator(validCallBack, value, target, event, autoValid) {
-        if (autoValid === void 0) { autoValid = true; }
-        var _this = _super.call(this, value, target, event, autoValid) || this;
-        _this.validCallBack = validCallBack;
-        return _this;
-    }
-    ValidValidator.prototype.valid = function (value, target, event) {
-        return this.validCallBack(value, target, event);
-    };
-    return ValidValidator;
-}(Validator));
-
-var ValidValidatorArray = /** @class */ (function (_super) {
-    __extends(ValidValidatorArray, _super);
-    function ValidValidatorArray(validCallBack, value, target, event, autoValid) {
-        if (autoValid === void 0) { autoValid = true; }
-        var _this = _super.call(this, value, target, event, autoValid) || this;
-        _this.validCallBack = validCallBack;
-        return _this;
-    }
-    ValidValidatorArray.prototype.valid = function () {
-        return this.validCallBack(this.value, this.getTarget(), this.getEvent());
-    };
-    return ValidValidatorArray;
-}(ValidatorArray));
-
 var ValueEqualsValidator = /** @class */ (function (_super) {
     __extends(ValueEqualsValidator, _super);
     function ValueEqualsValidator(equalsValue, value, target, event, autoValid) {
@@ -5225,48 +5175,33 @@ var ValueEqualsValidator = /** @class */ (function (_super) {
     return ValueEqualsValidator;
 }(Validator));
 
-var ValueNotEqualsValidator = /** @class */ (function (_super) {
-    __extends(ValueNotEqualsValidator, _super);
-    function ValueNotEqualsValidator(equalsValue, value, target, event, autoValid) {
-        if (autoValid === void 0) { autoValid = true; }
-        var _this = _super.call(this, value, target, event, autoValid) || this;
-        _this.equalsValue = equalsValue;
-        return _this;
-    }
-    ValueNotEqualsValidator.prototype.valid = function () {
-        return this.value !== this.equalsValue;
-    };
-    return ValueNotEqualsValidator;
-}(Validator));
-
-var CountLessThanEqualsUnCheckedValidatorArray = /** @class */ (function (_super) {
-    __extends(CountLessThanEqualsUnCheckedValidatorArray, _super);
-    function CountLessThanEqualsUnCheckedValidatorArray(count, value, target, event, autoValid) {
+var CountLessThanUnCheckedValidatorArray = /** @class */ (function (_super) {
+    __extends(CountLessThanUnCheckedValidatorArray, _super);
+    function CountLessThanUnCheckedValidatorArray(count, value, target, event, autoValid) {
         if (autoValid === void 0) { autoValid = true; }
         var _this = _super.call(this, value, target, event, autoValid) || this;
         _this.count = count;
         return _this;
     }
-    CountLessThanEqualsUnCheckedValidatorArray.prototype.valid = function () {
+    CountLessThanUnCheckedValidatorArray.prototype.valid = function () {
         var _a;
-        return ((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return !it.checked; }).length <= this.count;
+        return ((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return !it.checked; }).length < this.count;
     };
-    return CountLessThanEqualsUnCheckedValidatorArray;
+    return CountLessThanUnCheckedValidatorArray;
 }(ValidatorArray));
 
-var CountLessThanEqualsCheckedValidatorArray = /** @class */ (function (_super) {
-    __extends(CountLessThanEqualsCheckedValidatorArray, _super);
-    function CountLessThanEqualsCheckedValidatorArray(count, value, target, event, autoValid) {
+var ValidValidatorArray = /** @class */ (function (_super) {
+    __extends(ValidValidatorArray, _super);
+    function ValidValidatorArray(validCallBack, value, target, event, autoValid) {
         if (autoValid === void 0) { autoValid = true; }
         var _this = _super.call(this, value, target, event, autoValid) || this;
-        _this.count = count;
+        _this.validCallBack = validCallBack;
         return _this;
     }
-    CountLessThanEqualsCheckedValidatorArray.prototype.valid = function () {
-        var _a;
-        return ((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return it.checked; }).length <= this.count;
+    ValidValidatorArray.prototype.valid = function () {
+        return this.validCallBack(this.value, this.getTarget(), this.getEvent());
     };
-    return CountLessThanEqualsCheckedValidatorArray;
+    return ValidValidatorArray;
 }(ValidatorArray));
 
 var PassValidator = /** @class */ (function (_super) {
@@ -5281,29 +5216,19 @@ var PassValidator = /** @class */ (function (_super) {
     return PassValidator;
 }(Validator));
 
-var NodeUtils = /** @class */ (function () {
-    function NodeUtils() {
+var ValueNotEqualsValidator = /** @class */ (function (_super) {
+    __extends(ValueNotEqualsValidator, _super);
+    function ValueNotEqualsValidator(equalsValue, value, target, event, autoValid) {
+        if (autoValid === void 0) { autoValid = true; }
+        var _this = _super.call(this, value, target, event, autoValid) || this;
+        _this.equalsValue = equalsValue;
+        return _this;
     }
-    // https://stackoverflow.com/questions/3955229/remove-all-child-elements-of-a-dom-node-in-javascript
-    NodeUtils.removeAllChildNode = function (node) {
-        while (node === null || node === void 0 ? void 0 : node.firstChild) {
-            node.firstChild.remove();
-        }
-    };
-    NodeUtils.appendChild = function (parentNode, childNode) {
-        return parentNode.appendChild(childNode);
-    };
-    NodeUtils.replaceNode = function (targetNode, newNode) {
-        var _a;
-        // console.log('repalceNode', targetNode, newNode, targetNode.parentNode)
-        return (_a = targetNode.parentNode) === null || _a === void 0 ? void 0 : _a.replaceChild(newNode, targetNode);
-    };
-    NodeUtils.addNode = function (targetNode, newNode) {
-        var _a;
-        return (_a = targetNode.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(newNode, targetNode.nextSibling);
+    ValueNotEqualsValidator.prototype.valid = function () {
+        return this.value !== this.equalsValue;
     };
-    return NodeUtils;
-}());
+    return ValueNotEqualsValidator;
+}(Validator));
 
 var StorageUtils = /** @class */ (function () {
     function StorageUtils() {
@@ -5389,6 +5314,30 @@ var StorageUtils = /** @class */ (function () {
     return StorageUtils;
 }());
 
+var NodeUtils = /** @class */ (function () {
+    function NodeUtils() {
+    }
+    // https://stackoverflow.com/questions/3955229/remove-all-child-elements-of-a-dom-node-in-javascript
+    NodeUtils.removeAllChildNode = function (node) {
+        while (node === null || node === void 0 ? void 0 : node.firstChild) {
+            node.firstChild.remove();
+        }
+    };
+    NodeUtils.appendChild = function (parentNode, childNode) {
+        return parentNode.appendChild(childNode);
+    };
+    NodeUtils.replaceNode = function (targetNode, newNode) {
+        var _a;
+        // console.log('repalceNode', targetNode, newNode, targetNode.parentNode)
+        return (_a = targetNode.parentNode) === null || _a === void 0 ? void 0 : _a.replaceChild(newNode, targetNode);
+    };
+    NodeUtils.addNode = function (targetNode, newNode) {
+        var _a;
+        return (_a = targetNode.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(newNode, targetNode.nextSibling);
+    };
+    return NodeUtils;
+}());
+
 var ClipBoardUtils = /** @class */ (function () {
     function ClipBoardUtils() {
     }