dom-render 1.0.73 → 1.0.74

package/Config.d.ts

@@ -27,7 +27,7 @@ export declare type Config = {
     scripts?: {
         [n: string]: any;
     };
-    routerType?: 'hash' | 'path';
+    routerType?: 'hash' | 'path' | 'none';
     router?: Router;
     applyEvents?: {
         attrName: string;

package/DomRender.d.ts

@@ -1,4 +1,27 @@
 import { Config } from './Config';
+import { ConstructorType } from './types/Types';
+import { RawSet } from './RawSet';
 export declare class DomRender {
     static run<T extends object>(obj: T, target?: Node, config?: Config): T;
+    static addComponent(config: Config, { type, tagName }: {
+        type: ConstructorType<any>;
+        tagName?: string;
+    }, { template, styles }: {
+        template: string;
+        styles?: string[];
+    }): {
+        add: (source: {
+            type: ConstructorType<any>;
+            tagName?: string;
+        }, front: {
+            template: string;
+            styles?: string[];
+        }) => any;
+    };
+    static addAttribute(config: Config, attrName: string, getThisObj: (element: Element, attrValue: string, obj: any, rawSet: RawSet) => any, factory: (element: Element, attrValue: string, obj: any, rawSet: RawSet) => DocumentFragment): {
+        add: (attrName: string, getThisObj: (element: Element, attrValue: string, obj: any, rawSet: RawSet) => any, factory: (element: Element, attrValue: string, obj: any, rawSet: RawSet) => DocumentFragment) => any;
+    };
+    static addAttributeCallBack(config: Config, attrName: string, callBack: (elements: Element, attrValue: string, obj: any) => void): {
+        add: (attrName: string, callBack: (elements: Element, attrValue: string, obj: any) => void) => any;
+    };
 }

package/DomRender.js

@@ -1,9 +1,19 @@
 "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.DomRender = void 0;
 var DomRenderProxy_1 = require("./DomRenderProxy");
 var PathRouter_1 = require("./routers/PathRouter");
 var HashRouter_1 = require("./routers/HashRouter");
+var RawSet_1 = require("./RawSet");
 var DomRender = /** @class */ (function () {
     function DomRender() {
     }
@@ -20,7 +30,7 @@ var DomRender = /** @class */ (function () {
         if (!config) {
             config = { window: window };
         }
-        config.routerType = config.routerType || 'hash';
+        config.routerType = config.routerType || 'none';
         var domRender = new DomRenderProxy_1.DomRenderProxy(obj, target, config);
         var dest = new Proxy(obj, domRender);
         robj = dest;
@@ -33,7 +43,46 @@ var DomRender = /** @class */ (function () {
         domRender.run(robj);
         return robj;
     };
+    DomRender.addComponent = function (config, _a, _b) {
+        var _c;
+        var type = _a.type, _d = _a.tagName, tagName = _d === void 0 ? type.name : _d;
+        var template = _b.template, _e = _b.styles, styles = _e === void 0 ? [] : _e;
+        var component = RawSet_1.RawSet.createComponentTargetElement(tagName, function (e, o, r2, counstructorParam) {
+            // console.log('------->',counstructorParam)
+            return new (type.bind.apply(type, __spreadArray([void 0], counstructorParam, false)))();
+        }, template, styles, config);
+        config.targetElements = (_c = config.targetElements) !== null && _c !== void 0 ? _c : [];
+        config.targetElements.push(component);
+        return {
+            add: function (source, front) {
+                return DomRender.addComponent(config, source, front);
+            }
+        };
+    };
+    DomRender.addAttribute = function (config, attrName, getThisObj, factory) {
+        var _a;
+        var targetAttribute = RawSet_1.RawSet.createComponentTargetAttribute(attrName, getThisObj, factory);
+        config.targetAttrs = (_a = config.targetAttrs) !== null && _a !== void 0 ? _a : [];
+        config.targetAttrs.push(targetAttribute);
+        return {
+            add: function (attrName, getThisObj, factory) {
+                return DomRender.addAttribute(config, attrName, getThisObj, factory);
+            }
+        };
+    };
+    DomRender.addAttributeCallBack = function (config, attrName, callBack) {
+        var _a;
+        config.applyEvents = (_a = config.applyEvents) !== null && _a !== void 0 ? _a : [];
+        config.applyEvents.push({
+            attrName: attrName,
+            callBack: callBack
+        });
+        return {
+            add: function (attrName, callBack) {
+                return DomRender.addAttributeCallBack(config, attrName, callBack);
+            }
+        };
+    };
     return DomRender;
 }());
 exports.DomRender = DomRender;
-// export default DomRender;

package/README.MD

@@ -328,17 +328,16 @@ validator
 
 - [examples](./examples/router)
 
-* config routerType: 'hash' | 'path'  (default: 'hash')
+* config routerType: 'hash' | 'path' | 'none'  (default: 'none')
 ```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)
-];
+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);
 ```
@@ -453,8 +452,12 @@ Code base
 
 
 ## LifeCycle
+* OnCreateRender
+  * onCreateRender(): created call
 * OnInitRender
   * onInitRender(): init render call
+* OnDestroyRender
+  * onDestroyRender(): component Destroy call
 
 ## Script
 ```typescript
@@ -476,23 +479,76 @@ const data = config.scripts.concat('head', 'tail')
 ```
 
 ---
-# Component
+# 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
-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!~')
-  }
-}
+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;
+        }
+);
 
-new DomRender.run(obj, target, {
-  targetElements: [
-    RawSet.createComponentTargetElement('my-element', (e, o, r) => new Component(), templat, styles, config)
-  ],
-});
+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

package/RawSet.d.ts

@@ -90,7 +90,7 @@ export declare class RawSet {
     }[]): void;
     static drThisCreate(element: Element, drThis: string, drVarOption: string, drStripOption: boolean | string | null, obj: any, config: Config): DocumentFragment;
     static createComponentTargetAttribute(name: string, getThisObj: (element: Element, attrValue: string, obj: any, rawSet: RawSet) => any, factory: (element: Element, attrValue: string, obj: any, rawSet: RawSet) => DocumentFragment): TargetAttr;
