dom-render 1.0.91 → 1.0.92

package/dist/bundle.js

@@ -53,6 +53,145 @@ var __assign = function () {
 
   return __assign.apply(this, arguments);
 };
+function __awaiter(thisArg, _arguments, P, generator) {
+  function adopt(value) {
+    return value instanceof P ? value : new P(function (resolve) {
+      resolve(value);
+    });
+  }
+
+  return new (P || (P = Promise))(function (resolve, reject) {
+    function fulfilled(value) {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+
+    function rejected(value) {
+      try {
+        step(generator["throw"](value));
+      } catch (e) {
+        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: []
+  },
+      f,
+      y,
+      t,
+      g;
+  return g = {
+    next: verb(0),
+    "throw": verb(1),
+    "return": verb(2)
+  }, typeof Symbol === "function" && (g[Symbol.iterator] = function () {
+    return this;
+  }), g;
+
+  function verb(n) {
+    return function (v) {
+      return step([n, v]);
+    };
+  }
+
+  function step(op) {
+    if (f) throw new TypeError("Generator is already executing.");
+
+    while (_) try {
+      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];
+      y = 0;
+    } finally {
+      f = t = 0;
+    }
+
+    if (op[0] & 5) throw op[1];
+    return {
+      value: op[0] ? op[1] : void 0,
+      done: true
+    };
+  }
+}
 function __spreadArray(to, from, pack) {
   if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
     if (ar || !(i in from)) {
@@ -814,6 +953,7 @@ var EventManager = /** @class */ (function () {
     // eslint-disable-next-line no-undef
     EventManager.prototype.addDrEvents = function (obj, eventName, elements, config) {
         var _this = this;
+        // console.log('-------?', config?.router)
         var attr = EventManager.attrPrefix + 'event-' + eventName;
         this.procAttr(elements, attr, function (it, attribute) {
             var script = attribute;
@@ -992,20 +1132,30 @@ var OperatorExecuter = /** @class */ (function () {
     }
     OperatorExecuter.prototype.start = function () {
         var _a, _b, _c, _d, _e, _f;
-        var attrValue = this.elementSource.attr;
-        if ((_a = this.source.operatorAround) === null || _a === void 0 ? void 0 : _a.beforeAttr) {
-            attrValue = (_b = this.source.operatorAround.beforeAttr(attrValue, this)) !== null && _b !== void 0 ? _b : '';
-        }
-        var r = attrValue;
-        if (r && this.startingExecute) {
-            r = ScriptUtils.eval(" ".concat(this.render.bindScript, "; return ").concat(attrValue), Object.assign(this.source.obj, { __render: this.render }));
-        }
-        if ((_c = this.source.operatorAround) === null || _c === void 0 ? void 0 : _c.before) {
-            r = (_d = this.source.operatorAround) === null || _d === void 0 ? void 0 : _d.before(r, this);
-        }
-        var state = this.execute(r);
-        (_f = (_e = this.source.operatorAround) === null || _e === void 0 ? void 0 : _e.after) === null || _f === void 0 ? void 0 : _f.call(_e, r, this);
-        return state;
+        return __awaiter(this, void 0, void 0, function () {
+            var attrValue, r, state;
+            return __generator(this, function (_g) {
+                switch (_g.label) {
+                    case 0:
+                        attrValue = this.elementSource.attr;
+                        if ((_a = this.source.operatorAround) === null || _a === void 0 ? void 0 : _a.beforeAttr) {
+                            attrValue = (_b = this.source.operatorAround.beforeAttr(attrValue, this)) !== null && _b !== void 0 ? _b : '';
+                        }
+                        r = attrValue;
+                        if (r && this.startingExecute) {
+                            r = ScriptUtils.eval(" ".concat(this.render.bindScript, "; return ").concat(attrValue), Object.assign(this.source.obj, { __render: this.render }));
+                        }
+                        if ((_c = this.source.operatorAround) === null || _c === void 0 ? void 0 : _c.before) {
+                            r = (_d = this.source.operatorAround) === null || _d === void 0 ? void 0 : _d.before(r, this);
+                        }
+                        return [4 /*yield*/, this.execute(r)];
+                    case 1:
+                        state = _g.sent();
+                        (_f = (_e = this.source.operatorAround) === null || _e === void 0 ? void 0 : _e.after) === null || _f === void 0 ? void 0 : _f.call(_e, r, this);
+                        return [2 /*return*/, state];
+                }
+            });
+        });
     };
     return OperatorExecuter;
 }());
@@ -1019,42 +1169,34 @@ var DrPre = /** @class */ (function (_super) {
         return _this;
     }
     DrPre.prototype.execute = function (value) {
-        return (value != null) ? exports.ExecuteState.EXECUTE : exports.ExecuteState.NO_EXECUTE;
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                return [2 /*return*/, (value != null) ? exports.ExecuteState.EXECUTE : exports.ExecuteState.NO_EXECUTE];
+            });
+        });
     };
     return DrPre;
 }(OperatorExecuter));
 
-// export type OperatorAround = {
-//     beforeAttr?: (value: string, obj: any) => string,
-//     before?: (data: any, obj: any) => any,
-//     after?: (data: any, obj: any) => void,
-// }
-//
-// export enum ExecuteState {
-//     EXECUTE,
-//     NO_EXECUTE,
-//     STOP
-// }
-//
-// export type AfterCallBack = {
-//     onAttrInitCallBacks: AttrInitCallBack[],
-//     onElementInitCallBacks: ElementInitCallBack[],
-//     onThisComponentSetCallBacks: ComponentSet[]
-// }
 var OperatorExecuterAttrRequire = /** @class */ (function (_super) {
     __extends(OperatorExecuterAttrRequire, _super);
     function OperatorExecuterAttrRequire(rawSet, render, returnContainer, elementSource, source, afterCallBack, startingExecute) {
         if (startingExecute === void 0) { startingExecute = true; }
         return _super.call(this, rawSet, render, returnContainer, elementSource, source, afterCallBack, startingExecute) || this;
     }
-    // executes(): ExecuteState {
-    //      return ExecuteState.EXECUTE;
-    //  }
     OperatorExecuterAttrRequire.prototype.execute = function (data) {
-        if (!this.elementSource.attr) {
-            return exports.ExecuteState.NO_EXECUTE;
-        }
-        return this.executeAttrRequire(data);
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (!this.elementSource.attr) {
+                            return [2 /*return*/, exports.ExecuteState.NO_EXECUTE];
+                        }
+                        return [4 /*yield*/, this.executeAttrRequire(data)];
+                    case 1: return [2 /*return*/, _a.sent()];
+                }
+            });
+        });
     };
     return OperatorExecuterAttrRequire;
 }(OperatorExecuter));
@@ -1065,23 +1207,28 @@ var Dr = /** @class */ (function (_super) {
         return _super.call(this, rawSet, render, returnContainer, elementSource, source, afterCallBack) || this;
     }
     Dr.prototype.executeAttrRequire = function (data) {
-        var _a;
-        var _b, _c;
-        var itRandom = RawSet.drItOtherEncoding(this.elementSource.element);
-        var vars = RawSet.drVarEncoding(this.elementSource.element, (_b = this.elementSource.attrs.drVarOption) !== null && _b !== void 0 ? _b : '');
-        var 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, {
-            __render: Object.freeze(__assign({ fag: newTemp, drStripOption: this.elementSource.attrs.drStripOption }, this.render))
-        }));
-        RawSet.drVarDecoding(newTemp, vars);
-        RawSet.drItOtherDecoding(newTemp, itRandom);
-        var tempalte = this.source.config.window.document.createElement('template');
-        tempalte.innerHTML = newTemp.innerHTML;
-        this.returnContainer.fag.append(tempalte.content);
-        var rr = RawSet.checkPointCreates(this.returnContainer.fag, this.source.obj, this.source.config);
-        (_c = this.elementSource.element.parentNode) === null || _c === void 0 ? void 0 : _c.replaceChild(this.returnContainer.fag, this.elementSource.element);
-        (_a = this.returnContainer.raws).push.apply(_a, rr);
-        return exports.ExecuteState.EXECUTE;
+        var _a, _b;
+        return __awaiter(this, void 0, void 0, function () {
+            var itRandom, vars, newTemp, tempalte, rr;
+            var _c;
+            return __generator(this, function (_d) {
+                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, {
+                    __render: Object.freeze(__assign({ fag: newTemp, drStripOption: this.elementSource.attrs.drStripOption }, this.render))
+                }));
+                RawSet.drVarDecoding(newTemp, vars);
+                RawSet.drItOtherDecoding(newTemp, itRandom);
+                tempalte = this.source.config.window.document.createElement('template');
+                tempalte.innerHTML = newTemp.innerHTML;
+                this.returnContainer.fag.append(tempalte.content);
+                rr = RawSet.checkPointCreates(this.returnContainer.fag, this.source.obj, this.source.config);
+                (_b = this.elementSource.element.parentNode) === null || _b === void 0 ? void 0 : _b.replaceChild(this.returnContainer.fag, this.elementSource.element);
+                (_c = this.returnContainer.raws).push.apply(_c, rr);
+                return [2 /*return*/, exports.ExecuteState.EXECUTE];
+            });
+        });
     };
     return Dr;
 }(OperatorExecuterAttrRequire));
@@ -1095,29 +1242,32 @@ var DrIf = /** @class */ (function (_super) {
         return _this;
     }
     DrIf.prototype.executeAttrRequire = function (attr) {
-        var _a;
-        var _b, _c, _d, _e;
-        var itRandom = RawSet.drItOtherEncoding(this.elementSource.element);
-        var vars = RawSet.drVarEncoding(this.elementSource.element, (_b = this.elementSource.attrs.drVarOption) !== null && _b !== void 0 ? _b : '');
-        var newTemp = this.source.config.window.document.createElement('temp');
-        // Object.entries(this.__render.drAttr).filter(([k,v]) => k !== 'drIf' && v).forEach(([k, v]) => n.setAttribute(this.__render.drAttrsOriginName[k], v)); <-- 이부분은 다른 attr에도 적용을 할지말지 생각해야됨  엘리먼트 존재유무에 따라서 적용을 할지말지 결정해야됨
-        var keepgoing = ScriptUtils.eval("\n                ".concat(this.render.bindScript, "\n                ").concat((_c = this.elementSource.attrs.drBeforeOption) !== null && _c !== void 0 ? _c : '', "\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((_d = this.elementSource.attrs.drAfterOption) !== null && _d !== void 0 ? _d : '', ";\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: 뭐지?? 지워야되는거 아닌가?
-        if (keepgoing === false) {
-            return exports.ExecuteState.STOP;
-        }
-        RawSet.drVarDecoding(newTemp, vars);
-        RawSet.drItOtherDecoding(newTemp, itRandom);
-        // const bypass = (newTemp.innerHTML ?? '').trim().length <= 0;
-        var tempalte = this.source.config.window.document.createElement('template');
-        tempalte.innerHTML = newTemp.innerHTML;
-        this.returnContainer.fag.append(tempalte.content);
-        var rr = RawSet.checkPointCreates(this.returnContainer.fag, this.source.obj, this.source.config);
-        (_e = this.elementSource.element.parentNode) === null || _e === void 0 ? void 0 : _e.replaceChild(this.returnContainer.fag, this.elementSource.element);
-        (_a = this.returnContainer.raws).push.apply(_a, rr);
-        return exports.ExecuteState.EXECUTE;
+        var _a, _b, _c, _d;
+        return __awaiter(this, void 0, void 0, function () {
+            var itRandom, vars, newTemp, keepgoing, tempalte, rr;
+            var _e;
+            return __generator(this, function (_f) {
+                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, {
+                    __render: Object.freeze(__assign({ fag: newTemp, drAttr: this.elementSource.attrs, drAttrsOriginName: RawSet.drAttrsOriginName, drStripOption: this.elementSource.attrs.drStripOption }, this.render))
+                }));
+                // TODO: 뭐지?? 지워야되는거 아닌가?
+                if (keepgoing === false) {
+                    return [2 /*return*/, exports.ExecuteState.STOP];
+                }
+                RawSet.drVarDecoding(newTemp, vars);
+                RawSet.drItOtherDecoding(newTemp, itRandom);
+                tempalte = this.source.config.window.document.createElement('template');
+                tempalte.innerHTML = newTemp.innerHTML;
+                this.returnContainer.fag.append(tempalte.content);
+                rr = RawSet.checkPointCreates(this.returnContainer.fag, this.source.obj, this.source.config);
+                (_d = this.elementSource.element.parentNode) === null || _d === void 0 ? void 0 : _d.replaceChild(this.returnContainer.fag, this.elementSource.element);
+                (_e = this.returnContainer.raws).push.apply(_e, rr);
+                return [2 /*return*/, exports.ExecuteState.EXECUTE];
+            });
+        });
     };
     return DrIf;
 }(OperatorExecuterAttrRequire));
