dom-render 1.0.96 → 1.0.97

package/rawsets/RawSet.js

@@ -25,7 +25,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+        while (_) try {
             if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
             if (y = 0, t) op = [op[0] & 2, t.value];
             switch (op[0]) {
@@ -55,6 +55,9 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     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");
@@ -82,6 +85,8 @@ 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;
@@ -107,7 +112,7 @@ var RawSet = /** @class */ (function () {
             var _a, _b, _c;
             var script = '';
             if (cNode.nodeType === Node.TEXT_NODE) {
-                script = "`".concat((_a = cNode.textContent) !== null && _a !== void 0 ? _a : '', "`");
+                script = "`" + ((_a = cNode.textContent) !== null && _a !== void 0 ? _a : '') + "`";
                 // console.log('???????', script)
             }
             else if (cNode.nodeType === Node.ELEMENT_NODE) {
@@ -136,11 +141,11 @@ var RawSet = /** @class */ (function () {
                 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));
+                    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("___".concat(EventManager_1.EventManager.SCRIPTS_VARNAME)); }).forEach(function (it) { return usingTriggerVariables.add(it); });
+                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)
@@ -177,7 +182,7 @@ var RawSet = /** @class */ (function () {
                             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            ")
+                            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();
@@ -186,13 +191,13 @@ var RawSet = /** @class */ (function () {
                         runText = RawSet.exporesionGrouops(textContent)[0][1];
                         newNode = void 0;
                         if (textContent === null || textContent === void 0 ? void 0 : textContent.startsWith('#')) {
-                            r = ScriptUtils_1.ScriptUtils.eval("".concat(__render.bindScript, " return ").concat(runText), Object.assign(obj, { __render: __render }));
+                            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("".concat(__render.bindScript, "  return ").concat(runText), Object.assign(obj, { __render: __render }));
+                            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);
@@ -277,11 +282,12 @@ var RawSet = /** @class */ (function () {
                                     fag: genNode,
                                     scripts: EventManager_1.EventManager.setBindProperty(config === null || config === void 0 ? void 0 : config.scripts, obj)
                                 });
-                                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), Object.assign(obj, { __render: render }));
+                                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로 대체 가능할듯.
-                        RawSet.generateStyleSheetsLocal();
+                        // 2023.9.4일 없앰  style 처음들어올때 처리하는걸로 바꿈
+                        // RawSet.generateStyleSheetsLocal(config);
                         for (_1 = 0, onThisComponentSetCallBacks_1 = onThisComponentSetCallBacks; _1 < onThisComponentSetCallBacks_1.length; _1++) {
                             it_1 = onThisComponentSetCallBacks_1[_1];
                             (_q = (_p = it_1.obj) === null || _p === void 0 ? void 0 : _p.onInitRender) === null || _q === void 0 ? void 0 : _q.call(_p);
@@ -292,7 +298,7 @@ var RawSet = /** @class */ (function () {
                                 oninit = it_2.targetElement.__render.element.getAttribute(RawSet.DR_ON_INIT_ARGUMENTS_OPTIONNAME);
                                 param = [];
                                 if (oninit) {
-                                    script = "".concat(it_2.targetElement.__render.renderScript, " return ").concat(oninit, " ");
+                                    script = it_2.targetElement.__render.renderScript + " return " + oninit + " ";
                                     param = ScriptUtils_1.ScriptUtils.eval(script, Object.assign(obj, {
                                         __render: it_2.targetElement.__render
                                     }));
@@ -331,8 +337,13 @@ var RawSet = /** @class */ (function () {
             });
         });
     };
-    RawSet.generateStyleSheetsLocal = function () {
-        Array.from(window.document.styleSheets).filter(function (it) { return it.ownerNode && it.ownerNode instanceof Element && it.ownerNode.hasAttribute('domstyle') && it.ownerNode.getAttribute('id') && !it.ownerNode.getAttribute('completed'); }).forEach(function (it) {
+    /**
+     * @deprecated
+     * @param config
+     */
+    RawSet.generateStyleSheetsLocal = function (config) {
+        // console.log('config.window.document.styleSheets---------', config.window.document.styleSheets);
+        Array.from(config.window.document.styleSheets).filter(function (it) { return it.ownerNode && it.ownerNode instanceof Element && it.ownerNode.hasAttribute('domstyle') && it.ownerNode.getAttribute('id') && !it.ownerNode.getAttribute('completed'); }).forEach(function (it) {
             var _a;
             var styleElement = it.ownerNode;
             var split = (_a = styleElement.getAttribute('id')) === null || _a === void 0 ? void 0 : _a.split('-');
@@ -349,8 +360,8 @@ var RawSet = /** @class */ (function () {
     };
     RawSet.generateCSS = function (id, cssRule) {
         var _this = this;
-        var start = "#".concat(id, "-start");
-        var end = "#".concat(id, "-end");
+        var start = "#" + id + "-start";
+        var end = "#" + id + "-end";
         if (cssRule.constructor.name === 'CSSStyleRule') {
             var rule = cssRule;
             // rule.selectorText = `${start} ~ *:not(${start} ~ ${end} ~ *) ${rule.selectorText}`;
@@ -359,14 +370,14 @@ var RawSet = /** @class */ (function () {
             if (!rule.selectorText.startsWith(':root')) {
                 // rule.selectorText = `${start} ~ ${rule.selectorText}:not(${start} ~ ${end} ~ *)`;
                 // rule.selectorText = `${start} ~ ${rule.selectorText}:not(${start} ~ ${end} ~ *)`;
-                var selectorText = ":is(".concat(start, " ~ *:not(").concat(start, " ~ ").concat(end, " ~ *))");
+                var selectorText = ":is(" + start + " ~ *:not(" + start + " ~ " + end + " ~ *))";
                 if (rule.selectorText.startsWith('.')) {
-                    rule.selectorText = "".concat(selectorText).concat(rule.selectorText, ", ").concat(selectorText, " ").concat(rule.selectorText);
+                    rule.selectorText = "" + selectorText + rule.selectorText + ", " + selectorText + " " + rule.selectorText;
                     //     rule.selectorText = `${start} ~ *:not(${start} ~ ${end} ~ *)${rule.selectorText}`;
                 }
                 else {
-                    var divText = "".concat(start, " ~ ").concat(rule.selectorText, ":not(").concat(start, " ~ ").concat(end, " ~ *)");
-                    rule.selectorText = "".concat(selectorText, " ").concat(rule.selectorText, ", ").concat(divText);
+                    var divText = start + " ~ " + rule.selectorText + ":not(" + start + " ~ " + end + " ~ *)";
+                    rule.selectorText = selectorText + " " + rule.selectorText + ", " + divText;
                     // rule.selectorText = `${selectorText} ${rule.selectorText}`;
                     //     rule.selectorText = `${rule.selectorText} ~ ${start} ~ *:not(${start} ~ ${end} ~ *)`;
                 }
@@ -381,13 +392,40 @@ var RawSet = /** @class */ (function () {
         }
     };
     // 중요 스타일 적용 부분
-    RawSet.generateStyleTransform = function (styleBody, id, styleTagWrap) {
+    RawSet.generateStyleTransform = function (styleBody, componentKey, styleTagWrap) {
+        var _a;
         if (styleTagWrap === void 0) { styleTagWrap = true; }
         if (Array.isArray(styleBody)) {
             styleBody = styleBody.join('\n');
         }
+        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='".concat(id, "-style' domstyle>").concat(styleBody, "</style>");
+            styleBody = "<style id='" + componentKey + "-style' domstyle>" + after + "</style>";
         }
         return styleBody;
     };
@@ -408,13 +446,13 @@ var RawSet = /** @class */ (function () {
         var data = element.getAttribute(RawSet.DR_APPENDER_NAME);
         // if (data && !/\[[0-9]+\]/g.test(data)) {
         if (data && !/\[.+\]/g.test(data)) {
-            var currentIndex = ScriptUtils_1.ScriptUtils.evalReturn("".concat(data, "?.length -1"), obj);
+            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 = "".concat(data, "[").concat(currentIndex, "]");
+            data = data + "[" + currentIndex + "]";
             element.setAttribute(RawSet.DR_APPENDER_NAME, data);
             // element.setAttribute(RawSet.DR_IF_NAME, data);
             // element.setAttribute('dr-id', data);
@@ -436,9 +474,8 @@ var RawSet = /** @class */ (function () {
     // 중요 important
     RawSet.checkPointCreates = function (element, obj, config) {
         var _a, _b, _c, _d, _e, _f, _g, _h;
-        // console.log('start==========')
+        // const NodeFilter = (config.window as any).NodeFilter;
         var thisVariableName = element.__domrender_this_variable_name;
-        // console.log('checkPointCreates thisVariableName', thisVariableName);
         var nodeIterator = config.window.document.createNodeIterator(element, NodeFilter.SHOW_ALL, {
             acceptNode: function (node) {
                 var _a, _b, _c, _d, _e;
@@ -559,7 +596,7 @@ var RawSet = /** @class */ (function () {
             var element = node;
             var start = config.window.document.createElement('meta');
             var end = config.window.document.createElement('meta');
-            start.setAttribute('id', "".concat(id, "-start"));
+            start.setAttribute('id', id + "-start");
             var keys = element.getAttribute(RawSet.DR_KEY_OPTIONNAME);
             var thisPropertyType = element.getAttribute(RawSet.DR_THIS_PROPERTY_NAME);
             if (thisPropertyType) {
@@ -569,19 +606,19 @@ var RawSet = /** @class */ (function () {
                 element.removeAttribute(RawSet.DR_KEY_OPTIONNAME);
                 start.setAttribute(RawSet.DR_KEY_OPTIONNAME, keys);
             }
-            end.setAttribute('id', "".concat(id, "-end"));
+            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 ".concat(id, "*/")),
-                end: config.window.document.createTextNode("/*end text ".concat(id, "*/"))
+                start: config.window.document.createTextNode("/*start text " + id + "*/"),
+                end: config.window.document.createTextNode("/*end text " + id + "*/")
             };
         }
         else { // text
             return {
-                start: config.window.document.createComment("start text ".concat(id)),
-                end: config.window.document.createComment("end text ".concat(id))
+                start: config.window.document.createComment("start text " + id),
+                end: config.window.document.createComment("end text " + id)
             };
         }
     };
@@ -628,13 +665,13 @@ var RawSet = /** @class */ (function () {
     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) {
+        element.querySelectorAll("[" + RawSet.DR_IT_OPTIONNAME + "], [" + RawSet.DR_FOR_OF_NAME + "], [" + RawSet.DR_REPEAT_NAME + "]").forEach(function (it) {
             it.innerHTML = it.innerHTML.replace(regex, random);
         });
         return random;
     };
     RawSet.drItOtherDecoding = function (element, random) {
-        element.querySelectorAll("[".concat(RawSet.DR_IT_OPTIONNAME, "], [").concat(RawSet.DR_FOR_OF_NAME, "], [").concat(RawSet.DR_REPEAT_NAME, "]")).forEach(function (it) {
+        element.querySelectorAll("[" + RawSet.DR_IT_OPTIONNAME + "], [" + RawSet.DR_FOR_OF_NAME + "], [" + RawSet.DR_REPEAT_NAME + "]").forEach(function (it) {
             it.innerHTML = it.innerHTML.replace(RegExp(random, 'g'), '#it#');
         });
     };
@@ -647,35 +684,35 @@ var RawSet = /** @class */ (function () {
         // element.querySelectorAll(`[${RawSet.DR_PRE_NAME}]`).forEach(it => {
         //     let message = it.innerHTML;
         // })
-        element.querySelectorAll("[".concat(RawSet.DR_PRE_NAME, "]")).forEach(function (it) {
+        element.querySelectorAll("[" + RawSet.DR_PRE_NAME + "]").forEach(function (it) {
             it.innerHTML = it.innerHTML.replace(/this/g, thisRandom);
         });
-        element.querySelectorAll("[".concat(RawSet.DR_THIS_NAME, "]")).forEach(function (it) {
+        element.querySelectorAll("[" + RawSet.DR_THIS_NAME + "]").forEach(function (it) {
             var message = it.innerHTML;
             StringUtils_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));
+                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], "".concat((_a = it[1]) !== null && _a !== void 0 ? _a : '').concat(drThis));
+            message = message.substr(0, it.index) + message.substr(it.index).replace(it[0], "" + ((_a = it[1]) !== null && _a !== void 0 ? _a : '') + drThis);
         });
         element.innerHTML = message;
         return thisRandom;
     };
     RawSet.drThisDecoding = function (element, thisRandom) {
-        element.querySelectorAll("[".concat(RawSet.DR_PRE_NAME, "]")).forEach(function (it) {
+        element.querySelectorAll("[" + RawSet.DR_PRE_NAME + "]").forEach(function (it) {
             it.innerHTML = it.innerHTML.replace(RegExp(thisRandom, 'g'), 'this');
         });
-        element.querySelectorAll("[".concat(RawSet.DR_THIS_NAME, "]")).forEach(function (it) {
+        element.querySelectorAll("[" + RawSet.DR_THIS_NAME + "]").forEach(function (it) {
             it.innerHTML = it.innerHTML.replace(RegExp(thisRandom, 'g'), 'this');
         });
     };
     RawSet.drFormOtherMoveAttr = function (element, as, to, config) {
-        element.querySelectorAll("[".concat(RawSet.DR_FORM_NAME, "]")).forEach(function (subElement) {
+        element.querySelectorAll("[" + RawSet.DR_FORM_NAME + "]").forEach(function (subElement) {
             var _a;
             var nodeIterator = config.window.document.createNodeIterator(subElement, NodeFilter.SHOW_ELEMENT, {
                 acceptNode: function (node) {
@@ -713,7 +750,7 @@ var RawSet = /** @class */ (function () {
             };
         });
         // element.querySelectorAll(`[${RawSet.DR_THIS_NAME}]`).forEach(it => {
-        element.querySelectorAll("[".concat(RawSet.DR_VAR_OPTIONNAME, "]")).forEach(function (it) {
+        element.querySelectorAll("[" + RawSet.DR_VAR_OPTIONNAME + "]").forEach(function (it) {
             vars.filter(function (vit) { return vit.value && vit.name; }).forEach(function (vit) {
                 it.innerHTML = it.innerHTML.replace(vit.regex, vit.random);
             });
@@ -724,7 +761,7 @@ var RawSet = /** @class */ (function () {
         return vars;
     };
     RawSet.drVarDecoding = function (element, vars) {
-        element.querySelectorAll("[".concat(RawSet.DR_THIS_NAME, "]")).forEach(function (it) {
+        element.querySelectorAll("[" + RawSet.DR_THIS_NAME + "]").forEach(function (it) {
             vars.filter(function (vit) { return vit.value && vit.name; }).forEach(function (vit) {
                 it.innerHTML = it.innerHTML.replace(RegExp(vit.random, 'g'), vit.value);
             });
@@ -786,7 +823,7 @@ var RawSet = /** @class */ (function () {
                         renderScript = '';
                         createParam = [];
                         if (onCreate) {
-                            script = "".concat(renderScript, " return ").concat(onCreate, " ");
+                            script = renderScript + " return " + onCreate + " ";
                             createParam = ScriptUtils_1.ScriptUtils.eval(script, obj);
                             if (!Array.isArray(createParam)) {
                                 createParam = [createParam];
@@ -795,14 +832,16 @@ var RawSet = /** @class */ (function () {
                         (_e = (_d = set.obj) === null || _d === void 0 ? void 0 : _d.onCreateRender) === null || _e === void 0 ? void 0 : _e.call.apply(_e, __spreadArray([_d], createParam, false));
                         oninit = element.getAttribute(RawSet.DR_ON_CREATED_CALLBACK_OPTIONNAME);
                         if (oninit) {
-                            script = "".concat(renderScript, "  ").concat(oninit, " ");
+                            script = renderScript + "  " + oninit + " ";
                             ScriptUtils_1.ScriptUtils.eval(script, obj);
                         }
                         _m.label = 12;
                     case 12:
-                        n.querySelectorAll(EventManager_1.eventManager.attrNames.map(function (it) { return "[".concat(it, "]"); }).join(',')).forEach(function (it) {
+                        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);
@@ -852,10 +891,11 @@ var RawSet = /** @class */ (function () {
             callBack: function (element, obj, rawSet, attrs, config) {
                 var _a, _b, _c, _d, _e, _f, _g;
                 return __awaiter(this, void 0, void 0, function () {
-                    var stylePromises, templatePromise, _h, i_1, it_6, _j, _k, _l, _m, _o, domrenderComponents, componentKey, attribute, renderScript, render, constructor, constructorParam, script, param, instance, i, normalAttrMap, onCreate, createParam, script, applayTemplate, innerHTMLThisRandom, componentName, innerHTMLName, oninit, script, style, data, template_1;
+                    var componentKey, stylePromises, templatePromise, _h, i_1, it_6, _j, _k, _l, _m, _o, domrenderComponents, attribute, renderScript, render, constructor, constructorParam, script, param, instance, i, normalAttrMap, onCreate, createParam, script, applayTemplate, innerHTMLThisRandom, componentName, innerHTMLName, oninit, script, style, data, template_1;
                     return __generator(this, function (_p) {
                         switch (_p.label) {
                             case 0:
+                                componentKey = rawSet.uuid;
                                 stylePromises = [];
                                 if (!(this.template && this.template.startsWith('lazy://'))) return [3 /*break*/, 2];
                                 return [4 /*yield*/, fetch(this.template.substring(6))];
@@ -908,7 +948,6 @@ var RawSet = /** @class */ (function () {
                                     obj.__domrender_components = {};
                                 }
                                 domrenderComponents = obj.__domrender_components;
-                                componentKey = rawSet.uuid;
                                 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({
@@ -926,7 +965,7 @@ var RawSet = /** @class */ (function () {
                                 constructorParam = [];
                                 // dr-constructor
                                 if (constructor) {
-                                    script = "".concat(renderScript, " return ").concat(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];
@@ -938,7 +977,7 @@ var RawSet = /** @class */ (function () {
                                 instance = domrenderComponents[componentKey];
                                 i = instance.__domrender_component_new = ((_c = instance.__domrender_component_new) !== null && _c !== void 0 ? _c : new Proxy({}, new Types_1.DomRenderFinalProxy()));
                                 i.thisVariableName = rawSet.point.thisVariableName;
-                                i.thisFullVariableName = "this.__domrender_components.".concat(componentKey);
+                                i.thisFullVariableName = "this.__domrender_components." + componentKey;
                                 i.componentKey = componentKey;
                                 i.rawSet = rawSet;
                                 i.attribute = attribute;
@@ -953,7 +992,7 @@ var RawSet = /** @class */ (function () {
                                 normalAttrMap = element.getAttribute(EventManager_1.EventManager.normalAttrMapAttrName);
                                 if (instance.onChangeAttrRender && normalAttrMap) {
                                     new Map(JSON.parse(normalAttrMap)).forEach(function (value, key) {
-                                        var script = "".concat(renderScript, " return ").concat(value, " ");
+                                        var script = renderScript + " return " + value + " ";
                                         var cval = ScriptUtils_1.ScriptUtils.eval(script, Object.assign(obj, { __render: render }));
                                         // element.setAttribute(key, cval);
                                         instance.onChangeAttrRender(key, cval);
@@ -963,7 +1002,7 @@ var RawSet = /** @class */ (function () {
                                 this.__render = render;
                                 createParam = [];
                                 if (onCreate) {
-                                    script = "".concat(renderScript, " return ").concat(onCreate, " ");
+                                    script = renderScript + " return " + onCreate + " ";
                                     createParam = ScriptUtils_1.ScriptUtils.eval(script, Object.assign(obj, { __render: render }));
                                     if (!Array.isArray(createParam)) {
                                         createParam = [createParam];
@@ -979,20 +1018,20 @@ var RawSet = /** @class */ (function () {
                                     innerHTMLThisRandom = RandomUtils_1.RandomUtils.uuid();
                                     applayTemplate = applayTemplate.replace(/this\./g, innerHTMLThisRandom);
                                     // }
-                                    applayTemplate = applayTemplate.replace(RegExp("#".concat(componentName, "#"), 'g'), 'this');
+                                    applayTemplate = applayTemplate.replace(RegExp("#" + componentName + "#", 'g'), 'this');
                                 }
                                 // applayTemplate = template.replace(RegExp(`#${innerHTMLName}#`, 'g'), applayTemplate);
-                                applayTemplate = ((_g = this.template) !== null && _g !== void 0 ? _g : '').replace(RegExp("#".concat(innerHTMLName, "#"), 'g'), applayTemplate);
+                                applayTemplate = ((_g = this.template) !== null && _g !== void 0 ? _g : '').replace(RegExp("#" + innerHTMLName + "#", 'g'), applayTemplate);
                                 oninit = element.getAttribute(RawSet.DR_ON_CREATED_CALLBACK_OPTIONNAME);
                                 if (oninit) {
-                                    script = "".concat(renderScript, "  ").concat(oninit, " ");
+                                    script = renderScript + "  " + oninit + " ";
                                     ScriptUtils_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.".concat(componentKey), '', true, obj, config)];
+                                return [4 /*yield*/, RawSet.drThisCreate(rawSet, element, "this.__domrender_components." + componentKey, '', true, obj, config)];
                             case 12:
                                 data = _p.sent();
                                 // 넘어온 innerHTML에 this가 있는걸 다시 복호화해서 제대로 작동하도록한다.

package/rawsets/Render.d.ts

@@ -1,7 +1,7 @@
 import { CreatorMetaData } from './CreatorMetaData';
 import { Router } from '../routers/Router';
 import { RawSet } from './RawSet';
-export type Render = {
+export declare type Render = {
     rawset?: RawSet;
     scripts?: {
         [n: string]: any;

package/routers/Router.d.ts

@@ -1,4 +1,4 @@
-export type RouteData = {
+export declare type RouteData = {
     path: string;
     url: string;
     data?: any;

package/routers/Router.js

@@ -27,7 +27,7 @@ var Router = /** @class */ (function () {
         var _this = this;
         var proxy = this.rootObj._DomRender_proxy;
         if (proxy) {
-            var key = "___".concat(EventManager_1.EventManager.ROUTER_VARNAME);
+            var key = "___" + EventManager_1.EventManager.ROUTER_VARNAME;
             proxy.render(key);
         }
         this.attachCallbacks.forEach(function (it) {

package/utils/dom/DomUtils.d.ts

@@ -1,4 +1,4 @@
-export type Attr = {
+export declare type Attr = {
     name: string;
     value: any;
 };

package/utils/node/NodeUtils.d.ts

@@ -1,4 +1,4 @@
-export type Attr = {
+export declare type Attr = {
     name: string;
     value: any;
 };

package/utils/script/ScriptUtils.js

@@ -33,7 +33,7 @@ var ScriptUtils = /** @class */ (function () {
         }, new GetDetectProxy());
         try {
             // eslint-disable-next-line no-new-func,no-unused-expressions
-            Function("\"use strict\"; ".concat(script, "; ")).bind(destUser)();
+            Function("\"use strict\"; " + script + "; ").bind(destUser)();
         }
         catch (e) {
             console.error(e);
@@ -49,7 +49,7 @@ var ScriptUtils = /** @class */ (function () {
     };
     ScriptUtils.eval = function (script, thisTarget) {
         // eslint-disable-next-line no-new-func,no-unused-expressions
-        return Function("\"use strict\"; ".concat(script, " ")).bind(thisTarget)();
+        return Function("\"use strict\"; " + script + " ").bind(thisTarget)();
     };
     ScriptUtils.loadElement = function (name, attribute, document) {
         return new Promise(function (resolve, reject) {

package/utils/storage/StorageUtils.d.ts

@@ -1,9 +1,16 @@
 export declare class StorageUtils {
     static setLocalStorageItem(k: string, v: string | any, window: Window): void;
+    static setSessionStorageItem(k: string, v: string | any, window: Window): void;
     static getLocalStorageItem(k: string, window: Window): string | null;
+    static getSessionStorageItem(k: string, window: Window): string | null;
     static cutLocalStorageItem(k: string, window: Window): string | null;
+    static cutSessionStorageItem(k: string, window: Window): string | null;
     static removeLocalStorageItem(k: string, window: Window): void;
+    static removeSessionStorageItem(k: string, window: Window): void;
     static getLocalStorageJsonItem<T>(k: string, window: Window): T | undefined;
+    static getSessionStorageJsonItem<T>(k: string, window: Window): T | undefined;
     static cutLocalStorageJsonItem<T>(k: string, window: Window): T | undefined;
+    static cutSessionStorageJsonItem<T>(k: string, window: Window): T | undefined;
     static clearLocalStorage(window: Window): void;
+    static clearSessionStorage(window: Window): void;
 }

package/utils/storage/StorageUtils.js

@@ -10,17 +10,34 @@ var StorageUtils = /** @class */ (function () {
         }
         window.localStorage.setItem(k, v);
     };
+    StorageUtils.setSessionStorageItem = function (k, v, window) {
+        if (typeof v === 'object') {
+            v = JSON.stringify(v);
+        }
+        window.sessionStorage.setItem(k, v);
+    };
     StorageUtils.getLocalStorageItem = function (k, window) {
         return window.localStorage.getItem(k);
     };
+    StorageUtils.getSessionStorageItem = function (k, window) {
+        return window.sessionStorage.getItem(k);
+    };
     StorageUtils.cutLocalStorageItem = function (k, window) {
         var data = StorageUtils.getLocalStorageItem(k, window);
         StorageUtils.removeLocalStorageItem(k, window);
         return data;
     };
+    StorageUtils.cutSessionStorageItem = function (k, window) {
+        var data = StorageUtils.getSessionStorageItem(k, window);
+        StorageUtils.removeSessionStorageItem(k, window);
+        return data;
+    };
     StorageUtils.removeLocalStorageItem = function (k, window) {
         return window.localStorage.removeItem(k);
     };
+    StorageUtils.removeSessionStorageItem = function (k, window) {
+        return window.sessionStorage.removeItem(k);
+    };
     StorageUtils.getLocalStorageJsonItem = function (k, window) {
         var item = window.localStorage.getItem(k);
         if (item) {
@@ -35,14 +52,36 @@ var StorageUtils = /** @class */ (function () {
             return undefined;
         }
     };
+    StorageUtils.getSessionStorageJsonItem = function (k, window) {
+        var item = window.sessionStorage.getItem(k);
+        if (item) {
+            try {
+                return JSON.parse(item);
+            }
+            catch (e) {
+                return undefined;
+            }
+        }
+        else {
+            return undefined;
+        }
+    };
     StorageUtils.cutLocalStorageJsonItem = function (k, window) {
         var item = StorageUtils.getLocalStorageJsonItem(k, window);
         StorageUtils.removeLocalStorageItem(k, window);
         return item;
     };
+    StorageUtils.cutSessionStorageJsonItem = function (k, window) {
+        var item = StorageUtils.getSessionStorageJsonItem(k, window);
+        StorageUtils.removeSessionStorageItem(k, window);
+        return item;
+    };
     StorageUtils.clearLocalStorage = function (window) {
         window.localStorage.clear();
     };
+    StorageUtils.clearSessionStorage = function (window) {
+        window.sessionStorage.clear();
+    };
     return StorageUtils;
 }());
 exports.StorageUtils = StorageUtils;

package/utils/string/StringUtils.d.ts

@@ -1,5 +1,6 @@
 export declare class StringUtils {
     static deleteEnter(data: string): string;
     static regexExec(regex: RegExp, text: string): RegExpExecArray[];
+    static regexExecArrayReplace(origin: string, regexpExecArrayOrRegex: RegExpExecArray[] | RegExp, replace: string | ((data: RegExpExecArray) => string)): string;
     static escapeSpecialCharacterRegExp(data: string): string;
 }

package/utils/string/StringUtils.js

@@ -16,6 +16,23 @@ var StringUtils = /** @class */ (function () {
         }
         return usingVars;
     };
+    StringUtils.regexExecArrayReplace = function (origin, regexpExecArrayOrRegex, replace) {
+        var regexpExecArrays = Array.isArray(regexpExecArrayOrRegex) ? regexpExecArrayOrRegex : StringUtils.regexExec(regexpExecArrayOrRegex, origin);
+        regexpExecArrays.reverse().forEach(function (it) {
+            var r = typeof replace === 'string' ? replace : replace(it);
+            origin = origin.substr(0, it.index) + origin.substr(it.index).replace(it[0], r);
+        });
+        return origin;
+    };
+    // public static regexGroups(regex: RegExp, text: string) {
+    //   const usingVars = [];
+    //   let varExec = regex.exec(text)
+    //   while (varExec) {
+    //     usingVars.push(varExec)
+    //     varExec = regex.exec(varExec.input)
+    //   }
+    //   return usingVars;
+    // }
     // public static betweenRegexpStr(start: string, end: string, data: string, flag = 'gm') {
     //     const startEspace = StringUtils.escapeSpecialCharacterRegExp(start);
     //     const reg = RegExp(`(${start}(?:(${start})??[^${startEspace}]*?${end}))`,flag);