npm - dom-render - Versions diffs - 1.0.89 → 1.0.90 - Mend

dom-render 1.0.89 → 1.0.90

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/DomRenderProxy.js +31 -11
package/README.MD +18 -11
package/components/ComponentSet.d.ts +1 -1
package/dist/bundle.js +275 -248
package/events/EventManager.js +0 -1
package/lifecycle/OnInitRender.d.ts +1 -6
package/operators/DrForm.js +4 -4
package/package.json +1 -1
package/rawsets/RawSet.d.ts +6 -0
package/rawsets/RawSet.js +32 -14

package/DomRenderProxy.js CHANGED Viewed

@@ -1,4 +1,13 @@
 "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("./rawsets/RawSet");
@@ -56,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);
@@ -81,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();

package/README.MD CHANGED Viewed

@@ -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>
@@ -433,7 +433,7 @@ const data = DomRender.run(new Data(), document.querySelector('#app')!, config);
   <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>
+  <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>
@@ -638,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>
@@ -654,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>
@@ -712,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}$
@@ -722,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 CHANGED Viewed

@@ -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/dist/bundle.js CHANGED Viewed

@@ -947,7 +947,6 @@ var EventManager = /** @class */ (function () {
     EventManager.ownerVariablePathAttrName = 'dr-owner-variable-path';
     EventManager.attrPrefix = 'dr-';
     EventManager.onInitAttrName = EventManager.attrPrefix + 'on-init';
-    // public static readonly onComponentInitAttrName = EventManager.attrPrefix + 'on-component-init';
     EventManager.valueAttrName = EventManager.attrPrefix + 'value';
     EventManager.valueLinkAttrName = EventManager.attrPrefix + 'value-link';
     EventManager.attrAttrName = EventManager.attrPrefix + 'attr';
@@ -1465,7 +1464,7 @@ var DrForm = /** @class */ (function (_super) {
             RawSet.drFormOtherMoveAttr(this.elementSource.element, 'name', 'temp-name', this.source.config);
             var data = ScriptUtils.evalReturn("".concat(this.elementSource.attrs.drForm), this.source.obj);
             var childs = Array.from(this.elementSource.element.querySelectorAll('[name]'));
-            var fromName = ScriptUtils.evalReturn((_b = this.elementSource.element.getAttribute('dr-form:name')) !== null && _b !== void 0 ? _b : '', this.source.obj);
+            var fromName = ScriptUtils.evalReturn((_b = this.elementSource.element.getAttribute("".concat(RawSet.DR_FORM_NAME, ":name"))) !== null && _b !== void 0 ? _b : '', this.source.obj);
             var thisName = fromName !== null && fromName !== void 0 ? fromName : this.elementSource.element.getAttribute('name');
             // console.log('dr-form:name', thisName, element.getAttribute('dr-form:name'), obj, element);
             // // 자기자신이 Input 대상일때
@@ -1479,10 +1478,10 @@ var DrForm = /** @class */ (function (_super) {
             }
             childs.forEach(function (it) {
                 var _a, _b, _c, _d, _e;
-                var eventName = (_a = it.getAttribute('dr-form:event')) !== null && _a !== void 0 ? _a : 'change';
-                var validatorName = it.getAttribute('dr-form:validator');
+                var eventName = (_a = it.getAttribute("".concat(RawSet.DR_FORM_NAME, ":event"))) !== null && _a !== void 0 ? _a : 'change';
+                var validatorName = it.getAttribute("".concat(RawSet.DR_FORM_NAME, ":validator"));
                 var attrEventName = EventManager.attrPrefix + 'event-' + eventName;
-                var varpath = (_c = ScriptUtils.evalReturn((_b = _this.elementSource.element.getAttribute('dr-form:name')) !== null && _b !== void 0 ? _b : '', _this.source.obj)) !== null && _c !== void 0 ? _c : it.getAttribute('name');
+                var varpath = (_c = ScriptUtils.evalReturn((_b = _this.elementSource.element.getAttribute("".concat(RawSet.DR_FORM_NAME, ":name"))) !== null && _b !== void 0 ? _b : '', _this.source.obj)) !== null && _c !== void 0 ? _c : it.getAttribute('name');
                 if (varpath != null) {
                     if (validatorName) {
                         ScriptUtils.eval("\n                                    ".concat(_this.render.bindScript, "\n                                    const validator = typeof ").concat(validatorName, " ==='function' ?  new  ").concat(validatorName, "() : ").concat(validatorName, ";\n                                    ").concat(_this.elementSource.attrs.drForm, "['").concat(varpath, "'] = validator;\n                                "), Object.assign(_this.source.obj, {
@@ -1851,7 +1850,6 @@ var RawSet = /** @class */ (function () {
                 var targetScripts_1 = targetAttrNames.map(function (it) { return element_1.getAttribute(it); }).filter(function (it) { return it; });
                 var targetAttrMap = element_1.getAttribute(EventManager.normalAttrMapAttrName);
                 if (targetAttrMap) {
-                    // console.log('----->', targetAttr);
                     new Map(JSON.parse(targetAttrMap)).forEach(function (v, k) {
                         targetScripts_1.push(v);
                     });
@@ -2000,17 +1998,29 @@ var RawSet = /** @class */ (function () {
         });
         // 중요 style isolation 나중에 :scope로 대체 가능할듯.
         RawSet.generateStyleSheetsLocal();
-        // console.log('-22222-')
-        // alert(1);
         for (var _p = 0, onThisComponentSetCallBacks_1 = onThisComponentSetCallBacks; _p < onThisComponentSetCallBacks_1.length; _p++) {
             var it_1 = onThisComponentSetCallBacks_1[_p];
-            (_c = (_b = it_1.obj).onInitRender) === null || _c === void 0 ? void 0 : _c.call(_b);
+            (_c = (_b = it_1.obj) === null || _b === void 0 ? void 0 : _b.onInitRender) === null || _c === void 0 ? void 0 : _c.call(_b);
         }
         for (var _q = 0, onElementInitCallBacks_1 = onElementInitCallBacks; _q < onElementInitCallBacks_1.length; _q++) {
             var it_2 = onElementInitCallBacks_1[_q];
-            (_g = (_f = (_e = (_d = it_2.targetElement) === null || _d === void 0 ? void 0 : _d.__render) === null || _e === void 0 ? void 0 : _e.component) === null || _f === void 0 ? void 0 : _f.onInitRender) === null || _g === void 0 ? void 0 : _g.call(_f, Object.freeze({ render: (_h = it_2.targetElement) === null || _h === void 0 ? void 0 : _h.__render, creatorMetaData: (_j = it_2.targetElement) === null || _j === void 0 ? void 0 : _j.__creatorMetaData }));
+            if (((_e = (_d = it_2.targetElement) === null || _d === void 0 ? void 0 : _d.__render) === null || _e === void 0 ? void 0 : _e.element) && ((_g = (_f = it_2.targetElement) === null || _f === void 0 ? void 0 : _f.__render) === null || _g === void 0 ? void 0 : _g.component)) {
+                var oninit = it_2.targetElement.__render.element.getAttribute(RawSet.DR_ON_INIT_ARGUMENTS_OPTIONNAME); // dr-on-component-init
+                var param = [];
+                if (oninit) {
+                    var script = "".concat(it_2.targetElement.__render.renderScript, " return ").concat(oninit, " ");
+                    param = ScriptUtils.eval(script, Object.assign(obj, {
+                        __render: it_2.targetElement.__render
+                    }));
+                    if (!Array.isArray(param)) {
+                        param = [param];
+                    }
+                }
+                (_j = (_h = it_2.targetElement.__render.component).onInitRender) === null || _j === void 0 ? void 0 : _j.call.apply(_j, __spreadArray([_h], param, false));
+            }
             (_k = config === null || config === void 0 ? void 0 : config.onElementInit) === null || _k === void 0 ? void 0 : _k.call(config, it_2.name, obj, this, it_2.targetElement);
         }
+        // TODO: 이부분도 위에 targetElement 처럼 해야될까?
         for (var _r = 0, onAttrInitCallBacks_1 = onAttrInitCallBacks; _r < onAttrInitCallBacks_1.length; _r++) {
             var it_3 = onAttrInitCallBacks_1[_r];
             (_l = config === null || config === void 0 ? void 0 : config.onAttrInit) === null || _l === void 0 ? void 0 : _l.call(config, it_3.attrName, it_3.attrValue, obj, this);
@@ -2408,7 +2418,7 @@ var RawSet = /** @class */ (function () {
             // const metaEnd = RawSet.metaEnd(id);
             // n.innerHTML = metaStart + style + (set.template ?? '') + metaEnd;
             // dr-on-create onCreateRender
-            var onCreate = element.getAttribute("".concat(EventManager.attrPrefix, "on-create"));
+            var onCreate = element.getAttribute(RawSet.DR_ON_CREATE_ARGUMENTS_OPTIONNAME);
             var renderScript = '';
             var createParam = [];
             if (onCreate) {
@@ -2420,7 +2430,8 @@ var RawSet = /** @class */ (function () {
             }
             (_d = (_c = set.obj) === null || _c === void 0 ? void 0 : _c.onCreateRender) === null || _d === void 0 ? void 0 : _d.call.apply(_d, __spreadArray([_c], createParam, false));
             // dr-on-component-init
-            var oninit = element.getAttribute("".concat(EventManager.attrPrefix, "on-component-init")); // dr-on-component-init
+            // const oninit = element.getAttribute(`${EventManager.attrPrefix}on-component-init`); // dr-on-component-init
+            var oninit = element.getAttribute(RawSet.DR_ON_CREATED_CALLBACK_OPTIONNAME); // dr-on-component-init
             if (oninit) {
                 var script = "".concat(renderScript, "  ").concat(oninit, " ");
                 ScriptUtils.eval(script, obj);
@@ -2494,7 +2505,7 @@ 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("".concat(EventManager.attrPrefix, "constructor"));
+                var constructor = element.getAttribute(RawSet.DR_ON_CONSTRUCTOR_ARGUMENTS_OPTIONNAME);
                 var constructorParam = [];
                 // dr-constructor
                 if (constructor) {
@@ -2533,9 +2544,9 @@ var RawSet = /** @class */ (function () {
                     });
                 }
                 // dr-on-create onCreateRender
-                var onCreate = element.getAttribute("".concat(EventManager.attrPrefix, "on-create"));
+                var onCreate = element.getAttribute(RawSet.DR_ON_CREATE_ARGUMENTS_OPTIONNAME);
                 this.__render = render;
-                var createParam = [i];
+                var createParam = [];
                 if (onCreate) {
                     var script = "".concat(renderScript, " return ").concat(onCreate, " ");
                     createParam = ScriptUtils.eval(script, Object.assign(obj, { __render: render }));
@@ -2546,8 +2557,8 @@ var RawSet = /** @class */ (function () {
                 (_d = instance === null || instance === void 0 ? void 0 : instance.onCreateRender) === null || _d === void 0 ? void 0 : _d.call.apply(_d, __spreadArray([instance], createParam, false));
                 var applayTemplate = element.innerHTML;
                 var innerHTMLThisRandom;
-                var componentName = (_e = element.getAttribute("".concat(EventManager.attrPrefix, "component-name"))) !== null && _e !== void 0 ? _e : 'component';
-                var innerHTMLName = (_f = element.getAttribute("".concat(EventManager.attrPrefix, "component-inner-html-name"))) !== null && _f !== void 0 ? _f : 'innerHTML';
+                var componentName = (_e = element.getAttribute(RawSet.DR_COMPONENT_NAME_OPTIONNAME)) !== null && _e !== void 0 ? _e : 'component';
+                var innerHTMLName = (_f = element.getAttribute(RawSet.DR_COMPONENT_INNER_HTML_NAME_OPTIONNAME)) !== null && _f !== void 0 ? _f : 'innerHTML';
                 if (applayTemplate) {
                     // if (rawSet.point.thisVariableName) {
                     // 넘어온 innerHTML에 this가 있으면 해당안되게 우선 치환.
@@ -2558,7 +2569,8 @@ var RawSet = /** @class */ (function () {
                 }
                 applayTemplate = template.replace(RegExp("#".concat(innerHTMLName, "#"), 'g'), applayTemplate);
                 // dr-on-component-init
-                var oninit = element.getAttribute("".concat(EventManager.attrPrefix, "on-component-init")); // dr-on-component-init
+                // const oninit = element.getAttribute(`${EventManager.attrPrefix}on-component-init`); // dr-on-component-init
+                var oninit = element.getAttribute(RawSet.DR_ON_CREATED_CALLBACK_OPTIONNAME); // dr-on-component-init
                 if (oninit) {
                     var script = "".concat(renderScript, "  ").concat(oninit, " ");
                     ScriptUtils.eval(script, Object.assign(obj, {
@@ -2628,7 +2640,6 @@ var RawSet = /** @class */ (function () {
     RawSet.DR_INNERHTML_NAME = 'dr-inner-html';
     RawSet.DR_INNERTEXT_NAME = 'dr-inner-text';
     RawSet.DR_DETECT_NAME = 'dr-detect';
-    // public static readonly DR_DETECT_ACTION_NAME = 'dr-detect-action';
     RawSet.DR_IT_OPTIONNAME = 'dr-it';
     RawSet.DR_VAR_OPTIONNAME = 'dr-var';
     RawSet.DR_AFTER_OPTIONNAME = 'dr-after';
@@ -2637,6 +2648,12 @@ var RawSet = /** @class */ (function () {
     RawSet.DR_COMPLETE_OPTIONNAME = 'dr-complete';
     RawSet.DR_STRIP_OPTIONNAME = 'dr-strip';
     RawSet.DR_DESTROY_OPTIONNAME = 'dr-destroy';
+    RawSet.DR_COMPONENT_NAME_OPTIONNAME = 'dr-component-name';
+    RawSet.DR_COMPONENT_INNER_HTML_NAME_OPTIONNAME = 'dr-component-inner-html-name';
+    RawSet.DR_ON_CREATE_ARGUMENTS_OPTIONNAME = 'dr-on-create:arguments';
+    RawSet.DR_ON_CREATED_CALLBACK_OPTIONNAME = 'dr-on-create:callback';
+    RawSet.DR_ON_INIT_ARGUMENTS_OPTIONNAME = 'dr-on-init:arguments';
+    RawSet.DR_ON_CONSTRUCTOR_ARGUMENTS_OPTIONNAME = 'dr-on-constructor:arguments';
     RawSet.drAttrsOriginName = {
         dr: RawSet.DR,
         drIf: RawSet.DR_IF_NAME,
@@ -2713,14 +2730,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.attrPrefix, "on-create"));
-        var createParam;
+        var _a, _b, _c, _d, _f, _g, _h, _j;
+        var onCreate = (_b = (_a = target).getAttribute) === null || _b === void 0 ? void 0 : _b.call(_a, RawSet.DR_ON_CREATE_ARGUMENTS_OPTIONNAME);
+        var createParam = [];
         if (onCreate) {
             createParam = 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);
-        var innerHTML = (_e = target.innerHTML) !== null && _e !== void 0 ? _e : '';
+        (_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));
         this._targets.add(target);
         var rawSets = RawSet.checkPointCreates(target, this._domRender_proxy, this.config);
         // console.log('initRender -------rawSet', rawSets)
@@ -2738,13 +2757,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;
+        (_g = (_f = target).getAttribute) === null || _g === void 0 ? void 0 : _g.call(_f, RawSet.DR_ON_INIT_ARGUMENTS_OPTIONNAME);
+        var initParam = [];
+        if (onCreate) {
+            initParam = 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();
@@ -3504,21 +3531,6 @@ var DomRender = /** @class */ (function () {
     return DomRender;
 }());
-var RenderManager = /** @class */ (function () {
-    function RenderManager() {
-    }
-    RenderManager.render = function (obj, target) {
-        if (target === void 0) { target = Object.keys(obj); }
-        var domRenderProxy = obj._DomRender_proxy;
-        if (domRenderProxy) {
-            target.forEach(function (it) {
-                domRenderProxy.root([it], obj[it]);
-            });
-        }
-    };
-    return RenderManager;
-}());
 var Appender = /** @class */ (function () {
     function Appender(defaultDatas) {
         this.length = 0;
@@ -3572,6 +3584,34 @@ var Appender = /** @class */ (function () {
     return Appender;
 }());
+var RenderManager = /** @class */ (function () {
+    function RenderManager() {
+    }
+    RenderManager.render = function (obj, target) {
+        if (target === void 0) { target = Object.keys(obj); }
+        var domRenderProxy = obj._DomRender_proxy;
+        if (domRenderProxy) {
+            target.forEach(function (it) {
+                domRenderProxy.root([it], obj[it]);
+            });
+        }
+    };
+    return RenderManager;
+}());
+var CheckedValidator = /** @class */ (function (_super) {
+    __extends(CheckedValidator, _super);
+    function CheckedValidator(value, target, event, autoValid) {
+        if (autoValid === void 0) { autoValid = true; }
+        return _super.call(this, value, target, event, autoValid) || this;
+    }
+    CheckedValidator.prototype.valid = function () {
+        var _a, _b;
+        return (_b = (_a = this.getTarget()) === null || _a === void 0 ? void 0 : _a.checked) !== null && _b !== void 0 ? _b : false;
+    };
+    return CheckedValidator;
+}(Validator));
 var AllCheckedValidatorArray = /** @class */ (function (_super) {
     __extends(AllCheckedValidatorArray, _super);
     function AllCheckedValidatorArray(value, target, event, autoValid) {
@@ -3598,18 +3638,20 @@ var AllUnCheckedValidatorArray = /** @class */ (function (_super) {
     return AllUnCheckedValidatorArray;
 }(ValidatorArray));
-var CheckedValidator = /** @class */ (function (_super) {
-    __extends(CheckedValidator, _super);
-    function CheckedValidator(value, target, event, autoValid) {
+var CountEqualsUnCheckedValidatorArray = /** @class */ (function (_super) {
+    __extends(CountEqualsUnCheckedValidatorArray, _super);
+    function CountEqualsUnCheckedValidatorArray(count, value, target, event, autoValid) {
         if (autoValid === void 0) { autoValid = true; }
-        return _super.call(this, value, target, event, autoValid) || this;
+        var _this = _super.call(this, value, target, event, autoValid) || this;
+        _this.count = count;
+        return _this;
     }
-    CheckedValidator.prototype.valid = function () {
-        var _a, _b;
-        return (_b = (_a = this.getTarget()) === null || _a === void 0 ? void 0 : _a.checked) !== null && _b !== void 0 ? _b : false;
+    CountEqualsUnCheckedValidatorArray.prototype.valid = function () {
+        var _a;
+        return ((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return !it.checked; }).length === this.count;
     };
-    return CheckedValidator;
-}(Validator));
+    return CountEqualsUnCheckedValidatorArray;
+}(ValidatorArray));
 var CountGreaterThanCheckedValidatorArray = /** @class */ (function (_super) {
     __extends(CountGreaterThanCheckedValidatorArray, _super);
@@ -3626,34 +3668,49 @@ var CountGreaterThanCheckedValidatorArray = /** @class */ (function (_super) {
     return CountGreaterThanCheckedValidatorArray;
 }(ValidatorArray));
-var CountGreaterThanEqualsCheckedValidatorArray = /** @class */ (function (_super) {
-    __extends(CountGreaterThanEqualsCheckedValidatorArray, _super);
-    function CountGreaterThanEqualsCheckedValidatorArray(count, value, target, event, autoValid) {
+var CountEqualsCheckedValidatorArray = /** @class */ (function (_super) {
+    __extends(CountEqualsCheckedValidatorArray, _super);
+    function CountEqualsCheckedValidatorArray(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;
     }
-    CountGreaterThanEqualsCheckedValidatorArray.prototype.valid = function () {
+    CountEqualsCheckedValidatorArray.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 CountGreaterThanEqualsCheckedValidatorArray;
+    return CountEqualsCheckedValidatorArray;
 }(ValidatorArray));
-var CountEqualsUnCheckedValidatorArray = /** @class */ (function (_super) {
-    __extends(CountEqualsUnCheckedValidatorArray, _super);
-    function CountEqualsUnCheckedValidatorArray(count, value, target, event, autoValid) {
+var CountLessThanEqualsCheckedValidatorArray = /** @class */ (function (_super) {
+    __extends(CountLessThanEqualsCheckedValidatorArray, _super);
+    function CountLessThanEqualsCheckedValidatorArray(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;
     }
-    CountEqualsUnCheckedValidatorArray.prototype.valid = function () {
+    CountLessThanEqualsCheckedValidatorArray.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 CountEqualsUnCheckedValidatorArray;
+    return CountLessThanEqualsCheckedValidatorArray;
+}(ValidatorArray));
+var CountGreaterThanEqualsUnCheckedValidatorArray = /** @class */ (function (_super) {
+    __extends(CountGreaterThanEqualsUnCheckedValidatorArray, _super);
+    function CountGreaterThanEqualsUnCheckedValidatorArray(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;
+    }
+    CountGreaterThanEqualsUnCheckedValidatorArray.prototype.valid = function () {
+        var _a;
+        return ((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return !it.checked; }).length >= this.count;
+    };
+    return CountGreaterThanEqualsUnCheckedValidatorArray;
 }(ValidatorArray));
 var CountGreaterThanUnCheckedValidatorArray = /** @class */ (function (_super) {
@@ -3671,95 +3728,98 @@ var CountGreaterThanUnCheckedValidatorArray = /** @class */ (function (_super) {
     return CountGreaterThanUnCheckedValidatorArray;
 }(ValidatorArray));
-var CountLessThanEqualsCheckedValidatorArray = /** @class */ (function (_super) {
-    __extends(CountLessThanEqualsCheckedValidatorArray, _super);
-    function CountLessThanEqualsCheckedValidatorArray(count, value, target, event, autoValid) {
+var CountLessThanCheckedValidatorArray = /** @class */ (function (_super) {
+    __extends(CountLessThanCheckedValidatorArray, _super);
+    function CountLessThanCheckedValidatorArray(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;
     }
-    CountLessThanEqualsCheckedValidatorArray.prototype.valid = function () {
+    CountLessThanCheckedValidatorArray.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 CountLessThanEqualsCheckedValidatorArray;
+    return CountLessThanCheckedValidatorArray;
 }(ValidatorArray));
-var CountUnCheckedValidatorArray = /** @class */ (function (_super) {
-    __extends(CountUnCheckedValidatorArray, _super);
-    function CountUnCheckedValidatorArray(count, value, target, event, autoValid) {
+var CountLessThanEqualsUnCheckedValidatorArray = /** @class */ (function (_super) {
+    __extends(CountLessThanEqualsUnCheckedValidatorArray, _super);
+    function CountLessThanEqualsUnCheckedValidatorArray(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 () {
+    CountLessThanEqualsUnCheckedValidatorArray.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 CountLessThanEqualsUnCheckedValidatorArray;
 }(ValidatorArray));
-var CountEqualsCheckedValidatorArray = /** @class */ (function (_super) {
-    __extends(CountEqualsCheckedValidatorArray, _super);
-    function CountEqualsCheckedValidatorArray(count, value, target, event, autoValid) {
+var CountGreaterThanEqualsCheckedValidatorArray = /** @class */ (function (_super) {
+    __extends(CountGreaterThanEqualsCheckedValidatorArray, _super);
+    function CountGreaterThanEqualsCheckedValidatorArray(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;
     }
-    CountEqualsCheckedValidatorArray.prototype.valid = function () {
+    CountGreaterThanEqualsCheckedValidatorArray.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 CountEqualsCheckedValidatorArray;
+    return CountGreaterThanEqualsCheckedValidatorArray;
 }(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 CountLessThanEqualsUnCheckedValidatorArray = /** @class */ (function (_super) {
-    __extends(CountLessThanEqualsUnCheckedValidatorArray, _super);
-    function CountLessThanEqualsUnCheckedValidatorArray(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;
     }
-    CountLessThanEqualsUnCheckedValidatorArray.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 CountLessThanEqualsUnCheckedValidatorArray;
+    return CountLessThanUnCheckedValidatorArray;
 }(ValidatorArray));
-var CountGreaterThanEqualsUnCheckedValidatorArray = /** @class */ (function (_super) {
-    __extends(CountGreaterThanEqualsUnCheckedValidatorArray, _super);
-    function CountGreaterThanEqualsUnCheckedValidatorArray(count, value, target, event, autoValid) {
+var FormValidator = /** @class */ (function (_super) {
+    __extends(FormValidator, _super);
+    function FormValidator(target, event, autoValid) {
         if (autoValid === void 0) { autoValid = true; }
-        var _this = _super.call(this, value, target, event, autoValid) || this;
-        _this.count = count;
-        return _this;
+        return _super.call(this, undefined, target, event, autoValid) || this;
     }
-    CountGreaterThanEqualsUnCheckedValidatorArray.prototype.valid = function () {
-        var _a;
-        return ((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return !it.checked; }).length >= this.count;
+    FormValidator.prototype.validAction = function () {
+        return _super.prototype.childValidAction.call(this);
     };
-    return CountGreaterThanEqualsUnCheckedValidatorArray;
-}(ValidatorArray));
+    FormValidator.prototype.valid = function () {
+        return this.childValid();
+    };
+    FormValidator.prototype.reset = function () {
+        this.targetReset();
+    };
+    return FormValidator;
+}(Validator));
 var ExcludeCheckedValidatorArray = /** @class */ (function (_super) {
     __extends(ExcludeCheckedValidatorArray, _super);
@@ -3797,23 +3857,27 @@ var EmptyValidator = /** @class */ (function (_super) {
     return EmptyValidator;
 }(Validator));
-var FormValidator = /** @class */ (function (_super) {
-    __extends(FormValidator, _super);
-    function FormValidator(target, event, autoValid) {
+var IncludeCheckedValidatorArray = /** @class */ (function (_super) {
+    __extends(IncludeCheckedValidatorArray, _super);
+    function IncludeCheckedValidatorArray(include, allRequired, value, target, event, autoValid) {
+        if (allRequired === void 0) { allRequired = false; }
         if (autoValid === void 0) { autoValid = true; }
-        return _super.call(this, undefined, target, event, autoValid) || this;
+        var _this = _super.call(this, value, target, event, autoValid) || this;
+        _this.include = include;
+        _this.allRequired = allRequired;
+        return _this;
     }
-    FormValidator.prototype.validAction = function () {
-        return _super.prototype.childValidAction.call(this);
-    };
-    FormValidator.prototype.valid = function () {
-        return this.childValid();
-    };
-    FormValidator.prototype.reset = function () {
-        this.targetReset();
+    IncludeCheckedValidatorArray.prototype.valid = function () {
+        var _this = this;
+        var _a;
+        var valus = (_a = this.value) !== null && _a !== void 0 ? _a : [];
+        var checkedValue = valus.filter(function (it) { return it.checked; }).map(function (it) { return it.value; });
+        return checkedValue.length > 0 &&
+            (!(checkedValue.filter(function (it) { return !_this.include.includes(it); }).length > 0)) &&
+            (this.allRequired ? checkedValue.filter(function (it) { return _this.include.includes(it); }).length === this.include.length : true);
     };
-    return FormValidator;
-}(Validator));
+    return IncludeCheckedValidatorArray;
+}(ValidatorArray));
 var MultipleValidator = /** @class */ (function (_super) {
     __extends(MultipleValidator, _super);
@@ -3844,42 +3908,40 @@ var MultipleValidator = /** @class */ (function (_super) {
     return MultipleValidator;
 }(Validator));
-var IncludeCheckedValidatorArray = /** @class */ (function (_super) {
-    __extends(IncludeCheckedValidatorArray, _super);
-    function IncludeCheckedValidatorArray(include, allRequired, value, target, event, autoValid) {
-        if (allRequired === void 0) { allRequired = false; }
+var NotRegExpTestValidator = /** @class */ (function (_super) {
+    __extends(NotRegExpTestValidator, _super);
+    function NotRegExpTestValidator(regexp, value, target, event, autoValid) {
         if (autoValid === void 0) { autoValid = true; }
         var _this = _super.call(this, value, target, event, autoValid) || this;
-        _this.include = include;
-        _this.allRequired = allRequired;
+        _this.regexp = DomRenderProxy.final(regexp);
         return _this;
     }
-    IncludeCheckedValidatorArray.prototype.valid = function () {
-        var _this = this;
+    NotRegExpTestValidator.prototype.valid = function () {
         var _a;
-        var valus = (_a = this.value) !== null && _a !== void 0 ? _a : [];
-        var checkedValue = valus.filter(function (it) { return it.checked; }).map(function (it) { return it.value; });
-        return checkedValue.length > 0 &&
-            (!(checkedValue.filter(function (it) { return !_this.include.includes(it); }).length > 0)) &&
-            (this.allRequired ? checkedValue.filter(function (it) { return _this.include.includes(it); }).length === this.include.length : true);
+        var value = this.value;
+        var regExp = (_a = this.regexp._DomRender_origin) !== null && _a !== void 0 ? _a : this.regexp;
+        if (value) {
+            return !regExp.test(value);
+        }
+        else {
+            return true;
+        }
     };
-    return IncludeCheckedValidatorArray;
-}(ValidatorArray));
+    return NotRegExpTestValidator;
+}(Validator));
-var CountLessThanCheckedValidatorArray = /** @class */ (function (_super) {
-    __extends(CountLessThanCheckedValidatorArray, _super);
-    function CountLessThanCheckedValidatorArray(count, value, target, event, autoValid) {
+var UnCheckedValidator = /** @class */ (function (_super) {
+    __extends(UnCheckedValidator, _super);
+    function UnCheckedValidator(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;
+        return _super.call(this, value, target, event, autoValid) || this;
     }
-    CountLessThanCheckedValidatorArray.prototype.valid = function () {
-        var _a;
-        return ((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(function (it) { return it.checked; }).length < this.count;
+    UnCheckedValidator.prototype.valid = function () {
+        var _a, _b;
+        return !((_b = (_a = this.getTarget()) === null || _a === void 0 ? void 0 : _a.checked) !== null && _b !== void 0 ? _b : false);
     };
-    return CountLessThanCheckedValidatorArray;
-}(ValidatorArray));
+    return UnCheckedValidator;
+}(Validator));
 var NotEmptyValidator = /** @class */ (function (_super) {
     __extends(NotEmptyValidator, _super);
@@ -3896,18 +3958,6 @@ var NotEmptyValidator = /** @class */ (function (_super) {
     return NotEmptyValidator;
 }(Validator));
-var PassValidator = /** @class */ (function (_super) {
-    __extends(PassValidator, _super);
-    function PassValidator(value, target, event, autoValid) {
-        if (autoValid === void 0) { autoValid = true; }
-        return _super.call(this, value, target, event, autoValid) || this;
-    }
-    PassValidator.prototype.valid = function () {
-        return true;
-    };
-    return PassValidator;
-}(Validator));
 var RegExpTestValidator = /** @class */ (function (_super) {
     __extends(RegExpTestValidator, _super);
     function RegExpTestValidator(regexp, value, target, event, autoValid) {
@@ -3931,6 +3981,18 @@ var RegExpTestValidator = /** @class */ (function (_super) {
     return RegExpTestValidator;
 }(Validator));
+var PassValidator = /** @class */ (function (_super) {
+    __extends(PassValidator, _super);
+    function PassValidator(value, target, event, autoValid) {
+        if (autoValid === void 0) { autoValid = true; }
+        return _super.call(this, value, target, event, autoValid) || this;
+    }
+    PassValidator.prototype.valid = function () {
+        return true;
+    };
+    return PassValidator;
+}(Validator));
 var RequiredValidator = /** @class */ (function (_super) {
     __extends(RequiredValidator, _super);
     function RequiredValidator(value, target, event, autoValid) {
@@ -3974,19 +4036,6 @@ var ValidValidator = /** @class */ (function (_super) {
     return ValidValidator;
 }(Validator));
-var UnCheckedValidator = /** @class */ (function (_super) {
-    __extends(UnCheckedValidator, _super);
-    function UnCheckedValidator(value, target, event, autoValid) {
-        if (autoValid === void 0) { autoValid = true; }
-        return _super.call(this, value, target, event, autoValid) || this;
-    }
-    UnCheckedValidator.prototype.valid = function () {
-        var _a, _b;
-        return !((_b = (_a = this.getTarget()) === null || _a === void 0 ? void 0 : _a.checked) !== null && _b !== void 0 ? _b : false);
-    };
-    return UnCheckedValidator;
-}(Validator));
 var ValidValidatorArray = /** @class */ (function (_super) {
     __extends(ValidValidatorArray, _super);
     function ValidValidatorArray(validCallBack, value, target, event, autoValid) {
@@ -4001,26 +4050,18 @@ var ValidValidatorArray = /** @class */ (function (_super) {
     return ValidValidatorArray;
 }(ValidatorArray));
-var NotRegExpTestValidator = /** @class */ (function (_super) {
-    __extends(NotRegExpTestValidator, _super);
-    function NotRegExpTestValidator(regexp, value, target, event, autoValid) {
+var ValueNotEqualsValidator = /** @class */ (function (_super) {
+    __extends(ValueNotEqualsValidator, _super);
+    function ValueNotEqualsValidator(equalsValue, value, target, event, autoValid) {
         if (autoValid === void 0) { autoValid = true; }
         var _this = _super.call(this, value, target, event, autoValid) || this;
-        _this.regexp = DomRenderProxy.final(regexp);
+        _this.equalsValue = equalsValue;
         return _this;
     }
-    NotRegExpTestValidator.prototype.valid = function () {
-        var _a;
-        var value = this.value;
-        var regExp = (_a = this.regexp._DomRender_origin) !== null && _a !== void 0 ? _a : this.regexp;
-        if (value) {
-            return !regExp.test(value);
-        }
-        else {
-            return true;
-        }
+    ValueNotEqualsValidator.prototype.valid = function () {
+        return this.value !== this.equalsValue;
     };
-    return NotRegExpTestValidator;
+    return ValueNotEqualsValidator;
 }(Validator));
 var ValueEqualsValidator = /** @class */ (function (_super) {
@@ -4037,66 +4078,6 @@ var ValueEqualsValidator = /** @class */ (function (_super) {
     return ValueEqualsValidator;
 }(Validator));
-var ValueNotEqualsValidator = /** @class */ (function (_super) {
-    __extends(ValueNotEqualsValidator, _super);
-    function ValueNotEqualsValidator(equalsValue, value, target, event, autoValid) {
-        if (autoValid === void 0) { autoValid = true; }
-        var _this = _super.call(this, value, target, event, autoValid) || this;
-        _this.equalsValue = equalsValue;
-        return _this;
-    }
-    ValueNotEqualsValidator.prototype.valid = function () {
-        return this.value !== this.equalsValue;
-    };
-    return ValueNotEqualsValidator;
-}(Validator));
-var NodeUtils = /** @class */ (function () {
-    function NodeUtils() {
-    }
-    // https://stackoverflow.com/questions/3955229/remove-all-child-elements-of-a-dom-node-in-javascript
-    NodeUtils.removeAllChildNode = function (node) {
-        while (node === null || node === void 0 ? void 0 : node.firstChild) {
-            node.firstChild.remove();
-        }
-    };
-    NodeUtils.appendChild = function (parentNode, childNode) {
-        return parentNode.appendChild(childNode);
-    };
-    NodeUtils.replaceNode = function (targetNode, newNode) {
-        var _a;
-        // console.log('repalceNode', targetNode, newNode, targetNode.parentNode)
-        return (_a = targetNode.parentNode) === null || _a === void 0 ? void 0 : _a.replaceChild(newNode, targetNode);
-    };
-    NodeUtils.addNode = function (targetNode, newNode) {
-        var _a;
-        return (_a = targetNode.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(newNode, targetNode.nextSibling);
-    };
-    return NodeUtils;
-}());
-var ClipBoardUtils = /** @class */ (function () {
-    function ClipBoardUtils() {
-    }
-    ClipBoardUtils.readText = function (clipboard) {
-        if (clipboard === void 0) { clipboard = navigator.clipboard; }
-        return clipboard.readText();
-    };
-    ClipBoardUtils.read = function (clipboard) {
-        if (clipboard === void 0) { clipboard = navigator.clipboard; }
-        return clipboard.read();
-    };
-    ClipBoardUtils.writeText = function (data, clipboard) {
-        if (clipboard === void 0) { clipboard = navigator.clipboard; }
-        return clipboard.writeText(data);
-    };
-    ClipBoardUtils.write = function (data, clipboard) {
-        if (clipboard === void 0) { clipboard = navigator.clipboard; }
-        return clipboard.write(data);
-    };
-    return ClipBoardUtils;
-}());
 var StorageUtils = /** @class */ (function () {
     function StorageUtils() {
     }
@@ -4142,6 +4123,52 @@ var StorageUtils = /** @class */ (function () {
     return StorageUtils;
 }());
+var ClipBoardUtils = /** @class */ (function () {
+    function ClipBoardUtils() {
+    }
+    ClipBoardUtils.readText = function (clipboard) {
+        if (clipboard === void 0) { clipboard = navigator.clipboard; }
+        return clipboard.readText();
+    };
+    ClipBoardUtils.read = function (clipboard) {
+        if (clipboard === void 0) { clipboard = navigator.clipboard; }
+        return clipboard.read();
+    };
+    ClipBoardUtils.writeText = function (data, clipboard) {
+        if (clipboard === void 0) { clipboard = navigator.clipboard; }
+        return clipboard.writeText(data);
+    };
+    ClipBoardUtils.write = function (data, clipboard) {
+        if (clipboard === void 0) { clipboard = navigator.clipboard; }
+        return clipboard.write(data);
+    };
+    return ClipBoardUtils;
+}());
+var NodeUtils = /** @class */ (function () {
+    function NodeUtils() {
+    }
+    // https://stackoverflow.com/questions/3955229/remove-all-child-elements-of-a-dom-node-in-javascript
+    NodeUtils.removeAllChildNode = function (node) {
+        while (node === null || node === void 0 ? void 0 : node.firstChild) {
+            node.firstChild.remove();
+        }
+    };
+    NodeUtils.appendChild = function (parentNode, childNode) {
+        return parentNode.appendChild(childNode);
+    };
+    NodeUtils.replaceNode = function (targetNode, newNode) {
+        var _a;
+        // console.log('repalceNode', targetNode, newNode, targetNode.parentNode)
+        return (_a = targetNode.parentNode) === null || _a === void 0 ? void 0 : _a.replaceChild(newNode, targetNode);
+    };
+    NodeUtils.addNode = function (targetNode, newNode) {
+        var _a;
+        return (_a = targetNode.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(newNode, targetNode.nextSibling);
+    };
+    return NodeUtils;
+}());
 exports.AllCheckedValidatorArray = AllCheckedValidatorArray;
 exports.AllUnCheckedValidatorArray = AllUnCheckedValidatorArray;
 exports.Appender = Appender;

package/events/EventManager.js CHANGED Viewed

@@ -511,7 +511,6 @@ var EventManager = /** @class */ (function () {
     EventManager.ownerVariablePathAttrName = 'dr-owner-variable-path';
     EventManager.attrPrefix = 'dr-';
     EventManager.onInitAttrName = EventManager.attrPrefix + 'on-init';
-    // public static readonly onComponentInitAttrName = EventManager.attrPrefix + 'on-component-init';
     EventManager.valueAttrName = EventManager.attrPrefix + 'value';
     EventManager.valueLinkAttrName = EventManager.attrPrefix + 'value-link';
     EventManager.attrAttrName = EventManager.attrPrefix + 'attr';

package/lifecycle/OnInitRender.d.ts CHANGED Viewed

@@ -1,8 +1,3 @@
-import { CreatorMetaData } from '../rawsets/CreatorMetaData';
-import { Render } from '../rawsets/Render';
 export interface OnInitRender {
-    onInitRender(data?: {
-        render?: Render;
-        creatorMetaData?: CreatorMetaData;
-    }): void;
+    onInitRender(...param: any[]): void;
 }

package/operators/DrForm.js CHANGED Viewed

@@ -46,7 +46,7 @@ var DrForm = /** @class */ (function (_super) {
             RawSet_1.RawSet.drFormOtherMoveAttr(this.elementSource.element, 'name', 'temp-name', this.source.config);
             var data = ScriptUtils_1.ScriptUtils.evalReturn("".concat(this.elementSource.attrs.drForm), this.source.obj);
             var childs = Array.from(this.elementSource.element.querySelectorAll('[name]'));
-            var fromName = ScriptUtils_1.ScriptUtils.evalReturn((_b = this.elementSource.element.getAttribute('dr-form:name')) !== null && _b !== void 0 ? _b : '', this.source.obj);
+            var fromName = ScriptUtils_1.ScriptUtils.evalReturn((_b = this.elementSource.element.getAttribute("".concat(RawSet_1.RawSet.DR_FORM_NAME, ":name"))) !== null && _b !== void 0 ? _b : '', this.source.obj);
             var thisName = fromName !== null && fromName !== void 0 ? fromName : this.elementSource.element.getAttribute('name');
             // console.log('dr-form:name', thisName, element.getAttribute('dr-form:name'), obj, element);
             // // 자기자신이 Input 대상일때
@@ -60,10 +60,10 @@ var DrForm = /** @class */ (function (_super) {
             }
             childs.forEach(function (it) {
                 var _a, _b, _c, _d, _e;
-                var eventName = (_a = it.getAttribute('dr-form:event')) !== null && _a !== void 0 ? _a : 'change';
-                var validatorName = it.getAttribute('dr-form:validator');
+                var eventName = (_a = it.getAttribute("".concat(RawSet_1.RawSet.DR_FORM_NAME, ":event"))) !== null && _a !== void 0 ? _a : 'change';
+                var validatorName = it.getAttribute("".concat(RawSet_1.RawSet.DR_FORM_NAME, ":validator"));
                 var attrEventName = EventManager_1.EventManager.attrPrefix + 'event-' + eventName;
-                var varpath = (_c = ScriptUtils_1.ScriptUtils.evalReturn((_b = _this.elementSource.element.getAttribute('dr-form:name')) !== null && _b !== void 0 ? _b : '', _this.source.obj)) !== null && _c !== void 0 ? _c : it.getAttribute('name');
+                var varpath = (_c = ScriptUtils_1.ScriptUtils.evalReturn((_b = _this.elementSource.element.getAttribute("".concat(RawSet_1.RawSet.DR_FORM_NAME, ":name"))) !== null && _b !== void 0 ? _b : '', _this.source.obj)) !== null && _c !== void 0 ? _c : it.getAttribute('name');
                 if (varpath != null) {
                     if (validatorName) {
                         ScriptUtils_1.ScriptUtils.eval("\n                                    ".concat(_this.render.bindScript, "\n                                    const validator = typeof ").concat(validatorName, " ==='function' ?  new  ").concat(validatorName, "() : ").concat(validatorName, ";\n                                    ").concat(_this.elementSource.attrs.drForm, "['").concat(varpath, "'] = validator;\n                                "), Object.assign(_this.source.obj, {

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "dom-render",
-  "version": "1.0.89",
+  "version": "1.0.90",
   "main": "DomRender.js",
   "license": "MIT",
   "description": "html view template engine",

package/rawsets/RawSet.d.ts CHANGED Viewed

@@ -40,6 +40,12 @@ export declare class RawSet {
     static readonly DR_COMPLETE_OPTIONNAME = "dr-complete";
     static readonly DR_STRIP_OPTIONNAME = "dr-strip";
     static readonly DR_DESTROY_OPTIONNAME = "dr-destroy";
+    static readonly DR_COMPONENT_NAME_OPTIONNAME = "dr-component-name";
+    static readonly DR_COMPONENT_INNER_HTML_NAME_OPTIONNAME = "dr-component-inner-html-name";
+    static readonly DR_ON_CREATE_ARGUMENTS_OPTIONNAME = "dr-on-create:arguments";
+    static readonly DR_ON_CREATED_CALLBACK_OPTIONNAME = "dr-on-create:callback";
+    static readonly DR_ON_INIT_ARGUMENTS_OPTIONNAME = "dr-on-init:arguments";
+    static readonly DR_ON_CONSTRUCTOR_ARGUMENTS_OPTIONNAME = "dr-on-constructor:arguments";
     static readonly drAttrsOriginName: Attrs;
     static readonly DR_TAGS: never[];
     static readonly DR_ATTRIBUTES: string[];

package/rawsets/RawSet.js CHANGED Viewed

@@ -77,7 +77,6 @@ var RawSet = /** @class */ (function () {
                 var targetScripts_1 = targetAttrNames.map(function (it) { return element_1.getAttribute(it); }).filter(function (it) { return it; });
                 var targetAttrMap = element_1.getAttribute(EventManager_1.EventManager.normalAttrMapAttrName);
                 if (targetAttrMap) {
-                    // console.log('----->', targetAttr);
                     new Map(JSON.parse(targetAttrMap)).forEach(function (v, k) {
                         targetScripts_1.push(v);
                     });
@@ -226,17 +225,29 @@ var RawSet = /** @class */ (function () {
         });
         // 중요 style isolation 나중에 :scope로 대체 가능할듯.
         RawSet.generateStyleSheetsLocal();
-        // console.log('-22222-')
-        // alert(1);
         for (var _p = 0, onThisComponentSetCallBacks_1 = onThisComponentSetCallBacks; _p < onThisComponentSetCallBacks_1.length; _p++) {
             var it_1 = onThisComponentSetCallBacks_1[_p];
-            (_c = (_b = it_1.obj).onInitRender) === null || _c === void 0 ? void 0 : _c.call(_b);
+            (_c = (_b = it_1.obj) === null || _b === void 0 ? void 0 : _b.onInitRender) === null || _c === void 0 ? void 0 : _c.call(_b);
         }
         for (var _q = 0, onElementInitCallBacks_1 = onElementInitCallBacks; _q < onElementInitCallBacks_1.length; _q++) {
             var it_2 = onElementInitCallBacks_1[_q];
-            (_g = (_f = (_e = (_d = it_2.targetElement) === null || _d === void 0 ? void 0 : _d.__render) === null || _e === void 0 ? void 0 : _e.component) === null || _f === void 0 ? void 0 : _f.onInitRender) === null || _g === void 0 ? void 0 : _g.call(_f, Object.freeze({ render: (_h = it_2.targetElement) === null || _h === void 0 ? void 0 : _h.__render, creatorMetaData: (_j = it_2.targetElement) === null || _j === void 0 ? void 0 : _j.__creatorMetaData }));
+            if (((_e = (_d = it_2.targetElement) === null || _d === void 0 ? void 0 : _d.__render) === null || _e === void 0 ? void 0 : _e.element) && ((_g = (_f = it_2.targetElement) === null || _f === void 0 ? void 0 : _f.__render) === null || _g === void 0 ? void 0 : _g.component)) {
+                var oninit = it_2.targetElement.__render.element.getAttribute(RawSet.DR_ON_INIT_ARGUMENTS_OPTIONNAME); // dr-on-component-init
+                var param = [];
+                if (oninit) {
+                    var script = "".concat(it_2.targetElement.__render.renderScript, " return ").concat(oninit, " ");
+                    param = ScriptUtils_1.ScriptUtils.eval(script, Object.assign(obj, {
+                        __render: it_2.targetElement.__render
+                    }));
+                    if (!Array.isArray(param)) {
+                        param = [param];
+                    }
+                }
+                (_j = (_h = it_2.targetElement.__render.component).onInitRender) === null || _j === void 0 ? void 0 : _j.call.apply(_j, __spreadArray([_h], param, false));
+            }
             (_k = config === null || config === void 0 ? void 0 : config.onElementInit) === null || _k === void 0 ? void 0 : _k.call(config, it_2.name, obj, this, it_2.targetElement);
         }
+        // TODO: 이부분도 위에 targetElement 처럼 해야될까?
         for (var _r = 0, onAttrInitCallBacks_1 = onAttrInitCallBacks; _r < onAttrInitCallBacks_1.length; _r++) {
             var it_3 = onAttrInitCallBacks_1[_r];
             (_l = config === null || config === void 0 ? void 0 : config.onAttrInit) === null || _l === void 0 ? void 0 : _l.call(config, it_3.attrName, it_3.attrValue, obj, this);
@@ -634,7 +645,7 @@ var RawSet = /** @class */ (function () {
             // const metaEnd = RawSet.metaEnd(id);
             // n.innerHTML = metaStart + style + (set.template ?? '') + metaEnd;
             // dr-on-create onCreateRender
-            var onCreate = element.getAttribute("".concat(EventManager_1.EventManager.attrPrefix, "on-create"));
+            var onCreate = element.getAttribute(RawSet.DR_ON_CREATE_ARGUMENTS_OPTIONNAME);
             var renderScript = '';
             var createParam = [];
             if (onCreate) {
@@ -646,7 +657,8 @@ var RawSet = /** @class */ (function () {
             }
             (_d = (_c = set.obj) === null || _c === void 0 ? void 0 : _c.onCreateRender) === null || _d === void 0 ? void 0 : _d.call.apply(_d, __spreadArray([_c], createParam, false));
             // dr-on-component-init
-            var oninit = element.getAttribute("".concat(EventManager_1.EventManager.attrPrefix, "on-component-init")); // dr-on-component-init
+            // const oninit = element.getAttribute(`${EventManager.attrPrefix}on-component-init`); // dr-on-component-init
+            var oninit = element.getAttribute(RawSet.DR_ON_CREATED_CALLBACK_OPTIONNAME); // dr-on-component-init
             if (oninit) {
                 var script = "".concat(renderScript, "  ").concat(oninit, " ");
                 ScriptUtils_1.ScriptUtils.eval(script, obj);
@@ -720,7 +732,7 @@ 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("".concat(EventManager_1.EventManager.attrPrefix, "constructor"));
+                var constructor = element.getAttribute(RawSet.DR_ON_CONSTRUCTOR_ARGUMENTS_OPTIONNAME);
                 var constructorParam = [];
                 // dr-constructor
                 if (constructor) {
@@ -759,9 +771,9 @@ var RawSet = /** @class */ (function () {
                     });
                 }
                 // dr-on-create onCreateRender
-                var onCreate = element.getAttribute("".concat(EventManager_1.EventManager.attrPrefix, "on-create"));
+                var onCreate = element.getAttribute(RawSet.DR_ON_CREATE_ARGUMENTS_OPTIONNAME);
                 this.__render = render;
-                var createParam = [i];
+                var createParam = [];
                 if (onCreate) {
                     var script = "".concat(renderScript, " return ").concat(onCreate, " ");
                     createParam = ScriptUtils_1.ScriptUtils.eval(script, Object.assign(obj, { __render: render }));
@@ -772,8 +784,8 @@ var RawSet = /** @class */ (function () {
                 (_d = instance === null || instance === void 0 ? void 0 : instance.onCreateRender) === null || _d === void 0 ? void 0 : _d.call.apply(_d, __spreadArray([instance], createParam, false));
                 var applayTemplate = element.innerHTML;
                 var innerHTMLThisRandom;
-                var componentName = (_e = element.getAttribute("".concat(EventManager_1.EventManager.attrPrefix, "component-name"))) !== null && _e !== void 0 ? _e : 'component';
-                var innerHTMLName = (_f = element.getAttribute("".concat(EventManager_1.EventManager.attrPrefix, "component-inner-html-name"))) !== null && _f !== void 0 ? _f : 'innerHTML';
+                var componentName = (_e = element.getAttribute(RawSet.DR_COMPONENT_NAME_OPTIONNAME)) !== null && _e !== void 0 ? _e : 'component';
+                var innerHTMLName = (_f = element.getAttribute(RawSet.DR_COMPONENT_INNER_HTML_NAME_OPTIONNAME)) !== null && _f !== void 0 ? _f : 'innerHTML';
                 if (applayTemplate) {
                     // if (rawSet.point.thisVariableName) {
                     // 넘어온 innerHTML에 this가 있으면 해당안되게 우선 치환.
@@ -784,7 +796,8 @@ var RawSet = /** @class */ (function () {
                 }
                 applayTemplate = template.replace(RegExp("#".concat(innerHTMLName, "#"), 'g'), applayTemplate);
                 // dr-on-component-init
-                var oninit = element.getAttribute("".concat(EventManager_1.EventManager.attrPrefix, "on-component-init")); // dr-on-component-init
+                // const oninit = element.getAttribute(`${EventManager.attrPrefix}on-component-init`); // dr-on-component-init
+                var oninit = element.getAttribute(RawSet.DR_ON_CREATED_CALLBACK_OPTIONNAME); // dr-on-component-init
                 if (oninit) {
                     var script = "".concat(renderScript, "  ").concat(oninit, " ");
                     ScriptUtils_1.ScriptUtils.eval(script, Object.assign(obj, {
@@ -854,7 +867,6 @@ var RawSet = /** @class */ (function () {
     RawSet.DR_INNERHTML_NAME = 'dr-inner-html';
     RawSet.DR_INNERTEXT_NAME = 'dr-inner-text';
     RawSet.DR_DETECT_NAME = 'dr-detect';
-    // public static readonly DR_DETECT_ACTION_NAME = 'dr-detect-action';
     RawSet.DR_IT_OPTIONNAME = 'dr-it';
     RawSet.DR_VAR_OPTIONNAME = 'dr-var';
     RawSet.DR_AFTER_OPTIONNAME = 'dr-after';
@@ -863,6 +875,12 @@ var RawSet = /** @class */ (function () {
     RawSet.DR_COMPLETE_OPTIONNAME = 'dr-complete';
     RawSet.DR_STRIP_OPTIONNAME = 'dr-strip';
     RawSet.DR_DESTROY_OPTIONNAME = 'dr-destroy';
+    RawSet.DR_COMPONENT_NAME_OPTIONNAME = 'dr-component-name';
+    RawSet.DR_COMPONENT_INNER_HTML_NAME_OPTIONNAME = 'dr-component-inner-html-name';
+    RawSet.DR_ON_CREATE_ARGUMENTS_OPTIONNAME = 'dr-on-create:arguments';
+    RawSet.DR_ON_CREATED_CALLBACK_OPTIONNAME = 'dr-on-create:callback';
+    RawSet.DR_ON_INIT_ARGUMENTS_OPTIONNAME = 'dr-on-init:arguments';
+    RawSet.DR_ON_CONSTRUCTOR_ARGUMENTS_OPTIONNAME = 'dr-on-constructor:arguments';
     RawSet.drAttrsOriginName = {
         dr: RawSet.DR,
         drIf: RawSet.DR_IF_NAME,