@@ -1138,30 +1288,44 @@ var DrThis = /** @class */ (function (_super) {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     DrThis.prototype.executeAttrRequire = function (attr) {
-        var _a;
-        var _b, _c, _d, _e, _f;
-        if (attr && this.elementSource.attrs.drThis) {
-            if (attr instanceof ComponentSet) {
-                if (this.rawSet.data) {
-                    var destroyOptions = (_c = (_b = this.elementSource.attrs.drDestroyOption) === null || _b === void 0 ? void 0 : _b.split(',')) !== null && _c !== void 0 ? _c : [];
-                    RawSet.destroy(this.rawSet.data.obj, [], this.source.config, destroyOptions);
+        var _a, _b, _c, _d, _e;
+        return __awaiter(this, void 0, void 0, function () {
+            var destroyOptions, componentBody, _f, _g, rr;
+            var _h;
+            return __generator(this, function (_j) {
+                switch (_j.label) {
+                    case 0:
+                        if (!(attr && this.elementSource.attrs.drThis)) return [3 /*break*/, 5];
+                        if (!(attr instanceof ComponentSet)) return [3 /*break*/, 2];
+                        if (this.rawSet.data) {
+                            destroyOptions = (_b = (_a = this.elementSource.attrs.drDestroyOption) === null || _a === void 0 ? void 0 : _a.split(',')) !== null && _b !== void 0 ? _b : [];
+                            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)];
+                    case 1:
+                        componentBody = _j.sent();
+                        this.returnContainer.fag.append(componentBody);
+                        this.afterCallBack.onThisComponentSetCallBacks.push(attr);
+                        return [3 /*break*/, 4];
+                    case 2:
+                        _g = (_f = this.returnContainer.fag).append;
+                        return [4 /*yield*/, RawSet.drThisCreate(this.rawSet, this.elementSource.element, this.elementSource.attrs.drThis, (_d = this.elementSource.attrs.drVarOption) !== null && _d !== void 0 ? _d : '', this.elementSource.attrs.drStripOption, this.source.obj, this.source.config)];
+                    case 3:
+                        _g.apply(_f, [_j.sent()]);
+                        _j.label = 4;
+                    case 4:
+                        rr = RawSet.checkPointCreates(this.returnContainer.fag, this.source.obj, this.source.config);
+                        (_e = this.elementSource.element.parentNode) === null || _e === void 0 ? void 0 : _e.replaceChild(this.returnContainer.fag, this.elementSource.element);
+                        (_h = this.returnContainer.raws).push.apply(_h, rr);
+                        return [3 /*break*/, 6];
+                    case 5:
+                        this.elementSource.element.remove();
+                        _j.label = 6;
+                    case 6: return [2 /*return*/, exports.ExecuteState.EXECUTE];
                 }
-                this.rawSet.data = attr;
-                var componentBody = RawSet.drThisCreate(this.rawSet, this.elementSource.element, "".concat(this.elementSource.attrs.drThis).concat(attr.config.objPath ? ('.' + attr.config.objPath) : ''), (_d = this.elementSource.attrs.drVarOption) !== null && _d !== void 0 ? _d : '', this.elementSource.attrs.drStripOption, this.source.obj, this.source.config, attr);
-                this.returnContainer.fag.append(componentBody);
-                this.afterCallBack.onThisComponentSetCallBacks.push(attr);
-            }
-            else {
-                this.returnContainer.fag.append(RawSet.drThisCreate(this.rawSet, this.elementSource.element, this.elementSource.attrs.drThis, (_e = this.elementSource.attrs.drVarOption) !== null && _e !== void 0 ? _e : '', this.elementSource.attrs.drStripOption, this.source.obj, this.source.config));
-            }
-            var rr = RawSet.checkPointCreates(this.returnContainer.fag, this.source.obj, this.source.config);
-            (_f = this.elementSource.element.parentNode) === null || _f === void 0 ? void 0 : _f.replaceChild(this.returnContainer.fag, this.elementSource.element);
-            (_a = this.returnContainer.raws).push.apply(_a, rr);
-        }
-        else {
-            this.elementSource.element.remove();
-        }
-        return exports.ExecuteState.EXECUTE;
+            });
+        });
     };
     return DrThis;
 }(OperatorExecuterAttrRequire));
@@ -1501,56 +1665,61 @@ var DrForm = /** @class */ (function (_super) {
     }
     DrForm.prototype.executeAttrRequire = function (attr) {
         var _a;
-        var _this = this;
-        var _b;
-        RawSet.drFormOtherMoveAttr(this.elementSource.element, 'name', 'temp-name', this.source.config);
-        var data = ScriptUtils.evalReturn("".concat(attr), this.source.obj);
-        var childs = Array.from(this.elementSource.element.querySelectorAll('[name]'));
-        var fromName = ScriptUtils.evalReturn((_b = this.elementSource.element.getAttribute("".concat(RawSet.DR_FORM_NAME, ":name"))) !== null && _b !== void 0 ? _b : '', this.source.obj);
-        var thisName = fromName !== null && fromName !== void 0 ? fromName : this.elementSource.element.getAttribute('name');
-        // // 자기자신이 Input 대상일때
-        if (childs.length <= 0 && thisName) {
-            childs.push(this.elementSource.element);
-        }
-        else {
-            if (data instanceof Validator) {
-                data.setTarget(this.elementSource.element);
-            }
-        }
-        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 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');
-            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, {
-                        __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);
-                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 : '', ";"));
-                    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 : '', ";"));
-                    data_1.setTarget(it);
-                    data_1.value = it.value;
+        return __awaiter(this, void 0, void 0, function () {
+            var data, childs, fromName, thisName;
+            var _b;
+            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);
+                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);
+                thisName = fromName !== null && fromName !== void 0 ? fromName : this.elementSource.element.getAttribute('name');
+                // // 자기자신이 Input 대상일때
+                if (childs.length <= 0 && thisName) {
+                    childs.push(this.elementSource.element);
                 }
                 else {
-                    it.setAttribute(attrEventName, "".concat(varpath, " = $target.value;"));
+                    if (data instanceof Validator) {
+                        data.setTarget(this.elementSource.element);
+                    }
                 }
-            }
+                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 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');
+                    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, {
+                                __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);
+                        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 : '', ";"));
+                            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 : '', ";"));
+                            data_1.setTarget(it);
+                            data_1.value = it.value;
+                        }
+                        else {
+                            it.setAttribute(attrEventName, "".concat(varpath, " = $target.value;"));
+                        }
+                    }
+                });
+                RawSet.drFormOtherMoveAttr(this.elementSource.element, 'temp-name', 'name', this.source.config);
+                (_b = this.returnContainer.raws).push.apply(_b, RawSet.checkPointCreates(this.elementSource.element, this.source.obj, this.source.config));
+                return [2 /*return*/, exports.ExecuteState.EXECUTE];
+            });
         });
-        RawSet.drFormOtherMoveAttr(this.elementSource.element, 'temp-name', 'name', this.source.config);
-        (_a = this.returnContainer.raws).push.apply(_a, RawSet.checkPointCreates(this.elementSource.element, this.source.obj, this.source.config));
-        return exports.ExecuteState.EXECUTE;
     };
     return DrForm;
 }(OperatorExecuterAttrRequire));
@@ -1561,19 +1730,24 @@ var DrInnerText = /** @class */ (function (_super) {
         return _super.call(this, rawSet, render, returnContainer, elementSource, source, afterCallBack, false) || this;
     }
     DrInnerText.prototype.executeAttrRequire = function (attr) {
-        var _a;
-        var _b, _c, _d;
-        var newTemp = this.source.config.window.document.createElement('temp');
-        ScriptUtils.eval(" \n                        ".concat(this.render.bindScript, "\n                        const n = $element.cloneNode(true);  \n                        ").concat((_b = this.elementSource.attrs.drBeforeOption) !== null && _b !== void 0 ? _b : '', "\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((_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, fag: newTemp }, this.render))
-        }));
-        var tempalte = this.source.config.window.document.createElement('template');
-        tempalte.innerHTML = newTemp.innerHTML;
-        this.returnContainer.fag.append(tempalte.content);
-        var rr = RawSet.checkPointCreates(this.returnContainer.fag, this.source.obj, this.source.config);
-        (_d = this.elementSource.element.parentNode) === null || _d === void 0 ? void 0 : _d.replaceChild(this.returnContainer.fag, this.elementSource.element);
-        (_a = this.returnContainer.raws).push.apply(_a, rr);
-        return exports.ExecuteState.EXECUTE;
+        var _a, _b, _c;
+        return __awaiter(this, void 0, void 0, function () {
+            var newTemp, tempalte, rr;
+            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, {
+                    __render: Object.freeze(__assign({ drStripOption: this.elementSource.attrs.drStripOption, fag: newTemp }, this.render))
+                }));
+                tempalte = this.source.config.window.document.createElement('template');
+                tempalte.innerHTML = newTemp.innerHTML;
+                this.returnContainer.fag.append(tempalte.content);
+                rr = RawSet.checkPointCreates(this.returnContainer.fag, this.source.obj, this.source.config);
+                (_c = this.elementSource.element.parentNode) === null || _c === void 0 ? void 0 : _c.replaceChild(this.returnContainer.fag, this.elementSource.element);
+                (_d = this.returnContainer.raws).push.apply(_d, rr);
+                return [2 /*return*/, exports.ExecuteState.EXECUTE];
+            });
+        });
     };
     return DrInnerText;
 }(OperatorExecuterAttrRequire));
@@ -1584,21 +1758,26 @@ var DrInnerHTML = /** @class */ (function (_super) {
         return _super.call(this, rawSet, render, returnContainer, elementSource, source, afterCallBack, false) || this;
     }
     DrInnerHTML.prototype.executeAttrRequire = function (attr) {
-        var _a;
-        var _b, _c, _d;
-        var newTemp = this.source.config.window.document.createElement('temp');
-        ScriptUtils.eval("\n                        ".concat(this.render.bindScript, "\n                        const n = $element.cloneNode(true);\n                        ").concat((_b = this.elementSource.attrs.drBeforeOption) !== null && _b !== void 0 ? _b : '', "\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((_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, fag: newTemp }, this.render
-            // eslint-disable-next-line no-use-before-define
-            ))
-        }));
-        var tempalte = this.source.config.window.document.createElement('template');
-        tempalte.innerHTML = newTemp.innerHTML;
-        this.returnContainer.fag.append(tempalte.content);
-        var rr = RawSet.checkPointCreates(this.returnContainer.fag, this.source.obj, this.source.config);
-        (_d = this.elementSource.element.parentNode) === null || _d === void 0 ? void 0 : _d.replaceChild(this.returnContainer.fag, this.elementSource.element);
-        (_a = this.returnContainer.raws).push.apply(_a, rr);
-        return exports.ExecuteState.EXECUTE;
+        var _a, _b, _c;
+        return __awaiter(this, void 0, void 0, function () {
+            var newTemp, tempalte, rr;
+            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, {
+                    __render: Object.freeze(__assign({ drStripOption: this.elementSource.attrs.drStripOption, fag: newTemp }, this.render
+                    // eslint-disable-next-line no-use-before-define
+                    ))
+                }));
+                tempalte = this.source.config.window.document.createElement('template');
+                tempalte.innerHTML = newTemp.innerHTML;
+                this.returnContainer.fag.append(tempalte.content);
+                rr = RawSet.checkPointCreates(this.returnContainer.fag, this.source.obj, this.source.config);
+                (_c = this.elementSource.element.parentNode) === null || _c === void 0 ? void 0 : _c.replaceChild(this.returnContainer.fag, this.elementSource.element);
+                (_d = this.returnContainer.raws).push.apply(_d, rr);
+                return [2 /*return*/, exports.ExecuteState.EXECUTE];
+            });
+        });
     };
     return DrInnerHTML;
 }(OperatorExecuterAttrRequire));
@@ -1612,23 +1791,28 @@ var DrFor = /** @class */ (function (_super) {
         return _this;
     }
     DrFor.prototype.executeAttrRequire = function (attr) {
-        var _a;
-        var _b, _c, _d, _e;
-        var itRandom = RawSet.drItOtherEncoding(this.elementSource.element);
-        var vars = RawSet.drVarEncoding(this.elementSource.element, (_b = this.elementSource.attrs.drVarOption) !== null && _b !== void 0 ? _b : '');
-        var newTemp = this.source.config.window.document.createElement('temp');
-        ScriptUtils.eval("\n                    ".concat(this.render.bindScript, "\n                    ").concat((_c = this.elementSource.attrs.drBeforeOption) !== null && _c !== void 0 ? _c : '', "\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((_d = this.elementSource.attrs.drAfterOption) !== null && _d !== void 0 ? _d : '', "\n                    "), Object.assign(this.source.obj, {
-            __render: Object.freeze(__assign({ fag: newTemp, drStripOption: this.elementSource.attrs.drStripOption }, this.render))
-        }));
-        RawSet.drVarDecoding(newTemp, vars);
-        RawSet.drItOtherDecoding(newTemp, itRandom);
-        var tempalte = this.source.config.window.document.createElement('template');
-        tempalte.innerHTML = newTemp.innerHTML;
-        this.returnContainer.fag.append(tempalte.content);
-        var rr = RawSet.checkPointCreates(this.returnContainer.fag, this.source.obj, this.source.config);
-        (_e = this.elementSource.element.parentNode) === null || _e === void 0 ? void 0 : _e.replaceChild(this.returnContainer.fag, this.elementSource.element);
-        (_a = this.returnContainer.raws).push.apply(_a, rr);
-        return exports.ExecuteState.EXECUTE;
+        var _a, _b, _c, _d;
+        return __awaiter(this, void 0, void 0, function () {
+            var itRandom, vars, newTemp, tempalte, rr;
+            var _e;
+            return __generator(this, function (_f) {
+                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, {
+                    __render: Object.freeze(__assign({ fag: newTemp, drStripOption: this.elementSource.attrs.drStripOption }, this.render))
+                }));
+                RawSet.drVarDecoding(newTemp, vars);
+                RawSet.drItOtherDecoding(newTemp, itRandom);
+                tempalte = this.source.config.window.document.createElement('template');
+                tempalte.innerHTML = newTemp.innerHTML;
+                this.returnContainer.fag.append(tempalte.content);
+                rr = RawSet.checkPointCreates(this.returnContainer.fag, this.source.obj, this.source.config);
+                (_d = this.elementSource.element.parentNode) === null || _d === void 0 ? void 0 : _d.replaceChild(this.returnContainer.fag, this.elementSource.element);
+                (_e = this.returnContainer.raws).push.apply(_e, rr);
+                return [2 /*return*/, exports.ExecuteState.EXECUTE];
+            });
+        });
     };
     return DrFor;
 }(OperatorExecuterAttrRequire));
@@ -1642,26 +1826,31 @@ var DrForOf = /** @class */ (function (_super) {
         return _this;
     }
     DrForOf.prototype.executeAttrRequire = function (attr) {
-        var _a;
-        var _b, _c, _d, _e;
-        var itRandom = RawSet.drItOtherEncoding(this.elementSource.element);
-        var vars = RawSet.drVarEncoding(this.elementSource.element, (_b = this.elementSource.attrs.drVarOption) !== null && _b !== void 0 ? _b : '');
-        var newTemp = this.source.config.window.document.createElement('temp');
-        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 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((_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
-            // eslint-disable-next-line no-use-before-define
-            ))
-        }));
-        RawSet.drVarDecoding(newTemp, vars);
-        RawSet.drItOtherDecoding(newTemp, itRandom);
-        var tempalte = this.source.config.window.document.createElement('template');
-        tempalte.innerHTML = newTemp.innerHTML;
-        this.returnContainer.fag.append(tempalte.content);
-        var rr = RawSet.checkPointCreates(this.returnContainer.fag, this.source.obj, this.source.config);
-        (_e = this.elementSource.element.parentNode) === null || _e === void 0 ? void 0 : _e.replaceChild(this.returnContainer.fag, this.elementSource.element);
-        // const rrr = rr.flatMap(it => it.render(obj, config));// .flat();
-        (_a = this.returnContainer.raws).push.apply(_a, rr);
-        return exports.ExecuteState.EXECUTE;
+        var _a, _b, _c, _d;
+        return __awaiter(this, void 0, void 0, function () {
+            var itRandom, vars, newTemp, tempalte, rr;
+            var _e;
+            return __generator(this, function (_f) {
+                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, {
+                    __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
+                    ))
+                }));
+                RawSet.drVarDecoding(newTemp, vars);
+                RawSet.drItOtherDecoding(newTemp, itRandom);
+                tempalte = this.source.config.window.document.createElement('template');
+                tempalte.innerHTML = newTemp.innerHTML;
+                this.returnContainer.fag.append(tempalte.content);
+                rr = RawSet.checkPointCreates(this.returnContainer.fag, this.source.obj, this.source.config);
+                (_d = this.elementSource.element.parentNode) === null || _d === void 0 ? void 0 : _d.replaceChild(this.returnContainer.fag, this.elementSource.element);
+                // const rrr = rr.flatMap(it => it.render(obj, config));// .flat();
+                (_e = this.returnContainer.raws).push.apply(_e, rr);
+                return [2 /*return*/, exports.ExecuteState.EXECUTE];
+            });
+        });
     };
     return DrForOf;
 }(OperatorExecuterAttrRequire));
