npm - dom-render - Versions diffs - 1.0.73 → 1.0.76 - Mend

dom-render 1.0.73 → 1.0.76

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (159) hide show

package/Config.d.ts +38 -36
package/Config.js +2 -2
package/DomRender.d.ts +28 -4
package/DomRender.js +90 -39
package/DomRenderProxy.d.ts +29 -29
package/DomRenderProxy.js +338 -327
package/README.MD +638 -511
package/RawSet.d.ts +140 -117
package/RawSet.js +765 -882
package/components/ComponentSet.d.ts +7 -0
package/components/ComponentSet.js +14 -0
package/dist/bundle.js +3796 -3133
package/events/EventManager.d.ts +47 -47
package/events/EventManager.js +499 -499
package/iterators/Range.d.ts +22 -22
package/iterators/Range.js +65 -65
package/lifecycle/OnBeforeReturnGet.d.ts +3 -3
package/lifecycle/OnBeforeReturnGet.js +2 -2
package/lifecycle/OnBeforeReturnSet.d.ts +3 -3
package/lifecycle/OnBeforeReturnSet.js +2 -2
package/lifecycle/OnCreateRender.d.ts +3 -3
package/lifecycle/OnCreateRender.js +2 -2
package/lifecycle/OnDestroyRender.d.ts +4 -0
package/lifecycle/OnDestroyRender.js +2 -0
package/lifecycle/OnInitRender.d.ts +7 -7
package/lifecycle/OnInitRender.js +2 -2
package/lifecycle/OnProxyDomRender.d.ts +4 -0
package/lifecycle/OnProxyDomRender.js +2 -0
package/managers/RenderManager.d.ts +3 -3
package/managers/RenderManager.js +18 -18
package/messenger/DefaultMessenger.d.ts +3 -0
package/messenger/DefaultMessenger.js +27 -0
package/messenger/Messenger.d.ts +78 -0
package/messenger/Messenger.js +201 -0
package/operators/Appender.d.ts +7 -12
package/operators/Appender.js +32 -39
package/operators/AttrExpresion.d.ts +4 -0
package/operators/AttrExpresion.js +68 -0
package/operators/Dr.d.ts +4 -0
package/operators/Dr.js +62 -0
package/operators/DrAppender.d.ts +4 -0
package/operators/DrAppender.js +65 -0
package/operators/DrFor.d.ts +4 -0
package/operators/DrFor.js +62 -0
package/operators/DrForOf.d.ts +4 -0
package/operators/DrForOf.js +65 -0
package/operators/DrForm.d.ts +4 -0
package/operators/DrForm.js +100 -0
package/operators/DrIf.d.ts +4 -0
package/operators/DrIf.js +72 -0
package/operators/DrInnerHTML.d.ts +4 -0
package/operators/DrInnerHTML.js +60 -0
package/operators/DrInnerText.d.ts +4 -0
package/operators/DrInnerText.js +58 -0
package/operators/DrPre.d.ts +4 -0
package/operators/DrPre.js +30 -0
package/operators/DrRepeat.d.ts +4 -0
package/operators/DrRepeat.js +63 -0
package/operators/DrTargetAttr.d.ts +4 -0
package/operators/DrTargetAttr.js +55 -0
package/operators/DrTargetElement.d.ts +4 -0
package/operators/DrTargetElement.js +65 -0
package/operators/DrThis.d.ts +4 -0
package/operators/DrThis.js +59 -0
package/operators/OperatorRender.d.ts +41 -0
package/operators/OperatorRender.js +21 -0
package/package.json +94 -94
package/routers/HashRouter.d.ts +9 -9
package/routers/HashRouter.js +53 -53
package/routers/PathRouter.d.ts +9 -9
package/routers/PathRouter.js +52 -52
package/routers/Router.d.ts +25 -22
package/routers/Router.js +116 -94
package/types/Types.d.ts +14 -14
package/types/Types.js +36 -36
package/utils/clipboard/ClipBoardUtils.d.ts +6 -6
package/utils/clipboard/ClipBoardUtils.js +25 -25
package/utils/dom/DomUtils.d.ts +13 -13
package/utils/dom/DomUtils.js +47 -47
package/utils/location/LocationUtils.d.ts +16 -16
package/utils/location/LocationUtils.js +57 -57
package/utils/node/NodeUtils.d.ts +10 -10
package/utils/node/NodeUtils.js +27 -27
package/utils/random/RandomUtils.d.ts +7 -7
package/utils/random/RandomUtils.js +47 -47
package/utils/script/ScriptUtils.d.ts +14 -14
package/utils/script/ScriptUtils.js +89 -89
package/utils/storage/StorageUtils.d.ts +9 -9
package/utils/storage/StorageUtils.js +48 -48
package/utils/string/StringUtils.d.ts +5 -5
package/utils/string/StringUtils.js +41 -41
package/utils/valid/ValidUtils.d.ts +10 -10
package/utils/valid/ValidUtils.js +78 -78
package/validators/AllCheckedValidatorArray.d.ts +6 -6
package/validators/AllCheckedValidatorArray.js +32 -32
package/validators/AllUnCheckedValidatorArray.d.ts +6 -6
package/validators/AllUnCheckedValidatorArray.js +32 -32
package/validators/CheckedValidator.d.ts +5 -5
package/validators/CheckedValidator.js +32 -32
package/validators/CountEqualsCheckedValidatorArray.d.ts +7 -7
package/validators/CountEqualsCheckedValidatorArray.js +34 -34
package/validators/CountEqualsUnCheckedValidatorArray.d.ts +7 -7
package/validators/CountEqualsUnCheckedValidatorArray.js +34 -34
package/validators/CountGreaterThanCheckedValidatorArray.d.ts +7 -7
package/validators/CountGreaterThanCheckedValidatorArray.js +34 -34
package/validators/CountGreaterThanEqualsCheckedValidatorArray.d.ts +7 -7
package/validators/CountGreaterThanEqualsCheckedValidatorArray.js +34 -34
package/validators/CountGreaterThanEqualsUnCheckedValidatorArray.d.ts +7 -7
package/validators/CountGreaterThanEqualsUnCheckedValidatorArray.js +34 -34
package/validators/CountGreaterThanUnCheckedValidatorArray.d.ts +7 -7
package/validators/CountGreaterThanUnCheckedValidatorArray.js +34 -34
package/validators/CountLessThanCheckedValidatorArray.d.ts +7 -7
package/validators/CountLessThanCheckedValidatorArray.js +34 -34
package/validators/CountLessThanEqualsCheckedValidatorArray.d.ts +7 -7
package/validators/CountLessThanEqualsCheckedValidatorArray.js +34 -34
package/validators/CountLessThanEqualsUnCheckedValidatorArray.d.ts +7 -7
package/validators/CountLessThanEqualsUnCheckedValidatorArray.js +34 -34
package/validators/CountLessThanUnCheckedValidatorArray.d.ts +7 -7
package/validators/CountLessThanUnCheckedValidatorArray.js +34 -34
package/validators/CountUnCheckedValidatorArray.d.ts +7 -7
package/validators/CountUnCheckedValidatorArray.js +34 -34
package/validators/EmptyValidator.d.ts +5 -5
package/validators/EmptyValidator.js +33 -33
package/validators/ExcludeCheckedValidatorArray.d.ts +8 -8
package/validators/ExcludeCheckedValidatorArray.js +41 -41
package/validators/FormValidator.d.ts +7 -7
package/validators/FormValidator.js +37 -37
package/validators/IncludeCheckedValidatorArray.d.ts +8 -8
package/validators/IncludeCheckedValidatorArray.js +41 -41
package/validators/MultipleValidator.d.ts +8 -8
package/validators/MultipleValidator.js +48 -48
package/validators/NonPassValidator.d.ts +5 -5
package/validators/NonPassValidator.js +31 -31
package/validators/NotEmptyValidator.d.ts +5 -5
package/validators/NotEmptyValidator.js +34 -34
package/validators/NotRegExpTestValidator.d.ts +6 -6
package/validators/NotRegExpTestValidator.js +42 -42
package/validators/PassValidator.d.ts +5 -5
package/validators/PassValidator.js +31 -31
package/validators/RegExpTestValidator.d.ts +6 -6
package/validators/RegExpTestValidator.js +43 -43
package/validators/RequiredValidator.d.ts +5 -5
package/validators/RequiredValidator.js +33 -33
package/validators/UnCheckedValidator.d.ts +5 -5
package/validators/UnCheckedValidator.js +32 -32
package/validators/ValidMultipleValidator.d.ts +9 -9
package/validators/ValidMultipleValidator.js +34 -34
package/validators/ValidValidator.d.ts +6 -6
package/validators/ValidValidator.js +33 -33
package/validators/ValidValidatorArray.d.ts +7 -7
package/validators/ValidValidatorArray.js +33 -33
package/validators/Validator.d.ts +57 -57
package/validators/Validator.js +242 -242
package/validators/ValidatorArray.d.ts +17 -17
package/validators/ValidatorArray.js +99 -99
package/validators/ValueEqualsValidator.d.ts +6 -6
package/validators/ValueEqualsValidator.js +33 -33
package/validators/ValueNotEqualsValidator.d.ts +6 -6
package/validators/ValueNotEqualsValidator.js +33 -33

