dom-render 1.0.46 → 1.0.50

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,39 +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;
+        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);
         }
-        (_b = (_a = receiver) === null || _a === void 0 ? void 0 : _a.onBeforeReturnSet) === null || _b === void 0 ? void 0 : _b.call(_a, p, value);
         return true;
     };
     DomRenderProxy.prototype.get = function (target, p, receiver) {
+        var _a, _b, _c, _d;
         if (p === '_DomRender_origin') {
             return this._domRender_origin;
         }
@@ -146,6 +158,9 @@ var DomRenderProxy = (function () {
             if (it_1 && typeof it_1 === 'object' && ('_DomRender_isProxy' in it_1) && Object.prototype.toString.call(it_1._DomRender_origin) === '[object Date]') {
                 it_1 = it_1._DomRender_origin;
             }
+            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;
         }
     };

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
@@ -84,6 +85,11 @@ dr-event
 ```
 
 ## 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>
@@ -92,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>
 ```
 
 
@@ -126,9 +145,15 @@ to-be
 </select>
 ```
 
+---
+# LifeCycle
+```
+* OnInitRender
+  - onInitRender(): init render call
+```
 ---
 
-# script
+# Script
 ```typescript
 new DomRender.run(obj, target, {
   scripts: {
@@ -148,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>';
@@ -180,10 +205,183 @@ using component
     - $innerHTML: element innerHTML string
 ---
 
-# LifeCycle
+# validation
+```html
+  <div class="row mb-3">
+        <div class="col">
+            <span>아이디</span>
+            <input class="w-100" type="text" name="id" placeholder="아이디" dr-value-link="this.form.id.value" dr-event-blur="this.form.id.valid()" required/>
+            <span dr-on-init="this.form.id.msgElement" class="d-none"></span>
+        </div>
+    </div>
+    <div class="row mb-3">
+        <div class="col">
+            <span>비밀번호</span>
+            <input class="w-100" type="password" name="id" placeholder="숫자, 영문, 특수문자 조합 최소 8자~20자" dr-value-link="this.form.password.value" dr-event-blur="this.form.password.valid()" required/>
+            <span dr-on-init="this.form.password.msgElement" >password valid message section</span>
+            <input class="w-100" type="password" name="id" placeholder="비밀번호 재입력"  dr-value-link="this.form.confirmPassword" required/>
+            <span dr-class="{'d-block': this.form.password != this.form.confirmPassword, 'text-danger': this.form.password != this.form.confirmPassword}">2nd input password valid message section</span>
+        </div>
+    </div>
+    <div class="row mb-3">
+        <div class="col">
+            <span>이메일</span>
+            <input class="w-100" type="email" name="id" placeholder="이메일" dr-value-link="this.form.email" required/>
+            <span class="">2nd input password valid message section</span>
+        </div>
+    </div>
+</div>
 ```
-* OnInitRender
-  - onInitRender(): init render call
+```typescript
+class SignUp {
+ public form = new class extends Validation {
+        id = new class extends Validation {
+            public msgElement!: HTMLElement;
+            valid(): boolean {
+                let valid = false;
+                if (this.length == 0) {
+                    this.msgElement.className = 'd-block text-danger';
+                    this.msgElement.textContent = '아이디를 입력해주세요.';
+                } else if (this.length < 3 || this.length > 20) {
+                    this.msgElement.className = 'd-block text-danger';
+                    this.msgElement.textContent = '아이디는 4글자 이상 20자 미만 이어야 합니다.';
+                } else {
+                    let isExist = false;
+                    if (isExist) {
+                        this.msgElement.className = 'd-block text-danger';
+                        this.msgElement.textContent = '이미 사용중인 아이디입니다. 다른 아이디를 이용해주세요.';
+                    } else {
+                        this.msgElement.className = 'd-block text-success';
+                        this.msgElement.textContent = '사용 가능한 아이디입니다.';
+                        valid = true;
+                    }
+                }
+                return valid;
+            }
+        }();
+        password = new class extends Validation {
+            public msgElement!: HTMLElement;
+            valid(): boolean {
+                let valid = false;
+                let regExp = /^.*(?=.)(?=.*[0-9])(?=.*[a-zA-Z]).*$/;
+                const ERROR_REQUIRE_PW = '비밀번호를 입력해주세요.';
+                const ERROR_PW_LENGTH = '비밀번호는 8글자~20글자로 이루어져야 합니다.';
+                const ERROR_PW_REGEXP = '비밀번호는 숫자, 영문, 특수문자 조합으로 이루어져야 합니다.';
+                const SUCCESS_AVAILABLE_USER_PW = '사용 가능한 비밀번호입니다.';
+                if (this.length == 0) {
+                    this.msgElement.className = 'd-block text-danger';
+                    this.msgElement.textContent = ERROR_REQUIRE_PW;
+                } else if (this.length < 8 || this.length > 20) {
+                    this.msgElement.className = 'd-block text-danger';
+                    this.msgElement.textContent = ERROR_PW_LENGTH;
+                } else {
+                    if (regExp.test(this.value)) {
+                        this.msgElement.className = 'd-block text-success';
+                        this.msgElement.textContent = SUCCESS_AVAILABLE_USER_PW;
+                        valid = true;
+                    } else {
+                        this.msgElement.className = 'd-block text-danger';
+                        this.msgElement.textContent = ERROR_PW_REGEXP;
+                    }
+                }
+                return valid;
+            }
+        }();
+        confirmPassword = new class extends Validation {
+            value = '';
+            valid(): boolean {
+                return true;
+            }
+        }();
+        email = new class extends Validation {
+            value = '';
+            valid(): boolean {
+                return true;
+            }
+        }();
+        valid() {
+            return this.childValid()
+        }
+    }();
+}
+```
+
+# Detect Get, Set
+OnBeforeReturnSet
+```typescript
+export interface OnBeforeReturnSet {
+    onBeforeReturnSet(name: string, value: any, fullPath?: string[]): void;
+}
+```
+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

@@ -370,9 +370,23 @@ var eventManager = new (function () {
                         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));
+                    }
                 }
             }
         });
