dom-render 1.0.95 → 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");
@@ -80,7 +83,10 @@ var DrTargetElement_1 = require("../operators/DrTargetElement");
 var DrTargetAttr_1 = require("../operators/DrTargetAttr");
 var DestroyOptionType_1 = require("./DestroyOptionType");
 var RawSetType_1 = require("./RawSetType");
-var DrDictionary_1 = require("../operators/DrDictionary");
+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;
@@ -89,6 +95,7 @@ var RawSet = /** @class */ (function () {
         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", {
@@ -105,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) {
@@ -134,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)
@@ -175,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();
@@ -184,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);
@@ -208,7 +215,7 @@ var RawSet = /** @class */ (function () {
                             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),
-                            drDictionary: this.getAttributeAndDelete(element, RawSet.DR_DICTIONARY_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),
@@ -224,7 +231,7 @@ var RawSet = /** @class */ (function () {
                             drCompleteOption: this.getAttributeAndDelete(element, RawSet.DR_COMPLETE_OPTIONNAME),
                             drStripOption: this.getAttributeAndDelete(element, RawSet.DR_STRIP_OPTIONNAME),
                             drDestroyOption: this.getAttributeAndDelete(element, RawSet.DR_DESTROY_OPTIONNAME),
-                            drDictionaryOption: this.getAttributeAndDelete(element, RawSet.DR_DICTIONARY_OPTIONKEYNAME)
+                            drKeyOption: this.getAttributeAndDelete(element, RawSet.DR_KEY_OPTIONNAME)
                         };
                         drAttrs.push(drAttr);
                         operators = [
@@ -237,7 +244,7 @@ var RawSet = /** @class */ (function () {
                             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 DrDictionary_1.DrDictionary(this, __render, { raws: raws, fag: fag }, { element: element, attrName: RawSet.DR_DICTIONARY_NAME, attr: drAttr.drDictionary, attrs: drAttr }, { config: config, obj: obj, operatorAround: (_l = config.operatorAround) === null || _l === void 0 ? void 0 : _l.drDictionary }, { 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 }),
@@ -275,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);
@@ -290,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
                                     }));
@@ -329,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('-');
@@ -347,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}`;
@@ -357,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} ~ *)`;
                 }
@@ -379,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;
     };
@@ -406,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);
@@ -434,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;
@@ -557,34 +596,37 @@ 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"));
-            var dictionaryKey = element.getAttribute('dr-dictionary-key');
-            var dictionary = element.getAttribute('dr-dictionary');
-            if (dictionary) {
-                start.setAttribute('type', 'dictionary');
+            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 (dictionaryKey) {
-                start.setAttribute('dictionary-key', dictionaryKey);
+            if (keys) {
+                element.removeAttribute(RawSet.DR_KEY_OPTIONNAME);
+                start.setAttribute(RawSet.DR_KEY_OPTIONNAME, keys);
             }
-            end.setAttribute('id', "".concat(id, "-end"));
-            return {
-                start: start,
-                end: 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)
             };
         }
     };
+    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) {
@@ -595,16 +637,41 @@ var RawSet = /** @class */ (function () {
             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("[".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#');
         });
     };
@@ -617,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) {
@@ -683,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);
             });
@@ -694,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);
             });
@@ -756,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];
@@ -765,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);
@@ -822,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))];
@@ -878,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({
@@ -896,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];
@@ -908,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;
@@ -923,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);
@@ -933,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];
@@ -949,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가 있는걸 다시 복호화해서 제대로 작동하도록한다.
@@ -1016,7 +1085,7 @@ var RawSet = /** @class */ (function () {
     RawSet.DR_IF_NAME = 'dr-if';
     RawSet.DR_FOR_NAME = 'dr-for';
     RawSet.DR_FOR_OF_NAME = 'dr-for-of';
-    RawSet.DR_DICTIONARY_NAME = 'dr-dictionary';
+    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';
@@ -1035,7 +1104,8 @@ var RawSet = /** @class */ (function () {
     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_DICTIONARY_OPTIONKEYNAME = 'dr-dictionary-key';
+    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';
@@ -1045,7 +1115,7 @@ var RawSet = /** @class */ (function () {
         drIf: RawSet.DR_IF_NAME,
         drFor: RawSet.DR_FOR_NAME,
         drForOf: RawSet.DR_FOR_OF_NAME,
-        drDictionary: RawSet.DR_DICTIONARY_NAME,
+        drThisProperty: RawSet.DR_THIS_PROPERTY_NAME,
         drAppender: RawSet.DR_APPENDER_NAME,
         drRepeat: RawSet.DR_REPEAT_NAME,
         drThis: RawSet.DR_THIS_NAME,
@@ -1061,10 +1131,11 @@ var RawSet = /** @class */ (function () {
         drCompleteOption: RawSet.DR_COMPLETE_OPTIONNAME,
         drStripOption: RawSet.DR_STRIP_OPTIONNAME,
         drDestroyOption: RawSet.DR_DESTROY_OPTIONNAME,
-        drDictionaryOption: RawSet.DR_DICTIONARY_OPTIONKEYNAME
+        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_DICTIONARY_NAME, RawSet.DR_FOR_NAME, RawSet.DR_THIS_NAME, RawSet.DR_FORM_NAME, RawSet.DR_PRE_NAME, RawSet.DR_INNERHTML_NAME, RawSet.DR_INNERTEXT_NAME, RawSet.DR_REPEAT_NAME, RawSet.DR_DETECT_NAME];
+    RawSet.DR_ATTRIBUTES = [RawSet.DR_NAME, RawSet.DR_APPENDER_NAME, RawSet.DR_IF_NAME, RawSet.DR_FOR_OF_NAME, RawSet.DR_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;

package/rawsets/RawSetOperatorType.d.ts

@@ -0,0 +1,3 @@
+export declare enum RawSetOperatorType {
+    DR_THIS_PROPERTY = "this-property"
+}

package/rawsets/RawSetOperatorType.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RawSetOperatorType = void 0;
+var RawSetOperatorType;
+(function (RawSetOperatorType) {
+    RawSetOperatorType["DR_THIS_PROPERTY"] = "this-property";
+})(RawSetOperatorType = exports.RawSetOperatorType || (exports.RawSetOperatorType = {}));

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;
 };