dom-render 1.0.87 → 1.0.90
Sign up to get free protection for your applications and to get access to all the features.
- package/DomRender.d.ts +1 -1
- package/DomRender.js +1 -1
- package/DomRenderProxy.d.ts +1 -1
- package/DomRenderProxy.js +34 -13
- package/README.MD +56 -19
- package/components/ComponentSet.d.ts +1 -1
- package/configs/Config.d.ts +1 -1
- package/configs/TargetAttr.d.ts +1 -1
- package/configs/TargetElement.d.ts +4 -1
- package/dist/bundle.js +306 -267
- package/events/EventManager.js +0 -1
- package/lifecycle/OnDestroyRender.d.ts +1 -1
- package/lifecycle/OnInitRender.d.ts +1 -5
- package/operators/Dr.js +1 -1
- package/operators/DrAppender.js +1 -1
- package/operators/DrFor.js +1 -1
- package/operators/DrForOf.js +1 -1
- package/operators/DrForm.js +5 -5
- package/operators/DrIf.js +1 -1
- package/operators/DrInnerHTML.js +1 -1
- package/operators/DrInnerText.js +1 -1
- package/operators/DrRepeat.js +1 -1
- package/operators/DrTargetAttr.js +1 -1
- package/operators/DrTargetElement.js +1 -1
- package/operators/DrThis.js +5 -2
- package/operators/OperatorRender.d.ts +5 -1
- package/package.json +6 -2
- package/rawsets/AttrInitCallBack.d.ts +5 -0
- package/rawsets/AttrInitCallBack.js +2 -0
- package/rawsets/Attrs.d.ts +21 -0
- package/rawsets/Attrs.js +2 -0
- package/rawsets/CreatorMetaData.d.ts +18 -0
- package/rawsets/CreatorMetaData.js +2 -0
- package/rawsets/DestroyOptionType.d.ts +4 -0
- package/rawsets/DestroyOptionType.js +8 -0
- package/rawsets/ElementInitCallBack.d.ts +8 -0
- package/rawsets/ElementInitCallBack.js +2 -0
- package/{RawSet.d.ts → rawsets/RawSet.d.ts} +13 -72
- package/{RawSet.js → rawsets/RawSet.js} +74 -66
- package/rawsets/RawSetType.d.ts +7 -0
- package/rawsets/RawSetType.js +11 -0
- package/rawsets/Render.d.ts +17 -0
- package/rawsets/Render.js +2 -0
- package/utils/location/LocationUtils.js +7 -1
package/DomRender.d.ts
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
import { Config } from './configs/Config';
|
2
2
|
import { ConstructorType } from './types/Types';
|
3
|
-
import { RawSet } from './RawSet';
|
3
|
+
import { RawSet } from './rawsets/RawSet';
|
4
4
|
export declare class DomRender {
|
5
5
|
static run<T extends object>(obj: T, target?: Node | null, oConfig?: Omit<Config, 'window'>): T;
|
6
6
|
static createComponent(param: {
|
package/DomRender.js
CHANGED
@@ -14,7 +14,7 @@ var DomRenderProxy_1 = require("./DomRenderProxy");
|
|
14
14
|
var PathRouter_1 = require("./routers/PathRouter");
|
15
15
|
var HashRouter_1 = require("./routers/HashRouter");
|
16
16
|
var Types_1 = require("./types/Types");
|
17
|
-
var RawSet_1 = require("./RawSet");
|
17
|
+
var RawSet_1 = require("./rawsets/RawSet");
|
18
18
|
var DefaultMessenger_1 = require("./messenger/DefaultMessenger");
|
19
19
|
var DomRender = /** @class */ (function () {
|
20
20
|
function DomRender() {
|
package/DomRenderProxy.d.ts
CHANGED
package/DomRenderProxy.js
CHANGED
@@ -1,10 +1,20 @@
|
|
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
|
-
var RawSet_1 = require("./RawSet");
|
13
|
+
var RawSet_1 = require("./rawsets/RawSet");
|
5
14
|
var EventManager_1 = require("./events/EventManager");
|
6
15
|
var ScriptUtils_1 = require("./utils/script/ScriptUtils");
|
7
16
|
var Types_1 = require("./types/Types");
|
17
|
+
var RawSetType_1 = require("./rawsets/RawSetType");
|
8
18
|
var excludeGetSetPropertys = ['onBeforeReturnGet', 'onBeforeReturnSet', '__domrender_components', '__render', '_DomRender_isFinal', '_domRender_ref', '_rawSets', '_domRender_proxy', '_targets', '_DomRender_origin', '_DomRender_ref', '_DomRender_proxy'];
|
9
19
|
var DomRenderProxy = /** @class */ (function () {
|
10
20
|
function DomRenderProxy(_domRender_origin, target, config) {
|
@@ -55,13 +65,16 @@ var DomRenderProxy = /** @class */ (function () {
|
|
55
65
|
};
|
56
66
|
DomRenderProxy.prototype.initRender = function (target) {
|
57
67
|
var _this = this;
|
58
|
-
var _a, _b, _c, _d, _e, _f, _g;
|
59
|
-
var onCreate = (_b = (_a = target).getAttribute) === null || _b === void 0 ? void 0 : _b.call(_a,
|
60
|
-
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 = [];
|
61
71
|
if (onCreate) {
|
62
72
|
createParam = ScriptUtils_1.ScriptUtils.evalReturn(onCreate, this._domRender_proxy);
|
73
|
+
if (!Array.isArray(createParam)) {
|
74
|
+
createParam = [createParam];
|
75
|
+
}
|
63
76
|
}
|
64
|
-
(_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));
|
65
78
|
var innerHTML = (_e = target.innerHTML) !== null && _e !== void 0 ? _e : '';
|
66
79
|
this._targets.add(target);
|
67
80
|
var rawSets = RawSet_1.RawSet.checkPointCreates(target, this._domRender_proxy, this.config);
|
@@ -80,13 +93,21 @@ var DomRenderProxy = /** @class */ (function () {
|
|
80
93
|
}
|
81
94
|
});
|
82
95
|
this.render(this.getRawSets());
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
};
|
89
|
-
(_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));
|
90
111
|
};
|
91
112
|
DomRenderProxy.prototype.getRawSets = function () {
|
92
113
|
var set = new Set();
|
@@ -118,7 +139,7 @@ var DomRenderProxy = /** @class */ (function () {
|
|
118
139
|
if ((_c = it.detect) === null || _c === void 0 ? void 0 : _c.action) {
|
119
140
|
it.detect.action();
|
120
141
|
}
|
121
|
-
else if (it.type ===
|
142
|
+
else if (it.type === RawSetType_1.RawSetType.TARGET_ELEMENT && it.data && fullPathStr && targetAttrMap && it.fragment.render) {
|
122
143
|
new Map(JSON.parse(targetAttrMap)).forEach(function (v, k) {
|
123
144
|
// it?.data.onChangeAttrRender(k, null, v);
|
124
145
|
var isUsing = EventManager_1.EventManager.isUsingThisVar(v, "this.".concat(fullPathStr));
|
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.90/dist/bundle.js"></script>
|
11
11
|
```
|
12
12
|
```html
|
13
13
|
<!DOCTYPE html>
|
@@ -303,6 +303,8 @@ dr-value-link: <input type="text" dr-value-link="this.office.addr.street"> <br>
|
|
303
303
|
* event: change
|
304
304
|
* modify change: dr-form:event="input"
|
305
305
|
|
306
|
+
- [examples](./examples/forms)
|
307
|
+
|
306
308
|
```html
|
307
309
|
<body id="app">
|
308
310
|
<form dr-form="this.form" dr-event-submit="this.submit(); $event.preventDefault();">
|
@@ -413,30 +415,58 @@ const data = DomRender.run(new Data(), document.querySelector('#app')!, config);
|
|
413
415
|
```
|
414
416
|
```html
|
415
417
|
<header>
|
416
|
-
|
417
|
-
|
418
|
-
|
418
|
+
<h1>examples header</h1>
|
419
|
+
<h2>${this.name}$</h2>
|
420
|
+
<div>
|
421
|
+
<div><button dr-event-click="$router.go('/')">main</button></div>
|
422
|
+
<div>
|
423
|
+
<button dr-event-click="$router.go('/second', {secondata: 555})">second</button>
|
424
|
+
<button dr-event-click="$router.go('/second/5')">second/1</button>
|
425
|
+
<button dr-event-click="$router.go('/second/wow')">second/2</button>
|
426
|
+
</div>
|
427
|
+
<div><button dr-event-click="$router.go('/detail/25?name=zzz')">detail</button></div>
|
419
428
|
</div>
|
420
429
|
</header>
|
430
|
+
<hr>
|
421
431
|
<main>
|
422
432
|
<page-main dr-if="$router.test('/')"></page-main>
|
423
|
-
<page-second dr-if="$router.test('/second')"
|
424
|
-
<page-
|
433
|
+
<page-second dr-if="$router.test('/second')">1</page-second>
|
434
|
+
<page-second dr-if="$router.testRegexp('/second/[0-9]?$')">2</page-second>
|
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-create:callback="$component.routerData($router.getRouteData($attribute.url))" ></page-detail>
|
437
|
+
<div>
|
438
|
+
<button dr-event-click="this.plusCount()">${this.count}$ count pluse++</button>
|
439
|
+
</div>
|
425
440
|
</main>
|
441
|
+
<hr>
|
442
|
+
<footer>footer</footer>
|
426
443
|
```
|
444
|
+
```typescript
|
445
|
+
export class Second implements OnCreateRender {
|
446
|
+
name = 'Second'
|
427
447
|
|
448
|
+
onCreateRender(data: CreatorMetaData): void {
|
449
|
+
console.log('----->', data.router)
|
450
|
+
}
|
451
|
+
}
|
452
|
+
```
|
428
453
|
```typescript
|
429
454
|
import {RouteData} from 'dom-render/routers/Router';
|
430
455
|
import {OnCreateRender} from 'dom-render/lifecycle/OnCreateRender';
|
431
456
|
|
432
457
|
export class Detail implements OnCreateRender {
|
433
|
-
|
458
|
+
name = 'Detail';
|
434
459
|
|
435
|
-
|
436
|
-
|
437
|
-
|
460
|
+
onCreateRender(data: CreatorMetaData) {
|
461
|
+
console.log('routeData->', data);
|
462
|
+
}
|
463
|
+
|
464
|
+
routerData(routeData: RouteData) {
|
465
|
+
console.log('--------', routeData);
|
466
|
+
}
|
438
467
|
}
|
439
468
|
```
|
469
|
+
|
440
470
|
```typescript
|
441
471
|
// RouteData type
|
442
472
|
type RouteData = {
|
@@ -608,15 +638,18 @@ const data = config.scripts.concat('head', 'tail')
|
|
608
638
|
<body id="app">
|
609
639
|
${this.name}$
|
610
640
|
<h1>component</h1>
|
611
|
-
<profile dr-on-
|
612
|
-
<profile dr-on-
|
613
|
-
<profile dr-on-
|
614
|
-
<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;">
|
615
645
|
<b>${this.name}$</b>
|
616
646
|
</profile>
|
617
647
|
</profile>
|
618
648
|
<h3>component data link and detect</h3>
|
619
|
-
<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]">
|
620
653
|
<b>${this.name}$</b>
|
621
654
|
</Profile>
|
622
655
|
|
@@ -624,8 +657,8 @@ ${this.name}$
|
|
624
657
|
<button dr-event-click="this.age = Date.now();">change age</button>
|
625
658
|
<button dr-event-click="this.toggle = !this.toggle;">change toggle</button>
|
626
659
|
|
627
|
-
<j1>component constructor, on-create, dr-on-
|
628
|
-
<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>
|
629
662
|
|
630
663
|
|
631
664
|
|
@@ -682,7 +715,7 @@ const data = DomRender.run(new Data(), document.querySelector('#app')!, config);
|
|
682
715
|
```
|
683
716
|
using component
|
684
717
|
```html
|
685
|
-
<my-element dr-on-
|
718
|
+
<my-element dr-on-create:callback="$component.say();"></my-element>
|
686
719
|
|
687
720
|
<home value="${this.name}$" wow="${this.color}$">
|
688
721
|
${#component#.homeName}$
|
@@ -692,11 +725,15 @@ using component
|
|
692
725
|
</home>
|
693
726
|
```
|
694
727
|
- attribute
|
695
|
-
- 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
|
696
732
|
- $component: component instance
|
697
733
|
- $element: element instance
|
698
734
|
- $attribute: element attribute object
|
699
735
|
- $innerHTML: element innerHTML string
|
736
|
+
- $creatorMetaData: metaData
|
700
737
|
- #component#: component instance
|
701
738
|
- #innerHTML#: element innerHTML
|
702
739
|
- dr-component-name: renaming component variable name (default: component)
|
package/configs/Config.d.ts
CHANGED
@@ -1,5 +1,5 @@
|
|
1
1
|
import { ConstructorType } from '../types/Types';
|
2
|
-
import { RawSet } from '../RawSet';
|
2
|
+
import { RawSet } from '../rawsets/RawSet';
|
3
3
|
import { Router } from '../routers/Router';
|
4
4
|
import { Messenger } from '../messenger/Messenger';
|
5
5
|
import { TargetElement } from './TargetElement';
|
package/configs/TargetAttr.d.ts
CHANGED
@@ -1,5 +1,8 @@
|
|
1
|
-
import {
|
1
|
+
import { RawSet } from '../rawsets/RawSet';
|
2
2
|
import { Config } from './Config';
|
3
|
+
import { Attrs } from '../rawsets/Attrs';
|
4
|
+
import { CreatorMetaData } from '../rawsets/CreatorMetaData';
|
5
|
+
import { Render } from '../rawsets/Render';
|
3
6
|
export declare type TargetElement = {
|
4
7
|
name: string;
|
5
8
|
template?: string;
|