@@ -387,10 +401,18 @@ var eventManager = new (function () {
                         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);
+                        }
                     }
                 }
             }
@@ -406,14 +428,22 @@ var eventManager = new (function () {
                         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);
+                            }
                         }
                     }
                 }
@@ -1031,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;
@@ -1113,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(','));
                     });
                 }
             });
@@ -1128,39 +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;
+        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);
         }
-        (_b = (_a = receiver) === null || _a === void 0 ? void 0 : _a.onBeforeReturnSet) === null || _b === void 0 ? void 0 : _b.call(_a, p, value);
         return true;
     };
     DomRenderProxy.prototype.get = function (target, p, receiver) {
+        var _a, _b, _c, _d;
         if (p === '_DomRender_origin') {
             return this._domRender_origin;
         }
@@ -1175,6 +1217,9 @@ var DomRenderProxy = (function () {
             if (it_1 && typeof it_1 === 'object' && ('_DomRender_isProxy' in it_1) && Object.prototype.toString.call(it_1._DomRender_origin) === '[object Date]') {
                 it_1 = it_1._DomRender_origin;
             }
+            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;
         }
     };

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

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

package/dist/lifecycle/OnBeforeReturnSet.d.ts

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

package/dist/validations/Validation.d.ts

@@ -0,0 +1,8 @@
+export declare abstract class Validation {
+    value: string;
+    abstract valid(): boolean;
+    childValid(): boolean;
+    childInValid(): boolean;
+    get length(): number;
+    [name: string]: Validation | string | undefined | Element | any;
+}

package/events/EventManager.js

@@ -127,9 +127,23 @@ export var eventManager = new (function () {
                         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));
+                    }
                 }
             }
         });
@@ -144,10 +158,18 @@ export var eventManager = new (function () {
                         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);
+                        }
                     }
                 }
             }
@@ -163,14 +185,22 @@ export var eventManager = new (function () {
                         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);
+                            }
                         }
                     }
                 }

package/lifecycle/OnBeforeReturnGet.d.ts

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

package/lifecycle/OnBeforeReturnSet.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dom-render",
-  "version": "1.0.46",
+  "version": "1.0.50",
   "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",

package/validations/Validation.d.ts

@@ -0,0 +1,8 @@
+export declare abstract class Validation {
+    value: string;
+    abstract valid(): boolean;
+    childValid(): boolean;
+    childInValid(): boolean;
+    get length(): number;
+    [name: string]: Validation | string | undefined | Element | any;
+}

package/validations/Validation.js

@@ -0,0 +1,25 @@
+var Validation = (function () {
+    function Validation() {
+        this.value = '';
+    }
+    Validation.prototype.childValid = function () {
+        return !this.childInValid();
+    };
+    Validation.prototype.childInValid = function () {
+        var inValid = Object.entries(this).filter(function (_a) {
+            var k = _a[0], v = _a[1];
+            return (v instanceof Validation) && !v.valid();
+        });
+        return inValid.length > 0;
+    };
+    Object.defineProperty(Validation.prototype, "length", {
+        get: function () {
+            var _a, _b;
+            return (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    return Validation;
+}());
+export { Validation };