@@ -1675,27 +1864,31 @@ var DrAppender = /** @class */ (function (_super) {
         return _this;
     }
     DrAppender.prototype.executeAttrRequire = function (attr) {
-        var _a;
-        var _b, _c, _d, _e;
-        console.log('appender-->', attr);
-        var itRandom = RawSet.drItOtherEncoding(this.elementSource.element);
-        var vars = RawSet.drVarEncoding(this.elementSource.element, (_b = this.elementSource.attrs.drVarOption) !== null && _b !== void 0 ? _b : '');
-        var newTemp = this.source.config.window.document.createElement('temp');
-        ScriptUtils.eval("\n                    try{\n                    ".concat(this.render.bindScript, "\n                    ").concat((_c = this.elementSource.attrs.drBeforeOption) !== null && _c !== void 0 ? _c : '', "\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((_d = this.elementSource.attrs.drAfterOption) !== null && _d !== void 0 ? _d : '', "\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
-            ))
-        }));
-        RawSet.drVarDecoding(newTemp, vars);
-        RawSet.drItOtherDecoding(newTemp, itRandom);
-        var tempalte = this.source.config.window.document.createElement('template');
-        tempalte.innerHTML = newTemp.innerHTML;
-        this.returnContainer.fag.append(tempalte.content);
-        var rr = RawSet.checkPointCreates(this.returnContainer.fag, this.source.obj, this.source.config);
-        (_e = this.elementSource.element.parentNode) === null || _e === void 0 ? void 0 : _e.replaceChild(this.returnContainer.fag, this.elementSource.element);
-        // const rrr = rr.flatMap(it => it.render(obj, config));// .flat();
-        (_a = this.returnContainer.raws).push.apply(_a, rr);
-        return exports.ExecuteState.EXECUTE;
+        var _a, _b, _c, _d;
+        return __awaiter(this, void 0, void 0, function () {
+            var itRandom, vars, newTemp, tempalte, rr;
+            var _e;
+            return __generator(this, function (_f) {
+                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, {
+                    __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
+                    ))
+                }));
+                RawSet.drVarDecoding(newTemp, vars);
+                RawSet.drItOtherDecoding(newTemp, itRandom);
+                tempalte = this.source.config.window.document.createElement('template');
+                tempalte.innerHTML = newTemp.innerHTML;
+                this.returnContainer.fag.append(tempalte.content);
+                rr = RawSet.checkPointCreates(this.returnContainer.fag, this.source.obj, this.source.config);
+                (_d = this.elementSource.element.parentNode) === null || _d === void 0 ? void 0 : _d.replaceChild(this.returnContainer.fag, this.elementSource.element);
+                // const rrr = rr.flatMap(it => it.render(obj, config));// .flat();
+                (_e = this.returnContainer.raws).push.apply(_e, rr);
+                return [2 /*return*/, exports.ExecuteState.EXECUTE];
+            });
+        });
     };
     return DrAppender;
 }(OperatorExecuterAttrRequire));
@@ -1709,23 +1902,28 @@ var DrRepeat = /** @class */ (function (_super) {
         return _this;
     }
     DrRepeat.prototype.executeAttrRequire = function (attr) {
-        var _a;
-        var _b, _c, _d, _e;
-        var itRandom = RawSet.drItOtherEncoding(this.elementSource.element);
-        var vars = RawSet.drVarEncoding(this.elementSource.element, (_b = this.elementSource.attrs.drVarOption) !== null && _b !== void 0 ? _b : '');
-        var newTemp = this.source.config.window.document.createElement('temp');
-        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 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((_d = this.elementSource.attrs.drAfterOption) !== null && _d !== void 0 ? _d : '', "\n                    "), Object.assign(this.source.obj, {
-            __render: Object.freeze(__assign({ fag: newTemp, drStripOption: this.elementSource.attrs.drStripOption }, this.render))
-        }));
-        RawSet.drVarDecoding(newTemp, vars);
-        RawSet.drItOtherDecoding(newTemp, itRandom);
-        var tempalte = this.source.config.window.document.createElement('template');
-        tempalte.innerHTML = newTemp.innerHTML;
-        this.returnContainer.fag.append(tempalte.content);
-        var rr = RawSet.checkPointCreates(this.returnContainer.fag, this.source.obj, this.source.config);
-        (_e = this.elementSource.element.parentNode) === null || _e === void 0 ? void 0 : _e.replaceChild(this.returnContainer.fag, this.elementSource.element);
-        (_a = this.returnContainer.raws).push.apply(_a, rr);
-        return exports.ExecuteState.EXECUTE;
+        var _a, _b, _c, _d;
+        return __awaiter(this, void 0, void 0, function () {
+            var itRandom, vars, newTemp, tempalte, rr;
+            var _e;
+            return __generator(this, function (_f) {
+                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, {
+                    __render: Object.freeze(__assign({ fag: newTemp, drStripOption: this.elementSource.attrs.drStripOption }, this.render))
+                }));
+                RawSet.drVarDecoding(newTemp, vars);
+                RawSet.drItOtherDecoding(newTemp, itRandom);
+                tempalte = this.source.config.window.document.createElement('template');
+                tempalte.innerHTML = newTemp.innerHTML;
+                this.returnContainer.fag.append(tempalte.content);
+                rr = RawSet.checkPointCreates(this.returnContainer.fag, this.source.obj, this.source.config);
+                (_d = this.elementSource.element.parentNode) === null || _d === void 0 ? void 0 : _d.replaceChild(this.returnContainer.fag, this.elementSource.element);
+                (_e = this.returnContainer.raws).push.apply(_e, rr);
+                return [2 /*return*/, exports.ExecuteState.EXECUTE];
+            });
+        });
     };
     return DrRepeat;
 }(OperatorExecuterAttrRequire));
@@ -1739,42 +1937,50 @@ var DrTargetElement = /** @class */ (function (_super) {
         return _this;
     }
     DrTargetElement.prototype.execute = function () {
-        var _a;
-        var _this = this;
-        var _b, _c, _d, _e;
-        var targetElement = (_c = (_b = this.source.config) === null || _b === void 0 ? void 0 : _b.targetElements) === null || _c === void 0 ? void 0 : _c.find(function (it) { return it.name.toLowerCase() === _this.elementSource.element.tagName.toLowerCase(); });
-        if (targetElement) {
-            var documentFragment = targetElement.callBack(this.elementSource.element, this.source.obj, this.rawSet, this.elementSource.attrs, this.source.config);
-            if (documentFragment) {
-                var detectAction_1 = this.elementSource.element.getAttribute(RawSet.DR_DETECT_NAME);
-                var render_1 = documentFragment.render;
-                this.rawSet.fragment = documentFragment;
-                this.rawSet.data = render_1.component;
-                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, " ");
-                            ScriptUtils.eval(script, Object.assign(_this.source.obj, {
-                                __render: render_1
-                            }));
+        var _a, _b, _c, _d;
+        return __awaiter(this, void 0, void 0, function () {
+            var targetElement, documentFragment, detectAction_1, render_1, rr;
+            var _e;
+            var _this = this;
+            return __generator(this, function (_f) {
+                switch (_f.label) {
+                    case 0:
+                        targetElement = (_b = (_a = this.source.config) === null || _a === void 0 ? void 0 : _a.targetElements) === null || _b === void 0 ? void 0 : _b.find(function (it) { return it.name.toLowerCase() === _this.elementSource.element.tagName.toLowerCase(); });
+                        if (!targetElement) return [3 /*break*/, 2];
+                        return [4 /*yield*/, targetElement.callBack(this.elementSource.element, this.source.obj, this.rawSet, this.elementSource.attrs, this.source.config)];
+                    case 1:
+                        documentFragment = _f.sent();
+                        if (documentFragment) {
+                            detectAction_1 = this.elementSource.element.getAttribute(RawSet.DR_DETECT_NAME);
+                            render_1 = documentFragment.render;
+                            this.rawSet.fragment = documentFragment;
+                            this.rawSet.data = render_1.component;
+                            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, " ");
+                                        ScriptUtils.eval(script, Object.assign(_this.source.obj, {
+                                            __render: render_1
+                                        }));
+                                    }
+                                };
+                            }
+                            rr = RawSet.checkPointCreates(documentFragment, this.source.obj, this.source.config);
+                            (_c = this.elementSource.element.parentNode) === null || _c === void 0 ? void 0 : _c.replaceChild(documentFragment, this.elementSource.element);
+                            (_e = this.returnContainer.raws).push.apply(_e, rr);
+                            this.afterCallBack.onElementInitCallBacks.push({
+                                name: targetElement.name.toLowerCase(),
+                                obj: this.source.obj,
+                                targetElement: targetElement,
+                                creatorMetaData: targetElement.__creatorMetaData
+                            });
+                            (_d = targetElement === null || targetElement === void 0 ? void 0 : targetElement.complete) === null || _d === void 0 ? void 0 : _d.call(targetElement, this.elementSource.element, this.source.obj, this.rawSet);
                         }
-                    };
+                        return [2 /*return*/, exports.ExecuteState.EXECUTE];
+                    case 2: return [2 /*return*/, exports.ExecuteState.NO_EXECUTE];
                 }
-                // fag.append(documentFragment)
-                var rr = RawSet.checkPointCreates(documentFragment, this.source.obj, this.source.config);
-                (_d = this.elementSource.element.parentNode) === null || _d === void 0 ? void 0 : _d.replaceChild(documentFragment, this.elementSource.element);
-                (_a = this.returnContainer.raws).push.apply(_a, rr);
-                this.afterCallBack.onElementInitCallBacks.push({
-                    name: targetElement.name.toLowerCase(),
-                    obj: this.source.obj,
-                    targetElement: targetElement,
-                    creatorMetaData: targetElement.__creatorMetaData
-                });
-                (_e = targetElement === null || targetElement === void 0 ? void 0 : targetElement.complete) === null || _e === void 0 ? void 0 : _e.call(targetElement, this.elementSource.element, this.source.obj, this.rawSet);
-            }
-            return exports.ExecuteState.EXECUTE;
-        }
-        return exports.ExecuteState.NO_EXECUTE;
+            });
+        });
     };
     return DrTargetElement;
 }(OperatorExecuter));
@@ -1788,30 +1994,35 @@ var DrTargetAttr = /** @class */ (function (_super) {
         return _this;
     }
     DrTargetAttr.prototype.execute = function () {
-        var _a;
-        var _b, _c, _d, _e;
-        var attributeNames = this.elementSource.element.getAttributeNames();
-        var targetAttr = (_c = (_b = this.source.config) === null || _b === void 0 ? void 0 : _b.targetAttrs) === null || _c === void 0 ? void 0 : _c.find(function (it) { return attributeNames.includes(it.name); });
-        if (targetAttr) {
-            var attrName = targetAttr.name;
-            var attrValue = this.rawSet.getAttributeAndDelete(this.elementSource.element, attrName);
-            if (attrValue && attrName && (!this.elementSource.attrs.drForOf && !this.elementSource.attrs.drFor && !this.elementSource.attrs.drRepeat)) {
-                var documentFragment = targetAttr.callBack(this.elementSource.element, attrValue, this.source.obj, this.rawSet);
-                if (documentFragment) {
-                    var rr = RawSet.checkPointCreates(documentFragment, this.source.obj, this.source.config);
-                    (_d = this.elementSource.element.parentNode) === null || _d === void 0 ? void 0 : _d.replaceChild(documentFragment, this.elementSource.element);
-                    (_a = this.returnContainer.raws).push.apply(_a, rr);
-                    this.afterCallBack.onAttrInitCallBacks.push({
-                        attrName: attrName,
-                        attrValue: attrValue,
-                        obj: this.source.obj
-                    });
-                    (_e = targetAttr === null || targetAttr === void 0 ? void 0 : targetAttr.complete) === null || _e === void 0 ? void 0 : _e.call(targetAttr, this.elementSource.element, attrValue, this.source.obj, this.rawSet);
+        var _a, _b, _c, _d;
+        return __awaiter(this, void 0, void 0, function () {
+            var attributeNames, targetAttr, attrName, attrValue, documentFragment, rr;
+            var _e;
+            return __generator(this, function (_f) {
+                attributeNames = this.elementSource.element.getAttributeNames();
+                targetAttr = (_b = (_a = this.source.config) === null || _a === void 0 ? void 0 : _a.targetAttrs) === null || _b === void 0 ? void 0 : _b.find(function (it) { return attributeNames.includes(it.name); });
+                if (targetAttr) {
+                    attrName = targetAttr.name;
+                    attrValue = this.rawSet.getAttributeAndDelete(this.elementSource.element, attrName);
+                    if (attrValue && attrName && (!this.elementSource.attrs.drForOf && !this.elementSource.attrs.drFor && !this.elementSource.attrs.drRepeat)) {
+                        documentFragment = targetAttr.callBack(this.elementSource.element, attrValue, this.source.obj, this.rawSet);
+                        if (documentFragment) {
+                            rr = RawSet.checkPointCreates(documentFragment, this.source.obj, this.source.config);
+                            (_c = this.elementSource.element.parentNode) === null || _c === void 0 ? void 0 : _c.replaceChild(documentFragment, this.elementSource.element);
+                            (_e = this.returnContainer.raws).push.apply(_e, rr);
+                            this.afterCallBack.onAttrInitCallBacks.push({
+                                attrName: attrName,
+                                attrValue: attrValue,
+                                obj: this.source.obj
+                            });
+                            (_d = targetAttr === null || targetAttr === void 0 ? void 0 : targetAttr.complete) === null || _d === void 0 ? void 0 : _d.call(targetAttr, this.elementSource.element, attrValue, this.source.obj, this.rawSet);
+                        }
+                    }
+                    return [2 /*return*/, exports.ExecuteState.EXECUTE];
                 }
-            }
-            return exports.ExecuteState.EXECUTE;
-        }
-        return exports.ExecuteState.NO_EXECUTE;
+                return [2 /*return*/, exports.ExecuteState.NO_EXECUTE];
+            });
+        });
     };
     return DrTargetAttr;
 }(OperatorExecuter));
