dom-render 1.0.45 → 1.0.49

package/Config.d.ts

@@ -18,6 +18,8 @@ export interface Config {
     onElementInit?: (name: string, obj: any, rawSet: RawSet) => void;
     onAttrInit?: (name: string, attrValue: string, obj: any, rawSet: RawSet) => void;
     proxyExcludeTyps?: ConstructorType<any>[];
+    proxyExcludeOnBeforeReturnSets?: string[];
+    proxyExcludeOnBeforeReturnGets?: string[];
     scripts?: {
         [n: string]: any;
     };

package/DomRenderProxy.d.ts

@@ -14,7 +14,7 @@ export declare class DomRenderProxy<T extends object> implements ProxyHandler<T>
     initRender(target: Node): void;
     getRawSets(): RawSet[];
     render(raws?: RawSet[]): void;
-    root(paths: string[], value: any): void;
+    root(paths: string[], value?: any, lastDoneExecute?: boolean): string[];
     set(target: T, p: string | symbol, value: any, receiver: T): boolean;
     get(target: T, p: string | symbol, receiver: any): any;
     has(target: T, p: string | symbol): boolean;

package/DomRenderProxy.js

@@ -2,6 +2,7 @@ import { RawSet } from './RawSet';
 import { eventManager } from './events/EventManager';
 import { ScriptUtils } from './utils/script/ScriptUtils';
 import { Shield } from './types/Types';
+var excludeGetSetPropertys = ['onBeforeReturnGet', 'onBeforeReturnSet', '__domrender_components', '__render', '_DomRender_isFinal', '_domRender_ref', '_rawSets', '_domRender_proxy', '_targets', '_DomRender_origin', '_DomRender_ref', '_DomRender_proxy'];
 var DomRenderProxy = (function () {
     function DomRenderProxy(_domRender_origin, target, config) {
         this._domRender_origin = _domRender_origin;
@@ -84,14 +85,17 @@ var DomRenderProxy = (function () {
             }
         });
     };
-    DomRenderProxy.prototype.root = function (paths, value) {
+    DomRenderProxy.prototype.root = function (paths, value, lastDoneExecute) {
         var _this = this;
+        if (lastDoneExecute === void 0) { lastDoneExecute = true; }
+        var fullPaths = [];
         if (this._domRender_ref.size > 0) {
             this._domRender_ref.forEach(function (it, key) {
                 if ('_DomRender_isProxy' in key) {
                     it.forEach(function (sit) {
                         var _a;
-                        (_a = key._DomRender_proxy) === null || _a === void 0 ? void 0 : _a.root(paths.concat(sit), value);
+                        var items = (_a = key._DomRender_proxy) === null || _a === void 0 ? void 0 : _a.root(paths.concat(sit), value, lastDoneExecute);
+                        fullPaths.push(items.join(','));
                     });
                 }
             });
@@ -99,37 +103,47 @@ var DomRenderProxy = (function () {
         else {
             var strings = paths.reverse();
             var fullPathStr_1 = strings.join('.');
-            var iterable = this._rawSets.get(fullPathStr_1);
-            var front = strings.slice(0, strings.length - 1).join('.');
-            var last = strings[strings.length - 1];
-            if (!isNaN(Number(last)) && Array.isArray(ScriptUtils.evalReturn('this.' + front, this._domRender_proxy))) {
-                var aIterable = this._rawSets.get(front);
-                if (aIterable) {
-                    this.render(Array.from(aIterable));
+            if (lastDoneExecute) {
+                var iterable = this._rawSets.get(fullPathStr_1);
+                var front = strings.slice(0, strings.length - 1).join('.');
+                var last = strings[strings.length - 1];
+                if (!isNaN(Number(last)) && Array.isArray(ScriptUtils.evalReturn('this.' + front, this._domRender_proxy))) {
+                    var aIterable = this._rawSets.get(front);
+                    if (aIterable) {
+                        this.render(Array.from(aIterable));
+                    }
                 }
-            }
-            else if (iterable) {
-                this.render(Array.from(iterable));
-            }
-            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);
+                else if (iterable) {
+                    this.render(Array.from(iterable));
                 }
-            });
+                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);
+                    }
+                });
+            }
+            fullPaths.push(fullPathStr_1);
         }
+        return fullPaths;
     };
     DomRenderProxy.prototype.set = function (target, p, value, receiver) {
+        var _a, _b, _c, _d;
         if (typeof p === 'string') {
             value = this.proxy(receiver, value, p);
         }
         target[p] = value;
+        var fullPath;
         if (typeof p === 'string') {
-            this.root([p], value);
+            fullPath = this.root([p], value);
+        }
+        if (('onBeforeReturnSet' in receiver) && typeof p === 'string' && !((_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.proxyExcludeOnBeforeReturnSets) !== null && _b !== void 0 ? _b : []).concat(excludeGetSetPropertys).includes(p)) {
+            (_d = (_c = receiver) === null || _c === void 0 ? void 0 : _c.onBeforeReturnSet) === null || _d === void 0 ? void 0 : _d.call(_c, p, value, fullPath);
         }
         return true;
     };
     DomRenderProxy.prototype.get = function (target, p, receiver) {
+        var _a, _b, _c, _d;
         if (p === '_DomRender_origin') {
             return this._domRender_origin;
         }
@@ -142,11 +156,12 @@ var DomRenderProxy = (function () {
         else {
             var it_1 = target[p];
             if (it_1 && typeof it_1 === 'object' && ('_DomRender_isProxy' in it_1) && Object.prototype.toString.call(it_1._DomRender_origin) === '[object Date]') {
-                return it_1._DomRender_origin;
+                it_1 = it_1._DomRender_origin;
             }
-            else {
-                return it_1;
+            if (('onBeforeReturnGet' in receiver) && typeof p === 'string' && !((_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.proxyExcludeOnBeforeReturnGets) !== null && _b !== void 0 ? _b : []).concat(excludeGetSetPropertys).includes(p)) {
+                (_d = (_c = receiver) === null || _c === void 0 ? void 0 : _c.onBeforeReturnGet) === null || _d === void 0 ? void 0 : _d.call(_c, p, it_1, this.root([p], it_1, false));
             }
+            return it_1;
         }
     };
     DomRenderProxy.prototype.has = function (target, p) {

package/README.MD

@@ -2,7 +2,8 @@
 [![npm version](https://img.shields.io/badge/npm-v1.0.44-blue)](https://www.npmjs.com/package/dom-render) [![license](https://img.shields.io/badge/license-MIT-green)](LICENSE.md) [![Chat](https://img.shields.io/badge/discord-20%20online-brightgreen?logo=discord)](https://discord.gg/PW56dpns) [![Github](https://img.shields.io/badge/-github-black?logo=github)](https://github.com/visualkhh/dom-render)
 # Our primary goals are
 - view template engine
-- Dom control and reorder using web component
+- Dom control and reorder
+- all internal variables are managed by proxy. (DomRenderProxy)
 ---
 
 # 🚀 Quick start 
@@ -33,7 +34,7 @@ data.name = 'modify name';
 ## dr-if
 ```html
 <div dr-if="true">true</div>
-<div dr-if="this.gender==='M'"> gender: M</div>
+<div dr-if="this.gender==='M'">gender: M</div>
 ```
 ## dr-for, dr-for-of
 ```html
@@ -54,30 +55,41 @@ data.name = 'modify name';
 ```
 
 ## event
-- element
-  - dr-event ($event)
-    - click, mousedown, mouseup, dblclick, mouseover, mouseout, mousemove, mouseenter, mouseleave, contextmenu, keyup, keydown, keypress, change, input, submit, resize, focus, blur
-    - other event ($params, $event)
-      ```html
-      <input dr-event:bind='eventName1, eventName2' dr-event="console.log('event', $params, $event)"  type="text">
-      ```
-- window
-  - dr-window
-    - event-popstate
-```html
-<div>
-    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"><br>
-    submit: <form dr-event-submit="console.log($event); $event.preventDefault();"><input type="text"> <button type="submit">submit</button></form><br>
-    window-event-popstate: <input type="text" dr-window-event-popstate="alert(this.name)"><br>
-</div>
+dr-event-(name) 
+- click, mousedown, mouseup, dblclick, mouseover, mouseout, mousemove, mouseenter, mouseleave, contextmenu, keyup, keydown, keypress, change, input, submit, resize, focus, blur
+- ref: element 
+- variable: $event, $target
+```html
+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"><br>
+submit: <form dr-event-submit="console.log($event); $event.preventDefault();"><input type="text"> <button type="submit">submit</button></form><br>
+```
+
+dr-window-event-popstate
+- ref: window 
+- variable: $target
+```html
+window-event-popstate: <input type="text" dr-window-event-popstate="alert(this.name)"><br>
+```
+
+dr-event
+- other event
+- ref: element
+- variable: $params, $event
+```html
+<input dr-event:bind='eventName1, eventName2' dr-event="console.log('event', $params, $event)"  type="text">
 ```
 
 ## dr-value, value-link
+dr-value
+- The value is assigned the first time.
+
+dr-value-link
+- Value and variable values are referencing each other. It affects each other when changing. (Immediate reflection event: input)
 ```html
 dr-value: <input type="text" dr-value="this.office.name"> <br>
 dr-value-link: <input type="text" dr-value-link="this.office.addr.street"> <br>
@@ -86,11 +98,24 @@ dr-value-link: <input type="text" dr-value-link="this.office.addr.street"> <br>
 ## dr-attr
 ```html
 <textarea dr-attr="{rows: this.age/2, cols: this.age}"></textarea>
+<div dr-attr="{wow: '123', good: 123444}"></div>
+<div dr-attr="['wow=123', 'good=123444']"></div>
+<div dr-attr="'wow=123, good=123444'"></div>
+```
+
+## dr-class
+```html
+<div dr-class="{big: this.age > 50, red: this.age > 50}">
+<div dr-class="'big yellow ' + (this.age > 50 ? 'old' : 'young')">
+<div dr-class="['small', 'yellow']">
 ```
 
 ## dr-style
 ```html
-<div dr-style="{fontSize: this.age+'px'}"> style </div>
+<div dr-style="{fontSize: this.age + 'px'}"> style </div>
+<div dr-style="{'font-size': '20px'}"> style</div>
+<div dr-style="'font-size: ' + this.age +'px; margin: ' + this.age + 'px'"> style </div>
+<div dr-style="['font-size: ' + this.age +'px', 'margin: ' + this.age + 'px']"> style </div>
 ```
 
 
@@ -120,9 +145,15 @@ to-be
 </select>
 ```
 
+---
+# LifeCycle
+```
+* OnInitRender
+  - onInitRender(): init render call
+```
 ---
 
-# script
+# Script
 ```typescript
 new DomRender.run(obj, target, {
   scripts: {
@@ -142,7 +173,7 @@ const data = config.scripts.concat('head', 'tail')
 ```
 
 ---
-# component
+# Component
 ```typescript
 export namespace Profile {
   export const templat = '<div>aaaaa${this.name}aaaaa </div>';
@@ -174,10 +205,82 @@ using component
     - $innerHTML: element innerHTML string
 ---
 
-# LifeCycle
+# Detect Get, Set
+OnBeforeReturnSet
+```typescript
+export interface OnBeforeReturnSet {
+    onBeforeReturnSet(name: string, value: any, fullPath?: string[]): void;
+}
 ```
-* OnInitRender
-  - onInitRender(): init render call
+OnBeforeReturnGet
+```typescript
+export interface OnBeforeReturnGet {
+    onBeforeReturnGet(name: string, value: any, fullPath?: string[]): void;
+}
+```
+
+using detect
+```typescript
+{
+    name: 'dom-render'
+    onBeforeReturnSet: (name: string, value: any, fullpath: string[]) => {
+        console.log('set name-->', name, value, fullpath);
+    }
+    onBeforeReturnGet: (name: string, value: any, fullpath: string[]) => {
+        console.log('get name-->', name, value, fullpath);
+    }
+}
+```
+exclude detect property: Config
+- proxyExcludeOnBeforeReturnGets: ['propertyName']
+- proxyExcludeOnBeforeReturnSets: ['propertyName']
+---
+
+# Proxy
+all internal variables are managed by proxy. (DomRenderProxy)
+### exclude proxy (situation: Maximum call stack error)
+exclude detect property: Config
+- proxyExcludeTyps: [Class...]
+
+Code base
+```typescript
+// frezz
+{name : Object.freeze({...})}
+
+// Shield Object type: {[k: string]: any}
+{name : new Shield()}
+
+// DomRenderProxy Final
+{name : DomRenderProxy.final({...})}
+```
+--- 
+# Config
+```typescript
+export type TargetElement = {
+    _name: string,
+    template?: string,
+    styles?: string[],
+    callBack: (target: Element, obj: any, rawSet: RawSet) => DocumentFragment,
+    complete?: (target: Element, obj: any, rawSet: RawSet) => void
+};
+
+export type TargetAttr = {
+    name: string,
+    callBack: (target: Element, attrValue: string, obj: any, rawSet: RawSet) => DocumentFragment,
+    complete?: (target: Element, attrValue: string, obj: any, rawSet: RawSet) => void
+};
+
+export interface Config {
+    targetElements?: TargetElement[];
+    targetAttrs?: TargetAttr[];
+    onElementInit?: (name: string, obj: any, rawSet: RawSet) => void;
+    onAttrInit?: (name: string, attrValue: string, obj: any, rawSet: RawSet) => void;
+    proxyExcludeTyps?: ConstructorType<any>[];
+    proxyExcludeOnBeforeReturnSets?: string[];
+    proxyExcludeOnBeforeReturnGets?: string[];
+    scripts?: { [n: string]: any };
+    applyEvents?: { attrName: string, callBack: (elements: Element, attrValue: string, obj: any) => void }[];
+}
 ```
 ----
 # License

package/dist/Config.d.ts

@@ -18,6 +18,8 @@ export interface Config {
     onElementInit?: (name: string, obj: any, rawSet: RawSet) => void;
     onAttrInit?: (name: string, attrValue: string, obj: any, rawSet: RawSet) => void;
     proxyExcludeTyps?: ConstructorType<any>[];
+    proxyExcludeOnBeforeReturnSets?: string[];
+    proxyExcludeOnBeforeReturnGets?: string[];
     scripts?: {
         [n: string]: any;
     };

package/dist/DomRenderProxy.d.ts

@@ -14,7 +14,7 @@ export declare class DomRenderProxy<T extends object> implements ProxyHandler<T>
     initRender(target: Node): void;
     getRawSets(): RawSet[];
     render(raws?: RawSet[]): void;
-    root(paths: string[], value: any): void;
+    root(paths: string[], value?: any, lastDoneExecute?: boolean): string[];
     set(target: T, p: string | symbol, value: any, receiver: T): boolean;
     get(target: T, p: string | symbol, receiver: any): any;
     has(target: T, p: string | symbol): boolean;

package/dist/bundle.js

@@ -270,7 +270,7 @@ var eventManager = new (function () {
             document.querySelectorAll('[dr-window-event-popstate]').forEach(function (it) {
                 var script = it.getAttribute('dr-window-event-popstate');
                 if (script) {
-                    ScriptUtils.eval("\"use strict\"; const $target = this.__render.target;  " + script + " ", Object.assign(it.obj, {
+                    ScriptUtils.eval("const $target = this.__render.target;  " + script + " ", Object.assign(it.obj, {
                         __render: Object.freeze({
                             target: it
                         })
@@ -365,14 +365,28 @@ var eventManager = new (function () {
                 script = 'return ' + script;
             }
             if (_this.isUsingThisVar(script, varName) || varName === undefined) {
-                var data = ScriptUtils.eval("\"use strict\"; const $target=this.__render.target; " + script + " ", Object.assign(obj, {
+                var data = ScriptUtils.eval("const $target=this.__render.target; " + script + " ", Object.assign(obj, {
                     __render: Object.freeze({
                         target: it
                     })
                 }));
-                for (var _i = 0, _a = Object.entries(data); _i < _a.length; _i++) {
-                    var _b = _a[_i], key = _b[0], value = _b[1];
-                    it.setAttribute(key, String(value));
+                if (typeof data === 'string') {
+                    data.split(',').forEach(function (sit) {
+                        var _a = sit.split('='), key = _a[0], value = _a[1];
+                        it.setAttribute(key.trim(), value.trim());
+                    });
+                }
+                else if (Array.isArray(data)) {
+                    data.forEach(function (sit) {
+                        var _a = sit.split('='), key = _a[0], value = _a[1];
+                        it.setAttribute(key.trim(), value.trim());
+                    });
+                }
+                else {
+                    for (var _i = 0, _a = Object.entries(data); _i < _a.length; _i++) {
+                        var _b = _a[_i], key = _b[0], value = _b[1];
+                        it.setAttribute(key, String(value));
+                    }
                 }
             }
         });
@@ -382,15 +396,23 @@ var eventManager = new (function () {
                 script = 'return ' + script;
             }
             if (_this.isUsingThisVar(script, varName) || varName === undefined) {
-                var data = ScriptUtils.eval("\"use strict\"; const $target = this.__render.target;  " + script + " ", Object.assign(obj, {
+                var data = ScriptUtils.eval("const $target = this.__render.target;  " + script + " ", Object.assign(obj, {
                     __render: Object.freeze({
                         target: it
                     })
                 }));
-                for (var _i = 0, _a = Object.entries(data); _i < _a.length; _i++) {
-                    var _b = _a[_i], key = _b[0], value = _b[1];
-                    if (it instanceof HTMLElement) {
-                        it.style[key] = String(value);
+                if (typeof data === 'string') {
+                    it.setAttribute('style', data);
+                }
+                else if (Array.isArray(data)) {
+                    it.setAttribute('style', data.join(';'));
+                }
+                else {
+                    for (var _i = 0, _a = Object.entries(data); _i < _a.length; _i++) {
+                        var _b = _a[_i], key = _b[0], value = _b[1];
+                        if (it instanceof HTMLElement) {
+                            it.style[key] = String(value);
+                        }
                     }
                 }
             }
@@ -401,19 +423,27 @@ var eventManager = new (function () {
                 script = 'return ' + script;
             }
             if (_this.isUsingThisVar(script, varName) || varName === undefined) {
-                var data = ScriptUtils.eval("\"use strict\"; const $target = this.$target;  " + script + " ", Object.assign(obj, {
+                var data = ScriptUtils.eval("const $target = this.$target;  " + script + " ", Object.assign(obj, {
                     __render: Object.freeze({
                         target: it
                     })
                 }));
-                for (var _i = 0, _a = Object.entries(data); _i < _a.length; _i++) {
-                    var _b = _a[_i], key = _b[0], value = _b[1];
-                    if (it instanceof HTMLElement) {
-                        if (value) {
-                            it.classList.add(key);
-                        }
-                        else {
-                            it.classList.remove(key);
+                if (typeof data === 'string') {
+                    it.setAttribute('class', data);
+                }
+                else if (Array.isArray(data)) {
+                    it.setAttribute('class', data.join(' '));
+                }
+                else {
+                    for (var _i = 0, _a = Object.entries(data); _i < _a.length; _i++) {
+                        var _b = _a[_i], key = _b[0], value = _b[1];
+                        if (it instanceof HTMLElement) {
+                            if (value) {
+                                it.classList.add(key);
+                            }
+                            else {
+                                it.classList.remove(key);
+                            }
                         }
                     }
                 }
@@ -425,7 +455,7 @@ var eventManager = new (function () {
         this.procAttr(elements, attr, function (it, attribute) {
             var script = attribute;
             it.addEventListener(eventName, function (event) {
-                ScriptUtils.eval("\"use strict\"; const $event=this.__render.event;  const $target=$event.target; " + script + " ", Object.assign(obj, {
+                ScriptUtils.eval("const $event=this.__render.event;  const $target=$event.target; " + script + " ", Object.assign(obj, {
                     __render: Object.freeze({
                         event: event
                     })
@@ -439,16 +469,17 @@ var eventManager = new (function () {
             if (bind) {
                 var script_1 = attribute;
                 var params_1 = {};
+                var prefix_1 = attr + ':';
                 Object.entries(attributes).filter(function (_a) {
                     var k = _a[0]; _a[1];
-                    return k.startsWith(attr + ':');
+                    return k.startsWith(prefix_1);
                 }).forEach(function (_a) {
                     var k = _a[0], v = _a[1];
-                    params_1[k] = v;
+                    params_1[k.slice(prefix_1.length)] = v;
                 });
                 bind.split(',').forEach(function (eventName) {
                     it.addEventListener(eventName.trim(), function (event) {
-                        ScriptUtils.eval("\"use strict\"; const $params = this.__render.params; const $event=this.__render.event; const $target=$event.target;  " + script_1 + " ", Object.assign(obj, {
+                        ScriptUtils.eval("const $params = this.__render.params; const $event=this.__render.event; const $target=$event.target;  " + script_1 + " ", Object.assign(obj, {
                             __render: Object.freeze({
                                 event: event,
                                 params: params_1
@@ -1030,6 +1061,7 @@ var Shield = (function () {
     return Shield;
 }());
 
+var excludeGetSetPropertys = ['onBeforeReturnGet', 'onBeforeReturnSet', '__domrender_components', '__render', '_DomRender_isFinal', '_domRender_ref', '_rawSets', '_domRender_proxy', '_targets', '_DomRender_origin', '_DomRender_ref', '_DomRender_proxy'];
 var DomRenderProxy = (function () {
     function DomRenderProxy(_domRender_origin, target, config) {
         this._domRender_origin = _domRender_origin;
@@ -1112,14 +1144,17 @@ var DomRenderProxy = (function () {
             }
         });
     };
-    DomRenderProxy.prototype.root = function (paths, value) {
+    DomRenderProxy.prototype.root = function (paths, value, lastDoneExecute) {
         var _this = this;
+        if (lastDoneExecute === void 0) { lastDoneExecute = true; }
+        var fullPaths = [];
         if (this._domRender_ref.size > 0) {
             this._domRender_ref.forEach(function (it, key) {
                 if ('_DomRender_isProxy' in key) {
                     it.forEach(function (sit) {
                         var _a;
-                        (_a = key._DomRender_proxy) === null || _a === void 0 ? void 0 : _a.root(paths.concat(sit), value);
+                        var items = (_a = key._DomRender_proxy) === null || _a === void 0 ? void 0 : _a.root(paths.concat(sit), value, lastDoneExecute);
+                        fullPaths.push(items.join(','));
                     });
                 }
             });
@@ -1127,37 +1162,47 @@ var DomRenderProxy = (function () {
         else {
             var strings = paths.reverse();
             var fullPathStr_1 = strings.join('.');
-            var iterable = this._rawSets.get(fullPathStr_1);
-            var front = strings.slice(0, strings.length - 1).join('.');
-            var last = strings[strings.length - 1];
-            if (!isNaN(Number(last)) && Array.isArray(ScriptUtils.evalReturn('this.' + front, this._domRender_proxy))) {
-                var aIterable = this._rawSets.get(front);
-                if (aIterable) {
-                    this.render(Array.from(aIterable));
+            if (lastDoneExecute) {
+                var iterable = this._rawSets.get(fullPathStr_1);
+                var front = strings.slice(0, strings.length - 1).join('.');
+                var last = strings[strings.length - 1];
+                if (!isNaN(Number(last)) && Array.isArray(ScriptUtils.evalReturn('this.' + front, this._domRender_proxy))) {
+                    var aIterable = this._rawSets.get(front);
+                    if (aIterable) {
+                        this.render(Array.from(aIterable));
+                    }
                 }
-            }
-            else if (iterable) {
-                this.render(Array.from(iterable));
-            }
-            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);
+                else if (iterable) {
+                    this.render(Array.from(iterable));
                 }
-            });
+                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);
+                    }
+                });
+            }
+            fullPaths.push(fullPathStr_1);
         }
+        return fullPaths;
     };
     DomRenderProxy.prototype.set = function (target, p, value, receiver) {
+        var _a, _b, _c, _d;
         if (typeof p === 'string') {
             value = this.proxy(receiver, value, p);
         }
         target[p] = value;
+        var fullPath;
         if (typeof p === 'string') {
-            this.root([p], value);
+            fullPath = this.root([p], value);
+        }
+        if (('onBeforeReturnSet' in receiver) && typeof p === 'string' && !((_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.proxyExcludeOnBeforeReturnSets) !== null && _b !== void 0 ? _b : []).concat(excludeGetSetPropertys).includes(p)) {
+            (_d = (_c = receiver) === null || _c === void 0 ? void 0 : _c.onBeforeReturnSet) === null || _d === void 0 ? void 0 : _d.call(_c, p, value, fullPath);
         }
         return true;
     };
     DomRenderProxy.prototype.get = function (target, p, receiver) {
+        var _a, _b, _c, _d;
         if (p === '_DomRender_origin') {
             return this._domRender_origin;
         }
@@ -1170,11 +1215,12 @@ var DomRenderProxy = (function () {
         else {
             var it_1 = target[p];
             if (it_1 && typeof it_1 === 'object' && ('_DomRender_isProxy' in it_1) && Object.prototype.toString.call(it_1._DomRender_origin) === '[object Date]') {
-                return it_1._DomRender_origin;
+                it_1 = it_1._DomRender_origin;
             }
-            else {
-                return it_1;
+            if (('onBeforeReturnGet' in receiver) && typeof p === 'string' && !((_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.proxyExcludeOnBeforeReturnGets) !== null && _b !== void 0 ? _b : []).concat(excludeGetSetPropertys).includes(p)) {
+                (_d = (_c = receiver) === null || _c === void 0 ? void 0 : _c.onBeforeReturnGet) === null || _d === void 0 ? void 0 : _d.call(_c, p, it_1, this.root([p], it_1, false));
             }
+            return it_1;
         }
     };
     DomRenderProxy.prototype.has = function (target, p) {

package/dist/bundle.js.map

@@ -1 +1 @@
-{"version":3,"file":"bundle.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"bundle.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/lifecycle/OnBeforeReturnGet.d.ts

@@ -0,0 +1,3 @@
+export interface OnBeforeReturnGet {
+    onBeforeReturnGet(name: string, value: any, fullPath?: string[]): void;
+}

package/dist/lifecycle/OnBeforeReturnSet.d.ts

@@ -0,0 +1,3 @@
+export interface OnBeforeReturnSet {
+    onBeforeReturnSet(name: string, value: any, fullPath?: string[]): void;
+}

package/events/EventManager.js

@@ -27,7 +27,7 @@ export var eventManager = new (function () {
             document.querySelectorAll('[dr-window-event-popstate]').forEach(function (it) {
                 var script = it.getAttribute('dr-window-event-popstate');
                 if (script) {
-                    ScriptUtils.eval("\"use strict\"; const $target = this.__render.target;  " + script + " ", Object.assign(it.obj, {
+                    ScriptUtils.eval("const $target = this.__render.target;  " + script + " ", Object.assign(it.obj, {
                         __render: Object.freeze({
                             target: it
                         })
@@ -122,14 +122,28 @@ export var eventManager = new (function () {
                 script = 'return ' + script;
             }
             if (_this.isUsingThisVar(script, varName) || varName === undefined) {
-                var data = ScriptUtils.eval("\"use strict\"; const $target=this.__render.target; " + script + " ", Object.assign(obj, {
+                var data = ScriptUtils.eval("const $target=this.__render.target; " + script + " ", Object.assign(obj, {
                     __render: Object.freeze({
                         target: it
                     })
                 }));
-                for (var _i = 0, _a = Object.entries(data); _i < _a.length; _i++) {
-                    var _b = _a[_i], key = _b[0], value = _b[1];
-                    it.setAttribute(key, String(value));
+                if (typeof data === 'string') {
+                    data.split(',').forEach(function (sit) {
+                        var _a = sit.split('='), key = _a[0], value = _a[1];
+                        it.setAttribute(key.trim(), value.trim());
+                    });
+                }
+                else if (Array.isArray(data)) {
+                    data.forEach(function (sit) {
+                        var _a = sit.split('='), key = _a[0], value = _a[1];
+                        it.setAttribute(key.trim(), value.trim());
+                    });
+                }
+                else {
+                    for (var _i = 0, _a = Object.entries(data); _i < _a.length; _i++) {
+                        var _b = _a[_i], key = _b[0], value = _b[1];
+                        it.setAttribute(key, String(value));
+                    }
                 }
             }
         });
@@ -139,15 +153,23 @@ export var eventManager = new (function () {
                 script = 'return ' + script;
             }
             if (_this.isUsingThisVar(script, varName) || varName === undefined) {
-                var data = ScriptUtils.eval("\"use strict\"; const $target = this.__render.target;  " + script + " ", Object.assign(obj, {
+                var data = ScriptUtils.eval("const $target = this.__render.target;  " + script + " ", Object.assign(obj, {
                     __render: Object.freeze({
                         target: it
                     })
                 }));
-                for (var _i = 0, _a = Object.entries(data); _i < _a.length; _i++) {
-                    var _b = _a[_i], key = _b[0], value = _b[1];
-                    if (it instanceof HTMLElement) {
-                        it.style[key] = String(value);
+                if (typeof data === 'string') {
+                    it.setAttribute('style', data);
+                }
+                else if (Array.isArray(data)) {
+                    it.setAttribute('style', data.join(';'));
+                }
+                else {
+                    for (var _i = 0, _a = Object.entries(data); _i < _a.length; _i++) {
+                        var _b = _a[_i], key = _b[0], value = _b[1];
+                        if (it instanceof HTMLElement) {
+                            it.style[key] = String(value);
+                        }
                     }
                 }
             }
@@ -158,19 +180,27 @@ export var eventManager = new (function () {
                 script = 'return ' + script;
             }
             if (_this.isUsingThisVar(script, varName) || varName === undefined) {
-                var data = ScriptUtils.eval("\"use strict\"; const $target = this.$target;  " + script + " ", Object.assign(obj, {
+                var data = ScriptUtils.eval("const $target = this.$target;  " + script + " ", Object.assign(obj, {
                     __render: Object.freeze({
                         target: it
                     })
                 }));
-                for (var _i = 0, _a = Object.entries(data); _i < _a.length; _i++) {
-                    var _b = _a[_i], key = _b[0], value = _b[1];
-                    if (it instanceof HTMLElement) {
-                        if (value) {
-                            it.classList.add(key);
-                        }
-                        else {
-                            it.classList.remove(key);
+                if (typeof data === 'string') {
+                    it.setAttribute('class', data);
+                }
+                else if (Array.isArray(data)) {
+                    it.setAttribute('class', data.join(' '));
+                }
+                else {
+                    for (var _i = 0, _a = Object.entries(data); _i < _a.length; _i++) {
+                        var _b = _a[_i], key = _b[0], value = _b[1];
+                        if (it instanceof HTMLElement) {
+                            if (value) {
+                                it.classList.add(key);
+                            }
+                            else {
+                                it.classList.remove(key);
+                            }
                         }
                     }
                 }
@@ -182,7 +212,7 @@ export var eventManager = new (function () {
         this.procAttr(elements, attr, function (it, attribute) {
             var script = attribute;
             it.addEventListener(eventName, function (event) {
-                ScriptUtils.eval("\"use strict\"; const $event=this.__render.event;  const $target=$event.target; " + script + " ", Object.assign(obj, {
+                ScriptUtils.eval("const $event=this.__render.event;  const $target=$event.target; " + script + " ", Object.assign(obj, {
                     __render: Object.freeze({
                         event: event
                     })
@@ -196,16 +226,17 @@ export var eventManager = new (function () {
             if (bind) {
                 var script_1 = attribute;
                 var params_1 = {};
+                var prefix_1 = attr + ':';
                 Object.entries(attributes).filter(function (_a) {
                     var k = _a[0], v = _a[1];
-                    return k.startsWith(attr + ':');
+                    return k.startsWith(prefix_1);
                 }).forEach(function (_a) {
                     var k = _a[0], v = _a[1];
-                    params_1[k] = v;
+                    params_1[k.slice(prefix_1.length)] = v;
                 });
                 bind.split(',').forEach(function (eventName) {
                     it.addEventListener(eventName.trim(), function (event) {
-                        ScriptUtils.eval("\"use strict\"; const $params = this.__render.params; const $event=this.__render.event; const $target=$event.target;  " + script_1 + " ", Object.assign(obj, {
+                        ScriptUtils.eval("const $params = this.__render.params; const $event=this.__render.event; const $target=$event.target;  " + script_1 + " ", Object.assign(obj, {
                             __render: Object.freeze({
                                 event: event,
                                 params: params_1

package/lifecycle/OnBeforeReturnGet.d.ts

@@ -0,0 +1,3 @@
+export interface OnBeforeReturnGet {
+    onBeforeReturnGet(name: string, value: any, fullPath?: string[]): void;
+}

package/lifecycle/OnBeforeReturnGet.js

@@ -0,0 +1 @@
+export {};

package/lifecycle/OnBeforeReturnSet.d.ts

@@ -0,0 +1,3 @@
+export interface OnBeforeReturnSet {
+    onBeforeReturnSet(name: string, value: any, fullPath?: string[]): void;
+}

package/lifecycle/OnBeforeReturnSet.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dom-render",
-  "version": "1.0.45",
+  "version": "1.0.49",
   "main": "DomRender.js",
   "license": "MIT",
   "description": "dom-render",
@@ -55,7 +55,7 @@
     "bundle:watch": "rollup -c -w",
     "dev:start": "npm run start --workspace=dev",
     "dev:serve": "npm run serve --workspace=dev",
-    "npm-build": "npm run build && cp package.json dist && cp README.MD dist",
+    "npm-build": "npm run build && cp package.json dist && cp .npmignore dist && cp README.MD dist",
     "npm-publish": "npm run npm-build && npm publish ./dist",
     "tsc": "tsc",
     "tsc:watch": "rm -rf ./dist && mkdir dist && cp package.json dist && tsc --watch --sourceMap true",