dom-render - npm Package Compare versions

Comparing version 1.0.10 to 1.0.11

Config.d.ts

 import { Scope } from './Scope';
 import { ScopeObject } from './ScopeObject';
 export declare class Config {
-    private _document?;
     factoryScopeObject?: ((scope: Scope) => ScopeObject | undefined) | undefined;
     start: string;
     end: string;
-    constructor(_document?: Document | undefined, factoryScopeObject?: ((scope: Scope) => ScopeObject | undefined) | undefined);
-    get document(): Document;
+    constructor(factoryScopeObject?: ((scope: Scope) => ScopeObject | undefined) | undefined);
 }

Config.js

@@ -5,4 +5,3 @@ "use strict";
 var Config = (function () {
-    function Config(_document, factoryScopeObject) {
-        this._document = _document;
+    function Config(factoryScopeObject) {
         this.factoryScopeObject = factoryScopeObject;
@@ -12,12 +11,4 @@ this.start = '<!--%';
     }
-    Object.defineProperty(Config.prototype, "document", {
-        get: function () {
-            var _a;
-            return (_a = this._document) !== null && _a !== void 0 ? _a : document;
-        },
-        enumerable: false,
-        configurable: true
-    });
     return Config;
 }());
 exports.Config = Config;

dist/dom-render.js

 'use strict';
+try{if(!exports) {var exports = {}}}catch (e) {var exports = {}} Object.defineProperty(exports, '__esModule', { value: true });
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
 
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DomRender = void 0;
-var RootScope_1 = require("./RootScope");
-var RandomUtils_1 = require("./utils/random/RandomUtils");
-var Config_1 = require("./Config");
-var ScopeObjectProxyHandler_1 = require("./ScopeObjectProxyHandler");
-var DomRender = (function () {
-    function DomRender(raws, uuidAndConfig, uuid) {
-        this.raws = raws;
-        this.uuidAndConfig = uuidAndConfig;
-        if (typeof uuidAndConfig === 'string') {
-            this.config = new Config_1.Config(document);
-            this.rootUUID = uuidAndConfig;
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise */
+
+var extendStatics = function(d, b) {
+    extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+    return extendStatics(d, b);
+};
+
+function __extends(d, b) {
+    if (typeof b !== "function" && b !== null)
+        throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+    extendStatics(d, b);
+    function __() { this.constructor = d; }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+}
+
+var eventManager = new (function () {
+    function class_1() {
+        var _this = this;
+        this.attrPrefix = 'dr-';
+        this.eventNames = ['click', 'change', 'keyup', 'keydown', 'input'];
+        this.attrNames = [
+            this.attrPrefix + 'value',
+            this.attrPrefix + 'value-link',
+            this.attrPrefix + 'attr',
+            this.attrPrefix + 'style',
+            this.attrPrefix + 'on-init'
+        ];
+        this.eventNames.forEach(function (it) {
+            _this.attrNames.push(_this.attrPrefix + 'event-' + it);
+        });
+    }
+    class_1.prototype.findAttrElements = function (fragment) {
+        var datas = [];
+        this.attrNames.forEach(function (attrName) {
+            fragment.querySelectorAll("[" + attrName + "]").forEach(function (it) {
+                datas.push({ name: attrName, value: it.getAttribute(attrName), element: it });
+            });
+        });
+        return datas;
+    };
+    class_1.prototype.applyEvent = function (obj, childNodes) {
+        var _this = this;
+        var elements = childNodes.filter(function (it) { return it.nodeType === 1; }).map(function (it) { return it; });
+        this.eventNames.forEach(function (it) {
+            _this.addDrEvent(obj, it, elements);
+        });
+        this.procAttr(elements, this.attrPrefix + 'value', function (it, attribute) {
+            var _a;
+            var script = attribute;
+            var data = (_a = Function("\"use strict\"; " + script + " ").bind(Object.assign(obj))()) !== null && _a !== void 0 ? _a : {};
+            it.value = data;
+        });
+        this.procAttr(elements, this.attrPrefix + 'on-init', function (it, varName) {
+            if (varName) {
+                if (typeof _this.getValue(obj, varName) === 'function') {
+                    _this.getValue(obj, varName)(it);
+                }
+                else {
+                    obj[varName] = it;
+                }
+            }
+        });
+        this.procAttr(elements, this.attrPrefix + 'value-link', function (it, varName) {
+            if (varName) {
+                if (typeof _this.getValue(obj, varName) === 'function') {
+                    _this.getValue(obj, varName)(it.value);
+                }
+                else {
+                    _this.setValue(obj, varName, it.value);
+                }
+                it.addEventListener('input', function (eit) {
+                    if (typeof _this.getValue(obj, varName) === 'function') {
+                        _this.getValue(obj, varName)(it.value, eit);
+                    }
+                    else {
+                        _this.setValue(obj, varName, it.value);
+                    }
+                });
+            }
+        });
+        this.changeVar(obj, elements);
+    };
+    class_1.prototype.changeVar = function (obj, elements, varName) {
+        var _this = this;
+        this.procAttr(elements, this.attrPrefix + 'value-link', function (it, attribute) {
+            if (attribute && attribute === varName) {
+                if (typeof _this.getValue(obj, attribute) === 'function') {
+                    _this.getValue(obj, attribute)(it.value);
+                }
+                else {
+                    var value = _this.getValue(obj, attribute);
+                    if (value !== undefined && value !== null) {
+                        it.value = value;
+                    }
+                }
+            }
+        });
+        this.procAttr(elements, this.attrPrefix + 'attr', function (it, attribute) {
+            var _a;
+            var script = attribute;
+            if (_this.isUsingThisVar(attribute, varName) || varName === undefined) {
+                var data = (_a = Function("\"use strict\"; " + script + " ").bind(obj)()) !== null && _a !== void 0 ? _a : {};
+                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);
+                    }
+                }
+            }
+        });
+        this.procAttr(elements, this.attrPrefix + 'style', function (it, attribute) {
+            var _a;
+            var script = attribute;
+            if (_this.isUsingThisVar(attribute, varName) || varName === undefined) {
+                var data = (_a = Function("\"use strict\"; " + script + " ").bind(obj)()) !== null && _a !== void 0 ? _a : {};
+                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 instanceof HTMLElement) {
+                        it.style[key] = value;
+                    }
+                }
+            }
+        });
+    };
+    class_1.prototype.addDrEvent = function (obj, eventName, elements) {
+        var attr = this.attrPrefix + 'event-' + eventName;
+        this.procAttr(elements, attr, function (it, attribute) {
+            var script = attribute;
+            it.addEventListener(eventName, function (event) {
+                var _a;
+                var f = Function("\"use strict\"; const $event=event; " + script + " ");
+                (_a = f.bind(Object.assign(obj))()) !== null && _a !== void 0 ? _a : {};
+            });
+        });
+    };
+    class_1.prototype.procAttr = function (elements, attrName, f) {
+        if (elements === void 0) { elements = []; }
+        elements.forEach(function (it) {
+            if (!it) {
+                return;
+            }
+            if (it.nodeType === 1) {
+                var e = it;
+                if (e.getAttribute(attrName)) {
+                    f(it, e.getAttribute(attrName));
+                }
+                e.querySelectorAll("[" + attrName + "]").forEach(function (it) {
+                    f(it, it.getAttribute(attrName));
+                });
+            }
+        });
+    };
+    class_1.prototype.getValue = function (obj, name, value) {
+        var r = obj[name];
+        if (typeof r === 'function') {
+            r = r.bind(obj);
         }
-        else if (uuidAndConfig instanceof Config_1.Config) {
-            this.config = uuidAndConfig;
-            this.rootUUID = uuid !== null && uuid !== void 0 ? uuid : RandomUtils_1.RandomUtils.uuid();
+        return r;
+    };
+    class_1.prototype.setValue = function (obj, name, value) {
+        var thisAnyElement = obj[name];
+        if (typeof thisAnyElement === 'number') {
+            obj[name] = Number(value);
         }
         else {
-            this.config = new Config_1.Config(document);
-            this.rootUUID = RandomUtils_1.RandomUtils.uuid();
+            obj[name] = value.toString();
         }
+    };
+    class_1.prototype.isUsingThisVar = function (raws, varName) {
+        if (varName && raws) {
+            for (var _i = 0, _a = Array.from(new Set(this.usingThisVar(varName)).values()); _i < _a.length; _i++) {
+                var raw = _a[_i];
+                if (raw.startsWith(varName)) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    };
+    class_1.prototype.usingThisVar = function (raws) {
+        var regex = /["'].*?["']/gm;
+        raws = raws.replace(regex, '');
+        var varRegexStr = 'this\\.([a-zA-Z_$][?a-zA-Z_.$0-9]*)';
+        var varRegex = RegExp(varRegexStr, 'gm');
+        var varExec = varRegex.exec(raws);
+        var usingVars = [];
+        while (varExec) {
+            usingVars.push(varExec[1].replace('?', ''));
+            varExec = varRegex.exec(varExec.input);
+        }
+        return usingVars;
+    };
+    return class_1;
+}())();
+
+var ScopeResultSet = (function () {
+    function ScopeResultSet(uuid, object, fragment, startComment, endComment, calls) {
+        if (calls === void 0) { calls = []; }
+        this.uuid = uuid;
+        this.object = object;
+        this.fragment = fragment;
+        this.startComment = startComment;
+        this.endComment = endComment;
+        this.calls = calls;
+        this.childNodes = [];
+        for (var i = 0; i < fragment.childNodes.length; i++) {
+            var childNode = fragment.childNodes[i];
+            this.childNodes.push(childNode);
+        }
     }
-    DomRender.prototype.compile = function (target, targetNode) {
-        this.root = new RootScope_1.RootScope(this.raws, target, this.rootUUID, this.config, targetNode);
-        return this.root;
+    ScopeResultSet.prototype.childAllRemove = function () {
+        var next = this.startComment.nextSibling;
+        while (next) {
+            if (next === this.endComment) {
+                break;
+            }
+            next.remove();
+            next = this.startComment.nextSibling;
+        }
     };
-    DomRender.prototype.run = function (target, targetNode) {
+    ScopeResultSet.prototype.isConnected = function () {
+        if (this.childNodes.length <= 0) {
+            return true;
+        }
+        for (var _i = 0, _a = this.childNodes; _i < _a.length; _i++) {
+            var childNode = _a[_i];
+            if (childNode.isConnected) {
+                return true;
+            }
+        }
+        return false;
+    };
+    ScopeResultSet.prototype.applyEvent = function () {
+        eventManager.applyEvent(this.object._originObj, this.childNodes);
+    };
+    return ScopeResultSet;
+}());
+
+var ValidUtils = (function () {
+    function ValidUtils() {
+    }
+    ValidUtils.isNullOrUndefined = function (data) {
+        if (data == null || undefined === data) {
+            return true;
+        }
+        else {
+            return false;
+        }
+    };
+    ValidUtils.isNull = function (data) {
+        if (data == null) {
+            return true;
+        }
+        else {
+            return false;
+        }
+    };
+    ValidUtils.isArray = function (object_o) {
+        if (ValidUtils.isNullOrUndefined(object_o)) {
+            return false;
+        }
+        else {
+            return Object.prototype.toString.call(object_o).trim() === '[object Array]';
+        }
+    };
+    ValidUtils.isNumber = function (object_o) {
+        if (ValidUtils.isNullOrUndefined(object_o)) {
+            return false;
+        }
+        else {
+            return Object.prototype.toString.call(object_o).trim() === '[object Number]';
+        }
+    };
+    ValidUtils.isString = function (object_o) {
+        if (ValidUtils.isNullOrUndefined(object_o)) {
+            return false;
+        }
+        else {
+            return Object.prototype.toString.call(object_o).trim() === '[object String]';
+        }
+    };
+    ValidUtils.isFunction = function (object_o) {
+        if (ValidUtils.isNullOrUndefined(object_o)) {
+            return false;
+        }
+        else {
+            return Object.prototype.toString.call(object_o).trim() === '[object Function]';
+        }
+    };
+    ValidUtils.isObject = function (object_o) {
+        if (ValidUtils.isNullOrUndefined(object_o)) {
+            return false;
+        }
+        else {
+            return Object.prototype.toString.call(object_o).trim() === '[object Object]';
+        }
+    };
+    ValidUtils.isMap = function (object_o) {
+        if (ValidUtils.isNullOrUndefined(object_o)) {
+            return false;
+        }
+        else {
+            return Object.prototype.toString.call(object_o).trim() === '[object Map]';
+        }
+    };
+    return ValidUtils;
+}());
+
+var RandomUtils = (function () {
+    function RandomUtils() {
+    }
+    RandomUtils.random = function (min, max) {
+        if (ValidUtils.isNullOrUndefined(min)) {
+            return Math.random();
+        }
+        else if (!ValidUtils.isNullOrUndefined(min) && ValidUtils.isNullOrUndefined(max)) {
+            return Math.random() * (min || 0);
+        }
+        else {
+            return Math.random() * ((max || 0) - (min || 0)) + (min || 0);
+        }
+    };
+    RandomUtils.uuid = function (format) {
+        if (format === void 0) { format = 'xxxx-xxxx-xxxx-xxxx'; }
+        return format.replace(/[xy]/g, function (c) {
+            var r = Math.random() * 16 | 0;
+            var v = c === 'x' ? r : (r & 0x3 | 0x8);
+            return v.toString(16);
+        });
+    };
+    RandomUtils.getRandomColor = function () {
+        var letters = '0123456789ABCDEF'.split('');
+        var color = '#';
+        for (var i = 0; i < 6; i++) {
+            color += letters[Math.floor(Math.random() * 16)];
+        }
+        return color;
+    };
+    RandomUtils.getRandomString = function (len) {
+        var letters = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
+        var color = '';
+        for (var i = 0; i < len; i++) {
+            color += letters[Math.floor(Math.random() * letters.length)];
+        }
+        return color;
+    };
+    RandomUtils.d = '';
+    return RandomUtils;
+}());
+
+var ScopeObject = (function () {
+    function ScopeObject(_scope, _uuid) {
+        if (_uuid === void 0) { _uuid = RandomUtils.uuid(); }
+        this._scope = _scope;
+        this._uuid = _uuid;
+        this._calls = [];
+        this._writes = '';
+    }
+    ScopeObject.prototype.executeResultSet = function (script) {
+        var _this = this;
+        this.eval(script);
+        var templateElement = this._scope.raws.document.createElement('template');
+        templateElement.innerHTML = this._writes;
+        var startComment = this._scope.raws.document.createComment('scope start ' + this._uuid);
+        var endComment = this._scope.raws.document.createComment('scope end ' + this._uuid);
+        templateElement.content.childNodes.forEach(function (it) {
+            if (it.nodeType === 1) {
+                it.setAttribute('scope-uuid', _this._uuid);
+            }
+        });
+        return new ScopeResultSet(this._uuid, this, templateElement.content, startComment, endComment, this._calls);
+    };
+    ScopeObject.prototype.eval = function (str) {
+        return this.scopeEval(this, str);
+    };
+    ScopeObject.prototype.scopeEval = function (scope, script) {
+        return Function("\"use strict\";\n        const write = (str) => {\n            this._appendWrite(str);\n        };\n        \n        const include = (target) => {\n            const uuid = this._makeUUID();\n            const targetNode = this.getTargetNode(uuid);\n            const rootScope = this._compileRootScope(target, targetNode, uuid);\n            this._calls.push({name: 'include', parameter: [target], result: rootScope})\n            \n            if (rootScope) {\n                this._appendWrite(\"<template include-scope-uuid='\" + uuid + \"'></template>\");\n            }\n        }\n        \n        " + this.customScript() + "\n        \n        " + script + "\n        ").bind(scope)();
+    };
+    ScopeObject.prototype._appendWrite = function (str) {
+        this._writes += str;
+    };
+    ScopeObject.prototype._makeUUID = function () {
+        return RandomUtils.uuid();
+    };
+    ScopeObject.prototype._compileRootScope = function (target, targetNode, uuid) {
+        if (!('_ScopeObjectProxyHandler_isProxy' in target)) {
+            console.error('no Domrander Proxy Object -> var proxy = Domrender.proxy(target, ScopeRawSet)', target);
+            return new Error('no Domrander compile Object');
+        }
+        var rawSet = target._ScopeObjectProxyHandler_rawSet;
+        return DomRender.compileRootScope(this._scope.raws.document, target, rawSet, this._scope.config, targetNode, uuid);
+    };
+    ScopeObject.prototype.getTargetNode = function (uuid) {
+        return new TargetNode("[include-scope-uuid='" + uuid + "']", TargetNodeMode.replace, this._scope.raws.document);
+    };
+    ScopeObject.prototype.customScript = function () {
+        return '';
+    };
+    return ScopeObject;
+}());
+
+var Config = (function () {
+    function Config(factoryScopeObject) {
+        this.factoryScopeObject = factoryScopeObject;
+        this.start = '<!--%';
+        this.end = '%-->';
+    }
+    return Config;
+}());
+
+var ScopeOpjectProxy = (function () {
+    function ScopeOpjectProxy(origin) {
+        this.origin = origin;
+    }
+    ScopeOpjectProxy.prototype.apply = function (target, thisArg, argArray) {
+        return target.apply(thisArg, argArray);
+    };
+    ScopeOpjectProxy.prototype.has = function (target, key) {
+        return key in target;
+    };
+    ScopeOpjectProxy.prototype.set = function (target, p, value, receiver) {
+        this.origin[p] = value;
+        target[p] = value;
+        return true;
+    };
+    ScopeOpjectProxy.prototype.get = function (target, p, receiver) {
         var _a;
-        this.root = new RootScope_1.RootScope(this.raws, target, this.rootUUID, this.config, targetNode);
-        var proxy = new Proxy(target, new ScopeObjectProxyHandler_1.ScopeObjectProxyHandler());
-        (_a = proxy === null || proxy === void 0 ? void 0 : proxy._ScopeObjectProxyHandler) === null || _a === void 0 ? void 0 : _a.run(proxy, target, this.root);
-        return proxy;
+        return (_a = target[p]) !== null && _a !== void 0 ? _a : this.origin[p];
     };
-    DomRender.prototype.runRender = function (target, targetNode, option) {
+    return ScopeOpjectProxy;
+}());
+
+var ScopeRawSet = (function () {
+    function ScopeRawSet(document, raw, styles) {
+        if (styles === void 0) { styles = []; }
+        var _a, _b, _c;
+        this.document = document;
+        this.raw = raw;
+        this.styles = styles;
+        this.usingVars = [];
+        if (typeof this.raw === 'string') {
+            var template = this.document.createElement('template');
+            template.innerHTML = this.raw;
+            this.node = template.content;
+        }
+        else {
+            this.node = this.raw;
+        }
+        if (this.styles.length > 0 && (this.node.nodeType === 1 || this.node.nodeType === 11)) {
+            var style = document.createElement('style');
+            style.innerHTML = this.styles.join(' ');
+            this.node.prepend(style);
+        }
+        var nodeIterator = this.findScopeElementTagName('STYLE');
+        var node;
+        while (node = nodeIterator.nextNode()) {
+            var style = node;
+            if (!style.textContent) {
+                continue;
+            }
+            var text = (_a = style.textContent) !== null && _a !== void 0 ? _a : '';
+            var varRegex = /\/\*%(.*)%\*\//gm;
+            var varExec = varRegex.exec(text);
+            while (varExec) {
+                text = text.replace(varExec[0], '<!--%' + varExec[1] + '%-->');
+                varExec = varRegex.exec(varExec.input);
+            }
+            var fragment = this.makeFragment(text);
+            var newStyle = document.createElement('style');
+            newStyle.appendChild(fragment);
+            (_b = style.parentNode) === null || _b === void 0 ? void 0 : _b.replaceChild(newStyle, style);
+            nodeIterator.nextNode();
+        }
+        this.usingVars = this.usingThisVar((_c = this.node.textContent) !== null && _c !== void 0 ? _c : '');
+    }
+    ScopeRawSet.prototype.makeFragment = function (str) {
+        var template = this.document.createElement('template');
+        template.innerHTML = str;
+        return template.content;
+    };
+    ScopeRawSet.prototype.findScopeComment = function () {
+        var _this = this;
+        var nodeIterator = this.document.createNodeIterator(this.node, 128, {
+            acceptNode: function (node) {
+                var coment = node.data.replace(/[\r\n]/g, '');
+                var b = (coment.startsWith('%') && coment.endsWith('%') && node !== _this.node);
+                return b ? 1 : 2;
+            }
+        });
+        return nodeIterator;
+    };
+    ScopeRawSet.prototype.findScopeElementTagName = function (tagName) {
+        var _this = this;
+        var nodeIterator = this.document.createNodeIterator(this.node, 1, {
+            acceptNode: function (node) {
+                var b = ((node.tagName.toUpperCase() === tagName.toUpperCase()) && node !== _this.node);
+                return b ? 1 : 2;
+            }
+        });
+        return nodeIterator;
+    };
+    ScopeRawSet.prototype.getScopeCommentData = function () {
+        if (this.node.nodeType === 8) {
+            var comment = this.node.data;
+            if (comment.startsWith('%') && comment.endsWith('%')) {
+                return comment.substring(1, comment.length - 1);
+            }
+        }
+    };
+    ScopeRawSet.prototype.usingThisVar = function (raws) {
+        return eventManager.usingThisVar(raws);
+    };
+    return ScopeRawSet;
+}());
+
+var Scope = (function () {
+    function Scope(raws, obj, uuid, config) {
+        if (uuid === void 0) { uuid = RandomUtils.uuid(); }
+        if (config === void 0) { config = new Config(); }
+        this.raws = raws;
+        this.obj = obj;
+        this.uuid = uuid;
+        this.config = config;
+        this.childs = [];
+        this.run();
+    }
+    Scope.prototype.childIsContain = function () {
         var _a;
-        var t = this.run(target, targetNode);
-        (_a = this.root) === null || _a === void 0 ? void 0 : _a.executeRender(option);
-        return t;
+        for (var i = 0; i < this.childs.length; i++) {
+            if ((_a = this.childs[i].scopeResult) === null || _a === void 0 ? void 0 : _a.startComment.isConnected) {
+                return true;
+            }
+        }
+        return false;
     };
+    Scope.prototype.exec = function (obj) {
+        var _a;
+        if (obj === void 0) { obj = this.obj; }
+        var scopeObject = this.config.factoryScopeObject ? this.config.factoryScopeObject(this) : new ScopeObject(this);
+        scopeObject = (scopeObject !== null && scopeObject !== void 0 ? scopeObject : new ScopeObject(this));
+        scopeObject._originObj = obj;
+        var object = new Proxy(scopeObject, new ScopeOpjectProxy(obj));
+        this.scopeResult = object.executeResultSet(this.raws.getScopeCommentData());
+        (_a = this.scopeResult) === null || _a === void 0 ? void 0 : _a.applyEvent();
+        if (obj.onScopeMaked) {
+            obj.onScopeMaked(this);
+        }
+        return { object: object, result: this.scopeResult };
+    };
+    Scope.prototype.run = function () {
+        var nodeIterator = this.raws.findScopeComment();
+        var node;
+        while (node = nodeIterator.nextNode()) {
+            var scopeRawSet = new ScopeRawSet(this.raws.document, node);
+            var scope = new Scope(scopeRawSet, this.obj, RandomUtils.uuid(), this.config);
+            this.childs.push(scope);
+        }
+        return this;
+    };
+    return Scope;
+}());
+
+var NodeUtils = (function () {
+    function NodeUtils() {
+    }
+    NodeUtils.removeAllChildNode = function (node) {
+        while (node === null || node === void 0 ? void 0 : node.firstChild) {
+            node.firstChild.remove();
+        }
+    };
+    NodeUtils.appendChild = function (parentNode, childNode) {
+        return parentNode.appendChild(childNode);
+    };
+    NodeUtils.replaceNode = function (targetNode, newNode) {
+        var _a;
+        return (_a = targetNode.parentNode) === null || _a === void 0 ? void 0 : _a.replaceChild(newNode, targetNode);
+    };
+    NodeUtils.addNode = function (targetNode, newNode) {
+        var _a;
+        return (_a = targetNode.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(newNode, targetNode.nextSibling);
+    };
+    return NodeUtils;
+}());
+
+var TargetNodeMode;
+(function (TargetNodeMode) {
+    TargetNodeMode["child"] = "child";
+    TargetNodeMode["appendChild"] = "appendChild";
+    TargetNodeMode["prepend"] = "prepend";
+    TargetNodeMode["replace"] = "replace";
+})(TargetNodeMode || (TargetNodeMode = {}));
+var TargetNode = (function () {
+    function TargetNode(_node, mode, document) {
+        if (_node === void 0) { _node = 'body'; }
+        if (mode === void 0) { mode = TargetNodeMode.child; }
+        if (document === void 0) { document = document; }
+        this._node = _node;
+        this.mode = mode;
+        this.document = document;
+    }
+    Object.defineProperty(TargetNode.prototype, "node", {
+        get: function () {
+            if (typeof this._node === 'string') {
+                return this.document.querySelector(this._node);
+            }
+            else {
+                return this._node;
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    return TargetNode;
+}());
+var RootScope = (function (_super) {
+    __extends(RootScope, _super);
+    function RootScope(raws, obj, uuid, config, targetNode) {
+        if (uuid === void 0) { uuid = RandomUtils.uuid(); }
+        if (config === void 0) { config = new Config(); }
+        if (targetNode === void 0) { targetNode = new TargetNode(raws.document); }
+        var _this = _super.call(this, raws, obj, uuid, config) || this;
+        _this.targetNode = targetNode;
+        return _this;
+    }
+    RootScope.prototype.changeField = function (path) {
+        if (this.scopeResult) {
+            eventManager.changeVar(this.obj, this.scopeResult.childNodes, path);
+        }
+    };
+    RootScope.prototype.executeRender = function (option) {
+        var _a;
+        this.executeFragment(option);
+        if (this.obj.onReady) {
+            this.obj.onReady(this.raws.node);
+        }
+        if (this.raws.node) {
+            if (this.targetNode.node && TargetNodeMode.child === this.targetNode.mode) {
+                NodeUtils.removeAllChildNode(this.targetNode.node);
+                NodeUtils.appendChild(this.targetNode.node, this.raws.node);
+            }
+            if (this.targetNode.node && TargetNodeMode.appendChild === this.targetNode.mode) {
+                NodeUtils.appendChild(this.targetNode.node, this.raws.node);
+            }
+            if (this.targetNode.node && TargetNodeMode.prepend === this.targetNode.mode) {
+                (_a = this.targetNode.node) === null || _a === void 0 ? void 0 : _a.prepend(this.raws.node);
+            }
+            else if (this.targetNode.node && TargetNodeMode.replace === this.targetNode.mode) {
+                NodeUtils.replaceNode(this.targetNode.node, this.raws.node);
+            }
+            else ;
+        }
+        if (this.obj.onRenderd) {
+            this.obj.onRenderd(this.raws.node);
+        }
+        this.executeChildResultSet(option);
+        return this.targetNode;
+    };
+    RootScope.prototype.execRoot = function (fragment) {
+        var _a;
+        var childNodes = [];
+        var startComment = this.raws.document.createComment('rootScope start');
+        var endComment = this.raws.document.createComment('rootScope end');
+        fragment.prepend(startComment);
+        fragment.appendChild(endComment);
+        childNodes.push(((_a = this.targetNode.node) !== null && _a !== void 0 ? _a : this.raws.document.body));
+        eventManager.findAttrElements(fragment).forEach(function (it) {
+            childNodes.push(it.element);
+        });
+        var scopeObject = new ScopeObject(this);
+        scopeObject._originObj = this.obj;
+        var object = new Proxy(scopeObject, new ScopeOpjectProxy(this.obj));
+        this.scopeResult = new ScopeResultSet(RandomUtils.uuid(), object, fragment, startComment, endComment);
+        this.scopeResult.childNodes = childNodes;
+        this.scopeResult.applyEvent();
+        if (this.obj.onScopeMaked) {
+            this.obj.onScopeMaked(this);
+        }
+    };
+    RootScope.prototype.executeFragment = function (option) {
+        var _this = this;
+        this.execRoot(this.raws.node);
+        this.childs.forEach(function (it) {
+            var childScopeObject = it.exec().result;
+            if (it.raws.node) {
+                var fragment = _this.raws.document.createDocumentFragment();
+                fragment.append(childScopeObject.startComment, childScopeObject.fragment, childScopeObject.endComment);
+                NodeUtils.replaceNode(it.raws.node, fragment);
+            }
+            if (option === null || option === void 0 ? void 0 : option.head) {
+                childScopeObject.fragment.prepend(option === null || option === void 0 ? void 0 : option.head);
+            }
+            if (option === null || option === void 0 ? void 0 : option.tail) {
+                childScopeObject.fragment.append(option === null || option === void 0 ? void 0 : option.tail);
+            }
+        });
+    };
+    RootScope.prototype.executeChildResultSet = function (option) {
+        this.childs.forEach(function (it) {
+            var _a;
+            (_a = it.scopeResult) === null || _a === void 0 ? void 0 : _a.calls.filter(function (it) { return it.name === 'include' && it.result instanceof RootScope; }).map(function (it) { return it.result; }).forEach(function (it) {
+                it.executeRender();
+            });
+        });
+    };
+    RootScope.prototype.isConnected = function () {
+        var _a, _b;
+        for (var _i = 0, _c = this.childs; _i < _c.length; _i++) {
+            var it_1 = _c[_i];
+            if ((_a = it_1.scopeResult) === null || _a === void 0 ? void 0 : _a.isConnected()) {
+                return true;
+            }
+        }
+        return !!((_b = this.scopeResult) === null || _b === void 0 ? void 0 : _b.isConnected());
+    };
+    return RootScope;
+}(Scope));
+
+var ScopeObjectProxyHandler = (function () {
+    function ScopeObjectProxyHandler(_rawSet) {
+        this._rawSet = _rawSet;
+        this._refs = [];
+        this._rootScopes = new Map();
+    }
+    ScopeObjectProxyHandler.prototype.run = function (_targetProxy, _targetOrigin, _rootScope) {
+        var _this = this;
+        this._targetProxy = _targetProxy;
+        this._targetOrigin = _targetOrigin;
+        if (_rootScope) {
+            this._rootScopes.set(_rootScope.uuid, _rootScope);
+        }
+        var data = Object.keys(_targetOrigin) || [];
+        data.forEach(function (it) {
+            _this._targetOrigin[it] = _this.proxy(_this._targetOrigin[it]);
+        });
+    };
+    ScopeObjectProxyHandler.prototype.proxy = function (target) {
+        var _a;
+        if (typeof target === 'object' && !('_ScopeObjectProxyHandler_isProxy' in target) && !(target instanceof Scope)) {
+            var scopeObjectProxyHandler = new ScopeObjectProxyHandler(this._rawSet);
+            scopeObjectProxyHandler._refs.push(this._targetProxy);
+            var targetProxy = new Proxy(target, scopeObjectProxyHandler);
+            (_a = targetProxy === null || targetProxy === void 0 ? void 0 : targetProxy._ScopeObjectProxyHandler) === null || _a === void 0 ? void 0 : _a.run(targetProxy, target);
+            return targetProxy;
+        }
+        return target;
+    };
+    ScopeObjectProxyHandler.prototype.get = function (target, name, receiver) {
+        if (name === '_ScopeObjectProxyHandler') {
+            return this;
+        }
+        else if (name === '_ScopeObjectProxyHandler_refs') {
+            return this._refs;
+        }
+        else if (name === '_ScopeObjectProxyHandler_targetProxy') {
+            return this._targetProxy;
+        }
+        else if (name === '_ScopeObjectProxyHandler_targetOrigin') {
+            return this._targetOrigin;
+        }
+        else if (name === '_ScopeObjectProxyHandler_rootScopes') {
+            return this._rootScopes;
+        }
+        else if (name === '_ScopeObjectProxyHandler_rawSet') {
+            return this._rawSet;
+        }
+        else {
+            return target[name];
+        }
+    };
+    ScopeObjectProxyHandler.prototype.depth = function (depths, obj) {
+    };
+    ScopeObjectProxyHandler.prototype.getRefsProxyProp = function (obj) {
+        var fields = [];
+        this._refs.forEach(function (it) {
+            var data = Object.keys(it) || [];
+            data.filter(function (sit) { return typeof it[sit] === 'object' && ('_ScopeObjectProxyHandler_isProxy' in it[sit]) && obj === it[sit]._ScopeObjectProxyHandler_targetOrigin; }).forEach(function (sit) {
+                fields.push({
+                    parent: it,
+                    name: sit,
+                    fieldValue: it[sit]
+                });
+            });
+        });
+        return fields;
+    };
+    ScopeObjectProxyHandler.prototype.goRoot = function (depths, obj) {
+        var _a, _b;
+        var arr = [];
+        var refsProxyProp = this.getRefsProxyProp(obj);
+        if (refsProxyProp.length > 0) {
+            refsProxyProp.forEach(function (it) {
+                var newDepths = depths.slice();
+                newDepths.unshift(it.name);
+                var patharray = it.parent._ScopeObjectProxyHandler.goRoot(newDepths, it.parent._ScopeObjectProxyHandler_targetOrigin);
+                patharray.forEach(function (it) { return arr.push(it); });
+            });
+        }
+        else {
+            if ((_a = this._targetProxy) === null || _a === void 0 ? void 0 : _a.changeField) {
+                (_b = this._targetProxy) === null || _b === void 0 ? void 0 : _b.changeField(depths.join('.'));
+            }
+            this._rootScopes.forEach(function (v, k, m) {
+                v === null || v === void 0 ? void 0 : v.changeField(depths.join('.'));
+            });
+            var item = {
+                rootScopes: this._rootScopes,
+                rootTargetOrigin: this._targetOrigin,
+                rootTargetProxy: this._targetProxy,
+                depths: depths
+            };
+            arr.push(item);
+        }
+        return arr;
+    };
+    ScopeObjectProxyHandler.prototype.set = function (obj, prop, value) {
+        var _this = this;
+        var ignoreFields = ['_originObj', '_calls', '_writes', '_raws', '_uuid'];
+        if (ignoreFields.includes(prop)) {
+            obj[prop] = value;
+            return true;
+        }
+        obj[prop] = this.proxy(value);
+        var depths = [prop];
+        var parentDepths = this.goRoot(depths, obj);
+        parentDepths.filter(function (it) { return it.rootScopes.size > 0; }).forEach(function (it) {
+            var fullDepth = it.depths.join('.');
+            it.rootScopes.forEach(function (rit, rkey, rmap) {
+                if (!rit.isConnected()) {
+                    _this._rootScopes.delete(rit.uuid);
+                    return;
+                }
+                rit.childs.filter(function (sit) { return sit.scopeResult && sit.raws.usingVars.includes(fullDepth); }).forEach(function (sit) {
+                    if (sit.scopeResult) {
+                        sit.scopeResult.childAllRemove();
+                        var startComment = sit.scopeResult.startComment;
+                        var endComment = sit.scopeResult.endComment;
+                        var result = sit.exec(it.rootTargetProxy).result;
+                        result.childNodes.reduce(function (it, current) {
+                            NodeUtils.addNode(it, current);
+                            return current;
+                        }, startComment);
+                        NodeUtils.replaceNode(startComment, result.startComment);
+                        NodeUtils.replaceNode(endComment, result.endComment);
+                        result.calls.filter(function (it) { return it.name === 'include' && it.result instanceof RootScope; }).map(function (it) { return it.result; }).forEach(function (it) {
+                            it.executeRender();
+                        });
+                    }
+                });
+            });
+        });
+        return true;
+    };
+    ScopeObjectProxyHandler.prototype.apply = function (target, thisArg, argumentsList) {
+        return target.apply(thisArg, argumentsList);
+    };
+    ScopeObjectProxyHandler.prototype.has = function (target, key) {
+        return key === '_ScopeObjectProxyHandler_isProxy' || key in target;
+    };
+    return ScopeObjectProxyHandler;
+}());
+
+var DomRender = (function () {
+    function DomRender() {
+    }
+    DomRender.compileSet = function (document, target, raws, config, targetNode, uuid) {
+        var _a;
+        if (uuid === void 0) { uuid = RandomUtils.uuid(); }
+        var proxy = DomRender.proxy(target, raws);
+        var scopeRaws = new ScopeRawSet(document, raws.template, raws.styles);
+        var root = new RootScope(scopeRaws, proxy, uuid, config, targetNode);
+        (_a = proxy === null || proxy === void 0 ? void 0 : proxy._ScopeObjectProxyHandler) === null || _a === void 0 ? void 0 : _a.run(proxy, target, root);
+        return { target: proxy, rootScope: root };
+    };
+    DomRender.compileRootScope = function (document, target, raws, config, targetNode, uuid) {
+        return DomRender.compileSet(document, target, raws, config, targetNode, uuid).rootScope;
+    };
+    DomRender.proxy = function (target, raws) {
+        var proxy;
+        if ('_ScopeObjectProxyHandler_isProxy' in target) {
+            proxy = target;
+        }
+        else {
+            proxy = new Proxy(target, new ScopeObjectProxyHandler(raws));
+        }
+        return proxy;
+    };
+    DomRender.render = function (document, target, raws, config, targetNode) {
+        var dest = DomRender.compileSet(document, target, raws, config, targetNode);
+        dest.rootScope.executeRender();
+        return dest.target;
+    };
+    DomRender.renderTarget = function (target, document, selector) {
+        var app = document.querySelector(selector);
+        var raw = { template: app.innerHTML };
+        app.innerHTML = '';
+        var targetNode = new TargetNode(app, TargetNodeMode.appendChild);
+        var dest = DomRender.compileSet(document, target, raw, new Config(), targetNode);
+        dest.rootScope.executeRender();
+        return dest.target;
+    };
     return DomRender;
 }());
+
 exports.DomRender = DomRender;

DomRender.d.ts

 import { RootScope, TargetNode } from './RootScope';
-import { ScopeRawSet } from './ScopeRawSet';
 import { Config } from './Config';
+export declare type RawSet = {
+    template: string;
+    styles?: string[];
+};
 export declare class DomRender {
-    raws: ScopeRawSet;
-    private uuidAndConfig?;
-    root: RootScope | undefined;
-    private config;
-    private rootUUID;
-    constructor(raws: ScopeRawSet, uuid?: string);
-    constructor(raws: ScopeRawSet, config?: Config);
-    constructor(raws: ScopeRawSet, config?: Config, uuid?: string);
-    compile(target: any, targetNode?: TargetNode): RootScope;
-    run<T>(target: T, targetNode?: TargetNode): T;
-    runRender<T>(target: T, targetNode?: TargetNode, option?: {
-        head?: Node;
-        tail?: Node;
-        childElementAttr?: Map<string, string>;
-    }): T;
+    static compileSet<T>(document: Document, target: T, raws: RawSet, config?: Config, targetNode?: TargetNode, uuid?: string): {
+        target: T;
+        rootScope: RootScope;
+    };
+    static compileRootScope<T>(document: Document, target: T, raws: RawSet, config: Config, targetNode?: TargetNode, uuid?: string): RootScope;
+    static proxy<T>(target: T, raws: RawSet): T;
+    static render<T>(document: Document, target: T, raws: RawSet, config: Config, targetNode?: TargetNode): T;
+    static renderTarget<T>(target: T, document: Document, selector: string): T;
 }

DomRender.js

@@ -5,41 +5,47 @@ "use strict";
 var RootScope_1 = require("./RootScope");
+var ScopeRawSet_1 = require("./ScopeRawSet");
 var RandomUtils_1 = require("./utils/random/RandomUtils");
 var Config_1 = require("./Config");
-var ScopeObjectProxyHandler_1 = require("./ScopeObjectProxyHandler");
+var ScopeObjectProxyHandler_1 = require("./proxys/ScopeObjectProxyHandler");
 var DomRender = (function () {
-    function DomRender(raws, uuidAndConfig, uuid) {
-        this.raws = raws;
-        this.uuidAndConfig = uuidAndConfig;
-        if (typeof uuidAndConfig === 'string') {
-            this.config = new Config_1.Config(document);
-            this.rootUUID = uuidAndConfig;
+    function DomRender() {
+    }
+    DomRender.compileSet = function (document, target, raws, config, targetNode, uuid) {
+        var _a;
+        if (uuid === void 0) { uuid = RandomUtils_1.RandomUtils.uuid(); }
+        var proxy = DomRender.proxy(target, raws);
+        var scopeRaws = new ScopeRawSet_1.ScopeRawSet(document, raws.template, raws.styles);
+        var root = new RootScope_1.RootScope(scopeRaws, proxy, uuid, config, targetNode);
+        (_a = proxy === null || proxy === void 0 ? void 0 : proxy._ScopeObjectProxyHandler) === null || _a === void 0 ? void 0 : _a.run(proxy, target, root);
+        return { target: proxy, rootScope: root };
+    };
+    DomRender.compileRootScope = function (document, target, raws, config, targetNode, uuid) {
+        return DomRender.compileSet(document, target, raws, config, targetNode, uuid).rootScope;
+    };
+    DomRender.proxy = function (target, raws) {
+        var proxy;
+        if ('_ScopeObjectProxyHandler_isProxy' in target) {
+            proxy = target;
         }
-        else if (uuidAndConfig instanceof Config_1.Config) {
-            this.config = uuidAndConfig;
-            this.rootUUID = uuid !== null && uuid !== void 0 ? uuid : RandomUtils_1.RandomUtils.uuid();
-        }
         else {
-            this.config = new Config_1.Config(document);
-            this.rootUUID = RandomUtils_1.RandomUtils.uuid();
+            proxy = new Proxy(target, new ScopeObjectProxyHandler_1.ScopeObjectProxyHandler(raws));
         }
-    }
-    DomRender.prototype.compile = function (target, targetNode) {
-        this.root = new RootScope_1.RootScope(this.raws, target, this.rootUUID, this.config, targetNode);
-        return this.root;
-    };
-    DomRender.prototype.run = function (target, targetNode) {
-        var _a;
-        this.root = new RootScope_1.RootScope(this.raws, target, this.rootUUID, this.config, targetNode);
-        var proxy = new Proxy(target, new ScopeObjectProxyHandler_1.ScopeObjectProxyHandler());
-        (_a = proxy === null || proxy === void 0 ? void 0 : proxy._ScopeObjectProxyHandler) === null || _a === void 0 ? void 0 : _a.run(proxy, target, this.root);
         return proxy;
     };
-    DomRender.prototype.runRender = function (target, targetNode, option) {
-        var _a;
-        var t = this.run(target, targetNode);
-        (_a = this.root) === null || _a === void 0 ? void 0 : _a.executeRender(option);
-        return t;
+    DomRender.render = function (document, target, raws, config, targetNode) {
+        var dest = DomRender.compileSet(document, target, raws, config, targetNode);
+        dest.rootScope.executeRender();
+        return dest.target;
     };
+    DomRender.renderTarget = function (target, document, selector) {
+        var app = document.querySelector(selector);
+        var raw = { template: app.innerHTML };
+        app.innerHTML = '';
+        var targetNode = new RootScope_1.TargetNode(app, RootScope_1.TargetNodeMode.appendChild);
+        var dest = DomRender.compileSet(document, target, raw, new Config_1.Config(), targetNode);
+        dest.rootScope.executeRender();
+        return dest.target;
+    };
     return DomRender;
 }());
 exports.DomRender = DomRender;

package.json

 {
   "name": "dom-render",
-  "version": "1.0.10",
+  "version": "1.0.11",
   "main": "DomRenderCompiler.js",
@@ -56,2 +56,3 @@ "license": "MIT",
     "build": "rm -rf dist && tsc --outDir dist --declarationDir dist && rm -rf dist/dist && rollup -c",
+    "build:parcel": "parcel build ./src/*.ts  --out-dir=dist-parcel --out-file dom-render.js",
     "bundle": "rollup -c",
@@ -81,4 +82,6 @@ "bundle:watch": "rollup -c -w",
     "ts-jest": "^26.5.4",
+    "parcel-bundler": "^1.12.5",
+    "parcel-plugin-css-to-string": "^2.5.2",
     "typescript": "^4.3.5"
   }
 }

README.MD

@@ -10,92 +10,65 @@ dom-render
     <title>Title</title>
-    <script src="../dist/dist/dom-render.js"></script>
+    <script src="dist/dom-render.js"></script>
 </head>
 <body>
-<div id="body">
+<div id="app">
+
+
+    <!--%
+  for(var i = 0 ; i < this.cnt ; i ++) {
+      write(`<div>${i}</div>`);
+      write(`<div>${i}: <input type="text" dr-on-init="e${i+1}"><div>`);
+  }
+  %-->
     <div>
-        <!--%
-        for(var i = 0 ; i < this.cnt; i++) {
-            write(this.name + '--' + i)
-        }
-        %-->
+        <button dr-event-click="this.cc()">click me</button>
     </div>
 
-    <div>
-        <!--% write(this.car.name + '  --' + this.car.model)%-->
-    </div>
+
 </div>
 </body>
 <script>
+    console.log('-----')
+    const app = document.querySelector('#app');
+    class User {
+        friends;
+        color;
+        selectValue;
+        textValue;
+        e1;
+        e2;
 
-    console.log('-->', ScopeRawSet)
-    const body = document.querySelector('#body');
-    let targetNode = new TargetNode(body, TargetNodeMode.appendChild)
-    const raw = new ScopeRawSet(body.innerHTML, ['div {color: <!--%write(this.color)%-->}'])
+        constructor(cnt) {
+            this.name = 'zz'
+            this.cnt = cnt;
+            this.color = RandomUtils.getRandomColor();
+            //this.friends = ['a'];
+        }
 
-    class Test extends ScopeObject {
-        constructor(config) {
-            super(config);
-            this.zz = '22'
-            console.log('---')
+        cc($event) {
+            // console.log('-->', $event, this.selectValue, this.textValue)
+            console.log('-->', this.e1, this.e2)
+            // this.textValue = RandomUtils.getRandomColor();
         }
-        say () {
-            console.log('say~')
-        }
-    }
 
-    class Person {
-        constructor() {
-            this.eat = 'zzz'
-            this.food = 'food'
+        makeRandomColor() {
+            return RandomUtils.getRandomColor();
         }
-    }
-    class Wheel {
-        constructor() {
-            this.x = 100;
-            this.y = 500;
-        }
-    }
 
-    class Car {
-        constructor() {
-            this.name = 'car'
-            this.model = 'tt'
-            this.leftWheel = new Wheel();
-            this.rightWheel = this.leftWheel;
-            // this.rightWheel = new Wheel();
+        element($element) {
+            $element.value = RandomUtils.getRandomColor();
+            console.log('ele', $element);
         }
     }
-    class User extends Person {
-        constructor(name, height, width) {
-            super();
-            this.cnt = 10;
-            this.name = name;
-            this.color = RandomUtils.getRandomColor();
-            this.height = height;
-            this.width = width;
-            this.car = new Car();
-            this.childs = ['one', 'tow', 'three', 'four'];
-        }
-    }
-
-    let user = new User('visualkhh', 55, 22);
-    for (const key in user) {
-        console.log('target->',  key)
-    }
-    let config = new Config(document, (it) => new Test(it.config));
-    console.log(user)
-    let domRender = new DomRender(raw, config, 'zzzzzzzz');
-    user = domRender.runRender(user, targetNode);
-    // user.childs.push('-zzzzzzzzzzzzzzzz')
+    const config = new Config();
+    const targetNode = new TargetNode(app, TargetNodeMode.replace)
+    let user = new User(1);
+    const raw = {template: app.innerHTML, styles: ['p {color: /*%write(this.color)%*/}']};
+    user = DomRender.render(document, user, raw, config, targetNode);
     setTimeout(() => {
-        user.car.name = 'zzzzzzzzzzzzzzzzzzzzz';
-    }, 5000)
-    setTimeout(() => {
-        user.cnt = 100;
-    }, 2000)
-
-    setInterval(() => {
-        user.color = RandomUtils.getRandomColor();
-    },1500)
-    console.log(user, user.width)
+        // user.friends.push(2)
+        user.cnt = 2;
+        // console.log('-->user.cnt', user, user.cnt)
+        // user.friends = [2,3,4];
+    }, 3000)
 </script>
@@ -106,2 +79,4 @@ </html>
 
+
+
 ```

RootScope.d.ts

 import { Scope } from './Scope';
-import { ScopePosition } from './ScopePosition';
 import { ScopeRawSet } from './ScopeRawSet';
 import { Config } from './Config';
+import { ChangeField } from './ChangeField';
+import { ScopeOption } from './ScopeOption';
 export declare enum TargetNodeMode {
@@ -14,20 +15,15 @@ child = "child",
     mode: TargetNodeMode;
-    constructor(_node?: Node | string, mode?: TargetNodeMode);
+    document: Document;
+    constructor(_node?: Node | string, mode?: TargetNodeMode, document?: Document);
     get node(): Node | Element | null;
 }
-export declare class RootScope extends Scope {
-    rawSet: ScopeRawSet;
+export declare class RootScope extends Scope implements ChangeField {
     targetNode: TargetNode;
-    constructor(rawSet: ScopeRawSet, obj: any, uuid?: string, config?: Config, targetNode?: TargetNode, position?: ScopePosition);
-    executeRender(option?: {
-        head?: Node;
-        tail?: Node;
-        childElementAttr?: Map<string, string>;
-    }): TargetNode;
-    executeFragment(option?: {
-        head?: Node;
-        tail?: Node;
-        childElementAttr?: Map<string, string>;
-    }): DocumentFragment;
-    private extracted;
+    constructor(raws: ScopeRawSet, obj: any, uuid?: string, config?: Config, targetNode?: TargetNode);
+    changeField(path: string): void;
+    executeRender(option?: ScopeOption): TargetNode;
+    execRoot(fragment: DocumentFragment): void;
+    executeFragment(option?: ScopeOption): void;
+    private executeChildResultSet;
+    isConnected(): boolean;
 }

RootScope.js

@@ -20,7 +20,9 @@ "use strict";
 var Scope_1 = require("./Scope");
-var ScopePosition_1 = require("./ScopePosition");
-var ScopeRawSet_1 = require("./ScopeRawSet");
+var ScopeResultSet_1 = require("./ScopeResultSet");
 var RandomUtils_1 = require("./utils/random/RandomUtils");
 var NodeUtils_1 = require("./utils/node/NodeUtils");
 var Config_1 = require("./Config");
+var EventManager_1 = require("./events/EventManager");
+var ScopeObject_1 = require("./ScopeObject");
+var ScopeOpjectProxy_1 = require("./proxys/ScopeOpjectProxy");
 var TargetNodeMode;
@@ -34,7 +36,9 @@ (function (TargetNodeMode) {
 var TargetNode = (function () {
-    function TargetNode(_node, mode) {
-        if (_node === void 0) { _node = document.body; }
+    function TargetNode(_node, mode, document) {
+        if (_node === void 0) { _node = 'body'; }
         if (mode === void 0) { mode = TargetNodeMode.child; }
+        if (document === void 0) { document = document; }
         this._node = _node;
         this.mode = mode;
+        this.document = document;
     }
@@ -44,3 +48,3 @@ Object.defineProperty(TargetNode.prototype, "node", {
             if (typeof this._node === 'string') {
-                return document.querySelector(this._node);
+                return this.document.querySelector(this._node);
             }
@@ -59,42 +63,75 @@ else {
     __extends(RootScope, _super);
-    function RootScope(rawSet, obj, uuid, config, targetNode, position) {
+    function RootScope(raws, obj, uuid, config, targetNode) {
         if (uuid === void 0) { uuid = RandomUtils_1.RandomUtils.uuid(); }
         if (config === void 0) { config = new Config_1.Config(); }
-        if (targetNode === void 0) { targetNode = new TargetNode(config.document); }
-        if (position === void 0) { position = new ScopePosition_1.ScopePosition(0, rawSet.raw.length); }
-        var _this = _super.call(this, rawSet.raw, obj, uuid, config, position) || this;
-        _this.rawSet = rawSet;
+        if (targetNode === void 0) { targetNode = new TargetNode(raws.document); }
+        var _this = _super.call(this, raws, obj, uuid, config) || this;
         _this.targetNode = targetNode;
         return _this;
     }
+    RootScope.prototype.changeField = function (path) {
+        if (this.scopeResult) {
+            EventManager_1.eventManager.changeVar(this.obj, this.scopeResult.childNodes, path);
+        }
+    };
     RootScope.prototype.executeRender = function (option) {
         var _a;
-        var fragment = this.executeFragment(option);
-        if (this.targetNode.node && TargetNodeMode.child === this.targetNode.mode) {
-            NodeUtils_1.NodeUtils.removeAllChildNode(this.targetNode.node);
-            NodeUtils_1.NodeUtils.appendChild(this.targetNode.node, fragment);
+        this.executeFragment(option);
+        if (this.obj.onReady) {
+            this.obj.onReady(this.raws.node);
         }
-        if (this.targetNode.node && TargetNodeMode.appendChild === this.targetNode.mode) {
-            NodeUtils_1.NodeUtils.appendChild(this.targetNode.node, fragment);
+        if (this.raws.node) {
+            if (this.targetNode.node && TargetNodeMode.child === this.targetNode.mode) {
+                NodeUtils_1.NodeUtils.removeAllChildNode(this.targetNode.node);
+                NodeUtils_1.NodeUtils.appendChild(this.targetNode.node, this.raws.node);
+            }
+            if (this.targetNode.node && TargetNodeMode.appendChild === this.targetNode.mode) {
+                NodeUtils_1.NodeUtils.appendChild(this.targetNode.node, this.raws.node);
+            }
+            if (this.targetNode.node && TargetNodeMode.prepend === this.targetNode.mode) {
+                (_a = this.targetNode.node) === null || _a === void 0 ? void 0 : _a.prepend(this.raws.node);
+            }
+            else if (this.targetNode.node && TargetNodeMode.replace === this.targetNode.mode) {
+                NodeUtils_1.NodeUtils.replaceNode(this.targetNode.node, this.raws.node);
+            }
+            else {
+            }
         }
-        if (this.targetNode.node && TargetNodeMode.prepend === this.targetNode.mode) {
-            (_a = this.targetNode.node) === null || _a === void 0 ? void 0 : _a.prepend(fragment);
+        if (this.obj.onRenderd) {
+            this.obj.onRenderd(this.raws.node);
         }
-        else if (this.targetNode.node && TargetNodeMode.replace === this.targetNode.mode) {
-            NodeUtils_1.NodeUtils.replaceNode(this.targetNode.node, fragment);
-        }
-        else {
-        }
+        this.executeChildResultSet(option);
         return this.targetNode;
     };
+    RootScope.prototype.execRoot = function (fragment) {
+        var _a;
+        var childNodes = [];
+        var startComment = this.raws.document.createComment('rootScope start');
+        var endComment = this.raws.document.createComment('rootScope end');
+        fragment.prepend(startComment);
+        fragment.appendChild(endComment);
+        childNodes.push(((_a = this.targetNode.node) !== null && _a !== void 0 ? _a : this.raws.document.body));
+        EventManager_1.eventManager.findAttrElements(fragment).forEach(function (it) {
+            childNodes.push(it.element);
+        });
+        var scopeObject = new ScopeObject_1.ScopeObject(this);
+        scopeObject._originObj = this.obj;
+        var object = new Proxy(scopeObject, new ScopeOpjectProxy_1.ScopeOpjectProxy(this.obj));
+        this.scopeResult = new ScopeResultSet_1.ScopeResultSet(RandomUtils_1.RandomUtils.uuid(), object, fragment, startComment, endComment);
+        this.scopeResult.childNodes = childNodes;
+        this.scopeResult.applyEvent();
+        if (this.obj.onScopeMaked) {
+            this.obj.onScopeMaked(this);
+        }
+    };
     RootScope.prototype.executeFragment = function (option) {
         var _this = this;
-        var _a;
-        var templateElement = this.config.document.createElement('template');
-        templateElement.innerHTML = this.raws;
-        var rawFragment = templateElement.content;
+        this.execRoot(this.raws.node);
         this.childs.forEach(function (it) {
-            var _a;
             var childScopeObject = it.exec().result;
-            var currentNode = _this.extracted(rawFragment, it, childScopeObject);
+            if (it.raws.node) {
+                var fragment = _this.raws.document.createDocumentFragment();
+                fragment.append(childScopeObject.startComment, childScopeObject.fragment, childScopeObject.endComment);
+                NodeUtils_1.NodeUtils.replaceNode(it.raws.node, fragment);
+            }
             if (option === null || option === void 0 ? void 0 : option.head) {
@@ -106,37 +143,21 @@ childScopeObject.fragment.prepend(option === null || option === void 0 ? void 0 : option.head);
             }
-            (_a = currentNode === null || currentNode === void 0 ? void 0 : currentNode.parentNode) === null || _a === void 0 ? void 0 : _a.replaceChild(childScopeObject.fragment, currentNode);
         });
-        if (this.rawSet.styles.length > 0) {
-            var styleScope = new RootScope(new ScopeRawSet_1.ScopeRawSet(this.rawSet.styles.join(' ')), this.obj, RandomUtils_1.RandomUtils.uuid(), this.config);
-            var styleFragment = styleScope.executeFragment();
-            styleScope.childs.forEach(function (it) { return _this.childs.push(it); });
-            var style = this.config.document.createElement('style');
-            style.appendChild(styleFragment);
-            rawFragment.prepend(style);
-        }
-        if ((option === null || option === void 0 ? void 0 : option.childElementAttr) && ((_a = option === null || option === void 0 ? void 0 : option.childElementAttr) === null || _a === void 0 ? void 0 : _a.size) > 0) {
-            rawFragment.childNodes.forEach(function (it) {
-                var _a;
-                if (it.nodeType === 1) {
-                    (_a = option === null || option === void 0 ? void 0 : option.childElementAttr) === null || _a === void 0 ? void 0 : _a.forEach(function (v, k) {
-                        it.setAttribute(k, v);
-                    });
-                }
+    };
+    RootScope.prototype.executeChildResultSet = function (option) {
+        this.childs.forEach(function (it) {
+            var _a;
+            (_a = it.scopeResult) === null || _a === void 0 ? void 0 : _a.calls.filter(function (it) { return it.name === 'include' && it.result instanceof RootScope; }).map(function (it) { return it.result; }).forEach(function (it) {
+                it.executeRender();
             });
-        }
-        return rawFragment;
+        });
     };
-    RootScope.prototype.extracted = function (rawFragment, it, childScopeObject) {
+    RootScope.prototype.isConnected = function () {
         var _a, _b;
-        var nodeIterator = this.config.document.createNodeIterator(rawFragment, 128, {
-            acceptNode: function (node) {
-                var coment = node.data.replace(/[\r\n]/g, '');
-                var b = coment.startsWith('%') && coment.endsWith('%') && coment === ('%' + it.raws.replace(/[\r\n]/g, '') + '%');
-                return b ? 1 : 2;
+        for (var _i = 0, _c = this.childs; _i < _c.length; _i++) {
+            var it_1 = _c[_i];
+            if ((_a = it_1.scopeResult) === null || _a === void 0 ? void 0 : _a.isConnected()) {
+                return true;
             }
-        });
-        var currentNode = nodeIterator.nextNode();
-        (_a = currentNode === null || currentNode === void 0 ? void 0 : currentNode.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(childScopeObject.startComment, currentNode);
-        (_b = currentNode === null || currentNode === void 0 ? void 0 : currentNode.parentNode) === null || _b === void 0 ? void 0 : _b.insertBefore(childScopeObject.endComment, currentNode.nextSibling);
-        return currentNode;
+        }
+        return !!((_b = this.scopeResult) === null || _b === void 0 ? void 0 : _b.isConnected());
     };
@@ -143,0 +164,0 @@ return RootScope;

Scope.d.ts

@@ -1,24 +0,18 @@
-import { ScopeObject } from './ScopeObject';
-import { ScopePosition } from './ScopePosition';
 import { ScopeResultSet } from './ScopeResultSet';
 import { Config } from './Config';
+import { ScopeRawSet } from './ScopeRawSet';
 export declare class Scope {
-    raws: string;
+    raws: ScopeRawSet;
     obj: any;
     uuid: string;
     config: Config;
-    private position;
     childs: Scope[];
-    usingVars: string[];
     scopeResult?: ScopeResultSet;
-    constructor(raws: string, obj: any, uuid?: string, config?: Config, position?: ScopePosition);
+    constructor(raws: ScopeRawSet, obj: any, uuid?: string, config?: Config);
     childIsContain(): boolean;
     exec(obj?: any): {
-        object: ScopeObject;
+        object: any;
         result: ScopeResultSet;
     };
     private run;
-    indexOf(data: string, searchString: string, position?: number): number;
-    tailIndexOf(data: string, searchString: string, position?: number): number;
-    static usingThisVar(raws: string): string[];
 }

Scope.js

@@ -5,10 +5,10 @@ "use strict";
 var ScopeObject_1 = require("./ScopeObject");
-var ScopePosition_1 = require("./ScopePosition");
 var RandomUtils_1 = require("./utils/random/RandomUtils");
 var Config_1 = require("./Config");
+var ScopeOpjectProxy_1 = require("./proxys/ScopeOpjectProxy");
+var ScopeRawSet_1 = require("./ScopeRawSet");
 var Scope = (function () {
-    function Scope(raws, obj, uuid, config, position) {
+    function Scope(raws, obj, uuid, config) {
         if (uuid === void 0) { uuid = RandomUtils_1.RandomUtils.uuid(); }
         if (config === void 0) { config = new Config_1.Config(); }
-        if (position === void 0) { position = new ScopePosition_1.ScopePosition(0, raws.length); }
         this.raws = raws;
@@ -18,5 +18,3 @@ this.obj = obj;
         this.config = config;
-        this.position = position;
         this.childs = [];
-        this.usingVars = [];
         this.run();
@@ -34,57 +32,27 @@ }
     Scope.prototype.exec = function (obj) {
+        var _a;
         if (obj === void 0) { obj = this.obj; }
-        var scopeObject = this.config.factoryScopeObject ? this.config.factoryScopeObject(this) : new ScopeObject_1.ScopeObject(this.config);
-        var object = Object.assign(scopeObject, obj);
-        this.scopeResult = object.executeResultSet(this.raws);
+        var scopeObject = this.config.factoryScopeObject ? this.config.factoryScopeObject(this) : new ScopeObject_1.ScopeObject(this);
+        scopeObject = (scopeObject !== null && scopeObject !== void 0 ? scopeObject : new ScopeObject_1.ScopeObject(this));
+        scopeObject._originObj = obj;
+        var object = new Proxy(scopeObject, new ScopeOpjectProxy_1.ScopeOpjectProxy(obj));
+        this.scopeResult = object.executeResultSet(this.raws.getScopeCommentData());
+        (_a = this.scopeResult) === null || _a === void 0 ? void 0 : _a.applyEvent();
+        if (obj.onScopeMaked) {
+            obj.onScopeMaked(this);
+        }
         return { object: object, result: this.scopeResult };
     };
     Scope.prototype.run = function () {
-        var targetRaws = this.raws;
-        this.usingVars = Scope.usingThisVar(targetRaws);
-        var i = this.indexOf(targetRaws, this.config.start);
-        while (i !== -1) {
-            var startIdx = i;
-            var endIdx = this.tailIndexOf(targetRaws, this.config.end, i);
-            while (endIdx !== -1) {
-                var sub = targetRaws.substring(startIdx, endIdx);
-                var matchStart = sub.match(RegExp(this.config.start, 'gm')) || [];
-                var matchEnd = sub.match(RegExp(this.config.end, 'gm')) || [];
-                if (matchStart.length === matchEnd.length) {
-                    var scope = new Scope(sub.substring(this.config.start.length, sub.length - this.config.end.length), this.obj, RandomUtils_1.RandomUtils.uuid(), this.config, new ScopePosition_1.ScopePosition(startIdx, endIdx));
-                    this.childs.push(scope);
-                    break;
-                }
-                endIdx = this.tailIndexOf(targetRaws, this.config.end, endIdx);
-            }
-            if (endIdx !== -1) {
-                i = this.indexOf(targetRaws, this.config.start, endIdx);
-            }
-            else {
-                break;
-            }
+        var nodeIterator = this.raws.findScopeComment();
+        var node;
+        while (node = nodeIterator.nextNode()) {
+            var scopeRawSet = new ScopeRawSet_1.ScopeRawSet(this.raws.document, node);
+            var scope = new Scope(scopeRawSet, this.obj, RandomUtils_1.RandomUtils.uuid(), this.config);
+            this.childs.push(scope);
         }
         return this;
     };
-    Scope.prototype.indexOf = function (data, searchString, position) {
-        return data.indexOf(searchString, position);
-    };
-    Scope.prototype.tailIndexOf = function (data, searchString, position) {
-        var number = data.indexOf(searchString, position);
-        return number !== -1 ? number + searchString.length : number;
-    };
-    Scope.usingThisVar = function (raws) {
-        var regex = /["'].*["']/gm;
-        raws = raws.replace(regex, '');
-        var varRegexStr = 'this\\.([a-zA-Z_$][a-zA-Z_.$0-9]*)';
-        var varRegex = RegExp(varRegexStr, 'gm');
-        var varExec = varRegex.exec(raws);
-        var usingVars = [];
-        while (varExec) {
-            usingVars.push(varExec[1]);
-            varExec = varRegex.exec(varExec.input);
-        }
-        return usingVars;
-    };
     return Scope;
 }());
 exports.Scope = Scope;

ScopeObject.d.ts

 import { ScopeResultSet } from './ScopeResultSet';
-import { Config } from './Config';
-export declare type ScopeObjectCalls = {
-    name: string;
-    parameter: any[];
-    result: any;
-}[];
+import { Scope } from './Scope';
+import { ScopeObjectCall } from './ScopeObjectCall';
 export declare class ScopeObject {
-    config: Config;
-    uuid: string;
-    calls: ScopeObjectCalls;
+    _scope: Scope;
+    _uuid: string;
+    _originObj: any;
+    _calls: ScopeObjectCall[];
     [name: string]: any;
-    writes: string;
-    constructor(config: Config, uuid?: string);
-    executeResultSet(code: string): ScopeResultSet;
+    _writes: string;
+    constructor(_scope: Scope, _uuid?: string);
+    executeResultSet(script: string): ScopeResultSet;
     private eval;
     private scopeEval;
-    customScript(): string;
-    appendWrite(str: string): void;
+    private _appendWrite;
+    private _makeUUID;
+    private _compileRootScope;
+    private getTargetNode;
+    protected customScript(): string;
 }

ScopeObject.js

@@ -6,23 +6,25 @@ "use strict";
 var RandomUtils_1 = require("./utils/random/RandomUtils");
+var RootScope_1 = require("./RootScope");
+var DomRender_1 = require("./DomRender");
 var ScopeObject = (function () {
-    function ScopeObject(config, uuid) {
-        if (uuid === void 0) { uuid = RandomUtils_1.RandomUtils.uuid(); }
-        this.config = config;
-        this.uuid = uuid;
-        this.calls = [];
-        this.writes = '';
+    function ScopeObject(_scope, _uuid) {
+        if (_uuid === void 0) { _uuid = RandomUtils_1.RandomUtils.uuid(); }
+        this._scope = _scope;
+        this._uuid = _uuid;
+        this._calls = [];
+        this._writes = '';
     }
-    ScopeObject.prototype.executeResultSet = function (code) {
+    ScopeObject.prototype.executeResultSet = function (script) {
         var _this = this;
-        this.eval(code);
-        var templateElement = this.config.document.createElement('template');
-        templateElement.innerHTML = this.writes;
-        var startComment = this.config.document.createComment('scope start ' + this.uuid);
-        var endComment = this.config.document.createComment('scope end ' + this.uuid);
+        this.eval(script);
+        var templateElement = this._scope.raws.document.createElement('template');
+        templateElement.innerHTML = this._writes;
+        var startComment = this._scope.raws.document.createComment('scope start ' + this._uuid);
+        var endComment = this._scope.raws.document.createComment('scope end ' + this._uuid);
         templateElement.content.childNodes.forEach(function (it) {
             if (it.nodeType === 1) {
-                it.setAttribute('scope-uuid', _this.uuid);
+                it.setAttribute('scope-uuid', _this._uuid);
             }
         });
-        return new ScopeResultSet_1.ScopeResultSet(this.uuid, this, templateElement.content, startComment, endComment, this.calls);
+        return new ScopeResultSet_1.ScopeResultSet(this._uuid, this, templateElement.content, startComment, endComment, this._calls);
     };
@@ -33,12 +35,26 @@ ScopeObject.prototype.eval = function (str) {
     ScopeObject.prototype.scopeEval = function (scope, script) {
-        return Function("\"use strict\";\n        const write = (str) => {\n            this.appendWrite(str);\n        }\n        \n        " + this.customScript() + "\n        \n        " + script + "\n        ").bind(scope)();
+        return Function("\"use strict\";\n        const write = (str) => {\n            this._appendWrite(str);\n        };\n        \n        const include = (target) => {\n            const uuid = this._makeUUID();\n            const targetNode = this.getTargetNode(uuid);\n            const rootScope = this._compileRootScope(target, targetNode, uuid);\n            this._calls.push({name: 'include', parameter: [target], result: rootScope})\n            \n            if (rootScope) {\n                this._appendWrite(\"<template include-scope-uuid='\" + uuid + \"'></template>\");\n            }\n        }\n        \n        " + this.customScript() + "\n        \n        " + script + "\n        ").bind(scope)();
     };
+    ScopeObject.prototype._appendWrite = function (str) {
+        this._writes += str;
+    };
+    ScopeObject.prototype._makeUUID = function () {
+        return RandomUtils_1.RandomUtils.uuid();
+    };
+    ScopeObject.prototype._compileRootScope = function (target, targetNode, uuid) {
+        if (!('_ScopeObjectProxyHandler_isProxy' in target)) {
+            console.error('no Domrander Proxy Object -> var proxy = Domrender.proxy(target, ScopeRawSet)', target);
+            return new Error('no Domrander compile Object');
+        }
+        var rawSet = target._ScopeObjectProxyHandler_rawSet;
+        return DomRender_1.DomRender.compileRootScope(this._scope.raws.document, target, rawSet, this._scope.config, targetNode, uuid);
+    };
+    ScopeObject.prototype.getTargetNode = function (uuid) {
+        return new RootScope_1.TargetNode("[include-scope-uuid='" + uuid + "']", RootScope_1.TargetNodeMode.replace, this._scope.raws.document);
+    };
     ScopeObject.prototype.customScript = function () {
         return '';
     };
-    ScopeObject.prototype.appendWrite = function (str) {
-        this.writes += str;
-    };
     return ScopeObject;
 }());
 exports.ScopeObject = ScopeObject;

ScopeRawSet.d.ts

 export declare class ScopeRawSet {
-    raw: string;
+    document: Document;
+    raw: string | Node;
     styles: string[];
-    constructor(raw: string, styles?: string[]);
+    node: DocumentFragment | Node;
+    usingVars: string[];
+    constructor(document: Document, raw: string | Node, styles?: string[]);
+    makeFragment(str: string): DocumentFragment;
+    findScopeComment(): NodeIterator;
+    findScopeElementTagName(tagName: string): NodeIterator;
+    getScopeCommentData(): string | undefined;
+    private usingThisVar;
 }

ScopeRawSet.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ScopeRawSet = void 0;
+var EventManager_1 = require("./events/EventManager");
 var ScopeRawSet = (function () {
-    function ScopeRawSet(raw, styles) {
+    function ScopeRawSet(document, raw, styles) {
         if (styles === void 0) { styles = []; }
+        var _a, _b, _c;
+        this.document = document;
         this.raw = raw;
         this.styles = styles;
+        this.usingVars = [];
+        if (typeof this.raw === 'string') {
+            var template = this.document.createElement('template');
+            template.innerHTML = this.raw;
+            this.node = template.content;
+        }
+        else {
+            this.node = this.raw;
+        }
+        if (this.styles.length > 0 && (this.node.nodeType === 1 || this.node.nodeType === 11)) {
+            var style = document.createElement('style');
+            style.innerHTML = this.styles.join(' ');
+            this.node.prepend(style);
+        }
+        var nodeIterator = this.findScopeElementTagName('STYLE');
+        var node;
+        while (node = nodeIterator.nextNode()) {
+            var style = node;
+            if (!style.textContent) {
+                continue;
+            }
+            var text = (_a = style.textContent) !== null && _a !== void 0 ? _a : '';
+            var varRegex = /\/\*%(.*)%\*\//gm;
+            var varExec = varRegex.exec(text);
+            while (varExec) {
+                text = text.replace(varExec[0], '<!--%' + varExec[1] + '%-->');
+                varExec = varRegex.exec(varExec.input);
+            }
+            var fragment = this.makeFragment(text);
+            var newStyle = document.createElement('style');
+            newStyle.appendChild(fragment);
+            (_b = style.parentNode) === null || _b === void 0 ? void 0 : _b.replaceChild(newStyle, style);
+            nodeIterator.nextNode();
+        }
+        this.usingVars = this.usingThisVar((_c = this.node.textContent) !== null && _c !== void 0 ? _c : '');
     }
+    ScopeRawSet.prototype.makeFragment = function (str) {
+        var template = this.document.createElement('template');
+        template.innerHTML = str;
+        return template.content;
+    };
+    ScopeRawSet.prototype.findScopeComment = function () {
+        var _this = this;
+        var nodeIterator = this.document.createNodeIterator(this.node, 128, {
+            acceptNode: function (node) {
+                var coment = node.data.replace(/[\r\n]/g, '');
+                var b = (coment.startsWith('%') && coment.endsWith('%') && node !== _this.node);
+                return b ? 1 : 2;
+            }
+        });
+        return nodeIterator;
+    };
+    ScopeRawSet.prototype.findScopeElementTagName = function (tagName) {
+        var _this = this;
+        var nodeIterator = this.document.createNodeIterator(this.node, 1, {
+            acceptNode: function (node) {
+                var b = ((node.tagName.toUpperCase() === tagName.toUpperCase()) && node !== _this.node);
+                return b ? 1 : 2;
+            }
+        });
+        return nodeIterator;
+    };
+    ScopeRawSet.prototype.getScopeCommentData = function () {
+        if (this.node.nodeType === 8) {
+            var comment = this.node.data;
+            if (comment.startsWith('%') && comment.endsWith('%')) {
+                return comment.substring(1, comment.length - 1);
+            }
+        }
+    };
+    ScopeRawSet.prototype.usingThisVar = function (raws) {
+        return EventManager_1.eventManager.usingThisVar(raws);
+    };
     return ScopeRawSet;
 }());
 exports.ScopeRawSet = ScopeRawSet;

ScopeResultSet.d.ts

@@ -1,2 +0,3 @@
-import { ScopeObject, ScopeObjectCalls } from './ScopeObject';
+import { ScopeObject } from './ScopeObject';
+import { ScopeObjectCall } from './ScopeObjectCall';
 export declare class ScopeResultSet {
@@ -8,6 +9,8 @@ uuid: string;
     endComment: Comment;
-    calls: ScopeObjectCalls;
+    calls: ScopeObjectCall[];
     childNodes: ChildNode[];
-    constructor(uuid: string, object: ScopeObject, fragment: DocumentFragment, startComment: Comment, endComment: Comment, calls?: ScopeObjectCalls);
+    constructor(uuid: string, object: ScopeObject, fragment: DocumentFragment, startComment: Comment, endComment: Comment, calls?: ScopeObjectCall[]);
     childAllRemove(): void;
+    isConnected(): boolean;
+    applyEvent(): void;
 }

ScopeResultSet.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ScopeResultSet = void 0;
+var EventManager_1 = require("./events/EventManager");
 var ScopeResultSet = (function () {
@@ -29,4 +30,19 @@ function ScopeResultSet(uuid, object, fragment, startComment, endComment, calls) {
     };
+    ScopeResultSet.prototype.isConnected = function () {
+        if (this.childNodes.length <= 0) {
+            return true;
+        }
+        for (var _i = 0, _a = this.childNodes; _i < _a.length; _i++) {
+            var childNode = _a[_i];
+            if (childNode.isConnected) {
+                return true;
+            }
+        }
+        return false;
+    };
+    ScopeResultSet.prototype.applyEvent = function () {
+        EventManager_1.eventManager.applyEvent(this.object._originObj, this.childNodes);
+    };
     return ScopeResultSet;
 }());
 exports.ScopeResultSet = ScopeResultSet;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

93763

increased by124.25%

Number of package files

39

increased by34.48%

Lines of code

2173

increased by134.41%

Worsened metrics

Dev dependency count

18

increased by12.5%

Number of lines in readme file

81

decreased by-23.58%

Number of medium supply chain risk alerts

2

increased by100%

No dependency changes