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 ``` ```html Title ${this.name}$ ``` # πŸ˜ƒ examples - [examples](./examples) ## Expression
${...}$, #{...}# πŸ”»(click) ### ${}$ innerTEXT, #{}# innerHTML ```html ${this.name}$ #{this.name}# ```
# dom-render attributes ## attribute change, bind
attributeπŸ”»(click) ### attribute ```html ``` ```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')!); ```
## style css ```typescript export class IndexComponent implements OnInitRender, OnDestroyRender, OnInit, OnSimCreate, OnDrThisBind, OnDrThisUnBind, OnCreateRender, OnCreateRenderData, OnCreatedThisChild { private canvas: HTMLCanvasElement | null = null; private ctx: CanvasRenderingContext2D | null = null; name = 'IndexComponent'; age = 10; color = 'red'; img = 'url(\'https://pbs.twimg.com/media/F1FHR-saMAAMTKm?format=jpg&name=360x360\')'; //... } ``` ```css .sign-container{ cursor: pointer; width: 32px; height: 28px; background-image: ${@this@.img}$; background-position: center; /* μ •κ°€μš΄λ° */ background-size: contain; /* 이미지 전체 ν‘œμ‹œ */ background-repeat: no-repeat; /* 반볡 방지 */ } ``` ```css .#uuid# { color:${@this@.color}$; } ``` ```css @media (width >= /*$@this@.ss$*/) { #profileDialog { max-width: ${@this@.ss}$; /* λ„ˆλΉ„ μ‘°μ • */ } } ``` ### Release the style that applies only to the inside of the component. Please write (1line) online ```css ## .wow {...} ## body::-webkit-scrollbar {display: none;} ``` ```html ``` selector expression: /*$@this@.ss$*/ uuid: rawSetUUID ##: escape scope ## control, print Statement
dr-ifπŸ”»(click) ### if element render ```html
true
gender: M
```
dr-for, dr-for-ofπŸ”»(click) ```html
friend
${#it#.name}$
${#it#}$
${#it#}$ * #it# = ${$var.superIt * #it#}$
```
dr-appenderπŸ”»(click) ```html

appender

``` ```typescript class Data { appender = new Appender(); constructor() { this.appender.push('init' + RandomUtils.uuid(), 'init' + RandomUtils.uuid()); } append() { this.appender.push(RandomUtils.uuid(), RandomUtils.uuid()); } clearAppend() { this.appender.clear() } modifyAppender(idx: number) { this.appender[idx][0] = RandomUtils.uuid(); } } ```
### dr-strip ```html
aa
``` only "aa" result strip element
dr-repeatπŸ”»(click) ```html
#it#
#it#
#it#
#it#
```
dr-inner-text, dr-inner-htmlπŸ”»(click) ```html
friend
friend
```
## event
dr-event-(name)πŸ”»(click) * 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:
change:
input:
keyup:
... keydown:
submit:

```
dr-window-event-popstateπŸ”»(click) * ref: window * variable: $target ```html window-event-popstate:
```
dr-eventπŸ”»(click) * other event * ref: element * variable: $params, $event ```html ```
## this
dr-thisπŸ”»(click) * dr-this * object mapping ```typescript class data { dictionary = { name: 'visualkhh' } } ``` ```html
${@this@.name}$
```
dr-this-propertyπŸ”»(click) * dr-property * property forEach in object * dynamic add, delete ```typescript class data { dictionary = { name1: 'visualkhh1', name2: 'visualkhh2', name3: 'visualkhh3' } } ``` ```html ${this}$ ```
## nearThis ```html
(${@nearThis@.name}$) ${$nearThis.name}$
``` ## dr-on-init - element on-init event ```html sssss ``` ## value
dr-value, value-linkπŸ”»(click) * 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) * instance variable first * dr-checked-link * Value and variable values are referencing each other. It affects each other when changing. (Immediate reflection event: input) * instance variable first * dr-disabled-link * Value and variable values are referencing each other. It affects each other when changing. (Immediate reflection event: input) * instance variable first ```html dr-value:
dr-value-link:
```
## dr-on-rendered-init - rendered call ## other
dr-attrπŸ”»(click) ```html
```
dr-classπŸ”»(click) ```html
```
dr-styleπŸ”»(click) ```html
aa
style
style
style
style
```
dr-stripπŸ”»(click) ```html
hello
```
dr-before, dr-afterπŸ”»(click) ```html
```
dr-completeπŸ”»(click) ```html ``` #nearForOfIndex# ```html ``` #it# ```html
  • ${#it#.name}$
```
## dr-form
formπŸ”»(click) * event: change * modify change: dr-form:event="input" - [examples](./examples/forms) ```html
name: age:
```
validatorπŸ”»(click) ```html
name: age:
``` 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
## Route
RouteπŸ”»(click) - [examples](./examples/router) * config routerType: 'hash' | 'path' | 'none' (default: 'none') ```typescript // Config const config: Config = { window }; config.targetElements = [ DomRender.createComponent({type: Main, tagName: 'page-main', template: MainTemplate}), DomRender.createComponent({type: Second, tagName: 'page-second', template: SecondTemplate}), DomRender.createComponent({type: Detail, tagName: 'page-detail', template: DetailTemplate}) ] config.routerType = 'hash'; // 'hash' | 'path' | 'none'; const data = DomRender.run(new Data(), document.querySelector('#app')!, config); ``` ```html

examples header

${@this@.name}$

1 2 wow
footer
``` ```typescript export class Second implements OnCreateRender { name = 'Second' onCreateRender(data: CreatorMetaData): void { console.log('----->', data.router) } } ``` ```typescript import {RouteData} from 'dom-render/routers/Router'; import {OnCreateRender} from 'dom-render/lifecycle/OnCreateRender'; export class Detail implements OnCreateRender { name = 'Detail'; onCreateRender(data: CreatorMetaData) { console.log('routeData->', data); } routerData(routeData: RouteData) { console.log('--------', routeData); } } ``` ```typescript // RouteData type type RouteData = { path: string; url: string; data?: any; searchParams: URLSearchParams; pathData?: any; } ```
## Messenger (Data transmission) * publish, subscribe
publishπŸ”»(click) ```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); } } ```
subscribeπŸ”»(click) ```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'} // }); } } ````
## Class
RangeπŸ”»(click) ```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(); ```
AppenderπŸ”»(click) ```javascript const appender = new Appender([1, 2]); appender.push(3, 4) for (const data of appender) { console.log('----appender item--->', data); } ```
## Detect Get, Set
Method ProxyπŸ”»(click) ### 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; } ```
## 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
${$scripts.concat('head', 'tail')}
is wowgood
``` --- # Component, Attribute, AttributeCallBack # πŸ˜ƒ examples - [examples](./examples/component_script_attr) lazy load (html, css) ```html ${@this@.name}$

component

${#component#.details}$ detail-2 ${@this@.name}$

component data link and detect

${@this@.name}$ ${@this@.name}$ component constructor, on-create, dr-on-create:callback

scripts

${$scripts.concat('hello', 'tail')}$

attr

attrCallBack

``` ```typescript config.targetElements = [ DomRender.createComponent({type: Profile, template: ProfileTemplate}), // lazy loading format 'lazy://component/home.html' DomRender.createComponent({type: Home, template: HomeTemplate, styles: HomeStyle}) ] config.targetAttrs = [ DomRender.createAttribute('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; } ) ] config.applyEvents = [ { attrName: 'wow', callBack: (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 ${#component#.homeName}$ ${#sub_component#.homeName}$ ``` lazy loading rollup config ```javascript copy({ targets: [ { src: ['**/*.html', '**/*.css', '!node_modules/**/*.html', '!node_modules/**/*.css'], dest: 'dist', rename: (name, extension, fullPath) => `${fullPath}` }, { src: 'assets', dest: 'dist' } ] }) ``` ## parameter - dr-option-component-inner-html-name - dr-option-component-name - callback - onChangeAttrRender - onCreateRenderData(data: OnCreateRenderDataParams): void - type OnCreateRenderDataParams = { parent: T, render: Render }; - OnCreateThisChild - thisChild created callback - OnChildRenderedByProperty - onChildRenderedByProperty(key: string, value: any, config: {rawSets:RawSet[]}): void; - event - dr-event-...:filter event filter!! - ex) dr-event-change:filter="false" - dr-event-...:dispatch - ```html ``` - attribute - dr-on-constructor:arguments: component constructor arguments - dr-on-create:callback: component created init callback script - dr-on-create:arguments: component onCreatedRender arguments - dr-on-init:arguments: component onInitRender arguments - dr-on-rendered-init: rendered - $component: component instance - $element: element instance - $attribute: element attribute object - $innerHTML: element innerHTML string - $creatorMetaData: metaData - #component#: component instance - #innerHTML#: element innerHTML - dr-option-this-name: renaming component variable name (default: component) - dr-option-component-name: renaming component variable name (default: component) - dr-option-inner-html-name: renaming innerHTML variable name (default: innerHTML) --- # License * MIT * visualkhh@gmail.com