dom-render 1.0.97 → 1.0.98

package/DomRender.d.ts

@@ -2,7 +2,7 @@ import { Config } from './configs/Config';
 import { ConstructorType } from './types/Types';
 import { RawSet } from './rawsets/RawSet';
 export declare class DomRender {
-    static run<T extends object>(obj: T, target?: Node | null, oConfig?: Config): T;
+    static run<T extends object>(obj: T, target?: Node | null, oConfig?: Omit<Config, 'window'>): T;
     static createComponent(param: {
         type: ConstructorType<any> | any;
         tagName?: string;

package/DomRender.js

@@ -20,7 +20,7 @@ var DomRender = /** @class */ (function () {
     function DomRender() {
     }
     DomRender.run = function (obj, target, oConfig) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         var robj = obj;
         if ('_DomRender_isProxy' in obj) {
             if (target) {
@@ -48,8 +48,8 @@ var DomRender = /** @class */ (function () {
             config.router = (_c = config.router) !== null && _c !== void 0 ? _c : new HashRouter_1.HashRouter(robj, config.window);
         }
         else { // default
-            // config.routerType = 'hash';
-            // config.router = config.router ?? new HashRouter(robj, config.window);
+            config.routerType = 'hash';
+            config.router = (_d = config.router) !== null && _d !== void 0 ? _d : new HashRouter_1.HashRouter(robj, config.window);
         }
         domRender.run(robj);
         return robj;

package/DomRenderProxy.js

@@ -14,7 +14,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
             if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
             if (y = 0, t) op = [op[0] & 2, t.value];
             switch (op[0]) {
@@ -76,9 +76,9 @@ var DomRenderProxy = /** @class */ (function () {
     };
     DomRenderProxy.prototype.run = function (objProxy) {
         var _this = this;
-        var _a, _b;
+        var _a;
         this._domRender_proxy = objProxy;
-        (_b = (_a = objProxy) === null || _a === void 0 ? void 0 : _a.onProxyDomRender) === null || _b === void 0 ? void 0 : _b.call(_a, this.config);
+        (_a = objProxy === null || objProxy === void 0 ? void 0 : objProxy.onProxyDomRender) === null || _a === void 0 ? void 0 : _a.call(objProxy, this.config);
         var obj = objProxy._DomRender_origin;
         if (obj) {
             Object.keys(obj).forEach(function (it) {
@@ -104,7 +104,10 @@ var DomRenderProxy = /** @class */ (function () {
     };
     DomRenderProxy.prototype.initRender = function (target) {
         var _this = this;
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d;
+        if (target instanceof Element) {
+            target.innerHTML = target.innerHTML.replace(/@this@/g, 'this');
+        }
         var onCreate = (_b = (_a = target).getAttribute) === null || _b === void 0 ? void 0 : _b.call(_a, RawSet_1.RawSet.DR_ON_CREATE_ARGUMENTS_OPTIONNAME);
         var createParam = [];
         if (onCreate) {
@@ -114,7 +117,7 @@ var DomRenderProxy = /** @class */ (function () {
             }
         }
         (_d = (_c = this._domRender_proxy) === null || _c === void 0 ? void 0 : _c.onCreateRender) === null || _d === void 0 ? void 0 : _d.call.apply(_d, __spreadArray([_c], createParam, false));
-        var innerHTML = (_e = target.innerHTML) !== null && _e !== void 0 ? _e : '';
+        // const innerHTML = (target as any).innerHTML ?? '';
         this._targets.add(target);
         var rawSets = RawSet_1.RawSet.checkPointCreates(target, this._domRender_proxy, this.config);
         // console.log('initRender -------rawSet', rawSets)
@@ -193,11 +196,11 @@ var DomRenderProxy = /** @class */ (function () {
                                         new Map(JSON.parse(targetAttrMap)).forEach(function (v, k) {
                                             var _a;
                                             // it?.data.onChangeAttrRender(k, null, v);
-                                            var isUsing = EventManager_1.EventManager.isUsingThisVar(v, "this." + fullPathStr);
+                                            var isUsing = EventManager_1.EventManager.isUsingThisVar(v, "this.".concat(fullPathStr));
                                             if (isUsing) {
                                                 var render = it_1.fragment.render;
                                                 // console.log('render-->', (it.fragment as any).render)
-                                                var script = render.renderScript + " return " + v + " ";
+                                                var script = "".concat(render.renderScript, " return ").concat(v, " ");
                                                 var cval = ScriptUtils_1.ScriptUtils.eval(script, Object.assign((_a = _this._domRender_proxy) !== null && _a !== void 0 ? _a : {}, { __render: render }));
                                                 it_1.data.onChangeAttrRender(k, cval);
                                             }
@@ -269,7 +272,7 @@ var DomRenderProxy = /** @class */ (function () {
             // const firstPathStr = paths.slice(1).reverse().join('.');
             var strings = paths.reverse();
             // array같은경우도 키값으로 접근하기때문에 특정 인덱스를 찾아서 그부분만 바꿔줄수 있다.
-            var fullPathStr_1 = strings.map(function (it) { return isNaN(Number(it)) ? '.' + it : "[" + it + "]"; }).join('').slice(1);
+            var fullPathStr_1 = strings.map(function (it) { return isNaN(Number(it)) ? '.' + it : "[".concat(it, "]"); }).join('').slice(1);
             // console.log('-------fullPathStr', fullPathStr, lastDoneExecute);
             if (lastDoneExecute) {
                 // const firstData = ScriptUtils.evalReturn('this.' + firstPathStr, this._domRender_proxy);
@@ -278,7 +281,7 @@ var DomRenderProxy = /** @class */ (function () {
                 // }
                 var iterable_1 = this._rawSets.get(fullPathStr_1);
                 // array check
-                var front_1 = strings.slice(0, strings.length - 1).map(function (it) { return isNaN(Number(it)) ? '.' + it : "[" + it + "]"; }).join('');
+                var front_1 = strings.slice(0, strings.length - 1).map(function (it) { return isNaN(Number(it)) ? '.' + it : "[".concat(it, "]"); }).join('');
                 var last_1 = strings[strings.length - 1];
                 var data_1 = ScriptUtils_1.ScriptUtils.evalReturn('this' + front_1, this._domRender_proxy);
                 // console.log('-------!!!!!', fullPathStr, iterable, data, front, last);
@@ -333,12 +336,14 @@ var DomRenderProxy = /** @class */ (function () {
                         return _this.render(Array.from(iterable_1), fullPathStr_1);
                     }
                 }).then(function (it) {
+                    console.log('target1------->,', it);
                     _this._targets.forEach(function (it) {
+                        console.log('target2------->,', it);
                         // return;
                         if (it.nodeType === Node.DOCUMENT_FRAGMENT_NODE || it.nodeType === Node.ELEMENT_NODE) {
                             var targets = EventManager_1.eventManager.findAttrElements(it, _this.config);
                             // console.log('------>', targets);
-                            EventManager_1.eventManager.changeVar(_this._domRender_proxy, targets, "this." + fullPathStr_1, _this.config);
+                            EventManager_1.eventManager.changeVar(_this._domRender_proxy, targets, "this.".concat(fullPathStr_1), _this.config);
                         }
                     });
                 });
@@ -348,7 +353,7 @@ var DomRenderProxy = /** @class */ (function () {
         return fullPaths;
     };
     DomRenderProxy.prototype.set = function (target, p, value, receiver) {
-        var _a, _b, _c;
+        var _a, _b;
         // console.log('set-->', p, value, target, receiver);
         if (typeof p === 'string' && p !== '__domrender_components' && excludeGetSetPropertys.includes(p)) {
             target[p] = value;
@@ -370,12 +375,12 @@ var DomRenderProxy = /** @class */ (function () {
         }
         // console.log('full path:', fullPath);
         if (('onBeforeReturnSet' in receiver) && typeof p === 'string' && !((_a = this.config.proxyExcludeOnBeforeReturnSets) !== null && _a !== void 0 ? _a : []).concat(excludeGetSetPropertys).includes(p)) {
-            (_c = (_b = receiver) === null || _b === void 0 ? void 0 : _b.onBeforeReturnSet) === null || _c === void 0 ? void 0 : _c.call(_b, p, value, fullPath);
+            (_b = receiver === null || receiver === void 0 ? void 0 : receiver.onBeforeReturnSet) === null || _b === void 0 ? void 0 : _b.call(receiver, p, value, fullPath);
         }
         return true;
     };
     DomRenderProxy.prototype.get = function (target, p, receiver) {
-        var _a, _b, _c;
+        var _a, _b;
         // console.log('get-->', target, p, receiver);
         if (p === '_DomRender_origin') {
             return this._domRender_origin;
@@ -406,7 +411,7 @@ var DomRenderProxy = /** @class */ (function () {
                 it_2 = it_2._DomRender_origin;
             }
             if (('onBeforeReturnGet' in receiver) && typeof p === 'string' && !((_a = this.config.proxyExcludeOnBeforeReturnGets) !== null && _a !== void 0 ? _a : []).concat(excludeGetSetPropertys).includes(p)) {
-                (_c = (_b = receiver) === null || _b === void 0 ? void 0 : _b.onBeforeReturnGet) === null || _c === void 0 ? void 0 : _c.call(_b, p, it_2, this.root([p], it_2, false));
+                (_b = receiver === null || receiver === void 0 ? void 0 : receiver.onBeforeReturnGet) === null || _b === void 0 ? void 0 : _b.call(receiver, p, it_2, this.root([p], it_2, false));
             }
             return it_2;
         }

package/README.MD

@@ -125,13 +125,13 @@ const data = DomRender.run(new Data(), document.querySelector('#app')!);
 ```html
 <h3>appender</h3>
 <ul>
-  <li dr-appender="this.appender">
+  <li dr-appender="@this@.appender">
     ${#it#}$
   </li>
 </ul>
-<button dr-event-click="this.append()">appending</button>
-<button dr-event-click="this.modifyAppender(0)">idx 0 modify</button>
-<button dr-event-click="this.clearAppend()">appender clear</button>
+<button dr-event-click="@this@.append()">appending</button>
+<button dr-event-click="@this@.modifyAppender(0)">idx 0 modify</button>
+<button dr-event-click="@this@.clearAppend()">appender clear</button>
 ```
 
 ```typescript
@@ -187,12 +187,12 @@ class Data {
 * 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>
+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>
+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>
@@ -204,7 +204,7 @@ submit: <form dr-event-submit="console.log($event); $event.preventDefault();"><i
 * variable: $target
 
 ```html
-window-event-popstate: <input type="text" dr-window-event-popstate="alert(this.name)"><br>
+window-event-popstate: <input type="text" dr-window-event-popstate="alert(@this@.name)"><br>
 ```
 </details>
 
@@ -236,8 +236,8 @@ class data {
 }
 ```
 ```html
-<div dr-this="this.dictionary">
-  ${this.name}$
+<div dr-this="@this@.dictionary">
+  ${@this@.name}$
 </div>
 ```
 </details>
@@ -258,7 +258,7 @@ class data {
 }
 ```
 ```html
-<home dr-this-property="this.dictionary" dr-on-init:arguments="[2,#this#]">
+<home dr-this-property="@this@.dictionary" dr-on-init:arguments="[2,#this#]">
   ${this}$
 </home>
 ```
@@ -274,8 +274,8 @@ class data {
   * 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>
+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>
 
@@ -284,7 +284,7 @@ dr-value-link: <input type="text" dr-value-link="this.office.addr.street"> <br>
   <summary>dr-attr<strong>🔻(click)</strong></summary>
 
 ```html
-<textarea dr-attr="{rows: this.age/2, cols: this.age}"></textarea>
+<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>
@@ -295,8 +295,8 @@ dr-value-link: <input type="text" dr-value-link="this.office.addr.street"> <br>
   <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="{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>
@@ -305,10 +305,10 @@ dr-value-link: <input type="text" dr-value-link="this.office.addr.street"> <br>
   <summary>dr-style<strong>🔻(click)</strong></summary>
 
 ```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>
+<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>
 
@@ -332,8 +332,8 @@ dr-value-link: <input type="text" dr-value-link="this.office.addr.street"> <br>
   <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 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>
@@ -348,7 +348,7 @@ dr-value-link: <input type="text" dr-value-link="this.office.addr.street"> <br>
 
 ```html
 <body id="app">
-<form dr-form="this.form" dr-event-submit="this.submit(); $event.preventDefault();">
+<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>
@@ -373,7 +373,7 @@ dr-value-link: <input type="text" dr-value-link="this.office.addr.street"> <br>
 
 ```html
 <body id="app">
-<form dr-form="this.form" dr-event-submit="this.submit(); $event.preventDefault();">
+<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>
@@ -457,7 +457,7 @@ const data = DomRender.run(new Data(), document.querySelector('#app')!, config);
 ```html
 <header>
   <h1>examples header</h1>
-  <h2>${this.name}$</h2>
+  <h2>${@this@.name}$</h2>
   <div>
     <div><button dr-event-click="$router.go('/')">main</button></div>
     <div>
@@ -476,7 +476,7 @@ const data = DomRender.run(new Data(), document.querySelector('#app')!, config);
   <page-second dr-if="$router.testRegexp('/second/wow$')">wow</page-second>
   <page-detail url='/detail/{id:[0-9]+}' dr-if="$router.test($attribute.url)" dr-on-create:callback="$component.routerData($router.getRouteData($attribute.url))" ></page-detail>
   <div>
-    <button dr-event-click="this.plusCount()">${this.count}$ count  pluse++</button>
+    <button dr-event-click="@this@.plusCount()">${@this@.count}$ count  pluse++</button>
   </div>
 </main>
 <hr>
@@ -677,29 +677,29 @@ const data = config.scripts.concat('head', 'tail')
 - [examples](./examples/component_script_attr) lazy load (html, css)
 ```html
 <body id="app">
-${this.name}$
+${@this@.name}$
 <h1>component</h1>
 <profile dr-on-create:callback="$component.name='jhone'; $component.age=55;"><b>${#component#.details}$</b></profile>
 <profile dr-on-create:callback="$component.name='cal'; $component.age=56;"><b>detail-2</b></profile>
 <profile dr-on-create:callback="$component.name='rose'; $component.age=57;">
     <profile dr-on-create:callback="$component.name='rose-sub'; $component.age=156;">
-        <b>${this.name}$</b>
+        <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-create:callback="$component.name='papa'; $component.age=58;">
-    <b>${this.name}$</b>
+<Profile dr-if="@this@.toggle" dr-detect="$component.age = @this@.age" dr-on-create:callback="$component.name='papa'; $component.age=58;">
+    <b>${@this@.name}$</b>
 </Profile>
-<Profile dr-if="this.toggle" dr-detect="$component.age = this.age" dr-on-constructor:arguments="[1,2]">
-    <b>${this.name}$</b>
+<Profile dr-if="@this@.toggle" dr-detect="$component.age = @this@.age" dr-on-constructor:arguments="[1,2]">
+    <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>
+<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-create:callback</j1>
-<home dr-constructor="[this.name, this.age, 'home welcom']" dr-on-create-arguments="{type: 'onCreate', data: 'datadata'}" dr-on-create:callback="$component.onInit('data')"></home>
+<home dr-constructor="[@this@.name, @this@.age, 'home welcom']" dr-on-create-arguments="{type: 'onCreate', data: 'datadata'}" dr-on-create:callback="$component.onInit('data')"></home>
 
 
 
@@ -709,7 +709,7 @@ ${this.name}$
 </div>
 
 <h1>attr</h1>
-<button link="this.link">
+<button link="@this@.link">
 link attribute
 </button>
 <h1>attrCallBack</h1>
@@ -758,7 +758,7 @@ using component
 ```html
 <my-element dr-on-create:callback="$component.say();"></my-element>
 
-<home value="${this.name}$" wow="${this.color}$">
+<home value="${@this@.name}$" wow="${@this@.color}$">
   ${#component#.homeName}$
   <home value="${#component#.homeName}$" wow="${#component#.homeColor}$" dr-component-name="sub_component" dr-component-inner-html-name="innerHTML">
     ${#sub_component#.homeName}$

package/components/ComponentSet.d.ts

@@ -1,4 +1,4 @@
-export declare type ComponentSetConfig = {
+export type ComponentSetConfig = {
     objPath?: string | null;
 };
 export declare class ComponentSet {

package/configs/Config.d.ts

@@ -6,7 +6,7 @@ import { TargetElement } from './TargetElement';
 import { TargetAttr } from './TargetAttr';
 import { Attrs } from '../rawsets/Attrs';
 import { OperatorAround } from '../operators/OperatorExecuter';
-export declare type Config = {
+export type Config = {
     window: Window;
     targetElements?: TargetElement[];
     targetAttrs?: TargetAttr[];

package/configs/TargetAttr.d.ts

@@ -1,5 +1,5 @@
 import { RawSet } from '../rawsets/RawSet';
-export declare type TargetAttr = {
+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;

package/configs/TargetElement.d.ts

@@ -3,7 +3,7 @@ import { Config } from './Config';
 import { Attrs } from '../rawsets/Attrs';
 import { CreatorMetaData } from '../rawsets/CreatorMetaData';
 import { Render } from '../rawsets/Render';
-export declare type TargetElement = {
+export type TargetElement = {
     name: string;
     template?: string;
     styles?: string[];

package/css/stringify/compiler.d.ts

@@ -6,7 +6,7 @@ export = Compiler;
  * @return {Type}
  * @api public
  */
-declare function Compiler(opts: any): any;
+declare function Compiler(opts: any): Type;
 declare class Compiler {
     /**
      * Initialize a compiler.