dom-render 1.0.85 → 1.0.88

package/DomRender.d.ts

@@ -1,13 +1,13 @@
-import { Config } from './Config';
+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, config?: Config): T;
+    static run<T extends object>(obj: T, target?: Node | null, oConfig?: Omit<Config, 'window'>): T;
     static createComponent(param: {
-        type: ConstructorType<any>;
+        type: ConstructorType<any> | any;
         tagName?: string;
         template?: string;
         styles?: string[] | string;
-    }, config: Config): import("./Config").TargetElement;
-    static createAttribute(attrName: string, getThisObj: (element: Element, attrValue: string, obj: any, rawSet: RawSet) => any, factory: (element: Element, attrValue: string, obj: any, rawSet: RawSet) => DocumentFragment): import("./Config").TargetAttr;
+    }): import("./configs/TargetElement").TargetElement;
+    static createAttribute(attrName: string, getThisObj: (element: Element, attrValue: string, obj: any, rawSet: RawSet) => any, factory: (element: Element, attrValue: string, obj: any, rawSet: RawSet) => DocumentFragment): import("./configs/TargetAttr").TargetAttr;
 }

package/DomRender.js

@@ -14,12 +14,12 @@ 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() {
     }
-    DomRender.run = function (obj, target, config) {
+    DomRender.run = function (obj, target, oConfig) {
         var _a, _b, _c;
         var robj = obj;
         if ('_DomRender_isProxy' in obj) {
@@ -29,9 +29,13 @@ var DomRender = /** @class */ (function () {
             robj = obj;
             return robj;
         }
+        var config = oConfig;
         if (!config) {
             config = { window: window };
         }
+        if (config && !config.window) {
+            config.window = window;
+        }
         config.routerType = config.routerType || 'none';
         config.messenger = Types_1.DomRenderFinalProxy.final((_a = config.messenger) !== null && _a !== void 0 ? _a : new DefaultMessenger_1.DefaultMessenger(config));
         var domRender = new DomRenderProxy_1.DomRenderProxy(obj, target, config);
@@ -46,12 +50,13 @@ var DomRender = /** @class */ (function () {
         domRender.run(robj);
         return robj;
     };
-    DomRender.createComponent = function (param, config) {
+    DomRender.createComponent = function (param) {
         var _a, _b;
-        var component = RawSet_1.RawSet.createComponentTargetElement((_a = param.tagName) !== null && _a !== void 0 ? _a : param.type.name, function (e, o, r2, counstructorParam) {
+        // console.log('===>', typeof param.type, param.type.name, param.type.constructor.name)
+        var component = RawSet_1.RawSet.createComponentTargetElement((_a = param.tagName) !== null && _a !== void 0 ? _a : (typeof param.type === 'function' ? param.type.name : param.type.constructor.name), function (e, o, r2, counstructorParam) {
             var _a;
-            return new ((_a = param.type).bind.apply(_a, __spreadArray([void 0], counstructorParam, false)))();
-        }, (_b = param.template) !== null && _b !== void 0 ? _b : '', Array.isArray(param.styles) ? param.styles : (param.styles ? [param.styles] : undefined), config);
+            return typeof param.type === 'function' ? new ((_a = param.type).bind.apply(_a, __spreadArray([void 0], counstructorParam, false)))() : param.type;
+        }, (_b = param.template) !== null && _b !== void 0 ? _b : '', Array.isArray(param.styles) ? param.styles : (param.styles ? [param.styles] : undefined));
         return component;
     };
     DomRender.createAttribute = function (attrName, getThisObj, factory) {

package/DomRenderProxy.d.ts

@@ -1,5 +1,5 @@
-import { RawSet } from './RawSet';
-import { Config } from './Config';
+import { RawSet } from './rawsets/RawSet';
+import { Config } from './configs/Config';
 export declare class DomRenderProxy<T extends object> implements ProxyHandler<T> {
     _domRender_origin: T;
     config: Config;
@@ -7,7 +7,7 @@ export declare class DomRenderProxy<T extends object> implements ProxyHandler<T>
     _rawSets: Map<string, Set<RawSet>>;
     _domRender_proxy?: T;
     _targets: Set<Node>;
-    constructor(_domRender_origin: T, target: Node | undefined, config: Config);
+    constructor(_domRender_origin: T, target: Node | null | undefined, config: Config);
     static unFinal<T = any>(obj: T): T;
     static final<T = any>(obj: T): T;
     static isFinal<T = any>(obj: T): boolean;

package/DomRenderProxy.js

@@ -1,10 +1,11 @@
 "use strict";
 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) {
@@ -118,7 +119,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.85/dist/bundle.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/dom-render@1.0.86/dist/bundle.js"></script>
 ```
 ```html
 <!DOCTYPE html>
@@ -18,7 +18,7 @@ DOM-RENDER
 </head>
 <body id="app">
 ${this.name}$
-<script src="https://cdn.jsdelivr.net/npm/dom-render@1.0.85/dist/bundle.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/dom-render@1.0.86/dist/bundle.js"></script>
 <script>
   let data = {
     name: 'my name is dom-render'
@@ -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();">
@@ -404,39 +406,67 @@ const config: Config = {
   window
 };
 config.targetElements = [
-  DomRender.createComponent({type: Main, tagName: 'page-main', template: MainTemplate}, config),
-  DomRender.createComponent({type: Second, tagName: 'page-second', template: SecondTemplate}, config),
-  DomRender.createComponent({type: Detail, tagName: 'page-detail', template: DetailTemplate}, config)
+  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
 <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-component-init="$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 = {
@@ -644,8 +674,8 @@ link attribute
 ```
 ```typescript
 config.targetElements = [
-  DomRender.createComponent({type: Profile, template: ProfileTemplate}, config),
-  DomRender.createComponent({type: Home, template: HomeTemplate, styles: HomeStyle}, config)
+  DomRender.createComponent({type: Profile, template: ProfileTemplate}),
+  DomRender.createComponent({type: Home, template: HomeTemplate, styles: HomeStyle})
 ]
 
 config.targetAttrs = [

package/configs/Config.d.ts

@@ -0,0 +1,26 @@
+import { ConstructorType } from '../types/Types';
+import { RawSet } from '../rawsets/RawSet';
+import { Router } from '../routers/Router';
+import { Messenger } from '../messenger/Messenger';
+import { TargetElement } from './TargetElement';
+import { TargetAttr } from './TargetAttr';
+export declare type Config = {
+    window: Window;
+    targetElements?: TargetElement[];
+    targetAttrs?: TargetAttr[];
+    onElementInit?: (name: string, obj: any, rawSet: RawSet, targetElement: TargetElement) => any;
+    onAttrInit?: (name: string, attrValue: string, obj: any, rawSet: RawSet) => any;
+    proxyExcludeTyps?: ConstructorType<any>[];
+    proxyExcludeOnBeforeReturnSets?: string[];
+    proxyExcludeOnBeforeReturnGets?: string[];
+    scripts?: {
+        [n: string]: any;
+    };
+    routerType?: 'hash' | 'path' | 'none';
+    router?: Router;
+    messenger?: Messenger;
+    applyEvents?: {
+        attrName: string;
+        callBack: (elements: Element, attrValue: string, obj: any) => void;
+    }[];
+};

package/configs/TargetAttr.d.ts

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

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/configs/TargetElement.d.ts

@@ -0,0 +1,14 @@
+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;
+    styles?: string[];
+    callBack: (target: Element, obj: any, rawSet: RawSet, attrs: Attrs, config: Config) => DocumentFragment;
+    complete?: (target: Element, obj: any, rawSet: RawSet) => void;
+    __render?: Render;
+    __creatorMetaData?: CreatorMetaData;
+};

package/configs/TargetElement.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });