dom-render 1.0.44 → 1.0.48

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

@@ -1,7 +1,8 @@
 import { RawSet } from './RawSet';
 import { eventManager } from './events/EventManager';
 import { ScriptUtils } from './utils/script/ScriptUtils';
-import { Shield } from './Shield';
+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

@@ -1,117 +1,280 @@
-dom-render
-===
-## view template engine
-### Dom control and reorder using web component
+![Single Page Application Framworks](assets/banner.png)
+[![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
+- all internal variables are managed by proxy. (DomRenderProxy)
+---
+
+# 🚀 Quick start 
 ```shell
 npm install dom-render
 ````
+---
+# 😃 examples
+- [examples project](./example)
+--- 
+
+# 📄 Code description
+## initialized
 ```html
-<!doctype html>
-<html lang="en">
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta name="description" content="">
-    <title>dom-render</title>
-</head>
-<body id="app">
-    <h1>template</h1>
-    <h2>print</h2>
-    <div>${this.name}</div>
-    <div>${this.office.addr.first}, ${this.office.addr.last}, ${this.office.addr.street} (${this.office.name})</div>
-    <div dr="this.office.addr.street">${this.getOfficeFullAddr()}</div>
-    
-    <h2>df-if</h2>
-    <div dr-if="true"> true</div>
-    <div dr-if="this.gender==='M'"> gender: M</div>
-    
-    <h2>df-for, of</h2>
-    <div dr-for="var i = 0; i < this.friends.length; i++"> friend</div>
-    <div dr-for-of="this.friends"> ${#it#.name}</div>
-    <div dr-for="var i = 1 ; i <= 9 ; i++" dr-it="i">
-        ${#it#} *
-        <scope dr-for="var y = 1 ; y <= 9 ; y++" dr-it="y" dr-var="superIt=#it#" dr-strip="true">
-            #it# = ${var.superIt * #it#}
-        </scope>
-    </div>
-
-    <h2>df-inner-text</h2>
-    <div dr-strip="true" dr-inner-text="'<b>aa</b> <button dr-event-click=\'alert(1)\'>aa</button>'" > friend</div>
-
-    <h2>df-inner-html</h2>
-    <div dr-strip="true" dr-inner-html="'<b>aa</b> <button dr-event-click=\'alert(1)\'>aa</button>'" > friend</div>
-
-    <h1>event</h1>
-    <h2>dr-event, click, change, input, keyup, keydown</h2>
-    <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>
-    
-    <h2>dr-value, value-link</h2>
-    <div>
-        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>
-    </div>
-    
-    <h1>attribute</h1>
-    <h2>dr-attr</h2>
-    <textarea dr-attr="{rows: this.age/2, cols: this.age}"></textarea>
-    <h2>dr-style</h2>
-    <div dr-style="{fontSize: this.age+'px'}"> style </div>
-    <button dr-event-click="this.age = Math.floor(Math.random() * 20)"> change age</button>
-    
-    <h1>lifeCycle</h1>
-    <h2>dr-on-init</h2>
-    <div>
-        <input dr-on-init="this.onInitElement" value="init-test-value">
-    </div>
-    <script src="./src/index.ts"></script>
-</body>
-</html>
+<!doctype html><html lang="en"><body id="app"></body></html>
 ```
 ```typescript
-class User {
-    name: string;
-    age: number;
-    gender: string;
-    friends: User[];
-    office = {
-        name: 'guro',
-        addr: {
-            first: 'guro',
-            last: ' digital',
-            street: ' complex'
-        }
-    }
+const target = document.querySelector('#app');
+const data = DomRender.run({name: 'my name is dom-render'}, target);
+data.name = 'modify name';
+```
+## print and call
+```html
+<div>${this.name}</div>
+<div>${this.office.addr.first}, ${this.office.addr.last}, ${this.office.addr.street} (${this.office.name})</div>
+<div dr="this.office.addr.street">${this.getOfficeFullAddr()}</div>
+```
+## dr-if
+```html
+<div dr-if="true">true</div>
+<div dr-if="this.gender==='M'"> gender: M</div>
+```
+## dr-for, dr-for-of
+```html
+<div dr-for="var i = 0; i < this.friends.length; i++"> friend</div>
+<div dr-for-of="this.friends"> ${#it#.name}</div>
+<div dr-for="var i = 1 ; i <= 9 ; i++" dr-it="i">
+    ${#it#} *
+    <scope dr-for="var y = 1 ; y <= 9 ; y++" dr-it="y" dr-var="superIt=#it#" dr-strip="true">
+        #it# = ${var.superIt * #it#}
+    </scope>
+</div>
+```
 
-    constructor(name: string, age: number, gender: string, friends: User[] = []) {
-        this.name = name;
-        this.age = age;
-        this.gender = gender;
-        this.friends = friends;
-    }
+## dr-inner-text, dr-inner-html
+```html
+<div dr-inner-text="'<b>aa</b> <button dr-event-click=\'alert(1)\'>aa</button>'"> friend</div>
+<div dr-inner-html="'<b>aa</b> <button dr-event-click=\'alert(1)\'>aa</button>'"> friend</div>
+```
+
+## event
+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
+```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>
+```
+
+## dr-attr
+```html
+<textarea dr-attr="{rows: this.age/2, cols: this.age}"></textarea>
+```
+
+## 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="{'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>
+```
+
+
+## dr-strip
+as-is
+```html
+<div dr-strip="true"><span>hello</span></div>
+```
+to-be
+```html
+<span>hello</span>
+```
+
+## dr-on-init
+```html
+<input dr-on-init="this.onInitElement">
+```
 
-    onInitElement(e: HTMLInputElement) {
-        console.log('inputElement onInit', e.value)
+## dr-before, dr-after
+```html
+<div dr-before="console.log('process before')" dr-after="console.log('process after')"></div>
+```
+## dr-complete
+```html
+<select dr-value-link="this.currentContry" dr-event-change="this.contryChange($event)">
+    <option dr-for-of="this.languages" dr-value="#it#.key" dr-complete="this.currentContry='defaultValue'">${#it#.title}</option>
+</select>
+```
+
+---
+# LifeCycle
+```
+* OnInitRender
+  - onInitRender(): init render call
+```
+---
+
+# Script
+```typescript
+new DomRender.run(obj, target, {
+  scripts: {
+    concat: function (head: string, tail: string) {
+      return head + tail; 
     }
+  }
+});
+```
+using script
+```typescript
+const data = config.scripts.concat('head', 'tail')
+```
+```html
+<div>${$scripts.concat('head', 'tail')}</div>
+<div dr-if="$scripts.concat('wow', 'good') === 'wowgood'"> is wowgood</div>
+```
 
-    getOfficeFullAddr() {
-        return `${this.office.addr.first}, ${this.office.addr.last}, ${this.office.addr.street} (${this.office.name})`
+---
+# Component
+```typescript
+export namespace Profile {
+  export const templat = '<div>aaaaa${this.name}aaaaa </div>';
+  export const styles = ['p {color: red}', 'div {margin: ${this.margin} + \'px\' }'];
+  export class Component {
+    public name = 'default name';
+    public margin = 5;
+    public say() {
+        console.log('say!~')
     }
+  }
+}
+
+new DomRender.run(obj, target, {
+  targetElements: [
+    RawSet.createComponentTargetElement('my-element', (e, o, r) => new Profile.Component(), Profile.templat, Profile.styles, scripts)
+  ],
+});
+```
+using component
+```html
+<my-element dr-on-init="$component.say();"></my-element>
+```
+- attribute
+  - dr-on-init: component created init call script
+    - $component: component  instance
+    - $element: element instance
+    - $attribute: element attribute object
+    - $innerHTML: element innerHTML string
+---
 
-    sayName() {
-        console.log(this.name)
+# 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);
     }
 }
-const friends = [new User('friend1', 15, 'M'), new User('friend2', 16, 'F')]
-const target = document.querySelector('#app');
-if (target) {
-    const user = DomRender.run(new User('parent', 10, 'M', friends), target);
+```
+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
+* MIT
+* visualkhh@gmail.com

package/RawSet.js

@@ -462,6 +462,7 @@ var RawSet = (function () {
             styles: styles,
             template: template,
             callBack: function (element, obj, rawSet) {
+                var _a;
                 if (!obj.__domrender_components) {
                     obj.__domrender_components = {};
                 }
@@ -489,7 +490,8 @@ var RawSet = (function () {
                     }));
                 }
                 var fag = document.createDocumentFragment();
-                element.innerHTML = template;
+                var innerHTML = ((_a = styles === null || styles === void 0 ? void 0 : styles.map(function (it) { return "<style>" + it + "</style>"; })) !== null && _a !== void 0 ? _a : []).join(' ') + (template !== null && template !== void 0 ? template : '');
+                element.innerHTML = innerHTML;
                 fag.append(RawSet.drThisCreate(element, "this.__domrender_components." + componentKey, '', true, obj));
                 return fag;
             }

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;