@@ -1896,167 +2107,185 @@ var RawSet = /** @class */ (function () {
     };
     // 중요 render 처리 부분
     RawSet.prototype.render = function (obj, config) {
-        var _this = this;
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
-        var genNode = config.window.document.importNode(this.fragment, true);
-        var raws = [];
-        var onAttrInitCallBacks = [];
-        var onElementInitCallBacks = [];
-        var onThisComponentSetCallBacks = [];
-        var drAttrs = [];
-        for (var _i = 0, _y = Array.from(genNode.childNodes.values()); _i < _y.length; _i++) {
-            var cNode = _y[_i];
-            var attribute = {};
-            if (cNode.nodeType === Node.ELEMENT_NODE) {
-                attribute = DomUtils.getAttributeToObject(cNode);
-            }
-            var __render = Object.freeze({
-                rawset: this,
-                scripts: EventManager.setBindProperty(config === null || config === void 0 ? void 0 : config.scripts, obj),
-                router: config === null || config === void 0 ? void 0 : config.router,
-                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            ")
-                // eslint-disable-next-line no-use-before-define
-            });
-            var fag = config.window.document.createDocumentFragment();
-            if (cNode.nodeType === Node.TEXT_NODE && cNode.textContent) {
-                // console.log('text-->', this, obj, config)
-                // console.log('text-->', Array.from(this.fragment.childNodes))
-                var textContent = cNode.textContent;
-                var runText = RawSet.exporesionGrouops(textContent)[0][1];
-                // console.log('--->', RawSet.exporesionGrouops(textContent), textContent,runText, runText[0][1])
-                var newNode = void 0;
-                if (textContent === null || textContent === void 0 ? void 0 : textContent.startsWith('#')) {
-                    var r = ScriptUtils.eval("".concat(__render.bindScript, " return ").concat(runText), Object.assign(obj, { __render: __render }));
-                    var template = config.window.document.createElement('template');
-                    template.innerHTML = r;
-                    newNode = template.content;
-                }
-                else {
-                    var r = ScriptUtils.eval("".concat(__render.bindScript, "  return ").concat(runText), Object.assign(obj, { __render: __render }));
-                    newNode = config.window.document.createTextNode(r);
-                }
-                (_a = cNode.parentNode) === null || _a === void 0 ? void 0 : _a.replaceChild(newNode, cNode);
-                // console.log('-------', this.point.start.parentNode.nodeName)
-                // 중요 style value change 됐을때 다시 처리해야되기떄문에: 마지막에 completed 없는 attr 가지고 판단 하니깐
-                if (this.type === exports.RawSetType.STYLE_TEXT && this.point.parent) {
-                    this.point.parent.removeAttribute('completed');
-                }
-            }
-            else if (cNode.nodeType === Node.ELEMENT_NODE) {
-                var element = cNode;
-                // console.log('target-->', element)
-                var drAttr = {
-                    dr: this.getAttributeAndDelete(element, RawSet.DR),
-                    drIf: this.getAttributeAndDelete(element, RawSet.DR_IF_NAME),
-                    drFor: this.getAttributeAndDelete(element, RawSet.DR_FOR_NAME),
-                    drForOf: this.getAttributeAndDelete(element, RawSet.DR_FOR_OF_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),
-                    drForm: this.getAttributeAndDelete(element, RawSet.DR_FORM_NAME),
-                    drPre: this.getAttributeAndDelete(element, RawSet.DR_PRE_NAME),
-                    drInnerHTML: this.getAttributeAndDelete(element, RawSet.DR_INNERHTML_NAME),
-                    drInnerText: this.getAttributeAndDelete(element, RawSet.DR_INNERTEXT_NAME),
-                    drItOption: this.getAttributeAndDelete(element, RawSet.DR_IT_OPTIONNAME),
-                    drVarOption: this.getAttributeAndDelete(element, RawSet.DR_VAR_OPTIONNAME),
-                    drNextOption: this.getAttributeAndDelete(element, RawSet.DR_NEXT_OPTIONNAME),
-                    drAfterOption: this.getAttributeAndDelete(element, RawSet.DR_AFTER_OPTIONNAME),
-                    drBeforeOption: this.getAttributeAndDelete(element, RawSet.DR_BEFORE_OPTIONNAME),
-                    drCompleteOption: this.getAttributeAndDelete(element, RawSet.DR_COMPLETE_OPTIONNAME),
-                    drStripOption: this.getAttributeAndDelete(element, RawSet.DR_STRIP_OPTIONNAME),
-                    drDestroyOption: this.getAttributeAndDelete(element, RawSet.DR_DESTROY_OPTIONNAME)
-                };
-                drAttrs.push(drAttr);
-                var operators = [
-                    new DrPre(this, __render, { raws: raws, fag: fag }, { element: element, attr: drAttr.drPre, attrs: drAttr }, { config: config, obj: obj, operatorAround: (_b = config.operatorAround) === null || _b === void 0 ? void 0 : _b.drPre }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
-                    new Dr(this, __render, { raws: raws, fag: fag }, { element: element, attr: drAttr.dr, attrs: drAttr }, { config: config, obj: obj, operatorAround: (_c = config.operatorAround) === null || _c === void 0 ? void 0 : _c.dr }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
-                    new DrIf(this, __render, { raws: raws, fag: fag }, { element: element, attr: drAttr.drIf, attrs: drAttr }, { config: config, obj: obj, operatorAround: (_d = config.operatorAround) === null || _d === void 0 ? void 0 : _d.drIf }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
-                    new DrThis(this, __render, { raws: raws, fag: fag }, { element: element, attr: drAttr.drThis, attrs: drAttr }, { config: config, obj: obj, operatorAround: (_e = config.operatorAround) === null || _e === void 0 ? void 0 : _e.drThis }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
-                    new DrForm(this, __render, { raws: raws, fag: fag }, { element: element, attr: drAttr.drForm, attrs: drAttr }, { config: config, obj: obj, operatorAround: (_f = config.operatorAround) === null || _f === void 0 ? void 0 : _f.drForm }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
-                    new DrInnerText(this, __render, { raws: raws, fag: fag }, { element: element, attr: drAttr.drInnerText, attrs: drAttr }, { config: config, obj: obj, operatorAround: (_g = config.operatorAround) === null || _g === void 0 ? void 0 : _g.drInnerText }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
-                    new DrInnerHTML(this, __render, { raws: raws, fag: fag }, { element: element, 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, 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, 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 DrAppender(this, __render, { raws: raws, fag: fag }, { element: element, attr: drAttr.drAppender, attrs: drAttr }, { config: config, obj: obj, operatorAround: (_l = config.operatorAround) === null || _l === void 0 ? void 0 : _l.drAppender }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
-                    new DrRepeat(this, __render, { raws: raws, fag: fag }, { element: element, attr: drAttr.drRepeat, attrs: drAttr }, { config: config, obj: obj, operatorAround: (_m = config.operatorAround) === null || _m === void 0 ? void 0 : _m.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 }),
-                    new DrTargetAttr(this, __render, { raws: raws, fag: fag }, { element: element, attrs: drAttr }, { config: config, obj: obj }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks })
-                ];
-                for (var _z = 0, operators_1 = operators; _z < operators_1.length; _z++) {
-                    var operator = operators_1[_z];
-                    var state = operator.start();
-                    if (state === exports.ExecuteState.EXECUTE) {
-                        break;
-                    }
-                    else if (state === exports.ExecuteState.STOP) {
-                        return raws;
-                    }
-                }
-            }
-        }
-        this.applyEvent(obj, genNode, config);
-        this.replaceBody(genNode); // 중요 여기서 마지막에 연션된 값을 그려준다.
-        drAttrs.forEach(function (it) {
-            if (it.drCompleteOption) {
-                // genNode.childNodes
-                var render = Object.freeze({
-                    rawset: _this,
-                    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 }));
-            }
-        });
-        // 중요 style isolation 나중에 :scope로 대체 가능할듯.
-        RawSet.generateStyleSheetsLocal();
-        for (var _0 = 0, onThisComponentSetCallBacks_1 = onThisComponentSetCallBacks; _0 < onThisComponentSetCallBacks_1.length; _0++) {
-            var it_1 = onThisComponentSetCallBacks_1[_0];
-            (_p = (_o = it_1.obj) === null || _o === void 0 ? void 0 : _o.onInitRender) === null || _p === void 0 ? void 0 : _p.call(_o);
-        }
-        for (var _1 = 0, onElementInitCallBacks_1 = onElementInitCallBacks; _1 < onElementInitCallBacks_1.length; _1++) {
-            var it_2 = onElementInitCallBacks_1[_1];
-            if (((_r = (_q = it_2.targetElement) === null || _q === void 0 ? void 0 : _q.__render) === null || _r === void 0 ? void 0 : _r.element) && ((_t = (_s = it_2.targetElement) === null || _s === void 0 ? void 0 : _s.__render) === null || _t === void 0 ? void 0 : _t.component)) {
-                var oninit = it_2.targetElement.__render.element.getAttribute(RawSet.DR_ON_INIT_ARGUMENTS_OPTIONNAME); // dr-on-component-init
-                var param = [];
-                if (oninit) {
-                    var script = "".concat(it_2.targetElement.__render.renderScript, " return ").concat(oninit, " ");
-                    param = ScriptUtils.eval(script, Object.assign(obj, {
-                        __render: it_2.targetElement.__render
-                    }));
-                    if (!Array.isArray(param)) {
-                        param = [param];
-                    }
-                }
-                (_v = (_u = it_2.targetElement.__render.component).onInitRender) === null || _v === void 0 ? void 0 : _v.call.apply(_v, __spreadArray([_u], param, false));
-            }
-            (_w = config === null || config === void 0 ? void 0 : config.onElementInit) === null || _w === void 0 ? void 0 : _w.call(config, it_2.name, obj, this, it_2.targetElement);
-        }
-        // TODO: 이부분도 위에 targetElement 처럼 해야될까?
-        for (var _2 = 0, onAttrInitCallBacks_1 = onAttrInitCallBacks; _2 < onAttrInitCallBacks_1.length; _2++) {
-            var it_3 = onAttrInitCallBacks_1[_2];
-            (_x = config === null || config === void 0 ? void 0 : config.onAttrInit) === null || _x === void 0 ? void 0 : _x.call(config, it_3.attrName, it_3.attrValue, obj, this);
-        }
-        // component destroy
-        if (obj.__domrender_components) {
-            Object.entries(obj.__domrender_components).forEach(function (_a) {
-                var _b, _c;
-                var key = _a[0], value = _a[1];
-                var domrenderComponentNew = value.__domrender_component_new;
-                var rawSet = domrenderComponentNew === null || domrenderComponentNew === void 0 ? void 0 : domrenderComponentNew.rawSet;
-                var drAttrs = domrenderComponentNew === null || domrenderComponentNew === void 0 ? void 0 : domrenderComponentNew.drAttrs;
-                if (rawSet && !rawSet.isConnected) {
-                    // const domrenderComponent = obj.__domrender_components[key];
-                    // console.log('component destroy--->', key, rawSet, rawSet.isConnected, domrenderComponent.name, domrenderComponent);
-                    var destroyOptions = (_c = (_b = drAttrs === null || drAttrs === void 0 ? void 0 : drAttrs.drDestroyOption) === null || _b === void 0 ? void 0 : _b.split(',')) !== null && _c !== void 0 ? _c : [];
-                    RawSet.destroy(obj.__domrender_components[key], [domrenderComponentNew], config, destroyOptions);
-                    delete obj.__domrender_components[key];
+        return __awaiter(this, void 0, void 0, function () {
+            var genNode, raws, onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks, drAttrs, _i, _y, cNode, attribute, __render, fag, textContent, runText, newNode, r, template, r, element, drAttr, operators, _z, operators_1, operator, state, _0, onThisComponentSetCallBacks_1, it_1, _1, onElementInitCallBacks_1, it_2, oninit, param, script, _2, onAttrInitCallBacks_1, it_3;
+            var _this = this;
+            return __generator(this, function (_3) {
+                switch (_3.label) {
+                    case 0:
+                        genNode = config.window.document.importNode(this.fragment, true);
+                        raws = [];
+                        onAttrInitCallBacks = [];
+                        onElementInitCallBacks = [];
+                        onThisComponentSetCallBacks = [];
+                        drAttrs = [];
+                        _i = 0, _y = Array.from(genNode.childNodes.values());
+                        _3.label = 1;
+                    case 1:
+                        if (!(_i < _y.length)) return [3 /*break*/, 7];
+                        cNode = _y[_i];
+                        attribute = {};
+                        if (cNode.nodeType === Node.ELEMENT_NODE) {
+                            attribute = DomUtils.getAttributeToObject(cNode);
+                        }
+                        __render = Object.freeze({
+                            rawset: this,
+                            scripts: EventManager.setBindProperty(config === null || config === void 0 ? void 0 : config.scripts, obj),
+                            router: config === null || config === void 0 ? void 0 : config.router,
+                            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            ")
+                            // eslint-disable-next-line no-use-before-define
+                        });
+                        fag = config.window.document.createDocumentFragment();
+                        if (!(cNode.nodeType === Node.TEXT_NODE && cNode.textContent)) return [3 /*break*/, 2];
+                        textContent = cNode.textContent;
+                        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 }));
+                            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 }));
+                            newNode = config.window.document.createTextNode(r);
+                        }
+                        (_a = cNode.parentNode) === null || _a === void 0 ? void 0 : _a.replaceChild(newNode, cNode);
+                        // console.log('-------', this.point.start.parentNode.nodeName)
+                        // 중요 style value change 됐을때 다시 처리해야되기떄문에: 마지막에 completed 없는 attr 가지고 판단 하니깐
+                        if (this.type === exports.RawSetType.STYLE_TEXT && this.point.parent) {
+                            this.point.parent.removeAttribute('completed');
+                        }
+                        return [3 /*break*/, 6];
+                    case 2:
+                        if (!(cNode.nodeType === Node.ELEMENT_NODE)) return [3 /*break*/, 6];
+                        element = cNode;
+                        drAttr = {
+                            dr: this.getAttributeAndDelete(element, RawSet.DR_NAME),
+                            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),
+                            drAppender: this.getAttributeAndDelete(element, RawSet.DR_APPENDER_NAME),
+                            drRepeat: this.getAttributeAndDelete(element, RawSet.DR_REPEAT_NAME),
+                            drThis: this.getAttributeAndDelete(element, RawSet.DR_THIS_NAME),
+                            drForm: this.getAttributeAndDelete(element, RawSet.DR_FORM_NAME),
+                            drPre: this.getAttributeAndDelete(element, RawSet.DR_PRE_NAME),
+                            drInnerHTML: this.getAttributeAndDelete(element, RawSet.DR_INNERHTML_NAME),
+                            drInnerText: this.getAttributeAndDelete(element, RawSet.DR_INNERTEXT_NAME),
+                            drItOption: this.getAttributeAndDelete(element, RawSet.DR_IT_OPTIONNAME),
+                            drVarOption: this.getAttributeAndDelete(element, RawSet.DR_VAR_OPTIONNAME),
+                            drNextOption: this.getAttributeAndDelete(element, RawSet.DR_NEXT_OPTIONNAME),
+                            drAfterOption: this.getAttributeAndDelete(element, RawSet.DR_AFTER_OPTIONNAME),
+                            drBeforeOption: this.getAttributeAndDelete(element, RawSet.DR_BEFORE_OPTIONNAME),
+                            drCompleteOption: this.getAttributeAndDelete(element, RawSet.DR_COMPLETE_OPTIONNAME),
+                            drStripOption: this.getAttributeAndDelete(element, RawSet.DR_STRIP_OPTIONNAME),
+                            drDestroyOption: this.getAttributeAndDelete(element, RawSet.DR_DESTROY_OPTIONNAME)
+                        };
+                        drAttrs.push(drAttr);
+                        operators = [
+                            new DrPre(this, __render, { raws: raws, fag: fag }, { element: element, attrName: RawSet.DR_PRE_NAME, attr: drAttr.drPre, attrs: drAttr }, { config: config, obj: obj, operatorAround: (_b = config.operatorAround) === null || _b === void 0 ? void 0 : _b.drPre }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
+                            new Dr(this, __render, { raws: raws, fag: fag }, { element: element, attrName: RawSet.DR_NAME, attr: drAttr.dr, attrs: drAttr }, { config: config, obj: obj, operatorAround: (_c = config.operatorAround) === null || _c === void 0 ? void 0 : _c.dr }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
+                            new DrIf(this, __render, { raws: raws, fag: fag }, { element: element, attrName: RawSet.DR_IF_NAME, attr: drAttr.drIf, attrs: drAttr }, { config: config, obj: obj, operatorAround: (_d = config.operatorAround) === null || _d === void 0 ? void 0 : _d.drIf }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
+                            new DrThis(this, __render, { raws: raws, fag: fag }, { element: element, attrName: RawSet.DR_THIS_NAME, attr: drAttr.drThis, attrs: drAttr }, { config: config, obj: obj, operatorAround: (_e = config.operatorAround) === null || _e === void 0 ? void 0 : _e.drThis }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
+                            new DrForm(this, __render, { raws: raws, fag: fag }, { element: element, attrName: RawSet.DR_FOR_NAME, attr: drAttr.drForm, attrs: drAttr }, { config: config, obj: obj, operatorAround: (_f = config.operatorAround) === null || _f === void 0 ? void 0 : _f.drForm }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
+                            new DrInnerText(this, __render, { raws: raws, fag: fag }, { element: element, attrName: RawSet.DR_INNERTEXT_NAME, attr: drAttr.drInnerText, attrs: drAttr }, { config: config, obj: obj, operatorAround: (_g = config.operatorAround) === null || _g === void 0 ? void 0 : _g.drInnerText }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
+                            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 DrAppender(this, __render, { raws: raws, fag: fag }, { element: element, attrName: RawSet.DR_APPENDER_NAME, attr: drAttr.drAppender, attrs: drAttr }, { config: config, obj: obj, operatorAround: (_l = config.operatorAround) === null || _l === void 0 ? void 0 : _l.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: (_m = config.operatorAround) === null || _m === void 0 ? void 0 : _m.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 }),
+                            new DrTargetAttr(this, __render, { raws: raws, fag: fag }, { element: element, attrs: drAttr }, { config: config, obj: obj }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks })
+                        ];
+                        _z = 0, operators_1 = operators;
+                        _3.label = 3;
+                    case 3:
+                        if (!(_z < operators_1.length)) return [3 /*break*/, 6];
+                        operator = operators_1[_z];
+                        return [4 /*yield*/, operator.start()];
+                    case 4:
+                        state = _3.sent();
+                        if (state === exports.ExecuteState.EXECUTE) {
+                            return [3 /*break*/, 6];
+                        }
+                        else if (state === exports.ExecuteState.STOP) {
+                            return [2 /*return*/, raws];
+                        }
+                        _3.label = 5;
+                    case 5:
+                        _z++;
+                        return [3 /*break*/, 3];
+                    case 6:
+                        _i++;
+                        return [3 /*break*/, 1];
+                    case 7:
+                        this.applyEvent(obj, genNode, config);
+                        this.replaceBody(genNode); // 중요 여기서 마지막에 연션된 값을 그려준다.
+                        drAttrs.forEach(function (it) {
+                            if (it.drCompleteOption) {
+                                // genNode.childNodes
+                                var render = Object.freeze({
+                                    rawset: _this,
+                                    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 }));
+                            }
+                        });
+                        // 중요 style isolation 나중에 :scope로 대체 가능할듯.
+                        RawSet.generateStyleSheetsLocal();
+                        for (_0 = 0, onThisComponentSetCallBacks_1 = onThisComponentSetCallBacks; _0 < onThisComponentSetCallBacks_1.length; _0++) {
+                            it_1 = onThisComponentSetCallBacks_1[_0];
+                            (_p = (_o = it_1.obj) === null || _o === void 0 ? void 0 : _o.onInitRender) === null || _p === void 0 ? void 0 : _p.call(_o);
+                        }
+                        for (_1 = 0, onElementInitCallBacks_1 = onElementInitCallBacks; _1 < onElementInitCallBacks_1.length; _1++) {
+                            it_2 = onElementInitCallBacks_1[_1];
+                            if (((_r = (_q = it_2.targetElement) === null || _q === void 0 ? void 0 : _q.__render) === null || _r === void 0 ? void 0 : _r.element) && ((_t = (_s = it_2.targetElement) === null || _s === void 0 ? void 0 : _s.__render) === null || _t === void 0 ? void 0 : _t.component)) {
+                                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, " ");
+                                    param = ScriptUtils.eval(script, Object.assign(obj, {
+                                        __render: it_2.targetElement.__render
+                                    }));
+                                    if (!Array.isArray(param)) {
+                                        param = [param];
+                                    }
+                                }
+                                (_v = (_u = it_2.targetElement.__render.component).onInitRender) === null || _v === void 0 ? void 0 : _v.call.apply(_v, __spreadArray([_u], param, false));
+                            }
+                            (_w = config === null || config === void 0 ? void 0 : config.onElementInit) === null || _w === void 0 ? void 0 : _w.call(config, it_2.name, obj, this, it_2.targetElement);
+                        }
+                        // TODO: 이부분도 위에 targetElement 처럼 해야될까?
+                        for (_2 = 0, onAttrInitCallBacks_1 = onAttrInitCallBacks; _2 < onAttrInitCallBacks_1.length; _2++) {
+                            it_3 = onAttrInitCallBacks_1[_2];
+                            (_x = config === null || config === void 0 ? void 0 : config.onAttrInit) === null || _x === void 0 ? void 0 : _x.call(config, it_3.attrName, it_3.attrValue, obj, this);
+                        }
+                        // component destroy
+                        if (obj.__domrender_components) {
+                            Object.entries(obj.__domrender_components).forEach(function (_a) {
+                                var _b, _c;
+                                var key = _a[0], value = _a[1];
+                                var domrenderComponentNew = value.__domrender_component_new;
+                                var rawSet = domrenderComponentNew === null || domrenderComponentNew === void 0 ? void 0 : domrenderComponentNew.rawSet;
+                                var drAttrs = domrenderComponentNew === null || domrenderComponentNew === void 0 ? void 0 : domrenderComponentNew.drAttrs;
+                                if (rawSet && !rawSet.isConnected) {
+                                    // const domrenderComponent = obj.__domrender_components[key];
+                                    // console.log('component destroy--->', key, rawSet, rawSet.isConnected, domrenderComponent.name, domrenderComponent);
+                                    var destroyOptions = (_c = (_b = drAttrs === null || drAttrs === void 0 ? void 0 : drAttrs.drDestroyOption) === null || _b === void 0 ? void 0 : _b.split(',')) !== null && _c !== void 0 ? _c : [];
+                                    RawSet.destroy(obj.__domrender_components[key], [domrenderComponentNew], config, destroyOptions);
+                                    delete obj.__domrender_components[key];
+                                }
+                            });
+                        }
+                        return [2 /*return*/, raws];
                 }
             });
-        }
-        return raws;
+        });
     };
     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) {
@@ -2420,54 +2649,95 @@ var RawSet = /** @class */ (function () {
         });
     };
     RawSet.drThisCreate = function (rawSet, element, drThis, drVarOption, drStripOption, obj, config, set) {
-        var _a, _b, _c, _d;
-        var fag = config.window.document.createDocumentFragment();
-        var n = element.cloneNode(true);
-        // console.log('--------',n, n.innerHTML)
-        if (set) {
-            // const id = RandomUtils.getRandomString(20);
-            var style = RawSet.generateStyleTransform((_a = set.styles) !== null && _a !== void 0 ? _a : [], rawSet.uuid, true);
-            n.innerHTML = style + ((_b = set.template) !== null && _b !== void 0 ? _b : '');
-            // const metaStart = RawSet.metaStart(id);
-            // const metaEnd = RawSet.metaEnd(id);
-            // n.innerHTML = metaStart + style + (set.template ?? '') + metaEnd;
-            // dr-on-create onCreateRender
-            var onCreate = element.getAttribute(RawSet.DR_ON_CREATE_ARGUMENTS_OPTIONNAME);
-            var renderScript = '';
-            var createParam = [];
-            if (onCreate) {
-                var script = "".concat(renderScript, " return ").concat(onCreate, " ");
-                createParam = ScriptUtils.eval(script, obj);
-                if (!Array.isArray(createParam)) {
-                    createParam = [createParam];
+        var _a, _b, _c, _d, _e;
+        return __awaiter(this, void 0, void 0, function () {
+            var fag, n, stylePromises, templatePromise, _f, i, it_5, _g, _h, _j, _k, _l, style, onCreate, renderScript, createParam, script, oninit, script, thisRandom, vars;
+            return __generator(this, function (_m) {
+                switch (_m.label) {
+                    case 0:
+                        fag = config.window.document.createDocumentFragment();
+                        n = element.cloneNode(true);
+                        if (!set) return [3 /*break*/, 12];
+                        stylePromises = [];
+                        if (!(set.template && set.template.startsWith('lazy://'))) return [3 /*break*/, 2];
+                        return [4 /*yield*/, fetch(set.template.substring(6))];
+                    case 1:
+                        _f = (_m.sent()).text();
+                        return [3 /*break*/, 3];
+                    case 2:
+                        _f = Promise.resolve(set.template);
+                        _m.label = 3;
+                    case 3:
+                        templatePromise = (_f);
+                        i = 0;
+                        _m.label = 4;
+                    case 4:
+                        if (!(set.styles && i < ((_a = set.styles.length) !== null && _a !== void 0 ? _a : 0))) return [3 /*break*/, 9];
+                        it_5 = set.styles[i];
+                        _h = (_g = stylePromises).push;
+                        if (!it_5.startsWith('lazy://')) return [3 /*break*/, 6];
+                        return [4 /*yield*/, fetch(it_5.substring(6))];
+                    case 5:
+                        _j = (_m.sent()).text();
+                        return [3 /*break*/, 7];
+                    case 6:
+                        _j = Promise.resolve(it_5);
+                        _m.label = 7;
+                    case 7:
+                        _h.apply(_g, [_j]);
+                        _m.label = 8;
+                    case 8:
+                        i++;
+                        return [3 /*break*/, 4];
+                    case 9:
+                        _k = set;
+                        return [4 /*yield*/, templatePromise];
+                    case 10:
+                        _k.template = _m.sent();
+                        _l = set;
+                        return [4 /*yield*/, Promise.all(stylePromises)];
+                    case 11:
+                        _l.styles = _m.sent();
+                        style = RawSet.generateStyleTransform((_b = set.styles) !== null && _b !== void 0 ? _b : [], rawSet.uuid, true);
+                        n.innerHTML = style + ((_c = set.template) !== null && _c !== void 0 ? _c : '');
+                        onCreate = element.getAttribute(RawSet.DR_ON_CREATE_ARGUMENTS_OPTIONNAME);
+                        renderScript = '';
+                        createParam = [];
+                        if (onCreate) {
+                            script = "".concat(renderScript, " return ").concat(onCreate, " ");
+                            createParam = ScriptUtils.eval(script, obj);
+                            if (!Array.isArray(createParam)) {
+                                createParam = [createParam];
+                            }
+                        }
+                        (_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, " ");
+                            ScriptUtils.eval(script, obj);
+                        }
+                        _m.label = 12;
+                    case 12:
+                        n.querySelectorAll(eventManager.attrNames.map(function (it) { return "[".concat(it, "]"); }).join(',')).forEach(function (it) {
+                            it.setAttribute(EventManager.ownerVariablePathAttrName, 'this');
+                        });
+                        thisRandom = this.drThisEncoding(n, drThis);
+                        vars = this.drVarEncoding(n, drVarOption);
+                        this.drVarDecoding(n, vars);
+                        this.drThisDecoding(n, thisRandom);
+                        if (drStripOption && (drStripOption === true || drStripOption === 'true')) {
+                            // console.log('------childNodes', Array.from(n.childNodes))
+                            Array.from(n.childNodes).forEach(function (it) { return fag.append(it); });
+                        }
+                        else {
+                            fag.append(n);
+                        }
+                        fag.__domrender_this_variable_name = drThis;
+                        // console.log('set __domrender_this_variable_name', (fag as any).__domrender_this_variable_name)
+                        return [2 /*return*/, fag];
                 }
-            }
-            (_d = (_c = set.obj) === null || _c === void 0 ? void 0 : _c.onCreateRender) === null || _d === void 0 ? void 0 : _d.call.apply(_d, __spreadArray([_c], createParam, false));
-            // dr-on-component-init
-            // const oninit = element.getAttribute(`${EventManager.attrPrefix}on-component-init`); // dr-on-component-init
-            var oninit = element.getAttribute(RawSet.DR_ON_CREATED_CALLBACK_OPTIONNAME); // dr-on-component-init
-            if (oninit) {
-                var script = "".concat(renderScript, "  ").concat(oninit, " ");
-                ScriptUtils.eval(script, obj);
-            }
-        }
-        n.querySelectorAll(eventManager.attrNames.map(function (it) { return "[".concat(it, "]"); }).join(',')).forEach(function (it) {
-            it.setAttribute(EventManager.ownerVariablePathAttrName, 'this');
+            });
         });
-        var thisRandom = this.drThisEncoding(n, drThis);
-        var vars = this.drVarEncoding(n, drVarOption);
-        this.drVarDecoding(n, vars);
-        this.drThisDecoding(n, thisRandom);
-        if (drStripOption && (drStripOption === true || drStripOption === 'true')) {
-            // console.log('------childNodes', Array.from(n.childNodes))
-            Array.from(n.childNodes).forEach(function (it) { return fag.append(it); });
-        }
-        else {
-            fag.append(n);
-        }
-        fag.__domrender_this_variable_name = drThis;
-        // console.log('set __domrender_this_variable_name', (fag as any).__domrender_this_variable_name)
-        return fag;
     };
     RawSet.createComponentTargetAttribute = function (name, getThisObj, factory) {
         var targetAttribute = {
@@ -2498,115 +2768,163 @@ var RawSet = /** @class */ (function () {
             styles: styles,
             template: template,
             callBack: function (element, obj, rawSet, attrs, config) {
-                var _a, _b, _c, _d, _e, _f;
-                // console.log('callback------->', element)
-                if (!obj.__domrender_components) {
-                    obj.__domrender_components = {};
-                }
-                var domrenderComponents = obj.__domrender_components;
-                // const componentKey = '_' + RandomUtils.getRandomString(20);
-                var componentKey = rawSet.uuid;
-                var attribute = DomUtils.getAttributeToObject(element);
-                var renderScript = 'var $component = this.__render.component; var $element = this.__render.element; var $router = this.__render.router; var $innerHTML = this.__render.innerHTML; var $attribute = this.__render.attribute; var $creatorMetaData = this.__render.creatorMetaData;';
-                var render = Object.freeze({
-                    renderScript: renderScript,
-                    element: element,
-                    innerHTML: element.innerHTML,
-                    attribute: attribute,
-                    rawset: rawSet,
-                    router: config.router,
-                    componentKey: componentKey,
-                    scripts: EventManager.setBindProperty((_a = config.scripts) !== null && _a !== void 0 ? _a : {}, obj)
-                    // eslint-disable-next-line no-use-before-define
-                });
-                var constructor = element.getAttribute(RawSet.DR_ON_CONSTRUCTOR_ARGUMENTS_OPTIONNAME);
-                var constructorParam = [];
-                // dr-constructor
-                if (constructor) {
-                    var script = "".concat(renderScript, " return ").concat(constructor, " ");
-                    var param = (_b = ScriptUtils.eval(script, Object.assign(obj, { __render: render }))) !== null && _b !== void 0 ? _b : [];
-                    if (!Array.isArray(param)) {
-                        param = [param];
-                    }
-                    constructorParam = param;
-                }
-                // console.log('------22', attrs);
-                domrenderComponents[componentKey] = objFactory(element, obj, rawSet, constructorParam);
-                var instance = domrenderComponents[componentKey];
-                var 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.componentKey = componentKey;
-                i.rawSet = rawSet;
-                i.attribute = attribute;
-                i.router = config.router;
-                i.scripts = render.scripts;
-                i.drAttrs = attrs;
-                i.innerHTML = element.innerHTML;
-                i.rootCreator = new Proxy(obj, new DomRenderFinalProxy());
-                i.creator = new Proxy(rawSet.point.thisVariableName ? ScriptUtils.evalReturn(rawSet.point.thisVariableName, obj) : obj, new DomRenderFinalProxy());
-                this.__creatorMetaData = i;
-                render = __assign({ component: instance, creatorMetaData: i }, render);
-                // 중요 dr-normal-attr-map
-                var 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 cval = ScriptUtils.eval(script, Object.assign(obj, { __render: render }));
-                        // element.setAttribute(key, cval);
-                        instance.onChangeAttrRender(key, cval);
+                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;
+                    return __generator(this, function (_p) {
+                        switch (_p.label) {
+                            case 0:
+                                stylePromises = [];
+                                if (!(this.template && this.template.startsWith('lazy://'))) return [3 /*break*/, 2];
+                                return [4 /*yield*/, fetch(this.template.substring(6))];
+                            case 1:
+                                _h = (_p.sent()).text();
+                                return [3 /*break*/, 3];
+                            case 2:
+                                _h = Promise.resolve(this.template);
+                                _p.label = 3;
+                            case 3:
+                                templatePromise = (_h);
+                                i_1 = 0;
+                                _p.label = 4;
+                            case 4:
+                                if (!(this.styles && i_1 < this.styles.length)) return [3 /*break*/, 9];
+                                it_6 = this.styles[i_1];
+                                _k = (_j = stylePromises).push;
+                                if (!it_6.startsWith('lazy://')) return [3 /*break*/, 6];
+                                return [4 /*yield*/, fetch(it_6.substring(6))];
+                            case 5:
+                                _l = (_p.sent()).text();
+                                return [3 /*break*/, 7];
+                            case 6:
+                                _l = Promise.resolve(it_6);
+                                _p.label = 7;
+                            case 7:
+                                _k.apply(_j, [_l]);
+                                _p.label = 8;
+                            case 8:
+                                i_1++;
+                                return [3 /*break*/, 4];
+                            case 9:
+                                // const templateResponse = await templatePromise;
+                                // const styleResponses = await Promise.all(stylePromises);
+                                _m = this;
+                                return [4 /*yield*/, templatePromise];
+                            case 10:
+                                // const templateResponse = await templatePromise;
+                                // const styleResponses = await Promise.all(stylePromises);
+                                _m.template = _p.sent();
+                                _o = this;
+                                return [4 /*yield*/, Promise.all(stylePromises)];
+                            case 11:
+                                _o.styles = _p.sent();
+                                // console.log('targetsub-22-', this.styles)
+                                // console.log('targetsub-222-', this.template, this.styles)
+                                // Promise.all(promises).then([])
+                                // console.log('callback------->', element)
+                                if (!obj.__domrender_components) {
+                                    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({
+                                    renderScript: renderScript,
+                                    element: element,
+                                    innerHTML: element.innerHTML,
+                                    attribute: attribute,
+                                    rawset: rawSet,
+                                    router: config.router,
+                                    componentKey: componentKey,
+                                    scripts: EventManager.setBindProperty((_a = config.scripts) !== null && _a !== void 0 ? _a : {}, obj)
+                                    // eslint-disable-next-line no-use-before-define
+                                });
+                                constructor = element.getAttribute(RawSet.DR_ON_CONSTRUCTOR_ARGUMENTS_OPTIONNAME);
+                                constructorParam = [];
+                                // dr-constructor
+                                if (constructor) {
+                                    script = "".concat(renderScript, " return ").concat(constructor, " ");
+                                    param = (_b = ScriptUtils.eval(script, Object.assign(obj, { __render: render }))) !== null && _b !== void 0 ? _b : [];
+                                    if (!Array.isArray(param)) {
+                                        param = [param];
+                                    }
+                                    constructorParam = param;
+                                }
+                                // console.log('------22', attrs);
+                                domrenderComponents[componentKey] = objFactory(element, obj, rawSet, constructorParam);
+                                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.componentKey = componentKey;
+                                i.rawSet = rawSet;
+                                i.attribute = attribute;
+                                i.router = config.router;
+                                i.scripts = render.scripts;
+                                i.drAttrs = attrs;
+                                i.innerHTML = element.innerHTML;
+                                i.rootCreator = new Proxy(obj, new DomRenderFinalProxy());
+                                i.creator = new Proxy(rawSet.point.thisVariableName ? ScriptUtils.evalReturn(rawSet.point.thisVariableName, obj) : obj, new DomRenderFinalProxy());
+                                this.__creatorMetaData = i;
+                                render = __assign({ component: instance, creatorMetaData: i }, render);
+                                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 cval = ScriptUtils.eval(script, Object.assign(obj, { __render: render }));
+                                        // element.setAttribute(key, cval);
+                                        instance.onChangeAttrRender(key, cval);
+                                    });
+                                }
+                                onCreate = element.getAttribute(RawSet.DR_ON_CREATE_ARGUMENTS_OPTIONNAME);
+                                this.__render = render;
+                                createParam = [];
+                                if (onCreate) {
+                                    script = "".concat(renderScript, " return ").concat(onCreate, " ");
+                                    createParam = ScriptUtils.eval(script, Object.assign(obj, { __render: render }));
+                                    if (!Array.isArray(createParam)) {
+                                        createParam = [createParam];
+                                    }
+                                }
+                                (_d = instance === null || instance === void 0 ? void 0 : instance.onCreateRender) === null || _d === void 0 ? void 0 : _d.call.apply(_d, __spreadArray([instance], createParam, false));
+                                applayTemplate = element.innerHTML;
+                                componentName = (_e = element.getAttribute(RawSet.DR_COMPONENT_NAME_OPTIONNAME)) !== null && _e !== void 0 ? _e : 'component';
+                                innerHTMLName = (_f = element.getAttribute(RawSet.DR_COMPONENT_INNER_HTML_NAME_OPTIONNAME)) !== null && _f !== void 0 ? _f : 'innerHTML';
+                                if (applayTemplate) {
+                                    // if (rawSet.point.thisVariableName) {
+                                    // 넘어온 innerHTML에 this가 있으면 해당안되게 우선 치환.
+                                    innerHTMLThisRandom = RandomUtils.uuid();
+                                    applayTemplate = applayTemplate.replace(/this\./g, innerHTMLThisRandom);
+                                    // }
+                                    applayTemplate = applayTemplate.replace(RegExp("#".concat(componentName, "#"), 'g'), 'this');
+                                }
+                                // applayTemplate = template.replace(RegExp(`#${innerHTMLName}#`, 'g'), applayTemplate);
+                                applayTemplate = ((_g = this.template) !== null && _g !== void 0 ? _g : '').replace(RegExp("#".concat(innerHTMLName, "#"), 'g'), applayTemplate);
+                                oninit = element.getAttribute(RawSet.DR_ON_CREATED_CALLBACK_OPTIONNAME);
+                                if (oninit) {
+                                    script = "".concat(renderScript, "  ").concat(oninit, " ");
+                                    ScriptUtils.eval(script, Object.assign(obj, {
+                                        __render: render
+                                    }));
+                                }
+                                style = RawSet.generateStyleTransform(this.styles, componentKey, true);
+                                element.innerHTML = style + (applayTemplate !== null && applayTemplate !== void 0 ? applayTemplate : '');
+                                return [4 /*yield*/, RawSet.drThisCreate(rawSet, element, "this.__domrender_components.".concat(componentKey), '', true, obj, config)];
+                            case 12:
+                                data = _p.sent();
+                                // 넘어온 innerHTML에 this가 있는걸 다시 복호화해서 제대로 작동하도록한다.
+                                if (innerHTMLThisRandom) {
+                                    template_1 = config.window.document.createElement('template');
+                                    template_1.content.append(data);
+                                    template_1.innerHTML = template_1.innerHTML.replace(RegExp(innerHTMLThisRandom, 'g'), 'this.');
+                                    data = template_1.content;
+                                }
+                                data.render = render;
+                                return [2 /*return*/, data];
+                        }
                     });
-                }
-                // dr-on-create onCreateRender
-                var onCreate = element.getAttribute(RawSet.DR_ON_CREATE_ARGUMENTS_OPTIONNAME);
-                this.__render = render;
-                var createParam = [];
-                if (onCreate) {
-                    var script = "".concat(renderScript, " return ").concat(onCreate, " ");
-                    createParam = ScriptUtils.eval(script, Object.assign(obj, { __render: render }));
-                    if (!Array.isArray(createParam)) {
-                        createParam = [createParam];
-                    }
-                }
-                (_d = instance === null || instance === void 0 ? void 0 : instance.onCreateRender) === null || _d === void 0 ? void 0 : _d.call.apply(_d, __spreadArray([instance], createParam, false));
-                var applayTemplate = element.innerHTML;
-                var innerHTMLThisRandom;
-                var componentName = (_e = element.getAttribute(RawSet.DR_COMPONENT_NAME_OPTIONNAME)) !== null && _e !== void 0 ? _e : 'component';
-                var innerHTMLName = (_f = element.getAttribute(RawSet.DR_COMPONENT_INNER_HTML_NAME_OPTIONNAME)) !== null && _f !== void 0 ? _f : 'innerHTML';
-                if (applayTemplate) {
-                    // if (rawSet.point.thisVariableName) {
-                    // 넘어온 innerHTML에 this가 있으면 해당안되게 우선 치환.
-                    innerHTMLThisRandom = RandomUtils.uuid();
-                    applayTemplate = applayTemplate.replace(/this\./g, innerHTMLThisRandom);
-                    // }
-                    applayTemplate = applayTemplate.replace(RegExp("#".concat(componentName, "#"), 'g'), 'this');
-                }
-                applayTemplate = template.replace(RegExp("#".concat(innerHTMLName, "#"), 'g'), applayTemplate);
-                // dr-on-component-init
-                // const oninit = element.getAttribute(`${EventManager.attrPrefix}on-component-init`); // dr-on-component-init
-                var oninit = element.getAttribute(RawSet.DR_ON_CREATED_CALLBACK_OPTIONNAME); // dr-on-component-init
-                if (oninit) {
-                    var script = "".concat(renderScript, "  ").concat(oninit, " ");
-                    ScriptUtils.eval(script, Object.assign(obj, {
-                        __render: render
-                    }));
-                }
-                var style = RawSet.generateStyleTransform(styles, componentKey, true);
-                element.innerHTML = style + (applayTemplate !== null && applayTemplate !== void 0 ? applayTemplate : '');
-                // const metaStart = RawSet.metaStart(componentKey);
-                // const metaEnd = RawSet.metaEnd(componentKey);
-                // element.innerHTML = metaStart + style + (applayTemplate ?? '') + metaEnd;
-                // console.log('------>', element.innerHTML, obj)
-                var data = RawSet.drThisCreate(rawSet, element, "this.__domrender_components.".concat(componentKey), '', true, obj, config);
-                // 넘어온 innerHTML에 this가 있는걸 다시 복호화해서 제대로 작동하도록한다.
-                if (innerHTMLThisRandom) {
-                    var template_1 = config.window.document.createElement('template');
-                    template_1.content.append(data);
-                    template_1.innerHTML = template_1.innerHTML.replace(RegExp(innerHTMLThisRandom, 'g'), 'this.');
-                    data = template_1.content;
-                }
-                data.render = render;
-                return data;
+                });
             }
             // complete
         };
@@ -2642,7 +2960,7 @@ var RawSet = /** @class */ (function () {
             }
         }
     };
-    RawSet.DR = 'dr';
+    RawSet.DR_NAME = 'dr';
     RawSet.DR_IF_NAME = 'dr-if';
     RawSet.DR_FOR_NAME = 'dr-for';
     RawSet.DR_FOR_OF_NAME = 'dr-for-of';
@@ -2669,7 +2987,7 @@ var RawSet = /** @class */ (function () {
     RawSet.DR_ON_INIT_ARGUMENTS_OPTIONNAME = 'dr-on-init:arguments';
     RawSet.DR_ON_CONSTRUCTOR_ARGUMENTS_OPTIONNAME = 'dr-on-constructor:arguments';
     RawSet.drAttrsOriginName = {
-        dr: RawSet.DR,
+        dr: RawSet.DR_NAME,
         drIf: RawSet.DR_IF_NAME,
         drFor: RawSet.DR_FOR_NAME,
         drForOf: RawSet.DR_FOR_OF_NAME,
@@ -2690,7 +3008,7 @@ var RawSet = /** @class */ (function () {
         drDestroyOption: RawSet.DR_DESTROY_OPTIONNAME
     };
     RawSet.DR_TAGS = [];
-    RawSet.DR_ATTRIBUTES = [RawSet.DR, RawSet.DR_APPENDER_NAME, RawSet.DR_IF_NAME, RawSet.DR_FOR_OF_NAME, RawSet.DR_FOR_NAME, RawSet.DR_THIS_NAME, RawSet.DR_FORM_NAME, RawSet.DR_PRE_NAME, RawSet.DR_INNERHTML_NAME, RawSet.DR_INNERTEXT_NAME, RawSet.DR_REPEAT_NAME, 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_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;
 }());
 
@@ -2732,6 +3050,7 @@ var DomRenderProxy = /** @class */ (function () {
                     // console.log('target-------->')
                     var filter = (_b = (_a = _this.config.proxyExcludeTyps) === null || _a === void 0 ? void 0 : _a.filter(function (it) { return target instanceof it; })) !== null && _b !== void 0 ? _b : [];
                     if (filter.length === 0) {
+                        // console.log('--------', objProxy, target, it)
                         var proxyAfter = _this.proxy(objProxy, target, it);
                         obj[it] = proxyAfter;
                     }
@@ -2796,67 +3115,88 @@ var DomRenderProxy = /** @class */ (function () {
     };
     // 중요 important
     DomRenderProxy.prototype.render = function (raws, fullPathStr) {
-        var _this = this;
-        if (typeof raws === 'string') {
-            var iter = this._rawSets.get(raws);
-            if (iter) {
-                raws = Array.from(iter);
-            }
-            else {
-                raws = undefined;
-            }
-        }
-        var removeRawSets = [];
-        (raws !== null && raws !== void 0 ? raws : this.getRawSets()).forEach(function (it) {
-            var _a, _b, _c;
-            it.getUsingTriggerVariables(_this.config).forEach(function (path) { return _this.addRawSet(path, it); });
-            // console.log('------->', it, it.isConnected);
-            if (it.isConnected) {
-                // 중요 render될때 targetAttribute 체크 해야함.
-                var targetAttrMap = (_b = (_a = it.point.node) === null || _a === void 0 ? void 0 : _a.getAttribute) === null || _b === void 0 ? void 0 : _b.call(_a, EventManager.normalAttrMapAttrName);
-                if ((_c = it.detect) === null || _c === void 0 ? void 0 : _c.action) {
-                    it.detect.action();
-                }
-                else if (it.type === exports.RawSetType.TARGET_ELEMENT && it.data && fullPathStr && targetAttrMap && it.fragment.render) {
-                    new Map(JSON.parse(targetAttrMap)).forEach(function (v, k) {
-                        // it?.data.onChangeAttrRender(k, null, v);
-                        var isUsing = EventManager.isUsingThisVar(v, "this.".concat(fullPathStr));
-                        if (isUsing) {
-                            var render = it.fragment.render;
-                            // console.log('render-->', (it.fragment as any).render)
-                            var script = "".concat(render.renderScript, " return ").concat(v, " ");
-                            var cval = ScriptUtils.eval(script, Object.assign(_this._domRender_proxy, { __render: render }));
-                            it.data.onChangeAttrRender(k, cval);
+        var _a, _b, _c;
+        return __awaiter(this, void 0, void 0, function () {
+            var iter, removeRawSets, rawSets, _loop_1, this_1, _i, rawSets_1, it_1;
+            var _this = this;
+            return __generator(this, function (_d) {
+                switch (_d.label) {
+                    case 0:
+                        if (typeof raws === 'string') {
+                            iter = this._rawSets.get(raws);
+                            if (iter) {
+                                raws = Array.from(iter);
+                            }
+                            else {
+                                raws = undefined;
+                            }
                         }
-                        // console.log('---?', v, fullPathStr, isUsing);
-                    });
-                    // ------------------->
-                }
-                else {
-                    // console.log('---rawSets->', it)
-                    var rawSets = it.render(_this._domRender_proxy, _this.config);
-                    // console.log('---rawSets->', rawSets)
-                    // 대상 attribute 있으면
-                    // const targetAttrs = (it.point.node as Element).getAttribute(EventManager.normalAttrMapAttrName);
-                    // if (it?.data.onChangeAttrRender && it.type === RawSetType.TARGET_ELEMENT && targetAttrs) {
-                    //     new Map<string, string>(JSON.parse(targetAttrs)).forEach((v, k) => {
-                    //         it?.data.onChangeAttrRender(k, null, v);
-                    //     });
-                    // }
-                    // 그외 자식들 render
-                    if (rawSets && rawSets.length > 0) {
-                        _this.render(rawSets);
-                    }
+                        removeRawSets = [];
+                        rawSets = raws !== null && raws !== void 0 ? raws : this.getRawSets();
+                        _loop_1 = function (it_1) {
+                            var targetAttrMap, rawSets_2;
+                            return __generator(this, function (_e) {
+                                switch (_e.label) {
+                                    case 0:
+                                        it_1.getUsingTriggerVariables(this_1.config).forEach(function (path) { return _this.addRawSet(path, it_1); });
+                                        if (!it_1.isConnected) return [3 /*break*/, 5];
+                                        targetAttrMap = (_b = (_a = it_1.point.node) === null || _a === void 0 ? void 0 : _a.getAttribute) === null || _b === void 0 ? void 0 : _b.call(_a, EventManager.normalAttrMapAttrName);
+                                        if (!((_c = it_1.detect) === null || _c === void 0 ? void 0 : _c.action)) return [3 /*break*/, 1];
+                                        it_1.detect.action();
+                                        return [3 /*break*/, 4];
+                                    case 1:
+                                        if (!(it_1.type === exports.RawSetType.TARGET_ELEMENT && it_1.data && fullPathStr && targetAttrMap && it_1.fragment.render)) return [3 /*break*/, 2];
+                                        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));
+                                            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 cval = ScriptUtils.eval(script, Object.assign((_a = _this._domRender_proxy) !== null && _a !== void 0 ? _a : {}, { __render: render }));
+                                                it_1.data.onChangeAttrRender(k, cval);
+                                            }
+                                            // console.log('---?', v, fullPathStr, isUsing);
+                                        });
+                                        return [3 /*break*/, 4];
+                                    case 2: return [4 /*yield*/, it_1.render(this_1._domRender_proxy, this_1.config)];
+                                    case 3:
+                                        rawSets_2 = _e.sent();
+                                        // 그외 자식들 render
+                                        if (rawSets_2 && rawSets_2.length > 0) {
+                                            this_1.render(rawSets_2);
+                                        }
+                                        _e.label = 4;
+                                    case 4: return [3 /*break*/, 6];
+                                    case 5:
+                                        removeRawSets.push(it_1);
+                                        _e.label = 6;
+                                    case 6: return [2 /*return*/];
+                                }
+                            });
+                        };
+                        this_1 = this;
+                        _i = 0, rawSets_1 = rawSets;
+                        _d.label = 1;
+                    case 1:
+                        if (!(_i < rawSets_1.length)) return [3 /*break*/, 4];
+                        it_1 = rawSets_1[_i];
+                        return [5 /*yield**/, _loop_1(it_1)];
+                    case 2:
+                        _d.sent();
+                        _d.label = 3;
+                    case 3:
+                        _i++;
+                        return [3 /*break*/, 1];
+                    case 4:
+                        if (removeRawSets.length > 0) {
+                            this.removeRawSet.apply(this, removeRawSets);
+                        }
+                        return [2 /*return*/];
                 }
-            }
-            else {
-                removeRawSets.push(it);
-                // this.removeRawSet(it)
-            }
+            });
         });
-        if (removeRawSets.length > 0) {
-            this.removeRawSet.apply(this, removeRawSets);
-        }
     };
     DomRenderProxy.prototype.root = function (paths, value, lastDoneExecute) {
         var _this = this;
@@ -2968,14 +3308,14 @@ var DomRenderProxy = /** @class */ (function () {
             // return (p in target) ? (target as any)[p].bind(target) : (target as any)[p]
             // console.log('-->', p, Object.prototype.toString.call((target as any)[p]), (target as any)[p])
             // return (target as any)[p]
-            var it_1 = target[p];
-            if (it_1 && typeof it_1 === 'object' && ('_DomRender_isProxy' in it_1) && Object.prototype.toString.call(it_1._DomRender_origin) === '[object Date]') {
-                it_1 = it_1._DomRender_origin;
+            var it_2 = target[p];
+            if (it_2 && typeof it_2 === 'object' && ('_DomRender_isProxy' in it_2) && Object.prototype.toString.call(it_2._DomRender_origin) === '[object Date]') {
+                it_2 = it_2._DomRender_origin;
             }
             if (('onBeforeReturnGet' in receiver) && typeof p === 'string' && !((_a = this.config.proxyExcludeOnBeforeReturnGets) !== null && _a !== void 0 ? _a : []).concat(excludeGetSetPropertys).includes(p)) {
-                (_c = (_b = receiver) === null || _b === void 0 ? void 0 : _b.onBeforeReturnGet) === null || _c === void 0 ? void 0 : _c.call(_b, p, it_1, this.root([p], it_1, false));
+                (_c = (_b = receiver) === null || _b === void 0 ? void 0 : _b.onBeforeReturnGet) === null || _c === void 0 ? void 0 : _c.call(_b, p, it_2, this.root([p], it_2, false));
             }
-            return it_1;
+            return it_2;
         }
     };
     DomRenderProxy.prototype.has = function (target, p) {
@@ -3126,6 +3466,16 @@ var Router = /** @class */ (function () {
             this.set(path, urlExpressionOrData, dataOrTitle !== null && dataOrTitle !== void 0 ? dataOrTitle : '');
         }
         this.attach();
+        this.dispatchPopStateEvent();
+    };
+    Router.prototype.pushState = function (data, title, path) {
+        this.window.history.pushState(data, title, path);
+    };
+    Router.prototype.dispatchPopStateEvent = function () {
+        this.window.dispatchEvent(new Event('popstate'));
+    };
+    Router.prototype.reload = function () {
+        this.window.dispatchEvent(new Event('popstate'));
     };
     Router.prototype.getPathData = function (urlExpression, currentUrl) {
         // console.log('getPathData-->', urlExpression, currentUrl);
@@ -3190,7 +3540,7 @@ var PathRouter = /** @class */ (function (_super) {
     };
     PathRouter.prototype.set = function (path, data, title) {
         if (title === void 0) { title = ''; }
-        this.window.history.pushState(data, title, path);
+        _super.prototype.pushState.call(this, data, title, path);
     };
     PathRouter.prototype.getUrl = function () {
         var url = new URL(this.window.document.location.href);
@@ -3284,7 +3634,7 @@ var HashRouter = /** @class */ (function (_super) {
     HashRouter.prototype.set = function (path, data, title) {
         if (title === void 0) { title = ''; }
         path = '#' + path;
-        this.window.history.pushState(data, title, path);
+        _super.prototype.pushState.call(this, data, title, path);
     };
     HashRouter.prototype.getUrl = function () {
         return LocationUtils.hash(this.window) || '/';
@@ -3499,7 +3849,7 @@ var DomRender = /** @class */ (function () {
     function DomRender() {
     }
     DomRender.run = function (obj, target, oConfig) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         var robj = obj;
         if ('_DomRender_isProxy' in obj) {
             if (target) {
@@ -3526,6 +3876,10 @@ var DomRender = /** @class */ (function () {
         else if (config.routerType === 'hash') {
             config.router = (_c = config.router) !== null && _c !== void 0 ? _c : new HashRouter(robj, config.window);
         }
+        else { // default
+            config.routerType = 'hash';
+            config.router = (_d = config.router) !== null && _d !== void 0 ? _d : new HashRouter(robj, config.window);
+        }
         domRender.run(robj);
         return robj;
     };
@@ -3613,19 +3967,45 @@ var Appender = /** @class */ (function () {
     return Appender;
 }());
 
-var AllUnCheckedValidatorArray = /** @class */ (function (_super) {
-    __extends(AllUnCheckedValidatorArray, _super);
-    function AllUnCheckedValidatorArray(value, target, event, autoValid) {
+var AllCheckedValidatorArray = /** @class */ (function (_super) {
+    __extends(AllCheckedValidatorArray, _super);
+    function AllCheckedValidatorArray(value, target, event, autoValid) {
         if (autoValid === void 0) { autoValid = true; }
         return _super.call(this, value, target, event, autoValid) || this;
     }
-    AllUnCheckedValidatorArray.prototype.valid = function () {
+    AllCheckedValidatorArray.prototype.valid = function () {
+        var _a;
+        return !(((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return !it.checked; }).length > 0);
+    };
+    return AllCheckedValidatorArray;
+}(ValidatorArray));
+
+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 CheckedValidator = /** @class */ (function (_super) {
+    __extends(CheckedValidator, _super);
+    function CheckedValidator(value, target, event, autoValid) {
+        if (autoValid === void 0) { autoValid = true; }
+        return _super.call(this, value, target, event, autoValid) || this;
+    }
+    CheckedValidator.prototype.valid = function () {
+        var _a, _b;
+        return (_b = (_a = this.getTarget()) === null || _a === void 0 ? void 0 : _a.checked) !== null && _b !== void 0 ? _b : false;
+    };
+    return CheckedValidator;
+}(Validator));
+
 var CountEqualsCheckedValidatorArray = /** @class */ (function (_super) {
     __extends(CountEqualsCheckedValidatorArray, _super);
     function CountEqualsCheckedValidatorArray(count, value, target, event, autoValid) {
@@ -3641,17 +4021,19 @@ var CountEqualsCheckedValidatorArray = /** @class */ (function (_super) {
     return CountEqualsCheckedValidatorArray;
 }(ValidatorArray));
 
-var AllCheckedValidatorArray = /** @class */ (function (_super) {
-    __extends(AllCheckedValidatorArray, _super);
-    function AllCheckedValidatorArray(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; }
-        return _super.call(this, value, target, event, autoValid) || this;
+        var _this = _super.call(this, value, target, event, autoValid) || this;
+        _this.count = count;
+        return _this;
     }
-    AllCheckedValidatorArray.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 > 0);
+        return ((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return it.checked; }).length > this.count;
     };
-    return AllCheckedValidatorArray;
+    return CountGreaterThanCheckedValidatorArray;
 }(ValidatorArray));
 
 var CountEqualsUnCheckedValidatorArray = /** @class */ (function (_super) {
@@ -3669,6 +4051,21 @@ var CountEqualsUnCheckedValidatorArray = /** @class */ (function (_super) {
     return CountEqualsUnCheckedValidatorArray;
 }(ValidatorArray));
 
+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;
+    }
+    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 CountGreaterThanEqualsCheckedValidatorArray;
+}(ValidatorArray));
+
 var CountGreaterThanEqualsUnCheckedValidatorArray = /** @class */ (function (_super) {
     __extends(CountGreaterThanEqualsUnCheckedValidatorArray, _super);
     function CountGreaterThanEqualsUnCheckedValidatorArray(count, value, target, event, autoValid) {
@@ -3684,18 +4081,20 @@ var CountGreaterThanEqualsUnCheckedValidatorArray = /** @class */ (function (_su
     return CountGreaterThanEqualsUnCheckedValidatorArray;
 }(ValidatorArray));
 
-var CheckedValidator = /** @class */ (function (_super) {
-    __extends(CheckedValidator, _super);
-    function CheckedValidator(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; }
-        return _super.call(this, value, target, event, autoValid) || this;
+        var _this = _super.call(this, value, target, event, autoValid) || this;
+        _this.count = count;
+        return _this;
     }
-    CheckedValidator.prototype.valid = function () {
-        var _a, _b;
-        return (_b = (_a = this.getTarget()) === null || _a === void 0 ? void 0 : _a.checked) !== null && _b !== void 0 ? _b : false;
+    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 CheckedValidator;
-}(Validator));
+    return CountLessThanCheckedValidatorArray;
+}(ValidatorArray));
 
 var CountGreaterThanUnCheckedValidatorArray = /** @class */ (function (_super) {
     __extends(CountGreaterThanUnCheckedValidatorArray, _super);
@@ -3712,34 +4111,19 @@ var CountGreaterThanUnCheckedValidatorArray = /** @class */ (function (_super) {
     return CountGreaterThanUnCheckedValidatorArray;
 }(ValidatorArray));
 
-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;
-    }
-    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 CountGreaterThanCheckedValidatorArray;
-}(ValidatorArray));
-
-var CountGreaterThanEqualsCheckedValidatorArray = /** @class */ (function (_super) {
-    __extends(CountGreaterThanEqualsCheckedValidatorArray, _super);
-    function CountGreaterThanEqualsCheckedValidatorArray(count, value, target, event, autoValid) {
+var CountLessThanEqualsCheckedValidatorArray = /** @class */ (function (_super) {
+    __extends(CountLessThanEqualsCheckedValidatorArray, _super);
+    function CountLessThanEqualsCheckedValidatorArray(count, value, target, event, autoValid) {
         if (autoValid === void 0) { autoValid = true; }
         var _this = _super.call(this, value, target, event, autoValid) || this;
         _this.count = count;
         return _this;
     }
-    CountGreaterThanEqualsCheckedValidatorArray.prototype.valid = function () {
+    CountLessThanEqualsCheckedValidatorArray.prototype.valid = function () {
         var _a;
-        return ((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return it.checked; }).length >= this.count;
+        return ((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return it.checked; }).length <= this.count;
     };
-    return CountGreaterThanEqualsCheckedValidatorArray;
+    return CountLessThanEqualsCheckedValidatorArray;
 }(ValidatorArray));
 
 var CountLessThanEqualsUnCheckedValidatorArray = /** @class */ (function (_super) {
@@ -3757,34 +4141,73 @@ var CountLessThanEqualsUnCheckedValidatorArray = /** @class */ (function (_super
     return CountLessThanEqualsUnCheckedValidatorArray;
 }(ValidatorArray));
 
-var CountLessThanEqualsCheckedValidatorArray = /** @class */ (function (_super) {
-    __extends(CountLessThanEqualsCheckedValidatorArray, _super);
-    function CountLessThanEqualsCheckedValidatorArray(count, 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; }
         var _this = _super.call(this, value, target, event, autoValid) || this;
         _this.count = count;
         return _this;
     }
-    CountLessThanEqualsCheckedValidatorArray.prototype.valid = function () {
+    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 ((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return !it.checked; }).length >= this.count;
     };
-    return CountLessThanEqualsCheckedValidatorArray;
+    return CountUnCheckedValidatorArray;
 }(ValidatorArray));
 
-var CountLessThanCheckedValidatorArray = /** @class */ (function (_super) {
-    __extends(CountLessThanCheckedValidatorArray, _super);
-    function CountLessThanCheckedValidatorArray(count, value, target, event, autoValid) {
+var EmptyValidator = /** @class */ (function (_super) {
+    __extends(EmptyValidator, _super);
+    function EmptyValidator(value, target, event, autoValid) {
+        if (autoValid === void 0) { autoValid = true; }
+        return _super.call(this, value, target, event, autoValid) || this;
+    }
+    EmptyValidator.prototype.valid = function () {
+        var _a, _b;
+        var value = this.value;
+        return value === undefined || value === null || ((_b = (_a = value) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) <= 0;
+    };
+    return EmptyValidator;
+}(Validator));
+
+var FormValidator = /** @class */ (function (_super) {
+    __extends(FormValidator, _super);
+    function FormValidator(target, event, autoValid) {
+        if (autoValid === void 0) { autoValid = true; }
+        return _super.call(this, undefined, target, event, autoValid) || this;
+    }
+    FormValidator.prototype.validAction = function () {
+        return _super.prototype.childValidAction.call(this);
+    };
+    FormValidator.prototype.valid = function () {
+        return this.childValid();
+    };
+    FormValidator.prototype.reset = function () {
+        this.targetReset();
+    };
+    return FormValidator;
+}(Validator));
+
+var ExcludeCheckedValidatorArray = /** @class */ (function (_super) {
+    __extends(ExcludeCheckedValidatorArray, _super);
+    function ExcludeCheckedValidatorArray(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 () {
+    ExcludeCheckedValidatorArray.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 unCheckedValue = valus.filter(function (it) { return !it.checked; }).map(function (it) { return it.value; });
+        return unCheckedValue.length > 0 &&
+            (!(unCheckedValue.filter(function (it) { return !_this.include.includes(it); }).length > 0)) &&
+            (this.allRequired ? unCheckedValue.filter(function (it) { return _this.include.includes(it); }).length === this.include.length : true);
     };
-    return CountLessThanCheckedValidatorArray;
+    return ExcludeCheckedValidatorArray;
 }(ValidatorArray));
 
 var CountLessThanUnCheckedValidatorArray = /** @class */ (function (_super) {
@@ -3802,35 +4225,6 @@ var CountLessThanUnCheckedValidatorArray = /** @class */ (function (_super) {
     return CountLessThanUnCheckedValidatorArray;
 }(ValidatorArray));
 
-var CountUnCheckedValidatorArray = /** @class */ (function (_super) {
-    __extends(CountUnCheckedValidatorArray, _super);
-    function CountUnCheckedValidatorArray(count, value, target, event, autoValid) {
-        if (autoValid === void 0) { autoValid = true; }
-        var _this = _super.call(this, value, target, event, autoValid) || this;
-        _this.count = count;
-        return _this;
-    }
-    CountUnCheckedValidatorArray.prototype.valid = function () {
-        var _a;
-        return ((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return !it.checked; }).length >= this.count;
-    };
-    return CountUnCheckedValidatorArray;
-}(ValidatorArray));
-
-var EmptyValidator = /** @class */ (function (_super) {
-    __extends(EmptyValidator, _super);
-    function EmptyValidator(value, target, event, autoValid) {
-        if (autoValid === void 0) { autoValid = true; }
-        return _super.call(this, value, target, event, autoValid) || this;
-    }
-    EmptyValidator.prototype.valid = function () {
-        var _a, _b;
-        var value = this.value;
-        return value === undefined || value === null || ((_b = (_a = value) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) <= 0;
-    };
-    return EmptyValidator;
-}(Validator));
-
 var MultipleValidator = /** @class */ (function (_super) {
     __extends(MultipleValidator, _super);
     function MultipleValidator(validators, value, target, event, autoValid) {
@@ -3860,28 +4254,6 @@ var MultipleValidator = /** @class */ (function (_super) {
     return MultipleValidator;
 }(Validator));
 
-var ExcludeCheckedValidatorArray = /** @class */ (function (_super) {
-    __extends(ExcludeCheckedValidatorArray, _super);
-    function ExcludeCheckedValidatorArray(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;
-    }
-    ExcludeCheckedValidatorArray.prototype.valid = function () {
-        var _this = this;
-        var _a;
-        var valus = (_a = this.value) !== null && _a !== void 0 ? _a : [];
-        var unCheckedValue = valus.filter(function (it) { return !it.checked; }).map(function (it) { return it.value; });
-        return unCheckedValue.length > 0 &&
-            (!(unCheckedValue.filter(function (it) { return !_this.include.includes(it); }).length > 0)) &&
-            (this.allRequired ? unCheckedValue.filter(function (it) { return _this.include.includes(it); }).length === this.include.length : true);
-    };
-    return ExcludeCheckedValidatorArray;
-}(ValidatorArray));
-
 var IncludeCheckedValidatorArray = /** @class */ (function (_super) {
     __extends(IncludeCheckedValidatorArray, _super);
     function IncludeCheckedValidatorArray(include, allRequired, value, target, event, autoValid) {
@@ -3904,22 +4276,19 @@ var IncludeCheckedValidatorArray = /** @class */ (function (_super) {
     return IncludeCheckedValidatorArray;
 }(ValidatorArray));
 
-var FormValidator = /** @class */ (function (_super) {
-    __extends(FormValidator, _super);
-    function FormValidator(target, event, autoValid) {
+var NotEmptyValidator = /** @class */ (function (_super) {
+    __extends(NotEmptyValidator, _super);
+    function NotEmptyValidator(value, target, event, autoValid) {
         if (autoValid === void 0) { autoValid = true; }
-        return _super.call(this, undefined, target, event, autoValid) || this;
+        return _super.call(this, value, target, event, autoValid) || this;
     }
-    FormValidator.prototype.validAction = function () {
-        return _super.prototype.childValidAction.call(this);
-    };
-    FormValidator.prototype.valid = function () {
-        return this.childValid();
-    };
-    FormValidator.prototype.reset = function () {
-        this.targetReset();
+    NotEmptyValidator.prototype.valid = function () {
+        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 && ((_b = (_a = value) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) > 0;
     };
-    return FormValidator;
+    return NotEmptyValidator;
 }(Validator));
 
 var NotRegExpTestValidator = /** @class */ (function (_super) {
@@ -3993,34 +4362,6 @@ var RequiredValidator = /** @class */ (function (_super) {
     return RequiredValidator;
 }(Validator));
 
-var UnCheckedValidator = /** @class */ (function (_super) {
-    __extends(UnCheckedValidator, _super);
-    function UnCheckedValidator(value, target, event, autoValid) {
-        if (autoValid === void 0) { autoValid = true; }
-        return _super.call(this, value, target, event, autoValid) || this;
-    }
-    UnCheckedValidator.prototype.valid = function () {
-        var _a, _b;
-        return !((_b = (_a = this.getTarget()) === null || _a === void 0 ? void 0 : _a.checked) !== null && _b !== void 0 ? _b : false);
-    };
-    return UnCheckedValidator;
-}(Validator));
-
-var NotEmptyValidator = /** @class */ (function (_super) {
-    __extends(NotEmptyValidator, _super);
-    function NotEmptyValidator(value, target, event, autoValid) {
-        if (autoValid === void 0) { autoValid = true; }
-        return _super.call(this, value, target, event, autoValid) || this;
-    }
-    NotEmptyValidator.prototype.valid = function () {
-        var _a, _b;
-        var value = this.value;
-        // console.log('NotEmptyValidator', value, value !== undefined && value !== null && ((value as any)?.length ?? 0) > 0)
-        return value !== undefined && value !== null && ((_b = (_a = value) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) > 0;
-    };
-    return NotEmptyValidator;
-}(Validator));
-
 var ValidMultipleValidator = /** @class */ (function (_super) {
     __extends(ValidMultipleValidator, _super);
     function ValidMultipleValidator(validMultipleCallback, validators, value, target, event, autoValid) {
@@ -4036,6 +4377,19 @@ var ValidMultipleValidator = /** @class */ (function (_super) {
     return ValidMultipleValidator;
 }(MultipleValidator));
 
+var UnCheckedValidator = /** @class */ (function (_super) {
+    __extends(UnCheckedValidator, _super);
+    function UnCheckedValidator(value, target, event, autoValid) {
+        if (autoValid === void 0) { autoValid = true; }
+        return _super.call(this, value, target, event, autoValid) || this;
+    }
+    UnCheckedValidator.prototype.valid = function () {
+        var _a, _b;
+        return !((_b = (_a = this.getTarget()) === null || _a === void 0 ? void 0 : _a.checked) !== null && _b !== void 0 ? _b : false);
+    };
+    return UnCheckedValidator;
+}(Validator));
+
 var ValidValidator = /** @class */ (function (_super) {
     __extends(ValidValidator, _super);
     function ValidValidator(validCallBack, value, target, event, autoValid) {