-    static createComponentTargetElement(name: string, objFactory: (element: Element, obj: any, rawSet: RawSet) => any, template: string | undefined, styles: string[] | undefined, config: Config): TargetElement;
+    static createComponentTargetElement(name: string, objFactory: (element: Element, obj: any, rawSet: RawSet, counstructorParam: any[]) => any, template: string | undefined, styles: string[] | undefined, config: Config): TargetElement;
     static exporesionGrouops(data: string): RegExpExecArray[];
 }
 export declare type Render = {
@@ -109,6 +109,7 @@ export declare type Render = {
 export declare type CreatorMetaData = {
     thisVariableName?: string | null;
     thisFullVariableName?: string | null;
+    componentKey?: string | null;
     rawSet: RawSet;
     innerHTML: string;
     rootCreator: any;

package/RawSet.js

@@ -339,23 +339,24 @@ var RawSet = /** @class */ (function () {
                     // const targetElement = config?.targetElements?.find(it => (!drAttr.drIf && !drAttr.drForOf && !drAttr.drFor && !drAttr.drRepeat) && it.name.toLowerCase() === element.tagName.toLowerCase());
                     var targetElement = (_9 = config === null || config === void 0 ? void 0 : config.targetElements) === null || _9 === void 0 ? void 0 : _9.find(function (it) { return it.name.toLowerCase() === element_2.tagName.toLowerCase(); });
                     if (targetElement) {
-                        var documentFragment_1 = targetElement.callBack(element_2, obj, this_1);
+                        var documentFragment = targetElement.callBack(element_2, obj, this_1);
                         // console.log('target-->',name, documentFragment)
-                        if (documentFragment_1) {
+                        if (documentFragment) {
                             var detectAction_1 = element_2.getAttribute(RawSet.DR_DETECT_NAME);
-                            if (detectAction_1 && documentFragment_1.render) {
+                            var render_1 = documentFragment.render;
+                            if (detectAction_1 && render_1) {
                                 this_1.detect = {
                                     action: function () {
                                         var script = "var $component = this.__render.component; var $element = this.__render.element; var $innerHTML = this.__render.innerHTML; var $attribute = this.__render.attribute;  ".concat(detectAction_1, " ");
                                         ScriptUtils_1.ScriptUtils.eval(script, Object.assign(obj, {
-                                            __render: documentFragment_1.render
+                                            __render: render_1
                                         }));
                                     }
                                 };
                             }
                             // fag.append(documentFragment)
-                            var rr = RawSet.checkPointCreates(documentFragment_1, config);
-                            (_10 = element_2.parentNode) === null || _10 === void 0 ? void 0 : _10.replaceChild(documentFragment_1, element_2);
+                            var rr = RawSet.checkPointCreates(documentFragment, config);
+                            (_10 = element_2.parentNode) === null || _10 === void 0 ? void 0 : _10.replaceChild(documentFragment, element_2);
                             raws.push.apply(raws, rr);
                             onElementInitCallBack.push({
                                 name: targetElement.name.toLowerCase(),
@@ -422,6 +423,20 @@ var RawSet = /** @class */ (function () {
             var it_2 = onAttrInitCallBack_1[_25];
             var r = (_22 = config === null || config === void 0 ? void 0 : config.onAttrInit) === null || _22 === void 0 ? void 0 : _22.call(config, it_2.attrName, it_2.attrValue, obj, this);
         }
+        // component destroy
+        if (obj.__domrender_components) {
+            Object.entries(obj.__domrender_components).forEach(function (_a) {
+                var _b, _c;
+                var key = _a[0], value = _a[1];
+                var domrenderComponentNew = value.__domrender_component_new;
+                var rawSet = domrenderComponentNew === null || domrenderComponentNew === void 0 ? void 0 : domrenderComponentNew.rawSet;
+                if (rawSet && !rawSet.isConnected) {
+                    (_c = (_b = obj.__domrender_components[key]) === null || _b === void 0 ? void 0 : _b.onDestroyRender) === null || _c === void 0 ? void 0 : _c.call(_b, domrenderComponentNew);
+                    delete obj.__domrender_components[key];
+                }
+                // console.log('destroy', key, value);
+            });
+        }
         return raws;
     };
     RawSet.prototype.applyEvent = function (obj, fragment, config) {
@@ -753,21 +768,16 @@ var RawSet = /** @class */ (function () {
             styles: styles,
             template: template,
             callBack: function (element, obj, rawSet) {
-                var _a, _b, _c, _d;
+                var _a, _b, _c, _d, _e;
                 // console.log('callback------->')
                 if (!obj.__domrender_components) {
                     obj.__domrender_components = {};
                 }
                 var domrenderComponents = obj.__domrender_components;
                 var componentKey = '_' + RandomUtils_1.RandomUtils.getRandomString(20);
-                // console.log('callback settttt---a-->', componentKey, objFactory, objFactory(element, obj, rawSet))
-                domrenderComponents[componentKey] = objFactory(element, obj, rawSet);
-                var instance = domrenderComponents[componentKey];
                 var attribute = DomUtils_1.DomUtils.getAttributeToObject(element);
-                var onCreate = element.getAttribute('dr-on-create');
                 var renderScript = 'var $component = this.__render.component; var $element = this.__render.element; var $router = this.__render.router; var $innerHTML = this.__render.innerHTML; var $attribute = this.__render.attribute;';
                 var render = Object.freeze({
-                    component: instance,
                     element: element,
                     innerHTML: element.innerHTML,
                     attribute: attribute,
@@ -777,18 +787,31 @@ var RawSet = /** @class */ (function () {
                     scripts: EventManager_1.EventManager.setBindProperty((_a = config.scripts) !== null && _a !== void 0 ? _a : {}, obj)
                     // eslint-disable-next-line no-use-before-define
                 });
+                var constructor = element.getAttribute('dr-constructor');
+                var constructorParam = [];
+                if (constructor) {
+                    var script = "".concat(renderScript, " return ").concat(constructor, " ");
+                    var param = (_b = ScriptUtils_1.ScriptUtils.eval(script, obj)) !== null && _b !== void 0 ? _b : [];
+                    if (!Array.isArray(param)) {
+                        param = [param];
+                    }
+                    constructorParam = param;
+                }
+                domrenderComponents[componentKey] = objFactory(element, obj, rawSet, constructorParam);
+                var instance = domrenderComponents[componentKey];
+                render = __assign({ component: instance }, render);
+                var onCreate = element.getAttribute('dr-on-create');
                 this.__render = render;
                 var createParam;
                 if (onCreate) {
                     var script = "".concat(renderScript, " return ").concat(onCreate, " ");
                     createParam = ScriptUtils_1.ScriptUtils.eval(script, obj);
-                    if (createParam) {
-                        (_b = instance === null || instance === void 0 ? void 0 : instance.onCreateRender) === null || _b === void 0 ? void 0 : _b.call(instance, createParam);
-                    }
                 }
-                var i = instance.__domrender_component_new = ((_c = instance.__domrender_component_new) !== null && _c !== void 0 ? _c : new Proxy({}, new Types_1.DomRenderFinalProxy()));
+                (_c = instance === null || instance === void 0 ? void 0 : instance.onCreateRender) === null || _c === void 0 ? void 0 : _c.call(instance, createParam);
+                var i = instance.__domrender_component_new = ((_d = instance.__domrender_component_new) !== null && _d !== void 0 ? _d : new Proxy({}, new Types_1.DomRenderFinalProxy()));
                 i.thisVariableName = rawSet.point.thisVariableName;
                 i.thisFullVariableName = "this.__domrender_components.".concat(componentKey);
+                i.componentKey = componentKey;
                 i.rawSet = rawSet;
                 i.innerHTML = element.innerHTML;
                 i.rootCreator = new Proxy(obj, new Types_1.DomRenderFinalProxy());
@@ -812,7 +835,7 @@ var RawSet = /** @class */ (function () {
                         __render: render
                     }));
                 }
-                var innerHTML = ((_d = styles === null || styles === void 0 ? void 0 : styles.map(function (it) { return "<style>".concat(it, "</style>"); })) !== null && _d !== void 0 ? _d : []).join(' ') + (applayTemplate !== null && applayTemplate !== void 0 ? applayTemplate : '');
+                var innerHTML = ((_e = styles === null || styles === void 0 ? void 0 : styles.map(function (it) { return "<style>".concat(it, "</style>"); })) !== null && _e !== void 0 ? _e : []).join(' ') + (applayTemplate !== null && applayTemplate !== void 0 ? applayTemplate : '');
                 element.innerHTML = innerHTML;
                 // console.log('------>', element.innerHTML, obj)
                 var data = RawSet.drThisCreate(element, "this.__domrender_components.".concat(componentKey), '', true, obj, config);

package/dist/bundle.js

@@ -53,6 +53,15 @@ var __assign = function () {
 
   return __assign.apply(this, arguments);
 };
+function __spreadArray(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));
+}
 
 var ValidUtils = /** @class */ (function () {
     function ValidUtils() {
@@ -617,7 +626,7 @@ var EventManager = /** @class */ (function () {
         var elements = Array.from(childNodes).filter(function (it) { return it.nodeType === 1; }).map(function (it) { return it; });
         elements.forEach(function (it) {
             var _a;
-            (_a = config === null || config === void 0 ? void 0 : config.applyEvents) === null || _a === void 0 ? void 0 : _a.filter(function (ta) { return it.getAttribute(ta.attrName); }).forEach(function (ta) { return ta.callBack(it, it.getAttribute(ta.attrName), obj); });
+            (_a = config === null || config === void 0 ? void 0 : config.applyEvents) === null || _a === void 0 ? void 0 : _a.filter(function (ta) { return it.getAttribute(ta.attrName) !== null; }).forEach(function (ta) { return ta.callBack(it, it.getAttribute(ta.attrName), obj); });
         });
     };
     // eslint-disable-next-line no-undef
@@ -1570,23 +1579,24 @@ var RawSet = /** @class */ (function () {
                     // const targetElement = config?.targetElements?.find(it => (!drAttr.drIf && !drAttr.drForOf && !drAttr.drFor && !drAttr.drRepeat) && it.name.toLowerCase() === element.tagName.toLowerCase());
                     var targetElement = (_9 = config === null || config === void 0 ? void 0 : config.targetElements) === null || _9 === void 0 ? void 0 : _9.find(function (it) { return it.name.toLowerCase() === element_2.tagName.toLowerCase(); });
                     if (targetElement) {
-                        var documentFragment_1 = targetElement.callBack(element_2, obj, this_1);
+                        var documentFragment = targetElement.callBack(element_2, obj, this_1);
                         // console.log('target-->',name, documentFragment)
-                        if (documentFragment_1) {
+                        if (documentFragment) {
                             var detectAction_1 = element_2.getAttribute(RawSet.DR_DETECT_NAME);
-                            if (detectAction_1 && documentFragment_1.render) {
+                            var render_1 = documentFragment.render;
+                            if (detectAction_1 && render_1) {
                                 this_1.detect = {
                                     action: function () {
                                         var script = "var $component = this.__render.component; var $element = this.__render.element; var $innerHTML = this.__render.innerHTML; var $attribute = this.__render.attribute;  ".concat(detectAction_1, " ");
                                         ScriptUtils.eval(script, Object.assign(obj, {
-                                            __render: documentFragment_1.render
+                                            __render: render_1
                                         }));
                                     }
                                 };
                             }
                             // fag.append(documentFragment)
-                            var rr = RawSet.checkPointCreates(documentFragment_1, config);
-                            (_10 = element_2.parentNode) === null || _10 === void 0 ? void 0 : _10.replaceChild(documentFragment_1, element_2);
+                            var rr = RawSet.checkPointCreates(documentFragment, config);
+                            (_10 = element_2.parentNode) === null || _10 === void 0 ? void 0 : _10.replaceChild(documentFragment, element_2);
                             raws.push.apply(raws, rr);
                             onElementInitCallBack.push({
                                 name: targetElement.name.toLowerCase(),
@@ -1653,6 +1663,20 @@ var RawSet = /** @class */ (function () {
             var it_2 = onAttrInitCallBack_1[_25];
             (_22 = config === null || config === void 0 ? void 0 : config.onAttrInit) === null || _22 === void 0 ? void 0 : _22.call(config, it_2.attrName, it_2.attrValue, obj, this);
         }
+        // component destroy
+        if (obj.__domrender_components) {
+            Object.entries(obj.__domrender_components).forEach(function (_a) {
+                var _b, _c;
+                var key = _a[0], value = _a[1];
+                var domrenderComponentNew = value.__domrender_component_new;
+                var rawSet = domrenderComponentNew === null || domrenderComponentNew === void 0 ? void 0 : domrenderComponentNew.rawSet;
+                if (rawSet && !rawSet.isConnected) {
+                    (_c = (_b = obj.__domrender_components[key]) === null || _b === void 0 ? void 0 : _b.onDestroyRender) === null || _c === void 0 ? void 0 : _c.call(_b, domrenderComponentNew);
+                    delete obj.__domrender_components[key];
+                }
+                // console.log('destroy', key, value);
+            });
+        }
         return raws;
     };
     RawSet.prototype.applyEvent = function (obj, fragment, config) {
@@ -1984,21 +2008,16 @@ var RawSet = /** @class */ (function () {
             styles: styles,
             template: template,
             callBack: function (element, obj, rawSet) {
-                var _a, _b, _c, _d;
+                var _a, _b, _c, _d, _e;
                 // console.log('callback------->')
                 if (!obj.__domrender_components) {
                     obj.__domrender_components = {};
                 }
                 var domrenderComponents = obj.__domrender_components;
                 var componentKey = '_' + RandomUtils.getRandomString(20);
-                // console.log('callback settttt---a-->', componentKey, objFactory, objFactory(element, obj, rawSet))
-                domrenderComponents[componentKey] = objFactory(element, obj, rawSet);
-                var instance = domrenderComponents[componentKey];
                 var attribute = DomUtils.getAttributeToObject(element);
-                var onCreate = element.getAttribute('dr-on-create');
                 var renderScript = 'var $component = this.__render.component; var $element = this.__render.element; var $router = this.__render.router; var $innerHTML = this.__render.innerHTML; var $attribute = this.__render.attribute;';
                 var render = Object.freeze({
-                    component: instance,
                     element: element,
                     innerHTML: element.innerHTML,
                     attribute: attribute,
@@ -2008,18 +2027,31 @@ var RawSet = /** @class */ (function () {
                     scripts: EventManager.setBindProperty((_a = config.scripts) !== null && _a !== void 0 ? _a : {}, obj)
                     // eslint-disable-next-line no-use-before-define
                 });
+                var constructor = element.getAttribute('dr-constructor');
+                var constructorParam = [];
+                if (constructor) {
+                    var script = "".concat(renderScript, " return ").concat(constructor, " ");
+                    var param = (_b = ScriptUtils.eval(script, obj)) !== null && _b !== void 0 ? _b : [];
+                    if (!Array.isArray(param)) {
+                        param = [param];
+                    }
+                    constructorParam = param;
+                }
+                domrenderComponents[componentKey] = objFactory(element, obj, rawSet, constructorParam);
+                var instance = domrenderComponents[componentKey];
+                render = __assign({ component: instance }, render);
+                var onCreate = element.getAttribute('dr-on-create');
                 this.__render = render;
                 var createParam;
                 if (onCreate) {
                     var script = "".concat(renderScript, " return ").concat(onCreate, " ");
                     createParam = ScriptUtils.eval(script, obj);
-                    if (createParam) {
-                        (_b = instance === null || instance === void 0 ? void 0 : instance.onCreateRender) === null || _b === void 0 ? void 0 : _b.call(instance, createParam);
-                    }
                 }
-                var i = instance.__domrender_component_new = ((_c = instance.__domrender_component_new) !== null && _c !== void 0 ? _c : new Proxy({}, new DomRenderFinalProxy()));
+                (_c = instance === null || instance === void 0 ? void 0 : instance.onCreateRender) === null || _c === void 0 ? void 0 : _c.call(instance, createParam);
+                var i = instance.__domrender_component_new = ((_d = instance.__domrender_component_new) !== null && _d !== void 0 ? _d : new Proxy({}, new DomRenderFinalProxy()));
                 i.thisVariableName = rawSet.point.thisVariableName;
                 i.thisFullVariableName = "this.__domrender_components.".concat(componentKey);
+                i.componentKey = componentKey;
                 i.rawSet = rawSet;
                 i.innerHTML = element.innerHTML;
                 i.rootCreator = new Proxy(obj, new DomRenderFinalProxy());
@@ -2043,7 +2075,7 @@ var RawSet = /** @class */ (function () {
                         __render: render
                     }));
                 }
-                var innerHTML = ((_d = styles === null || styles === void 0 ? void 0 : styles.map(function (it) { return "<style>".concat(it, "</style>"); })) !== null && _d !== void 0 ? _d : []).join(' ') + (applayTemplate !== null && applayTemplate !== void 0 ? applayTemplate : '');
+                var innerHTML = ((_e = styles === null || styles === void 0 ? void 0 : styles.map(function (it) { return "<style>".concat(it, "</style>"); })) !== null && _e !== void 0 ? _e : []).join(' ') + (applayTemplate !== null && applayTemplate !== void 0 ? applayTemplate : '');
                 element.innerHTML = innerHTML;
                 // console.log('------>', element.innerHTML, obj)
                 var data = RawSet.drThisCreate(element, "this.__domrender_components.".concat(componentKey), '', true, obj, config);
@@ -2435,14 +2467,26 @@ var Router = /** @class */ (function () {
     function Router(rootObj, window) {
         this.rootObj = rootObj;
         this.window = window;
+        this.attachCallbacks = new Set();
         this.go(this.getUrl());
     }
+    Router.prototype.addAttachCallback = function (callback) {
+        this.attachCallbacks.add(callback);
+    };
     Router.prototype.attach = function () {
+        var _this = this;
         var proxy = this.rootObj._DomRender_proxy;
         if (proxy) {
-            var key = "___".concat(EventManager.ROUTER_VARNAME, ".test");
+            var key = "___".concat(EventManager.ROUTER_VARNAME);
             proxy.render(key);
         }
+        this.attachCallbacks.forEach(function (it) {
+            it(_this.getRouteData());
+        });
+    };
+    Router.prototype.testRegexp = function (regexp) {
+        var b = RegExp(regexp).test(this.getPath());
+        return b;
     };
     Router.prototype.getRouteData = function (urlExpression) {
         var newVar = {
@@ -2460,7 +2504,7 @@ var Router = /** @class */ (function () {
                 newVar.pathData = data_1;
             }
         }
-        return newVar;
+        return Object.freeze(newVar);
     };
     // eslint-disable-next-line no-dupe-class-members
     Router.prototype.go = function (path, urlExpressionOrData, dataOrTitle, title) {
@@ -2479,8 +2523,16 @@ var Router = /** @class */ (function () {
         this.attach();
     };
     Router.prototype.getPathData = function (urlExpression, currentUrl) {
-        if (currentUrl === void 0) { currentUrl = this.getPath(); }
         // console.log('getPathData-->', urlExpression, currentUrl);
+        // const regexps = StringUtils.regexExec(/(\{(?:\{??[^{]*?\}))/g, urlExpression);
+        // const regexpMap = new Map<string, string>()
+        // regexps.forEach((item, idx) => {
+        //     const key = `{${idx}}`;
+        //     const value = item[0];
+        //     urlExpression = urlExpression.replace(value, key)
+        //     regexpMap.set(key, value)
+        // })
+        if (currentUrl === void 0) { currentUrl = this.getPath(); }
         var urls = currentUrl.split('?')[0].split('/');
         var urlExpressions = urlExpression.split('/');
         if (urls.length !== urlExpressions.length) {
@@ -2489,6 +2541,7 @@ var Router = /** @class */ (function () {
         var data = {};
         for (var i = 0; i < urlExpressions.length; i++) {
             var it_1 = urlExpressions[i];
+            // it = regexpMap.get(it) ?? it;
             var urlit = urls[i];
             // ex) {serialNo:[0-9]+} or {no}  ..
             var execResult = /^\{(.+)\}$/g.exec(it_1);
@@ -2500,7 +2553,8 @@ var Router = /** @class */ (function () {
             }
             // regex check
             var _a = execResult[1].split(':'), name_1 = _a[0], regex = _a[1]; // group1
-            if (regex && !new RegExp(regex).test(urlit)) {
+            var regExp = RegExp(regex);
+            if (regex && !regExp.test(urlit)) {
                 return;
             }
             data[name_1] = urlit;
@@ -2646,7 +2700,7 @@ var DomRender = /** @class */ (function () {
         if (!config) {
             config = { window: window };
         }
-        config.routerType = config.routerType || 'hash';
+        config.routerType = config.routerType || 'none';
         var domRender = new DomRenderProxy(obj, target, config);
         var dest = new Proxy(obj, domRender);
         robj = dest;
@@ -2659,9 +2713,48 @@ var DomRender = /** @class */ (function () {
         domRender.run(robj);
         return robj;
     };
+    DomRender.addComponent = function (config, _a, _b) {
+        var _c;
+        var type = _a.type, _d = _a.tagName, tagName = _d === void 0 ? type.name : _d;
+        var template = _b.template, _e = _b.styles, styles = _e === void 0 ? [] : _e;
+        var component = RawSet.createComponentTargetElement(tagName, function (e, o, r2, counstructorParam) {
+            // console.log('------->',counstructorParam)
+            return new (type.bind.apply(type, __spreadArray([void 0], counstructorParam, false)))();
+        }, template, styles, config);
+        config.targetElements = (_c = config.targetElements) !== null && _c !== void 0 ? _c : [];
+        config.targetElements.push(component);
+        return {
+            add: function (source, front) {
+                return DomRender.addComponent(config, source, front);
+            }
+        };
+    };
+    DomRender.addAttribute = function (config, attrName, getThisObj, factory) {
+        var _a;
+        var targetAttribute = RawSet.createComponentTargetAttribute(attrName, getThisObj, factory);
+        config.targetAttrs = (_a = config.targetAttrs) !== null && _a !== void 0 ? _a : [];
+        config.targetAttrs.push(targetAttribute);
+        return {
+            add: function (attrName, getThisObj, factory) {
+                return DomRender.addAttribute(config, attrName, getThisObj, factory);
+            }
+        };
+    };
+    DomRender.addAttributeCallBack = function (config, attrName, callBack) {
+        var _a;
+        config.applyEvents = (_a = config.applyEvents) !== null && _a !== void 0 ? _a : [];
+        config.applyEvents.push({
+            attrName: attrName,
+            callBack: callBack
+        });
+        return {
+            add: function (attrName, callBack) {
+                return DomRender.addAttributeCallBack(config, attrName, callBack);
+            }
+        };
+    };
     return DomRender;
-}());
-// export default DomRender;
+}());
 
 var RenderManager = /** @class */ (function () {
     function RenderManager() {
@@ -2887,34 +2980,34 @@ var CountLessThanEqualsUnCheckedValidatorArray = /** @class */ (function (_super
     return CountLessThanEqualsUnCheckedValidatorArray;
 }(ValidatorArray));
 
-var CountUnCheckedValidatorArray = /** @class */ (function (_super) {
-    __extends(CountUnCheckedValidatorArray, _super);
-    function CountUnCheckedValidatorArray(count, value, target, event, autoValid) {
+var CountLessThanUnCheckedValidatorArray = /** @class */ (function (_super) {
+    __extends(CountLessThanUnCheckedValidatorArray, _super);
+    function CountLessThanUnCheckedValidatorArray(count, value, target, event, autoValid) {
         if (autoValid === void 0) { autoValid = true; }
         var _this = _super.call(this, value, target, event, autoValid) || this;
         _this.count = count;
         return _this;
     }
-    CountUnCheckedValidatorArray.prototype.valid = function () {
+    CountLessThanUnCheckedValidatorArray.prototype.valid = function () {
         var _a;
-        return ((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return !it.checked; }).length >= this.count;
+        return ((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return !it.checked; }).length < this.count;
     };
-    return CountUnCheckedValidatorArray;
+    return CountLessThanUnCheckedValidatorArray;
 }(ValidatorArray));
 
-var CountLessThanUnCheckedValidatorArray = /** @class */ (function (_super) {
-    __extends(CountLessThanUnCheckedValidatorArray, _super);
-    function CountLessThanUnCheckedValidatorArray(count, value, target, event, autoValid) {
+var CountUnCheckedValidatorArray = /** @class */ (function (_super) {
+    __extends(CountUnCheckedValidatorArray, _super);
+    function CountUnCheckedValidatorArray(count, value, target, event, autoValid) {
         if (autoValid === void 0) { autoValid = true; }
         var _this = _super.call(this, value, target, event, autoValid) || this;
         _this.count = count;
         return _this;
     }
-    CountLessThanUnCheckedValidatorArray.prototype.valid = function () {
+    CountUnCheckedValidatorArray.prototype.valid = function () {
         var _a;
-        return ((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return !it.checked; }).length < this.count;
+        return ((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return !it.checked; }).length >= this.count;
     };
-    return CountLessThanUnCheckedValidatorArray;
+    return CountUnCheckedValidatorArray;
 }(ValidatorArray));
 
 var EmptyValidator = /** @class */ (function (_super) {

package/events/EventManager.js

@@ -190,7 +190,7 @@ var EventManager = /** @class */ (function () {
         var elements = Array.from(childNodes).filter(function (it) { return it.nodeType === 1; }).map(function (it) { return it; });
         elements.forEach(function (it) {
             var _a;
-            (_a = config === null || config === void 0 ? void 0 : config.applyEvents) === null || _a === void 0 ? void 0 : _a.filter(function (ta) { return it.getAttribute(ta.attrName); }).forEach(function (ta) { return ta.callBack(it, it.getAttribute(ta.attrName), obj); });
+            (_a = config === null || config === void 0 ? void 0 : config.applyEvents) === null || _a === void 0 ? void 0 : _a.filter(function (ta) { return it.getAttribute(ta.attrName) !== null; }).forEach(function (ta) { return ta.callBack(it, it.getAttribute(ta.attrName), obj); });
         });
     };
     // eslint-disable-next-line no-undef

package/lifecycle/OnDestroyRender.d.ts

@@ -0,0 +1,4 @@
+import { CreatorMetaData } from '../RawSet';
+export interface OnDestroyRender {
+    onDestroyRender(metaData: CreatorMetaData): void;
+}

package/lifecycle/OnDestroyRender.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dom-render",
-  "version": "1.0.73",
+  "version": "1.0.74",
   "main": "DomRender.js",
   "license": "MIT",
   "description": "dom-render",

package/routers/Router.d.ts

@@ -8,8 +8,11 @@ export declare type RouteData = {
 export declare abstract class Router {
     rootObj: any;
     window: Window;
+    private attachCallbacks;
     constructor(rootObj: any, window: Window);
+    addAttachCallback(callback: (routeData: RouteData) => void): void;
     attach(): void;
+    testRegexp(regexp: string): boolean;
     abstract test(urlExpression: string): boolean;
     abstract set(path: string, data?: any, title?: string): void;
     getRouteData(urlExpression?: string): RouteData;

package/routers/Router.js

@@ -17,14 +17,26 @@ var Router = /** @class */ (function () {
     function Router(rootObj, window) {
         this.rootObj = rootObj;
         this.window = window;
+        this.attachCallbacks = new Set();
         this.go(this.getUrl());
     }
+    Router.prototype.addAttachCallback = function (callback) {
+        this.attachCallbacks.add(callback);
+    };
     Router.prototype.attach = function () {
+        var _this = this;
         var proxy = this.rootObj._DomRender_proxy;
         if (proxy) {
-            var key = "___".concat(EventManager_1.EventManager.ROUTER_VARNAME, ".test");
+            var key = "___".concat(EventManager_1.EventManager.ROUTER_VARNAME);
             proxy.render(key);
         }
+        this.attachCallbacks.forEach(function (it) {
+            it(_this.getRouteData());
+        });
+    };
+    Router.prototype.testRegexp = function (regexp) {
+        var b = RegExp(regexp).test(this.getPath());
+        return b;
     };
     Router.prototype.getRouteData = function (urlExpression) {
         var newVar = {
@@ -42,7 +54,7 @@ var Router = /** @class */ (function () {
                 newVar.pathData = data_1;
             }
         }
-        return newVar;
+        return Object.freeze(newVar);
     };
     // eslint-disable-next-line no-dupe-class-members
     Router.prototype.go = function (path, urlExpressionOrData, dataOrTitle, title) {
@@ -61,8 +73,16 @@ var Router = /** @class */ (function () {
         this.attach();
     };
     Router.prototype.getPathData = function (urlExpression, currentUrl) {
-        if (currentUrl === void 0) { currentUrl = this.getPath(); }
         // console.log('getPathData-->', urlExpression, currentUrl);
+        // const regexps = StringUtils.regexExec(/(\{(?:\{??[^{]*?\}))/g, urlExpression);
+        // const regexpMap = new Map<string, string>()
+        // regexps.forEach((item, idx) => {
+        //     const key = `{${idx}}`;
+        //     const value = item[0];
+        //     urlExpression = urlExpression.replace(value, key)
+        //     regexpMap.set(key, value)
+        // })
+        if (currentUrl === void 0) { currentUrl = this.getPath(); }
         var urls = currentUrl.split('?')[0].split('/');
         var urlExpressions = urlExpression.split('/');
         if (urls.length !== urlExpressions.length) {
@@ -71,6 +91,7 @@ var Router = /** @class */ (function () {
         var data = {};
         for (var i = 0; i < urlExpressions.length; i++) {
             var it_1 = urlExpressions[i];
+            // it = regexpMap.get(it) ?? it;
             var urlit = urls[i];
             // ex) {serialNo:[0-9]+} or {no}  ..
             var execResult = /^\{(.+)\}$/g.exec(it_1);
@@ -82,7 +103,8 @@ var Router = /** @class */ (function () {
             }
             // regex check
             var _a = execResult[1].split(':'), name_1 = _a[0], regex = _a[1]; // group1
-            if (regex && !new RegExp(regex).test(urlit)) {
+            var regExp = RegExp(regex);
+            if (regex && !regExp.test(urlit)) {
                 return;
             }
             data[name_1] = urlit;