dom-render - npm Package Compare versions

Comparing version 1.0.16 to 1.0.17

dist/dom-render.js

@@ -144,3 +144,2 @@ 'use strict';
             GetDetectProxy.prototype.set = function (target, p, value, receiver) {
-                console.log('-------set-->', target, p, value);
                 return true;
@@ -227,3 +226,3 @@ };
                 else {
-                    obj[varName] = it;
+                    _this.setValue(obj, varName, it);
                 }
@@ -243,2 +242,3 @@ }
                 it.addEventListener('input', function (eit) {
+                    console.log('input change--->link');
                     if (typeof _this.getValue(obj, varName) === 'function') {
@@ -280,7 +280,6 @@ _this.getValue(obj, varName)(it.value, eit);
                 var data = (_a = Function("\"use strict\"; const $target=this.$target; " + script + " ").bind(Object.assign({ $target: it }, obj))()) !== null && _a !== void 0 ? _a : {};
+                console.log('--', data);
                 for (var _i = 0, _b = Object.entries(data); _i < _b.length; _i++) {
                     var _c = _b[_i], key = _c[0], value = _c[1];
-                    if (typeof value === 'string') {
-                        it.setAttribute(key, value);
-                    }
+                    it.setAttribute(key, String(value));
                 }
@@ -296,4 +295,4 @@ }
                     var _c = _b[_i], key = _c[0], value = _c[1];
-                    if (typeof value === 'string' && it instanceof HTMLElement) {
-                        it.style[key] = value;
+                    if (it instanceof HTMLElement) {
+                        it.style[key] = String(value);
                     }
@@ -340,6 +339,10 @@ }
     class_1.prototype.setValue = function (obj, name, value) {
-        ScriptUtils.eval(name + " = this.___value", Object.assign({ ___value: value }, obj));
+        ScriptUtils.eval("this." + name + " = this.value", { this: obj, value: value });
     };
     class_1.prototype.isUsingThisVar = function (raws, varName) {
+        console.log('isUsingV', raws, varName, ScriptUtils.getVariablePaths(raws !== null && raws !== void 0 ? raws : ''));
         if (varName && raws) {
+            if (varName.startsWith('this.')) {
+                varName = varName.replace(/this\./, '');
+            }
             var variablePaths = ScriptUtils.getVariablePaths(raws !== null && raws !== void 0 ? raws : '');
@@ -385,3 +388,3 @@ return variablePaths.has(varName);
         genNode.childNodes.forEach(function (cNode, key) {
-            var _a, _b, _c, _d, _e, _f;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
             var fag = document.createDocumentFragment();
@@ -395,33 +398,50 @@ if (cNode.nodeType === Node.TEXT_NODE) {
                 var element_2 = cNode;
-                var drIf = _this.getAttributeAndDelete(element_2, RawSet.DR_IF_NAME);
-                var drFor = _this.getAttributeAndDelete(element_2, RawSet.DR_FOR_NAME);
-                var drForOf = _this.getAttributeAndDelete(element_2, RawSet.DR_FOR_OF_NAME);
-                var drThis = _this.getAttributeAndDelete(element_2, RawSet.DR_THIS_NAME);
-                var drItOption = _this.getAttributeAndDelete(element_2, RawSet.DR_IT_OPTIONNAME);
-                var drDeclarationOption = _this.getAttributeAndDelete(element_2, RawSet.DR_DECLARATION_OPTIONNAME);
-                var drVarOption = _this.getAttributeAndDelete(element_2, RawSet.DR_VAR_OPTIONNAME);
-                var drStripOption = _this.getAttributeAndDelete(element_2, RawSet.DR_STRIP_OPTIONNAME) === 'true';
-                if (drIf) {
-                    var r = ScriptUtils.evalReturn(drIf, obj);
-                    if (r) {
-                        Array.from(element_2.childNodes).forEach(function (it) { return fag.append(it); });
-                        var rr = RawSet.checkPointCreates(fag, config);
-                        if (drStripOption) {
-                            (_b = element_2.parentNode) === null || _b === void 0 ? void 0 : _b.replaceChild(fag, element_2);
-                        }
-                        else {
-                            element_2.appendChild(fag);
-                        }
-                        raws.push.apply(raws, rr);
-                    }
-                    else {
-                        element_2.remove();
-                    }
+                var drAttr = {
+                    dr: _this.getAttributeAndDelete(element_2, RawSet.DR),
+                    drIf: _this.getAttributeAndDelete(element_2, RawSet.DR_IF_NAME),
+                    drFor: _this.getAttributeAndDelete(element_2, RawSet.DR_FOR_NAME),
+                    drForOf: _this.getAttributeAndDelete(element_2, RawSet.DR_FOR_OF_NAME),
+                    drThis: _this.getAttributeAndDelete(element_2, RawSet.DR_THIS_NAME),
+                    drItOption: _this.getAttributeAndDelete(element_2, RawSet.DR_IT_OPTIONNAME),
+                    drVarOption: _this.getAttributeAndDelete(element_2, RawSet.DR_VAR_OPTIONNAME),
+                    drStripOption: _this.getAttributeAndDelete(element_2, RawSet.DR_STRIP_OPTIONNAME) === 'true'
+                };
+                if (drAttr.dr !== null && drAttr.dr.length >= 0) {
+                    var itRandom = RawSet.drItOtherEncoding(element_2);
+                    var vars = RawSet.drVarEncoding(element_2, (_b = drAttr.drVarOption) !== null && _b !== void 0 ? _b : '');
+                    var newTemp = document.createElement('temp');
+                    ScriptUtils.eval("\n                        const n = this.__element.cloneNode(true);\n                        var destIt = " + drAttr.drItOption + ";\n                        if (destIt !== undefined) {\n                            n.innerHTML = n.innerHTML.replace(/\\#it\\#/g, destIt);\n                        }\n                        if (this.__drStripOption) {\n                            Array.from(n.childNodes).forEach(it => this.__fag.append(it));\n                        } else {\n                            this.__fag.append(n);\n                        }", Object.assign({
+                        __fag: newTemp, __drStripOption: drAttr.drStripOption, __element: element_2
+                    }, obj));
+                    RawSet.drVarDecoding(newTemp, vars);
+                    RawSet.drItOtherDecoding(newTemp, itRandom);
+                    var tempalte = document.createElement('template');
+                    tempalte.innerHTML = newTemp.innerHTML;
+                    fag.append(tempalte.content);
+                    var rr = RawSet.checkPointCreates(fag, config);
+                    (_c = element_2.parentNode) === null || _c === void 0 ? void 0 : _c.replaceChild(fag, element_2);
+                    raws.push.apply(raws, rr);
                 }
-                if (drThis) {
-                    var r = ScriptUtils.evalReturn(drThis, obj);
+                if (drAttr.drIf) {
+                    var itRandom = RawSet.drItOtherEncoding(element_2);
+                    var vars = RawSet.drVarEncoding(element_2, (_d = drAttr.drVarOption) !== null && _d !== void 0 ? _d : '');
+                    var newTemp = document.createElement('temp');
+                    ScriptUtils.eval("\n                    if(" + drAttr.drIf + ") {\n                        const n = this.__element.cloneNode(true);\n                        var destIt = " + drAttr.drItOption + ";\n                        if (destIt !== undefined) {\n                            n.innerHTML = n.innerHTML.replace(/\\#it\\#/g, destIt);\n                        }\n                        if (this.__drStripOption) {\n                            Array.from(n.childNodes).forEach(it => this.__fag.append(it));\n                        } else {\n                            this.__fag.append(n);\n                        }\n                    }", Object.assign({
+                        __fag: newTemp, __drStripOption: drAttr.drStripOption, __element: element_2
+                    }, obj));
+                    RawSet.drVarDecoding(newTemp, vars);
+                    RawSet.drItOtherDecoding(newTemp, itRandom);
+                    var tempalte = document.createElement('template');
+                    tempalte.innerHTML = newTemp.innerHTML;
+                    fag.append(tempalte.content);
+                    var rr = RawSet.checkPointCreates(fag, config);
+                    (_e = element_2.parentNode) === null || _e === void 0 ? void 0 : _e.replaceChild(fag, element_2);
+                    raws.push.apply(raws, rr);
+                }
+                if (drAttr.drThis) {
+                    var r = ScriptUtils.evalReturn(drAttr.drThis, obj);
                     if (r) {
-                        fag.append(RawSet.drThisCreate(element_2, drThis, drVarOption !== null && drVarOption !== void 0 ? drVarOption : '', drStripOption, obj));
+                        fag.append(RawSet.drThisCreate(element_2, drAttr.drThis, (_f = drAttr.drVarOption) !== null && _f !== void 0 ? _f : '', drAttr.drStripOption, obj));
                         var rr = RawSet.checkPointCreates(fag, config);
-                        (_c = element_2.parentNode) === null || _c === void 0 ? void 0 : _c.replaceChild(fag, element_2);
+                        (_g = element_2.parentNode) === null || _g === void 0 ? void 0 : _g.replaceChild(fag, element_2);
                         raws.push.apply(raws, rr);
@@ -433,18 +453,37 @@ }
                 }
-                if (drFor) {
-                    ScriptUtils.eval("for(" + drFor + ") {\n                        const n = this.__element.cloneNode(true);\n                        var destIt = " + drItOption + ";\n                        if (destIt) {\n                            n.innerHTML = n.innerHTML.replace(/\\#it\\#/g, destIt);\n                        }\n                        var destDeclaration = " + drDeclarationOption + ";\n                        if (destDeclaration) {\n                            for (const [key, value] of Object.entries(destDeclaration)) {\n                                n.innerHTML = n.innerHTML.replace(RegExp('#'+key+'#', 'g'), value);\n                            }\n                        }\n                        if (this.__drStripOption) {\n                            Array.from(n.childNodes).forEach(it => this.__fag.append(it));\n                        } else {\n                            this.__fag.append(n);\n                        }\n                    }", Object.assign({ __drStripOption: drStripOption, __fag: fag, __element: element_2 }, obj));
+                if (drAttr.drFor) {
+                    var itRandom = RawSet.drItOtherEncoding(element_2);
+                    var vars = RawSet.drVarEncoding(element_2, (_h = drAttr.drVarOption) !== null && _h !== void 0 ? _h : '');
+                    var newTemp = document.createElement('temp');
+                    ScriptUtils.eval("\n                    for(" + drAttr.drFor + ") {\n                        const n = this.__element.cloneNode(true);\n                        var destIt = " + drAttr.drItOption + ";\n                        if (destIt !== undefined) {\n                            n.innerHTML = n.innerHTML.replace(/\\#it\\#/g, destIt);\n                        }\n                        if (this.__drStripOption) {\n                            Array.from(n.childNodes).forEach(it => this.__fag.append(it));\n                        } else {\n                            this.__fag.append(n);\n                        }\n                    }", Object.assign({
+                        __fag: newTemp, __drStripOption: drAttr.drStripOption, __element: element_2
+                    }, obj));
+                    RawSet.drVarDecoding(newTemp, vars);
+                    RawSet.drItOtherDecoding(newTemp, itRandom);
+                    var tempalte = document.createElement('template');
+                    tempalte.innerHTML = newTemp.innerHTML;
+                    fag.append(tempalte.content);
                     var rr = RawSet.checkPointCreates(fag, config);
-                    (_d = element_2.parentNode) === null || _d === void 0 ? void 0 : _d.replaceChild(fag, element_2);
+                    (_j = element_2.parentNode) === null || _j === void 0 ? void 0 : _j.replaceChild(fag, element_2);
                     raws.push.apply(raws, rr);
                 }
-                if (drForOf) {
-                    var vars = RawSet.drVarEncoding(element_2, drVarOption !== null && drVarOption !== void 0 ? drVarOption : '');
-                    console.log('vars-->', vars, element_2.innerHTML);
-                    ScriptUtils.eval("var i = 0; for(const it of " + drForOf + ") {\n                        var destIt = it;\n                        var forOfStr = `" + drForOf + "`;\n                        if (/,/g.test(forOfStr)) {\n                            if (typeof it === 'string') {\n                                destIt = it;\n                            } else {\n                                destIt = forOfStr.substring(1, forOfStr.length-1).split(',')[i];\n                            }\n                        } else {\n                            destIt = forOfStr + '[' + i +']'\n                        }\n                        \n                        const n = this.__element.cloneNode(true);\n                        n.innerHTML = n.innerHTML.replace(/\\#it\\#/g, destIt);\n                        \n                        var destDeclaration = " + drDeclarationOption + ";\n                        if (destDeclaration) {\n                            for (const [key, value] of Object.entries(destDeclaration)) {\n                                n.innerHTML = n.innerHTML.replace(RegExp('#'+key+'#', 'g'), value);\n                            }\n                        }\n                        \n                        if (this.__drStripOption) {\n                            Array.from(n.childNodes).forEach(it => this.__fag.append(it));\n                        } else {\n                            this.__fag.append(n);\n                        }\n                        i++;\n                    }", Object.assign({ __drStripOption: drStripOption, __fag: fag, __element: element_2 }, obj));
-                    RawSet.drVarDecoding(element_2, vars);
+                if (drAttr.drForOf) {
+                    var itRandom = RawSet.drItOtherEncoding(element_2);
+                    var vars = RawSet.drVarEncoding(element_2, (_k = drAttr.drVarOption) !== null && _k !== void 0 ? _k : '');
+                    var newTemp = document.createElement('temp');
+                    ScriptUtils.eval("var i = 0; for(const it of " + drAttr.drForOf + ") {\n                        var destIt = it;\n                        var forOfStr = `" + drAttr.drForOf + "`;\n                        if (/,/g.test(forOfStr)) {\n                            if (typeof it === 'string') {\n                                destIt = it;\n                            } else {\n                                destIt = forOfStr.substring(1, forOfStr.length-1).split(',')[i];\n                            }\n                        } else {\n                            destIt = forOfStr + '[' + i +']'\n                        }\n                        \n                        const n = this.__element.cloneNode(true);\n                        n.innerHTML = n.innerHTML.replace(/\\#it\\#/g, destIt);\n                        \n                        if (this.__drStripOption) {\n                            Array.from(n.childNodes).forEach(it => this.__fag.append(it));\n                        } else {\n                            this.__fag.append(n);\n                        }\n                        i++;\n                    }", Object.assign({
+                        __drStripOption: drAttr.drStripOption,
+                        __fag: newTemp,
+                        __element: element_2
+                    }, obj));
+                    RawSet.drVarDecoding(newTemp, vars);
+                    RawSet.drItOtherDecoding(newTemp, itRandom);
+                    var tempalte = document.createElement('template');
+                    tempalte.innerHTML = newTemp.innerHTML;
+                    fag.append(tempalte.content);
                     var rr = RawSet.checkPointCreates(fag, config);
-                    (_e = element_2.parentNode) === null || _e === void 0 ? void 0 : _e.replaceChild(fag, element_2);
+                    (_l = element_2.parentNode) === null || _l === void 0 ? void 0 : _l.replaceChild(fag, element_2);
                     raws.push.apply(raws, rr);
                 }
-                (_f = config === null || config === void 0 ? void 0 : config.targets) === null || _f === void 0 ? void 0 : _f.forEach(function (it) {
+                (_m = config === null || config === void 0 ? void 0 : config.targets) === null || _m === void 0 ? void 0 : _m.forEach(function (it) {
                     var _a;
@@ -483,3 +522,3 @@ var attrValue = _this.getAttributeAndDelete(element_2, it.attrName);
     RawSet.checkPointCreates = function (element, config) {
-        var _a, _b;
+        var _a, _b, _c, _d;
         var nodeIterator = document.createNodeIterator(element, NodeFilter.SHOW_ALL, {
@@ -502,14 +541,61 @@ acceptNode: function (node) {
         var currentNode;
+        var _loop_1 = function () {
+            if (currentNode.nodeType === Node.TEXT_NODE) {
+                var text_1 = (_a = currentNode.textContent) !== null && _a !== void 0 ? _a : '';
+                var template_1 = document.createElement('template');
+                var a = StringUtils.regexExec(/\$\{.*?\}/g, text_1);
+                var map = a.reverse().map(function (it) { return { uuid: '', content: '', regexArr: it }; });
+                map.forEach(function (it) {
+                    var uuid = RandomUtils.uuid();
+                    it.uuid = uuid;
+                    it.content = it.regexArr[0];
+                    text_1 = text_1.substr(0, it.regexArr.index) + text_1.substr(it.regexArr.index).replace(it.regexArr[0], "<!--start text " + uuid + "--><!--end text " + uuid + "-->");
+                });
+                template_1.innerHTML = text_1;
+                map.forEach(function (it) {
+                    var _a, _b;
+                    var subNodeIterator = document.createNodeIterator(template_1.content, NodeFilter.SHOW_COMMENT, {
+                        acceptNode: function (node) {
+                            var text = node.textContent;
+                            return (text === "start text " + it.uuid || text === "end text " + it.uuid) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
+                        }
+                    });
+                    var start;
+                    var end;
+                    var subNode;
+                    while (subNode = subNodeIterator.nextNode()) {
+                        if (((_a = subNode.textContent) !== null && _a !== void 0 ? _a : '').startsWith('start')) {
+                            start = subNode;
+                        }
+                        if (((_b = subNode.textContent) !== null && _b !== void 0 ? _b : '').startsWith('end')) {
+                            end = subNode;
+                        }
+                    }
+                    if (start && end) {
+                        var fragment = document.createDocumentFragment();
+                        fragment.append(document.createTextNode(it.content));
+                        pars.push(new RawSet({
+                            start: start,
+                            end: end
+                        }, fragment));
+                    }
+                });
+                (_b = currentNode === null || currentNode === void 0 ? void 0 : currentNode.parentNode) === null || _b === void 0 ? void 0 : _b.replaceChild(template_1.content, currentNode);
+            }
+            else {
+                var uuid = RandomUtils.uuid();
+                var fragment = document.createDocumentFragment();
+                var start = document.createComment("start " + uuid);
+                var end = document.createComment("end " + uuid);
+                (_c = currentNode === null || currentNode === void 0 ? void 0 : currentNode.parentNode) === null || _c === void 0 ? void 0 : _c.insertBefore(start, currentNode);
+                (_d = currentNode === null || currentNode === void 0 ? void 0 : currentNode.parentNode) === null || _d === void 0 ? void 0 : _d.insertBefore(end, currentNode.nextSibling);
+                fragment.append(currentNode);
+                pars.push(new RawSet({
+                    start: start,
+                    end: end
+                }, fragment));
+            }
+        };
         while (currentNode = nodeIterator.nextNode()) {
-            var uuid = RandomUtils.uuid();
-            var fragment = document.createDocumentFragment();
-            var start = document.createComment("start " + uuid);
-            var end = document.createComment("end " + uuid);
-            (_a = currentNode === null || currentNode === void 0 ? void 0 : currentNode.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(start, currentNode);
-            (_b = currentNode === null || currentNode === void 0 ? void 0 : currentNode.parentNode) === null || _b === void 0 ? void 0 : _b.insertBefore(end, currentNode.nextSibling);
-            fragment.append(currentNode);
-            pars.push(new RawSet({
-                start: start,
-                end: end
-            }, fragment));
+            _loop_1();
         }
@@ -528,2 +614,43 @@ return pars;
     };
+    RawSet.drItOtherEncoding = function (element) {
+        var random = RandomUtils.uuid();
+        var regex = /#it#/g;
+        element.querySelectorAll("[" + RawSet.DR_IT_OPTIONNAME + "]").forEach(function (it) {
+            it.innerHTML = it.innerHTML.replace(regex, random);
+        });
+        return random;
+    };
+    RawSet.drItOtherDecoding = function (element, random) {
+        element.querySelectorAll("[" + RawSet.DR_IT_OPTIONNAME + "]").forEach(function (it) {
+            it.innerHTML = it.innerHTML.replace(RegExp(random, 'g'), '#it#');
+        });
+    };
+    RawSet.drDVarEncoding = function (element, drVarOption) {
+        var _a;
+        var vars = ((_a = drVarOption === null || drVarOption === void 0 ? void 0 : drVarOption.split(',')) !== null && _a !== void 0 ? _a : []).map(function (it) {
+            var s = it.trim().split('=');
+            return {
+                name: s[0],
+                value: s[1],
+                regex: RegExp('(?<!(dr-|\\.))var\\.' + s[0] + '(?=.?)', 'g'),
+                random: RandomUtils.uuid()
+            };
+        });
+        element.querySelectorAll("[" + RawSet.DR_THIS_NAME + "]").forEach(function (it) {
+            vars.filter(function (vit) { return vit.value && vit.name; }).forEach(function (vit) {
+                it.innerHTML = it.innerHTML.replace(vit.regex, vit.random);
+            });
+        });
+        vars.filter(function (vit) { return vit.value && vit.name; }).forEach(function (vit) {
+            element.innerHTML = element.innerHTML.replace(vit.regex, vit.value);
+        });
+        return vars;
+    };
+    RawSet.drDVarDecoding = function (element, vars) {
+        element.querySelectorAll("[" + RawSet.DR_THIS_NAME + "]").forEach(function (it) {
+            vars.filter(function (vit) { return vit.value && vit.name; }).forEach(function (vit) {
+                it.innerHTML = it.innerHTML.replace(RegExp(vit.random, 'g'), vit.value);
+            });
+        });
+    };
     RawSet.drThisEncoding = function (element, drThis) {
@@ -547,5 +674,10 @@ var thisRandom = RandomUtils.uuid();
             var s = it.trim().split('=');
-            return { name: s[0], value: s[1], regex: RegExp('(?<!(dr-|\\.))var\\.' + s[0] + '(?=.?)', 'g'), random: RandomUtils.uuid() };
+            return {
+                name: s[0],
+                value: s[1],
+                regex: RegExp('(?<!(dr-|\\.))var\\.' + s[0] + '(?=.?)', 'g'),
+                random: RandomUtils.uuid()
+            };
         });
-        element.querySelectorAll("[" + RawSet.DR_THIS_NAME + "]").forEach(function (it) {
+        element.querySelectorAll("[" + RawSet.DR_VAR_OPTIONNAME + "]").forEach(function (it) {
             vars.filter(function (vit) { return vit.value && vit.name; }).forEach(function (vit) {
@@ -582,2 +714,3 @@ it.innerHTML = it.innerHTML.replace(vit.regex, vit.random);
     };
+    RawSet.DR = 'dr';
     RawSet.DR_IF_NAME = 'dr-if';
@@ -589,6 +722,5 @@ RawSet.DR_FOR_OF_NAME = 'dr-for-of';
     RawSet.DR_IT_OPTIONNAME = 'dr-it';
-    RawSet.DR_DECLARATION_OPTIONNAME = 'dr-declaration';
     RawSet.DR_VAR_OPTIONNAME = 'dr-var';
     RawSet.DR_STRIP_OPTIONNAME = 'dr-strip';
-    RawSet.DR_ATTRIBUTES = [RawSet.DR_IF_NAME, RawSet.DR_FOR_OF_NAME, RawSet.DR_FOR_NAME, RawSet.DR_THIS_NAME];
+    RawSet.DR_ATTRIBUTES = [RawSet.DR_IF_NAME, RawSet.DR_FOR_OF_NAME, RawSet.DR_FOR_NAME, RawSet.DR_THIS_NAME, RawSet.DR];
     return RawSet;
@@ -655,3 +787,2 @@ }());
                 var rawSets = it.render(_this._domRender_proxy, _this.config);
-                rawSets.forEach(function (it) { return console.log('---->', it); });
                 _this.render(rawSets);
@@ -665,2 +796,3 @@ }
     DomRenderProxy.prototype.root = function (paths, value) {
+        var _this = this;
         if (this._domRender_ref.size > 0) {
@@ -678,4 +810,4 @@ this._domRender_ref.forEach(function (it, key) {
             var strings = paths.reverse();
-            var fullPathStr = strings.join('.');
-            var iterable = this._rawSets.get(fullPathStr);
+            var fullPathStr_1 = strings.join('.');
+            var iterable = this._rawSets.get(fullPathStr_1);
             var front = strings.slice(0, strings.length - 1).join('.');
@@ -692,2 +824,9 @@ var last = strings[strings.length - 1];
             }
+            console.log('---targets->', fullPathStr_1);
+            this._targets.forEach(function (it) {
+                if (it.nodeType === Node.DOCUMENT_FRAGMENT_NODE || it.nodeType === Node.ELEMENT_NODE) {
+                    var targets = eventManager.findAttrElements(it, _this.config);
+                    eventManager.changeVar(_this._domRender_proxy, targets, "this." + fullPathStr_1);
+                }
+            });
         }
@@ -694,0 +833,0 @@ };

DomRenderProxy.d.ts

 import { RawSet } from './RawSet';
 import { Config } from './Config';
-export declare type RefType = {
-    obj: object;
-};
 export declare class DomRenderProxy<T extends object> implements ProxyHandler<T> {
@@ -7,0 +4,0 @@ _domRender_origin: T;

DomRenderProxy.js

@@ -65,3 +65,2 @@ "use strict";
                 var rawSets = it.render(_this._domRender_proxy, _this.config);
-                rawSets.forEach(function (it) { return console.log('---->', it); });
                 _this.render(rawSets);
@@ -75,2 +74,3 @@ }
     DomRenderProxy.prototype.root = function (paths, value) {
+        var _this = this;
         if (this._domRender_ref.size > 0) {
@@ -88,4 +88,4 @@ this._domRender_ref.forEach(function (it, key) {
             var strings = paths.reverse();
-            var fullPathStr = strings.join('.');
-            var iterable = this._rawSets.get(fullPathStr);
+            var fullPathStr_1 = strings.join('.');
+            var iterable = this._rawSets.get(fullPathStr_1);
             var front = strings.slice(0, strings.length - 1).join('.');
@@ -102,2 +102,9 @@ var last = strings[strings.length - 1];
             }
+            console.log('---targets->', fullPathStr_1);
+            this._targets.forEach(function (it) {
+                if (it.nodeType === Node.DOCUMENT_FRAGMENT_NODE || it.nodeType === Node.ELEMENT_NODE) {
+                    var targets = EventManager_1.eventManager.findAttrElements(it, _this.config);
+                    EventManager_1.eventManager.changeVar(_this._domRender_proxy, targets, "this." + fullPathStr_1);
+                }
+            });
         }
@@ -104,0 +111,0 @@ };

events/EventManager.js

@@ -51,3 +51,3 @@ "use strict";
                 else {
-                    obj[varName] = it;
+                    _this.setValue(obj, varName, it);
                 }
@@ -67,2 +67,3 @@ }
                 it.addEventListener('input', function (eit) {
+                    console.log('input change--->link');
                     if (typeof _this.getValue(obj, varName) === 'function') {
@@ -104,7 +105,6 @@ _this.getValue(obj, varName)(it.value, eit);
                 var data = (_a = Function("\"use strict\"; const $target=this.$target; " + script + " ").bind(Object.assign({ $target: it }, obj))()) !== null && _a !== void 0 ? _a : {};
+                console.log('--', data);
                 for (var _i = 0, _b = Object.entries(data); _i < _b.length; _i++) {
                     var _c = _b[_i], key = _c[0], value = _c[1];
-                    if (typeof value === 'string') {
-                        it.setAttribute(key, value);
-                    }
+                    it.setAttribute(key, String(value));
                 }
@@ -120,4 +120,4 @@ }
                     var _c = _b[_i], key = _c[0], value = _c[1];
-                    if (typeof value === 'string' && it instanceof HTMLElement) {
-                        it.style[key] = value;
+                    if (it instanceof HTMLElement) {
+                        it.style[key] = String(value);
                     }
@@ -164,6 +164,10 @@ }
     class_1.prototype.setValue = function (obj, name, value) {
-        ScriptUtils_1.ScriptUtils.eval(name + " = this.___value", Object.assign({ ___value: value }, obj));
+        ScriptUtils_1.ScriptUtils.eval("this." + name + " = this.value", { this: obj, value: value });
     };
     class_1.prototype.isUsingThisVar = function (raws, varName) {
+        console.log('isUsingV', raws, varName, ScriptUtils_1.ScriptUtils.getVariablePaths(raws !== null && raws !== void 0 ? raws : ''));
         if (varName && raws) {
+            if (varName.startsWith('this.')) {
+                varName = varName.replace(/this\./, '');
+            }
             var variablePaths = ScriptUtils_1.ScriptUtils.getVariablePaths(raws !== null && raws !== void 0 ? raws : '');
@@ -170,0 +174,0 @@ return variablePaths.has(varName);

package.json

 {
   "name": "dom-render",
-  "version": "1.0.16",
+  "version": "1.0.17",
   "main": "DomRender.js",
@@ -5,0 +5,0 @@ "license": "MIT",

RawSet.d.ts

@@ -8,2 +8,3 @@ import { Config } from './Config';
     fragment: DocumentFragment;
+    static readonly DR = "dr";
     static readonly DR_IF_NAME = "dr-if";
@@ -15,3 +16,2 @@ static readonly DR_FOR_OF_NAME = "dr-for-of";
     static readonly DR_IT_OPTIONNAME = "dr-it";
-    static readonly DR_DECLARATION_OPTIONNAME = "dr-declaration";
     static readonly DR_VAR_OPTIONNAME = "dr-var";
@@ -32,2 +32,16 @@ static readonly DR_STRIP_OPTIONNAME = "dr-strip";
     childAllRemove(): void;
+    static drItOtherEncoding(element: Element | DocumentFragment): string;
+    static drItOtherDecoding(element: Element | DocumentFragment, random: string): void;
+    static drDVarEncoding(element: Element, drVarOption: string): {
+        name: string;
+        value: string;
+        regex: RegExp;
+        random: string;
+    }[];
+    static drDVarDecoding(element: Element, vars: {
+        name: string;
+        value: string;
+        regex: RegExp;
+        random: string;
+    }[]): void;
     static drThisEncoding(element: Element, drThis: string): string;
@@ -34,0 +48,0 @@ static drThisDecoding(element: Element, thisRandom: string): void;

RawSet.js

@@ -40,3 +40,3 @@ "use strict";
         genNode.childNodes.forEach(function (cNode, key) {
-            var _a, _b, _c, _d, _e, _f;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
             var fag = document.createDocumentFragment();
@@ -50,33 +50,50 @@ if (cNode.nodeType === Node.TEXT_NODE) {
                 var element_2 = cNode;
-                var drIf = _this.getAttributeAndDelete(element_2, RawSet.DR_IF_NAME);
-                var drFor = _this.getAttributeAndDelete(element_2, RawSet.DR_FOR_NAME);
-                var drForOf = _this.getAttributeAndDelete(element_2, RawSet.DR_FOR_OF_NAME);
-                var drThis = _this.getAttributeAndDelete(element_2, RawSet.DR_THIS_NAME);
-                var drItOption = _this.getAttributeAndDelete(element_2, RawSet.DR_IT_OPTIONNAME);
-                var drDeclarationOption = _this.getAttributeAndDelete(element_2, RawSet.DR_DECLARATION_OPTIONNAME);
-                var drVarOption = _this.getAttributeAndDelete(element_2, RawSet.DR_VAR_OPTIONNAME);
-                var drStripOption = _this.getAttributeAndDelete(element_2, RawSet.DR_STRIP_OPTIONNAME) === 'true';
-                if (drIf) {
-                    var r = ScriptUtils_1.ScriptUtils.evalReturn(drIf, obj);
-                    if (r) {
-                        Array.from(element_2.childNodes).forEach(function (it) { return fag.append(it); });
-                        var rr = RawSet.checkPointCreates(fag, config);
-                        if (drStripOption) {
-                            (_b = element_2.parentNode) === null || _b === void 0 ? void 0 : _b.replaceChild(fag, element_2);
-                        }
-                        else {
-                            element_2.appendChild(fag);
-                        }
-                        raws.push.apply(raws, rr);
-                    }
-                    else {
-                        element_2.remove();
-                    }
+                var drAttr = {
+                    dr: _this.getAttributeAndDelete(element_2, RawSet.DR),
+                    drIf: _this.getAttributeAndDelete(element_2, RawSet.DR_IF_NAME),
+                    drFor: _this.getAttributeAndDelete(element_2, RawSet.DR_FOR_NAME),
+                    drForOf: _this.getAttributeAndDelete(element_2, RawSet.DR_FOR_OF_NAME),
+                    drThis: _this.getAttributeAndDelete(element_2, RawSet.DR_THIS_NAME),
+                    drItOption: _this.getAttributeAndDelete(element_2, RawSet.DR_IT_OPTIONNAME),
+                    drVarOption: _this.getAttributeAndDelete(element_2, RawSet.DR_VAR_OPTIONNAME),
+                    drStripOption: _this.getAttributeAndDelete(element_2, RawSet.DR_STRIP_OPTIONNAME) === 'true'
+                };
+                if (drAttr.dr !== null && drAttr.dr.length >= 0) {
+                    var itRandom = RawSet.drItOtherEncoding(element_2);
+                    var vars = RawSet.drVarEncoding(element_2, (_b = drAttr.drVarOption) !== null && _b !== void 0 ? _b : '');
+                    var newTemp = document.createElement('temp');
+                    ScriptUtils_1.ScriptUtils.eval("\n                        const n = this.__element.cloneNode(true);\n                        var destIt = " + drAttr.drItOption + ";\n                        if (destIt !== undefined) {\n                            n.innerHTML = n.innerHTML.replace(/\\#it\\#/g, destIt);\n                        }\n                        if (this.__drStripOption) {\n                            Array.from(n.childNodes).forEach(it => this.__fag.append(it));\n                        } else {\n                            this.__fag.append(n);\n                        }", Object.assign({
+                        __fag: newTemp, __drStripOption: drAttr.drStripOption, __element: element_2
+                    }, obj));
+                    RawSet.drVarDecoding(newTemp, vars);
+                    RawSet.drItOtherDecoding(newTemp, itRandom);
+                    var tempalte = document.createElement('template');
+                    tempalte.innerHTML = newTemp.innerHTML;
+                    fag.append(tempalte.content);
+                    var rr = RawSet.checkPointCreates(fag, config);
+                    (_c = element_2.parentNode) === null || _c === void 0 ? void 0 : _c.replaceChild(fag, element_2);
+                    raws.push.apply(raws, rr);
                 }
-                if (drThis) {
-                    var r = ScriptUtils_1.ScriptUtils.evalReturn(drThis, obj);
+                if (drAttr.drIf) {
+                    var itRandom = RawSet.drItOtherEncoding(element_2);
+                    var vars = RawSet.drVarEncoding(element_2, (_d = drAttr.drVarOption) !== null && _d !== void 0 ? _d : '');
+                    var newTemp = document.createElement('temp');
+                    ScriptUtils_1.ScriptUtils.eval("\n                    if(" + drAttr.drIf + ") {\n                        const n = this.__element.cloneNode(true);\n                        var destIt = " + drAttr.drItOption + ";\n                        if (destIt !== undefined) {\n                            n.innerHTML = n.innerHTML.replace(/\\#it\\#/g, destIt);\n                        }\n                        if (this.__drStripOption) {\n                            Array.from(n.childNodes).forEach(it => this.__fag.append(it));\n                        } else {\n                            this.__fag.append(n);\n                        }\n                    }", Object.assign({
+                        __fag: newTemp, __drStripOption: drAttr.drStripOption, __element: element_2
+                    }, obj));
+                    RawSet.drVarDecoding(newTemp, vars);
+                    RawSet.drItOtherDecoding(newTemp, itRandom);
+                    var tempalte = document.createElement('template');
+                    tempalte.innerHTML = newTemp.innerHTML;
+                    fag.append(tempalte.content);
+                    var rr = RawSet.checkPointCreates(fag, config);
+                    (_e = element_2.parentNode) === null || _e === void 0 ? void 0 : _e.replaceChild(fag, element_2);
+                    raws.push.apply(raws, rr);
+                }
+                if (drAttr.drThis) {
+                    var r = ScriptUtils_1.ScriptUtils.evalReturn(drAttr.drThis, obj);
                     if (r) {
-                        fag.append(RawSet.drThisCreate(element_2, drThis, drVarOption !== null && drVarOption !== void 0 ? drVarOption : '', drStripOption, obj));
+                        fag.append(RawSet.drThisCreate(element_2, drAttr.drThis, (_f = drAttr.drVarOption) !== null && _f !== void 0 ? _f : '', drAttr.drStripOption, obj));
                         var rr = RawSet.checkPointCreates(fag, config);
-                        (_c = element_2.parentNode) === null || _c === void 0 ? void 0 : _c.replaceChild(fag, element_2);
+                        (_g = element_2.parentNode) === null || _g === void 0 ? void 0 : _g.replaceChild(fag, element_2);
                         raws.push.apply(raws, rr);
@@ -88,18 +105,37 @@ }
                 }
-                if (drFor) {
-                    ScriptUtils_1.ScriptUtils.eval("for(" + drFor + ") {\n                        const n = this.__element.cloneNode(true);\n                        var destIt = " + drItOption + ";\n                        if (destIt) {\n                            n.innerHTML = n.innerHTML.replace(/\\#it\\#/g, destIt);\n                        }\n                        var destDeclaration = " + drDeclarationOption + ";\n                        if (destDeclaration) {\n                            for (const [key, value] of Object.entries(destDeclaration)) {\n                                n.innerHTML = n.innerHTML.replace(RegExp('#'+key+'#', 'g'), value);\n                            }\n                        }\n                        if (this.__drStripOption) {\n                            Array.from(n.childNodes).forEach(it => this.__fag.append(it));\n                        } else {\n                            this.__fag.append(n);\n                        }\n                    }", Object.assign({ __drStripOption: drStripOption, __fag: fag, __element: element_2 }, obj));
+                if (drAttr.drFor) {
+                    var itRandom = RawSet.drItOtherEncoding(element_2);
+                    var vars = RawSet.drVarEncoding(element_2, (_h = drAttr.drVarOption) !== null && _h !== void 0 ? _h : '');
+                    var newTemp = document.createElement('temp');
+                    ScriptUtils_1.ScriptUtils.eval("\n                    for(" + drAttr.drFor + ") {\n                        const n = this.__element.cloneNode(true);\n                        var destIt = " + drAttr.drItOption + ";\n                        if (destIt !== undefined) {\n                            n.innerHTML = n.innerHTML.replace(/\\#it\\#/g, destIt);\n                        }\n                        if (this.__drStripOption) {\n                            Array.from(n.childNodes).forEach(it => this.__fag.append(it));\n                        } else {\n                            this.__fag.append(n);\n                        }\n                    }", Object.assign({
+                        __fag: newTemp, __drStripOption: drAttr.drStripOption, __element: element_2
+                    }, obj));
+                    RawSet.drVarDecoding(newTemp, vars);
+                    RawSet.drItOtherDecoding(newTemp, itRandom);
+                    var tempalte = document.createElement('template');
+                    tempalte.innerHTML = newTemp.innerHTML;
+                    fag.append(tempalte.content);
                     var rr = RawSet.checkPointCreates(fag, config);
-                    (_d = element_2.parentNode) === null || _d === void 0 ? void 0 : _d.replaceChild(fag, element_2);
+                    (_j = element_2.parentNode) === null || _j === void 0 ? void 0 : _j.replaceChild(fag, element_2);
                     raws.push.apply(raws, rr);
                 }
-                if (drForOf) {
-                    var vars = RawSet.drVarEncoding(element_2, drVarOption !== null && drVarOption !== void 0 ? drVarOption : '');
-                    console.log('vars-->', vars, element_2.innerHTML);
-                    ScriptUtils_1.ScriptUtils.eval("var i = 0; for(const it of " + drForOf + ") {\n                        var destIt = it;\n                        var forOfStr = `" + drForOf + "`;\n                        if (/,/g.test(forOfStr)) {\n                            if (typeof it === 'string') {\n                                destIt = it;\n                            } else {\n                                destIt = forOfStr.substring(1, forOfStr.length-1).split(',')[i];\n                            }\n                        } else {\n                            destIt = forOfStr + '[' + i +']'\n                        }\n                        \n                        const n = this.__element.cloneNode(true);\n                        n.innerHTML = n.innerHTML.replace(/\\#it\\#/g, destIt);\n                        \n                        var destDeclaration = " + drDeclarationOption + ";\n                        if (destDeclaration) {\n                            for (const [key, value] of Object.entries(destDeclaration)) {\n                                n.innerHTML = n.innerHTML.replace(RegExp('#'+key+'#', 'g'), value);\n                            }\n                        }\n                        \n                        if (this.__drStripOption) {\n                            Array.from(n.childNodes).forEach(it => this.__fag.append(it));\n                        } else {\n                            this.__fag.append(n);\n                        }\n                        i++;\n                    }", Object.assign({ __drStripOption: drStripOption, __fag: fag, __element: element_2 }, obj));
-                    RawSet.drVarDecoding(element_2, vars);
+                if (drAttr.drForOf) {
+                    var itRandom = RawSet.drItOtherEncoding(element_2);
+                    var vars = RawSet.drVarEncoding(element_2, (_k = drAttr.drVarOption) !== null && _k !== void 0 ? _k : '');
+                    var newTemp = document.createElement('temp');
+                    ScriptUtils_1.ScriptUtils.eval("var i = 0; for(const it of " + drAttr.drForOf + ") {\n                        var destIt = it;\n                        var forOfStr = `" + drAttr.drForOf + "`;\n                        if (/,/g.test(forOfStr)) {\n                            if (typeof it === 'string') {\n                                destIt = it;\n                            } else {\n                                destIt = forOfStr.substring(1, forOfStr.length-1).split(',')[i];\n                            }\n                        } else {\n                            destIt = forOfStr + '[' + i +']'\n                        }\n                        \n                        const n = this.__element.cloneNode(true);\n                        n.innerHTML = n.innerHTML.replace(/\\#it\\#/g, destIt);\n                        \n                        if (this.__drStripOption) {\n                            Array.from(n.childNodes).forEach(it => this.__fag.append(it));\n                        } else {\n                            this.__fag.append(n);\n                        }\n                        i++;\n                    }", Object.assign({
+                        __drStripOption: drAttr.drStripOption,
+                        __fag: newTemp,
+                        __element: element_2
+                    }, obj));
+                    RawSet.drVarDecoding(newTemp, vars);
+                    RawSet.drItOtherDecoding(newTemp, itRandom);
+                    var tempalte = document.createElement('template');
+                    tempalte.innerHTML = newTemp.innerHTML;
+                    fag.append(tempalte.content);
                     var rr = RawSet.checkPointCreates(fag, config);
-                    (_e = element_2.parentNode) === null || _e === void 0 ? void 0 : _e.replaceChild(fag, element_2);
+                    (_l = element_2.parentNode) === null || _l === void 0 ? void 0 : _l.replaceChild(fag, element_2);
                     raws.push.apply(raws, rr);
                 }
-                (_f = config === null || config === void 0 ? void 0 : config.targets) === null || _f === void 0 ? void 0 : _f.forEach(function (it) {
+                (_m = config === null || config === void 0 ? void 0 : config.targets) === null || _m === void 0 ? void 0 : _m.forEach(function (it) {
                     var _a;
@@ -138,3 +174,3 @@ var attrValue = _this.getAttributeAndDelete(element_2, it.attrName);
     RawSet.checkPointCreates = function (element, config) {
-        var _a, _b;
+        var _a, _b, _c, _d;
         var nodeIterator = document.createNodeIterator(element, NodeFilter.SHOW_ALL, {
@@ -157,14 +193,61 @@ acceptNode: function (node) {
         var currentNode;
+        var _loop_1 = function () {
+            if (currentNode.nodeType === Node.TEXT_NODE) {
+                var text_1 = (_a = currentNode.textContent) !== null && _a !== void 0 ? _a : '';
+                var template_1 = document.createElement('template');
+                var a = StringUtils_1.StringUtils.regexExec(/\$\{.*?\}/g, text_1);
+                var map = a.reverse().map(function (it) { return { uuid: '', content: '', regexArr: it }; });
+                map.forEach(function (it) {
+                    var uuid = RandomUtils_1.RandomUtils.uuid();
+                    it.uuid = uuid;
+                    it.content = it.regexArr[0];
+                    text_1 = text_1.substr(0, it.regexArr.index) + text_1.substr(it.regexArr.index).replace(it.regexArr[0], "<!--start text " + uuid + "--><!--end text " + uuid + "-->");
+                });
+                template_1.innerHTML = text_1;
+                map.forEach(function (it) {
+                    var _a, _b;
+                    var subNodeIterator = document.createNodeIterator(template_1.content, NodeFilter.SHOW_COMMENT, {
+                        acceptNode: function (node) {
+                            var text = node.textContent;
+                            return (text === "start text " + it.uuid || text === "end text " + it.uuid) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
+                        }
+                    });
+                    var start;
+                    var end;
+                    var subNode;
+                    while (subNode = subNodeIterator.nextNode()) {
+                        if (((_a = subNode.textContent) !== null && _a !== void 0 ? _a : '').startsWith('start')) {
+                            start = subNode;
+                        }
+                        if (((_b = subNode.textContent) !== null && _b !== void 0 ? _b : '').startsWith('end')) {
+                            end = subNode;
+                        }
+                    }
+                    if (start && end) {
+                        var fragment = document.createDocumentFragment();
+                        fragment.append(document.createTextNode(it.content));
+                        pars.push(new RawSet({
+                            start: start,
+                            end: end
+                        }, fragment));
+                    }
+                });
+                (_b = currentNode === null || currentNode === void 0 ? void 0 : currentNode.parentNode) === null || _b === void 0 ? void 0 : _b.replaceChild(template_1.content, currentNode);
+            }
+            else {
+                var uuid = RandomUtils_1.RandomUtils.uuid();
+                var fragment = document.createDocumentFragment();
+                var start = document.createComment("start " + uuid);
+                var end = document.createComment("end " + uuid);
+                (_c = currentNode === null || currentNode === void 0 ? void 0 : currentNode.parentNode) === null || _c === void 0 ? void 0 : _c.insertBefore(start, currentNode);
+                (_d = currentNode === null || currentNode === void 0 ? void 0 : currentNode.parentNode) === null || _d === void 0 ? void 0 : _d.insertBefore(end, currentNode.nextSibling);
+                fragment.append(currentNode);
+                pars.push(new RawSet({
+                    start: start,
+                    end: end
+                }, fragment));
+            }
+        };
         while (currentNode = nodeIterator.nextNode()) {
-            var uuid = RandomUtils_1.RandomUtils.uuid();
-            var fragment = document.createDocumentFragment();
-            var start = document.createComment("start " + uuid);
-            var end = document.createComment("end " + uuid);
-            (_a = currentNode === null || currentNode === void 0 ? void 0 : currentNode.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(start, currentNode);
-            (_b = currentNode === null || currentNode === void 0 ? void 0 : currentNode.parentNode) === null || _b === void 0 ? void 0 : _b.insertBefore(end, currentNode.nextSibling);
-            fragment.append(currentNode);
-            pars.push(new RawSet({
-                start: start,
-                end: end
-            }, fragment));
+            _loop_1();
         }
@@ -183,2 +266,43 @@ return pars;
     };
+    RawSet.drItOtherEncoding = function (element) {
+        var random = RandomUtils_1.RandomUtils.uuid();
+        var regex = /#it#/g;
+        element.querySelectorAll("[" + RawSet.DR_IT_OPTIONNAME + "]").forEach(function (it) {
+            it.innerHTML = it.innerHTML.replace(regex, random);
+        });
+        return random;
+    };
+    RawSet.drItOtherDecoding = function (element, random) {
+        element.querySelectorAll("[" + RawSet.DR_IT_OPTIONNAME + "]").forEach(function (it) {
+            it.innerHTML = it.innerHTML.replace(RegExp(random, 'g'), '#it#');
+        });
+    };
+    RawSet.drDVarEncoding = function (element, drVarOption) {
+        var _a;
+        var vars = ((_a = drVarOption === null || drVarOption === void 0 ? void 0 : drVarOption.split(',')) !== null && _a !== void 0 ? _a : []).map(function (it) {
+            var s = it.trim().split('=');
+            return {
+                name: s[0],
+                value: s[1],
+                regex: RegExp('(?<!(dr-|\\.))var\\.' + s[0] + '(?=.?)', 'g'),
+                random: RandomUtils_1.RandomUtils.uuid()
+            };
+        });
+        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(vit.regex, vit.random);
+            });
+        });
+        vars.filter(function (vit) { return vit.value && vit.name; }).forEach(function (vit) {
+            element.innerHTML = element.innerHTML.replace(vit.regex, vit.value);
+        });
+        return vars;
+    };
+    RawSet.drDVarDecoding = function (element, vars) {
+        element.querySelectorAll("[" + RawSet.DR_THIS_NAME + "]").forEach(function (it) {
+            vars.filter(function (vit) { return vit.value && vit.name; }).forEach(function (vit) {
+                it.innerHTML = it.innerHTML.replace(RegExp(vit.random, 'g'), vit.value);
+            });
+        });
+    };
     RawSet.drThisEncoding = function (element, drThis) {
@@ -202,5 +326,10 @@ var thisRandom = RandomUtils_1.RandomUtils.uuid();
             var s = it.trim().split('=');
-            return { name: s[0], value: s[1], regex: RegExp('(?<!(dr-|\\.))var\\.' + s[0] + '(?=.?)', 'g'), random: RandomUtils_1.RandomUtils.uuid() };
+            return {
+                name: s[0],
+                value: s[1],
+                regex: RegExp('(?<!(dr-|\\.))var\\.' + s[0] + '(?=.?)', 'g'),
+                random: RandomUtils_1.RandomUtils.uuid()
+            };
         });
-        element.querySelectorAll("[" + RawSet.DR_THIS_NAME + "]").forEach(function (it) {
+        element.querySelectorAll("[" + RawSet.DR_VAR_OPTIONNAME + "]").forEach(function (it) {
             vars.filter(function (vit) { return vit.value && vit.name; }).forEach(function (vit) {
@@ -237,2 +366,3 @@ it.innerHTML = it.innerHTML.replace(vit.regex, vit.random);
     };
+    RawSet.DR = 'dr';
     RawSet.DR_IF_NAME = 'dr-if';
@@ -244,8 +374,7 @@ RawSet.DR_FOR_OF_NAME = 'dr-for-of';
     RawSet.DR_IT_OPTIONNAME = 'dr-it';
-    RawSet.DR_DECLARATION_OPTIONNAME = 'dr-declaration';
     RawSet.DR_VAR_OPTIONNAME = 'dr-var';
     RawSet.DR_STRIP_OPTIONNAME = 'dr-strip';
-    RawSet.DR_ATTRIBUTES = [RawSet.DR_IF_NAME, RawSet.DR_FOR_OF_NAME, RawSet.DR_FOR_NAME, RawSet.DR_THIS_NAME];
+    RawSet.DR_ATTRIBUTES = [RawSet.DR_IF_NAME, RawSet.DR_FOR_OF_NAME, RawSet.DR_FOR_NAME, RawSet.DR_THIS_NAME, RawSet.DR];
     return RawSet;
 }());
 exports.RawSet = RawSet;

README.MD

@@ -5,56 +5,102 @@ dom-render
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <title>Title</title>
-    <script src="../dist/dom-render.js"></script>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="description" content="">
+    <title>simple-boot-front</title>
 </head>
 <body id="app">
+<h1>template</h1>
+<h2>print</h2>
+<div>${this.name}</div>
+<div>${this.office.addr.first}, ${this.office.addr.last}, ${this.office.addr.street} (${this.office.name})</div>
+<div>${this.getOfficeFullAddr()}</div>
+
+<h2>df-if</h2>
+<div dr-if="true"> true</div>
+<div dr-if="this.gender==='M'"> gender: M</div>
+
+<h2>df-for, of</h2>
+<div dr-for="var i = 0; i < this.friends.length; i++"> friend</div>
+<div dr-for-of="this.friends"> ${#it#.name}</div>
+<div dr-for="var i = 1 ; i <= 9 ; i++" dr-it="i">
+    ${#it#} *
+    <scope dr-for="var y = 1 ; y <= 9 ; y++" dr-it="y" dr-var="superIt=#it#" dr-strip="true">
+        #it# = ${var.superIt * #it#}
+    </scope>
+</div>
+
+<h1>event</h1>
+<h2>dr-event, click, change, input, keyup, keydown</h2>
 <div>
-    ${this.name}
-    <button dr-event-click="alert(this.name)">ss ${this.cnt} ssss</button>
+    click: <button dr-event-click="this.name = 'name' + new Date()">click</button> <br>
+    change: <input type="text" dr-event-change="this.name = $target.value"> <br>
+    input: <input type="text" dr-event-input="this.name = $target.value"> <br>
+    keyup: <input type="text" dr-event-keyup="this.name = $target.value"> <br>
+    keydown: <input type="text" dr-event-keydown="this.name = $target.value">
 </div>
-</body>
-<script>
-    const app = document.querySelector('#app');
-    class User {
-        friends;
-        color;
-        selectValue;
-        textValue;
-        e1;
-        e2;
 
-        constructor(cnt) {
-            this.name = 'zz'
-            this.cnt = cnt;
-            this.color = RandomUtils.getRandomColor();
-        }
+<h2>dr-value, value-link</h2>
+<div>
+    dr-value: <input type="text" dr-value="return this.office.name"> <br>
+    dr-value-link: <input type="text" dr-value-link="this.office.addr.street"> <br>
+</div>
 
-        cc($event) {
-            console.log('-->', this.e1, this.e2)
-        }
+<h1>attribute</h1>
+<h2>dr-attr</h2>
+<textarea dr-attr="return {rows: this.age/2, cols: this.age}"></textarea>
+<h2>dr-style</h2>
+<div dr-style="return {fontSize: this.age+'px'}"> style </div>
+<button dr-event-click="this.age = Math.floor(Math.random() * 20)"> change age</button>
 
-        makeRandomColor() {
-            return RandomUtils.getRandomColor();
+<h1>lifeCycle</h1>
+<h2>dr-on-init</h2>
+<div>
+    <input dr-on-init="this.onInitElement" value="init-test-value">
+</div>
+<script src="./src/index.ts"></script>
+</body>
+</html>
+```
+```typescript
+class User {
+    name: string;
+    age: number;
+    gender: string;
+    friends: User[];
+    office = {
+        name: 'guro',
+        addr: {
+            first: 'guro',
+            last: ' digital',
+            street: ' complex'
         }
+    }
 
-        element($element) {
-            $element.value = RandomUtils.getRandomColor();
-            console.log('ele', $element);
-        }
+    constructor(name: string, age: number, gender: string, friends: User[] = []) {
+        this.name = name;
+        this.age = age;
+        this.gender = gender;
+        this.friends = friends;
     }
 
-    const user = new User(255);
-    const target = document.querySelector('#app')
-    if (target) {
-        const dest = DomRender.run(user, target);
-        console.log('destUser', dest)
-        setTimeout(() => {
-            dest.name = RandomUtils.uuid()
-        }, 3000);
+    onInitElement(e: HTMLInputElement) {
+        console.log('inputElement onInit', e.value)
     }
-</script>
-</html>
+
+    getOfficeFullAddr() {
+        return `${this.office.addr.first}, ${this.office.addr.last}, ${this.office.addr.street} (${this.office.name})`
+    }
+
+    sayName() {
+        console.log(this.name)
+    }
+}
+const friends = [new User('friend1', 15, 'M'), new User('friend2', 16, 'F')]
+const target = document.querySelector('#app');
+if (target) {
+    const user = DomRender.run(new User('parent', 10, 'M', friends), target);
+}
 ```

utils/script/ScriptUtils.js

@@ -15,3 +15,2 @@ "use strict";
             GetDetectProxy.prototype.set = function (target, p, value, receiver) {
-                console.log('-------set-->', target, p, value);
                 return true;
@@ -18,0 +17,0 @@ };

No alert changes

Improved metrics

Total package byte prevSize

105135

increased by21.51%

Lines of code

2116

increased by15.82%

Number of lines in readme file

106

increased by76.67%

No dependency changes