dom-render 1.0.73 → 1.0.76

package/RawSet.js

@@ -1,882 +1,765 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RawSet = void 0;
-var RandomUtils_1 = require("./utils/random/RandomUtils");
-var StringUtils_1 = require("./utils/string/StringUtils");
-var ScriptUtils_1 = require("./utils/script/ScriptUtils");
-var EventManager_1 = require("./events/EventManager");
-var Range_1 = require("./iterators/Range");
-var Validator_1 = require("./validators/Validator");
-var ValidatorArray_1 = require("./validators/ValidatorArray");
-var Types_1 = require("./types/Types");
-var DomUtils_1 = require("./utils/dom/DomUtils");
-var RawSet = /** @class */ (function () {
-    function RawSet(uuid, point, fragment, detect, data) {
-        if (data === void 0) { data = {}; }
-        this.uuid = uuid;
-        this.point = point;
-        this.fragment = fragment;
-        this.detect = detect;
-        this.data = data;
-    }
-    Object.defineProperty(RawSet.prototype, "isConnected", {
-        get: function () {
-            return this.point.start.isConnected && this.point.end.isConnected;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    RawSet.prototype.getUsingTriggerVariables = function (config) {
-        var usingTriggerVariables = new Set();
-        this.fragment.childNodes.forEach(function (cNode, key) {
-            var _a, _b, _c;
-            var script = '';
-            if (cNode.nodeType === Node.TEXT_NODE) {
-                script = "`".concat((_a = cNode.textContent) !== null && _a !== void 0 ? _a : '', "`");
-            }
-            else if (cNode.nodeType === Node.ELEMENT_NODE) {
-                var element_1 = cNode;
-                var targetAttrNames = ((_c = (_b = config === null || config === void 0 ? void 0 : config.targetAttrs) === null || _b === void 0 ? void 0 : _b.map(function (it) { return it.name; })) !== null && _c !== void 0 ? _c : []).concat(RawSet.DR_ATTRIBUTES);
-                script = targetAttrNames.map(function (it) { return (element_1.getAttribute(it)); }).filter(function (it) { return it; }).join(';');
-            }
-            if (script) {
-                // script = script.replace('}$','}');
-                // console.log('----------->', script)
-                EventManager_1.EventManager.VARNAMES.forEach(function (it) {
-                    // script = script.replace(RegExp(it.replace('$', '\\$'), 'g'), `this?.___${it}`);
-                    // script = script.replace(RegExp(it.replace('$', '\\$'), 'g'), `this.___${it}`);
-                    script = script.replace(RegExp(it.replace('$', '\\$'), 'g'), "this.___".concat(it));
-                    // console.log('scripts-->', script)
-                });
-                // console.log('----------', script);
-                Array.from(ScriptUtils_1.ScriptUtils.getVariablePaths(script)).filter(function (it) { return !it.startsWith("___".concat(EventManager_1.EventManager.SCRIPTS_VARNAME)); }).forEach(function (it) { return usingTriggerVariables.add(it); });
-            }
-        });
-        // console.log('usingTriggerVariable----------->', usingTriggerVariables)
-        return usingTriggerVariables;
-    };
-    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, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22;
-        var genNode = config.window.document.importNode(this.fragment, true);
-        var raws = [];
-        var onAttrInitCallBack = [];
-        var onElementInitCallBack = [];
-        var drAttrs = [];
-        var _loop_1 = function (cNode) {
-            var attribute = {};
-            if (cNode.nodeType === Node.ELEMENT_NODE) {
-                attribute = DomUtils_1.DomUtils.getAttributeToObject(cNode);
-            }
-            var __render = Object.freeze({
-                rawset: this_1,
-                scripts: EventManager_1.EventManager.setBindProperty(config === null || config === void 0 ? void 0 : config.scripts, obj),
-                router: config === null || config === void 0 ? void 0 : config.router,
-                range: Range_1.Range.range,
-                element: cNode,
-                attribute: attribute,
-                bindScript: "\n                    const ".concat(EventManager_1.EventManager.SCRIPTS_VARNAME, " = this.__render.scripts;\n                    const ").concat(EventManager_1.EventManager.RAWSET_VARNAME, " = this.__render.rawset;\n                    const ").concat(EventManager_1.EventManager.ELEMENT_VARNAME, " = this.__render.element;\n                    const ").concat(EventManager_1.EventManager.ATTRIBUTE_VARNAME, " = this.__render.attribute;\n                    const ").concat(EventManager_1.EventManager.RANGE_VARNAME, " = this.__render.range;\n                    const ").concat(EventManager_1.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) {
-                var textContent = cNode.textContent;
-                var runText = RawSet.exporesionGrouops(textContent)[0][1];
-                // console.log('--->', textContent,runText, runText[0][1])
-                var n = void 0;
-                if (textContent === null || textContent === void 0 ? void 0 : textContent.startsWith('#')) {
-                    var r = ScriptUtils_1.ScriptUtils.eval("".concat(__render.bindScript, " return ").concat(runText), Object.assign(obj, { __render: __render }));
-                    var template = config.window.document.createElement('template');
-                    template.innerHTML = r;
-                    n = template.content;
-                }
-                else {
-                    var r = ScriptUtils_1.ScriptUtils.eval("".concat(__render.bindScript, "  return ").concat(runText), Object.assign(obj, { __render: __render }));
-                    n = config.window.document.createTextNode(r);
-                }
-                (_a = cNode.parentNode) === null || _a === void 0 ? void 0 : _a.replaceChild(n, cNode);
-            }
-            else if (cNode.nodeType === Node.ELEMENT_NODE) {
-                var element_2 = cNode;
-                var drAttr_1 = {
-                    dr: this_1.getAttributeAndDelete(element_2, RawSet.DR),
-                    drIf: this_1.getAttributeAndDelete(element_2, RawSet.DR_IF_NAME),
-                    drFor: this_1.getAttributeAndDelete(element_2, RawSet.DR_FOR_NAME),
-                    drForOf: this_1.getAttributeAndDelete(element_2, RawSet.DR_FOR_OF_NAME),
-                    drAppender: this_1.getAttributeAndDelete(element_2, RawSet.DR_APPENDER_NAME),
-                    drRepeat: this_1.getAttributeAndDelete(element_2, RawSet.DR_REPEAT_NAME),
-                    drThis: this_1.getAttributeAndDelete(element_2, RawSet.DR_THIS_NAME),
-                    drForm: this_1.getAttributeAndDelete(element_2, RawSet.DR_FORM_NAME),
-                    drPre: this_1.getAttributeAndDelete(element_2, RawSet.DR_PRE_NAME),
-                    drInnerHTML: this_1.getAttributeAndDelete(element_2, RawSet.DR_INNERHTML_NAME),
-                    drInnerText: this_1.getAttributeAndDelete(element_2, RawSet.DR_INNERTEXT_NAME),
-                    drItOption: this_1.getAttributeAndDelete(element_2, RawSet.DR_IT_OPTIONNAME),
-                    drVarOption: this_1.getAttributeAndDelete(element_2, RawSet.DR_VAR_OPTIONNAME),
-                    drNextOption: this_1.getAttributeAndDelete(element_2, RawSet.DR_NEXT_OPTIONNAME),
-                    drAfterOption: this_1.getAttributeAndDelete(element_2, RawSet.DR_AFTER_OPTIONNAME),
-                    drBeforeOption: this_1.getAttributeAndDelete(element_2, RawSet.DR_BEFORE_OPTIONNAME),
-                    drCompleteOption: this_1.getAttributeAndDelete(element_2, RawSet.DR_COMPLETE_OPTIONNAME),
-                    drStripOption: this_1.getAttributeAndDelete(element_2, RawSet.DR_STRIP_OPTIONNAME)
-                };
-                drAttrs.push(drAttr_1);
-                if (drAttr_1.drPre != null) {
-                    return "break";
-                }
-                if (drAttr_1.dr !== null && drAttr_1.dr.length >= 0) {
-                    var itRandom = RawSet.drItOtherEncoding(element_2);
-                    var vars = RawSet.drVarEncoding(element_2, (_b = drAttr_1.drVarOption) !== null && _b !== void 0 ? _b : '');
-                    var newTemp = config.window.document.createElement('temp');
-                    ScriptUtils_1.ScriptUtils.eval("\n                        ".concat(__render.bindScript, "\n                        const n = $element.cloneNode(true);\n                        var destIt = ").concat(drAttr_1.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(obj, {
-                        __render: Object.freeze(__assign({ fag: newTemp, drStripOption: drAttr_1.drStripOption }, __render))
-                    }));
-                    RawSet.drVarDecoding(newTemp, vars);
-                    RawSet.drItOtherDecoding(newTemp, itRandom);
-                    var tempalte = config.window.document.createElement('template');
-                    tempalte.innerHTML = newTemp.innerHTML;
-                    fag.append(tempalte.content);
-                    var rr = RawSet.checkPointCreates(fag, config);
-                    (_c = element_2.parentNode) === null || _c === void 0 ? void 0 : _c.replaceChild(fag, element_2);
-                    raws.push.apply(raws, rr);
-                }
-                else if (drAttr_1.drIf) {
-                    var itRandom = RawSet.drItOtherEncoding(element_2);
-                    var vars = RawSet.drVarEncoding(element_2, (_d = drAttr_1.drVarOption) !== null && _d !== void 0 ? _d : '');
-                    var newTemp = 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_1.ScriptUtils.eval("\n                    ".concat(__render.bindScript, "\n                    ").concat((_e = drAttr_1.drBeforeOption) !== null && _e !== void 0 ? _e : '', "\n                    if ($rawset.data === (").concat(drAttr_1.drIf, ")) {\n                        return false;\n                    } \n                    $rawset.data = ").concat(drAttr_1.drIf, " \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(drAttr_1.drItOption, ";\n                        if (destIt !== undefined) {\n                            n.getAttributeNames().forEach(it => n.setAttribute(it, n.getAttribute(it).replace(/\\#it\\#/g, destIt)))\n                            n.innerHTML = n.innerHTML.replace(/\\#it\\#/g, destIt);\n                        }\n                        if (this.__render.drStripOption === '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((_f = drAttr_1.drAfterOption) !== null && _f !== void 0 ? _f : '', ";\n                    return true;\n                    "), Object.assign(obj, {
-                        __render: Object.freeze(__assign({ fag: newTemp, drAttr: drAttr_1, drAttrsOriginName: RawSet.drAttrsOriginName, drStripOption: drAttr_1.drStripOption }, __render))
-                    }));
-                    // console.log('keepgoing', keepgoing);
-                    if (keepgoing === false) {
-                        return { value: raws };
-                    }
-                    RawSet.drVarDecoding(newTemp, vars);
-                    RawSet.drItOtherDecoding(newTemp, itRandom);
-                    var bypass = ((_g = newTemp.innerHTML) !== null && _g !== void 0 ? _g : '').trim().length <= 0;
-                    var tempalte = config.window.document.createElement('template');
-                    tempalte.innerHTML = newTemp.innerHTML;
-                    // console.log(tempalte.innerHTML)
-                    fag.append(tempalte.content);
-                    var rr = RawSet.checkPointCreates(fag, config);
-                    (_h = element_2.parentNode) === null || _h === void 0 ? void 0 : _h.replaceChild(fag, element_2);
-                    raws.push.apply(raws, rr);
-                    if (bypass) {
-                        return "continue";
-                    }
-                }
-                else if (drAttr_1.drThis) {
-                    var r = ScriptUtils_1.ScriptUtils.evalReturn(drAttr_1.drThis, obj);
-                    if (r) {
-                        fag.append(RawSet.drThisCreate(element_2, drAttr_1.drThis, (_j = drAttr_1.drVarOption) !== null && _j !== void 0 ? _j : '', drAttr_1.drStripOption, obj, config));
-                        var rr = RawSet.checkPointCreates(fag, config);
-                        (_k = element_2.parentNode) === null || _k === void 0 ? void 0 : _k.replaceChild(fag, element_2);
-                        raws.push.apply(raws, rr);
-                    }
-                    else {
-                        cNode.remove();
-                    }
-                }
-                else if (drAttr_1.drForm) {
-                    RawSet.drFormOtherMoveAttr(element_2, 'name', 'temp-name', config);
-                    var data = ScriptUtils_1.ScriptUtils.evalReturn("".concat(drAttr_1.drForm), obj);
-                    var childs = Array.from(element_2.querySelectorAll('[name]'));
-                    var fromName = ScriptUtils_1.ScriptUtils.evalReturn((_l = element_2.getAttribute('dr-form:name')) !== null && _l !== void 0 ? _l : '', obj);
-                    var thisName = fromName !== null && fromName !== void 0 ? fromName : element_2.getAttribute('name');
-                    // console.log('dr-form:name', thisName, element.getAttribute('dr-form:name'), obj, element);
-                    // // 자기자신이 Input 대상일때
-                    if (childs.length <= 0 && thisName) {
-                        childs.push(element_2);
-                    }
-                    else {
-                        if (data instanceof Validator_1.Validator) {
-                            data.setTarget(element_2);
-                        }
-                    }
-                    childs.forEach(function (it) {
-                        var _a, _b, _c, _d, _e;
-                        var eventName = (_a = it.getAttribute('dr-form:event')) !== null && _a !== void 0 ? _a : 'change';
-                        var validatorName = it.getAttribute('dr-form:validator');
-                        var attrEventName = EventManager_1.EventManager.attrPrefix + 'event-' + eventName;
-                        var varpath = (_c = ScriptUtils_1.ScriptUtils.evalReturn((_b = element_2.getAttribute('dr-form:name')) !== null && _b !== void 0 ? _b : '', obj)) !== null && _c !== void 0 ? _c : it.getAttribute('name');
-                        if (varpath != null) {
-                            if (validatorName) {
-                                ScriptUtils_1.ScriptUtils.eval("\n                                    ".concat(__render.bindScript, "\n                                    const validator = typeof ").concat(validatorName, " ==='function' ?  new  ").concat(validatorName, "() : ").concat(validatorName, ";\n                                    ").concat(drAttr_1.drForm, "['").concat(varpath, "'] = validator;\n                                "), Object.assign(obj, {
-                                    __render: Object.freeze(__assign({ drStripOption: drAttr_1.drStripOption }, __render))
-                                }));
-                            }
-                            varpath = "".concat(drAttr_1.drForm, "['").concat(varpath, "']");
-                            var data_1 = ScriptUtils_1.ScriptUtils.evalReturn("".concat(varpath), obj);
-                            if (data_1 instanceof ValidatorArray_1.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_1.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(element_2, 'temp-name', 'name', config);
-                    raws.push.apply(raws, RawSet.checkPointCreates(element_2, config));
-                }
-                else if (drAttr_1.drInnerText) {
-                    var newTemp = config.window.document.createElement('temp');
-                    ScriptUtils_1.ScriptUtils.eval(" \n                        ".concat(__render.bindScript, "\n                        const n = $element.cloneNode(true);  \n                        ").concat((_m = drAttr_1.drBeforeOption) !== null && _m !== void 0 ? _m : '', "\n                        n.innerText = ").concat(drAttr_1.drInnerText, ";\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((_o = drAttr_1.drAfterOption) !== null && _o !== void 0 ? _o : '', "\n                    "), Object.assign(obj, {
-                        __render: Object.freeze(__assign({ drStripOption: drAttr_1.drStripOption, fag: newTemp }, __render))
-                    }));
-                    var tempalte = config.window.document.createElement('template');
-                    tempalte.innerHTML = newTemp.innerHTML;
-                    fag.append(tempalte.content);
-                    var rr = RawSet.checkPointCreates(fag, config);
-                    (_p = element_2.parentNode) === null || _p === void 0 ? void 0 : _p.replaceChild(fag, element_2);
-                    raws.push.apply(raws, rr);
-                }
-                else if (drAttr_1.drInnerHTML) {
-                    var newTemp = config.window.document.createElement('temp');
-                    ScriptUtils_1.ScriptUtils.eval("\n                        ".concat(__render.bindScript, "\n                        const n = $element.cloneNode(true);\n                        ").concat((_q = drAttr_1.drBeforeOption) !== null && _q !== void 0 ? _q : '', "\n                        n.innerHTML = ").concat(drAttr_1.drInnerHTML, ";\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((_r = drAttr_1.drAfterOption) !== null && _r !== void 0 ? _r : '', "\n                    "), Object.assign(obj, {
-                        __render: Object.freeze(__assign({ drStripOption: drAttr_1.drStripOption, fag: newTemp }, __render
-                        // eslint-disable-next-line no-use-before-define
-                        ))
-                    }));
-                    var tempalte = config.window.document.createElement('template');
-                    tempalte.innerHTML = newTemp.innerHTML;
-                    fag.append(tempalte.content);
-                    var rr = RawSet.checkPointCreates(fag, config);
-                    (_s = element_2.parentNode) === null || _s === void 0 ? void 0 : _s.replaceChild(fag, element_2);
-                    raws.push.apply(raws, rr);
-                }
-                else if (drAttr_1.drFor) {
-                    var itRandom = RawSet.drItOtherEncoding(element_2);
-                    var vars = RawSet.drVarEncoding(element_2, (_t = drAttr_1.drVarOption) !== null && _t !== void 0 ? _t : '');
-                    var newTemp = config.window.document.createElement('temp');
-                    ScriptUtils_1.ScriptUtils.eval("\n                    ".concat(__render.bindScript, "\n                    ").concat((_u = drAttr_1.drBeforeOption) !== null && _u !== void 0 ? _u : '', "\n                    for(").concat(drAttr_1.drFor, ") {\n                        const n = this.__render.element.cloneNode(true);\n                        var destIt = ").concat(drAttr_1.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((_v = drAttr_1.drAfterOption) !== null && _v !== void 0 ? _v : '', "\n                    "), Object.assign(obj, {
-                        __render: Object.freeze(__assign({ fag: newTemp, drStripOption: drAttr_1.drStripOption }, __render))
-                    }));
-                    RawSet.drVarDecoding(newTemp, vars);
-                    RawSet.drItOtherDecoding(newTemp, itRandom);
-                    var tempalte = config.window.document.createElement('template');
-                    tempalte.innerHTML = newTemp.innerHTML;
-                    fag.append(tempalte.content);
-                    var rr = RawSet.checkPointCreates(fag, config);
-                    (_w = element_2.parentNode) === null || _w === void 0 ? void 0 : _w.replaceChild(fag, element_2);
-                    raws.push.apply(raws, rr);
-                }
-                else if (drAttr_1.drForOf) {
-                    var itRandom = RawSet.drItOtherEncoding(element_2);
-                    var vars = RawSet.drVarEncoding(element_2, (_x = drAttr_1.drVarOption) !== null && _x !== void 0 ? _x : '');
-                    var newTemp = config.window.document.createElement('temp');
-                    ScriptUtils_1.ScriptUtils.eval("\n                    ".concat(__render.bindScript, "\n                    ").concat((_y = drAttr_1.drBeforeOption) !== null && _y !== void 0 ? _y : '', "\n                    var i = 0; \n                    const forOf = ").concat(drAttr_1.drForOf, ";\n                    const forOfStr = `").concat(drAttr_1.drForOf, "`.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(drAttr_1.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(drAttr_1.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((_z = drAttr_1.drAfterOption) !== null && _z !== void 0 ? _z : '', "\n                    "), Object.assign(obj, {
-                        __render: Object.freeze(__assign({ drStripOption: drAttr_1.drStripOption, drAttr: drAttr_1, drAttrsOriginName: RawSet.drAttrsOriginName, fag: newTemp }, __render
-                        // eslint-disable-next-line no-use-before-define
-                        ))
-                    }));
-                    RawSet.drVarDecoding(newTemp, vars);
-                    RawSet.drItOtherDecoding(newTemp, itRandom);
-                    var tempalte = config.window.document.createElement('template');
-                    tempalte.innerHTML = newTemp.innerHTML;
-                    fag.append(tempalte.content);
-                    var rr = RawSet.checkPointCreates(fag, config);
-                    (_0 = element_2.parentNode) === null || _0 === void 0 ? void 0 : _0.replaceChild(fag, element_2);
-                    // const rrr = rr.flatMap(it => it.render(obj, config));// .flat();
-                    raws.push.apply(raws, rr);
-                }
-                else if (drAttr_1.drAppender) {
-                    var itRandom = RawSet.drItOtherEncoding(element_2);
-                    var vars = RawSet.drVarEncoding(element_2, (_1 = drAttr_1.drVarOption) !== null && _1 !== void 0 ? _1 : '');
-                    var newTemp = config.window.document.createElement('temp');
-                    ScriptUtils_1.ScriptUtils.eval("\n                    try{\n                    ".concat(__render.bindScript, "\n                    ").concat((_2 = drAttr_1.drBeforeOption) !== null && _2 !== void 0 ? _2 : '', "\n                        const ifWrap = document.createElement('div');\n                        ifWrap.setAttribute('dr-strip', 'true');\n                        ifWrap.setAttribute('dr-if', '").concat(drAttr_1.drAppender, " && ").concat(drAttr_1.drAppender, ".length > 0');\n                        \n                        // console.log('----', ").concat(drAttr_1.drAppender, ".length);\n                        \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(drAttr_1.drAppender, "[' + (").concat(drAttr_1.drAppender, ".length-1) + ']');\n                        n.setAttribute('dr-next', '").concat(drAttr_1.drAppender, ",' + ").concat(drAttr_1.drAppender, ".length);\n                        ifWrap.append(n);\n                        \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                        this.__render.fag.append(ifWrap);\n                    ").concat((_3 = drAttr_1.drAfterOption) !== null && _3 !== void 0 ? _3 : '', "\n                    }catch(e){}\n                    "), Object.assign(obj, {
-                        __render: Object.freeze(__assign({ drStripOption: drAttr_1.drStripOption, drAttr: drAttr_1, drAttrsOriginName: RawSet.drAttrsOriginName, fag: newTemp }, __render
-                        // eslint-disable-next-line no-use-before-define
-                        ))
-                    }));
-                    RawSet.drVarDecoding(newTemp, vars);
-                    RawSet.drItOtherDecoding(newTemp, itRandom);
-                    var tempalte = config.window.document.createElement('template');
-                    tempalte.innerHTML = newTemp.innerHTML;
-                    fag.append(tempalte.content);
-                    var rr = RawSet.checkPointCreates(fag, config);
-                    (_4 = element_2.parentNode) === null || _4 === void 0 ? void 0 : _4.replaceChild(fag, element_2);
-                    // const rrr = rr.flatMap(it => it.render(obj, config));// .flat();
-                    raws.push.apply(raws, rr);
-                }
-                else if (drAttr_1.drRepeat) {
-                    var itRandom = RawSet.drItOtherEncoding(element_2);
-                    var vars = RawSet.drVarEncoding(element_2, (_5 = drAttr_1.drVarOption) !== null && _5 !== void 0 ? _5 : '');
-                    var newTemp = config.window.document.createElement('temp');
-                    ScriptUtils_1.ScriptUtils.eval("\n                    ".concat(__render.bindScript, "\n                    ").concat((_6 = drAttr_1.drBeforeOption) !== null && _6 !== void 0 ? _6 : '', "\n                    var i = 0; \n                    const repeat = ").concat(drAttr_1.drRepeat, ";\n                    const repeatStr = `").concat(drAttr_1.drRepeat, "`;\n                    let range = repeat;\n                    if (typeof repeat === 'number') {\n                        range = ").concat(EventManager_1.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((_7 = drAttr_1.drAfterOption) !== null && _7 !== void 0 ? _7 : '', "\n                    "), Object.assign(obj, {
-                        __render: Object.freeze(__assign({ fag: newTemp, drStripOption: drAttr_1.drStripOption }, __render))
-                    }));
-                    RawSet.drVarDecoding(newTemp, vars);
-                    RawSet.drItOtherDecoding(newTemp, itRandom);
-                    var tempalte = config.window.document.createElement('template');
-                    tempalte.innerHTML = newTemp.innerHTML;
-                    fag.append(tempalte.content);
-                    var rr = RawSet.checkPointCreates(fag, config);
-                    (_8 = element_2.parentNode) === null || _8 === void 0 ? void 0 : _8.replaceChild(fag, element_2);
-                    raws.push.apply(raws, rr);
-                }
-                else {
-                    // config detecting
-                    // console.log('config targetElement-->', config?.targetElements)
-                    // const targetElement = config?.targetElements?.find(it => (!drAttr.drIf && !drAttr.drForOf && !drAttr.drFor && !drAttr.drRepeat) && it.name.toLowerCase() === element.tagName.toLowerCase());
-                    var targetElement = (_9 = config === null || config === void 0 ? void 0 : config.targetElements) === null || _9 === void 0 ? void 0 : _9.find(function (it) { return it.name.toLowerCase() === element_2.tagName.toLowerCase(); });
-                    if (targetElement) {
-                        var documentFragment_1 = targetElement.callBack(element_2, obj, this_1);
-                        // console.log('target-->',name, documentFragment)
-                        if (documentFragment_1) {
-                            var detectAction_1 = element_2.getAttribute(RawSet.DR_DETECT_NAME);
-                            if (detectAction_1 && documentFragment_1.render) {
-                                this_1.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_1.ScriptUtils.eval(script, Object.assign(obj, {
-                                            __render: documentFragment_1.render
-                                        }));
-                                    }
-                                };
-                            }
-                            // fag.append(documentFragment)
-                            var rr = RawSet.checkPointCreates(documentFragment_1, config);
-                            (_10 = element_2.parentNode) === null || _10 === void 0 ? void 0 : _10.replaceChild(documentFragment_1, element_2);
-                            raws.push.apply(raws, rr);
-                            onElementInitCallBack.push({
-                                name: targetElement.name.toLowerCase(),
-                                obj: obj,
-                                targetElement: targetElement,
-                                creatorMetaData: targetElement.__creatorMetaData
-                            });
-                            (_11 = targetElement === null || targetElement === void 0 ? void 0 : targetElement.complete) === null || _11 === void 0 ? void 0 : _11.call(targetElement, element_2, obj, this_1);
-                        }
-                    }
-                    var attributeNames_1 = this_1.getAttributeNames(element_2);
-                    // const targetAttr = config?.targetAttrs?.find(it => (!drAttr.drForOf && !drAttr.drFor && !drAttr.drRepeat) && attributeNames.includes(it.name));
-                    var targetAttr = (_12 = config === null || config === void 0 ? void 0 : config.targetAttrs) === null || _12 === void 0 ? void 0 : _12.find(function (it) { return attributeNames_1.includes(it.name); });
-                    if (targetAttr) {
-                        var attrName = targetAttr.name;
-                        var attrValue = this_1.getAttributeAndDelete(element_2, attrName);
-                        if (attrValue && attrName && (!drAttr_1.drForOf && !drAttr_1.drFor && !drAttr_1.drRepeat)) {
-                            var documentFragment = targetAttr.callBack(element_2, attrValue, obj, this_1);
-                            if (documentFragment) {
-                                var rr = RawSet.checkPointCreates(documentFragment, config);
-                                (_13 = element_2.parentNode) === null || _13 === void 0 ? void 0 : _13.replaceChild(documentFragment, element_2);
-                                raws.push.apply(raws, rr);
-                                onAttrInitCallBack.push({
-                                    attrName: attrName,
-                                    attrValue: attrValue,
-                                    obj: obj
-                                });
-                                (_14 = targetAttr === null || targetAttr === void 0 ? void 0 : targetAttr.complete) === null || _14 === void 0 ? void 0 : _14.call(targetAttr, element_2, attrValue, obj, this_1);
-                            }
-                        }
-                    }
-                }
-            }
-        };
-        var this_1 = this;
-        for (var _i = 0, _23 = Array.from(genNode.childNodes.values()); _i < _23.length; _i++) {
-            var cNode = _23[_i];
-            var state_1 = _loop_1(cNode);
-            if (typeof state_1 === "object")
-                return state_1.value;
-            if (state_1 === "break")
-                break;
-        }
-        this.applyEvent(obj, genNode, config);
-        this.replaceBody(genNode);
-        drAttrs.forEach(function (it) {
-            if (it.drCompleteOption) {
-                // genNode.childNodes
-                ScriptUtils_1.ScriptUtils.eval("\n                const ".concat(EventManager_1.EventManager.FAG_VARNAME, " = this.__render.fag;\n                const ").concat(EventManager_1.EventManager.SCRIPTS_VARNAME, " = this.__render.scripts;\n                const ").concat(EventManager_1.EventManager.RAWSET_VARNAME, " = this.__render.rawset;\n                ").concat(it.drCompleteOption, "\n                "), Object.assign(obj, {
-                    __render: Object.freeze({
-                        rawset: _this,
-                        fag: genNode,
-                        scripts: EventManager_1.EventManager.setBindProperty(config === null || config === void 0 ? void 0 : config.scripts, obj)
-                    })
-                }));
-            }
-        });
-        for (var _24 = 0, onElementInitCallBack_1 = onElementInitCallBack; _24 < onElementInitCallBack_1.length; _24++) {
-            var it_1 = onElementInitCallBack_1[_24];
-            (_18 = (_17 = (_16 = (_15 = it_1.targetElement) === null || _15 === void 0 ? void 0 : _15.__render) === null || _16 === void 0 ? void 0 : _16.component) === null || _17 === void 0 ? void 0 : _17.onInitRender) === null || _18 === void 0 ? void 0 : _18.call(_17, { render: (_19 = it_1.targetElement) === null || _19 === void 0 ? void 0 : _19.__render, creatorMetaData: (_20 = it_1.targetElement) === null || _20 === void 0 ? void 0 : _20.__creatorMetaData });
-            var r = (_21 = config === null || config === void 0 ? void 0 : config.onElementInit) === null || _21 === void 0 ? void 0 : _21.call(config, it_1.name, obj, this, it_1.targetElement);
-        }
-        for (var _25 = 0, onAttrInitCallBack_1 = onAttrInitCallBack; _25 < onAttrInitCallBack_1.length; _25++) {
-            var it_2 = onAttrInitCallBack_1[_25];
-            var r = (_22 = config === null || config === void 0 ? void 0 : config.onAttrInit) === null || _22 === void 0 ? void 0 : _22.call(config, it_2.attrName, it_2.attrValue, obj, this);
-        }
-        return raws;
-    };
-    RawSet.prototype.applyEvent = function (obj, fragment, config) {
-        if (fragment === void 0) { fragment = this.fragment; }
-        EventManager_1.eventManager.applyEvent(obj, EventManager_1.eventManager.findAttrElements(fragment, config), config);
-    };
-    RawSet.prototype.getAttributeNames = function (element) {
-        return element.getAttributeNames();
-    };
-    RawSet.prototype.getAttribute = function (element, attr) {
-        var data = element.getAttribute(attr);
-        return data;
-    };
-    RawSet.prototype.getAttributeAndDelete = function (element, attr) {
-        var data = element.getAttribute(attr);
-        element.removeAttribute(attr);
-        return data;
-    };
-    RawSet.prototype.getDrAppendAttributeAndDelete = function (element, obj) {
-        var data = element.getAttribute(RawSet.DR_APPENDER_NAME);
-        // if (data && !/\[[0-9]+\]/g.test(data)) {
-        if (data && !/\[.+\]/g.test(data)) {
-            var currentIndex = ScriptUtils_1.ScriptUtils.evalReturn("".concat(data, "?.length -1"), obj);
-            // console.log('------?', currentIndex)
-            // if (currentIndex === undefined || isNaN(currentIndex)) {
-            //     return undefined;
-            // }
-            // const currentIndex = ScriptUtils.evalReturn(`${data}.length`, obj);
-            data = "".concat(data, "[").concat(currentIndex, "]");
-            element.setAttribute(RawSet.DR_APPENDER_NAME, data);
-            // element.setAttribute(RawSet.DR_IF_NAME, data);
-            // element.setAttribute('dr-id', data);
-            // console.log('-->', element)
-        }
-        // if (data && !/\.childs\[[0-9]+\]/g.test(data)) {
-        //     const currentIndex = ScriptUtils.evalReturn(`${data}.currentIndex`, obj);
-        //     data = `${data}.childs[${currentIndex}]`;
-        //     element.setAttribute(RawSet.DR_APPENDER_NAME, data)
-        // }
-        element.removeAttribute(RawSet.DR_APPENDER_NAME);
-        return data;
-    };
-    RawSet.prototype.replaceBody = function (genNode) {
-        var _a;
-        this.childAllRemove();
-        (_a = this.point.start.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(genNode, this.point.start.nextSibling);
-    };
-    RawSet.checkPointCreates = function (element, config) {
-        var _a, _b, _c, _d;
-        var thisVariableName = element.__domrender_this_variable_name;
-        // console.log('checkPointCreates thisVariableName', thisVariableName);
-        var nodeIterator = config.window.document.createNodeIterator(element, NodeFilter.SHOW_ALL, {
-            acceptNode: function (node) {
-                var _a, _b, _c, _d, _e;
-                if (node.nodeType === Node.TEXT_NODE) {
-                    // console.log('????????', node.parentElement, node.parentElement?.getAttribute('dr-pre'));
-                    // console.log('???????/',node.textContent, node.parentElement?.getAttribute('dr-pre'))
-                    // 나중에
-                    // const between = StringUtils.betweenRegexpStr('[$#]\\{', '\\}', StringUtils.deleteEnter((node as Text).data ?? ''))
-                    var between = RawSet.exporesionGrouops(StringUtils_1.StringUtils.deleteEnter((_a = node.data) !== null && _a !== void 0 ? _a : ''));
-                    // console.log('bbbb', between)
-                    return (between === null || between === void 0 ? void 0 : between.length) > 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
-                    // return /\$\{.*?\}/g.test(StringUtils.deleteEnter((node as Text).data ?? '')) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
-                    // return /[$#]\{.*?\}/g.test(StringUtils.deleteEnter((node as Text).data ?? '')) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
-                }
-                else if (node.nodeType === Node.ELEMENT_NODE) {
-                    var element_3 = node;
-                    var isElement = ((_c = (_b = config.targetElements) === null || _b === void 0 ? void 0 : _b.map(function (it) { return it.name.toLowerCase(); })) !== null && _c !== void 0 ? _c : []).includes(element_3.tagName.toLowerCase());
-                    var targetAttrNames_1 = ((_e = (_d = config.targetAttrs) === null || _d === void 0 ? void 0 : _d.map(function (it) { return it.name; })) !== null && _e !== void 0 ? _e : []).concat(RawSet.DR_ATTRIBUTES);
-                    var isAttr = element_3.getAttributeNames().filter(function (it) { return targetAttrNames_1.includes(it.toLowerCase()); }).length > 0;
-                    return (isAttr || isElement) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
-                }
-                return NodeFilter.FILTER_REJECT;
-            }
-        });
-        var pars = [];
-        var currentNode;
-        var _loop_2 = function () {
-            if (currentNode.nodeType === Node.TEXT_NODE) {
-                var text = (_a = currentNode.textContent) !== null && _a !== void 0 ? _a : '';
-                var template_1 = config.window.document.createElement('template');
-                // const a = StringUtils.regexExec(/\$\{.*?\}/g, text);
-                // const a = StringUtils.regexExec(/[$#]\{.*?\}/g, text);
-                // const a = StringUtils.betweenRegexpStr('[$#]\\{', '\\}', text); // <--나중에..
-                var a = RawSet.exporesionGrouops(text); // <--나중에..
-                var map = a.map(function (it) {
-                    return {
-                        uuid: RandomUtils_1.RandomUtils.uuid(),
-                        content: it[0],
-                        regexArr: it
-                    };
-                });
-                var lasterIndex_1 = 0;
-                map.forEach(function (it) {
-                    var regexArr = it.regexArr;
-                    var preparedText = regexArr.input.substring(lasterIndex_1, regexArr.index);
-                    var start = config.window.document.createComment("start text ".concat(it.uuid));
-                    var end = config.window.document.createComment("end text ".concat(it.uuid));
-                    // layout setting
-                    template_1.content.append(document.createTextNode(preparedText)); // 사이사이값.
-                    template_1.content.append(start);
-                    template_1.content.append(end);
-                    // content
-                    var fragment = config.window.document.createDocumentFragment();
-                    fragment.append(config.window.document.createTextNode(it.content));
-                    pars.push(new RawSet(it.uuid, {
-                        start: start,
-                        end: end,
-                        thisVariableName: thisVariableName
-                    }, fragment));
-                    lasterIndex_1 = regexArr.index + it.content.length;
-                });
-                template_1.content.append(config.window.document.createTextNode(text.substring(lasterIndex_1, text.length)));
-                (_b = currentNode === null || currentNode === void 0 ? void 0 : currentNode.parentNode) === null || _b === void 0 ? void 0 : _b.replaceChild(template_1.content, currentNode);
-            }
-            else {
-                var uuid = RandomUtils_1.RandomUtils.uuid();
-                var fragment = config.window.document.createDocumentFragment();
-                var start = config.window.document.createComment("start ".concat(uuid));
-                var end = config.window.document.createComment("end ".concat(uuid));
-                // console.log('start--', uuid)
-                (_c = currentNode === null || currentNode === void 0 ? void 0 : currentNode.parentNode) === null || _c === void 0 ? void 0 : _c.insertBefore(start, currentNode);
-                (_d = currentNode === null || currentNode === void 0 ? void 0 : currentNode.parentNode) === null || _d === void 0 ? void 0 : _d.insertBefore(end, currentNode.nextSibling);
-                fragment.append(currentNode);
-                pars.push(new RawSet(uuid, {
-                    start: start,
-                    end: end,
-                    thisVariableName: thisVariableName
-                }, fragment));
-            }
-        };
-        // eslint-disable-next-line no-cond-assign
-        while (currentNode = nodeIterator.nextNode()) {
-            _loop_2();
-        }
-        // console.log('check-->', pars)
-        return pars;
-    };
-    RawSet.prototype.childAllRemove = function () {
-        var next = this.point.start.nextSibling;
-        while (next) {
-            if (next === this.point.end) {
-                break;
-            }
-            next.remove();
-            next = this.point.start.nextSibling;
-        }
-    };
-    RawSet.drItOtherEncoding = function (element) {
-        var random = RandomUtils_1.RandomUtils.uuid();
-        var regex = /#it#/g;
-        element.querySelectorAll("[".concat(RawSet.DR_IT_OPTIONNAME, "], [").concat(RawSet.DR_FOR_OF_NAME, "], [").concat(RawSet.DR_REPEAT_NAME, "]")).forEach(function (it) {
-            it.innerHTML = it.innerHTML.replace(regex, random);
-        });
-        return random;
-    };
-    RawSet.drItOtherDecoding = function (element, random) {
-        element.querySelectorAll("[".concat(RawSet.DR_IT_OPTIONNAME, "], [").concat(RawSet.DR_FOR_OF_NAME, "], [").concat(RawSet.DR_REPEAT_NAME, "]")).forEach(function (it) {
-            it.innerHTML = it.innerHTML.replace(RegExp(random, 'g'), '#it#');
-        });
-    };
-    // public static drDVarEncoding(element: Element, drVarOption: string) {
-    //     const vars = (drVarOption?.split(',') ?? []).map(it => {
-    //         const s = it.trim().split('=');
-    //         return {
-    //             name: s[0],
-    //             value: s[1],
-    //             regex: RegExp('(?<!(dr-|\\.))var\\.' + s[0] + '(?=.?)', 'g'),
-    //             random: RandomUtils.uuid()
-    //         }
-    //     })
-    //     element.querySelectorAll(`[${RawSet.DR_THIS_NAME}]`).forEach(it => {
-    //         vars.filter(vit => vit.value && vit.name).forEach(vit => {
-    //             it.innerHTML = it.innerHTML.replace(vit.regex, vit.random);
-    //         })
-    //     });
-    //     vars.filter(vit => vit.value && vit.name).forEach(vit => {
-    //         element.innerHTML = element.innerHTML.replace(vit.regex, vit.value);
-    //     })
-    //     return vars;
-    // }
-    //
-    // public static drDVarDecoding(element: Element, vars: { name: string, value: string, regex: RegExp, random: string }[]) {
-    //     element.querySelectorAll(`[${RawSet.DR_THIS_NAME}]`).forEach(it => {
-    //         vars.filter(vit => vit.value && vit.name).forEach(vit => {
-    //             it.innerHTML = it.innerHTML.replace(RegExp(vit.random, 'g'), vit.value);
-    //         })
-    //     });
-    // }
-    RawSet.drThisEncoding = function (element, drThis) {
-        var thisRandom = RandomUtils_1.RandomUtils.uuid();
-        // const thisRegex = /(?<!(dr-|\.))this(?=.?)/g;
-        // const thisRegex = /[^(dr\-)]this(?=.?)/g;
-        // const thisRegex = /[^(dr\-)]this\./g;
-        // safari 때문에 전위 검색 regex가 안됨 아 짜증나서 이걸로함.
-        // element.querySelectorAll(`[${RawSet.DR_PRE_NAME}]`).forEach(it => {
-        //     let message = it.innerHTML;
-        // })
-        // console.log('-----?', `[${RawSet.DR_THIS_NAME}], :not([${RawSet.DR_PRE_NAME}])`)
-        element.querySelectorAll("[".concat(RawSet.DR_PRE_NAME, "]")).forEach(function (it) {
-            it.innerHTML = it.innerHTML.replace(/this/g, thisRandom);
-        });
-        element.querySelectorAll("[".concat(RawSet.DR_THIS_NAME, "]")).forEach(function (it) {
-            var message = it.innerHTML;
-            StringUtils_1.StringUtils.regexExec(/([^(dr\-)])?this(?=.?)/g, message).reverse().forEach(function (it) {
-                var _a;
-                message = message.substr(0, it.index) + message.substr(it.index).replace(it[0], "".concat((_a = it[1]) !== null && _a !== void 0 ? _a : '').concat(drThis));
-            });
-            it.innerHTML = message;
-        });
-        var message = element.innerHTML;
-        StringUtils_1.StringUtils.regexExec(/([^(dr\-)])?this(?=.?)/g, message).reverse().forEach(function (it) {
-            var _a;
-            message = message.substr(0, it.index) + message.substr(it.index).replace(it[0], "".concat((_a = it[1]) !== null && _a !== void 0 ? _a : '').concat(drThis));
-        });
-        element.innerHTML = message;
-        return thisRandom;
-    };
-    RawSet.drThisDecoding = function (element, thisRandom) {
-        element.querySelectorAll("[".concat(RawSet.DR_PRE_NAME, "]")).forEach(function (it) {
-            it.innerHTML = it.innerHTML.replace(RegExp(thisRandom, 'g'), 'this');
-        });
-        element.querySelectorAll("[".concat(RawSet.DR_THIS_NAME, "]")).forEach(function (it) {
-            it.innerHTML = it.innerHTML.replace(RegExp(thisRandom, 'g'), 'this');
-        });
-    };
-    RawSet.drFormOtherMoveAttr = function (element, as, to, config) {
-        element.querySelectorAll("[".concat(RawSet.DR_FORM_NAME, "]")).forEach(function (subElement) {
-            var _a;
-            var nodeIterator = config.window.document.createNodeIterator(subElement, NodeFilter.SHOW_ELEMENT, {
-                acceptNode: function (node) {
-                    if (node.nodeType === Node.ELEMENT_NODE) {
-                        var element_4 = node;
-                        return element_4.hasAttribute(as) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
-                    }
-                    else {
-                        return NodeFilter.FILTER_REJECT;
-                    }
-                }
-            });
-            var node;
-            // eslint-disable-next-line no-cond-assign
-            while (node = nodeIterator.nextNode()) {
-                var element_5 = node;
-                element_5.setAttribute(to, (_a = element_5.getAttribute(as)) !== null && _a !== void 0 ? _a : '');
-                element_5.removeAttribute(as);
-            }
-        });
-    };
-    RawSet.drVarEncoding = function (element, drVarOption) {
-        var _a;
-        var vars = ((_a = drVarOption === null || drVarOption === void 0 ? void 0 : drVarOption.split(',')) !== null && _a !== void 0 ? _a : []).map(function (it) {
-            var _a, _b;
-            var s = it.trim().split('=');
-            var name = (_a = s[0]) === null || _a === void 0 ? void 0 : _a.trim();
-            var value = (_b = s[1]) === null || _b === void 0 ? void 0 : _b.trim();
-            return {
-                name: name,
-                value: value,
-                // regex: RegExp('(?<!(dr-|\\.))var\\.' + s[0] + '(?=.?)', 'g'),
-                regex: RegExp('\\$var\\.' + name + '(?=.?)', 'g'),
-                random: RandomUtils_1.RandomUtils.uuid()
-            };
-        });
-        // element.querySelectorAll(`[${RawSet.DR_THIS_NAME}]`).forEach(it => {
-        element.querySelectorAll("[".concat(RawSet.DR_VAR_OPTIONNAME, "]")).forEach(function (it) {
-            vars.filter(function (vit) { return vit.value && vit.name; }).forEach(function (vit) {
-                it.innerHTML = it.innerHTML.replace(vit.regex, vit.random);
-            });
-        });
-        vars.filter(function (vit) { return vit.value && vit.name; }).forEach(function (vit) {
-            element.innerHTML = element.innerHTML.replace(vit.regex, vit.value);
-        });
-        return vars;
-    };
-    RawSet.drVarDecoding = function (element, vars) {
-        element.querySelectorAll("[".concat(RawSet.DR_THIS_NAME, "]")).forEach(function (it) {
-            vars.filter(function (vit) { return vit.value && vit.name; }).forEach(function (vit) {
-                it.innerHTML = it.innerHTML.replace(RegExp(vit.random, 'g'), vit.value);
-            });
-        });
-    };
-    RawSet.drThisCreate = function (element, drThis, drVarOption, drStripOption, obj, config) {
-        var fag = config.window.document.createDocumentFragment();
-        var n = element.cloneNode(true);
-        n.querySelectorAll(EventManager_1.eventManager.attrNames.map(function (it) { return "[".concat(it, "]"); }).join(',')).forEach(function (it) {
-            it.setAttribute(EventManager_1.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')) {
-            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 = {
-            name: name,
-            callBack: function (element, attrValue, obj, rawSet) {
-                var _a;
-                var thisObj = getThisObj(element, attrValue, obj, rawSet);
-                var data = factory(element, attrValue, obj, rawSet);
-                rawSet.point.thisVariableName = data.__domrender_this_variable_name;
-                if (thisObj) {
-                    var i = thisObj.__domrender_component_new = ((_a = thisObj.__domrender_component_new) !== null && _a !== void 0 ? _a : new Proxy({}, new Types_1.DomRenderFinalProxy()));
-                    i.thisVariableName = rawSet.point.thisVariableName;
-                    i.rawSet = rawSet;
-                    i.innerHTML = element.innerHTML;
-                    i.rootCreator = new Proxy(obj, new Types_1.DomRenderFinalProxy());
-                    i.creator = new Proxy(rawSet.point.thisVariableName ? ScriptUtils_1.ScriptUtils.evalReturn(rawSet.point.thisVariableName, obj) : obj, new Types_1.DomRenderFinalProxy());
-                }
-                return data;
-            }
-        };
-        return targetAttribute;
-    };
-    RawSet.createComponentTargetElement = function (name, objFactory, template, styles, config) {
-        if (template === void 0) { template = ''; }
-        if (styles === void 0) { styles = []; }
-        var targetElement = {
-            name: name,
-            styles: styles,
-            template: template,
-            callBack: function (element, obj, rawSet) {
-                var _a, _b, _c, _d;
-                // console.log('callback------->')
-                if (!obj.__domrender_components) {
-                    obj.__domrender_components = {};
-                }
-                var domrenderComponents = obj.__domrender_components;
-                var componentKey = '_' + RandomUtils_1.RandomUtils.getRandomString(20);
-                // console.log('callback settttt---a-->', componentKey, objFactory, objFactory(element, obj, rawSet))
-                domrenderComponents[componentKey] = objFactory(element, obj, rawSet);
-                var instance = domrenderComponents[componentKey];
-                var attribute = DomUtils_1.DomUtils.getAttributeToObject(element);
-                var onCreate = element.getAttribute('dr-on-create');
-                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 render = Object.freeze({
-                    component: instance,
-                    element: element,
-                    innerHTML: element.innerHTML,
-                    attribute: attribute,
-                    rawset: rawSet,
-                    router: config.router,
-                    componentKey: componentKey,
-                    scripts: EventManager_1.EventManager.setBindProperty((_a = config.scripts) !== null && _a !== void 0 ? _a : {}, obj)
-                    // eslint-disable-next-line no-use-before-define
-                });
-                this.__render = render;
-                var createParam;
-                if (onCreate) {
-                    var script = "".concat(renderScript, " return ").concat(onCreate, " ");
-                    createParam = ScriptUtils_1.ScriptUtils.eval(script, obj);
-                    if (createParam) {
-                        (_b = instance === null || instance === void 0 ? void 0 : instance.onCreateRender) === null || _b === void 0 ? void 0 : _b.call(instance, createParam);
-                    }
-                }
-                var i = instance.__domrender_component_new = ((_c = instance.__domrender_component_new) !== null && _c !== void 0 ? _c : new Proxy({}, new Types_1.DomRenderFinalProxy()));
-                i.thisVariableName = rawSet.point.thisVariableName;
-                i.thisFullVariableName = "this.__domrender_components.".concat(componentKey);
-                i.rawSet = rawSet;
-                i.innerHTML = element.innerHTML;
-                i.rootCreator = new Proxy(obj, new Types_1.DomRenderFinalProxy());
-                i.creator = new Proxy(rawSet.point.thisVariableName ? ScriptUtils_1.ScriptUtils.evalReturn(rawSet.point.thisVariableName, obj) : obj, new Types_1.DomRenderFinalProxy());
-                this.__creatorMetaData = i;
-                var applayTemplate = element.innerHTML;
-                var innerHTMLThisRandom;
-                if (applayTemplate) {
-                    // if (rawSet.point.thisVariableName) {
-                    // 넘어온 innerHTML에 this가 있으면 해당안되게 우선 치환.
-                    innerHTMLThisRandom = RandomUtils_1.RandomUtils.uuid();
-                    applayTemplate = applayTemplate.replace(/this\./g, innerHTMLThisRandom);
-                    // }
-                    applayTemplate = applayTemplate.replace(/#component#/g, 'this');
-                }
-                applayTemplate = template.replace(/#innerHTML#/g, applayTemplate);
-                var oninit = element.getAttribute("".concat(EventManager_1.EventManager.attrPrefix, "on-component-init")); // dr-on-component-init
-                if (oninit) {
-                    var script = "".concat(renderScript, "  ").concat(oninit, " ");
-                    ScriptUtils_1.ScriptUtils.eval(script, Object.assign(obj, {
-                        __render: render
-                    }));
-                }
-                var innerHTML = ((_d = styles === null || styles === void 0 ? void 0 : styles.map(function (it) { return "<style>".concat(it, "</style>"); })) !== null && _d !== void 0 ? _d : []).join(' ') + (applayTemplate !== null && applayTemplate !== void 0 ? applayTemplate : '');
-                element.innerHTML = innerHTML;
-                // console.log('------>', element.innerHTML, obj)
-                var data = RawSet.drThisCreate(element, "this.__domrender_components.".concat(componentKey), '', true, obj, config);
-                // 넘어온 innerHTML에 this가 있는걸 다시 복호화해서 제대로 작동하도록한다.
-                if (innerHTMLThisRandom) {
-                    var template_2 = config.window.document.createElement('template');
-                    template_2.content.append(data);
-                    template_2.innerHTML = template_2.innerHTML.replace(RegExp(innerHTMLThisRandom, 'g'), 'this.');
-                    data = template_2.content;
-                }
-                data.render = render;
-                return data;
-            }
-            // complete
-        };
-        return targetElement;
-    };
-    RawSet.exporesionGrouops = function (data) {
-        // const reg = /(?:[$#]\{(?:(([$#]\{)??[^$#]*?)\}[$#]))/g;
-        var reg = /(?:[$#]\{(?:(([$#]\{)??[^$#]?[^{]*?)\}[$#]))/g;
-        return StringUtils_1.StringUtils.regexExec(reg, data);
-    };
-    RawSet.DR = 'dr';
-    RawSet.DR_IF_NAME = 'dr-if';
-    RawSet.DR_FOR_NAME = 'dr-for';
-    RawSet.DR_FOR_OF_NAME = 'dr-for-of';
-    RawSet.DR_REPEAT_NAME = 'dr-repeat';
-    RawSet.DR_THIS_NAME = 'dr-this';
-    RawSet.DR_FORM_NAME = 'dr-form';
-    RawSet.DR_PRE_NAME = 'dr-pre';
-    RawSet.DR_APPENDER_NAME = 'dr-appender';
-    RawSet.DR_INNERHTML_NAME = 'dr-inner-html';
-    RawSet.DR_INNERTEXT_NAME = 'dr-inner-text';
-    RawSet.DR_DETECT_NAME = 'dr-detect';
-    // public static readonly DR_DETECT_ACTION_NAME = 'dr-detect-action';
-    RawSet.DR_IT_OPTIONNAME = 'dr-it';
-    RawSet.DR_VAR_OPTIONNAME = 'dr-var';
-    RawSet.DR_AFTER_OPTIONNAME = 'dr-after';
-    RawSet.DR_NEXT_OPTIONNAME = 'dr-next';
-    RawSet.DR_BEFORE_OPTIONNAME = 'dr-before';
-    RawSet.DR_COMPLETE_OPTIONNAME = 'dr-complete';
-    RawSet.DR_STRIP_OPTIONNAME = 'dr-strip';
-    RawSet.drAttrsOriginName = {
-        dr: RawSet.DR,
-        drIf: RawSet.DR_IF_NAME,
-        drFor: RawSet.DR_FOR_NAME,
-        drForOf: RawSet.DR_FOR_OF_NAME,
-        drAppender: RawSet.DR_APPENDER_NAME,
-        drRepeat: RawSet.DR_REPEAT_NAME,
-        drThis: RawSet.DR_THIS_NAME,
-        drForm: RawSet.DR_FORM_NAME,
-        drPre: RawSet.DR_PRE_NAME,
-        drInnerHTML: RawSet.DR_INNERHTML_NAME,
-        drInnerText: RawSet.DR_INNERTEXT_NAME,
-        drItOption: RawSet.DR_IT_OPTIONNAME,
-        drVarOption: RawSet.DR_VAR_OPTIONNAME,
-        drAfterOption: RawSet.DR_AFTER_OPTIONNAME,
-        drNextOption: RawSet.DR_NEXT_OPTIONNAME,
-        drBeforeOption: RawSet.DR_BEFORE_OPTIONNAME,
-        drCompleteOption: RawSet.DR_COMPLETE_OPTIONNAME,
-        drStripOption: RawSet.DR_STRIP_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];
-    return RawSet;
-}());
-exports.RawSet = RawSet;
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RawSet = exports.DestroyOptionType = void 0;
+var RandomUtils_1 = require("./utils/random/RandomUtils");
+var StringUtils_1 = require("./utils/string/StringUtils");
+var ScriptUtils_1 = require("./utils/script/ScriptUtils");
+var EventManager_1 = require("./events/EventManager");
+var Range_1 = require("./iterators/Range");
+var Types_1 = require("./types/Types");
+var DomUtils_1 = require("./utils/dom/DomUtils");
+var DrPre_1 = require("./operators/DrPre");
+var Dr_1 = require("./operators/Dr");
+var DrIf_1 = require("./operators/DrIf");
+var OperatorRender_1 = require("./operators/OperatorRender");
+var DrThis_1 = require("./operators/DrThis");
+var DrForm_1 = require("./operators/DrForm");
+var DrInnerText_1 = require("./operators/DrInnerText");
+var DrInnerHTML_1 = require("./operators/DrInnerHTML");
+var DrFor_1 = require("./operators/DrFor");
+var DrForOf_1 = require("./operators/DrForOf");
+var DrAppender_1 = require("./operators/DrAppender");
+var DrRepeat_1 = require("./operators/DrRepeat");
+var DrTargetElement_1 = require("./operators/DrTargetElement");
+var DrTargetAttr_1 = require("./operators/DrTargetAttr");
+var AttrExpresion_1 = require("./operators/AttrExpresion");
+var DestroyOptionType;
+(function (DestroyOptionType) {
+    DestroyOptionType["NO_DESTROY"] = "NO_DESTROY";
+    DestroyOptionType["NO_MESSENGER_DESTROY"] = "NO_MESSENGER_DESTROY";
+})(DestroyOptionType = exports.DestroyOptionType || (exports.DestroyOptionType = {}));
+var RawSet = /** @class */ (function () {
+    function RawSet(uuid, point, fragment, detect, data) {
+        if (data === void 0) { data = {}; }
+        this.uuid = uuid;
+        this.point = point;
+        this.fragment = fragment;
+        this.detect = detect;
+        this.data = data;
+    }
+    Object.defineProperty(RawSet.prototype, "isConnected", {
+        get: function () {
+            return this.point.start.isConnected && this.point.end.isConnected;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    // 중요
+    RawSet.prototype.getUsingTriggerVariables = function (config) {
+        var usingTriggerVariables = new Set();
+        this.fragment.childNodes.forEach(function (cNode, key) {
+            var _a, _b, _c;
+            var script = '';
+            if (cNode.nodeType === Node.TEXT_NODE) {
+                script = "`".concat((_a = cNode.textContent) !== null && _a !== void 0 ? _a : '', "`");
+                // console.log('???????', script)
+            }
+            else if (cNode.nodeType === Node.ELEMENT_NODE) {
+                var element_1 = cNode;
+                var targetAttrNames_1 = ((_c = (_b = config === null || config === void 0 ? void 0 : config.targetAttrs) === null || _b === void 0 ? void 0 : _b.map(function (it) { return it.name; })) !== null && _c !== void 0 ? _c : []).concat(RawSet.DR_ATTRIBUTES);
+                script = targetAttrNames_1.map(function (it) {
+                    // console.log('-?', element.getAttribute(it))
+                    return element_1.getAttribute(it);
+                }).filter(function (it) { return it; }).join(';');
+                // console.log('----!!!!!-->', targetAttrNames)
+                var otherAttrs = element_1.getAttributeNames()
+                    .filter(function (it) { return !targetAttrNames_1.includes(it.toLowerCase()) && RawSet.isExporesion(element_1.getAttribute(it)); })
+                    .map(function (it) {
+                    var _a;
+                    return "`".concat((_a = element_1.getAttribute(it)) !== null && _a !== void 0 ? _a : '', "`");
+                }).join(';');
+                script += ';' + otherAttrs;
+            }
+            if (script) {
+                // script = script.replace('}$','}');
+                // console.log('----------->', script)
+                EventManager_1.EventManager.VARNAMES.forEach(function (it) {
+                    // script = script.replace(RegExp(it.replace('$', '\\$'), 'g'), `this?.___${it}`);
+                    // script = script.replace(RegExp(it.replace('$', '\\$'), 'g'), `this.___${it}`);
+                    script = script.replace(RegExp(it.replace('$', '\\$'), 'g'), "this.___".concat(it));
+                    // console.log('scripts-->', script)
+                });
+                // console.log('----------', script);
+                Array.from(ScriptUtils_1.ScriptUtils.getVariablePaths(script)).filter(function (it) { return !it.startsWith("___".concat(EventManager_1.EventManager.SCRIPTS_VARNAME)); }).forEach(function (it) { return usingTriggerVariables.add(it); });
+            }
+        });
+        // console.log('usingTriggerVariable----------->', usingTriggerVariables)
+        return usingTriggerVariables;
+    };
+    RawSet.prototype.render = function (obj, config) {
+        var _this = this;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+        var genNode = config.window.document.importNode(this.fragment, true);
+        var raws = [];
+        var onAttrInitCallBacks = [];
+        var onElementInitCallBacks = [];
+        var onThisComponentSetCallBacks = [];
+        var drAttrs = [];
+        for (var _i = 0, _m = Array.from(genNode.childNodes.values()); _i < _m.length; _i++) {
+            var cNode = _m[_i];
+            var attribute = {};
+            if (cNode.nodeType === Node.ELEMENT_NODE) {
+                attribute = DomUtils_1.DomUtils.getAttributeToObject(cNode);
+            }
+            var __render = Object.freeze({
+                rawset: this,
+                scripts: EventManager_1.EventManager.setBindProperty(config === null || config === void 0 ? void 0 : config.scripts, obj),
+                router: config === null || config === void 0 ? void 0 : config.router,
+                range: Range_1.Range.range,
+                element: cNode,
+                attribute: attribute,
+                bindScript: "\n                    const ".concat(EventManager_1.EventManager.SCRIPTS_VARNAME, " = this.__render.scripts;\n                    const ").concat(EventManager_1.EventManager.RAWSET_VARNAME, " = this.__render.rawset;\n                    const ").concat(EventManager_1.EventManager.ELEMENT_VARNAME, " = this.__render.element;\n                    const ").concat(EventManager_1.EventManager.ATTRIBUTE_VARNAME, " = this.__render.attribute;\n                    const ").concat(EventManager_1.EventManager.RANGE_VARNAME, " = this.__render.range;\n                    const ").concat(EventManager_1.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) {
+                var textContent = cNode.textContent;
+                var runText = RawSet.exporesionGrouops(textContent)[0][1];
+                // console.log('--->', RawSet.exporesionGrouops(textContent), textContent,runText, runText[0][1])
+                var n = void 0;
+                if (textContent === null || textContent === void 0 ? void 0 : textContent.startsWith('#')) {
+                    var r = ScriptUtils_1.ScriptUtils.eval("".concat(__render.bindScript, " return ").concat(runText), Object.assign(obj, { __render: __render }));
+                    var template = config.window.document.createElement('template');
+                    template.innerHTML = r;
+                    n = template.content;
+                }
+                else {
+                    var r = ScriptUtils_1.ScriptUtils.eval("".concat(__render.bindScript, "  return ").concat(runText), Object.assign(obj, { __render: __render }));
+                    n = config.window.document.createTextNode(r);
+                }
+                (_a = cNode.parentNode) === null || _a === void 0 ? void 0 : _a.replaceChild(n, cNode);
+            }
+            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_1.DrPre(this, __render, { raws: raws, fag: fag }, { element: element, attrs: drAttr }, { config: config, obj: obj }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
+                    new Dr_1.Dr(this, __render, { raws: raws, fag: fag }, { element: element, attrs: drAttr }, { config: config, obj: obj }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
+                    new DrIf_1.DrIf(this, __render, { raws: raws, fag: fag }, { element: element, attrs: drAttr }, { config: config, obj: obj }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
+                    new DrThis_1.DrThis(this, __render, { raws: raws, fag: fag }, { element: element, attrs: drAttr }, { config: config, obj: obj }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
+                    new AttrExpresion_1.AttrExpresion(this, __render, { raws: raws, fag: fag }, { element: element, attrs: drAttr }, { config: config, obj: obj }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
+                    new DrForm_1.DrForm(this, __render, { raws: raws, fag: fag }, { element: element, attrs: drAttr }, { config: config, obj: obj }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
+                    new DrInnerText_1.DrInnerText(this, __render, { raws: raws, fag: fag }, { element: element, attrs: drAttr }, { config: config, obj: obj }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
+                    new DrInnerHTML_1.DrInnerHTML(this, __render, { raws: raws, fag: fag }, { element: element, attrs: drAttr }, { config: config, obj: obj }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
+                    new DrFor_1.DrFor(this, __render, { raws: raws, fag: fag }, { element: element, attrs: drAttr }, { config: config, obj: obj }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
+                    new DrForOf_1.DrForOf(this, __render, { raws: raws, fag: fag }, { element: element, attrs: drAttr }, { config: config, obj: obj }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
+                    new DrAppender_1.DrAppender(this, __render, { raws: raws, fag: fag }, { element: element, attrs: drAttr }, { config: config, obj: obj }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
+                    new DrRepeat_1.DrRepeat(this, __render, { raws: raws, fag: fag }, { element: element, attrs: drAttr }, { config: config, obj: obj }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
+                    new DrTargetElement_1.DrTargetElement(this, __render, { raws: raws, fag: fag }, { element: element, attrs: drAttr }, { config: config, obj: obj }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
+                    new DrTargetAttr_1.DrTargetAttr(this, __render, { raws: raws, fag: fag }, { element: element, attrs: drAttr }, { config: config, obj: obj }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks })
+                ];
+                for (var _o = 0, operators_1 = operators; _o < operators_1.length; _o++) {
+                    var operator = operators_1[_o];
+                    var state = operator.execRender();
+                    if (state === OperatorRender_1.ExecuteState.EXECUTE) {
+                        break;
+                    }
+                    else if (state === OperatorRender_1.ExecuteState.STOP) {
+                        return raws;
+                    }
+                }
+            }
+        }
+        this.applyEvent(obj, genNode, config);
+        this.replaceBody(genNode);
+        drAttrs.forEach(function (it) {
+            if (it.drCompleteOption) {
+                // genNode.childNodes
+                ScriptUtils_1.ScriptUtils.eval("\n                const ".concat(EventManager_1.EventManager.FAG_VARNAME, " = this.__render.fag;\n                const ").concat(EventManager_1.EventManager.SCRIPTS_VARNAME, " = this.__render.scripts;\n                const ").concat(EventManager_1.EventManager.RAWSET_VARNAME, " = this.__render.rawset;\n                ").concat(it.drCompleteOption, "\n                "), Object.assign(obj, {
+                    __render: Object.freeze({
+                        rawset: _this,
+                        fag: genNode,
+                        scripts: EventManager_1.EventManager.setBindProperty(config === null || config === void 0 ? void 0 : config.scripts, obj)
+                    })
+                }));
+            }
+        });
+        for (var _p = 0, onThisComponentSetCallBacks_1 = onThisComponentSetCallBacks; _p < onThisComponentSetCallBacks_1.length; _p++) {
+            var it_1 = onThisComponentSetCallBacks_1[_p];
+            (_c = (_b = it_1.obj).onInitRender) === null || _c === void 0 ? void 0 : _c.call(_b);
+        }
+        for (var _q = 0, onElementInitCallBacks_1 = onElementInitCallBacks; _q < onElementInitCallBacks_1.length; _q++) {
+            var it_2 = onElementInitCallBacks_1[_q];
+            (_g = (_f = (_e = (_d = it_2.targetElement) === null || _d === void 0 ? void 0 : _d.__render) === null || _e === void 0 ? void 0 : _e.component) === null || _f === void 0 ? void 0 : _f.onInitRender) === null || _g === void 0 ? void 0 : _g.call(_f, Object.freeze({ render: (_h = it_2.targetElement) === null || _h === void 0 ? void 0 : _h.__render, creatorMetaData: (_j = it_2.targetElement) === null || _j === void 0 ? void 0 : _j.__creatorMetaData }));
+            (_k = config === null || config === void 0 ? void 0 : config.onElementInit) === null || _k === void 0 ? void 0 : _k.call(config, it_2.name, obj, this, it_2.targetElement);
+        }
+        for (var _r = 0, onAttrInitCallBacks_1 = onAttrInitCallBacks; _r < onAttrInitCallBacks_1.length; _r++) {
+            var it_3 = onAttrInitCallBacks_1[_r];
+            (_l = config === null || config === void 0 ? void 0 : config.onAttrInit) === null || _l === void 0 ? void 0 : _l.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 raws;
+    };
+    RawSet.prototype.applyEvent = function (obj, fragment, config) {
+        if (fragment === void 0) { fragment = this.fragment; }
+        EventManager_1.eventManager.applyEvent(obj, EventManager_1.eventManager.findAttrElements(fragment, config), config);
+    };
+    RawSet.prototype.getAttribute = function (element, attr) {
+        var data = element.getAttribute(attr);
+        return data;
+    };
+    RawSet.prototype.getAttributeAndDelete = function (element, attr) {
+        var data = element.getAttribute(attr);
+        element.removeAttribute(attr);
+        return data;
+    };
+    RawSet.prototype.getDrAppendAttributeAndDelete = function (element, obj) {
+        var data = element.getAttribute(RawSet.DR_APPENDER_NAME);
+        // if (data && !/\[[0-9]+\]/g.test(data)) {
+        if (data && !/\[.+\]/g.test(data)) {
+            var currentIndex = ScriptUtils_1.ScriptUtils.evalReturn("".concat(data, "?.length -1"), obj);
+            // console.log('------?', currentIndex)
+            // if (currentIndex === undefined || isNaN(currentIndex)) {
+            //     return undefined;
+            // }
+            // const currentIndex = ScriptUtils.evalReturn(`${data}.length`, obj);
+            data = "".concat(data, "[").concat(currentIndex, "]");
+            element.setAttribute(RawSet.DR_APPENDER_NAME, data);
+            // element.setAttribute(RawSet.DR_IF_NAME, data);
+            // element.setAttribute('dr-id', data);
+            // console.log('-->', element)
+        }
+        // if (data && !/\.childs\[[0-9]+\]/g.test(data)) {
+        //     const currentIndex = ScriptUtils.evalReturn(`${data}.currentIndex`, obj);
+        //     data = `${data}.childs[${currentIndex}]`;
+        //     element.setAttribute(RawSet.DR_APPENDER_NAME, data)
+        // }
+        element.removeAttribute(RawSet.DR_APPENDER_NAME);
+        return data;
+    };
+    RawSet.prototype.replaceBody = function (genNode) {
+        var _a;
+        this.childAllRemove();
+        (_a = this.point.start.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(genNode, this.point.start.nextSibling);
+    };
+    RawSet.checkPointCreates = function (element, config) {
+        var _a, _b, _c, _d;
+        var thisVariableName = element.__domrender_this_variable_name;
+        // console.log('checkPointCreates thisVariableName', thisVariableName);
+        var nodeIterator = config.window.document.createNodeIterator(element, NodeFilter.SHOW_ALL, {
+            acceptNode: function (node) {
+                var _a, _b, _c, _d, _e;
+                if (node.nodeType === Node.TEXT_NODE) {
+                    // console.log('????????', node.parentElement, node.parentElement?.getAttribute('dr-pre'));
+                    // console.log('???????/',node.textContent, node.parentElement?.getAttribute('dr-pre'))
+                    // 나중에
+                    // const between = StringUtils.betweenRegexpStr('[$#]\\{', '\\}', StringUtils.deleteEnter((node as Text).data ?? ''))
+                    var between = RawSet.exporesionGrouops(StringUtils_1.StringUtils.deleteEnter((_a = node.data) !== null && _a !== void 0 ? _a : ''));
+                    // console.log('bbbb', between)
+                    return (between === null || between === void 0 ? void 0 : between.length) > 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
+                    // return /\$\{.*?\}/g.test(StringUtils.deleteEnter((node as Text).data ?? '')) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
+                    // return /[$#]\{.*?\}/g.test(StringUtils.deleteEnter((node as Text).data ?? '')) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
+                }
+                else if (node.nodeType === Node.ELEMENT_NODE) {
+                    var element_2 = node;
+                    // console.log('------>', element);
+                    var isElement = ((_c = (_b = config.targetElements) === null || _b === void 0 ? void 0 : _b.map(function (it) { return it.name.toLowerCase(); })) !== null && _c !== void 0 ? _c : []).includes(element_2.tagName.toLowerCase());
+                    var targetAttrNames_2 = ((_e = (_d = config.targetAttrs) === null || _d === void 0 ? void 0 : _d.map(function (it) { return it.name; })) !== null && _e !== void 0 ? _e : []).concat(RawSet.DR_ATTRIBUTES);
+                    var isAttr = element_2.getAttributeNames().filter(function (it) {
+                        var attrExpresion = RawSet.isExporesion(element_2.getAttribute(it));
+                        // console.log(element.getAttribute(it), attrExpresion);
+                        var isTargetAttr = targetAttrNames_2.includes(it.toLowerCase());
+                        return isTargetAttr || attrExpresion;
+                    }).length > 0;
+                    return (isAttr || isElement) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
+                }
+                return NodeFilter.FILTER_REJECT;
+            }
+        });
+        var pars = [];
+        var currentNode;
+        var _loop_1 = function () {
+            if (currentNode.nodeType === Node.TEXT_NODE) {
+                var text = (_a = currentNode.textContent) !== null && _a !== void 0 ? _a : '';
+                var template_1 = config.window.document.createElement('template');
+                // const a = StringUtils.regexExec(/\$\{.*?\}/g, text);
+                // const a = StringUtils.regexExec(/[$#]\{.*?\}/g, text);
+                // const a = StringUtils.betweenRegexpStr('[$#]\\{', '\\}', text); // <--나중에..
+                var a = RawSet.exporesionGrouops(text); // <--나중에..
+                var map = a.map(function (it) {
+                    return {
+                        uuid: RandomUtils_1.RandomUtils.uuid(),
+                        content: it[0],
+                        regexArr: it
+                    };
+                });
+                var lasterIndex_1 = 0;
+                map.forEach(function (it) {
+                    var regexArr = it.regexArr;
+                    var preparedText = regexArr.input.substring(lasterIndex_1, regexArr.index);
+                    var start = config.window.document.createComment("start text ".concat(it.uuid));
+                    var end = config.window.document.createComment("end text ".concat(it.uuid));
+                    // layout setting
+                    template_1.content.append(document.createTextNode(preparedText)); // 사이사이값.
+                    template_1.content.append(start);
+                    template_1.content.append(end);
+                    // content
+                    var fragment = config.window.document.createDocumentFragment();
+                    fragment.append(config.window.document.createTextNode(it.content));
+                    pars.push(new RawSet(it.uuid, {
+                        start: start,
+                        end: end,
+                        thisVariableName: thisVariableName
+                    }, fragment));
+                    lasterIndex_1 = regexArr.index + it.content.length;
+                });
+                template_1.content.append(config.window.document.createTextNode(text.substring(lasterIndex_1, text.length)));
+                (_b = currentNode === null || currentNode === void 0 ? void 0 : currentNode.parentNode) === null || _b === void 0 ? void 0 : _b.replaceChild(template_1.content, currentNode);
+            }
+            else {
+                var uuid = RandomUtils_1.RandomUtils.uuid();
+                var fragment = config.window.document.createDocumentFragment();
+                var start = config.window.document.createComment("start ".concat(uuid));
+                var end = config.window.document.createComment("end ".concat(uuid));
+                // console.log('start--', uuid)
+                (_c = currentNode === null || currentNode === void 0 ? void 0 : currentNode.parentNode) === null || _c === void 0 ? void 0 : _c.insertBefore(start, currentNode);
+                (_d = currentNode === null || currentNode === void 0 ? void 0 : currentNode.parentNode) === null || _d === void 0 ? void 0 : _d.insertBefore(end, currentNode.nextSibling);
+                fragment.append(currentNode);
+                pars.push(new RawSet(uuid, {
+                    start: start,
+                    end: end,
+                    thisVariableName: thisVariableName
+                }, fragment));
+            }
+        };
+        // eslint-disable-next-line no-cond-assign
+        while (currentNode = nodeIterator.nextNode()) {
+            _loop_1();
+        }
+        // console.log('check-->', pars)
+        return pars;
+    };
+    RawSet.prototype.childAllRemove = function () {
+        var next = this.point.start.nextSibling;
+        while (next) {
+            if (next === this.point.end) {
+                break;
+            }
+            next.remove();
+            next = this.point.start.nextSibling;
+        }
+    };
+    RawSet.drItOtherEncoding = function (element) {
+        var random = RandomUtils_1.RandomUtils.uuid();
+        var regex = /#it#/g;
+        element.querySelectorAll("[".concat(RawSet.DR_IT_OPTIONNAME, "], [").concat(RawSet.DR_FOR_OF_NAME, "], [").concat(RawSet.DR_REPEAT_NAME, "]")).forEach(function (it) {
+            it.innerHTML = it.innerHTML.replace(regex, random);
+        });
+        return random;
+    };
+    RawSet.drItOtherDecoding = function (element, random) {
+        element.querySelectorAll("[".concat(RawSet.DR_IT_OPTIONNAME, "], [").concat(RawSet.DR_FOR_OF_NAME, "], [").concat(RawSet.DR_REPEAT_NAME, "]")).forEach(function (it) {
+            it.innerHTML = it.innerHTML.replace(RegExp(random, 'g'), '#it#');
+        });
+    };
+    RawSet.drThisEncoding = function (element, drThis) {
+        var thisRandom = RandomUtils_1.RandomUtils.uuid();
+        // const thisRegex = /(?<!(dr-|\.))this(?=.?)/g;
+        // const thisRegex = /[^(dr\-)]this(?=.?)/g;
+        // const thisRegex = /[^(dr\-)]this\./g;
+        // safari 때문에 전위 검색 regex가 안됨 아 짜증나서 이걸로함.
+        // element.querySelectorAll(`[${RawSet.DR_PRE_NAME}]`).forEach(it => {
+        //     let message = it.innerHTML;
+        // })
+        element.querySelectorAll("[".concat(RawSet.DR_PRE_NAME, "]")).forEach(function (it) {
+            it.innerHTML = it.innerHTML.replace(/this/g, thisRandom);
+        });
+        element.querySelectorAll("[".concat(RawSet.DR_THIS_NAME, "]")).forEach(function (it) {
+            var message = it.innerHTML;
+            StringUtils_1.StringUtils.regexExec(/([^(dr\-)])?this(?=.?)/g, message).reverse().forEach(function (it) {
+                var _a;
+                message = message.substr(0, it.index) + message.substr(it.index).replace(it[0], "".concat((_a = it[1]) !== null && _a !== void 0 ? _a : '').concat(drThis));
+            });
+            it.innerHTML = message;
+        });
+        var message = element.innerHTML;
+        StringUtils_1.StringUtils.regexExec(/([^(dr\-)])?this(?=.?)/g, message).reverse().forEach(function (it) {
+            var _a;
+            message = message.substr(0, it.index) + message.substr(it.index).replace(it[0], "".concat((_a = it[1]) !== null && _a !== void 0 ? _a : '').concat(drThis));
+        });
+        element.innerHTML = message;
+        return thisRandom;
+    };
+    RawSet.drThisDecoding = function (element, thisRandom) {
+        element.querySelectorAll("[".concat(RawSet.DR_PRE_NAME, "]")).forEach(function (it) {
+            it.innerHTML = it.innerHTML.replace(RegExp(thisRandom, 'g'), 'this');
+        });
+        element.querySelectorAll("[".concat(RawSet.DR_THIS_NAME, "]")).forEach(function (it) {
+            it.innerHTML = it.innerHTML.replace(RegExp(thisRandom, 'g'), 'this');
+        });
+    };
+    RawSet.drFormOtherMoveAttr = function (element, as, to, config) {
+        element.querySelectorAll("[".concat(RawSet.DR_FORM_NAME, "]")).forEach(function (subElement) {
+            var _a;
+            var nodeIterator = config.window.document.createNodeIterator(subElement, NodeFilter.SHOW_ELEMENT, {
+                acceptNode: function (node) {
+                    if (node.nodeType === Node.ELEMENT_NODE) {
+                        var element_3 = node;
+                        return element_3.hasAttribute(as) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
+                    }
+                    else {
+                        return NodeFilter.FILTER_REJECT;
+                    }
+                }
+            });
+            var node;
+            // eslint-disable-next-line no-cond-assign
+            while (node = nodeIterator.nextNode()) {
+                var element_4 = node;
+                element_4.setAttribute(to, (_a = element_4.getAttribute(as)) !== null && _a !== void 0 ? _a : '');
+                element_4.removeAttribute(as);
+            }
+        });
+    };
+    RawSet.drVarEncoding = function (element, drVarOption) {
+        var _a;
+        var vars = ((_a = drVarOption === null || drVarOption === void 0 ? void 0 : drVarOption.split(',')) !== null && _a !== void 0 ? _a : []).map(function (it) {
+            var _a, _b;
+            var s = it.trim().split('=');
+            var name = (_a = s[0]) === null || _a === void 0 ? void 0 : _a.trim();
+            var value = (_b = s[1]) === null || _b === void 0 ? void 0 : _b.trim();
+            return {
+                name: name,
+                value: value,
+                // regex: RegExp('(?<!(dr-|\\.))var\\.' + s[0] + '(?=.?)', 'g'),
+                regex: RegExp('\\$var\\.' + name + '(?=.?)', 'g'),
+                random: RandomUtils_1.RandomUtils.uuid()
+            };
+        });
+        // element.querySelectorAll(`[${RawSet.DR_THIS_NAME}]`).forEach(it => {
+        element.querySelectorAll("[".concat(RawSet.DR_VAR_OPTIONNAME, "]")).forEach(function (it) {
+            vars.filter(function (vit) { return vit.value && vit.name; }).forEach(function (vit) {
+                it.innerHTML = it.innerHTML.replace(vit.regex, vit.random);
+            });
+        });
+        vars.filter(function (vit) { return vit.value && vit.name; }).forEach(function (vit) {
+            element.innerHTML = element.innerHTML.replace(vit.regex, vit.value);
+        });
+        return vars;
+    };
+    RawSet.drVarDecoding = function (element, vars) {
+        element.querySelectorAll("[".concat(RawSet.DR_THIS_NAME, "]")).forEach(function (it) {
+            vars.filter(function (vit) { return vit.value && vit.name; }).forEach(function (vit) {
+                it.innerHTML = it.innerHTML.replace(RegExp(vit.random, 'g'), vit.value);
+            });
+        });
+    };
+    RawSet.drThisCreate = function (element, drThis, drVarOption, drStripOption, obj, config, set) {
+        var _a, _b, _c, _d;
+        var fag = config.window.document.createDocumentFragment();
+        var n = element.cloneNode(true);
+        if (set) {
+            var id = RandomUtils_1.RandomUtils.getRandomString(20);
+            n.innerHTML = RawSet.styleTransformLocal((_a = set.styles) !== null && _a !== void 0 ? _a : [], id, true, set.styleLocale) + ((_b = set.template) !== null && _b !== void 0 ? _b : '');
+            // dr-on-create onCreateRender
+            var onCreate = element.getAttribute("".concat(EventManager_1.EventManager.attrPrefix, "on-create"));
+            var renderScript = '';
+            var createParam = [];
+            if (onCreate) {
+                var script = "".concat(renderScript, " return ").concat(onCreate, " ");
+                createParam = ScriptUtils_1.ScriptUtils.eval(script, obj);
+                if (!Array.isArray(createParam)) {
+                    createParam = [createParam];
+                }
+            }
+            (_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
+            var oninit = element.getAttribute("".concat(EventManager_1.EventManager.attrPrefix, "on-component-init")); // dr-on-component-init
+            if (oninit) {
+                var script = "".concat(renderScript, "  ").concat(oninit, " ");
+                ScriptUtils_1.ScriptUtils.eval(script, obj);
+            }
+        }
+        n.querySelectorAll(EventManager_1.eventManager.attrNames.map(function (it) { return "[".concat(it, "]"); }).join(',')).forEach(function (it) {
+            it.setAttribute(EventManager_1.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')) {
+            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 = {
+            name: name,
+            callBack: function (element, attrValue, obj, rawSet) {
+                var _a;
+                var thisObj = getThisObj(element, attrValue, obj, rawSet);
+                var data = factory(element, attrValue, obj, rawSet);
+                rawSet.point.thisVariableName = data.__domrender_this_variable_name;
+                if (thisObj) {
+                    var i = thisObj.__domrender_component_new = ((_a = thisObj.__domrender_component_new) !== null && _a !== void 0 ? _a : new Proxy({}, new Types_1.DomRenderFinalProxy()));
+                    i.thisVariableName = rawSet.point.thisVariableName;
+                    i.rawSet = rawSet;
+                    i.innerHTML = element.innerHTML;
+                    i.rootCreator = new Proxy(obj, new Types_1.DomRenderFinalProxy());
+                    i.creator = new Proxy(rawSet.point.thisVariableName ? ScriptUtils_1.ScriptUtils.evalReturn(rawSet.point.thisVariableName, obj) : obj, new Types_1.DomRenderFinalProxy());
+                }
+                return data;
+            }
+        };
+        return targetAttribute;
+    };
+    RawSet.createComponentTargetElement = function (name, objFactory, template, styles, styleLocale, config) {
+        if (template === void 0) { template = ''; }
+        if (styles === void 0) { styles = []; }
+        var targetElement = {
+            name: name,
+            styles: styles,
+            template: template,
+            callBack: function (element, obj, rawSet, attrs) {
+                var _a, _b, _c, _d;
+                // console.log('callback------->')
+                if (!obj.__domrender_components) {
+                    obj.__domrender_components = {};
+                }
+                var domrenderComponents = obj.__domrender_components;
+                var componentKey = '_' + RandomUtils_1.RandomUtils.getRandomString(20);
+                var attribute = DomUtils_1.DomUtils.getAttributeToObject(element);
+                var renderScript = 'var $component = this.__render.component; var $element = this.__render.element; var $router = this.__render.router; var $innerHTML = this.__render.innerHTML; var $attribute = this.__render.attribute; var $creatorMetaData = this.__render.creatorMetaData;';
+                var render = Object.freeze({
+                    element: element,
+                    innerHTML: element.innerHTML,
+                    attribute: attribute,
+                    rawset: rawSet,
+                    router: config.router,
+                    componentKey: componentKey,
+                    scripts: EventManager_1.EventManager.setBindProperty((_a = config.scripts) !== null && _a !== void 0 ? _a : {}, obj)
+                    // eslint-disable-next-line no-use-before-define
+                });
+                var constructor = element.getAttribute("".concat(EventManager_1.EventManager.attrPrefix, "constructor"));
+                var constructorParam = [];
+                // dr-constructor
+                if (constructor) {
+                    var script = "".concat(renderScript, " return ").concat(constructor, " ");
+                    var param = (_b = ScriptUtils_1.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 Types_1.DomRenderFinalProxy()));
+                i.thisVariableName = rawSet.point.thisVariableName;
+                i.thisFullVariableName = "this.__domrender_components.".concat(componentKey);
+                i.componentKey = componentKey;
+                i.rawSet = rawSet;
+                i.attribute = attribute;
+                i.drAttrs = attrs;
+                i.innerHTML = element.innerHTML;
+                i.rootCreator = new Proxy(obj, new Types_1.DomRenderFinalProxy());
+                i.creator = new Proxy(rawSet.point.thisVariableName ? ScriptUtils_1.ScriptUtils.evalReturn(rawSet.point.thisVariableName, obj) : obj, new Types_1.DomRenderFinalProxy());
+                this.__creatorMetaData = i;
+                render = __assign({ component: instance, creatorMetaData: i }, render);
+                // dr-on-create onCreateRender
+                var onCreate = element.getAttribute("".concat(EventManager_1.EventManager.attrPrefix, "on-create"));
+                this.__render = render;
+                var createParam = [i];
+                if (onCreate) {
+                    var script = "".concat(renderScript, " return ").concat(onCreate, " ");
+                    createParam = ScriptUtils_1.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;
+                if (applayTemplate) {
+                    // if (rawSet.point.thisVariableName) {
+                    // 넘어온 innerHTML에 this가 있으면 해당안되게 우선 치환.
+                    innerHTMLThisRandom = RandomUtils_1.RandomUtils.uuid();
+                    applayTemplate = applayTemplate.replace(/this\./g, innerHTMLThisRandom);
+                    // }
+                    applayTemplate = applayTemplate.replace(/#component#/g, 'this');
+                }
+                applayTemplate = template.replace(/#innerHTML#/g, applayTemplate);
+                // dr-on-component-init
+                var oninit = element.getAttribute("".concat(EventManager_1.EventManager.attrPrefix, "on-component-init")); // dr-on-component-init
+                if (oninit) {
+                    var script = "".concat(renderScript, "  ").concat(oninit, " ");
+                    ScriptUtils_1.ScriptUtils.eval(script, Object.assign(obj, {
+                        __render: render
+                    }));
+                }
+                var innerHTML = RawSet.styleTransformLocal(styles, componentKey, true, styleLocale) + (applayTemplate !== null && applayTemplate !== void 0 ? applayTemplate : '');
+                element.innerHTML = innerHTML;
+                // console.log('------>', element.innerHTML, obj)
+                var data = RawSet.drThisCreate(element, "this.__domrender_components.".concat(componentKey), '', true, obj, config);
+                // 넘어온 innerHTML에 this가 있는걸 다시 복호화해서 제대로 작동하도록한다.
+                if (innerHTMLThisRandom) {
+                    var template_2 = config.window.document.createElement('template');
+                    template_2.content.append(data);
+                    template_2.innerHTML = template_2.innerHTML.replace(RegExp(innerHTMLThisRandom, 'g'), 'this.');
+                    data = template_2.content;
+                }
+                data.render = render;
+                return data;
+            }
+            // complete
+        };
+        return targetElement;
+    };
+    RawSet.isExporesion = function (data) {
+        var reg = /(?:[$#]\{(?:(([$#]\{)??[^$#]?[^{]*?)\}[$#]))/g;
+        return reg.test(data !== null && data !== void 0 ? data : '');
+    };
+    RawSet.exporesionGrouops = function (data) {
+        // const reg = /(?:[$#]\{(?:(([$#]\{)??[^$#]*?)\}[$#]))/g;
+        var reg = /(?:[$#]\{(?:(([$#]\{)??[^$#]?[^{]*?)\}[$#]))/g;
+        return StringUtils_1.StringUtils.regexExec(reg, data !== null && data !== void 0 ? data : '');
+    };
+    RawSet.styleTransformLocal = function (styleBody, id, styleTagWrap, locale) {
+        if (styleTagWrap === void 0) { styleTagWrap = true; }
+        if (locale === void 0) { locale = false; }
+        // <style id="first">
+        //     #first ~ *:not(#first ~ style[domstyle] ~ *) {
+        //     font-size: 30px;
+        //     color: blue;
+        // }
+        // </style>
+        if (Array.isArray(styleBody)) {
+            styleBody = styleBody.join('\n');
+        }
+        if (locale) {
+            styleBody = styleBody.replace(/([^}]+){/gm, function (a, b) {
+                if (typeof b === 'string') {
+                    b = b.trim();
+                }
+                return "#".concat(id, " ~ ").concat(b, ":not(#").concat(id, " ~ style[domstyle] ~ *), #").concat(id, " ~ * ").concat(b, " {");
+            });
+        }
+        if (styleTagWrap) {
+            styleBody = "<style id='".concat(id, "' domstyle>").concat(styleBody, "</style>");
+        }
+        return styleBody;
+    };
+    RawSet.destroy = function (obj, parameter, config, destroyOptions) {
+        var _a;
+        if (destroyOptions === void 0) { destroyOptions = []; }
+        if (!destroyOptions.some(function (it) { return it === DestroyOptionType.NO_DESTROY; })) {
+            if (!destroyOptions.some(function (it) { return it === DestroyOptionType.NO_MESSENGER_DESTROY; })) {
+                if (config.messenger && obj) {
+                    config.messenger.deleteChannelFromObj(obj);
+                }
+            }
+            if (obj) {
+                (_a = obj.onDestroyRender) === null || _a === void 0 ? void 0 : _a.call.apply(_a, __spreadArray([obj], parameter, false));
+            }
+        }
+    };
+    RawSet.DR = 'dr';
+    RawSet.DR_IF_NAME = 'dr-if';
+    RawSet.DR_FOR_NAME = 'dr-for';
+    RawSet.DR_FOR_OF_NAME = 'dr-for-of';
+    RawSet.DR_REPEAT_NAME = 'dr-repeat';
+    RawSet.DR_THIS_NAME = 'dr-this';
+    RawSet.DR_FORM_NAME = 'dr-form';
+    RawSet.DR_PRE_NAME = 'dr-pre';
+    RawSet.DR_APPENDER_NAME = 'dr-appender';
+    RawSet.DR_INNERHTML_NAME = 'dr-inner-html';
+    RawSet.DR_INNERTEXT_NAME = 'dr-inner-text';
+    RawSet.DR_DETECT_NAME = 'dr-detect';
+    // public static readonly DR_DETECT_ACTION_NAME = 'dr-detect-action';
+    RawSet.DR_IT_OPTIONNAME = 'dr-it';
+    RawSet.DR_VAR_OPTIONNAME = 'dr-var';
+    RawSet.DR_AFTER_OPTIONNAME = 'dr-after';
+    RawSet.DR_NEXT_OPTIONNAME = 'dr-next';
+    RawSet.DR_BEFORE_OPTIONNAME = 'dr-before';
+    RawSet.DR_COMPLETE_OPTIONNAME = 'dr-complete';
+    RawSet.DR_STRIP_OPTIONNAME = 'dr-strip';
+    RawSet.DR_DESTROY_OPTIONNAME = 'dr-destroy';
+    RawSet.drAttrsOriginName = {
+        dr: RawSet.DR,
+        drIf: RawSet.DR_IF_NAME,
+        drFor: RawSet.DR_FOR_NAME,
+        drForOf: RawSet.DR_FOR_OF_NAME,
+        drAppender: RawSet.DR_APPENDER_NAME,
+        drRepeat: RawSet.DR_REPEAT_NAME,
+        drThis: RawSet.DR_THIS_NAME,
+        drForm: RawSet.DR_FORM_NAME,
+        drPre: RawSet.DR_PRE_NAME,
+        drInnerHTML: RawSet.DR_INNERHTML_NAME,
+        drInnerText: RawSet.DR_INNERTEXT_NAME,
+        drItOption: RawSet.DR_IT_OPTIONNAME,
+        drVarOption: RawSet.DR_VAR_OPTIONNAME,
+        drAfterOption: RawSet.DR_AFTER_OPTIONNAME,
+        drNextOption: RawSet.DR_NEXT_OPTIONNAME,
+        drBeforeOption: RawSet.DR_BEFORE_OPTIONNAME,
+        drCompleteOption: RawSet.DR_COMPLETE_OPTIONNAME,
+        drStripOption: RawSet.DR_STRIP_OPTIONNAME,
+        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];
+    return RawSet;
+}());
+exports.RawSet = RawSet;