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.
- package/DomRenderProxy.js +31 -11
- package/README.MD +18 -11
- package/components/ComponentSet.d.ts +5 -2
- package/components/ComponentSet.js +2 -3
- package/configs/Config.d.ts +5 -0
- package/dist/bundle.js +582 -534
- package/events/EventManager.js +0 -1
- package/lifecycle/OnInitRender.d.ts +1 -6
- package/operators/Dr.d.ts +7 -3
- package/operators/Dr.js +21 -23
- package/operators/DrAppender.d.ts +7 -3
- package/operators/DrAppender.js +28 -26
- package/operators/DrFor.d.ts +7 -3
- package/operators/DrFor.js +24 -23
- package/operators/DrForOf.d.ts +7 -3
- package/operators/DrForOf.js +27 -26
- package/operators/DrForm.d.ts +7 -3
- package/operators/DrForm.js +51 -54
- package/operators/DrIf.d.ts +7 -3
- package/operators/DrIf.js +29 -32
- package/operators/DrInnerHTML.d.ts +7 -3
- package/operators/DrInnerHTML.js +19 -21
- package/operators/DrInnerText.d.ts +7 -3
- package/operators/DrInnerText.js +17 -19
- package/operators/DrPre.d.ts +6 -3
- package/operators/DrPre.js +9 -6
- package/operators/DrRepeat.d.ts +7 -3
- package/operators/DrRepeat.js +24 -23
- package/operators/DrTargetAttr.d.ts +6 -3
- package/operators/DrTargetAttr.js +10 -8
- package/operators/DrTargetElement.d.ts +6 -3
- package/operators/DrTargetElement.js +10 -32
- package/operators/DrThis.d.ts +4 -3
- package/operators/DrThis.js +21 -27
- package/operators/OperatorExecuter.d.ts +48 -0
- package/operators/OperatorExecuter.js +43 -0
- package/operators/OperatorExecuterAttrRequire.d.ts +8 -0
- package/operators/OperatorExecuterAttrRequire.js +55 -0
- package/package.json +1 -1
- package/rawsets/RawSet.d.ts +7 -1
- package/rawsets/RawSet.js +60 -42
- package/utils/location/LocationUtils.js +7 -1
- package/operators/OperatorRender.d.ts +0 -45
- 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,
|
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
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
};
|
90
|
-
(_g = (_f =
|
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.
|
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-
|
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-
|
642
|
-
<profile dr-on-
|
643
|
-
<profile dr-on-
|
644
|
-
<profile dr-on-
|
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-
|
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-
|
658
|
-
<home dr-constructor="[this.name, this.age, 'home welcom']" dr-on-create="{type: 'onCreate', data: 'datadata'}" dr-on-
|
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-
|
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-
|
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)
|
@@ -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
|
-
|
6
|
-
constructor(obj: any, template?: string | undefined, styles?: string[] | undefined,
|
8
|
+
config: ComponentSetConfig;
|
9
|
+
constructor(obj: any, template?: string | undefined, styles?: string[] | undefined, config?: ComponentSetConfig);
|
7
10
|
}
|
@@ -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,
|
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.
|
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>[];
|