dom-render 1.0.88 → 1.0.91

Sign up to get free protection for your applications and to get access to all the features.
Files changed (44) hide show
  1. package/DomRenderProxy.js +31 -11
  2. package/README.MD +18 -11
  3. package/components/ComponentSet.d.ts +5 -2
  4. package/components/ComponentSet.js +2 -3
  5. package/configs/Config.d.ts +5 -0
  6. package/dist/bundle.js +582 -534
  7. package/events/EventManager.js +0 -1
  8. package/lifecycle/OnInitRender.d.ts +1 -6
  9. package/operators/Dr.d.ts +7 -3
  10. package/operators/Dr.js +21 -23
  11. package/operators/DrAppender.d.ts +7 -3
  12. package/operators/DrAppender.js +28 -26
  13. package/operators/DrFor.d.ts +7 -3
  14. package/operators/DrFor.js +24 -23
  15. package/operators/DrForOf.d.ts +7 -3
  16. package/operators/DrForOf.js +27 -26
  17. package/operators/DrForm.d.ts +7 -3
  18. package/operators/DrForm.js +51 -54
  19. package/operators/DrIf.d.ts +7 -3
  20. package/operators/DrIf.js +29 -32
  21. package/operators/DrInnerHTML.d.ts +7 -3
  22. package/operators/DrInnerHTML.js +19 -21
  23. package/operators/DrInnerText.d.ts +7 -3
  24. package/operators/DrInnerText.js +17 -19
  25. package/operators/DrPre.d.ts +6 -3
  26. package/operators/DrPre.js +9 -6
  27. package/operators/DrRepeat.d.ts +7 -3
  28. package/operators/DrRepeat.js +24 -23
  29. package/operators/DrTargetAttr.d.ts +6 -3
  30. package/operators/DrTargetAttr.js +10 -8
  31. package/operators/DrTargetElement.d.ts +6 -3
  32. package/operators/DrTargetElement.js +10 -32
  33. package/operators/DrThis.d.ts +4 -3
  34. package/operators/DrThis.js +21 -27
  35. package/operators/OperatorExecuter.d.ts +48 -0
  36. package/operators/OperatorExecuter.js +43 -0
  37. package/operators/OperatorExecuterAttrRequire.d.ts +8 -0
  38. package/operators/OperatorExecuterAttrRequire.js +55 -0
  39. package/package.json +1 -1
  40. package/rawsets/RawSet.d.ts +7 -1
  41. package/rawsets/RawSet.js +60 -42
  42. package/utils/location/LocationUtils.js +7 -1
  43. package/operators/OperatorRender.d.ts +0 -45
  44. package/operators/OperatorRender.js +0 -21
package/DomRenderProxy.js CHANGED
@@ -1,4 +1,13 @@
1
1
  "use strict";
2
+ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
3
+ if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
4
+ if (ar || !(i in from)) {
5
+ if (!ar) ar = Array.prototype.slice.call(from, 0, i);
6
+ ar[i] = from[i];
7
+ }
8
+ }
9
+ return to.concat(ar || Array.prototype.slice.call(from));
10
+ };
2
11
  Object.defineProperty(exports, "__esModule", { value: true });
3
12
  exports.DomRenderProxy = void 0;
4
13
  var RawSet_1 = require("./rawsets/RawSet");
@@ -56,13 +65,16 @@ var DomRenderProxy = /** @class */ (function () {
56
65
  };
57
66
  DomRenderProxy.prototype.initRender = function (target) {
58
67
  var _this = this;
59
- var _a, _b, _c, _d, _e, _f, _g;
60
- var onCreate = (_b = (_a = target).getAttribute) === null || _b === void 0 ? void 0 : _b.call(_a, "".concat(EventManager_1.EventManager.attrPrefix, "on-create"));
61
- var createParam;
68
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j;
69
+ var onCreate = (_b = (_a = target).getAttribute) === null || _b === void 0 ? void 0 : _b.call(_a, RawSet_1.RawSet.DR_ON_CREATE_ARGUMENTS_OPTIONNAME);
70
+ var createParam = [];
62
71
  if (onCreate) {
63
72
  createParam = ScriptUtils_1.ScriptUtils.evalReturn(onCreate, this._domRender_proxy);
73
+ if (!Array.isArray(createParam)) {
74
+ createParam = [createParam];
75
+ }
64
76
  }
65
- (_d = (_c = this._domRender_proxy) === null || _c === void 0 ? void 0 : _c.onCreateRender) === null || _d === void 0 ? void 0 : _d.call(_c, createParam);
77
+ (_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));
66
78
  var innerHTML = (_e = target.innerHTML) !== null && _e !== void 0 ? _e : '';
67
79
  this._targets.add(target);
68
80
  var rawSets = RawSet_1.RawSet.checkPointCreates(target, this._domRender_proxy, this.config);
@@ -81,13 +93,21 @@ var DomRenderProxy = /** @class */ (function () {
81
93
  }
82
94
  });
