dom-render 1.0.95 → 1.0.97

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 */
 
+/* global Reflect, Promise */
 var extendStatics = function (d, b) {
   extendStatics = Object.setPrototypeOf || {
     __proto__: []
@@ -26,24 +26,31 @@ 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) {
@@ -52,6 +59,7 @@ function __awaiter(thisArg, _arguments, P, generator) {
       resolve(value);
     });
   }
+
   return new (P || (P = Promise))(function (resolve, reject) {
     function fulfilled(value) {
       try {
@@ -60,6 +68,7 @@ function __awaiter(thisArg, _arguments, P, generator) {
         reject(e);
       }
     }
+
     function rejected(value) {
       try {
         step(generator["throw"](value));
@@ -67,26 +76,28 @@ 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];
-      },
-      trys: [],
-      ops: []
+    label: 0,
+    sent: function () {
+      if (t[0] & 1) throw t[1];
+      return t[1];
     },
-    f,
-    y,
-    t,
-    g;
+    trys: [],
+    ops: []
+  },
+      f,
+      y,
+      t,
+      g;
   return g = {
     next: verb(0),
     "throw": verb(1),
@@ -94,59 +105,78 @@ 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 (g && (g = 0, op[0] && (_ = 0)), _) try {
+
+    while (_) 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];
@@ -154,6 +184,7 @@ function __generator(thisArg, body) {
     } finally {
       f = t = 0;
     }
+
     if (op[0] & 5) throw op[1];
     return {
       value: op[0] ? op[1] : void 0,
@@ -304,6 +335,23 @@ var StringUtils = /** @class */ (function () {
         }
         return usingVars;
     };
+    StringUtils.regexExecArrayReplace = function (origin, regexpExecArrayOrRegex, replace) {
+        var regexpExecArrays = Array.isArray(regexpExecArrayOrRegex) ? regexpExecArrayOrRegex : StringUtils.regexExec(regexpExecArrayOrRegex, origin);
+        regexpExecArrays.reverse().forEach(function (it) {
+            var r = typeof replace === 'string' ? replace : replace(it);
+            origin = origin.substr(0, it.index) + origin.substr(it.index).replace(it[0], r);
+        });
+        return origin;
+    };
+    // public static regexGroups(regex: RegExp, text: string) {
+    //   const usingVars = [];
+    //   let varExec = regex.exec(text)
+    //   while (varExec) {
+    //     usingVars.push(varExec)
+    //     varExec = regex.exec(varExec.input)
+    //   }
+    //   return usingVars;
+    // }
     // public static betweenRegexpStr(start: string, end: string, data: string, flag = 'gm') {
     //     const startEspace = StringUtils.escapeSpecialCharacterRegExp(start);
     //     const reg = RegExp(`(${start}(?:(${start})??[^${startEspace}]*?${end}))`,flag);
@@ -359,7 +407,7 @@ var ScriptUtils = /** @class */ (function () {
         }, new GetDetectProxy());
         try {
             // eslint-disable-next-line no-new-func,no-unused-expressions
-            Function("\"use strict\"; ".concat(script, "; ")).bind(destUser)();
+            Function("\"use strict\"; " + script + "; ").bind(destUser)();
         }
         catch (e) {
             console.error(e);
@@ -375,7 +423,7 @@ var ScriptUtils = /** @class */ (function () {
     };
     ScriptUtils.eval = function (script, thisTarget) {
         // eslint-disable-next-line no-new-func,no-unused-expressions
-        return Function("\"use strict\"; ".concat(script, " ")).bind(thisTarget)();
+        return Function("\"use strict\"; " + script + " ").bind(thisTarget)();
     };
     ScriptUtils.loadElement = function (name, attribute, document) {
         return new Promise(function (resolve, reject) {
@@ -478,10 +526,22 @@ var RangeIterator = /** @class */ (function () {
             r = new RangeResult(this._current, false);
             this._current += this._step;
         }
+        else if (this._first < this._last && this._current === this._last) {
+            r = new RangeResult(this._current, false);
+            this._current += this._step;
+        }
         else if (this._first > this._last && this._current > this._last) {
             r = new RangeResult(this._current, false);
             this._current -= this._step;
         }
+        else if (this._first > this._last && this._current === this._last) {
+            r = new RangeResult(this._current, false);
+            this._current -= this._step;
+        }
+        else if (this._current === this._last) {
+            r = new RangeResult(this._current, false);
+            this._current -= this._step;
+        }
         else {
             r = new RangeResult(undefined, true);
         }
@@ -500,6 +560,9 @@ var Range = /** @class */ (function () {
     Range.prototype[Symbol.iterator] = function () {
         return new RangeIterator(this.first, this.last, this.step);
     };
+    Range.prototype.map = function (callbackfn, thisArg) {
+        return Array.from(this).map(callbackfn);
+    };
     Range.range = function (first, last, step) {
         if (step === void 0) { step = 1; }
         if (typeof first === 'number' && last === undefined) {
@@ -570,21 +633,21 @@ var EventManager = /** @class */ (function () {
             EventManager.onInitAttrName,
             this.eventParam
         ];
-        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.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.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-".concat(eventName);
-                    document.querySelectorAll("[".concat(targetAttr, "]")).forEach(function (it) {
+                    var targetAttr = "dr-window-event-" + eventName;
+                    document.querySelectorAll("[" + 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("".concat(_this.bindScript, " ").concat(script, " "), Object.assign(obj, {
+                            ScriptUtils.eval(_this.bindScript + " " + script + " ", Object.assign(obj, {
                                 __render: Object.freeze({
                                     target: DomRenderFinalProxy.final(event.target),
                                     element: it,
@@ -612,7 +675,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("[".concat(attrName, "]")).forEach(function (it) {
+            fragment === null || fragment === void 0 ? void 0 : fragment.querySelectorAll("[" + attrName + "]").forEach(function (it) {
                 elements.add(it);
             });
         });
@@ -648,7 +711,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 ".concat(v, " "), Object.assign(obj, {
+                var data = ScriptUtils.eval("const $element = this.element;  return " + v + " ", Object.assign(obj, {
                     __render: Object.freeze({
                         element: it,
                         attribute: DomUtils.getAttributeToObject(it)
@@ -667,7 +730,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("".concat(EventManager.valueLinkAttrName, ":map"));
+                var mapScript_1 = it.getAttribute(EventManager.valueLinkAttrName + ":map");
                 // const inMapScript = it.getAttribute(`${valueLinkAttrName}:in-map`);
                 var bindObj_1 = obj;
                 if (ownerVariablePathName) {
@@ -678,7 +741,7 @@ var EventManager = /** @class */ (function () {
                 if (typeof getValue === 'function' && getValue) {
                     var setValue = it.value;
                     if (mapScript_1) {
-                        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)) }));
+                        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)) }));
                     }
                     getValue(setValue);
                     // 여기서 value가 먼저냐 value-link가 먼저냐 선을 정해야되는거네...
@@ -686,14 +749,14 @@ var EventManager = /** @class */ (function () {
                 else if (getValue) {
                     var setValue = getValue;
                     if (mapScript_1) {
-                        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)) }));
+                        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)) }));
                     }
                     it.value = setValue;
                 }
                 it.addEventListener('input', function (event) {
                     var value = it.value;
                     if (mapScript_1) {
-                        value = ScriptUtils.eval("".concat(_this.getBindScript(config), " return ").concat(mapScript_1), Object.assign(bindObj_1, {
+                        value = ScriptUtils.eval(_this.getBindScript(config) + " return " + 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))
                         }));
                     }
@@ -713,7 +776,7 @@ var EventManager = /** @class */ (function () {
                 script = 'return ' + script;
             }
             if (script) {
-                ScriptUtils.eval("".concat(_this.getBindScript(config), "; ").concat(script, " "), Object.assign(obj, {
+                ScriptUtils.eval(_this.getBindScript(config) + "; " + 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)
@@ -744,20 +807,20 @@ var EventManager = /** @class */ (function () {
             if (ownerVariablePathName) {
                 bindObj = ScriptUtils.evalReturn(ownerVariablePathName, obj);
             }
-            var mapScript = it.getAttribute("".concat(EventManager.valueLinkAttrName, ":map"));
+            var mapScript = it.getAttribute(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("".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)) }));
+                        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)) }));
                     }
                     getValue(setValue);
                 }
                 else { //  if (getValue !== undefined && getValue !== null)
                     var setValue = getValue;
                     if (mapScript) {
-                        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)) }));
+                        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)) }));
                     }
                     it.value = setValue;
                 }
@@ -770,7 +833,7 @@ var EventManager = /** @class */ (function () {
                 script = 'return ' + script;
             }
             if (EventManager.isUsingThisVar(script, varName) || varName === undefined) {
-                var data = ScriptUtils.eval("const $element = this.__render.element; ".concat(script, " "), Object.assign(obj, {
+                var data = ScriptUtils.eval("const $element = this.__render.element; " + script + " ", Object.assign(obj, {
                     __render: Object.freeze({
                         element: it,
                         attribute: DomUtils.getAttributeToObject(it)
@@ -822,7 +885,7 @@ var EventManager = /** @class */ (function () {
                 script = 'return ' + script;
             }
             if (EventManager.isUsingThisVar(script, varName) || varName === undefined) {
-                var data = ScriptUtils.eval("const $element = this.__render.element;  ".concat(script, " "), Object.assign(obj, {
+                var data = ScriptUtils.eval("const $element = this.__render.element;  " + script + " ", Object.assign(obj, {
                     __render: Object.freeze({
                         element: it,
                         attribute: DomUtils.getAttributeToObject(it)
@@ -851,7 +914,7 @@ var EventManager = /** @class */ (function () {
                 script = 'return ' + script;
             }
             if (EventManager.isUsingThisVar(script, varName) || varName === undefined) {
-                var data = ScriptUtils.eval("const $element = this.element;  ".concat(script, " "), Object.assign(obj, {
+                var data = ScriptUtils.eval("const $element = this.element;  " + script + " ", Object.assign(obj, {
                     __render: Object.freeze({
                         element: it,
                         attribute: DomUtils.getAttributeToObject(it)
@@ -886,7 +949,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 ".concat(v, " "), Object.assign(obj, {
+                    var data = ScriptUtils.eval("const $element = this.element;  return " + v + " ", Object.assign(obj, {
                         __render: Object.freeze({
                             element: it,
                             attribute: DomUtils.getAttributeToObject(it)
@@ -906,15 +969,15 @@ var EventManager = /** @class */ (function () {
             var script = attribute;
             it.addEventListener(eventName, function (event) {
                 var filter = true;
-                var filterScript = it.getAttribute("".concat(attr, ":filter"));
+                var filterScript = it.getAttribute(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("".concat(_this.getBindScript(config), " return ").concat(filterScript), thisTarget);
+                    filter = ScriptUtils.eval(_this.getBindScript(config) + " return " + filterScript, thisTarget);
                 }
                 if (filter) {
-                    ScriptUtils.eval("".concat(_this.getBindScript(config), " ").concat(script, " "), thisTarget);
+                    ScriptUtils.eval(_this.getBindScript(config) + " " + script + " ", thisTarget);
                 }
             });
         });
@@ -937,7 +1000,7 @@ var EventManager = /** @class */ (function () {
                 });
                 bind.split(',').forEach(function (eventName) {
                     it.addEventListener(eventName.trim(), function (event) {
-                        ScriptUtils.eval("const $params = this.__render.params; ".concat(_this.getBindScript(config), "  ").concat(script_1, " "), Object.assign(obj, {
+                        ScriptUtils.eval("const $params = this.__render.params; " + _this.getBindScript(config) + "  " + 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))
                         }));
                     });
@@ -958,7 +1021,7 @@ var EventManager = /** @class */ (function () {
             if (it.nodeType === 1) {
                 var e = it;
                 sets.add(e);
-                e.querySelectorAll("[".concat(attrName, "]")).forEach(function (it) {
+                e.querySelectorAll("[" + attrName + "]").forEach(function (it) {
                     sets.add(it);
                 });
             }
@@ -981,7 +1044,7 @@ var EventManager = /** @class */ (function () {
     };
     EventManager.prototype.setValue = function (obj, name, value) {
         name = name.replaceAll('this.', 'this.this.');
-        ScriptUtils.eval("".concat(name, " = this.value;"), {
+        ScriptUtils.eval(name + " = this.value;", {
             this: obj,
             value: value
         });
@@ -995,7 +1058,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.___".concat(it));
+                raws = raws.replace(RegExp(it.replace('$', '\\$'), 'g'), "this.___" + it);
             });
             var variablePaths = ScriptUtils.getVariablePaths(raws !== null && raws !== void 0 ? raws : '');
             return variablePaths.has(varName);
@@ -1020,10 +1083,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 ".concat(key));
+                return !_this.bindScript.includes("const " + key);
             }).map(function (_a) {
                 var key = _a[0]; _a[1];
-                return "const ".concat(key, " = this.__render.").concat(key, ";");
+                return "const " + key + " = this.__render." + key + ";";
             }).join(';');
             return this.bindScript + '' + bindScript;
         }
@@ -1090,7 +1153,7 @@ var OperatorExecuter = /** @class */ (function () {
                         }
                         r = attrValue;
                         if (r && this.startingExecute) {
-                            r = ScriptUtils.eval(" ".concat(this.render.bindScript, "; return ").concat(attrValue), Object.assign(this.source.obj, { __render: this.render }));
+                            r = ScriptUtils.eval(" " + this.render.bindScript + "; return " + 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);
@@ -1110,8 +1173,10 @@ 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;
-        return _super.call(this, rawSet, render, returnContainer, elementSource, source, afterCallBack) || this;
+        _this = _super.call(this, rawSet, render, returnContainer, elementSource, source, afterCallBack) || this;
+        return _this;
     }
     DrPre.prototype.execute = function (value) {
         return __awaiter(this, void 0, void 0, function () {
@@ -1160,7 +1225,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                    ".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, {
+                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, {
                     __render: Object.freeze(__assign({ fag: newTemp, drStripOption: this.elementSource.attrs.drStripOption }, this.render))
                 }));
                 RawSet.drVarDecoding(newTemp, vars);
@@ -1181,8 +1246,10 @@ 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;
-        return _super.call(this, rawSet, render, returnContainer, elementSource, source, afterCallBack, false) || this;
+        _this = _super.call(this, rawSet, render, returnContainer, elementSource, source, afterCallBack, false) || this;
+        return _this;
     }
     DrIf.prototype.executeAttrRequire = function (attr) {
         var _a, _b, _c, _d;
@@ -1193,7 +1260,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                ".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, {
+                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, {
                     __render: Object.freeze(__assign({ fag: newTemp, drAttr: this.elementSource.attrs, drAttrsOriginName: RawSet.drAttrsOriginName, drStripOption: this.elementSource.attrs.drStripOption }, this.render))
                 }));
                 // TODO: 뭐지?? 지워야되는거 아닌가?
@@ -1245,7 +1312,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, "".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)];
+                        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)];
                     case 1:
                         componentBody = _j.sent();
                         this.returnContainer.fag.append(componentBody);
@@ -1616,9 +1683,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("".concat(attr), this.source.obj);
+                data = ScriptUtils.evalReturn("" + attr, this.source.obj);
                 childs = Array.from(this.elementSource.element.querySelectorAll('[name]'));
-                fromName = ScriptUtils.evalReturn((_a = this.elementSource.element.getAttribute("".concat(RawSet.DR_FORM_NAME, ":name"))) !== null && _a !== void 0 ? _a : '', this.source.obj);
+                fromName = ScriptUtils.evalReturn((_a = this.elementSource.element.getAttribute(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) {
@@ -1631,32 +1698,32 @@ var DrForm = /** @class */ (function (_super) {
                 }
                 childs.forEach(function (it) {
                     var _a, _b, _c, _d, _e;
-                    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 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 attrEventName = EventManager.attrPrefix + 'event-' + eventName;
-                    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');
+                    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');
                     if (varpath != null) {
                         if (validatorName) {
-                            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, {
+                            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, {
                                 __render: Object.freeze(__assign({ drStripOption: _this.elementSource.attrs.drStripOption }, _this.render))
                             }));
                         }
-                        varpath = "".concat(attr, "['").concat(varpath, "']");
-                        var data_1 = ScriptUtils.evalReturn("".concat(varpath), _this.source.obj);
+                        varpath = attr + "['" + varpath + "']";
+                        var data_1 = ScriptUtils.evalReturn("" + varpath, _this.source.obj);
                         if (data_1 instanceof ValidatorArray) {
-                            it.setAttribute(attrEventName, "".concat(varpath, ".setArrayValue($target, $target.value, $event); ").concat((_d = it.getAttribute(attrEventName)) !== null && _d !== void 0 ? _d : '', ";"));
+                            it.setAttribute(attrEventName, varpath + ".setArrayValue($target, $target.value, $event); " + ((_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, "".concat(varpath, ".set($target.value, $target, $event); ").concat((_e = it.getAttribute(attrEventName)) !== null && _e !== void 0 ? _e : '', ";"));
+                            it.setAttribute(attrEventName, varpath + ".set($target.value, $target, $event); " + ((_e = it.getAttribute(attrEventName)) !== null && _e !== void 0 ? _e : '') + ";");
                             data_1.setTarget(it);
                             data_1.value = it.value;
                         }
                         else {
-                            it.setAttribute(attrEventName, "".concat(varpath, " = $target.value;"));
+                            it.setAttribute(attrEventName, varpath + " = $target.value;");
                         }
                     }
                 });
@@ -1681,7 +1748,7 @@ var DrInnerText = /** @class */ (function (_super) {
             var _d;
             return __generator(this, function (_e) {
                 newTemp = this.source.config.window.document.createElement('temp');
-                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, {
+                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, {
                     __render: Object.freeze(__assign({ drStripOption: this.elementSource.attrs.drStripOption, fag: newTemp }, this.render))
                 }));
                 tempalte = this.source.config.window.document.createElement('template');
@@ -1709,7 +1776,7 @@ var DrInnerHTML = /** @class */ (function (_super) {
             var _d;
             return __generator(this, function (_e) {
                 newTemp = this.source.config.window.document.createElement('temp');
-                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, {
+                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, {
                     __render: Object.freeze(__assign({ drStripOption: this.elementSource.attrs.drStripOption, fag: newTemp }, this.render
                     // eslint-disable-next-line no-use-before-define
                     ))
@@ -1730,8 +1797,10 @@ 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;
-        return _super.call(this, rawSet, render, returnContainer, elementSource, source, afterCallBack, false) || this;
+        _this = _super.call(this, rawSet, render, returnContainer, elementSource, source, afterCallBack, false) || this;
+        return _this;
     }
     DrFor.prototype.executeAttrRequire = function (attr) {
         var _a, _b, _c, _d;
@@ -1742,7 +1811,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                    ".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, {
+                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, {
                     __render: Object.freeze(__assign({ fag: newTemp, drStripOption: this.elementSource.attrs.drStripOption }, this.render))
                 }));
                 RawSet.drVarDecoding(newTemp, vars);
@@ -1763,8 +1832,10 @@ 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;
-        return _super.call(this, rawSet, render, returnContainer, elementSource, source, afterCallBack, false) || this;
+        _this = _super.call(this, rawSet, render, returnContainer, elementSource, source, afterCallBack, false) || this;
+        return _this;
     }
     DrForOf.prototype.executeAttrRequire = function (attr) {
         var _a, _b, _c, _d;
@@ -1775,7 +1846,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                    ".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, {
+                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, {
                     __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
                     ))
@@ -1799,8 +1870,10 @@ 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;
-        return _super.call(this, rawSet, render, returnContainer, elementSource, source, afterCallBack, false) || this;
+        _this = _super.call(this, rawSet, render, returnContainer, elementSource, source, afterCallBack, false) || this;
+        return _this;
     }
     DrAppender.prototype.executeAttrRequire = function (attr) {
         var _a, _b, _c, _d;
@@ -1811,7 +1884,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                    ".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, {
+                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, {
                     __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
                     ))
@@ -1835,8 +1908,10 @@ 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;
-        return _super.call(this, rawSet, render, returnContainer, elementSource, source, afterCallBack, false) || this;
+        _this = _super.call(this, rawSet, render, returnContainer, elementSource, source, afterCallBack, false) || this;
+        return _this;
     }
     DrRepeat.prototype.executeAttrRequire = function (attr) {
         var _a, _b, _c, _d;
@@ -1847,7 +1922,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                    ".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, {
+                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, {
                     __render: Object.freeze(__assign({ fag: newTemp, drStripOption: this.elementSource.attrs.drStripOption }, this.render))
                 }));
                 RawSet.drVarDecoding(newTemp, vars);
@@ -1868,8 +1943,10 @@ 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;
-        return _super.call(this, rawSet, render, returnContainer, elementSource, source, afterCallBack, false) || this;
+        _this = _super.call(this, rawSet, render, returnContainer, elementSource, source, afterCallBack, false) || this;
+        return _this;
     }
     DrTargetElement.prototype.execute = function () {
         var _a, _b, _c, _d;
@@ -1893,7 +1970,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;  ".concat(detectAction_1, " ");
+                                        var script = "var $component = this.__render.component; var $element = this.__render.element; var $innerHTML = this.__render.innerHTML; var $attribute = this.__render.attribute;  " + detectAction_1 + " ";
                                         ScriptUtils.eval(script, Object.assign(_this.source.obj, {
                                             __render: render_1
                                         }));
@@ -1923,8 +2000,10 @@ 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;
-        return _super.call(this, rawSet, render, returnContainer, elementSource, source, afterCallBack, false) || this;
+        _this = _super.call(this, rawSet, render, returnContainer, elementSource, source, afterCallBack, false) || this;
+        return _this;
     }
     DrTargetAttr.prototype.execute = function () {
         var _a, _b, _c, _d;
@@ -1975,13 +2054,15 @@ exports.RawSetType = void 0;
     RawSetType["UNKOWN"] = "UNKOWN";
 })(exports.RawSetType || (exports.RawSetType = {}));
 
-var DrDictionary = /** @class */ (function (_super) {
-    __extends(DrDictionary, _super);
-    function DrDictionary(rawSet, render, returnContainer, elementSource, source, afterCallBack) {
+var DrThisProperty = /** @class */ (function (_super) {
+    __extends(DrThisProperty, _super);
+    function DrThisProperty(rawSet, render, returnContainer, elementSource, source, afterCallBack) {
+        var _this = this;
         source.operatorAround = undefined;
-        return _super.call(this, rawSet, render, returnContainer, elementSource, source, afterCallBack, false) || this;
+        _this = _super.call(this, rawSet, render, returnContainer, elementSource, source, afterCallBack, false) || this;
+        return _this;
     }
-    DrDictionary.prototype.executeAttrRequire = function (attr) {
+    DrThisProperty.prototype.executeAttrRequire = function (attr) {
         var _a, _b, _c, _d, _e;
         return __awaiter(this, void 0, void 0, function () {
             var itRandom, vars, newTemp, dictionaryKey, tempalte, rr;
@@ -1991,14 +2072,14 @@ var DrDictionary = /** @class */ (function (_super) {
                 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.evalReturn(attr, this.source.obj);
-                dictionaryKey = (_b = this.elementSource.attrs.drDictionaryOption) !== null && _b !== void 0 ? _b : '';
+                dictionaryKey = (_b = this.elementSource.attrs.drKeyOption) !== null && _b !== void 0 ? _b : '';
                 // console.log('--->', attr, dictionaryKey)
                 // if (!(dictioanry instanceof Dictionary)) {
                 //     return ExecuteState.STOP;
                 // }
                 // await new Promise(resolve => setTimeout(resolve, 1000));
                 // console.log('!!!!!!!!!!!!!!', this.rawSet);
-                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                            // const oldChild = this.__render.oldChild.get(it);\n                            // if (oldChild && oldChild.length > 0) {\n                            //     this.__render.fag.append(...oldChild);\n                            // } else {\n                            //     var destIt = dictionaryStr + '[\"' + it + '\"]';\n                            //     const n = this.__render.element.cloneNode(true);\n                            //     n.setAttribute('dr-this', destIt);\n                            //     // n.setAttribute('dr-dictionary', dictionaryStr);\n                            //     n.setAttribute('dr-dictionary-key', it);\n                            //     this.__render.fag.append(n);\n                            // }\n                            // if (!this.__render.oldChild.get(it)) {\n                            //     var destIt = dictionaryStr + '[\"' + it + '\"]';\n                            //     const n = this.__render.element.cloneNode(true);\n                            //     n.setAttribute('dr-this', destIt);\n                            //     // n.setAttribute('dr-dictionary', dictionaryStr);\n                            //     n.setAttribute('dr-dictionary-key', it);\n                            //     this.__render.fag.append(n);\n                            // }\n                            var destIt = dictionaryStr + '[\"' + it + '\"]';\n                            const n = this.__render.element.cloneNode(true);\n                            n.setAttribute('dr-this', destIt);\n                            // n.setAttribute('dr-dictionary', dictionaryStr);\n                            // n.setAttribute('dr-dictionary-key', it);\n                            this.__render.fag.append(n);\n                            i++;\n                        }\n                         this.__render.rawset.point.start.setAttribute('dictionary-keys',Object.keys(dictionary).join(','));\n                    }\n                    ").concat((_d = this.elementSource.attrs.drAfterOption) !== null && _d !== void 0 ? _d : '', "\n                    "), Object.assign(this.source.obj, {
+                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, {
                     __render: Object.freeze(__assign({ drStripOption: this.elementSource.attrs.drStripOption, drAttr: this.elementSource.attrs, drAttrsOriginName: RawSet.drAttrsOriginName, fag: newTemp }, this.render))
                 }));
                 RawSet.drVarDecoding(newTemp, vars);
@@ -2014,29 +2095,7 @@ var DrDictionary = /** @class */ (function (_super) {
             });
         });
     };
-    DrDictionary.getChildren = function (rawSet, config) {
-        var _a, _b, _c;
-        var next = rawSet.point.start.nextSibling;
-        var oldChild = new Map();
-        var currentKey = '';
-        while (next) {
-            if (next === rawSet.point.end) {
-                break;
-            }
-            var dictionaryKey = (_b = (_a = next).getAttribute) === null || _b === void 0 ? void 0 : _b.call(_a, 'dictionary-key');
-            if (dictionaryKey) {
-                currentKey = dictionaryKey;
-                oldChild.set(dictionaryKey, []);
-            }
-            // console.log('next-------->', currentKey, next);
-            if (currentKey) {
-                (_c = oldChild.get(currentKey)) === null || _c === void 0 ? void 0 : _c.push(next);
-            }
-            next = next.nextSibling;
-        }
-        return oldChild;
-    };
-    DrDictionary.append = function (obj, fullPath, key, rawSet, config) {
+    DrThisProperty.append = function (obj, fullPath, key, rawSet, config) {
         var _this = this;
         var _a, _b;
         var genNode = config.window.document.importNode(rawSet.fragment, true);
@@ -2045,33 +2104,634 @@ var DrDictionary = /** @class */ (function (_super) {
         for (var _i = 0, _c = Array.from(genNode.childNodes.values()); _i < _c.length; _i++) {
             var cNode = _c[_i];
             var element = cNode.cloneNode(true);
-            element.removeAttribute('dr-dictionary');
-            element.setAttribute('dr-this', "this.".concat(fullPath));
+            element.removeAttribute(RawSet.DR_THIS_PROPERTY_NAME);
+            element.setAttribute(RawSet.DR_THIS_NAME, "this." + fullPath);
+            element.setAttribute(RawSet.DR_KEY_OPTIONNAME, key);
             // rawSet.point.end.after(element);
             var fg = config.window.document.createDocumentFragment();
             fg.append(element);
             rawSets.push.apply(rawSets, RawSet.checkPointCreates(fg, obj, config));
             rawSet.point.end.before(fg);
             var start = rawSet.point.start;
-            var keys = (_b = (_a = start.getAttribute('dictionary-keys')) === null || _a === void 0 ? void 0 : _a.split(',')) !== null && _b !== void 0 ? _b : [];
+            var keys = (_b = (_a = start.getAttribute(RawSet.DR_HAS_KEYS_OPTIONNAME)) === null || _a === void 0 ? void 0 : _a.split(',')) !== null && _b !== void 0 ? _b : [];
             keys.push(key);
-            start.setAttribute('dictionary-keys', keys.join(','));
+            start.setAttribute(RawSet.DR_HAS_KEYS_OPTIONNAME, keys.join(','));
             rawSets.forEach(function (it) { return __awaiter(_this, void 0, void 0, function () { return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0: return [4 /*yield*/, it.render(obj, config)];
                     case 1: return [2 /*return*/, _a.sent()];
                 }
             }); }); });
-            // console.log('WWW', fg, Array.from(fg.childNodes));
-            // console.log('--------------------------rawSets', rawSets);
         }
         return rawSets;
-        // rawSet.
-        // rawSet.point.end.before()
     };
-    return DrDictionary;
+    return DrThisProperty;
 }(OperatorExecuterAttrRequire));
 
+exports.RawSetOperatorType = void 0;
+(function (RawSetOperatorType) {
+    RawSetOperatorType["DR_THIS_PROPERTY"] = "this-property";
+})(exports.RawSetOperatorType || (exports.RawSetOperatorType = {}));
+
+// http://www.w3.org/TR/CSS21/grammar.html
+// https://github.com/visionmedia/css-parse/pull/49#issuecomment-30088027
+var commentre = /\/\*[^*]*\*+([^/*][^*]*\*+)*\//g;
+function cssParse (css, options) {
+  options = options || {};
+  /**
+   * Positional.
+   */
+
+  var lineno = 1;
+  var column = 1;
+  /**
+   * Update lineno and column based on `str`.
+   */
+
+  function updatePosition(str) {
+    var lines = str.match(/\n/g);
+    if (lines) lineno += lines.length;
+    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,
+      column: column
+    };
+    return function (node) {
+      node.position = new Position(start);
+      whitespace();
+      return node;
+    };
+  }
+  /**
+   * Store position information for a node
+   */
+
+
+  function Position(start) {
+    this.start = start;
+    this.end = {
+      line: lineno,
+      column: column
+    };
+    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;
+    err.filename = options.source;
+    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 {
+      type: 'stylesheet',
+      stylesheet: {
+        source: options.source,
+        rules: rulesList,
+        parsingErrors: errorsList
+      }
+    };
+  }
+  /**
+   * 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;
+    var str = m[0];
+    updatePosition(str);
+    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);
+    css = css.slice(i);
+    column += 2;
+    return pos({
+      type: 'comment',
+      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 prop = match(/^(\*?[-#\/\*\\\w]+(\[[0-9a-z_-]+\])?)\s*/);
+    if (!prop) return;
+    prop = trim(prop[0]); // :
+
+    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
+
+    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',
+      values: vals,
+      declarations: declarations()
+    });
+  }
+  /**
+   * Parse keyframes.
+   */
+
+
+  function atkeyframes() {
+    var pos = position();
+    var m = match(/^@([-\w]+)?keyframes\s*/);
+    if (!m) return;
+    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',
+      name: name,
+      vendor: vendor,
+      keyframes: frames
+    });
+  }
+  /**
+   * Parse supports.
+   */
+
+
+  function atsupports() {
+    var pos = position();
+    var m = match(/^@supports *([^{]+)/);
+    if (!m) return;
+    var supports = trim(m[1]);
+    if (!open()) return error("@supports missing '{'");
+    var style = comments().concat(rules());
+    if (!close()) return error("@supports missing '}'");
+    return pos({
+      type: 'supports',
+      supports: supports,
+      rules: style
+    });
+  }
+  /**
+   * Parse host.
+   */
+
+
+  function athost() {
+    var pos = position();
+    var m = match(/^@host\s*/);
+    if (!m) return;
+    if (!open()) return error("@host missing '{'");
+    var style = comments().concat(rules());
+    if (!close()) return error("@host missing '}'");
+    return pos({
+      type: 'host',
+      rules: style
+    });
+  }
+  /**
+   * Parse media.
+   */
+
+
+  function atmedia() {
+    var pos = position();
+    var m = match(/^@media *([^{]+)/);
+    if (!m) return;
+    var media = trim(m[1]);
+    if (!open()) return error("@media missing '{'");
+    var style = comments().concat(rules());
+    if (!close()) return error("@media missing '}'");
+    return pos({
+      type: 'media',
+      media: media,
+      rules: style
+    });
+  }
+  /**
+   * Parse custom-media.
+   */
+
+
+  function atcustommedia() {
+    var pos = position();
+    var m = match(/^@custom-media\s+(--[^\s]+)\s*([^{;]+);/);
+    if (!m) return;
+    return pos({
+      type: 'custom-media',
+      name: trim(m[1]),
+      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 decl;
+
+    while (decl = declaration()) {
+      decls.push(decl);
+      decls = decls.concat(comments());
+    }
+
+    if (!close()) return error("@page missing '}'");
+    return pos({
+      type: 'page',
+      selectors: sel,
+      declarations: decls
+    });
+  }
+  /**
+   * Parse document.
+   */
+
+
+  function atdocument() {
+    var pos = position();
+    var m = match(/^@([-\w]+)?document *([^{]+)/);
+    if (!m) return;
+    var vendor = trim(m[1]);
+    var doc = trim(m[2]);
+    if (!open()) return error("@document missing '{'");
+    var style = comments().concat(rules());
+    if (!close()) return error("@document missing '}'");
+    return pos({
+      type: 'document',
+      document: doc,
+      vendor: vendor,
+      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 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 () {
+      var pos = position();
+      var m = match(re);
+      if (!m) return;
+      var ret = {
+        type: name
+      };
+      ret[name] = m[1].trim();
+      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();
+    if (!sel) return error('selector missing');
+    comments();
+    return pos({
+      type: 'rule',
+      selectors: sel,
+      declarations: declarations()
+    });
+  }
+
+  return addParent(stylesheet());
+}
+/**
+ * Trim `str`.
+ */
+
+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);
+      });
+    } else if (value && typeof value === 'object') {
+      addParent(value, childParent);
+    }
+  }
+
+  if (isNode) {
+    Object.defineProperty(obj, 'parent', {
+      configurable: true,
+      writable: true,
+      enumerable: false,
+      value: parent || null
+    });
+  }
+
+  return obj;
+}
+
+/**
+ * Module dependencies.
+ */
+var Compressed = require('./compress');
+
+var Identity = require('./identity');
+/**
+ * Stringfy the given AST `node`.
+ *
+ * Options:
+ *
+ *  - `compress` space-optimized output
+ *  - `sourcemap` return an object with `.code` and `.map`
+ *
+ * @param {Object} node
+ * @param {Object} [options]
+ * @return {String}
+ * @api public
+ */
+
+
+function cssStringify (node, options) {
+  options = options || {};
+  var compiler = options.compress ? new Compressed(options) : new Identity(options); // source maps
+  // if (options.sourcemap) {
+  //   var sourcemaps = require('./source-map-support');
+  //   sourcemaps(compiler);
+  //
+  //   var code = compiler.compile(node);
+  //   compiler.applySourceMaps();
+  //
+  //   var map = options.sourcemap === 'generator'
+  //     ? compiler.map
+  //     : compiler.map.toJSON();
+  //
+  //   return { code: code, map: map };
+  // }
+
+  var code = compiler.compile(node);
+  return code;
+}
+
 var RawSet = /** @class */ (function () {
     function RawSet(uuid, type, point, fragment, detect, data) {
         this.uuid = uuid;
@@ -2080,6 +2740,7 @@ var RawSet = /** @class */ (function () {
         this.fragment = fragment;
         this.detect = detect;
         this.data = data;
+        point.start.rawSet = this;
         // console.log('rawset constructor->', (this.point.node as Element).getAttributeNames());
     }
     Object.defineProperty(RawSet.prototype, "isConnected", {
@@ -2096,7 +2757,7 @@ var RawSet = /** @class */ (function () {
             var _a, _b, _c;
             var script = '';
             if (cNode.nodeType === Node.TEXT_NODE) {
-                script = "`".concat((_a = cNode.textContent) !== null && _a !== void 0 ? _a : '', "`");
+                script = "`" + ((_a = cNode.textContent) !== null && _a !== void 0 ? _a : '') + "`";
                 // console.log('???????', script)
             }
             else if (cNode.nodeType === Node.ELEMENT_NODE) {
@@ -2125,11 +2786,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.___".concat(it));
+                    script = script.replace(RegExp(it.replace('$', '\\$'), 'g'), "this.___" + it);
                     // console.log('scripts-->', script)
                 });
                 // console.log('----------', script);
-                Array.from(ScriptUtils.getVariablePaths(script)).filter(function (it) { return !it.startsWith("___".concat(EventManager.SCRIPTS_VARNAME)); }).forEach(function (it) { return usingTriggerVariables.add(it); });
+                Array.from(ScriptUtils.getVariablePaths(script)).filter(function (it) { return !it.startsWith("___" + EventManager.SCRIPTS_VARNAME); }).forEach(function (it) { return usingTriggerVariables.add(it); });
             }
         });
         // console.log('usingTriggerVariable----------->', usingTriggerVariables)
@@ -2166,7 +2827,7 @@ var RawSet = /** @class */ (function () {
                             range: Range.range,
                             element: cNode,
                             attribute: attribute,
-                            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            ")
+                            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            "
                             // eslint-disable-next-line no-use-before-define
                         });
                         fag = config.window.document.createDocumentFragment();
@@ -2175,13 +2836,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("".concat(__render.bindScript, " return ").concat(runText), Object.assign(obj, { __render: __render }));
+                            r = ScriptUtils.eval(__render.bindScript + " return " + runText, Object.assign(obj, { __render: __render }));
                             template = config.window.document.createElement('template');
                             template.innerHTML = r;
                             newNode = template.content;
                         }
                         else {
-                            r = ScriptUtils.eval("".concat(__render.bindScript, "  return ").concat(runText), Object.assign(obj, { __render: __render }));
+                            r = ScriptUtils.eval(__render.bindScript + "  return " + 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);
@@ -2199,7 +2860,7 @@ var RawSet = /** @class */ (function () {
                             drIf: this.getAttributeAndDelete(element, RawSet.DR_IF_NAME),
                             drFor: this.getAttributeAndDelete(element, RawSet.DR_FOR_NAME),
                             drForOf: this.getAttributeAndDelete(element, RawSet.DR_FOR_OF_NAME),
-                            drDictionary: this.getAttributeAndDelete(element, RawSet.DR_DICTIONARY_NAME),
+                            drThisProperty: this.getAttributeAndDelete(element, RawSet.DR_THIS_PROPERTY_NAME),
                             drAppender: this.getAttributeAndDelete(element, RawSet.DR_APPENDER_NAME),
                             drRepeat: this.getAttributeAndDelete(element, RawSet.DR_REPEAT_NAME),
                             drThis: this.getAttributeAndDelete(element, RawSet.DR_THIS_NAME),
@@ -2215,7 +2876,7 @@ var RawSet = /** @class */ (function () {
                             drCompleteOption: this.getAttributeAndDelete(element, RawSet.DR_COMPLETE_OPTIONNAME),
                             drStripOption: this.getAttributeAndDelete(element, RawSet.DR_STRIP_OPTIONNAME),
                             drDestroyOption: this.getAttributeAndDelete(element, RawSet.DR_DESTROY_OPTIONNAME),
-                            drDictionaryOption: this.getAttributeAndDelete(element, RawSet.DR_DICTIONARY_OPTIONKEYNAME)
+                            drKeyOption: this.getAttributeAndDelete(element, RawSet.DR_KEY_OPTIONNAME)
                         };
                         drAttrs.push(drAttr);
                         operators = [
@@ -2228,7 +2889,7 @@ var RawSet = /** @class */ (function () {
                             new DrInnerHTML(this, __render, { raws: raws, fag: fag }, { element: element, attrName: RawSet.DR_INNERHTML_NAME, attr: drAttr.drInnerHTML, attrs: drAttr }, { config: config, obj: obj, operatorAround: (_h = config.operatorAround) === null || _h === void 0 ? void 0 : _h.drInnerHTML }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
                             new DrFor(this, __render, { raws: raws, fag: fag }, { element: element, attrName: RawSet.DR_FOR_NAME, attr: drAttr.drFor, attrs: drAttr }, { config: config, obj: obj, operatorAround: (_j = config.operatorAround) === null || _j === void 0 ? void 0 : _j.drFor }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
                             new DrForOf(this, __render, { raws: raws, fag: fag }, { element: element, attrName: RawSet.DR_FOR_OF_NAME, attr: drAttr.drForOf, attrs: drAttr }, { config: config, obj: obj, operatorAround: (_k = config.operatorAround) === null || _k === void 0 ? void 0 : _k.drForOf }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
-                            new DrDictionary(this, __render, { raws: raws, fag: fag }, { element: element, attrName: RawSet.DR_DICTIONARY_NAME, attr: drAttr.drDictionary, attrs: drAttr }, { config: config, obj: obj, operatorAround: (_l = config.operatorAround) === null || _l === void 0 ? void 0 : _l.drDictionary }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
+                            new DrThisProperty(this, __render, { raws: raws, fag: fag }, { element: element, attrName: RawSet.DR_THIS_PROPERTY_NAME, attr: drAttr.drThisProperty, attrs: drAttr }, { config: config, obj: obj, operatorAround: (_l = config.operatorAround) === null || _l === void 0 ? void 0 : _l.drThisProperty }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
                             new DrAppender(this, __render, { raws: raws, fag: fag }, { element: element, attrName: RawSet.DR_APPENDER_NAME, attr: drAttr.drAppender, attrs: drAttr }, { config: config, obj: obj, operatorAround: (_m = config.operatorAround) === null || _m === void 0 ? void 0 : _m.drAppender }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
                             new DrRepeat(this, __render, { raws: raws, fag: fag }, { element: element, attrName: RawSet.DR_REPEAT_NAME, attr: drAttr.drRepeat, attrs: drAttr }, { config: config, obj: obj, operatorAround: (_o = config.operatorAround) === null || _o === void 0 ? void 0 : _o.drRepeat }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
                             new DrTargetElement(this, __render, { raws: raws, fag: fag }, { element: element, attrs: drAttr }, { config: config, obj: obj }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
@@ -2266,11 +2927,12 @@ var RawSet = /** @class */ (function () {
                                     fag: genNode,
                                     scripts: EventManager.setBindProperty(config === null || config === void 0 ? void 0 : config.scripts, obj)
                                 });
-                                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 }));
+                                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 }));
                             }
                         });
                         // 중요 style isolation 나중에 :scope로 대체 가능할듯.
-                        RawSet.generateStyleSheetsLocal();
+                        // 2023.9.4일 없앰  style 처음들어올때 처리하는걸로 바꿈
+                        // RawSet.generateStyleSheetsLocal(config);
                         for (_1 = 0, onThisComponentSetCallBacks_1 = onThisComponentSetCallBacks; _1 < onThisComponentSetCallBacks_1.length; _1++) {
                             it_1 = onThisComponentSetCallBacks_1[_1];
                             (_q = (_p = it_1.obj) === null || _p === void 0 ? void 0 : _p.onInitRender) === null || _q === void 0 ? void 0 : _q.call(_p);
@@ -2281,7 +2943,7 @@ var RawSet = /** @class */ (function () {
                                 oninit = it_2.targetElement.__render.element.getAttribute(RawSet.DR_ON_INIT_ARGUMENTS_OPTIONNAME);
                                 param = [];
                                 if (oninit) {
-                                    script = "".concat(it_2.targetElement.__render.renderScript, " return ").concat(oninit, " ");
+                                    script = it_2.targetElement.__render.renderScript + " return " + oninit + " ";
                                     param = ScriptUtils.eval(script, Object.assign(obj, {
                                         __render: it_2.targetElement.__render
                                     }));
@@ -2320,8 +2982,13 @@ var RawSet = /** @class */ (function () {
             });
         });
     };
-    RawSet.generateStyleSheetsLocal = function () {
-        Array.from(window.document.styleSheets).filter(function (it) { return it.ownerNode && it.ownerNode instanceof Element && it.ownerNode.hasAttribute('domstyle') && it.ownerNode.getAttribute('id') && !it.ownerNode.getAttribute('completed'); }).forEach(function (it) {
+    /**
+     * @deprecated
+     * @param config
+     */
+    RawSet.generateStyleSheetsLocal = function (config) {
+        // console.log('config.window.document.styleSheets---------', config.window.document.styleSheets);
+        Array.from(config.window.document.styleSheets).filter(function (it) { return it.ownerNode && it.ownerNode instanceof Element && it.ownerNode.hasAttribute('domstyle') && it.ownerNode.getAttribute('id') && !it.ownerNode.getAttribute('completed'); }).forEach(function (it) {
             var _a;
             var styleElement = it.ownerNode;
             var split = (_a = styleElement.getAttribute('id')) === null || _a === void 0 ? void 0 : _a.split('-');
@@ -2338,8 +3005,8 @@ var RawSet = /** @class */ (function () {
     };
     RawSet.generateCSS = function (id, cssRule) {
         var _this = this;
-        var start = "#".concat(id, "-start");
-        var end = "#".concat(id, "-end");
+        var start = "#" + id + "-start";
+        var end = "#" + id + "-end";
         if (cssRule.constructor.name === 'CSSStyleRule') {
             var rule = cssRule;
             // rule.selectorText = `${start} ~ *:not(${start} ~ ${end} ~ *) ${rule.selectorText}`;
@@ -2348,14 +3015,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(".concat(start, " ~ *:not(").concat(start, " ~ ").concat(end, " ~ *))");
+                var selectorText = ":is(" + start + " ~ *:not(" + start + " ~ " + end + " ~ *))";
                 if (rule.selectorText.startsWith('.')) {
-                    rule.selectorText = "".concat(selectorText).concat(rule.selectorText, ", ").concat(selectorText, " ").concat(rule.selectorText);
+                    rule.selectorText = "" + selectorText + rule.selectorText + ", " + selectorText + " " + rule.selectorText;
                     //     rule.selectorText = `${start} ~ *:not(${start} ~ ${end} ~ *)${rule.selectorText}`;
                 }
                 else {
-                    var divText = "".concat(start, " ~ ").concat(rule.selectorText, ":not(").concat(start, " ~ ").concat(end, " ~ *)");
-                    rule.selectorText = "".concat(selectorText, " ").concat(rule.selectorText, ", ").concat(divText);
+                    var divText = start + " ~ " + rule.selectorText + ":not(" + start + " ~ " + end + " ~ *)";
+                    rule.selectorText = selectorText + " " + rule.selectorText + ", " + divText;
                     // rule.selectorText = `${selectorText} ${rule.selectorText}`;
                     //     rule.selectorText = `${rule.selectorText} ~ ${start} ~ *:not(${start} ~ ${end} ~ *)`;
                 }
@@ -2370,15 +3037,42 @@ var RawSet = /** @class */ (function () {
         }
     };
     // 중요 스타일 적용 부분
-    RawSet.generateStyleTransform = function (styleBody, id, styleTagWrap) {
+    RawSet.generateStyleTransform = function (styleBody, componentKey, styleTagWrap) {
+        var _a;
         if (styleTagWrap === void 0) { styleTagWrap = true; }
         if (Array.isArray(styleBody)) {
             styleBody = styleBody.join('\n');
         }
-        if (styleTagWrap) {
-            styleBody = "<style id='".concat(id, "-style' domstyle>").concat(styleBody, "</style>");
-        }
-        return styleBody;
+        var start = "#" + componentKey + "-start";
+        var end = "#" + componentKey + "-end";
+        var before = StringUtils.regexExecArrayReplace(styleBody, /(\$\{.*?\}\$)/g, function (data) {
+            return "var(--domrender-" + data[0] + ")";
+        });
+        var cssobject = cssParse(before);
+        (_a = cssobject.stylesheet) === null || _a === void 0 ? void 0 : _a.rules.forEach(function (rule) {
+            var _a, _b;
+            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 + " ~ *))";
+                    if (sit.startsWith('.')) {
+                        return "" + selectorText + sit + ", " + selectorText + " " + sit;
+                    }
+                    else {
+                        var divText = start + " ~ " + sit + ":not(" + start + " ~ " + end + " ~ *)";
+                        return selectorText + " " + sit + ", " + divText;
+                    }
+                });
+            }
+        });
+        var stringify = cssStringify(cssobject);
+        var after = StringUtils.regexExecArrayReplace(stringify, /(var\(--domrender-(\$\{.*?\}\$)?\))/g, function (data) {
+            return data[2];
+        });
+        if (styleTagWrap) {
+            styleBody = "<style id='" + componentKey + "-style' domstyle>" + after + "</style>";
+        }
+        return styleBody;
     };
     RawSet.prototype.applyEvent = function (obj, fragment, config) {
         if (fragment === void 0) { fragment = this.fragment; }
@@ -2397,13 +3091,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("".concat(data, "?.length -1"), obj);
+            var currentIndex = ScriptUtils.evalReturn(data + "?.length -1", obj);
             // console.log('------?', currentIndex)
             // if (currentIndex === undefined || isNaN(currentIndex)) {
             //     return undefined;
             // }
             // const currentIndex = ScriptUtils.evalReturn(`${data}.length`, obj);
-            data = "".concat(data, "[").concat(currentIndex, "]");
+            data = data + "[" + currentIndex + "]";
             element.setAttribute(RawSet.DR_APPENDER_NAME, data);
             // element.setAttribute(RawSet.DR_IF_NAME, data);
             // element.setAttribute('dr-id', data);
@@ -2425,9 +3119,8 @@ var RawSet = /** @class */ (function () {
     // 중요 important
     RawSet.checkPointCreates = function (element, obj, config) {
         var _a, _b, _c, _d, _e, _f, _g, _h;
-        // console.log('start==========')
+        // const NodeFilter = (config.window as any).NodeFilter;
         var thisVariableName = element.__domrender_this_variable_name;
-        // console.log('checkPointCreates thisVariableName', thisVariableName);
         var nodeIterator = config.window.document.createNodeIterator(element, NodeFilter.SHOW_ALL, {
             acceptNode: function (node) {
                 var _a, _b, _c, _d, _e;
@@ -2548,34 +3241,37 @@ var RawSet = /** @class */ (function () {
             var element = node;
             var start = config.window.document.createElement('meta');
             var end = config.window.document.createElement('meta');
-            start.setAttribute('id', "".concat(id, "-start"));
-            var dictionaryKey = element.getAttribute('dr-dictionary-key');
-            var dictionary = element.getAttribute('dr-dictionary');
-            if (dictionary) {
-                start.setAttribute('type', 'dictionary');
+            start.setAttribute('id', id + "-start");
+            var keys = element.getAttribute(RawSet.DR_KEY_OPTIONNAME);
+            var thisPropertyType = element.getAttribute(RawSet.DR_THIS_PROPERTY_NAME);
+            if (thisPropertyType) {
+                start.setAttribute('type', exports.RawSetOperatorType.DR_THIS_PROPERTY);
             }
-            if (dictionaryKey) {
-                start.setAttribute('dictionary-key', dictionaryKey);
+            if (keys) {
+                element.removeAttribute(RawSet.DR_KEY_OPTIONNAME);
+                start.setAttribute(RawSet.DR_KEY_OPTIONNAME, keys);
             }
-            end.setAttribute('id', "".concat(id, "-end"));
-            return {
-                start: start,
-                end: end
-            };
+            end.setAttribute('id', id + "-end");
+            return { start: start, end: end };
         }
         else if (type === exports.RawSetType.STYLE_TEXT) {
             return {
-                start: config.window.document.createTextNode("/*start text ".concat(id, "*/")),
-                end: config.window.document.createTextNode("/*end text ".concat(id, "*/"))
+                start: config.window.document.createTextNode("/*start text " + id + "*/"),
+                end: config.window.document.createTextNode("/*end text " + id + "*/")
             };
         }
         else { // text
             return {
-                start: config.window.document.createComment("start text ".concat(id)),
-                end: config.window.document.createComment("end text ".concat(id))
+                start: config.window.document.createComment("start text " + id),
+                end: config.window.document.createComment("end text " + id)
             };
         }
     };
+    RawSet.prototype.remove = function () {
+        this.childAllRemove();
+        this.point.end.remove();
+        this.point.start.remove();
+    };
     RawSet.prototype.childAllRemove = function () {
         var next = this.point.start.nextSibling;
         while (next) {
@@ -2586,16 +3282,41 @@ var RawSet = /** @class */ (function () {
             next = this.point.start.nextSibling;
         }
     };
+    RawSet.prototype.childs = function (stopNext) {
+        var childs = [];
+        var next = this.point.start.nextSibling;
+        while (next && next !== this.point.end) {
+            if (stopNext === null || stopNext === void 0 ? void 0 : stopNext(next)) {
+                return;
+            }
+            childs.push(next);
+            next = next.nextSibling;
+        }
+        return childs;
+    };
+    RawSet.prototype.getHasRawSet = function (key) {
+        var rawSet;
+        this.childs(function (node) {
+            var _a, _b;
+            var drKey = (_b = (_a = node).getAttribute) === null || _b === void 0 ? void 0 : _b.call(_a, 'dr-key');
+            if (drKey && drKey === key) {
+                rawSet = node.rawSet;
+                return true;
+            }
+            return false;
+        });
+        return rawSet;
+    };
     RawSet.drItOtherEncoding = function (element) {
         var random = RandomUtils.uuid();
         var regex = /#it#/g;
-        element.querySelectorAll("[".concat(RawSet.DR_IT_OPTIONNAME, "], [").concat(RawSet.DR_FOR_OF_NAME, "], [").concat(RawSet.DR_REPEAT_NAME, "]")).forEach(function (it) {
+        element.querySelectorAll("[" + RawSet.DR_IT_OPTIONNAME + "], [" + RawSet.DR_FOR_OF_NAME + "], [" + RawSet.DR_REPEAT_NAME + "]").forEach(function (it) {
             it.innerHTML = it.innerHTML.replace(regex, random);
         });
         return random;
     };
     RawSet.drItOtherDecoding = function (element, random) {
-        element.querySelectorAll("[".concat(RawSet.DR_IT_OPTIONNAME, "], [").concat(RawSet.DR_FOR_OF_NAME, "], [").concat(RawSet.DR_REPEAT_NAME, "]")).forEach(function (it) {
+        element.querySelectorAll("[" + RawSet.DR_IT_OPTIONNAME + "], [" + RawSet.DR_FOR_OF_NAME + "], [" + RawSet.DR_REPEAT_NAME + "]").forEach(function (it) {
             it.innerHTML = it.innerHTML.replace(RegExp(random, 'g'), '#it#');
         });
     };
@@ -2608,35 +3329,35 @@ var RawSet = /** @class */ (function () {
         // element.querySelectorAll(`[${RawSet.DR_PRE_NAME}]`).forEach(it => {
         //     let message = it.innerHTML;
         // })
-        element.querySelectorAll("[".concat(RawSet.DR_PRE_NAME, "]")).forEach(function (it) {
+        element.querySelectorAll("[" + RawSet.DR_PRE_NAME + "]").forEach(function (it) {
             it.innerHTML = it.innerHTML.replace(/this/g, thisRandom);
         });
-        element.querySelectorAll("[".concat(RawSet.DR_THIS_NAME, "]")).forEach(function (it) {
+        element.querySelectorAll("[" + RawSet.DR_THIS_NAME + "]").forEach(function (it) {
             var message = it.innerHTML;
             StringUtils.regexExec(/([^(dr\-)])?this(?=.?)/g, message).reverse().forEach(function (it) {
                 var _a;
-                message = message.substr(0, it.index) + message.substr(it.index).replace(it[0], "".concat((_a = it[1]) !== null && _a !== void 0 ? _a : '').concat(drThis));
+                message = message.substr(0, it.index) + message.substr(it.index).replace(it[0], "" + ((_a = it[1]) !== null && _a !== void 0 ? _a : '') + drThis);
             });
             it.innerHTML = message;
         });
         var message = element.innerHTML;
         StringUtils.regexExec(/([^(dr\-)])?this(?=.?)/g, message).reverse().forEach(function (it) {
             var _a;
-            message = message.substr(0, it.index) + message.substr(it.index).replace(it[0], "".concat((_a = it[1]) !== null && _a !== void 0 ? _a : '').concat(drThis));
+            message = message.substr(0, it.index) + message.substr(it.index).replace(it[0], "" + ((_a = it[1]) !== null && _a !== void 0 ? _a : '') + drThis);
         });
         element.innerHTML = message;
         return thisRandom;
     };
     RawSet.drThisDecoding = function (element, thisRandom) {
-        element.querySelectorAll("[".concat(RawSet.DR_PRE_NAME, "]")).forEach(function (it) {
+        element.querySelectorAll("[" + RawSet.DR_PRE_NAME + "]").forEach(function (it) {
             it.innerHTML = it.innerHTML.replace(RegExp(thisRandom, 'g'), 'this');
         });
-        element.querySelectorAll("[".concat(RawSet.DR_THIS_NAME, "]")).forEach(function (it) {
+        element.querySelectorAll("[" + 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("[".concat(RawSet.DR_FORM_NAME, "]")).forEach(function (subElement) {
+        element.querySelectorAll("[" + RawSet.DR_FORM_NAME + "]").forEach(function (subElement) {
             var _a;
             var nodeIterator = config.window.document.createNodeIterator(subElement, NodeFilter.SHOW_ELEMENT, {
                 acceptNode: function (node) {
@@ -2674,7 +3395,7 @@ var RawSet = /** @class */ (function () {
             };
         });
         // element.querySelectorAll(`[${RawSet.DR_THIS_NAME}]`).forEach(it => {
-        element.querySelectorAll("[".concat(RawSet.DR_VAR_OPTIONNAME, "]")).forEach(function (it) {
+        element.querySelectorAll("[" + 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);
             });
@@ -2685,7 +3406,7 @@ var RawSet = /** @class */ (function () {
         return vars;
     };
     RawSet.drVarDecoding = function (element, vars) {
-        element.querySelectorAll("[".concat(RawSet.DR_THIS_NAME, "]")).forEach(function (it) {
+        element.querySelectorAll("[" + 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);
             });
@@ -2747,7 +3468,7 @@ var RawSet = /** @class */ (function () {
                         renderScript = '';
                         createParam = [];
                         if (onCreate) {
-                            script = "".concat(renderScript, " return ").concat(onCreate, " ");
+                            script = renderScript + " return " + onCreate + " ";
                             createParam = ScriptUtils.eval(script, obj);
                             if (!Array.isArray(createParam)) {
                                 createParam = [createParam];
@@ -2756,14 +3477,16 @@ 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 = "".concat(renderScript, "  ").concat(oninit, " ");
+                            script = renderScript + "  " + oninit + " ";
                             ScriptUtils.eval(script, obj);
                         }
                         _m.label = 12;
                     case 12:
-                        n.querySelectorAll(eventManager.attrNames.map(function (it) { return "[".concat(it, "]"); }).join(',')).forEach(function (it) {
+                        n.querySelectorAll(eventManager.attrNames.map(function (it) { return "[" + it + "]"; }).join(',')).forEach(function (it) {
                             it.setAttribute(EventManager.ownerVariablePathAttrName, 'this');
                         });
+                        // attribute
+                        n.getAttributeNames().forEach(function (it) { return n.setAttribute(it, n.getAttribute(it).replace(/#this#/g, drThis)); });
                         thisRandom = this.drThisEncoding(n, drThis);
                         vars = this.drVarEncoding(n, drVarOption);
                         this.drVarDecoding(n, vars);
@@ -2813,10 +3536,11 @@ var RawSet = /** @class */ (function () {
             callBack: function (element, obj, rawSet, attrs, config) {
                 var _a, _b, _c, _d, _e, _f, _g;
                 return __awaiter(this, void 0, void 0, function () {
-                    var stylePromises, templatePromise, _h, i_1, it_6, _j, _k, _l, _m, _o, domrenderComponents, componentKey, attribute, renderScript, render, constructor, constructorParam, script, param, instance, i, normalAttrMap, onCreate, createParam, script, applayTemplate, innerHTMLThisRandom, componentName, innerHTMLName, oninit, script, style, data, template_1;
+                    var componentKey, stylePromises, templatePromise, _h, i_1, it_6, _j, _k, _l, _m, _o, domrenderComponents, attribute, renderScript, render, constructor, constructorParam, script, param, instance, i, normalAttrMap, onCreate, createParam, script, applayTemplate, innerHTMLThisRandom, componentName, innerHTMLName, oninit, script, style, data, template_1;
                     return __generator(this, function (_p) {
                         switch (_p.label) {
                             case 0:
+                                componentKey = rawSet.uuid;
                                 stylePromises = [];
                                 if (!(this.template && this.template.startsWith('lazy://'))) return [3 /*break*/, 2];
                                 return [4 /*yield*/, fetch(this.template.substring(6))];
@@ -2869,7 +3593,6 @@ var RawSet = /** @class */ (function () {
                                     obj.__domrender_components = {};
                                 }
                                 domrenderComponents = obj.__domrender_components;
-                                componentKey = rawSet.uuid;
                                 attribute = DomUtils.getAttributeToObject(element);
                                 renderScript = 'var $component = this.__render.component; var $element = this.__render.element; var $router = this.__render.router; var $innerHTML = this.__render.innerHTML; var $attribute = this.__render.attribute; var $creatorMetaData = this.__render.creatorMetaData;';
                                 render = Object.freeze({
@@ -2887,7 +3610,7 @@ var RawSet = /** @class */ (function () {
                                 constructorParam = [];
                                 // dr-constructor
                                 if (constructor) {
-                                    script = "".concat(renderScript, " return ").concat(constructor, " ");
+                                    script = renderScript + " return " + constructor + " ";
                                     param = (_b = ScriptUtils.eval(script, Object.assign(obj, { __render: render }))) !== null && _b !== void 0 ? _b : [];
                                     if (!Array.isArray(param)) {
                                         param = [param];
@@ -2899,7 +3622,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.".concat(componentKey);
+                                i.thisFullVariableName = "this.__domrender_components." + componentKey;
                                 i.componentKey = componentKey;
                                 i.rawSet = rawSet;
                                 i.attribute = attribute;
@@ -2914,7 +3637,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 = "".concat(renderScript, " return ").concat(value, " ");
+                                        var script = renderScript + " return " + value + " ";
                                         var cval = ScriptUtils.eval(script, Object.assign(obj, { __render: render }));
                                         // element.setAttribute(key, cval);
                                         instance.onChangeAttrRender(key, cval);
@@ -2924,7 +3647,7 @@ var RawSet = /** @class */ (function () {
                                 this.__render = render;
                                 createParam = [];
                                 if (onCreate) {
-                                    script = "".concat(renderScript, " return ").concat(onCreate, " ");
+                                    script = renderScript + " return " + onCreate + " ";
                                     createParam = ScriptUtils.eval(script, Object.assign(obj, { __render: render }));
                                     if (!Array.isArray(createParam)) {
                                         createParam = [createParam];
@@ -2940,20 +3663,20 @@ var RawSet = /** @class */ (function () {
                                     innerHTMLThisRandom = RandomUtils.uuid();
                                     applayTemplate = applayTemplate.replace(/this\./g, innerHTMLThisRandom);
                                     // }
-                                    applayTemplate = applayTemplate.replace(RegExp("#".concat(componentName, "#"), 'g'), 'this');
+                                    applayTemplate = applayTemplate.replace(RegExp("#" + componentName + "#", 'g'), 'this');
                                 }
                                 // applayTemplate = template.replace(RegExp(`#${innerHTMLName}#`, 'g'), applayTemplate);
-                                applayTemplate = ((_g = this.template) !== null && _g !== void 0 ? _g : '').replace(RegExp("#".concat(innerHTMLName, "#"), 'g'), applayTemplate);
+                                applayTemplate = ((_g = this.template) !== null && _g !== void 0 ? _g : '').replace(RegExp("#" + innerHTMLName + "#", 'g'), applayTemplate);
                                 oninit = element.getAttribute(RawSet.DR_ON_CREATED_CALLBACK_OPTIONNAME);
                                 if (oninit) {
-                                    script = "".concat(renderScript, "  ").concat(oninit, " ");
+                                    script = renderScript + "  " + 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.".concat(componentKey), '', true, obj, config)];
+                                return [4 /*yield*/, RawSet.drThisCreate(rawSet, element, "this.__domrender_components." + componentKey, '', true, obj, config)];
                             case 12:
                                 data = _p.sent();
                                 // 넘어온 innerHTML에 this가 있는걸 다시 복호화해서 제대로 작동하도록한다.
@@ -3007,7 +3730,7 @@ var RawSet = /** @class */ (function () {
     RawSet.DR_IF_NAME = 'dr-if';
     RawSet.DR_FOR_NAME = 'dr-for';
     RawSet.DR_FOR_OF_NAME = 'dr-for-of';
-    RawSet.DR_DICTIONARY_NAME = 'dr-dictionary';
+    RawSet.DR_THIS_PROPERTY_NAME = 'dr-this-property';
     RawSet.DR_REPEAT_NAME = 'dr-repeat';
     RawSet.DR_THIS_NAME = 'dr-this';
     RawSet.DR_FORM_NAME = 'dr-form';
@@ -3026,7 +3749,8 @@ var RawSet = /** @class */ (function () {
     RawSet.DR_DESTROY_OPTIONNAME = 'dr-destroy';
     RawSet.DR_COMPONENT_NAME_OPTIONNAME = 'dr-component-name';
     RawSet.DR_COMPONENT_INNER_HTML_NAME_OPTIONNAME = 'dr-component-inner-html-name';
-    RawSet.DR_DICTIONARY_OPTIONKEYNAME = 'dr-dictionary-key';
+    RawSet.DR_KEY_OPTIONNAME = 'dr-key';
+    RawSet.DR_HAS_KEYS_OPTIONNAME = 'dr-has-keys';
     RawSet.DR_ON_CREATE_ARGUMENTS_OPTIONNAME = 'dr-on-create:arguments';
     RawSet.DR_ON_CREATED_CALLBACK_OPTIONNAME = 'dr-on-create:callback';
     RawSet.DR_ON_INIT_ARGUMENTS_OPTIONNAME = 'dr-on-init:arguments';
@@ -3036,7 +3760,7 @@ var RawSet = /** @class */ (function () {
         drIf: RawSet.DR_IF_NAME,
         drFor: RawSet.DR_FOR_NAME,
         drForOf: RawSet.DR_FOR_OF_NAME,
-        drDictionary: RawSet.DR_DICTIONARY_NAME,
+        drThisProperty: RawSet.DR_THIS_PROPERTY_NAME,
         drAppender: RawSet.DR_APPENDER_NAME,
         drRepeat: RawSet.DR_REPEAT_NAME,
         drThis: RawSet.DR_THIS_NAME,
@@ -3052,10 +3776,11 @@ var RawSet = /** @class */ (function () {
         drCompleteOption: RawSet.DR_COMPLETE_OPTIONNAME,
         drStripOption: RawSet.DR_STRIP_OPTIONNAME,
         drDestroyOption: RawSet.DR_DESTROY_OPTIONNAME,
-        drDictionaryOption: RawSet.DR_DICTIONARY_OPTIONKEYNAME
+        drHasKeysOption: RawSet.DR_HAS_KEYS_OPTIONNAME,
+        drKeyOption: RawSet.DR_KEY_OPTIONNAME
     };
     RawSet.DR_TAGS = [];
-    RawSet.DR_ATTRIBUTES = [RawSet.DR_NAME, RawSet.DR_APPENDER_NAME, RawSet.DR_IF_NAME, RawSet.DR_FOR_OF_NAME, RawSet.DR_DICTIONARY_NAME, RawSet.DR_FOR_NAME, RawSet.DR_THIS_NAME, RawSet.DR_FORM_NAME, RawSet.DR_PRE_NAME, RawSet.DR_INNERHTML_NAME, RawSet.DR_INNERTEXT_NAME, RawSet.DR_REPEAT_NAME, RawSet.DR_DETECT_NAME];
+    RawSet.DR_ATTRIBUTES = [RawSet.DR_NAME, RawSet.DR_APPENDER_NAME, RawSet.DR_IF_NAME, RawSet.DR_FOR_OF_NAME, RawSet.DR_THIS_PROPERTY_NAME, RawSet.DR_FOR_NAME, RawSet.DR_THIS_NAME, RawSet.DR_FORM_NAME, RawSet.DR_PRE_NAME, RawSet.DR_INNERHTML_NAME, RawSet.DR_INNERTEXT_NAME, RawSet.DR_REPEAT_NAME, RawSet.DR_DETECT_NAME];
     return RawSet;
 }());
 
@@ -3082,9 +3807,9 @@ var DomRenderProxy = /** @class */ (function () {
     };
     DomRenderProxy.prototype.run = function (objProxy) {
         var _this = this;
-        var _a;
+        var _a, _b;
         this._domRender_proxy = objProxy;
-        (_a = objProxy === null || objProxy === void 0 ? void 0 : objProxy.onProxyDomRender) === null || _a === void 0 ? void 0 : _a.call(objProxy, this.config);
+        (_b = (_a = objProxy) === null || _a === void 0 ? void 0 : _a.onProxyDomRender) === null || _b === void 0 ? void 0 : _b.call(_a, this.config);
         var obj = objProxy._DomRender_origin;
         if (obj) {
             Object.keys(obj).forEach(function (it) {
@@ -3110,7 +3835,7 @@ var DomRenderProxy = /** @class */ (function () {
     };
     DomRenderProxy.prototype.initRender = function (target) {
         var _this = this;
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d;
         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) {
@@ -3120,7 +3845,6 @@ 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));
-        (_e = target.innerHTML) !== null && _e !== void 0 ? _e : '';
         this._targets.add(target);
         var rawSets = RawSet.checkPointCreates(target, this._domRender_proxy, this.config);
         // console.log('initRender -------rawSet', rawSets)
@@ -3199,11 +3923,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.".concat(fullPathStr));
+                                            var isUsing = EventManager.isUsingThisVar(v, "this." + fullPathStr);
                                             if (isUsing) {
                                                 var render = it_1.fragment.render;
                                                 // console.log('render-->', (it.fragment as any).render)
-                                                var script = "".concat(render.renderScript, " return ").concat(v, " ");
+                                                var script = render.renderScript + " return " + 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);
                                             }
@@ -3275,7 +3999,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 : "[".concat(it, "]"); }).join('').slice(1);
+            var fullPathStr_1 = strings.map(function (it) { return isNaN(Number(it)) ? '.' + it : "[" + it + "]"; }).join('').slice(1);
             // console.log('-------fullPathStr', fullPathStr, lastDoneExecute);
             if (lastDoneExecute) {
                 // const firstData = ScriptUtils.evalReturn('this.' + firstPathStr, this._domRender_proxy);
@@ -3284,12 +4008,13 @@ 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 : "[".concat(it, "]"); }).join('');
+                var front_1 = strings.slice(0, strings.length - 1).map(function (it) { return isNaN(Number(it)) ? '.' + it : "[" + 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);
                 new Promise(function (resolve) {
                     var firstPathStr = front_1.slice(1);
+                    // check dictionary
                     // console.log('-promise-------', firstPathStr, this)
                     var firstTargets = _this._rawSets.get(firstPathStr);
                     var firstTargetDictionary = [];
@@ -3297,7 +4022,7 @@ var DomRenderProxy = /** @class */ (function () {
                         var _a, _b;
                         // console.log('----forEach---', it);
                         var type = (_b = (_a = it.point.start).getAttribute) === null || _b === void 0 ? void 0 : _b.call(_a, 'type');
-                        if (type === 'dictionary') {
+                        if (type === exports.RawSetOperatorType.DR_THIS_PROPERTY) {
                             firstTargetDictionary.push(it);
                         }
                     });
@@ -3307,10 +4032,15 @@ var DomRenderProxy = /** @class */ (function () {
                         var skip_1 = false;
                         firstTargetDictionary.forEach(function (it) {
                             var _a, _b;
-                            var keys = (_b = (_a = it.point.start.getAttribute('dictionary-keys')) === null || _a === void 0 ? void 0 : _a.split(',')) !== null && _b !== void 0 ? _b : [];
+                            var startElement = it.point.start;
+                            var keys = (_b = (_a = startElement.getAttribute(RawSet.DR_HAS_KEYS_OPTIONNAME)) === null || _a === void 0 ? void 0 : _a.split(',')) !== null && _b !== void 0 ? _b : [];
+                            if (value === undefined) {
+                                var rawSet = it.getHasRawSet(last_1);
+                                rawSet === null || rawSet === void 0 ? void 0 : rawSet.remove();
+                                startElement.setAttribute(RawSet.DR_HAS_KEYS_OPTIONNAME, keys.filter(function (it) { return it !== last_1; }).join(','));
+                            }
                             if (!keys.includes(last_1)) {
-                                var raws = DrDictionary.append(_this._domRender_proxy, fullPathStr_1, last_1, it, _this.config);
-                                // console.log('----append---', raws);
+                                var raws = DrThisProperty.append(_this._domRender_proxy, fullPathStr_1, last_1, it, _this.config);
                                 if (raws) {
                                     rawSets_3.push.apply(rawSets_3, raws);
                                 }
@@ -3322,18 +4052,7 @@ var DomRenderProxy = /** @class */ (function () {
                         if (skip_1 === false || rawSets_3.length > 0) {
                             return _this.render(rawSets_3);
                         }
-                        // console.log('rawSets-->#$$$$$$$$$$$', this._rawSets);
-                        // rawSets.forEach(it => this.addRawSet(fullPathStr, it));
-                        // DrDictionary.append(this._domRender_proxy, fullPathStr, it, this.config);
-                        // it.render(this._domRender_proxy, this.config);
                     }
-                    /* if (data instanceof Dictionary) {
-                         const a = this._rawSets.get(firstPathStr);
-                         // a?.forEach(it => {
-                         //     if (it.type === RawSetType.TARGET_ATTR)
-                         // })
-                         console.log('dictionary-->', data, last, value, this._rawSets, a);
-                     } else */
                     if (last_1 === 'length' && Array.isArray(data_1)) {
                         var aIterable = _this._rawSets.get(firstPathStr);
                         if (aIterable) {
@@ -3344,14 +4063,12 @@ 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.".concat(fullPathStr_1), _this.config);
+                            eventManager.changeVar(_this._domRender_proxy, targets, "this." + fullPathStr_1, _this.config);
                         }
                     });
                 });
@@ -3361,7 +4078,7 @@ var DomRenderProxy = /** @class */ (function () {
         return fullPaths;
     };
     DomRenderProxy.prototype.set = function (target, p, value, receiver) {
-        var _a, _b;
+        var _a, _b, _c;
         // console.log('set-->', p, value, target, receiver);
         if (typeof p === 'string' && p !== '__domrender_components' && excludeGetSetPropertys.includes(p)) {
             target[p] = value;
@@ -3383,12 +4100,12 @@ var DomRenderProxy = /** @class */ (function () {
         }
         // console.log('full path:', fullPath);
         if (('onBeforeReturnSet' in receiver) && typeof p === 'string' && !((_a = this.config.proxyExcludeOnBeforeReturnSets) !== null && _a !== void 0 ? _a : []).concat(excludeGetSetPropertys).includes(p)) {
-            (_b = receiver === null || receiver === void 0 ? void 0 : receiver.onBeforeReturnSet) === null || _b === void 0 ? void 0 : _b.call(receiver, p, value, fullPath);
+            (_c = (_b = receiver) === null || _b === void 0 ? void 0 : _b.onBeforeReturnSet) === null || _c === void 0 ? void 0 : _c.call(_b, p, value, fullPath);
         }
         return true;
     };
     DomRenderProxy.prototype.get = function (target, p, receiver) {
-        var _a, _b;
+        var _a, _b, _c;
         // console.log('get-->', target, p, receiver);
         if (p === '_DomRender_origin') {
             return this._domRender_origin;
@@ -3419,7 +4136,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)) {
-                (_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));
+                (_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));
             }
             return it_2;
         }
@@ -3535,7 +4252,7 @@ var Router = /** @class */ (function () {
         var _this = this;
         var proxy = this.rootObj._DomRender_proxy;
         if (proxy) {
-            var key = "___".concat(EventManager.ROUTER_VARNAME);
+            var key = "___" + EventManager.ROUTER_VARNAME;
             proxy.render(key);
         }
         this.attachCallbacks.forEach(function (it) {
@@ -3962,7 +4679,7 @@ var DomRender = /** @class */ (function () {
     function DomRender() {
     }
     DomRender.run = function (obj, target, oConfig) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c;
         var robj = obj;
         if ('_DomRender_isProxy' in obj) {
             if (target) {
@@ -3989,10 +4706,7 @@ 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 { // default
-            config.routerType = 'hash';
-            config.router = (_d = config.router) !== null && _d !== void 0 ? _d : new HashRouter(robj, config.window);
-        }
+        else ;
         domRender.run(robj);
         return robj;
     };
@@ -4088,19 +4802,6 @@ var Appender = /** @class */ (function () {
     return Appender;
 }());
 
-var AllUnCheckedValidatorArray = /** @class */ (function (_super) {
-    __extends(AllUnCheckedValidatorArray, _super);
-    function AllUnCheckedValidatorArray(value, target, event, autoValid) {
-        if (autoValid === void 0) { autoValid = true; }
-        return _super.call(this, value, target, event, autoValid) || this;
-    }
-    AllUnCheckedValidatorArray.prototype.valid = function () {
-        var _a;
-        return !(((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return it.checked; }).length > 0);
-    };
-    return AllUnCheckedValidatorArray;
-}(ValidatorArray));
-
 var AllCheckedValidatorArray = /** @class */ (function (_super) {
     __extends(AllCheckedValidatorArray, _super);
     function AllCheckedValidatorArray(value, target, event, autoValid) {
@@ -4114,19 +4815,17 @@ var AllCheckedValidatorArray = /** @class */ (function (_super) {
     return AllCheckedValidatorArray;
 }(ValidatorArray));
 
-var CountEqualsCheckedValidatorArray = /** @class */ (function (_super) {
-    __extends(CountEqualsCheckedValidatorArray, _super);
-    function CountEqualsCheckedValidatorArray(count, value, target, event, autoValid) {
+var AllUnCheckedValidatorArray = /** @class */ (function (_super) {
+    __extends(AllUnCheckedValidatorArray, _super);
+    function AllUnCheckedValidatorArray(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;
+        return _super.call(this, value, target, event, autoValid) || this;
     }
-    CountEqualsCheckedValidatorArray.prototype.valid = function () {
+    AllUnCheckedValidatorArray.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 > 0);
     };
-    return CountEqualsCheckedValidatorArray;
+    return AllUnCheckedValidatorArray;
 }(ValidatorArray));
 
 var CheckedValidator = /** @class */ (function (_super) {
@@ -4157,49 +4856,49 @@ var CountEqualsUnCheckedValidatorArray = /** @class */ (function (_super) {
     return CountEqualsUnCheckedValidatorArray;
 }(ValidatorArray));
 
-var CountGreaterThanEqualsCheckedValidatorArray = /** @class */ (function (_super) {
-    __extends(CountGreaterThanEqualsCheckedValidatorArray, _super);
-    function CountGreaterThanEqualsCheckedValidatorArray(count, value, target, event, autoValid) {
+var CountGreaterThanCheckedValidatorArray = /** @class */ (function (_super) {
+    __extends(CountGreaterThanCheckedValidatorArray, _super);
+    function CountGreaterThanCheckedValidatorArray(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 () {
+    CountGreaterThanCheckedValidatorArray.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 CountGreaterThanCheckedValidatorArray;
 }(ValidatorArray));
 
-var CountGreaterThanCheckedValidatorArray = /** @class */ (function (_super) {
-    __extends(CountGreaterThanCheckedValidatorArray, _super);
-    function CountGreaterThanCheckedValidatorArray(count, 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; }
         var _this = _super.call(this, value, target, event, autoValid) || this;
         _this.count = count;
         return _this;
     }
-    CountGreaterThanCheckedValidatorArray.prototype.valid = function () {
+    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 ((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return it.checked; }).length === this.count;
     };
-    return CountGreaterThanCheckedValidatorArray;
+    return CountEqualsCheckedValidatorArray;
 }(ValidatorArray));
 
-var CountLessThanEqualsCheckedValidatorArray = /** @class */ (function (_super) {
-    __extends(CountLessThanEqualsCheckedValidatorArray, _super);
-    function CountLessThanEqualsCheckedValidatorArray(count, value, target, event, autoValid) {
+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;
     }
-    CountLessThanEqualsCheckedValidatorArray.prototype.valid = function () {
+    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 ((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return !it.checked; }).length > this.count;
     };
-    return CountLessThanEqualsCheckedValidatorArray;
+    return CountGreaterThanUnCheckedValidatorArray;
 }(ValidatorArray));
 
 var CountGreaterThanEqualsUnCheckedValidatorArray = /** @class */ (function (_super) {
@@ -4217,34 +4916,34 @@ var CountGreaterThanEqualsUnCheckedValidatorArray = /** @class */ (function (_su
     return CountGreaterThanEqualsUnCheckedValidatorArray;
 }(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 CountLessThanEqualsUnCheckedValidatorArray = /** @class */ (function (_super) {
-    __extends(CountLessThanEqualsUnCheckedValidatorArray, _super);
-    function CountLessThanEqualsUnCheckedValidatorArray(count, value, target, event, autoValid) {
+var CountLessThanCheckedValidatorArray = /** @class */ (function (_super) {
+    __extends(CountLessThanCheckedValidatorArray, _super);
+    function CountLessThanCheckedValidatorArray(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 () {
+    CountLessThanCheckedValidatorArray.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 CountLessThanCheckedValidatorArray;
 }(ValidatorArray));
 
 var CountLessThanUnCheckedValidatorArray = /** @class */ (function (_super) {
@@ -4269,28 +4968,13 @@ var EmptyValidator = /** @class */ (function (_super) {
         return _super.call(this, value, target, event, autoValid) || this;
     }
     EmptyValidator.prototype.valid = function () {
-        var _a;
+        var _a, _b;
         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 value === undefined || value === null || ((_b = (_a = value) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) <= 0;
     };
     return EmptyValidator;
 }(Validator));
 
-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 ExcludeCheckedValidatorArray = /** @class */ (function (_super) {
     __extends(ExcludeCheckedValidatorArray, _super);
     function ExcludeCheckedValidatorArray(include, allRequired, value, target, event, autoValid) {
@@ -4313,19 +4997,26 @@ var ExcludeCheckedValidatorArray = /** @class */ (function (_super) {
     return ExcludeCheckedValidatorArray;
 }(ValidatorArray));
 
-var CountLessThanCheckedValidatorArray = /** @class */ (function (_super) {
-    __extends(CountLessThanCheckedValidatorArray, _super);
-    function CountLessThanCheckedValidatorArray(count, value, target, event, autoValid) {
+var IncludeCheckedValidatorArray = /** @class */ (function (_super) {
+    __extends(IncludeCheckedValidatorArray, _super);
+    function IncludeCheckedValidatorArray(include, allRequired, value, target, event, autoValid) {
+        if (allRequired === void 0) { allRequired = false; }
         if (autoValid === void 0) { autoValid = true; }
         var _this = _super.call(this, value, target, event, autoValid) || this;
-        _this.count = count;
+        _this.include = include;
+        _this.allRequired = allRequired;
         return _this;
     }
-    CountLessThanCheckedValidatorArray.prototype.valid = function () {
+    IncludeCheckedValidatorArray.prototype.valid = function () {
+        var _this = this;
         var _a;
-        return ((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return it.checked; }).length < this.count;
+        var valus = (_a = this.value) !== null && _a !== void 0 ? _a : [];
+        var checkedValue = valus.filter(function (it) { return it.checked; }).map(function (it) { return it.value; });
+        return checkedValue.length > 0 &&
+            (!(checkedValue.filter(function (it) { return !_this.include.includes(it); }).length > 0)) &&
+            (this.allRequired ? checkedValue.filter(function (it) { return _this.include.includes(it); }).length === this.include.length : true);
     };
-    return CountLessThanCheckedValidatorArray;
+    return IncludeCheckedValidatorArray;
 }(ValidatorArray));
 
 var FormValidator = /** @class */ (function (_super) {
@@ -4346,50 +5037,6 @@ var FormValidator = /** @class */ (function (_super) {
     return FormValidator;
 }(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.regexp = DomRenderProxy.final(regexp);
-        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;
-        }
-    };
-    return NotRegExpTestValidator;
-}(Validator));
-
-var IncludeCheckedValidatorArray = /** @class */ (function (_super) {
-    __extends(IncludeCheckedValidatorArray, _super);
-    function IncludeCheckedValidatorArray(include, allRequired, value, target, event, autoValid) {
-        if (allRequired === void 0) { allRequired = false; }
-        if (autoValid === void 0) { autoValid = true; }
-        var _this = _super.call(this, value, target, event, autoValid) || this;
-        _this.include = include;
-        _this.allRequired = allRequired;
-        return _this;
-    }
-    IncludeCheckedValidatorArray.prototype.valid = function () {
-        var _this = this;
-        var _a;
-        var valus = (_a = this.value) !== null && _a !== void 0 ? _a : [];
-        var checkedValue = valus.filter(function (it) { return it.checked; }).map(function (it) { return it.value; });
-        return checkedValue.length > 0 &&
-            (!(checkedValue.filter(function (it) { return !_this.include.includes(it); }).length > 0)) &&
-            (this.allRequired ? checkedValue.filter(function (it) { return _this.include.includes(it); }).length === this.include.length : true);
-    };
-    return IncludeCheckedValidatorArray;
-}(ValidatorArray));
-
 var MultipleValidator = /** @class */ (function (_super) {
     __extends(MultipleValidator, _super);
     function MultipleValidator(validators, value, target, event, autoValid) {
@@ -4419,17 +5066,20 @@ var MultipleValidator = /** @class */ (function (_super) {
     return MultipleValidator;
 }(Validator));
 
-var PassValidator = /** @class */ (function (_super) {
-    __extends(PassValidator, _super);
-    function PassValidator(value, target, event, autoValid) {
+var CountUnCheckedValidatorArray = /** @class */ (function (_super) {
+    __extends(CountUnCheckedValidatorArray, _super);
+    function CountUnCheckedValidatorArray(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;
     }
-    PassValidator.prototype.valid = function () {
-        return true;
+    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 PassValidator;
-}(Validator));
+    return CountUnCheckedValidatorArray;
+}(ValidatorArray));
 
 var RegExpTestValidator = /** @class */ (function (_super) {
     __extends(RegExpTestValidator, _super);
@@ -4468,6 +5118,28 @@ var RequiredValidator = /** @class */ (function (_super) {
     return RequiredValidator;
 }(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.regexp = DomRenderProxy.final(regexp);
+        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;
+        }
+    };
+    return NotRegExpTestValidator;
+}(Validator));
+
 var NotEmptyValidator = /** @class */ (function (_super) {
     __extends(NotEmptyValidator, _super);
     function NotEmptyValidator(value, target, event, autoValid) {
@@ -4475,10 +5147,10 @@ var NotEmptyValidator = /** @class */ (function (_super) {
         return _super.call(this, value, target, event, autoValid) || this;
     }
     NotEmptyValidator.prototype.valid = function () {
-        var _a;
+        var _a, _b;
         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 value !== undefined && value !== null && ((_b = (_a = value) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) > 0;
     };
     return NotEmptyValidator;
 }(Validator));
@@ -4567,26 +5239,70 @@ var ValueNotEqualsValidator = /** @class */ (function (_super) {
     return ValueNotEqualsValidator;
 }(Validator));
 
-var ClipBoardUtils = /** @class */ (function () {
-    function ClipBoardUtils() {
+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;
     }
-    ClipBoardUtils.readText = function (clipboard) {
-        if (clipboard === void 0) { clipboard = navigator.clipboard; }
-        return clipboard.readText();
+    CountLessThanEqualsUnCheckedValidatorArray.prototype.valid = function () {
+        var _a;
+        return ((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return !it.checked; }).length <= this.count;
     };
-    ClipBoardUtils.read = function (clipboard) {
-        if (clipboard === void 0) { clipboard = navigator.clipboard; }
-        return clipboard.read();
+    return CountLessThanEqualsUnCheckedValidatorArray;
+}(ValidatorArray));
+
+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;
+    }
+    CountLessThanEqualsCheckedValidatorArray.prototype.valid = function () {
+        var _a;
+        return ((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return it.checked; }).length <= this.count;
     };
-    ClipBoardUtils.writeText = function (data, clipboard) {
-        if (clipboard === void 0) { clipboard = navigator.clipboard; }
-        return clipboard.writeText(data);
+    return CountLessThanEqualsCheckedValidatorArray;
+}(ValidatorArray));
+
+var PassValidator = /** @class */ (function (_super) {
+    __extends(PassValidator, _super);
+    function PassValidator(value, target, event, autoValid) {
+        if (autoValid === void 0) { autoValid = true; }
+        return _super.call(this, value, target, event, autoValid) || this;
+    }
+    PassValidator.prototype.valid = function () {
+        return true;
     };
-    ClipBoardUtils.write = function (data, clipboard) {
-        if (clipboard === void 0) { clipboard = navigator.clipboard; }
-        return clipboard.write(data);
+    return PassValidator;
+}(Validator));
+
+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();
+        }
     };
-    return ClipBoardUtils;
+    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 StorageUtils = /** @class */ (function () {
@@ -4598,17 +5314,34 @@ var StorageUtils = /** @class */ (function () {
         }
         window.localStorage.setItem(k, v);
     };
+    StorageUtils.setSessionStorageItem = function (k, v, window) {
+        if (typeof v === 'object') {
+            v = JSON.stringify(v);
+        }
+        window.sessionStorage.setItem(k, v);
+    };
     StorageUtils.getLocalStorageItem = function (k, window) {
         return window.localStorage.getItem(k);
     };
+    StorageUtils.getSessionStorageItem = function (k, window) {
+        return window.sessionStorage.getItem(k);
+    };
     StorageUtils.cutLocalStorageItem = function (k, window) {
         var data = StorageUtils.getLocalStorageItem(k, window);
         StorageUtils.removeLocalStorageItem(k, window);
         return data;
     };
+    StorageUtils.cutSessionStorageItem = function (k, window) {
+        var data = StorageUtils.getSessionStorageItem(k, window);
+        StorageUtils.removeSessionStorageItem(k, window);
+        return data;
+    };
     StorageUtils.removeLocalStorageItem = function (k, window) {
         return window.localStorage.removeItem(k);
     };
+    StorageUtils.removeSessionStorageItem = function (k, window) {
+        return window.sessionStorage.removeItem(k);
+    };
     StorageUtils.getLocalStorageJsonItem = function (k, window) {
         var item = window.localStorage.getItem(k);
         if (item) {
@@ -4623,39 +5356,59 @@ var StorageUtils = /** @class */ (function () {
             return undefined;
         }
     };
+    StorageUtils.getSessionStorageJsonItem = function (k, window) {
+        var item = window.sessionStorage.getItem(k);
+        if (item) {
+            try {
+                return JSON.parse(item);
+            }
+            catch (e) {
+                return undefined;
+            }
+        }
+        else {
+            return undefined;
+        }
+    };
     StorageUtils.cutLocalStorageJsonItem = function (k, window) {
         var item = StorageUtils.getLocalStorageJsonItem(k, window);
         StorageUtils.removeLocalStorageItem(k, window);
         return item;
     };
+    StorageUtils.cutSessionStorageJsonItem = function (k, window) {
+        var item = StorageUtils.getSessionStorageJsonItem(k, window);
+        StorageUtils.removeSessionStorageItem(k, window);
+        return item;
+    };
     StorageUtils.clearLocalStorage = function (window) {
         window.localStorage.clear();
     };
+    StorageUtils.clearSessionStorage = function (window) {
+        window.sessionStorage.clear();
+    };
     return StorageUtils;
 }());
 
-var NodeUtils = /** @class */ (function () {
-    function NodeUtils() {
+var ClipBoardUtils = /** @class */ (function () {
+    function ClipBoardUtils() {
     }
-    // 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();
-        }
+    ClipBoardUtils.readText = function (clipboard) {
+        if (clipboard === void 0) { clipboard = navigator.clipboard; }
+        return clipboard.readText();
     };
-    NodeUtils.appendChild = function (parentNode, childNode) {
-        return parentNode.appendChild(childNode);
+    ClipBoardUtils.read = function (clipboard) {
+        if (clipboard === void 0) { clipboard = navigator.clipboard; }
+        return clipboard.read();
     };
-    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);
+    ClipBoardUtils.writeText = function (data, clipboard) {
+        if (clipboard === void 0) { clipboard = navigator.clipboard; }
+        return clipboard.writeText(data);
     };
-    NodeUtils.addNode = function (targetNode, newNode) {
-        var _a;
-        return (_a = targetNode.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(newNode, targetNode.nextSibling);
+    ClipBoardUtils.write = function (data, clipboard) {
+        if (clipboard === void 0) { clipboard = navigator.clipboard; }
+        return clipboard.write(data);
     };
-    return NodeUtils;
+    return ClipBoardUtils;
 }());
 
 exports.AllCheckedValidatorArray = AllCheckedValidatorArray;
@@ -4685,7 +5438,6 @@ exports.DomRenderProxy = DomRenderProxy;
 exports.DomUtils = DomUtils;
 exports.Dr = Dr;
 exports.DrAppender = DrAppender;
-exports.DrDictionary = DrDictionary;
 exports.DrFor = DrFor;
 exports.DrForOf = DrForOf;
 exports.DrForm = DrForm;
@@ -4697,6 +5449,7 @@ exports.DrRepeat = DrRepeat;
 exports.DrTargetAttr = DrTargetAttr;
 exports.DrTargetElement = DrTargetElement;
 exports.DrThis = DrThis;
+exports.DrThisProperty = DrThisProperty;
 exports.EmptyValidator = EmptyValidator;
 exports.EventManager = EventManager;
 exports.ExcludeCheckedValidatorArray = ExcludeCheckedValidatorArray;