dom-render 1.0.97 → 1.0.99

package/rawsets/RawSet.js

@@ -1,1141 +0,0 @@
-"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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-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));
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-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 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 OperatorExecuter_1 = require("../operators/OperatorExecuter");
-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 DestroyOptionType_1 = require("./DestroyOptionType");
-var RawSetType_1 = require("./RawSetType");
-var DrThisProperty_1 = require("../operators/DrThisProperty");
-var RawSetOperatorType_1 = require("./RawSetOperatorType");
-var parse_1 = __importDefault(require("../css/parse"));
-var stringify_1 = __importDefault(require("../css/stringify"));
-var RawSet = /** @class */ (function () {
-    function RawSet(uuid, type, point, fragment, detect, data) {
-        this.uuid = uuid;
-        this.type = type;
-        this.point = point;
-        this.fragment = fragment;
-        this.detect = detect;
-        this.data = data;
-        point.start.rawSet = this;
-        // console.log('rawset constructor->', (this.point.node as Element).getAttributeNames());
-    }
-    Object.defineProperty(RawSet.prototype, "isConnected", {
-        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 = "`" + ((_a = cNode.textContent) !== null && _a !== void 0 ? _a : '') + "`";
-                // console.log('???????', script)
-            }
-            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); // .concat(EventManager.normalAttrMapAttrName);
-                var targetScripts_1 = targetAttrNames.map(function (it) { return element_1.getAttribute(it); }).filter(function (it) { return it; });
-                var targetAttrMap = element_1.getAttribute(EventManager_1.EventManager.normalAttrMapAttrName);
-                if (targetAttrMap) {
-                    new Map(JSON.parse(targetAttrMap)).forEach(function (v, k) {
-                        targetScripts_1.push(v);
-                    });
-                }
-                script = targetScripts_1.join(';');
-                // attribute쪽 체크하는거 추가
-                // console.log('----!!!!!-->', targetAttrNames)
-                // const otherAttrs = element.getAttributeNames()
-                //     .filter(it => !targetAttrNames.includes(it.toLowerCase()) && RawSet.isExporesion(element.getAttribute(it)))
-                //     .map(it => {
-                //         return `\`${element.getAttribute(it) ?? ''}\``;
-                //     }).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.___" + it);
-                    // console.log('scripts-->', script)
-                });
-                // console.log('----------', script);
-                Array.from(ScriptUtils_1.ScriptUtils.getVariablePaths(script)).filter(function (it) { return !it.startsWith("___" + EventManager_1.EventManager.SCRIPTS_VARNAME); }).forEach(function (it) { return usingTriggerVariables.add(it); });
-            }
-        });
-        // console.log('usingTriggerVariable----------->', usingTriggerVariables)
-        return usingTriggerVariables;
-    };
-    // 중요 render 처리 부분
-    RawSet.prototype.render = function (obj, config) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
-        return __awaiter(this, void 0, void 0, function () {
-            var genNode, raws, onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks, drAttrs, _i, _z, cNode, attribute, __render, fag, textContent, runText, newNode, r, template, r, element, drAttr, operators, _0, operators_1, operator, state, _1, onThisComponentSetCallBacks_1, it_1, _2, onElementInitCallBacks_1, it_2, oninit, param, script, _3, onAttrInitCallBacks_1, it_3;
-            var _this = this;
-            return __generator(this, function (_4) {
-                switch (_4.label) {
-                    case 0:
-                        genNode = config.window.document.importNode(this.fragment, true);
-                        raws = [];
-                        onAttrInitCallBacks = [];
-                        onElementInitCallBacks = [];
-                        onThisComponentSetCallBacks = [];
-                        drAttrs = [];
-                        _i = 0, _z = Array.from(genNode.childNodes.values());
-                        _4.label = 1;
-                    case 1:
-                        if (!(_i < _z.length)) return [3 /*break*/, 7];
-                        cNode = _z[_i];
-                        attribute = {};
-                        if (cNode.nodeType === Node.ELEMENT_NODE) {
-                            attribute = DomUtils_1.DomUtils.getAttributeToObject(cNode);
-                        }
-                        __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 " + EventManager_1.EventManager.SCRIPTS_VARNAME + " = this.__render.scripts;\n                    const " + EventManager_1.EventManager.RAWSET_VARNAME + " = this.__render.rawset;\n                    const " + EventManager_1.EventManager.ELEMENT_VARNAME + " = this.__render.element;\n                    const " + EventManager_1.EventManager.ATTRIBUTE_VARNAME + " = this.__render.attribute;\n                    const " + EventManager_1.EventManager.RANGE_VARNAME + " = this.__render.range;\n                    const " + EventManager_1.EventManager.ROUTER_VARNAME + " = this.__render.router;\n            "
-                            // eslint-disable-next-line no-use-before-define
-                        });
-                        fag = config.window.document.createDocumentFragment();
-                        if (!(cNode.nodeType === Node.TEXT_NODE && cNode.textContent)) return [3 /*break*/, 2];
-                        textContent = cNode.textContent;
-                        runText = RawSet.exporesionGrouops(textContent)[0][1];
-                        newNode = void 0;
-                        if (textContent === null || textContent === void 0 ? void 0 : textContent.startsWith('#')) {
-                            r = ScriptUtils_1.ScriptUtils.eval(__render.bindScript + " return " + runText, Object.assign(obj, { __render: __render }));
-                            template = config.window.document.createElement('template');
-                            template.innerHTML = r;
-                            newNode = template.content;
-                        }
-                        else {
-                            r = ScriptUtils_1.ScriptUtils.eval(__render.bindScript + "  return " + runText, Object.assign(obj, { __render: __render }));
-                            newNode = config.window.document.createTextNode(r);
-                        }
-                        (_a = cNode.parentNode) === null || _a === void 0 ? void 0 : _a.replaceChild(newNode, cNode);
-                        // console.log('-------', this.point.start.parentNode.nodeName)
-                        // 중요 style value change 됐을때 다시 처리해야되기떄문에: 마지막에 completed 없는 attr 가지고 판단 하니깐
-                        if (this.type === RawSetType_1.RawSetType.STYLE_TEXT && this.point.parent) {
-                            this.point.parent.removeAttribute('completed');
-                        }
-                        return [3 /*break*/, 6];
-                    case 2:
-                        if (!(cNode.nodeType === Node.ELEMENT_NODE)) return [3 /*break*/, 6];
-                        element = cNode;
-                        drAttr = {
-                            dr: this.getAttributeAndDelete(element, RawSet.DR_NAME),
-                            drIf: this.getAttributeAndDelete(element, RawSet.DR_IF_NAME),
-                            drFor: this.getAttributeAndDelete(element, RawSet.DR_FOR_NAME),
-                            drForOf: this.getAttributeAndDelete(element, RawSet.DR_FOR_OF_NAME),
-                            drThisProperty: this.getAttributeAndDelete(element, RawSet.DR_THIS_PROPERTY_NAME),
-                            drAppender: this.getAttributeAndDelete(element, RawSet.DR_APPENDER_NAME),
-                            drRepeat: this.getAttributeAndDelete(element, RawSet.DR_REPEAT_NAME),
-                            drThis: this.getAttributeAndDelete(element, RawSet.DR_THIS_NAME),
-                            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),
-                            drKeyOption: this.getAttributeAndDelete(element, RawSet.DR_KEY_OPTIONNAME)
-                        };
-                        drAttrs.push(drAttr);
-                        operators = [
-                            new DrPre_1.DrPre(this, __render, { raws: raws, fag: fag }, { element: element, attrName: RawSet.DR_PRE_NAME, attr: drAttr.drPre, attrs: drAttr }, { config: config, obj: obj, operatorAround: (_b = config.operatorAround) === null || _b === void 0 ? void 0 : _b.drPre }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
-                            new Dr_1.Dr(this, __render, { raws: raws, fag: fag }, { element: element, attrName: RawSet.DR_NAME, attr: drAttr.dr, attrs: drAttr }, { config: config, obj: obj, operatorAround: (_c = config.operatorAround) === null || _c === void 0 ? void 0 : _c.dr }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
-                            new DrIf_1.DrIf(this, __render, { raws: raws, fag: fag }, { element: element, attrName: RawSet.DR_IF_NAME, attr: drAttr.drIf, attrs: drAttr }, { config: config, obj: obj, operatorAround: (_d = config.operatorAround) === null || _d === void 0 ? void 0 : _d.drIf }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
-                            new DrThis_1.DrThis(this, __render, { raws: raws, fag: fag }, { element: element, attrName: RawSet.DR_THIS_NAME, attr: drAttr.drThis, attrs: drAttr }, { config: config, obj: obj, operatorAround: (_e = config.operatorAround) === null || _e === void 0 ? void 0 : _e.drThis }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
-                            new DrForm_1.DrForm(this, __render, { raws: raws, fag: fag }, { element: element, attrName: RawSet.DR_FOR_NAME, attr: drAttr.drForm, attrs: drAttr }, { config: config, obj: obj, operatorAround: (_f = config.operatorAround) === null || _f === void 0 ? void 0 : _f.drForm }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
-                            new DrInnerText_1.DrInnerText(this, __render, { raws: raws, fag: fag }, { element: element, attrName: RawSet.DR_INNERTEXT_NAME, attr: drAttr.drInnerText, attrs: drAttr }, { config: config, obj: obj, operatorAround: (_g = config.operatorAround) === null || _g === void 0 ? void 0 : _g.drInnerText }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
-                            new DrInnerHTML_1.DrInnerHTML(this, __render, { raws: raws, fag: fag }, { element: element, attrName: RawSet.DR_INNERHTML_NAME, attr: drAttr.drInnerHTML, attrs: drAttr }, { config: config, obj: obj, operatorAround: (_h = config.operatorAround) === null || _h === void 0 ? void 0 : _h.drInnerHTML }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
-                            new DrFor_1.DrFor(this, __render, { raws: raws, fag: fag }, { element: element, attrName: RawSet.DR_FOR_NAME, attr: drAttr.drFor, attrs: drAttr }, { config: config, obj: obj, operatorAround: (_j = config.operatorAround) === null || _j === void 0 ? void 0 : _j.drFor }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
-                            new DrForOf_1.DrForOf(this, __render, { raws: raws, fag: fag }, { element: element, attrName: RawSet.DR_FOR_OF_NAME, attr: drAttr.drForOf, attrs: drAttr }, { config: config, obj: obj, operatorAround: (_k = config.operatorAround) === null || _k === void 0 ? void 0 : _k.drForOf }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
-                            new DrThisProperty_1.DrThisProperty(this, __render, { raws: raws, fag: fag }, { element: element, attrName: RawSet.DR_THIS_PROPERTY_NAME, attr: drAttr.drThisProperty, attrs: drAttr }, { config: config, obj: obj, operatorAround: (_l = config.operatorAround) === null || _l === void 0 ? void 0 : _l.drThisProperty }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
-                            new DrAppender_1.DrAppender(this, __render, { raws: raws, fag: fag }, { element: element, attrName: RawSet.DR_APPENDER_NAME, attr: drAttr.drAppender, attrs: drAttr }, { config: config, obj: obj, operatorAround: (_m = config.operatorAround) === null || _m === void 0 ? void 0 : _m.drAppender }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
-                            new DrRepeat_1.DrRepeat(this, __render, { raws: raws, fag: fag }, { element: element, attrName: RawSet.DR_REPEAT_NAME, attr: drAttr.drRepeat, attrs: drAttr }, { config: config, obj: obj, operatorAround: (_o = config.operatorAround) === null || _o === void 0 ? void 0 : _o.drRepeat }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
-                            new DrTargetElement_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 })
-                        ];
-                        _0 = 0, operators_1 = operators;
-                        _4.label = 3;
-                    case 3:
-                        if (!(_0 < operators_1.length)) return [3 /*break*/, 6];
-                        operator = operators_1[_0];
-                        return [4 /*yield*/, operator.start()];
-                    case 4:
-                        state = _4.sent();
-                        if (state === OperatorExecuter_1.ExecuteState.EXECUTE) {
-                            return [3 /*break*/, 6];
-                        }
-                        else if (state === OperatorExecuter_1.ExecuteState.STOP) {
-                            return [2 /*return*/, raws];
-                        }
-                        _4.label = 5;
-                    case 5:
-                        _0++;
-                        return [3 /*break*/, 3];
-                    case 6:
-                        _i++;
-                        return [3 /*break*/, 1];
-                    case 7:
-                        this.applyEvent(obj, genNode, config);
-                        this.replaceBody(genNode); // 중요 여기서 마지막에 연션된 값을 그려준다.
-                        drAttrs.forEach(function (it) {
-                            if (it.drCompleteOption) {
-                                // genNode.childNodes
-                                var render = Object.freeze({
-                                    rawset: _this,
-                                    fag: genNode,
-                                    scripts: EventManager_1.EventManager.setBindProperty(config === null || config === void 0 ? void 0 : config.scripts, obj)
-                                });
-                                ScriptUtils_1.ScriptUtils.eval("\n                const " + EventManager_1.EventManager.FAG_VARNAME + " = this.__render.fag;\n                const " + EventManager_1.EventManager.SCRIPTS_VARNAME + " = this.__render.scripts;\n                const " + EventManager_1.EventManager.RAWSET_VARNAME + " = this.__render.rawset;\n                " + it.drCompleteOption, Object.assign(obj, { __render: render }));
-                            }
-                        });
-                        // 중요 style isolation 나중에 :scope로 대체 가능할듯.
-                        // 2023.9.4일 없앰  style 처음들어올때 처리하는걸로 바꿈
-                        // RawSet.generateStyleSheetsLocal(config);
-                        for (_1 = 0, onThisComponentSetCallBacks_1 = onThisComponentSetCallBacks; _1 < onThisComponentSetCallBacks_1.length; _1++) {
-                            it_1 = onThisComponentSetCallBacks_1[_1];
-                            (_q = (_p = it_1.obj) === null || _p === void 0 ? void 0 : _p.onInitRender) === null || _q === void 0 ? void 0 : _q.call(_p);
-                        }
-                        for (_2 = 0, onElementInitCallBacks_1 = onElementInitCallBacks; _2 < onElementInitCallBacks_1.length; _2++) {
-                            it_2 = onElementInitCallBacks_1[_2];
-                            if (((_s = (_r = it_2.targetElement) === null || _r === void 0 ? void 0 : _r.__render) === null || _s === void 0 ? void 0 : _s.element) && ((_u = (_t = it_2.targetElement) === null || _t === void 0 ? void 0 : _t.__render) === null || _u === void 0 ? void 0 : _u.component)) {
-                                oninit = it_2.targetElement.__render.element.getAttribute(RawSet.DR_ON_INIT_ARGUMENTS_OPTIONNAME);
-                                param = [];
-                                if (oninit) {
-                                    script = it_2.targetElement.__render.renderScript + " return " + oninit + " ";
-                                    param = ScriptUtils_1.ScriptUtils.eval(script, Object.assign(obj, {
-                                        __render: it_2.targetElement.__render
-                                    }));
-                                    if (!Array.isArray(param)) {
-                                        param = [param];
-                                    }
-                                }
-                                (_w = (_v = it_2.targetElement.__render.component).onInitRender) === null || _w === void 0 ? void 0 : _w.call.apply(_w, __spreadArray([_v], param, false));
-                            }
-                            (_x = config === null || config === void 0 ? void 0 : config.onElementInit) === null || _x === void 0 ? void 0 : _x.call(config, it_2.name, obj, this, it_2.targetElement);
-                        }
-                        // TODO: 이부분도 위에 targetElement 처럼 해야될까?
-                        for (_3 = 0, onAttrInitCallBacks_1 = onAttrInitCallBacks; _3 < onAttrInitCallBacks_1.length; _3++) {
-                            it_3 = onAttrInitCallBacks_1[_3];
-                            (_y = config === null || config === void 0 ? void 0 : config.onAttrInit) === null || _y === void 0 ? void 0 : _y.call(config, it_3.attrName, it_3.attrValue, obj, this);
-                        }
-                        // component destroy
-                        if (obj.__domrender_components) {
-                            Object.entries(obj.__domrender_components).forEach(function (_a) {
-                                var _b, _c;
-                                var key = _a[0], value = _a[1];
-                                var domrenderComponentNew = value.__domrender_component_new;
-                                var rawSet = domrenderComponentNew === null || domrenderComponentNew === void 0 ? void 0 : domrenderComponentNew.rawSet;
-                                var drAttrs = domrenderComponentNew === null || domrenderComponentNew === void 0 ? void 0 : domrenderComponentNew.drAttrs;
-                                if (rawSet && !rawSet.isConnected) {
-                                    // const domrenderComponent = obj.__domrender_components[key];
-                                    // console.log('component destroy--->', key, rawSet, rawSet.isConnected, domrenderComponent.name, domrenderComponent);
-                                    var destroyOptions = (_c = (_b = drAttrs === null || drAttrs === void 0 ? void 0 : drAttrs.drDestroyOption) === null || _b === void 0 ? void 0 : _b.split(',')) !== null && _c !== void 0 ? _c : [];
-                                    RawSet.destroy(obj.__domrender_components[key], [domrenderComponentNew], config, destroyOptions);
-                                    delete obj.__domrender_components[key];
-                                }
-                            });
-                        }
-                        return [2 /*return*/, raws];
-                }
-            });
-        });
-    };
-    /**
-     * @deprecated
-     * @param config
-     */
-    RawSet.generateStyleSheetsLocal = function (config) {
-        // console.log('config.window.document.styleSheets---------', config.window.document.styleSheets);
-        Array.from(config.window.document.styleSheets).filter(function (it) { return it.ownerNode && it.ownerNode instanceof Element && it.ownerNode.hasAttribute('domstyle') && it.ownerNode.getAttribute('id') && !it.ownerNode.getAttribute('completed'); }).forEach(function (it) {
-            var _a;
-            var styleElement = it.ownerNode;
-            var split = (_a = styleElement.getAttribute('id')) === null || _a === void 0 ? void 0 : _a.split('-');
-            split === null || split === void 0 ? void 0 : split.pop();
-            var id = split === null || split === void 0 ? void 0 : split.join('-');
-            if (id) {
-                // console.log('------->', id)
-                Array.from(it.cssRules).forEach(function (it) {
-                    RawSet.generateCSS(id, it);
-                });
-            }
-            it.ownerNode.setAttribute('completed', 'true');
-        });
-    };
-    RawSet.generateCSS = function (id, cssRule) {
-        var _this = this;
-        var start = "#" + id + "-start";
-        var end = "#" + id + "-end";
-        if (cssRule.constructor.name === 'CSSStyleRule') {
-            var rule = cssRule;
-            // rule.selectorText = `${start} ~ *:not(${start} ~ ${end} ~ *) ${rule.selectorText}`;
-            // rule.selectorText = `${start} ~ *:not(${start} ~ ${end} ~ ${rule.selectorText})`;
-            // console.log('-----', rule, rule.selectorText)
-            if (!rule.selectorText.startsWith(':root')) {
-                // rule.selectorText = `${start} ~ ${rule.selectorText}:not(${start} ~ ${end} ~ *)`;
-                // rule.selectorText = `${start} ~ ${rule.selectorText}:not(${start} ~ ${end} ~ *)`;
-                var selectorText = ":is(" + start + " ~ *:not(" + start + " ~ " + end + " ~ *))";
-                if (rule.selectorText.startsWith('.')) {
-                    rule.selectorText = "" + selectorText + rule.selectorText + ", " + selectorText + " " + rule.selectorText;
-                    //     rule.selectorText = `${start} ~ *:not(${start} ~ ${end} ~ *)${rule.selectorText}`;
-                }
-                else {
-                    var divText = start + " ~ " + rule.selectorText + ":not(" + start + " ~ " + end + " ~ *)";
-                    rule.selectorText = selectorText + " " + rule.selectorText + ", " + divText;
-                    // rule.selectorText = `${selectorText} ${rule.selectorText}`;
-                    //     rule.selectorText = `${rule.selectorText} ~ ${start} ~ *:not(${start} ~ ${end} ~ *)`;
-                }
-            }
-            // console.log(rule.selectorText);
-        }
-        else if (cssRule.constructor.name === 'CSSMediaRule') {
-            var rule = cssRule;
-            Array.from(rule.cssRules).forEach(function (it) {
-                _this.generateCSS(id, it);
-            });
-        }
-    };
-    // 중요 스타일 적용 부분
-    RawSet.generateStyleTransform = function (styleBody, componentKey, styleTagWrap) {
-        var _a;
-        if (styleTagWrap === void 0) { styleTagWrap = true; }
-        if (Array.isArray(styleBody)) {
-            styleBody = styleBody.join('\n');
-        }
-        var start = "#" + componentKey + "-start";
-        var end = "#" + componentKey + "-end";
-        var before = StringUtils_1.StringUtils.regexExecArrayReplace(styleBody, /(\$\{.*?\}\$)/g, function (data) {
-            return "var(--domrender-" + data[0] + ")";
-        });
-        var cssobject = (0, parse_1.default)(before);
-        (_a = cssobject.stylesheet) === null || _a === void 0 ? void 0 : _a.rules.forEach(function (rule) {
-            var _a, _b;
-            var isRoot = (_a = rule.selectors) === null || _a === void 0 ? void 0 : _a.find(function (it) { return it.startsWith(':root'); });
-            if (rule.type === 'rule' && !isRoot) { //  && !!isRoot
-                rule.selectors = (_b = rule.selectors) === null || _b === void 0 ? void 0 : _b.map(function (sit) {
-                    var selectorText = ":is(" + start + " ~ *:not(" + start + " ~ " + end + " ~ *))";
-                    if (sit.startsWith('.')) {
-                        return "" + selectorText + sit + ", " + selectorText + " " + sit;
-                    }
-                    else {
-                        var divText = start + " ~ " + sit + ":not(" + start + " ~ " + end + " ~ *)";
-                        return selectorText + " " + sit + ", " + divText;
-                    }
-                });
-            }
-        });
-        var stringify = (0, stringify_1.default)(cssobject);
-        var after = StringUtils_1.StringUtils.regexExecArrayReplace(stringify, /(var\(--domrender-(\$\{.*?\}\$)?\))/g, function (data) {
-            return data[2];
-        });
-        if (styleTagWrap) {
-            styleBody = "<style id='" + componentKey + "-style' domstyle>" + after + "</style>";
-        }
-        return styleBody;
-    };
-    RawSet.prototype.applyEvent = function (obj, fragment, config) {
-        if (fragment === void 0) { fragment = this.fragment; }
-        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(data + "?.length -1", obj);
-            // console.log('------?', currentIndex)
-            // if (currentIndex === undefined || isNaN(currentIndex)) {
-            //     return undefined;
-            // }
-            // const currentIndex = ScriptUtils.evalReturn(`${data}.length`, obj);
-            data = data + "[" + 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); // 중요 start checkpoint 다음인 end checkpoint 앞에 넣는다. 즉 중간 껴넣기 (나중에 meta tag로 변경을 해도될듯하긴한데..)
-    };
-    // 중요 important
-    RawSet.checkPointCreates = function (element, obj, config) {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
-        // const NodeFilter = (config.window as any).NodeFilter;
-        var thisVariableName = element.__domrender_this_variable_name;
-        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('text--->', node.textContent)
-                    // console.log('????????', node.parentElement, node.parentElement?.getAttribute('dr-pre'));
-                    // console.log('???????/',node.textContent, node.parentElement?.getAttribute('dr-pre'))
-                    // TODO: 나중에
-                    // 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_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 normalAttrs_1 = new Map();
-                    var isAttr = element_2.getAttributeNames().filter(function (it) {
-                        var value = element_2.getAttribute(it);
-                        if (value && RawSet.isExporesion(value)) {
-                            normalAttrs_1.set(it, RawSet.exporesionGrouops(value)[0][1]);
-                        }
-                        // console.log(element.getAttribute(it), attrExpresion);
-                        var isTargetAttr = targetAttrNames_1.includes(it.toLowerCase());
-                        return isTargetAttr;
-                    }).length > 0;
-                    // 기본 attribute를 처리하기위해
-                    if (normalAttrs_1.size) {
-                        element_2.setAttribute(EventManager_1.EventManager.normalAttrMapAttrName, JSON.stringify(Array.from(normalAttrs_1.entries())));
-                    }
-                    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 = config.window.document.createElement('template');
-                // const a = StringUtils.regexExec(/\$\{.*?\}/g, text);
-                // const a = StringUtils.regexExec(/[$#]\{.*?\}/g, text);
-                // const a = StringUtils.betweenRegexpStr('[$#]\\{', '\\}', text); // <--TODO: 나중에..
-                var groups = RawSet.exporesionGrouops(text);
-                var map = groups.map(function (it) { return ({ uuid: RandomUtils_1.RandomUtils.getRandomString(40), content: it[0], regexArr: it }); });
-                var lasterIndex = 0;
-                for (var i = 0; i < map.length; i++) {
-                    var it_4 = map[i];
-                    var regexArr = it_4.regexArr;
-                    var preparedText = regexArr.input.substring(lasterIndex, regexArr.index);
-                    // const start = config.window.document.createElement('meta');
-                    // start.setAttribute('id', `${it.uuid}-start`);
-                    // const end = config.window.document.createElement('meta');
-                    // end.setAttribute('id', `${it.uuid}-end`);
-                    var type = void 0;
-                    if (currentNode.parentNode && currentNode.parentNode.nodeName.toUpperCase() === 'STYLE') {
-                        type = RawSetType_1.RawSetType.STYLE_TEXT;
-                    }
-                    else {
-                        type = RawSetType_1.RawSetType.TEXT;
-                    }
-                    var node = document.createTextNode(preparedText);
-                    var startEndPoint = RawSet.createStartEndPoint(node, it_4.uuid, type, config);
-                    // layout setting
-                    template.content.append(node); // 앞 부분 넣고
-                    template.content.append(startEndPoint.start); // add start checkpoint
-                    template.content.append(startEndPoint.end); // add end checkpoint
-                    // content 안쪽 RawSet render 할때 start 와 end 사이에 fragment 연산해서 들어간다.
-                    var fragment = config.window.document.createDocumentFragment();
-                    fragment.append(config.window.document.createTextNode(it_4.content));
-                    pars.push(new RawSet(it_4.uuid, type, {
-                        start: startEndPoint.start,
-                        node: currentNode,
-                        end: startEndPoint.end,
-                        parent: currentNode.parentNode,
-                        thisVariableName: thisVariableName
-                    }, fragment));
-                    lasterIndex = regexArr.index + it_4.content.length;
-                }
-                template.content.append(config.window.document.createTextNode(text.substring(lasterIndex, text.length)));
-                (_b = currentNode === null || currentNode === void 0 ? void 0 : currentNode.parentNode) === null || _b === void 0 ? void 0 : _b.replaceChild(template.content, currentNode); // <-- 여기서 text를 fragment로 replace했기때문에 추적 변경이 가능하다.
-            }
-            else if (currentNode.nodeType === Node.ELEMENT_NODE) {
-                var uuid = RandomUtils_1.RandomUtils.getRandomString(40);
-                var element_3 = currentNode;
-                var fragment = config.window.document.createDocumentFragment();
-                var type = RawSetType_1.RawSetType.TARGET_ELEMENT;
-                var startEndPoint = RawSet.createStartEndPoint(element_3, uuid, type, config);
-                var isElement = ((_d = (_c = config.targetElements) === null || _c === void 0 ? void 0 : _c.map(function (it) { return it.name.toLowerCase(); })) !== null && _d !== void 0 ? _d : []).includes(element_3.tagName.toLowerCase());
-                var targetAttrNames_2 = ((_f = (_e = config.targetAttrs) === null || _e === void 0 ? void 0 : _e.map(function (it) { return it.name; })) !== null && _f !== void 0 ? _f : []).concat(RawSet.DR_ATTRIBUTES);
-                var isAttr = element_3.getAttributeNames().filter(function (it) { return targetAttrNames_2.includes(it.toLowerCase()); }).length > 0;
-                (_g = currentNode === null || currentNode === void 0 ? void 0 : currentNode.parentNode) === null || _g === void 0 ? void 0 : _g.insertBefore(startEndPoint.start, currentNode);
-                (_h = currentNode === null || currentNode === void 0 ? void 0 : currentNode.parentNode) === null || _h === void 0 ? void 0 : _h.insertBefore(startEndPoint.end, currentNode.nextSibling);
-                fragment.append(currentNode);
-                pars.push(new RawSet(uuid, isElement ? type : (isAttr ? RawSetType_1.RawSetType.TARGET_ATTR : RawSetType_1.RawSetType.UNKOWN), {
-                    start: startEndPoint.start,
-                    node: currentNode,
-                    end: startEndPoint.end,
-                    parent: currentNode.parentNode,
-                    thisVariableName: thisVariableName
-                }, fragment));
-            }
-        };
-        // eslint-disable-next-line no-cond-assign
-        while (currentNode = nodeIterator.nextNode()) {
-            _loop_1();
-        }
-        // console.log('check-->', pars)
-        return pars;
-    };
-    RawSet.createStartEndPoint = function (node, id, type, config) {
-        if (type === RawSetType_1.RawSetType.TARGET_ELEMENT) {
-            var element = node;
-            var start = config.window.document.createElement('meta');
-            var end = config.window.document.createElement('meta');
-            start.setAttribute('id', id + "-start");
-            var keys = element.getAttribute(RawSet.DR_KEY_OPTIONNAME);
-            var thisPropertyType = element.getAttribute(RawSet.DR_THIS_PROPERTY_NAME);
-            if (thisPropertyType) {
-                start.setAttribute('type', RawSetOperatorType_1.RawSetOperatorType.DR_THIS_PROPERTY);
-            }
-            if (keys) {
-                element.removeAttribute(RawSet.DR_KEY_OPTIONNAME);
-                start.setAttribute(RawSet.DR_KEY_OPTIONNAME, keys);
-            }
-            end.setAttribute('id', id + "-end");
-            return { start: start, end: end };
-        }
-        else if (type === RawSetType_1.RawSetType.STYLE_TEXT) {
-            return {
-                start: config.window.document.createTextNode("/*start text " + id + "*/"),
-                end: config.window.document.createTextNode("/*end text " + id + "*/")
-            };
-        }
-        else { // text
-            return {
-                start: config.window.document.createComment("start text " + id),
-                end: config.window.document.createComment("end text " + id)
-            };
-        }
-    };
-    RawSet.prototype.remove = function () {
-        this.childAllRemove();
-        this.point.end.remove();
-        this.point.start.remove();
-    };
-    RawSet.prototype.childAllRemove = function () {
-        var next = this.point.start.nextSibling;
-        while (next) {
-            if (next === this.point.end) {
-                break;
-            }
-            next.remove();
-            next = this.point.start.nextSibling;
-        }
-    };
-    RawSet.prototype.childs = function (stopNext) {
-        var childs = [];
-        var next = this.point.start.nextSibling;
-        while (next && next !== this.point.end) {
-            if (stopNext === null || stopNext === void 0 ? void 0 : stopNext(next)) {
-                return;
-            }
-            childs.push(next);
-            next = next.nextSibling;
-        }
-        return childs;
-    };
-    RawSet.prototype.getHasRawSet = function (key) {
-        var rawSet;
-        this.childs(function (node) {
-            var _a, _b;
-            var drKey = (_b = (_a = node).getAttribute) === null || _b === void 0 ? void 0 : _b.call(_a, 'dr-key');
-            if (drKey && drKey === key) {
-                rawSet = node.rawSet;
-                return true;
-            }
-            return false;
-        });
-        return rawSet;
-    };
-    RawSet.drItOtherEncoding = function (element) {
-        var random = RandomUtils_1.RandomUtils.uuid();
-        var regex = /#it#/g;
-        element.querySelectorAll("[" + RawSet.DR_IT_OPTIONNAME + "], [" + RawSet.DR_FOR_OF_NAME + "], [" + RawSet.DR_REPEAT_NAME + "]").forEach(function (it) {
-            it.innerHTML = it.innerHTML.replace(regex, random);
-        });
-        return random;
-    };
-    RawSet.drItOtherDecoding = function (element, random) {
-        element.querySelectorAll("[" + RawSet.DR_IT_OPTIONNAME + "], [" + RawSet.DR_FOR_OF_NAME + "], [" + RawSet.DR_REPEAT_NAME + "]").forEach(function (it) {
-            it.innerHTML = it.innerHTML.replace(RegExp(random, 'g'), '#it#');
-        });
-    };
-    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("[" + RawSet.DR_PRE_NAME + "]").forEach(function (it) {
-            it.innerHTML = it.innerHTML.replace(/this/g, thisRandom);
-        });
-        element.querySelectorAll("[" + RawSet.DR_THIS_NAME + "]").forEach(function (it) {
-            var message = it.innerHTML;
-            StringUtils_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], "" + ((_a = it[1]) !== null && _a !== void 0 ? _a : '') + 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], "" + ((_a = it[1]) !== null && _a !== void 0 ? _a : '') + drThis);
-        });
-        element.innerHTML = message;
-        return thisRandom;
-    };
-    RawSet.drThisDecoding = function (element, thisRandom) {
-        element.querySelectorAll("[" + RawSet.DR_PRE_NAME + "]").forEach(function (it) {
-            it.innerHTML = it.innerHTML.replace(RegExp(thisRandom, 'g'), 'this');
-        });
-        element.querySelectorAll("[" + RawSet.DR_THIS_NAME + "]").forEach(function (it) {
-            it.innerHTML = it.innerHTML.replace(RegExp(thisRandom, 'g'), 'this');
-        });
-    };
-    RawSet.drFormOtherMoveAttr = function (element, as, to, config) {
-        element.querySelectorAll("[" + RawSet.DR_FORM_NAME + "]").forEach(function (subElement) {
-            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("[" + 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("[" + 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 (rawSet, element, drThis, drVarOption, drStripOption, obj, config, set) {
-        var _a, _b, _c, _d, _e;
-        return __awaiter(this, void 0, void 0, function () {
-            var fag, n, stylePromises, templatePromise, _f, i, it_5, _g, _h, _j, _k, _l, style, onCreate, renderScript, createParam, script, oninit, script, thisRandom, vars;
-            return __generator(this, function (_m) {
-                switch (_m.label) {
-                    case 0:
-                        fag = config.window.document.createDocumentFragment();
-                        n = element.cloneNode(true);
-                        if (!set) return [3 /*break*/, 12];
-                        stylePromises = [];
-                        if (!(set.template && set.template.startsWith('lazy://'))) return [3 /*break*/, 2];
-                        return [4 /*yield*/, fetch(set.template.substring(6))];
-                    case 1:
-                        _f = (_m.sent()).text();
-                        return [3 /*break*/, 3];
-                    case 2:
-                        _f = Promise.resolve(set.template);
-                        _m.label = 3;
-                    case 3:
-                        templatePromise = (_f);
-                        i = 0;
-                        _m.label = 4;
-                    case 4:
-                        if (!(set.styles && i < ((_a = set.styles.length) !== null && _a !== void 0 ? _a : 0))) return [3 /*break*/, 9];
-                        it_5 = set.styles[i];
-                        _h = (_g = stylePromises).push;
-                        if (!it_5.startsWith('lazy://')) return [3 /*break*/, 6];
-                        return [4 /*yield*/, fetch(it_5.substring(6))];
-                    case 5:
-                        _j = (_m.sent()).text();
-                        return [3 /*break*/, 7];
-                    case 6:
-                        _j = Promise.resolve(it_5);
-                        _m.label = 7;
-                    case 7:
-                        _h.apply(_g, [_j]);
-                        _m.label = 8;
-                    case 8:
-                        i++;
-                        return [3 /*break*/, 4];
-                    case 9:
-                        _k = set;
-                        return [4 /*yield*/, templatePromise];
-                    case 10:
-                        _k.template = _m.sent();
-                        _l = set;
-                        return [4 /*yield*/, Promise.all(stylePromises)];
-                    case 11:
-                        _l.styles = _m.sent();
-                        style = RawSet.generateStyleTransform((_b = set.styles) !== null && _b !== void 0 ? _b : [], rawSet.uuid, true);
-                        n.innerHTML = style + ((_c = set.template) !== null && _c !== void 0 ? _c : '');
-                        onCreate = element.getAttribute(RawSet.DR_ON_CREATE_ARGUMENTS_OPTIONNAME);
-                        renderScript = '';
-                        createParam = [];
-                        if (onCreate) {
-                            script = renderScript + " return " + onCreate + " ";
-                            createParam = ScriptUtils_1.ScriptUtils.eval(script, obj);
-                            if (!Array.isArray(createParam)) {
-                                createParam = [createParam];
-                            }
-                        }
-                        (_e = (_d = set.obj) === null || _d === void 0 ? void 0 : _d.onCreateRender) === null || _e === void 0 ? void 0 : _e.call.apply(_e, __spreadArray([_d], createParam, false));
-                        oninit = element.getAttribute(RawSet.DR_ON_CREATED_CALLBACK_OPTIONNAME);
-                        if (oninit) {
-                            script = renderScript + "  " + oninit + " ";
-                            ScriptUtils_1.ScriptUtils.eval(script, obj);
-                        }
-                        _m.label = 12;
-                    case 12:
-                        n.querySelectorAll(EventManager_1.eventManager.attrNames.map(function (it) { return "[" + it + "]"; }).join(',')).forEach(function (it) {
-                            it.setAttribute(EventManager_1.EventManager.ownerVariablePathAttrName, 'this');
-                        });
-                        // attribute
-                        n.getAttributeNames().forEach(function (it) { return n.setAttribute(it, n.getAttribute(it).replace(/#this#/g, drThis)); });
-                        thisRandom = this.drThisEncoding(n, drThis);
-                        vars = this.drVarEncoding(n, drVarOption);
-                        this.drVarDecoding(n, vars);
-                        this.drThisDecoding(n, thisRandom);
-                        if (drStripOption && (drStripOption === true || drStripOption === 'true')) {
-                            // console.log('------childNodes', Array.from(n.childNodes))
-                            Array.from(n.childNodes).forEach(function (it) { return fag.append(it); });
-                        }
-                        else {
-                            fag.append(n);
-                        }
-                        fag.__domrender_this_variable_name = drThis;
-                        // console.log('set __domrender_this_variable_name', (fag as any).__domrender_this_variable_name)
-                        return [2 /*return*/, fag];
-                }
-            });
-        });
-    };
-    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) {
-        if (template === void 0) { template = ''; }
-        if (styles === void 0) { styles = []; }
-        var targetElement = {
-            name: name,
-            styles: styles,
-            template: template,
-            callBack: function (element, obj, rawSet, attrs, config) {
-                var _a, _b, _c, _d, _e, _f, _g;
-                return __awaiter(this, void 0, void 0, function () {
-                    var componentKey, stylePromises, templatePromise, _h, i_1, it_6, _j, _k, _l, _m, _o, domrenderComponents, attribute, renderScript, render, constructor, constructorParam, script, param, instance, i, normalAttrMap, onCreate, createParam, script, applayTemplate, innerHTMLThisRandom, componentName, innerHTMLName, oninit, script, style, data, template_1;
-                    return __generator(this, function (_p) {
-                        switch (_p.label) {
-                            case 0:
-                                componentKey = rawSet.uuid;
-                                stylePromises = [];
-                                if (!(this.template && this.template.startsWith('lazy://'))) return [3 /*break*/, 2];
-                                return [4 /*yield*/, fetch(this.template.substring(6))];
-                            case 1:
-                                _h = (_p.sent()).text();
-                                return [3 /*break*/, 3];
-                            case 2:
-                                _h = Promise.resolve(this.template);
-                                _p.label = 3;
-                            case 3:
-                                templatePromise = (_h);
-                                i_1 = 0;
-                                _p.label = 4;
-                            case 4:
-                                if (!(this.styles && i_1 < this.styles.length)) return [3 /*break*/, 9];
-                                it_6 = this.styles[i_1];
-                                _k = (_j = stylePromises).push;
-                                if (!it_6.startsWith('lazy://')) return [3 /*break*/, 6];
-                                return [4 /*yield*/, fetch(it_6.substring(6))];
-                            case 5:
-                                _l = (_p.sent()).text();
-                                return [3 /*break*/, 7];
-                            case 6:
-                                _l = Promise.resolve(it_6);
-                                _p.label = 7;
-                            case 7:
-                                _k.apply(_j, [_l]);
-                                _p.label = 8;
-                            case 8:
-                                i_1++;
-                                return [3 /*break*/, 4];
-                            case 9:
-                                // const templateResponse = await templatePromise;
-                                // const styleResponses = await Promise.all(stylePromises);
-                                _m = this;
-                                return [4 /*yield*/, templatePromise];
-                            case 10:
-                                // const templateResponse = await templatePromise;
-                                // const styleResponses = await Promise.all(stylePromises);
-                                _m.template = _p.sent();
-                                _o = this;
-                                return [4 /*yield*/, Promise.all(stylePromises)];
-                            case 11:
-                                _o.styles = _p.sent();
-                                // console.log('targetsub-22-', this.styles)
-                                // console.log('targetsub-222-', this.template, this.styles)
-                                // Promise.all(promises).then([])
-                                // console.log('callback------->', element)
-                                if (!obj.__domrender_components) {
-                                    obj.__domrender_components = {};
-                                }
-                                domrenderComponents = obj.__domrender_components;
-                                attribute = DomUtils_1.DomUtils.getAttributeToObject(element);
-                                renderScript = 'var $component = this.__render.component; var $element = this.__render.element; var $router = this.__render.router; var $innerHTML = this.__render.innerHTML; var $attribute = this.__render.attribute; var $creatorMetaData = this.__render.creatorMetaData;';
-                                render = Object.freeze({
-                                    renderScript: renderScript,
-                                    element: element,
-                                    innerHTML: element.innerHTML,
-                                    attribute: attribute,
-                                    rawset: rawSet,
-                                    router: config.router,
-                                    componentKey: componentKey,
-                                    scripts: EventManager_1.EventManager.setBindProperty((_a = config.scripts) !== null && _a !== void 0 ? _a : {}, obj)
-                                    // eslint-disable-next-line no-use-before-define
-                                });
-                                constructor = element.getAttribute(RawSet.DR_ON_CONSTRUCTOR_ARGUMENTS_OPTIONNAME);
-                                constructorParam = [];
-                                // dr-constructor
-                                if (constructor) {
-                                    script = renderScript + " return " + constructor + " ";
-                                    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);
-                                instance = domrenderComponents[componentKey];
-                                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." + componentKey;
-                                i.componentKey = componentKey;
-                                i.rawSet = rawSet;
-                                i.attribute = attribute;
-                                i.router = config.router;
-                                i.scripts = render.scripts;
-                                i.drAttrs = attrs;
-                                i.innerHTML = element.innerHTML;
-                                i.rootCreator = new Proxy(obj, new 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);
-                                normalAttrMap = element.getAttribute(EventManager_1.EventManager.normalAttrMapAttrName);
-                                if (instance.onChangeAttrRender && normalAttrMap) {
-                                    new Map(JSON.parse(normalAttrMap)).forEach(function (value, key) {
-                                        var script = renderScript + " return " + value + " ";
-                                        var cval = ScriptUtils_1.ScriptUtils.eval(script, Object.assign(obj, { __render: render }));
-                                        // element.setAttribute(key, cval);
-                                        instance.onChangeAttrRender(key, cval);
-                                    });
-                                }
-                                onCreate = element.getAttribute(RawSet.DR_ON_CREATE_ARGUMENTS_OPTIONNAME);
-                                this.__render = render;
-                                createParam = [];
-                                if (onCreate) {
-                                    script = renderScript + " return " + 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));
-                                applayTemplate = element.innerHTML;
-                                componentName = (_e = element.getAttribute(RawSet.DR_COMPONENT_NAME_OPTIONNAME)) !== null && _e !== void 0 ? _e : 'component';
-                                innerHTMLName = (_f = element.getAttribute(RawSet.DR_COMPONENT_INNER_HTML_NAME_OPTIONNAME)) !== null && _f !== void 0 ? _f : 'innerHTML';
-                                if (applayTemplate) {
-                                    // if (rawSet.point.thisVariableName) {
-                                    // 넘어온 innerHTML에 this가 있으면 해당안되게 우선 치환.
-                                    innerHTMLThisRandom = RandomUtils_1.RandomUtils.uuid();
-                                    applayTemplate = applayTemplate.replace(/this\./g, innerHTMLThisRandom);
-                                    // }
-                                    applayTemplate = applayTemplate.replace(RegExp("#" + componentName + "#", 'g'), 'this');
-                                }
-                                // applayTemplate = template.replace(RegExp(`#${innerHTMLName}#`, 'g'), applayTemplate);
-                                applayTemplate = ((_g = this.template) !== null && _g !== void 0 ? _g : '').replace(RegExp("#" + innerHTMLName + "#", 'g'), applayTemplate);
-                                oninit = element.getAttribute(RawSet.DR_ON_CREATED_CALLBACK_OPTIONNAME);
-                                if (oninit) {
-                                    script = renderScript + "  " + oninit + " ";
-                                    ScriptUtils_1.ScriptUtils.eval(script, Object.assign(obj, {
-                                        __render: render
-                                    }));
-                                }
-                                style = RawSet.generateStyleTransform(this.styles, componentKey, true);
-                                element.innerHTML = style + (applayTemplate !== null && applayTemplate !== void 0 ? applayTemplate : '');
-                                return [4 /*yield*/, RawSet.drThisCreate(rawSet, element, "this.__domrender_components." + componentKey, '', true, obj, config)];
-                            case 12:
-                                data = _p.sent();
-                                // 넘어온 innerHTML에 this가 있는걸 다시 복호화해서 제대로 작동하도록한다.
-                                if (innerHTMLThisRandom) {
-                                    template_1 = config.window.document.createElement('template');
-                                    template_1.content.append(data);
-                                    template_1.innerHTML = template_1.innerHTML.replace(RegExp(innerHTMLThisRandom, 'g'), 'this.');
-                                    data = template_1.content;
-                                }
-                                data.render = render;
-                                return [2 /*return*/, data];
-                        }
-                    });
-                });
-            }
-            // 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 : '');
-    };
-    // public static metaStart(id: string) {
-    //     return `<meta id='${id}-start' />`;
-    // }
-    //
-    // public static metaEnd(id: string) {
-    //     return `<meta id='${id}-end' />`;
-    // }
-    RawSet.destroy = function (obj, parameter, config, destroyOptions) {
-        var _a;
-        if (destroyOptions === void 0) { destroyOptions = []; }
-        if (!destroyOptions.some(function (it) { return it === DestroyOptionType_1.DestroyOptionType.NO_DESTROY; })) {
-            if (!destroyOptions.some(function (it) { return it === DestroyOptionType_1.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_NAME = 'dr';
-    RawSet.DR_IF_NAME = 'dr-if';
-    RawSet.DR_FOR_NAME = 'dr-for';
-    RawSet.DR_FOR_OF_NAME = 'dr-for-of';
-    RawSet.DR_THIS_PROPERTY_NAME = 'dr-this-property';
-    RawSet.DR_REPEAT_NAME = 'dr-repeat';
-    RawSet.DR_THIS_NAME = 'dr-this';
-    RawSet.DR_FORM_NAME = 'dr-form';
-    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';
-    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.DR_COMPONENT_NAME_OPTIONNAME = 'dr-component-name';
-    RawSet.DR_COMPONENT_INNER_HTML_NAME_OPTIONNAME = 'dr-component-inner-html-name';
-    RawSet.DR_KEY_OPTIONNAME = 'dr-key';
-    RawSet.DR_HAS_KEYS_OPTIONNAME = 'dr-has-keys';
-    RawSet.DR_ON_CREATE_ARGUMENTS_OPTIONNAME = 'dr-on-create:arguments';
-    RawSet.DR_ON_CREATED_CALLBACK_OPTIONNAME = 'dr-on-create:callback';
-    RawSet.DR_ON_INIT_ARGUMENTS_OPTIONNAME = 'dr-on-init:arguments';
-    RawSet.DR_ON_CONSTRUCTOR_ARGUMENTS_OPTIONNAME = 'dr-on-constructor:arguments';
-    RawSet.drAttrsOriginName = {
-        dr: RawSet.DR_NAME,
-        drIf: RawSet.DR_IF_NAME,
-        drFor: RawSet.DR_FOR_NAME,
-        drForOf: RawSet.DR_FOR_OF_NAME,
-        drThisProperty: RawSet.DR_THIS_PROPERTY_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,
-        drHasKeysOption: RawSet.DR_HAS_KEYS_OPTIONNAME,
-        drKeyOption: RawSet.DR_KEY_OPTIONNAME
-    };
-    RawSet.DR_TAGS = [];
-    RawSet.DR_ATTRIBUTES = [RawSet.DR_NAME, RawSet.DR_APPENDER_NAME, RawSet.DR_IF_NAME, RawSet.DR_FOR_OF_NAME, RawSet.DR_THIS_PROPERTY_NAME, RawSet.DR_FOR_NAME, RawSet.DR_THIS_NAME, RawSet.DR_FORM_NAME, RawSet.DR_PRE_NAME, RawSet.DR_INNERHTML_NAME, RawSet.DR_INNERTEXT_NAME, RawSet.DR_REPEAT_NAME, RawSet.DR_DETECT_NAME];
-    return RawSet;
-}());
-exports.RawSet = RawSet;