83
95
  this.render(this.getRawSets());
84
- var render = { target: target };
85
- var creatorMetaData = {
86
- creator: this._domRender_proxy,
87
- rootCreator: this._domRender_proxy,
88
- innerHTML: innerHTML
89
- };
90
- (_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 });
96
+ // const render = {target} as Render;
97
+ // const creatorMetaData = {
98
+ // creator: this._domRender_proxy,
99
+ // rootCreator: this._domRender_proxy,
100
+ // innerHTML
101
+ // } as CreatorMetaData;
102
+ var onInit = (_g = (_f = target).getAttribute) === null || _g === void 0 ? void 0 : _g.call(_f, RawSet_1.RawSet.DR_ON_INIT_ARGUMENTS_OPTIONNAME);
103
+ var initParam = [];
104
+ if (onCreate) {
105
+ initParam = ScriptUtils_1.ScriptUtils.evalReturn(onCreate, this._domRender_proxy);
106
+ if (!Array.isArray(initParam)) {
107
+ initParam = [initParam];
108
+ }
109
+ }
110
+ (_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));
91
111
  };
92
112
  DomRenderProxy.prototype.getRawSets = function () {
93
113
  var set = new Set();
package/README.MD CHANGED
@@ -7,7 +7,7 @@ DOM-RENDER
7
7
 
8
8
  # 🚀 Quick start
9
9
  ```html
10
- <script src="https://cdn.jsdelivr.net/npm/dom-render@1.0.86/dist/bundle.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/dom-render@1.0.91/dist/bundle.js"></script>
11
11
  ```
12
12
  ```html
13
13
  <!DOCTYPE html>
@@ -433,7 +433,7 @@ const data = DomRender.run(new Data(), document.querySelector('#app')!, config);
433
433
  <page-second dr-if="$router.test('/second')">1</page-second>
434
434
  <page-second dr-if="$router.testRegexp('/second/[0-9]?$')">2</page-second>
435
435
  <page-second dr-if="$router.testRegexp('/second/wow$')">wow</page-second>
436
- <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>
436
+ <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>
437
437
  <div>
438
438
  <button dr-event-click="this.plusCount()">${this.count}$ count pluse++</button>
439
439
  </div>
@@ -638,15 +638,18 @@ const data = config.scripts.concat('head', 'tail')
638
638
  <body id="app">
639
639
  ${this.name}$
640
640
  <h1>component</h1>
641
- <profile dr-on-component-init="$component.name='jhone'; $component.age=55;"><b>${#component#.details}$</b></profile>
642
- <profile dr-on-component-init="$component.name='cal'; $component.age=56;"><b>detail-2</b></profile>
643
- <profile dr-on-component-init="$component.name='rose'; $component.age=57;">
644
- <profile dr-on-component-init="$component.name='rose-sub'; $component.age=156;">
641
+ <profile dr-on-create:callback="$component.name='jhone'; $component.age=55;"><b>${#component#.details}$</b></profile>
642
+ <profile dr-on-create:callback="$component.name='cal'; $component.age=56;"><b>detail-2</b></profile>
643
+ <profile dr-on-create:callback="$component.name='rose'; $component.age=57;">
644
+ <profile dr-on-create:callback="$component.name='rose-sub'; $component.age=156;">
645
645
  <b>${this.name}$</b>
646
646
  </profile>
647
647
  </profile>
648
648
  <h3>component data link and detect</h3>
649
- <Profile dr-if="this.toggle" dr-detect="$component.age = this.age" dr-on-component-init="$component.name='papa'; $component.age=58;">
649
+ <Profile dr-if="this.toggle" dr-detect="$component.age = this.age" dr-on-create:callback="$component.name='papa'; $component.age=58;">
650
+ <b>${this.name}$</b>
651
+ </Profile>
652
+ <Profile dr-if="this.toggle" dr-detect="$component.age = this.age" dr-on-constructor:arguments="[1,2]">
650
653
  <b>${this.name}$</b>
651
654
  </Profile>
652
655
 
@@ -654,8 +657,8 @@ ${this.name}$
654
657
  <button dr-event-click="this.age = Date.now();">change age</button>
655
658
  <button dr-event-click="this.toggle = !this.toggle;">change toggle</button>
656
659
 
657
- <j1>component constructor, on-create, dr-on-component-init</j1>
658
- <home dr-constructor="[this.name, this.age, 'home welcom']" dr-on-create="{type: 'onCreate', data: 'datadata'}" dr-on-component-init="$component.onInit('data')"></home>
660
+ <j1>component constructor, on-create, dr-on-create:callback</j1>
661
+ <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>
659
662
 
660
663
 
661
664
 
@@ -712,7 +715,7 @@ const data = DomRender.run(new Data(), document.querySelector('#app')!, config);
712
715
  ```
713
716
  using component
714
717
  ```html
715
- <my-element dr-on-component-init="$component.say();"></my-element>
718
+ <my-element dr-on-create:callback="$component.say();"></my-element>
716
719
 
717
720
  <home value="${this.name}$" wow="${this.color}$">
718
721
  ${#component#.homeName}$
@@ -722,11 +725,15 @@ using component
722
725
  </home>
723
726
  ```
724
727
  - attribute
725
- - dr-on-component-init: component created init call script
728
+ - dr-on-create:callback: component created init callback script
729
+ - dr-on-create:arguments: component onCreatedRender arguments
730
+ - dr-on-init:arguments: component onInitRender arguments
731
+ - dr-on-constructor:arguments: component counstructor arguments
726
732
  - $component: component instance
727
733
  - $element: element instance
728
734
  - $attribute: element attribute object
729
735
  - $innerHTML: element innerHTML string
736
+ - $creatorMetaData: metaData
730
737
  - #component#: component instance
731
738
  - #innerHTML#: element innerHTML
732
739
  - dr-component-name: renaming component variable name (default: component)
package/components/ComponentSet.d.ts CHANGED
@@ -1,7 +1,10 @@
1
+ export declare type ComponentSetConfig = {
2
+ objPath?: string | null;
3
+ };
1
4
  export declare class ComponentSet {
2
5
  obj: any;
3
6
  template?: string | undefined;
4
7
  styles?: string[] | undefined;
5
- styleLocale: boolean;
6
- constructor(obj: any, template?: string | undefined, styles?: string[] | undefined, styleLocale?: boolean);
8
+ config: ComponentSetConfig;
9
+ constructor(obj: any, template?: string | undefined, styles?: string[] | undefined, config?: ComponentSetConfig);
7
10
  }
package/components/ComponentSet.js CHANGED
@@ -2,12 +2,11 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.ComponentSet = void 0;
4
4
  var ComponentSet = /** @class */ (function () {
5
- function ComponentSet(obj, template, styles, styleLocale) {
6
- if (styleLocale === void 0) { styleLocale = false; }
5
+ function ComponentSet(obj, template, styles, config) {
7
6
  this.obj = obj;
8
7
  this.template = template;
9
8
  this.styles = styles;
10
- this.styleLocale = styleLocale;
9
+ this.config = Object.assign({ objPath: 'obj' }, config);
11
10
  }
12
11
  return ComponentSet;
13
12
  }());
package/configs/Config.d.ts CHANGED
@@ -4,10 +4,15 @@ import { Router } from '../routers/Router';
4
4
  import { Messenger } from '../messenger/Messenger';
5
5
  import { TargetElement } from './TargetElement';
6
6
  import { TargetAttr } from './TargetAttr';
7
+ import { Attrs } from '../rawsets/Attrs';
8
+ import { OperatorAround } from '../operators/OperatorExecuter';
7
9
  export declare type Config = {
8
10
  window: Window;
9
11
  targetElements?: TargetElement[];
10
12
  targetAttrs?: TargetAttr[];
13
+ operatorAround?: {
14
+ [key in keyof Attrs]?: OperatorAround;
15
+ };
11
16
  onElementInit?: (name: string, obj: any, rawSet: RawSet, targetElement: TargetElement) => any;
12
17
  onAttrInit?: (name: string, attrValue: string, obj: any, rawSet: RawSet) => any;
13
18
  proxyExcludeTyps?: ConstructorType<any>[];