package/README.MD CHANGED Viewed

@@ -1,511 +1,638 @@
-DOM-RENDER
-===
-[![typescript](https://img.shields.io/badge/-npm-black?logo=npm)](https://www.npmjs.com/package/dom-render) [![license](https://img.shields.io/badge/license-MIT-green)](LICENSE.md)
-* view template engine
-* Dom control and reorder and render
-* all internal variables are managed by proxy. (DomRenderProxy)
-# 🚀 Quick start
-```html
-<script src="https://visualkhh.github.io/dom-render/cdn/dom-render@1.0.73.js"></script>
-```
-```html
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <title>Title</title>
-</head>
-<body id="app">
-${this.name}$
-<script src="https://visualkhh.github.io/dom-render/cdn/dom-render@1.0.73.js"></script>
-<script>
-  let data = {
-    name: 'my name is dom-render'
-  };
-  data = DomRender.run(data , document.querySelector('#app'));
-</script>
-</body>
-</html>
-```
-# 😃 examples
-- [examples](./examples)
-## Expression
-<details>
-  <summary>${...}$, #{...}# <strong>🔻(click)</strong></summary>
-### ${}$ innerTEXT, #{}# innerHTML
-```html
-<body id="app">
-${this.name}$  <!-- outout: <i>my name is dom-render</i> -->
-#{this.name}# <!-- outout text is italic: my name is dom-render -->
-<script>
-  let data = {
-    name: '<i>my name is dom-render</i>'
-  };
-  data = DomRender.run(data , document.querySelector('#app'));
-</script>
-</body>
-```
-</details>
-# dom-render attributes
-## control, print Statement
-<details>
-  <summary>dr-if<strong>🔻(click)</strong></summary>
-### if element render
-```html
-<body id="app">
-  <div dr-if="true">true</div>  <!-- render -->
-  <div dr-if="this.gender === 'M'">gender: M</div> <!-- No Render -->
-<script>
-  let data = {
-    gender: 'F'
-  };
-  data = DomRender.run(data , document.querySelector('#app'));
-</script>
-</body>
-```
-</details>
-<details>
-  <summary>dr-for, dr-for-of<strong>🔻(click)</strong></summary>
-```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-of="$range(10, 20)"><div>${#it#}$</div><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>
-```
-</details>
-<details>
-  <summary>dr-repeat<strong>🔻(click)</strong></summary>
-```html
-<div dr-repeat="10"><div>#it#</div></div>
-<div dr-repeat="$range(10, 20)"><div>#it#</div></div>
-<div dr-repeat="$range(10, 20, 5)"><div>#it#</div></div>
-<div dr-repeat="$range('10..5, 2')"><div>#it#</div></div>
-```
-</details>
-<details>
-  <summary>dr-inner-text, dr-inner-html<strong>🔻(click)</strong></summary>
-```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>
-```
-</details>
-## event
-<details>
-  <summary>dr-event-(name)<strong>🔻(click)</strong></summary>
-* 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>
-```
-</details>
-<details>
-  <summary>dr-window-event-popstate<strong>🔻(click)</strong></summary>
-* ref: window
-* variable: $target
-```html
-window-event-popstate: <input type="text" dr-window-event-popstate="alert(this.name)"><br>
-```
-</details>
-<details>
-  <summary>dr-event<strong>🔻(click)</strong></summary>
-* other event
-* ref: element
-* variable: $params, $event
-```html
-<input dr-event:bind='eventName1, eventName2' dr-event="console.log('event', $params, $event)"  type="text">
-```
-</details>
-## value
-<details>
-  <summary>dr-value, value-link<strong>🔻(click)</strong></summary>
-* 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>
-```
-</details>
-## other
-<details>
-  <summary>dr-attr<strong>🔻(click)</strong></summary>
-```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>
-```
-</details>
-<details>
-  <summary>dr-class<strong>🔻(click)</strong></summary>
-```html
-<div dr-class="{big: this.age > 50, red: this.age > 50}"></div>
-<div dr-class="'big yellow ' + (this.age > 50 ? 'old' : 'young')"></div>
-<div dr-class="['small', 'yellow']"></div>
-```
-</details>
-<details>
-  <summary>dr-style<strong>🔻(click)</strong></summary>
-```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>
-```
-</details>
-<details>
-  <summary>dr-strip<strong>🔻(click)</strong></summary>
-```html
-<div dr-strip="true"><span>hello</span></div> <!-- output html : <span>hello</span> -->
-```
-</details>
-<details>
-  <summary>dr-before, dr-after<strong>🔻(click)</strong></summary>
-```html
-<div dr-before="console.log('process before')" dr-after="console.log('process after')"></div>
-```
-</details>
-<details>
-  <summary>dr-complete<strong>🔻(click)</strong></summary>
-```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>
-```
-</details>
-## dr-form
-<details>
-  <summary>form<strong>🔻(click)</strong></summary>
-* event: change
-* modify change: dr-form:event="input"
-```html
-<body id="app">
-<form dr-form="this.form" dr-event-submit="this.submit(); $event.preventDefault();">
-  name: <input name="name">
-  age: <input name="age">
-  <button type="submit">submit</button>
-</form>
-<script>
-  let data = {
-    form: {},
-    submit() {
-      console.log(this.form);
-    }
-  };
-  data = DomRender.run(data , document.querySelector('#app'));
-</script>
-</body>
-<!-- 💥 submit call -->
-<!-- console: {name: 'name data', age: 'age data'}  -->
-```
-</details>
-<details>
-  <summary>validator<strong>🔻(click)</strong></summary>
-```html
-<body id="app">
-<form dr-form="this.form" dr-event-submit="this.submit(); $event.preventDefault();">
-    name: <input name="name">
-    age: <input name="age">
-    <button type="submit">submit</button>
-</form>
-<script>
-    const form = new FormValidator();
-    form.name = new NotEmptyValidator();
-    form.age = new NotEmptyValidator();
-    let data = {
-        form,
-        submit() {
-            if (this.form.valid()){
-                console.log('valid');
-            } else {
-                console.log('inValid');
-            }
-        }
-    };
-    data = DomRender.run(data , document.querySelector('#app'));
-</script>
-</body>
-```
-validator
-- Validator (abstract)
-- ValidatorArray (abstract)
-- AllCheckedValidatorArray
-- AllUnCheckedValidatorArray
-- CheckedValidator
-- CountEqualsCheckedValidatorArray
-- CountEqualsUnCheckedValidatorArray
-- CountGreaterThanCheckedValidatorArray
-- CountGreaterThanEqualsCheckedValidatorArray
-- CountGreaterThanEqualsUnCheckedValidatorArray
-- CountGreaterThanUnCheckedValidatorArray
-- CountLessThanCheckedValidatorArray
-- CountLessThanEqualsCheckedValidatorArray
-- CountLessThanEqualsUnCheckedValidatorArray
-- CountLessThanUnCheckedValidatorArray
-- CountUnCheckedValidatorArray
-- EmptyValidator
-- ExcludeCheckedValidatorArray
-- FormValidator
-- IncludeCheckedValidatorArray
-- MultipleValidator
-- NonPassValidator
-- NotEmptyValidator
-- NotRegExpTestValidator
-- PassValidator
-- RegExpTestValidator
-- RequiredValidator
-- UnCheckedValidator
-- ValidMultipleValidator
-- ValidValidator
-- ValidValidatorArray
-- ValueEqualsValidator
-- ValueNotEqualsValidator
-</details>
-## Route
-<details>
-  <summary>Route<strong>🔻(click)</strong></summary>
-- [examples](./examples/router)
-* config routerType: 'hash' | 'path'  (default: 'hash')
-```typescript
-// Config
-const config: Config = {
-  window
-};
-config.targetElements = [
-  RawSet.createComponentTargetElement('page-main', (e, o, r) => new Main(), MainTemplate, undefined, config),
-  RawSet.createComponentTargetElement('page-second', (e, o, r) => new Second(), SecondTemplate, undefined, config),
-  RawSet.createComponentTargetElement('page-detail', (e, o, r) => new Detail(), DetailTemplate, undefined, config)
-];
-config.routerType = 'hash';
-const data = DomRender.run(new Data(), document.querySelector('#app')!, config);
-```
-```html
-<header>
-    <button dr-event-click="$router.go('/')">main</button>
-    <button dr-event-click="$router.go('/second', {secondata: 555})">second</button>
-    <button dr-event-click="$router.go('/detail/25?name=zzz')">detail</button>
-  </div>
-</header>
-<main>
-  <page-main dr-if="$router.test('/')"></page-main>
-  <page-second dr-if="$router.test('/second')"></page-second>
-  <page-detail url='/detail/{id:[0-9]+}' dr-if="$router.test($attribute.url)" dr-on-create="$router.getRouteData($attribute.url)"></page-detail>
-</main>
-```
-```typescript
-import {RouteData} from 'dom-render/routers/Router';
-import {OnCreateRender} from 'dom-render/lifecycle/OnCreateRender';
-export class Detail implements OnCreateRender {
-    name = 'Detail';
-    onCreateRender(routeData: RouteData) {
-        console.log('routeData->', routeData);
-    }
-}
-```
-```typescript
-// RouteData type
-type RouteData = {
-  path: string;
-  url: string;
-  data?: any;
-  searchParams: URLSearchParams;
-  pathData?: any;
-}
-```
-</details>
-## Class
-<details>
-  <summary>Range<strong>🔻(click)</strong></summary>
-```javascript
-const range = new Range(100,55, 10);
-for (let data of new Range(100,55, 10)) {
-  console.log(data);
-}
-const rangeArray = new Range(100,55, 10).toArray();
-```
-</details>
-## Detect Get, Set
-<details>
-  <summary>Method Proxy<strong>🔻(click)</strong></summary>
-### 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']
----
-### 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;
-}
-```
-</details>
-## 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({...})}
-```
----
-## 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>
-```
----
-# Component
-```typescript
-const templat = '<div>aaaaa${this.name}aaaaa </div>';
-const styles = ['p {color: red}', 'div {margin: ${this.margin} + \'px\' }'];
-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 Component(), templat, styles, config)
-  ],
-});
-```
-using component
-```html
-<my-element dr-on-component-init="$component.say();"></my-element>
-```
-- attribute
-  - dr-on-component-init: component created init call script
-    - $component: component  instance
-    - $element: element instance
-    - $attribute: element attribute object
-    - $innerHTML: element innerHTML string
----
-# License
-* MIT
-* visualkhh@gmail.com
+DOM-RENDER
+===
+[![typescript](https://img.shields.io/badge/-npm-black?logo=npm)](https://www.npmjs.com/package/dom-render) [![license](https://img.shields.io/badge/license-MIT-green)](LICENSE.md)
+* view template engine
+* Dom control and reorder and render
+* all internal variables are managed by proxy. (DomRenderProxy)
+# 🚀 Quick start
+```html
+<script src="https://cdn.jsdelivr.net/npm/dom-render@1.0.75/dist/bundle.js"></script>
+```
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Title</title>
+</head>
+<body id="app">
+${this.name}$
+<script src="https://cdn.jsdelivr.net/npm/dom-render@1.0.74/dist/bundle.js"></script>
+<script>
+  let data = {
+    name: 'my name is dom-render'
+  };
+  data = DomRender.run(data , document.querySelector('#app'));
+</script>
+</body>
+</html>
+```
+# 😃 examples
+- [examples](./examples)
+## Expression
+<details>
+  <summary>${...}$, #{...}# <strong>🔻(click)</strong></summary>
+### ${}$ innerTEXT, #{}# innerHTML
+```html
+<body id="app">
+${this.name}$  <!-- outout: <i>my name is dom-render</i> -->
+#{this.name}# <!-- outout text is italic: my name is dom-render -->
+<script>
+  let data = {
+    name: '<i>my name is dom-render</i>'
+  };
+  data = DomRender.run(data , document.querySelector('#app'));
+</script>
+</body>
+```
+</details>
+# dom-render attributes
+## attribute change, bind
+<details>
+  <summary>attribute<strong>🔻(click)</strong></summary>
+### attribute
+```html
+<body id="app">
+  <input type="text" value="${this.name}$" style="${'color: '+this.color}$">
+  <button dr-event-click="this.changeData();">change</button>
+</body>
+```
+```typescript
+class Data {
+    name = 'my name is dom-render';
+    color = '#ff0000';
+    changeData() {
+        this.name = RandomUtils.getRandomString(10);
+        this.color = RandomUtils.getRandomColor();
+    }
+}
+const data = DomRender.run(new Data(), document.querySelector('#app')!);
+```
+</details>
+## control, print Statement
+<details>
+  <summary>dr-if<strong>🔻(click)</strong></summary>
+### if element render
+```html
+<body id="app">
+  <div dr-if="true">true</div>  <!-- render -->
+  <div dr-if="this.gender === 'M'">gender: M</div> <!-- No Render -->
+<script>
+  let data = {
+    gender: 'F'
+  };
+  data = DomRender.run(data , document.querySelector('#app'));
+</script>
+</body>
+```
+</details>
+<details>
+  <summary>dr-for, dr-for-of<strong>🔻(click)</strong></summary>
+```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-of="$range(10, 20)"><div>${#it#}$</div><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>
+```
+</details>
+<details>
+  <summary>dr-repeat<strong>🔻(click)</strong></summary>
+```html
+<div dr-repeat="10"><div>#it#</div></div>
+<div dr-repeat="$range(10, 20)"><div>#it#</div></div>
+<div dr-repeat="$range(10, 20, 5)"><div>#it#</div></div>
+<div dr-repeat="$range('10..5, 2')"><div>#it#</div></div>
+```
+</details>
+<details>
+  <summary>dr-inner-text, dr-inner-html<strong>🔻(click)</strong></summary>
+```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>
+```
+</details>
+## event
+<details>
+  <summary>dr-event-(name)<strong>🔻(click)</strong></summary>
+* 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>
+```
+</details>
+<details>
+  <summary>dr-window-event-popstate<strong>🔻(click)</strong></summary>
+* ref: window
+* variable: $target
+```html
+window-event-popstate: <input type="text" dr-window-event-popstate="alert(this.name)"><br>
+```
+</details>
+<details>
+  <summary>dr-event<strong>🔻(click)</strong></summary>
+* other event
+* ref: element
+* variable: $params, $event
+```html
+<input dr-event:bind='eventName1, eventName2' dr-event="console.log('event', $params, $event)"  type="text">
+```
+</details>
+## value
+<details>
+  <summary>dr-value, value-link<strong>🔻(click)</strong></summary>
+* 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>
+```
+</details>
+## other
+<details>
+  <summary>dr-attr<strong>🔻(click)</strong></summary>
+```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>
+```
+</details>
+<details>
+  <summary>dr-class<strong>🔻(click)</strong></summary>
+```html
+<div dr-class="{big: this.age > 50, red: this.age > 50}"></div>
+<div dr-class="'big yellow ' + (this.age > 50 ? 'old' : 'young')"></div>
+<div dr-class="['small', 'yellow']"></div>
+```
+</details>
+<details>
+  <summary>dr-style<strong>🔻(click)</strong></summary>
+```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>
+```
+</details>
+<details>
+  <summary>dr-strip<strong>🔻(click)</strong></summary>
+```html
+<div dr-strip="true"><span>hello</span></div> <!-- output html : <span>hello</span> -->
+```
+</details>
+<details>
+  <summary>dr-before, dr-after<strong>🔻(click)</strong></summary>
+```html
+<div dr-before="console.log('process before')" dr-after="console.log('process after')"></div>
+```
+</details>
+<details>
+  <summary>dr-complete<strong>🔻(click)</strong></summary>
+```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>
+```
+</details>
+## dr-form
+<details>
+  <summary>form<strong>🔻(click)</strong></summary>
+* event: change
+* modify change: dr-form:event="input"
+```html
+<body id="app">
+<form dr-form="this.form" dr-event-submit="this.submit(); $event.preventDefault();">
+  name: <input name="name">
+  age: <input name="age">
+  <button type="submit">submit</button>
+</form>
+<script>
+  let data = {
+    form: {},
+    submit() {
+      console.log(this.form);
+    }
+  };
+  data = DomRender.run(data , document.querySelector('#app'));
+</script>
+</body>
+<!-- 💥 submit call -->
+<!-- console: {name: 'name data', age: 'age data'}  -->
+```
+</details>
+<details>
+  <summary>validator<strong>🔻(click)</strong></summary>
+```html
+<body id="app">
+<form dr-form="this.form" dr-event-submit="this.submit(); $event.preventDefault();">
+    name: <input name="name">
+    age: <input name="age">
+    <button type="submit">submit</button>
+</form>
+<script>
+    const form = new FormValidator();
+    form.name = new NotEmptyValidator();
+    form.age = new NotEmptyValidator();
+    let data = {
+        form,
+        submit() {
+            if (this.form.valid()){
+                console.log('valid');
+            } else {
+                console.log('inValid');
+            }
+        }
+    };
+    data = DomRender.run(data , document.querySelector('#app'));
+</script>
+</body>
+```
+validator
+- Validator (abstract)
+- ValidatorArray (abstract)
+- AllCheckedValidatorArray
+- AllUnCheckedValidatorArray
+- CheckedValidator
+- CountEqualsCheckedValidatorArray
+- CountEqualsUnCheckedValidatorArray
+- CountGreaterThanCheckedValidatorArray
+- CountGreaterThanEqualsCheckedValidatorArray
+- CountGreaterThanEqualsUnCheckedValidatorArray
+- CountGreaterThanUnCheckedValidatorArray
+- CountLessThanCheckedValidatorArray
+- CountLessThanEqualsCheckedValidatorArray
+- CountLessThanEqualsUnCheckedValidatorArray
+- CountLessThanUnCheckedValidatorArray
+- CountUnCheckedValidatorArray
+- EmptyValidator
+- ExcludeCheckedValidatorArray
+- FormValidator
+- IncludeCheckedValidatorArray
+- MultipleValidator
+- NonPassValidator
+- NotEmptyValidator
+- NotRegExpTestValidator
+- PassValidator
+- RegExpTestValidator
+- RequiredValidator
+- UnCheckedValidator
+- ValidMultipleValidator
+- ValidValidator
+- ValidValidatorArray
+- ValueEqualsValidator
+- ValueNotEqualsValidator
+</details>
+## Route
+<details>
+  <summary>Route<strong>🔻(click)</strong></summary>
+- [examples](./examples/router)
+* config routerType: 'hash' | 'path' | 'none'  (default: 'none')
+```typescript
+// Config
+const config: Config = {
+  window
+};
+DomRender.addComponent(config, {type: Main, tagName: 'page-main'}, {template: MainTemplate})
+        .add({type: Second, tagName: 'page-second'}, {template: SecondTemplate})
+        .add({type: Detail, tagName: 'page-detail'}, {template: DetailTemplate});
+config.routerType = 'hash';
+config.routerType = 'hash';
+const data = DomRender.run(new Data(), document.querySelector('#app')!, config);
+```
+```html
+<header>
+    <button dr-event-click="$router.go('/')">main</button>
+    <button dr-event-click="$router.go('/second', {secondata: 555})">second</button>
+    <button dr-event-click="$router.go('/detail/25?name=zzz')">detail</button>
+  </div>
+</header>
+<main>
+  <page-main dr-if="$router.test('/')"></page-main>
+  <page-second dr-if="$router.test('/second')"></page-second>
+  <page-detail url='/detail/{id:[0-9]+}' dr-if="$router.test($attribute.url)" dr-on-create="$router.getRouteData($attribute.url)"></page-detail>
+</main>
+```
+```typescript
+import {RouteData} from 'dom-render/routers/Router';
+import {OnCreateRender} from 'dom-render/lifecycle/OnCreateRender';
+export class Detail implements OnCreateRender {
+    name = 'Detail';
+    onCreateRender(routeData: RouteData) {
+        console.log('routeData->', routeData);
+    }
+}
+```
+```typescript
+// RouteData type
+type RouteData = {
+  path: string;
+  url: string;
+  data?: any;
+  searchParams: URLSearchParams;
+  pathData?: any;
+}
+```
+</details>
+## Messenger (Data transmission)
+* publish, subscribe
+<details>
+  <summary>publish<strong>🔻(click)</strong></summary>
+```typescript
+export class Home implements OnProxyDomRender {
+    private channel?: Channel;
+  sendIndexMessage() {
+    const rtn = this.channel?.publish(Index, {
+      name: this.name,
+      age: this.age,
+      title: this.title
+    });
+    console.log('sendIndexMessage return value: ', rtn);
+  }
+    onProxyDomRender({messenger}: Config): void {
+        this.channel = messenger?.createChannel(Home);
+    }
+}
+```
+</details>
+<details>
+  <summary>subscribe<strong>🔻(click)</strong></summary>
+```typescript
+class Index implements OnProxyDomRender {
+    onProxyDomRender({messenger}: Config): void {
+      messenger?.createChannel(this).filter((data) => (data.age ?? 0) > 5).subscribe((data) => {
+        this.rcvData = data;
+        return {data: 'good', action: 'actionGood'}
+      });
+      // messenger?.createChannel(this).subscribe((data) => {
+      //     this.rcvData = data;
+      //     return {data: 'good', action: 'actionGood'}
+      // });
+    }
+}
+````
+</details>
+## Class
+<details>
+  <summary>Range<strong>🔻(click)</strong></summary>
+```javascript
+const range = new Range(100,55, 10);
+for (let data of new Range(100,55, 10)) {
+  console.log(data);
+}
+const rangeArray = new Range(100,55, 10).toArray();
+```
+</details>
+## Detect Get, Set
+<details>
+  <summary>Method Proxy<strong>🔻(click)</strong></summary>
+### 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']
+---
+### 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;
+}
+```
+</details>
+## 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({...})}
+```
+---
+## LifeCycle
+* OnCreateRender
+  * onCreateRender(): created call
+* OnInitRender
+  * onInitRender(): init render call
+* OnDestroyRender
+  * onDestroyRender(): component Destroy 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>
+```
+---
+# Component, Attribute, AttributeCallBack
+# 😃 examples
+- [examples](./examples/component_script_attr)
+```html
+<body id="app">
+${this.name}$
+<h1>component</h1>
+<profile dr-on-component-init="$component.name='jhone'; $component.age=55;"><b>${#component#.details}$</b></profile>
+<profile dr-on-component-init="$component.name='cal'; $component.age=56;"><b>detail-2</b></profile>
+<profile dr-on-component-init="$component.name='rose'; $component.age=57;">
+    <profile dr-on-component-init="$component.name='rose-sub'; $component.age=156;">
+        <b>${this.name}$</b>
+    </profile>
+</profile>
+<h3>component data link and detect</h3>
+<Profile dr-if="this.toggle" dr-detect="$component.age = this.age" dr-on-component-init="$component.name='papa'; $component.age=58;">
+    <b>${this.name}$</b>
+</Profile>
+<button dr-event-click="this.name = new Date().toString();">change name</button>
+<button dr-event-click="this.age = Date.now();">change age</button>
+<button dr-event-click="this.toggle = !this.toggle;">change toggle</button>
+<j1>component constructor, on-create, dr-on-component-init</j1>
+<home dr-constructor="[this.name, this.age, 'home welcom']" dr-on-create="{type: 'onCreate', data: 'datadata'}" dr-on-component-init="$component.onInit('data')"></home>
+<h1>scripts</h1>
+<div>
+    ${$scripts.concat('hello', 'tail')}$
+</div>
+<h1>attr</h1>
+<button link="this.link">
+link attribute
+</button>
+<h1>attrCallBack</h1>
+<input id="callback" type="text" wow>
+</body>
+```
+```typescript
+DomRender
+        .addComponent(config, {type: Profile}, {template: ProfileTemplate})
+        .add({type: Home}, {template: HomeTemplate});
+DomRender.addAttribute(config, 'link',
+        (element: Element, attrValue: string, obj: any, rawSet: RawSet) => {
+          return obj;
+        },
+        (element: Element, attrValue: string, obj: any, rawSet: RawSet) => {
+          const fag = window.document.createDocumentFragment();
+          if (attrValue) {
+            const n = element.cloneNode(true) as Element;
+            attrValue = ScriptUtils.eval(`return ${attrValue}`, obj)
+            n.addEventListener('click', () => {
+              location.href = attrValue;
+            });
+            fag.append(n);
+          }
+          return fag;
+        }
+);
+DomRender.addAttributeCallBack(config, 'wow', (e, a, o) => {
+  e.addEventListener('click', (event) => {
+    alert((event.target as any).value);
+  })
+})
+const data = DomRender.run(new Data(), document.querySelector('#app')!, config);
+```
+using component
+```html
+<my-element dr-on-component-init="$component.say();"></my-element>
+```
+- attribute
+  - dr-on-component-init: component created init call script
+    - $component: component  instance
+    - $element: element instance
+    - $attribute: element attribute object
+    - $innerHTML: element innerHTML string
+---
+# License
+* MIT
+* visualkhh@gmail.com