dom-render 1.0.87 → 1.0.90

package/DomRender.d.ts

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

package/DomRender.js

@@ -14,7 +14,7 @@ var DomRenderProxy_1 = require("./DomRenderProxy");
 var PathRouter_1 = require("./routers/PathRouter");
 var HashRouter_1 = require("./routers/HashRouter");
 var Types_1 = require("./types/Types");
-var RawSet_1 = require("./RawSet");
+var RawSet_1 = require("./rawsets/RawSet");
 var DefaultMessenger_1 = require("./messenger/DefaultMessenger");
 var DomRender = /** @class */ (function () {
     function DomRender() {

package/DomRenderProxy.d.ts

@@ -1,4 +1,4 @@
-import { RawSet } from './RawSet';
+import { RawSet } from './rawsets/RawSet';
 import { Config } from './configs/Config';
 export declare class DomRenderProxy<T extends object> implements ProxyHandler<T> {
     _domRender_origin: T;

package/DomRenderProxy.js

@@ -1,10 +1,20 @@
 "use strict";
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DomRenderProxy = void 0;
-var RawSet_1 = require("./RawSet");
+var RawSet_1 = require("./rawsets/RawSet");
 var EventManager_1 = require("./events/EventManager");
 var ScriptUtils_1 = require("./utils/script/ScriptUtils");
 var Types_1 = require("./types/Types");
+var RawSetType_1 = require("./rawsets/RawSetType");
 var excludeGetSetPropertys = ['onBeforeReturnGet', 'onBeforeReturnSet', '__domrender_components', '__render', '_DomRender_isFinal', '_domRender_ref', '_rawSets', '_domRender_proxy', '_targets', '_DomRender_origin', '_DomRender_ref', '_DomRender_proxy'];
 var DomRenderProxy = /** @class */ (function () {
     function DomRenderProxy(_domRender_origin, target, config) {
@@ -55,13 +65,16 @@ var DomRenderProxy = /** @class */ (function () {
     };
     DomRenderProxy.prototype.initRender = function (target) {
         var _this = this;
-        var _a, _b, _c, _d, _e, _f, _g;
-        var onCreate = (_b = (_a = target).getAttribute) === null || _b === void 0 ? void 0 : _b.call(_a, "".concat(EventManager_1.EventManager.attrPrefix, "on-create"));
-        var createParam;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        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) {
             createParam = ScriptUtils_1.ScriptUtils.evalReturn(onCreate, this._domRender_proxy);
+            if (!Array.isArray(createParam)) {
+                createParam = [createParam];
+            }
         }
-        (_d = (_c = this._domRender_proxy) === null || _c === void 0 ? void 0 : _c.onCreateRender) === null || _d === void 0 ? void 0 : _d.call(_c, createParam);
+        (_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 : '';
         this._targets.add(target);
         var rawSets = RawSet_1.RawSet.checkPointCreates(target, this._domRender_proxy, this.config);
@@ -80,13 +93,21 @@ var DomRenderProxy = /** @class */ (function () {
             }
         });
         this.render(this.getRawSets());
-        var render = { target: target };
-        var creatorMetaData = {
-            creator: this._domRender_proxy,
-            rootCreator: this._domRender_proxy,
-            innerHTML: innerHTML
-        };
-        (_g = (_f = this._domRender_proxy) === null || _f === void 0 ? void 0 : _f.onInitRender) === null || _g === void 0 ? void 0 : _g.call(_f, { render: render, creatorMetaData: creatorMetaData });
+        // const render = {target} as Render;
+        // const creatorMetaData = {
+        //     creator: this._domRender_proxy,
+        //     rootCreator: this._domRender_proxy,
+        //     innerHTML
+        // } as CreatorMetaData;
+        var onInit = (_g = (_f = target).getAttribute) === null || _g === void 0 ? void 0 : _g.call(_f, RawSet_1.RawSet.DR_ON_INIT_ARGUMENTS_OPTIONNAME);
+        var initParam = [];
+        if (onCreate) {
+            initParam = ScriptUtils_1.ScriptUtils.evalReturn(onCreate, this._domRender_proxy);
+            if (!Array.isArray(initParam)) {
+                initParam = [initParam];
+            }
+        }
+        (_j = (_h = this._domRender_proxy) === null || _h === void 0 ? void 0 : _h.onInitRender) === null || _j === void 0 ? void 0 : _j.call.apply(_j, __spreadArray([_h], initParam, false));
     };
     DomRenderProxy.prototype.getRawSets = function () {
         var set = new Set();
@@ -118,7 +139,7 @@ var DomRenderProxy = /** @class */ (function () {
                 if ((_c = it.detect) === null || _c === void 0 ? void 0 : _c.action) {
                     it.detect.action();
                 }
-                else if (it.type === RawSet_1.RawSetType.TARGET_ELEMENT && it.data && fullPathStr && targetAttrMap && it.fragment.render) {
+                else if (it.type === RawSetType_1.RawSetType.TARGET_ELEMENT && it.data && fullPathStr && targetAttrMap && it.fragment.render) {
                     new Map(JSON.parse(targetAttrMap)).forEach(function (v, k) {
                         // it?.data.onChangeAttrRender(k, null, v);
                         var isUsing = EventManager_1.EventManager.isUsingThisVar(v, "this.".concat(fullPathStr));

package/README.MD

@@ -7,7 +7,7 @@ DOM-RENDER
 
 # 🚀 Quick start 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/dom-render@1.0.86/dist/bundle.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/dom-render@1.0.90/dist/bundle.js"></script>
 ```
 ```html
 <!DOCTYPE html>
@@ -303,6 +303,8 @@ dr-value-link: <input type="text" dr-value-link="this.office.addr.street"> <br>
 * event: change  
 * modify change: dr-form:event="input"
 
+- [examples](./examples/forms)
+
 ```html
 <body id="app">
 <form dr-form="this.form" dr-event-submit="this.submit(); $event.preventDefault();">
@@ -413,30 +415,58 @@ 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>
+  <h1>examples header</h1>
+  <h2>${this.name}$</h2>
+  <div>
+    <div><button dr-event-click="$router.go('/')">main</button></div>
+    <div>
+      <button dr-event-click="$router.go('/second', {secondata: 555})">second</button>
+      <button dr-event-click="$router.go('/second/5')">second/1</button>
+      <button dr-event-click="$router.go('/second/wow')">second/2</button>
+    </div>
+    <div><button dr-event-click="$router.go('/detail/25?name=zzz')">detail</button></div>
   </div>
 </header>
+<hr>
 <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>
+  <page-second dr-if="$router.test('/second')">1</page-second>
+  <page-second dr-if="$router.testRegexp('/second/[0-9]?$')">2</page-second>
+  <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>
+  </div>
 </main>
+<hr>
+<footer>footer</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';
+  name = 'Detail';
 
-    onCreateRender(routeData: RouteData) {
-        console.log('routeData->', routeData);
-    }
+  onCreateRender(data: CreatorMetaData) {
+    console.log('routeData->', data);
+  }
+
+  routerData(routeData: RouteData) {
+    console.log('--------', routeData);
+  }
 }
 ```
+
 ```typescript
 // RouteData type
 type RouteData = {
@@ -608,15 +638,18 @@ const data = config.scripts.concat('head', 'tail')
 <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;">
+<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>
     </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;">
+<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>
 
@@ -624,8 +657,8 @@ ${this.name}$
 <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>
+<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>
 
 
 
@@ -682,7 +715,7 @@ const data = DomRender.run(new Data(), document.querySelector('#app')!, config);
 ```
 using component
 ```html
-<my-element dr-on-component-init="$component.say();"></my-element>
+<my-element dr-on-create:callback="$component.say();"></my-element>
 
 <home value="${this.name}$" wow="${this.color}$">
   ${#component#.homeName}$
@@ -692,11 +725,15 @@ using component
 </home>
 ```
 - attribute
-  - dr-on-component-init: component created init call script
+  - 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-constructor:arguments: component counstructor arguments
     - $component: component  instance
     - $element: element instance
     - $attribute: element attribute object
     - $innerHTML: element innerHTML string
+    - $creatorMetaData: metaData
   - #component#: component instance
   - #innerHTML#: element innerHTML
   - dr-component-name: renaming component variable name (default: component)

package/components/ComponentSet.d.ts

@@ -3,5 +3,5 @@ export declare class ComponentSet {
     template?: string | undefined;
     styles?: string[] | undefined;
     styleLocale: boolean;
-    constructor(obj: any, template?: string | undefined, styles?: string[] | undefined, styleLocale?: boolean);
+    constructor(obj: any);
 }

package/configs/Config.d.ts

@@ -1,5 +1,5 @@
 import { ConstructorType } from '../types/Types';
-import { RawSet } from '../RawSet';
+import { RawSet } from '../rawsets/RawSet';
 import { Router } from '../routers/Router';
 import { Messenger } from '../messenger/Messenger';
 import { TargetElement } from './TargetElement';

package/configs/TargetAttr.d.ts

@@ -1,4 +1,4 @@
-import { RawSet } from '../RawSet';
+import { RawSet } from '../rawsets/RawSet';
 export declare type TargetAttr = {
     name: string;
     callBack: (target: Element, attrValue: string, obj: any, rawSet: RawSet) => DocumentFragment;

package/configs/TargetElement.d.ts

@@ -1,5 +1,8 @@
-import { Attrs, CreatorMetaData, RawSet, Render } from '../RawSet';
+import { RawSet } from '../rawsets/RawSet';
 import { Config } from './Config';
+import { Attrs } from '../rawsets/Attrs';
+import { CreatorMetaData } from '../rawsets/CreatorMetaData';
+import { Render } from '../rawsets/Render';
 export declare type TargetElement = {
     name: string;
     template?: string;