dom-render 1.0.97 → 1.0.98

package/operators/DrTargetAttr.js

@@ -29,7 +29,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 (_) try {
+        while (g && (g = 0, op[0] && (_ = 0)), _) 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]) {
@@ -57,10 +57,8 @@ var OperatorExecuter_1 = require("./OperatorExecuter");
 var DrTargetAttr = /** @class */ (function (_super) {
     __extends(DrTargetAttr, _super);
     function DrTargetAttr(rawSet, render, returnContainer, elementSource, source, afterCallBack) {
-        var _this = this;
         source.operatorAround = undefined;
-        _this = _super.call(this, rawSet, render, returnContainer, elementSource, source, afterCallBack, false) || this;
-        return _this;
+        return _super.call(this, rawSet, render, returnContainer, elementSource, source, afterCallBack, false) || this;
     }
     DrTargetAttr.prototype.execute = function () {
         var _a, _b, _c, _d;

package/operators/DrTargetElement.js

@@ -29,7 +29,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 (_) try {
+        while (g && (g = 0, op[0] && (_ = 0)), _) 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]) {
@@ -58,10 +58,8 @@ var OperatorExecuter_1 = require("./OperatorExecuter");
 var DrTargetElement = /** @class */ (function (_super) {
     __extends(DrTargetElement, _super);
     function DrTargetElement(rawSet, render, returnContainer, elementSource, source, afterCallBack) {
-        var _this = this;
         source.operatorAround = undefined;
-        _this = _super.call(this, rawSet, render, returnContainer, elementSource, source, afterCallBack, false) || this;
-        return _this;
+        return _super.call(this, rawSet, render, returnContainer, elementSource, source, afterCallBack, false) || this;
     }
     DrTargetElement.prototype.execute = function () {
         var _a, _b, _c, _d;
@@ -85,7 +83,7 @@ var DrTargetElement = /** @class */ (function (_super) {
                             if (detectAction_1 && render_1) {
                                 this.rawSet.detect = {
                                     action: function () {
-                                        var script = "var $component = this.__render.component; var $element = this.__render.element; var $innerHTML = this.__render.innerHTML; var $attribute = this.__render.attribute;  " + detectAction_1 + " ";
+                                        var script = "var $component = this.__render.component; var $element = this.__render.element; var $innerHTML = this.__render.innerHTML; var $attribute = this.__render.attribute;  ".concat(detectAction_1, " ");
                                         ScriptUtils_1.ScriptUtils.eval(script, Object.assign(_this.source.obj, {
                                             __render: render_1
                                         }));

package/operators/DrThis.js

@@ -29,7 +29,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 (_) try {
+        while (g && (g = 0, op[0] && (_ = 0)), _) 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]) {
@@ -76,7 +76,7 @@ var DrThis = /** @class */ (function (_super) {
                             RawSet_1.RawSet.destroy(this.rawSet.data.obj, [], this.source.config, destroyOptions);
                         }
                         this.rawSet.data = attr;
-                        return [4 /*yield*/, RawSet_1.RawSet.drThisCreate(this.rawSet, this.elementSource.element, "" + this.elementSource.attrs.drThis + (attr.config.objPath ? ('.' + attr.config.objPath) : ''), (_c = this.elementSource.attrs.drVarOption) !== null && _c !== void 0 ? _c : '', this.elementSource.attrs.drStripOption, this.source.obj, this.source.config, attr)];
+                        return [4 /*yield*/, RawSet_1.RawSet.drThisCreate(this.rawSet, this.elementSource.element, "".concat(this.elementSource.attrs.drThis).concat(attr.config.objPath ? ('.' + attr.config.objPath) : ''), (_c = this.elementSource.attrs.drVarOption) !== null && _c !== void 0 ? _c : '', this.elementSource.attrs.drStripOption, this.source.obj, this.source.config, attr)];
                     case 1:
                         componentBody = _j.sent();
                         this.returnContainer.fag.append(componentBody);

package/operators/DrThisProperty.js

@@ -40,7 +40,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 (_) try {
+        while (g && (g = 0, op[0] && (_ = 0)), _) 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]) {
@@ -70,10 +70,8 @@ var OperatorExecuter_1 = require("./OperatorExecuter");
 var DrThisProperty = /** @class */ (function (_super) {
     __extends(DrThisProperty, _super);
     function DrThisProperty(rawSet, render, returnContainer, elementSource, source, afterCallBack) {
-        var _this = this;
         source.operatorAround = undefined;
-        _this = _super.call(this, rawSet, render, returnContainer, elementSource, source, afterCallBack, false) || this;
-        return _this;
+        return _super.call(this, rawSet, render, returnContainer, elementSource, source, afterCallBack, false) || this;
     }
     DrThisProperty.prototype.executeAttrRequire = function (attr) {
         var _a, _b, _c, _d, _e;
@@ -92,7 +90,7 @@ var DrThisProperty = /** @class */ (function (_super) {
                 // }
                 // await new Promise(resolve => setTimeout(resolve, 1000));
                 // console.log('!!!!!!!!!!!!!!', this.rawSet);
-                ScriptUtils_1.ScriptUtils.eval("\n                    " + this.render.bindScript + "\n                    " + ((_c = this.elementSource.attrs.drBeforeOption) !== null && _c !== void 0 ? _c : '') + "\n                    var i = 0; \n                    const dictionary = " + attr + ";\n                    const dictionaryKey = '" + dictionaryKey + "';\n                    const dictionaryStr = `" + attr + "`.trim();\n                    // console.log('----@#!@#@!#', this.__render.oldChild);\n                    if (dictionary) {\n                        for(const it in dictionary) {\n                            var destIt = dictionaryStr + '[\"' + it + '\"]';\n                            const n = this.__render.element.cloneNode(true);\n                            n.setAttribute('dr-this', destIt);\n                            n.setAttribute('dr-key', it);\n                            // n.setAttribute('dr-dictionary-key', it);\n                            this.__render.fag.append(n);\n                            i++;\n                        }\n                         this.__render.rawset.point.start.setAttribute('dr-has-keys',Object.keys(dictionary).join(','));\n                    }\n                    " + ((_d = this.elementSource.attrs.drAfterOption) !== null && _d !== void 0 ? _d : '') + "\n                    ", Object.assign(this.source.obj, {
+                ScriptUtils_1.ScriptUtils.eval("\n                    ".concat(this.render.bindScript, "\n                    ").concat((_c = this.elementSource.attrs.drBeforeOption) !== null && _c !== void 0 ? _c : '', "\n                    var i = 0; \n                    const dictionary = ").concat(attr, ";\n                    const dictionaryKey = '").concat(dictionaryKey, "';\n                    const dictionaryStr = `").concat(attr, "`.trim();\n                    // console.log('----@#!@#@!#', this.__render.oldChild);\n                    if (dictionary) {\n                        for(const it in dictionary) {\n                            var destIt = dictionaryStr + '[\"' + it + '\"]';\n                            const n = this.__render.element.cloneNode(true);\n                            n.setAttribute('dr-this', destIt);\n                            n.setAttribute('dr-key', it);\n                            // n.setAttribute('dr-dictionary-key', it);\n                            this.__render.fag.append(n);\n                            i++;\n                        }\n                         this.__render.rawset.point.start.setAttribute('dr-has-keys',Object.keys(dictionary).join(','));\n                    }\n                    ").concat((_d = this.elementSource.attrs.drAfterOption) !== null && _d !== void 0 ? _d : '', "\n                    "), Object.assign(this.source.obj, {
                     __render: Object.freeze(__assign({ drStripOption: this.elementSource.attrs.drStripOption, drAttr: this.elementSource.attrs, drAttrsOriginName: RawSet_1.RawSet.drAttrsOriginName, fag: newTemp }, this.render))
                 }));
                 RawSet_1.RawSet.drVarDecoding(newTemp, vars);
@@ -118,7 +116,7 @@ var DrThisProperty = /** @class */ (function (_super) {
             var cNode = _c[_i];
             var element = cNode.cloneNode(true);
             element.removeAttribute(RawSet_1.RawSet.DR_THIS_PROPERTY_NAME);
-            element.setAttribute(RawSet_1.RawSet.DR_THIS_NAME, "this." + fullPath);
+            element.setAttribute(RawSet_1.RawSet.DR_THIS_NAME, "this.".concat(fullPath));
             element.setAttribute(RawSet_1.RawSet.DR_KEY_OPTIONNAME, key);
             // rawSet.point.end.after(element);
             var fg = config.window.document.createDocumentFragment();

package/operators/OperatorExecuter.d.ts

@@ -5,32 +5,32 @@ import { RawSet } from '../rawsets/RawSet';
 import { Render } from '../rawsets/Render';
 import { Attrs } from '../rawsets/Attrs';
 import { Config } from '../configs/Config';
-export declare type OperatorAround = {
+export interface OperatorAround {
     beforeAttr?: (value: string | null | undefined, opratorExecutor: OperatorExecuter) => string | null | undefined;
     before?: (data: any, opratorExecutor: OperatorExecuter) => any;
     after?: (data: any, opratorExecutor: OperatorExecuter) => void;
-};
+}
 export declare enum ExecuteState {
     EXECUTE = 0,
     NO_EXECUTE = 1,
     STOP = 2
 }
-export declare type AfterCallBack = {
+export type AfterCallBack = {
     onAttrInitCallBacks: AttrInitCallBack[];
     onElementInitCallBacks: ElementInitCallBack[];
     onThisComponentSetCallBacks: ComponentSet[];
 };
-export declare type ReturnContainer = {
+export type ReturnContainer = {
     raws: RawSet[];
     fag: DocumentFragment;
 };
-export declare type ElementSource = {
+export type ElementSource = {
     element: Element;
     attrs: Attrs;
     attr?: string | null;
     attrName?: string | undefined;
 };
-export declare type Source = {
+export type Source = {
     config: Config;
     operatorAround?: OperatorAround;
     obj: any;

package/operators/OperatorExecuter.js

@@ -14,7 +14,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 (_) try {
+        while (g && (g = 0, op[0] && (_ = 0)), _) 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]) {
@@ -69,7 +69,7 @@ var OperatorExecuter = /** @class */ (function () {
                         }
                         r = attrValue;
                         if (r && this.startingExecute) {
-                            r = ScriptUtils_1.ScriptUtils.eval(" " + this.render.bindScript + "; return " + attrValue, Object.assign(this.source.obj, { __render: this.render }));
+                            r = ScriptUtils_1.ScriptUtils.eval(" ".concat(this.render.bindScript, "; return ").concat(attrValue), Object.assign(this.source.obj, { __render: this.render }));
                         }
                         if ((_c = this.source.operatorAround) === null || _c === void 0 ? void 0 : _c.before) {
                             r = (_d = this.source.operatorAround) === null || _d === void 0 ? void 0 : _d.before(r, this);

package/operators/OperatorExecuterAttrRequire.js

@@ -29,7 +29,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 (_) try {
+        while (g && (g = 0, op[0] && (_ = 0)), _) 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]) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dom-render",
-  "version": "1.0.97",
+  "version": "1.0.98",
   "main": "DomRender.js",
   "license": "MIT",
   "description": "html view template engine",

package/rawsets/AttrInitCallBack.d.ts

@@ -1,4 +1,4 @@
-export declare type AttrInitCallBack = {
+export type AttrInitCallBack = {
     attrName: string;
     attrValue: string;
     obj: any;

package/rawsets/Attrs.d.ts

@@ -1,4 +1,4 @@
-export declare type Attrs = {
+export type Attrs = {
     dr: string | null;
     drIf: string | null;
     drAppender: string | null;

package/rawsets/CreatorMetaData.d.ts

@@ -1,7 +1,7 @@
 import { Router } from '../routers/Router';
 import { Attrs } from './Attrs';
 import { RawSet } from './RawSet';
-export declare type CreatorMetaData = {
+export type CreatorMetaData = {
     thisVariableName?: string | null;
     thisFullVariableName?: string | null;
     componentKey?: string | null;

package/rawsets/ElementInitCallBack.d.ts

@@ -1,6 +1,6 @@
 import { TargetElement } from '../configs/TargetElement';
 import { CreatorMetaData } from './CreatorMetaData';
-export declare type ElementInitCallBack = {
+export type ElementInitCallBack = {
     name: string;
     obj: any;
     targetElement: TargetElement;

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 (_) try {
+        while (g && (g = 0, op[0] && (_ = 0)), _) 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]) {
@@ -112,7 +112,7 @@ var RawSet = /** @class */ (function () {
             var _a, _b, _c;
             var script = '';
             if (cNode.nodeType === Node.TEXT_NODE) {
-                script = "`" + ((_a = cNode.textContent) !== null && _a !== void 0 ? _a : '') + "`";
+                script = "`".concat((_a = cNode.textContent) !== null && _a !== void 0 ? _a : '', "`");
                 // console.log('???????', script)
             }
             else if (cNode.nodeType === Node.ELEMENT_NODE) {
@@ -141,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.___" + it);
+                    script = script.replace(RegExp(it.replace('$', '\\$'), 'g'), "this.___".concat(it));
                     // console.log('scripts-->', script)
                 });
                 // console.log('----------', script);
-                Array.from(ScriptUtils_1.ScriptUtils.getVariablePaths(script)).filter(function (it) { return !it.startsWith("___" + 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("___".concat(EventManager_1.EventManager.SCRIPTS_VARNAME)); }).forEach(function (it) { return usingTriggerVariables.add(it); });
             }
         });
         // console.log('usingTriggerVariable----------->', usingTriggerVariables)
@@ -182,7 +182,7 @@ var RawSet = /** @class */ (function () {
                             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            "
+                            bindScript: "\n                    const ".concat(EventManager_1.EventManager.SCRIPTS_VARNAME, " = this.__render.scripts;\n                    const ").concat(EventManager_1.EventManager.RAWSET_VARNAME, " = this.__render.rawset;\n                    const ").concat(EventManager_1.EventManager.ELEMENT_VARNAME, " = this.__render.element;\n                    const ").concat(EventManager_1.EventManager.ATTRIBUTE_VARNAME, " = this.__render.attribute;\n                    const ").concat(EventManager_1.EventManager.RANGE_VARNAME, " = this.__render.range;\n                    const ").concat(EventManager_1.EventManager.ROUTER_VARNAME, " = this.__render.router;\n            ")
                             // eslint-disable-next-line no-use-before-define
                         });
                         fag = config.window.document.createDocumentFragment();
@@ -191,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(__render.bindScript + " return " + runText, Object.assign(obj, { __render: __render }));
+                            r = ScriptUtils_1.ScriptUtils.eval("".concat(__render.bindScript, " return ").concat(runText), Object.assign(obj, { __render: __render }));
                             template = config.window.document.createElement('template');
                             template.innerHTML = r;
                             newNode = template.content;
                         }
                         else {
-                            r = ScriptUtils_1.ScriptUtils.eval(__render.bindScript + "  return " + runText, Object.assign(obj, { __render: __render }));
+                            r = ScriptUtils_1.ScriptUtils.eval("".concat(__render.bindScript, "  return ").concat(runText), Object.assign(obj, { __render: __render }));
                             newNode = config.window.document.createTextNode(r);
                         }
                         (_a = cNode.parentNode) === null || _a === void 0 ? void 0 : _a.replaceChild(newNode, cNode);
@@ -282,7 +282,7 @@ 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 " + 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 }));
+                                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 }));
                             }
                         });
                         // 중요 style isolation 나중에 :scope로 대체 가능할듯.
@@ -298,7 +298,7 @@ var RawSet = /** @class */ (function () {
                                 oninit = it_2.targetElement.__render.element.getAttribute(RawSet.DR_ON_INIT_ARGUMENTS_OPTIONNAME);
                                 param = [];
                                 if (oninit) {
-                                    script = it_2.targetElement.__render.renderScript + " return " + oninit + " ";
+                                    script = "".concat(it_2.targetElement.__render.renderScript, " return ").concat(oninit, " ");
                                     param = ScriptUtils_1.ScriptUtils.eval(script, Object.assign(obj, {
                                         __render: it_2.targetElement.__render
                                     }));
@@ -360,8 +360,8 @@ var RawSet = /** @class */ (function () {
     };
     RawSet.generateCSS = function (id, cssRule) {
         var _this = this;
-        var start = "#" + id + "-start";
-        var end = "#" + id + "-end";
+        var start = "#".concat(id, "-start");
+        var end = "#".concat(id, "-end");
         if (cssRule.constructor.name === 'CSSStyleRule') {
             var rule = cssRule;
             // rule.selectorText = `${start} ~ *:not(${start} ~ ${end} ~ *) ${rule.selectorText}`;
@@ -370,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(" + start + " ~ *:not(" + start + " ~ " + end + " ~ *))";
+                var selectorText = ":is(".concat(start, " ~ *:not(").concat(start, " ~ ").concat(end, " ~ *))");
                 if (rule.selectorText.startsWith('.')) {
-                    rule.selectorText = "" + selectorText + rule.selectorText + ", " + selectorText + " " + rule.selectorText;
+                    rule.selectorText = "".concat(selectorText).concat(rule.selectorText, ", ").concat(selectorText, " ").concat(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;
+                    var divText = "".concat(start, " ~ ").concat(rule.selectorText, ":not(").concat(start, " ~ ").concat(end, " ~ *)");
+                    rule.selectorText = "".concat(selectorText, " ").concat(rule.selectorText, ", ").concat(divText);
                     // rule.selectorText = `${selectorText} ${rule.selectorText}`;
                     //     rule.selectorText = `${rule.selectorText} ~ ${start} ~ *:not(${start} ~ ${end} ~ *)`;
                 }
@@ -398,10 +398,10 @@ var RawSet = /** @class */ (function () {
         if (Array.isArray(styleBody)) {
             styleBody = styleBody.join('\n');
         }
-        var start = "#" + componentKey + "-start";
-        var end = "#" + componentKey + "-end";
+        var start = "#".concat(componentKey, "-start");
+        var end = "#".concat(componentKey, "-end");
         var before = StringUtils_1.StringUtils.regexExecArrayReplace(styleBody, /(\$\{.*?\}\$)/g, function (data) {
-            return "var(--domrender-" + data[0] + ")";
+            return "var(--domrender-".concat(data[0], ")");
         });
         var cssobject = (0, parse_1.default)(before);
         (_a = cssobject.stylesheet) === null || _a === void 0 ? void 0 : _a.rules.forEach(function (rule) {
@@ -409,13 +409,13 @@ var RawSet = /** @class */ (function () {
             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 + " ~ *))";
+                    var selectorText = ":is(".concat(start, " ~ *:not(").concat(start, " ~ ").concat(end, " ~ *))");
                     if (sit.startsWith('.')) {
-                        return "" + selectorText + sit + ", " + selectorText + " " + sit;
+                        return "".concat(selectorText).concat(sit, ", ").concat(selectorText, " ").concat(sit);
                     }
                     else {
-                        var divText = start + " ~ " + sit + ":not(" + start + " ~ " + end + " ~ *)";
-                        return selectorText + " " + sit + ", " + divText;
+                        var divText = "".concat(start, " ~ ").concat(sit, ":not(").concat(start, " ~ ").concat(end, " ~ *)");
+                        return "".concat(selectorText, " ").concat(sit, ", ").concat(divText);
                     }
                 });
             }
@@ -425,7 +425,7 @@ var RawSet = /** @class */ (function () {
             return data[2];
         });
         if (styleTagWrap) {
-            styleBody = "<style id='" + componentKey + "-style' domstyle>" + after + "</style>";
+            styleBody = "<style id='".concat(componentKey, "-style' domstyle>").concat(after, "</style>");
         }
         return styleBody;
     };
@@ -446,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(data + "?.length -1", obj);
+            var currentIndex = ScriptUtils_1.ScriptUtils.evalReturn("".concat(data, "?.length -1"), obj);
             // console.log('------?', currentIndex)
             // if (currentIndex === undefined || isNaN(currentIndex)) {
             //     return undefined;
             // }
             // const currentIndex = ScriptUtils.evalReturn(`${data}.length`, obj);
-            data = data + "[" + currentIndex + "]";
+            data = "".concat(data, "[").concat(currentIndex, "]");
             element.setAttribute(RawSet.DR_APPENDER_NAME, data);
             // element.setAttribute(RawSet.DR_IF_NAME, data);
             // element.setAttribute('dr-id', data);
@@ -596,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', id + "-start");
+            start.setAttribute('id', "".concat(id, "-start"));
             var keys = element.getAttribute(RawSet.DR_KEY_OPTIONNAME);
             var thisPropertyType = element.getAttribute(RawSet.DR_THIS_PROPERTY_NAME);
             if (thisPropertyType) {
@@ -606,19 +606,19 @@ var RawSet = /** @class */ (function () {
                 element.removeAttribute(RawSet.DR_KEY_OPTIONNAME);
                 start.setAttribute(RawSet.DR_KEY_OPTIONNAME, keys);
             }
-            end.setAttribute('id', id + "-end");
+            end.setAttribute('id', "".concat(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 + "*/")
+                start: config.window.document.createTextNode("/*start text ".concat(id, "*/")),
+                end: config.window.document.createTextNode("/*end text ".concat(id, "*/"))
             };
         }
         else { // text
             return {
-                start: config.window.document.createComment("start text " + id),
-                end: config.window.document.createComment("end text " + id)
+                start: config.window.document.createComment("start text ".concat(id)),
+                end: config.window.document.createComment("end text ".concat(id))
             };
         }
     };
@@ -665,13 +665,13 @@ var RawSet = /** @class */ (function () {
     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) {
+        element.querySelectorAll("[".concat(RawSet.DR_IT_OPTIONNAME, "], [").concat(RawSet.DR_FOR_OF_NAME, "], [").concat(RawSet.DR_REPEAT_NAME, "]")).forEach(function (it) {
             it.innerHTML = it.innerHTML.replace(regex, random);
         });
         return random;
     };
     RawSet.drItOtherDecoding = function (element, random) {
-        element.querySelectorAll("[" + RawSet.DR_IT_OPTIONNAME + "], [" + RawSet.DR_FOR_OF_NAME + "], [" + RawSet.DR_REPEAT_NAME + "]").forEach(function (it) {
+        element.querySelectorAll("[".concat(RawSet.DR_IT_OPTIONNAME, "], [").concat(RawSet.DR_FOR_OF_NAME, "], [").concat(RawSet.DR_REPEAT_NAME, "]")).forEach(function (it) {
             it.innerHTML = it.innerHTML.replace(RegExp(random, 'g'), '#it#');
         });
     };
@@ -684,35 +684,36 @@ var RawSet = /** @class */ (function () {
         // 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("[".concat(RawSet.DR_PRE_NAME, "]")).forEach(function (it) {
+            it.innerHTML = it.innerHTML.replace(/@this@/g, thisRandom);
         });
-        element.querySelectorAll("[" + RawSet.DR_THIS_NAME + "]").forEach(function (it) {
+        element.querySelectorAll("[".concat(RawSet.DR_THIS_NAME, "]")).forEach(function (it) {
             var message = it.innerHTML;
-            StringUtils_1.StringUtils.regexExec(/([^(dr\-)])?this(?=.?)/g, message).reverse().forEach(function (it) {
+            // StringUtils.regexExec(/([^(dr\-)])?this(?=.?)/g, message).reverse().forEach(it => {
+            StringUtils_1.StringUtils.regexExec(/@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);
+                message = message.substr(0, it.index) + message.substr(it.index).replace(it[0], "".concat((_a = it[1]) !== null && _a !== void 0 ? _a : '').concat(drThis));
             });
             it.innerHTML = message;
         });
         var message = element.innerHTML;
-        StringUtils_1.StringUtils.regexExec(/([^(dr\-)])?this(?=.?)/g, message).reverse().forEach(function (it) {
+        StringUtils_1.StringUtils.regexExec(/@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);
+            message = message.substr(0, it.index) + message.substr(it.index).replace(it[0], "".concat((_a = it[1]) !== null && _a !== void 0 ? _a : '').concat(drThis));
         });
         element.innerHTML = message;
         return thisRandom;
     };
     RawSet.drThisDecoding = function (element, thisRandom) {
-        element.querySelectorAll("[" + RawSet.DR_PRE_NAME + "]").forEach(function (it) {
-            it.innerHTML = it.innerHTML.replace(RegExp(thisRandom, 'g'), 'this');
+        element.querySelectorAll("[".concat(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');
+        element.querySelectorAll("[".concat(RawSet.DR_THIS_NAME, "]")).forEach(function (it) {
+            it.innerHTML = it.innerHTML.replace(RegExp(thisRandom, 'g'), '@this@');
         });
     };
     RawSet.drFormOtherMoveAttr = function (element, as, to, config) {
-        element.querySelectorAll("[" + RawSet.DR_FORM_NAME + "]").forEach(function (subElement) {
+        element.querySelectorAll("[".concat(RawSet.DR_FORM_NAME, "]")).forEach(function (subElement) {
             var _a;
             var nodeIterator = config.window.document.createNodeIterator(subElement, NodeFilter.SHOW_ELEMENT, {
                 acceptNode: function (node) {
@@ -750,7 +751,7 @@ var RawSet = /** @class */ (function () {
             };
         });
         // element.querySelectorAll(`[${RawSet.DR_THIS_NAME}]`).forEach(it => {
-        element.querySelectorAll("[" + RawSet.DR_VAR_OPTIONNAME + "]").forEach(function (it) {
+        element.querySelectorAll("[".concat(RawSet.DR_VAR_OPTIONNAME, "]")).forEach(function (it) {
             vars.filter(function (vit) { return vit.value && vit.name; }).forEach(function (vit) {
                 it.innerHTML = it.innerHTML.replace(vit.regex, vit.random);
             });
@@ -761,7 +762,7 @@ var RawSet = /** @class */ (function () {
         return vars;
     };
     RawSet.drVarDecoding = function (element, vars) {
-        element.querySelectorAll("[" + RawSet.DR_THIS_NAME + "]").forEach(function (it) {
+        element.querySelectorAll("[".concat(RawSet.DR_THIS_NAME, "]")).forEach(function (it) {
             vars.filter(function (vit) { return vit.value && vit.name; }).forEach(function (vit) {
                 it.innerHTML = it.innerHTML.replace(RegExp(vit.random, 'g'), vit.value);
             });
@@ -823,7 +824,7 @@ var RawSet = /** @class */ (function () {
                         renderScript = '';
                         createParam = [];
                         if (onCreate) {
-                            script = renderScript + " return " + onCreate + " ";
+                            script = "".concat(renderScript, " return ").concat(onCreate, " ");
                             createParam = ScriptUtils_1.ScriptUtils.eval(script, obj);
                             if (!Array.isArray(createParam)) {
                                 createParam = [createParam];
@@ -832,12 +833,12 @@ 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 = renderScript + "  " + oninit + " ";
+                            script = "".concat(renderScript, "  ").concat(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) {
+                        n.querySelectorAll(EventManager_1.eventManager.attrNames.map(function (it) { return "[".concat(it, "]"); }).join(',')).forEach(function (it) {
                             it.setAttribute(EventManager_1.EventManager.ownerVariablePathAttrName, 'this');
                         });
                         // attribute
@@ -965,7 +966,7 @@ var RawSet = /** @class */ (function () {
                                 constructorParam = [];
                                 // dr-constructor
                                 if (constructor) {
-                                    script = renderScript + " return " + constructor + " ";
+                                    script = "".concat(renderScript, " return ").concat(constructor, " ");
                                     param = (_b = ScriptUtils_1.ScriptUtils.eval(script, Object.assign(obj, { __render: render }))) !== null && _b !== void 0 ? _b : [];
                                     if (!Array.isArray(param)) {
                                         param = [param];
@@ -977,7 +978,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." + componentKey;
+                                i.thisFullVariableName = "this.__domrender_components.".concat(componentKey);
                                 i.componentKey = componentKey;
                                 i.rawSet = rawSet;
                                 i.attribute = attribute;
@@ -992,7 +993,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 = renderScript + " return " + value + " ";
+                                        var script = "".concat(renderScript, " return ").concat(value, " ");
                                         var cval = ScriptUtils_1.ScriptUtils.eval(script, Object.assign(obj, { __render: render }));
                                         // element.setAttribute(key, cval);
                                         instance.onChangeAttrRender(key, cval);
@@ -1002,7 +1003,7 @@ var RawSet = /** @class */ (function () {
                                 this.__render = render;
                                 createParam = [];
                                 if (onCreate) {
-                                    script = renderScript + " return " + onCreate + " ";
+                                    script = "".concat(renderScript, " return ").concat(onCreate, " ");
                                     createParam = ScriptUtils_1.ScriptUtils.eval(script, Object.assign(obj, { __render: render }));
                                     if (!Array.isArray(createParam)) {
                                         createParam = [createParam];
@@ -1018,20 +1019,20 @@ var RawSet = /** @class */ (function () {
                                     innerHTMLThisRandom = RandomUtils_1.RandomUtils.uuid();
                                     applayTemplate = applayTemplate.replace(/this\./g, innerHTMLThisRandom);
                                     // }
-                                    applayTemplate = applayTemplate.replace(RegExp("#" + componentName + "#", 'g'), 'this');
+                                    applayTemplate = applayTemplate.replace(RegExp("#".concat(componentName, "#"), 'g'), 'this');
                                 }
                                 // applayTemplate = template.replace(RegExp(`#${innerHTMLName}#`, 'g'), applayTemplate);
-                                applayTemplate = ((_g = this.template) !== null && _g !== void 0 ? _g : '').replace(RegExp("#" + innerHTMLName + "#", 'g'), applayTemplate);
+                                applayTemplate = ((_g = this.template) !== null && _g !== void 0 ? _g : '').replace(RegExp("#".concat(innerHTMLName, "#"), 'g'), applayTemplate);
                                 oninit = element.getAttribute(RawSet.DR_ON_CREATED_CALLBACK_OPTIONNAME);
                                 if (oninit) {
-                                    script = renderScript + "  " + oninit + " ";
+                                    script = "".concat(renderScript, "  ").concat(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)];
+                                return [4 /*yield*/, RawSet.drThisCreate(rawSet, element, "this.__domrender_components.".concat(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 declare type Render = {
+export type Render = {
     rawset?: RawSet;
     scripts?: {
         [n: string]: any;

package/routers/Router.d.ts

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