dom-render 1.0.60 → 1.0.64
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.
- package/Config.d.ts +3 -2
- package/README.MD +11 -8
- package/RawSet.d.ts +7 -8
- package/RawSet.js +101 -95
- package/dist/Config.d.ts +3 -2
- package/dist/RawSet.d.ts +7 -8
- package/dist/bundle.js +161 -118
- package/dist/bundle.js.map +1 -1
- package/dist/events/EventManager.d.ts +16 -7
- package/dist/utils/string/StringUtils.d.ts +1 -0
- package/dist/validators/Validator.d.ts +1 -0
- package/events/EventManager.d.ts +16 -7
- package/events/EventManager.js +53 -22
- package/package.json +1 -1
- package/utils/string/StringUtils.d.ts +1 -0
- package/utils/string/StringUtils.js +3 -0
- package/validators/Validator.d.ts +1 -0
- package/validators/Validator.js +6 -3
package/Config.d.ts
CHANGED
@@ -1,11 +1,12 @@
|
|
1
1
|
import { ConstructorType } from './types/Types';
|
2
|
-
import { RawSet } from './RawSet';
|
2
|
+
import { RawSet, Render } from './RawSet';
|
3
3
|
export declare type TargetElement = {
|
4
4
|
name: string;
|
5
5
|
template?: string;
|
6
6
|
styles?: string[];
|
7
7
|
callBack: (target: Element, obj: any, rawSet: RawSet) => DocumentFragment;
|
8
8
|
complete?: (target: Element, obj: any, rawSet: RawSet) => void;
|
9
|
+
__render?: Render;
|
9
10
|
};
|
10
11
|
export declare type TargetAttr = {
|
11
12
|
name: string;
|
@@ -15,7 +16,7 @@ export declare type TargetAttr = {
|
|
15
16
|
export interface Config {
|
16
17
|
targetElements?: TargetElement[];
|
17
18
|
targetAttrs?: TargetAttr[];
|
18
|
-
onElementInit?: (name: string, obj: any, rawSet: RawSet) => void;
|
19
|
+
onElementInit?: (name: string, obj: any, rawSet: RawSet, targetElement: TargetElement) => void;
|
19
20
|
onAttrInit?: (name: string, attrValue: string, obj: any, rawSet: RawSet) => void;
|
20
21
|
proxyExcludeTyps?: ConstructorType<any>[];
|
21
22
|
proxyExcludeOnBeforeReturnSets?: string[];
|
package/README.MD
CHANGED
@@ -6,6 +6,9 @@
|
|
6
6
|
- all internal variables are managed by proxy. (DomRenderProxy)
|
7
7
|
---
|
8
8
|
|
9
|
+
# [📄 introduction page [link]](https://simple-boot-front.github.io/#dom-render/introduction)
|
10
|
+
- [https://simple-boot-front.github.io/#dom-render/introduction](https://simple-boot-front.github.io/#dom-render/introduction)
|
11
|
+
|
9
12
|
# 🚀 Quick start
|
10
13
|
```shell
|
11
14
|
npm install dom-render
|
@@ -27,9 +30,9 @@ data.name = 'modify name';
|
|
27
30
|
```
|
28
31
|
## print and call
|
29
32
|
```html
|
30
|
-
<div>${this.name}
|
31
|
-
<div>${this.office.addr.first}
|
32
|
-
<div dr="this.office.addr.street">${this.getOfficeFullAddr()}
|
33
|
+
<div>${this.name}$</div>
|
34
|
+
<div>${this.office.addr.first}$, ${this.office.addr.last}$, ${this.office.addr.street}$ (${this.office.name}$)</div>
|
35
|
+
<div dr="this.office.addr.street">${this.getOfficeFullAddr()}$</div>
|
33
36
|
```
|
34
37
|
## dr-if
|
35
38
|
```html
|
@@ -39,12 +42,12 @@ data.name = 'modify name';
|
|
39
42
|
## dr-for, dr-for-of
|
40
43
|
```html
|
41
44
|
<div dr-for="var i = 0; i < this.friends.length; i++"> friend</div>
|
42
|
-
<div dr-for-of="this.friends"> ${#it#.name}
|
43
|
-
<div dr-for-of="$range(10, 20)"><div>${#it#}
|
45
|
+
<div dr-for-of="this.friends"> ${#it#.name}$</div>
|
46
|
+
<div dr-for-of="$range(10, 20)"><div>${#it#}$</div><div>
|
44
47
|
<div dr-for="var i = 1 ; i <= 9 ; i++" dr-it="i">
|
45
|
-
${#it#} *
|
48
|
+
${#it#}$ *
|
46
49
|
<scope dr-for="var y = 1 ; y <= 9 ; y++" dr-it="y" dr-var="superIt=#it#" dr-strip="true">
|
47
|
-
#it# = ${var.superIt * #it#}
|
50
|
+
#it# = ${var.superIt * #it#}$
|
48
51
|
</scope>
|
49
52
|
</div>
|
50
53
|
```
|
@@ -150,7 +153,7 @@ to-be
|
|
150
153
|
## dr-complete
|
151
154
|
```html
|
152
155
|
<select dr-value-link="this.currentContry" dr-event-change="this.contryChange($event)">
|
153
|
-
<option dr-for-of="this.languages" dr-value="#it#.key" dr-complete="this.currentContry='defaultValue'">${#it#.title}
|
156
|
+
<option dr-for-of="this.languages" dr-value="#it#.key" dr-complete="this.currentContry='defaultValue'">${#it#.title}$</option>
|
154
157
|
</select>
|
155
158
|
```
|
156
159
|
|
package/RawSet.d.ts
CHANGED
@@ -14,6 +14,7 @@ export declare class RawSet {
|
|
14
14
|
static readonly DR_REPEAT_NAME = "dr-repeat";
|
15
15
|
static readonly DR_THIS_NAME = "dr-this";
|
16
16
|
static readonly DR_FORM_NAME = "dr-form";
|
17
|
+
static readonly DR_PRE_NAME = "dr-pre";
|
17
18
|
static readonly DR_INNERHTML_NAME = "dr-inner-html";
|
18
19
|
static readonly DR_INNERTEXT_NAME = "dr-inner-text";
|
19
20
|
static readonly DR_TAGS: never[];
|
@@ -24,13 +25,6 @@ export declare class RawSet {
|
|
24
25
|
static readonly DR_VAR_OPTIONNAME = "dr-var";
|
25
26
|
static readonly DR_STRIP_OPTIONNAME = "dr-strip";
|
26
27
|
static readonly DR_ATTRIBUTES: string[];
|
27
|
-
static readonly SCRIPTS_VARNAME = "$scripts";
|
28
|
-
static readonly FAG_VARNAME = "$fag";
|
29
|
-
static readonly RAWSET_VARNAME = "$rawset";
|
30
|
-
static readonly RANGE_VARNAME = "$range";
|
31
|
-
static readonly ELEMENT_VARNAME = "$element";
|
32
|
-
static readonly TARGET_VARNAME = "$target";
|
33
|
-
static readonly VARNAMES: string[];
|
34
28
|
constructor(uuid: string, point: {
|
35
29
|
start: Comment;
|
36
30
|
end: Comment;
|
@@ -39,6 +33,7 @@ export declare class RawSet {
|
|
39
33
|
getUsingTriggerVariables(config?: Config): Set<string>;
|
40
34
|
render(obj: any, config?: Config): RawSet[];
|
41
35
|
applyEvent(obj: any, fragment?: DocumentFragment, config?: Config): void;
|
36
|
+
getAttribute(element: Element, attr: string): string | null;
|
42
37
|
getAttributeAndDelete(element: Element, attr: string): string | null;
|
43
38
|
replaceBody(genNode: Node): void;
|
44
39
|
static checkPointCreates(element: Node, config?: Config): RawSet[];
|
@@ -68,12 +63,16 @@ export declare class RawSet {
|
|
68
63
|
} | undefined;
|
69
64
|
static createComponentTargetElement(name: string, objFactory: (element: Element, obj: any, rawSet: RawSet) => any, template?: string, styles?: string[], scripts?: {
|
70
65
|
[n: string]: any;
|
71
|
-
}): TargetElement;
|
66
|
+
}, complete?: (element: Element, obj: any, rawSet: RawSet) => void): TargetElement;
|
67
|
+
static exporesionGrouops(data: string): RegExpExecArray[];
|
72
68
|
}
|
73
69
|
export declare type Render = {
|
74
70
|
rawset: RawSet;
|
75
71
|
scripts: {
|
76
72
|
[n: string]: any;
|
77
73
|
};
|
74
|
+
bindScript?: string;
|
75
|
+
element?: any;
|
76
|
+
range?: any;
|
78
77
|
[n: string]: any;
|
79
78
|
};
|
package/RawSet.js
CHANGED
@@ -1,3 +1,14 @@
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
2
|
+
__assign = Object.assign || function(t) {
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
4
|
+
s = arguments[i];
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
6
|
+
t[p] = s[p];
|
7
|
+
}
|
8
|
+
return t;
|
9
|
+
};
|
10
|
+
return __assign.apply(this, arguments);
|
11
|
+
};
|
1
12
|
var __read = (this && this.__read) || function (o, n) {
|
2
13
|
var m = typeof Symbol === "function" && o[Symbol.iterator];
|
3
14
|
if (!m) return o;
|
@@ -37,7 +48,7 @@ var __values = (this && this.__values) || function(o) {
|
|
37
48
|
import { RandomUtils } from './utils/random/RandomUtils';
|
38
49
|
import { StringUtils } from './utils/string/StringUtils';
|
39
50
|
import { ScriptUtils } from './utils/script/ScriptUtils';
|
40
|
-
import { eventManager } from './events/EventManager';
|
51
|
+
import { EventManager, eventManager } from './events/EventManager';
|
41
52
|
import { Range } from './iterators/Range';
|
42
53
|
import { Validator } from './validators/Validator';
|
43
54
|
import { ValidatorArray } from './validators/ValidatorArray';
|
@@ -70,10 +81,10 @@ var RawSet = (function () {
|
|
70
81
|
script = targetAttrNames.map(function (it) { return (element_1.getAttribute(it)); }).filter(function (it) { return it; }).join(';');
|
71
82
|
}
|
72
83
|
if (script) {
|
73
|
-
|
84
|
+
EventManager.VARNAMES.forEach(function (it) {
|
74
85
|
script = script.replace(RegExp(it.replace('$', '\\$'), 'g'), "this?.___" + it);
|
75
86
|
});
|
76
|
-
Array.from(ScriptUtils.getVariablePaths(script)).filter(function (it) { return !it.startsWith("___" +
|
87
|
+
Array.from(ScriptUtils.getVariablePaths(script)).filter(function (it) { return !it.startsWith("___" + EventManager.SCRIPTS_VARNAME) && !it.startsWith("___" + EventManager.SCRIPTS_VARNAME); }).forEach(function (it) { return usingTriggerVariables.add(it); });
|
77
88
|
}
|
78
89
|
});
|
79
90
|
return usingTriggerVariables;
|
@@ -87,15 +98,28 @@ var RawSet = (function () {
|
|
87
98
|
var drAttrs = [];
|
88
99
|
genNode.childNodes.forEach(function (cNode, key) {
|
89
100
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4;
|
101
|
+
var __render = Object.freeze({
|
102
|
+
rawset: _this,
|
103
|
+
scripts: RawSet.setBindProperty(config === null || config === void 0 ? void 0 : config.scripts, obj),
|
104
|
+
range: Range.range,
|
105
|
+
element: cNode,
|
106
|
+
bindScript: "\n const " + EventManager.SCRIPTS_VARNAME + " = this.__render.scripts;\n const " + EventManager.RAWSET_VARNAME + " = this.__render.rawset;\n const " + EventManager.ELEMENT_VARNAME + " = this.__render.element;\n const " + EventManager.RANGE_VARNAME + " = this.__render.range;\n "
|
107
|
+
});
|
90
108
|
var fag = document.createDocumentFragment();
|
91
|
-
if (cNode.nodeType === Node.TEXT_NODE) {
|
109
|
+
if (cNode.nodeType === Node.TEXT_NODE && cNode.textContent) {
|
92
110
|
var textContent = cNode.textContent;
|
93
|
-
var
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
|
111
|
+
var runText = RawSet.exporesionGrouops(textContent)[0][1];
|
112
|
+
var n = void 0;
|
113
|
+
if (textContent === null || textContent === void 0 ? void 0 : textContent.startsWith('#')) {
|
114
|
+
var r = ScriptUtils.eval(__render.bindScript + " return " + runText, Object.assign(obj, { __render: __render }));
|
115
|
+
var template = document.createElement('template');
|
116
|
+
template.innerHTML = r;
|
117
|
+
n = template.content;
|
118
|
+
}
|
119
|
+
else {
|
120
|
+
var r = ScriptUtils.eval(__render.bindScript + " return " + runText, Object.assign(obj, { __render: __render }));
|
121
|
+
n = document.createTextNode(r);
|
122
|
+
}
|
99
123
|
(_a = cNode.parentNode) === null || _a === void 0 ? void 0 : _a.replaceChild(n, cNode);
|
100
124
|
}
|
101
125
|
else if (cNode.nodeType === Node.ELEMENT_NODE) {
|
@@ -108,6 +132,7 @@ var RawSet = (function () {
|
|
108
132
|
drRepeat: _this.getAttributeAndDelete(element_2, RawSet.DR_REPEAT_NAME),
|
109
133
|
drThis: _this.getAttributeAndDelete(element_2, RawSet.DR_THIS_NAME),
|
110
134
|
drForm: _this.getAttributeAndDelete(element_2, RawSet.DR_FORM_NAME),
|
135
|
+
drPre: _this.getAttributeAndDelete(element_2, RawSet.DR_PRE_NAME),
|
111
136
|
drInnerHTML: _this.getAttributeAndDelete(element_2, RawSet.DR_INNERHTML_NAME),
|
112
137
|
drInnerText: _this.getAttributeAndDelete(element_2, RawSet.DR_INNERTEXT_NAME),
|
113
138
|
drItOption: _this.getAttributeAndDelete(element_2, RawSet.DR_IT_OPTIONNAME),
|
@@ -118,18 +143,15 @@ var RawSet = (function () {
|
|
118
143
|
drStripOption: _this.getAttributeAndDelete(element_2, RawSet.DR_STRIP_OPTIONNAME) === 'true'
|
119
144
|
};
|
120
145
|
drAttrs.push(drAttr_1);
|
146
|
+
if (drAttr_1.drPre != null) {
|
147
|
+
return;
|
148
|
+
}
|
121
149
|
if (drAttr_1.dr !== null && drAttr_1.dr.length >= 0) {
|
122
150
|
var itRandom = RawSet.drItOtherEncoding(element_2);
|
123
151
|
var vars = RawSet.drVarEncoding(element_2, (_b = drAttr_1.drVarOption) !== null && _b !== void 0 ? _b : '');
|
124
152
|
var newTemp = document.createElement('temp');
|
125
|
-
ScriptUtils.eval("\n
|
126
|
-
__render: Object.freeze({
|
127
|
-
fag: newTemp,
|
128
|
-
drStripOption: drAttr_1.drStripOption,
|
129
|
-
element: element_2,
|
130
|
-
rawset: _this,
|
131
|
-
scripts: RawSet.setBindProperty(config === null || config === void 0 ? void 0 : config.scripts, obj)
|
132
|
-
})
|
153
|
+
ScriptUtils.eval("\n " + __render.bindScript + "\n const n = $element.cloneNode(true);\n var destIt = " + drAttr_1.drItOption + ";\n if (destIt !== undefined) {\n n.getAttributeNames().forEach(it => n.setAttribute(it, n.getAttribute(it).replace(/\\#it\\#/g, destIt)))\n n.innerHTML = n.innerHTML.replace(/\\#it\\#/g, destIt);\n }\n if (this.__render.drStripOption) {\n Array.from(n.childNodes).forEach(it => this.__fag.append(it));\n } else {\n this.__render.fag.append(n);\n }", Object.assign(obj, {
|
154
|
+
__render: Object.freeze(__assign({ fag: newTemp, drStripOption: drAttr_1.drStripOption }, __render))
|
133
155
|
}));
|
134
156
|
RawSet.drVarDecoding(newTemp, vars);
|
135
157
|
RawSet.drItOtherDecoding(newTemp, itRandom);
|
@@ -144,14 +166,8 @@ var RawSet = (function () {
|
|
144
166
|
var itRandom = RawSet.drItOtherEncoding(element_2);
|
145
167
|
var vars = RawSet.drVarEncoding(element_2, (_d = drAttr_1.drVarOption) !== null && _d !== void 0 ? _d : '');
|
146
168
|
var newTemp = document.createElement('temp');
|
147
|
-
ScriptUtils.eval("\n
|
148
|
-
__render: Object.freeze({
|
149
|
-
fag: newTemp,
|
150
|
-
drStripOption: drAttr_1.drStripOption,
|
151
|
-
element: element_2,
|
152
|
-
rawset: _this,
|
153
|
-
scripts: RawSet.setBindProperty(config === null || config === void 0 ? void 0 : config.scripts, obj)
|
154
|
-
})
|
169
|
+
ScriptUtils.eval("\n " + __render.bindScript + "\n " + ((_e = drAttr_1.drBeforeOption) !== null && _e !== void 0 ? _e : '') + "\n if(" + drAttr_1.drIf + ") {\n const n = $element.cloneNode(true);\n var destIt = " + drAttr_1.drItOption + ";\n if (destIt !== undefined) {\n n.getAttributeNames().forEach(it => n.setAttribute(it, n.getAttribute(it).replace(/\\#it\\#/g, destIt)))\n n.innerHTML = n.innerHTML.replace(/\\#it\\#/g, destIt);\n }\n if (this.__render.drStripOption) {\n Array.from(n.childNodes).forEach(it => this.__render.fag.append(it));\n } else {\n this.__render.fag.append(n);\n }\n }\n " + ((_f = drAttr_1.drAfterOption) !== null && _f !== void 0 ? _f : '') + "\n ", Object.assign(obj, {
|
170
|
+
__render: Object.freeze(__assign({ fag: newTemp, drStripOption: drAttr_1.drStripOption }, __render))
|
155
171
|
}));
|
156
172
|
RawSet.drVarDecoding(newTemp, vars);
|
157
173
|
RawSet.drItOtherDecoding(newTemp, itRandom);
|
@@ -210,14 +226,10 @@ var RawSet = (function () {
|
|
210
226
|
raws.push.apply(raws, __spreadArray([], __read(RawSet.checkPointCreates(element_2, config)), false));
|
211
227
|
}
|
212
228
|
if (drAttr_1.drInnerText) {
|
213
|
-
var data = ScriptUtils.evalReturn(drAttr_1.drInnerText, obj);
|
214
229
|
var newTemp = document.createElement('temp');
|
215
|
-
ScriptUtils.eval(" \n const n =
|
216
|
-
|
217
|
-
|
218
|
-
__data: data,
|
219
|
-
__element: element_2
|
220
|
-
}, obj));
|
230
|
+
ScriptUtils.eval(" \n " + __render.bindScript + "\n const n = $element.cloneNode(true); \n " + ((_k = drAttr_1.drBeforeOption) !== null && _k !== void 0 ? _k : '') + "\n n.innerText = " + drAttr_1.drInnerText + ";\n if (this.__render.drStripOption) {\n Array.from(n.childNodes).forEach(it => this.__render.fag.append(it));\n } else {\n this.__render.fag.append(n);\n }\n " + ((_l = drAttr_1.drAfterOption) !== null && _l !== void 0 ? _l : '') + "\n ", Object.assign(obj, {
|
231
|
+
__render: Object.freeze(__assign({ drStripOption: drAttr_1.drStripOption, fag: newTemp }, __render))
|
232
|
+
}));
|
221
233
|
var tempalte = document.createElement('template');
|
222
234
|
tempalte.innerHTML = newTemp.innerHTML;
|
223
235
|
fag.append(tempalte.content);
|
@@ -226,14 +238,10 @@ var RawSet = (function () {
|
|
226
238
|
raws.push.apply(raws, __spreadArray([], __read(rr), false));
|
227
239
|
}
|
228
240
|
if (drAttr_1.drInnerHTML) {
|
229
|
-
var data = ScriptUtils.evalReturn(drAttr_1.drInnerHTML, obj);
|
230
241
|
var newTemp = document.createElement('temp');
|
231
|
-
ScriptUtils.eval("\n const n =
|
232
|
-
|
233
|
-
|
234
|
-
__data: data,
|
235
|
-
__element: element_2
|
236
|
-
}, obj));
|
242
|
+
ScriptUtils.eval("\n " + __render.bindScript + "\n const n = $element.cloneNode(true);\n " + ((_o = drAttr_1.drBeforeOption) !== null && _o !== void 0 ? _o : '') + "\n n.innerHTML = " + drAttr_1.drInnerHTML + ";\n if (this.__render.drStripOption) {\n Array.from(n.childNodes).forEach(it => this.__render.fag.append(it));\n } else {\n this.__render.fag.append(n);\n }\n " + ((_p = drAttr_1.drAfterOption) !== null && _p !== void 0 ? _p : '') + "\n ", Object.assign(obj, {
|
243
|
+
__render: Object.freeze(__assign({ drStripOption: drAttr_1.drStripOption, fag: newTemp }, __render))
|
244
|
+
}));
|
237
245
|
var tempalte = document.createElement('template');
|
238
246
|
tempalte.innerHTML = newTemp.innerHTML;
|
239
247
|
fag.append(tempalte.content);
|
@@ -245,14 +253,8 @@ var RawSet = (function () {
|
|
245
253
|
var itRandom = RawSet.drItOtherEncoding(element_2);
|
246
254
|
var vars = RawSet.drVarEncoding(element_2, (_r = drAttr_1.drVarOption) !== null && _r !== void 0 ? _r : '');
|
247
255
|
var newTemp = document.createElement('temp');
|
248
|
-
ScriptUtils.eval("\n
|
249
|
-
__render: Object.freeze({
|
250
|
-
range: Range.range,
|
251
|
-
fag: newTemp,
|
252
|
-
drStripOption: drAttr_1.drStripOption,
|
253
|
-
element: element_2,
|
254
|
-
scripts: RawSet.setBindProperty(config === null || config === void 0 ? void 0 : config.scripts, obj)
|
255
|
-
})
|
256
|
+
ScriptUtils.eval("\n " + __render.bindScript + "\n " + ((_s = drAttr_1.drBeforeOption) !== null && _s !== void 0 ? _s : '') + "\n for(" + drAttr_1.drFor + ") {\n const n = this.__render.element.cloneNode(true);\n var destIt = " + drAttr_1.drItOption + ";\n if (destIt !== undefined) {\n n.getAttributeNames().forEach(it => n.setAttribute(it, n.getAttribute(it).replace(/\\#it\\#/g, destIt))) \n n.innerHTML = n.innerHTML.replace(/\\#it\\#/g, destIt);\n }\n if (this.__render.drStripOption) {\n Array.from(n.childNodes).forEach(it => this.__render.fag.append(it));\n } else {\n this.__render.fag.append(n);\n }\n }\n " + ((_t = drAttr_1.drAfterOption) !== null && _t !== void 0 ? _t : '') + "\n ", Object.assign(obj, {
|
257
|
+
__render: Object.freeze(__assign({ fag: newTemp, drStripOption: drAttr_1.drStripOption }, __render))
|
256
258
|
}));
|
257
259
|
RawSet.drVarDecoding(newTemp, vars);
|
258
260
|
RawSet.drItOtherDecoding(newTemp, itRandom);
|
@@ -267,15 +269,8 @@ var RawSet = (function () {
|
|
267
269
|
var itRandom = RawSet.drItOtherEncoding(element_2);
|
268
270
|
var vars = RawSet.drVarEncoding(element_2, (_v = drAttr_1.drVarOption) !== null && _v !== void 0 ? _v : '');
|
269
271
|
var newTemp = document.createElement('temp');
|
270
|
-
ScriptUtils.eval("\n
|
271
|
-
__render: Object.freeze({
|
272
|
-
rawset: _this,
|
273
|
-
range: Range.range,
|
274
|
-
drStripOption: drAttr_1.drStripOption,
|
275
|
-
fag: newTemp,
|
276
|
-
element: element_2,
|
277
|
-
scripts: RawSet.setBindProperty(config === null || config === void 0 ? void 0 : config.scripts, obj)
|
278
|
-
})
|
272
|
+
ScriptUtils.eval("\n " + __render.bindScript + "\n " + ((_w = drAttr_1.drBeforeOption) !== null && _w !== void 0 ? _w : '') + "\n var i = 0; \n const forOf = " + drAttr_1.drForOf + ";\n const forOfStr = `" + drAttr_1.drForOf + "`.trim();\n for(const it of forOf) {\n var destIt = it;\n if (/\\[(.*,?)\\],/g.test(forOfStr)) {\n if (typeof it === 'string') {\n destIt = it;\n } else {\n destIt = forOfStr.substring(1, forOfStr.length-1).split(',')[i];\n }\n } else if (forOf.isRange) {\n destIt = it;\n } else {\n destIt = forOfStr + '[' + i +']'\n }\n const n = this.__render.element.cloneNode(true);\n n.getAttributeNames().forEach(it => n.setAttribute(it, n.getAttribute(it).replace(/\\#it\\#/g, destIt)))\n n.innerHTML = n.innerHTML.replace(/\\#it\\#/g, destIt);\n if (this.__render.drStripOption) {\n Array.from(n.childNodes).forEach(it => this.__render.fag.append(it));\n } else {\n this.__render.fag.append(n);\n }\n i++;\n }\n " + ((_x = drAttr_1.drAfterOption) !== null && _x !== void 0 ? _x : '') + "\n ", Object.assign(obj, {
|
273
|
+
__render: Object.freeze(__assign({ drStripOption: drAttr_1.drStripOption, fag: newTemp }, __render))
|
279
274
|
}));
|
280
275
|
RawSet.drVarDecoding(newTemp, vars);
|
281
276
|
RawSet.drItOtherDecoding(newTemp, itRandom);
|
@@ -290,14 +285,8 @@ var RawSet = (function () {
|
|
290
285
|
var itRandom = RawSet.drItOtherEncoding(element_2);
|
291
286
|
var vars = RawSet.drVarEncoding(element_2, (_z = drAttr_1.drVarOption) !== null && _z !== void 0 ? _z : '');
|
292
287
|
var newTemp = document.createElement('temp');
|
293
|
-
ScriptUtils.eval("\n
|
294
|
-
__render: Object.freeze({
|
295
|
-
range: Range.range,
|
296
|
-
fag: newTemp,
|
297
|
-
drStripOption: drAttr_1.drStripOption,
|
298
|
-
element: element_2,
|
299
|
-
scripts: RawSet.setBindProperty(config === null || config === void 0 ? void 0 : config.scripts, obj)
|
300
|
-
})
|
288
|
+
ScriptUtils.eval("\n " + __render.bindScript + "\n " + ((_0 = drAttr_1.drBeforeOption) !== null && _0 !== void 0 ? _0 : '') + "\n var i = 0; \n const repeat = " + drAttr_1.drRepeat + ";\n const repeatStr = `" + drAttr_1.drRepeat + "`;\n let range = repeat;\n if (typeof repeat === 'number') {\n range = " + EventManager.RANGE_VARNAME + "(repeat);\n } \n for(const it of range) {\n var destIt = it;\n if (range.isRange) {\n destIt = it;\n } else {\n destIt = repeatStr + '[' + i +']'\n }\n const n = this.__render.element.cloneNode(true);\n n.getAttributeNames().forEach(it => n.setAttribute(it, n.getAttribute(it).replace(/\\#it\\#/g, destIt)))\n n.innerHTML = n.innerHTML.replace(/\\#it\\#/g, destIt);\n \n if (this.__render.drStripOption) {\n Array.from(n.childNodes).forEach(it => this.__render.fag.append(it));\n } else {\n this.__render.fag.append(n);\n }\n i++;\n }\n " + ((_1 = drAttr_1.drAfterOption) !== null && _1 !== void 0 ? _1 : '') + "\n ", Object.assign(obj, {
|
289
|
+
__render: Object.freeze(__assign({ fag: newTemp, drStripOption: drAttr_1.drStripOption }, __render))
|
301
290
|
}));
|
302
291
|
RawSet.drVarDecoding(newTemp, vars);
|
303
292
|
RawSet.drItOtherDecoding(newTemp, itRandom);
|
@@ -324,7 +313,8 @@ var RawSet = (function () {
|
|
324
313
|
raws.push.apply(raws, __spreadArray([], __read(rr), false));
|
325
314
|
onElementInitCallBack.push({
|
326
315
|
name: name,
|
327
|
-
obj: obj
|
316
|
+
obj: obj,
|
317
|
+
targetElement: it
|
328
318
|
});
|
329
319
|
(_b = it === null || it === void 0 ? void 0 : it.complete) === null || _b === void 0 ? void 0 : _b.call(it, element_2, obj, _this);
|
330
320
|
}
|
@@ -356,7 +346,7 @@ var RawSet = (function () {
|
|
356
346
|
this.replaceBody(genNode);
|
357
347
|
drAttrs.forEach(function (it) {
|
358
348
|
if (it.drCompleteOption) {
|
359
|
-
ScriptUtils.eval("\n const " +
|
349
|
+
ScriptUtils.eval("\n const " + EventManager.FAG_VARNAME + " = this.__render.fag;\n const " + EventManager.SCRIPTS_VARNAME + " = this.__render.scripts;\n const " + EventManager.RAWSET_VARNAME + " = this.__render.rawset;\n " + it.drCompleteOption + "\n ", Object.assign(obj, {
|
360
350
|
__render: Object.freeze({
|
361
351
|
rawset: _this,
|
362
352
|
fag: genNode,
|
@@ -365,7 +355,7 @@ var RawSet = (function () {
|
|
365
355
|
}));
|
366
356
|
}
|
367
357
|
});
|
368
|
-
onElementInitCallBack.forEach(function (it) { var _a; return (_a = config === null || config === void 0 ? void 0 : config.onElementInit) === null || _a === void 0 ? void 0 : _a.call(config, it.name, obj, _this); });
|
358
|
+
onElementInitCallBack.forEach(function (it) { var _a; return (_a = config === null || config === void 0 ? void 0 : config.onElementInit) === null || _a === void 0 ? void 0 : _a.call(config, it.name, obj, _this, it.targetElement); });
|
369
359
|
onAttrInitCallBack.forEach(function (it) { var _a; return (_a = config === null || config === void 0 ? void 0 : config.onAttrInit) === null || _a === void 0 ? void 0 : _a.call(config, it.attrName, it.attrValue, obj, _this); });
|
370
360
|
return raws;
|
371
361
|
};
|
@@ -373,6 +363,10 @@ var RawSet = (function () {
|
|
373
363
|
if (fragment === void 0) { fragment = this.fragment; }
|
374
364
|
eventManager.applyEvent(obj, eventManager.findAttrElements(fragment, config), config);
|
375
365
|
};
|
366
|
+
RawSet.prototype.getAttribute = function (element, attr) {
|
367
|
+
var data = element.getAttribute(attr);
|
368
|
+
return data;
|
369
|
+
};
|
376
370
|
RawSet.prototype.getAttributeAndDelete = function (element, attr) {
|
377
371
|
var data = element.getAttribute(attr);
|
378
372
|
element.removeAttribute(attr);
|
@@ -389,7 +383,8 @@ var RawSet = (function () {
|
|
389
383
|
acceptNode: function (node) {
|
390
384
|
var _a, _b, _c, _d, _e;
|
391
385
|
if (node.nodeType === Node.TEXT_NODE) {
|
392
|
-
|
386
|
+
var between = RawSet.exporesionGrouops(StringUtils.deleteEnter((_a = node.data) !== null && _a !== void 0 ? _a : ''));
|
387
|
+
return (between === null || between === void 0 ? void 0 : between.length) > 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
|
393
388
|
}
|
394
389
|
else if (node.nodeType === Node.ELEMENT_NODE) {
|
395
390
|
var element_3 = node;
|
@@ -407,7 +402,7 @@ var RawSet = (function () {
|
|
407
402
|
if (currentNode.nodeType === Node.TEXT_NODE) {
|
408
403
|
var text = (_a = currentNode.textContent) !== null && _a !== void 0 ? _a : '';
|
409
404
|
var template_1 = document.createElement('template');
|
410
|
-
var a =
|
405
|
+
var a = RawSet.exporesionGrouops(text);
|
411
406
|
var map = a.map(function (it) {
|
412
407
|
return {
|
413
408
|
uuid: RandomUtils.uuid(),
|
@@ -479,6 +474,9 @@ var RawSet = (function () {
|
|
479
474
|
};
|
480
475
|
RawSet.drThisEncoding = function (element, drThis) {
|
481
476
|
var thisRandom = RandomUtils.uuid();
|
477
|
+
element.querySelectorAll("[" + RawSet.DR_PRE_NAME + "]").forEach(function (it) {
|
478
|
+
it.innerHTML = it.innerHTML.replace(/this/g, thisRandom);
|
479
|
+
});
|
482
480
|
element.querySelectorAll("[" + RawSet.DR_THIS_NAME + "]").forEach(function (it) {
|
483
481
|
var message = it.innerHTML;
|
484
482
|
StringUtils.regexExec(/([^(dr\-)])?this(?=.?)/g, message).reverse().forEach(function (it) {
|
@@ -496,6 +494,9 @@ var RawSet = (function () {
|
|
496
494
|
return thisRandom;
|
497
495
|
};
|
498
496
|
RawSet.drThisDecoding = function (element, thisRandom) {
|
497
|
+
element.querySelectorAll("[" + RawSet.DR_PRE_NAME + "]").forEach(function (it) {
|
498
|
+
it.innerHTML = it.innerHTML.replace(RegExp(thisRandom, 'g'), 'this');
|
499
|
+
});
|
499
500
|
element.querySelectorAll("[" + RawSet.DR_THIS_NAME + "]").forEach(function (it) {
|
500
501
|
it.innerHTML = it.innerHTML.replace(RegExp(thisRandom, 'g'), 'this');
|
501
502
|
});
|
@@ -525,11 +526,14 @@ var RawSet = (function () {
|
|
525
526
|
RawSet.drVarEncoding = function (element, drVarOption) {
|
526
527
|
var _a;
|
527
528
|
var vars = ((_a = drVarOption === null || drVarOption === void 0 ? void 0 : drVarOption.split(',')) !== null && _a !== void 0 ? _a : []).map(function (it) {
|
529
|
+
var _a, _b;
|
528
530
|
var s = it.trim().split('=');
|
531
|
+
var name = (_a = s[0]) === null || _a === void 0 ? void 0 : _a.trim();
|
532
|
+
var value = (_b = s[1]) === null || _b === void 0 ? void 0 : _b.trim();
|
529
533
|
return {
|
530
|
-
name:
|
531
|
-
value:
|
532
|
-
regex: RegExp('\\$var\\.' +
|
534
|
+
name: name,
|
535
|
+
value: value,
|
536
|
+
regex: RegExp('\\$var\\.' + name + '(?=.?)', 'g'),
|
533
537
|
random: RandomUtils.uuid()
|
534
538
|
};
|
535
539
|
});
|
@@ -587,7 +591,7 @@ var RawSet = (function () {
|
|
587
591
|
return newScripts;
|
588
592
|
}
|
589
593
|
};
|
590
|
-
RawSet.createComponentTargetElement = function (name, objFactory, template, styles, scripts) {
|
594
|
+
RawSet.createComponentTargetElement = function (name, objFactory, template, styles, scripts, complete) {
|
591
595
|
if (template === void 0) { template = ''; }
|
592
596
|
if (styles === void 0) { styles = []; }
|
593
597
|
var targetElement = {
|
@@ -604,22 +608,25 @@ var RawSet = (function () {
|
|
604
608
|
var componentKey = '_' + RandomUtils.getRandomString(20);
|
605
609
|
domrenderComponents[componentKey] = objFactory(element, obj, rawSet);
|
606
610
|
var instance = domrenderComponents[componentKey];
|
611
|
+
var attribute = {};
|
612
|
+
element.getAttributeNames().forEach(function (it) {
|
613
|
+
attribute[it] = element.getAttribute(it);
|
614
|
+
});
|
615
|
+
var render = Object.freeze({
|
616
|
+
component: instance,
|
617
|
+
element: element,
|
618
|
+
innerHTML: element.innerHTML,
|
619
|
+
attribute: attribute,
|
620
|
+
rawset: rawSet,
|
621
|
+
componentKey: componentKey,
|
622
|
+
scripts: RawSet.setBindProperty(scripts, obj)
|
623
|
+
});
|
624
|
+
this.__render = render;
|
607
625
|
var oninit = element.getAttribute('dr-on-init');
|
608
626
|
if (oninit) {
|
609
|
-
var attribute_1 = {};
|
610
|
-
element.getAttributeNames().forEach(function (it) {
|
611
|
-
attribute_1[it] = element.getAttribute(it);
|
612
|
-
});
|
613
627
|
var script = "var $component = this.__render.component; var $element = this.__render.$element; var $innerHTML = this.__render.$innerHTML; var $attribute = this.__render.$attribute; " + oninit + " ";
|
614
628
|
ScriptUtils.eval(script, Object.assign(obj, {
|
615
|
-
__render:
|
616
|
-
component: instance,
|
617
|
-
element: element,
|
618
|
-
innerHTML: element.innerHTML,
|
619
|
-
attribute: attribute_1,
|
620
|
-
rawset: rawSet,
|
621
|
-
scripts: RawSet.setBindProperty(scripts, obj)
|
622
|
-
})
|
629
|
+
__render: render
|
623
630
|
}));
|
624
631
|
}
|
625
632
|
var fag = document.createDocumentFragment();
|
@@ -627,10 +634,15 @@ var RawSet = (function () {
|
|
627
634
|
element.innerHTML = innerHTML;
|
628
635
|
fag.append(RawSet.drThisCreate(element, "this.__domrender_components." + componentKey, '', true, obj));
|
629
636
|
return fag;
|
630
|
-
}
|
637
|
+
},
|
638
|
+
complete: complete
|
631
639
|
};
|
632
640
|
return targetElement;
|
633
641
|
};
|
642
|
+
RawSet.exporesionGrouops = function (data) {
|
643
|
+
var reg = /(?:[$#]\{(?:(([$#]\{)??[^$#]*?)\}[$#]))/g;
|
644
|
+
return StringUtils.regexExec(reg, data);
|
645
|
+
};
|
634
646
|
RawSet.DR = 'dr';
|
635
647
|
RawSet.DR_IF_NAME = 'dr-if';
|
636
648
|
RawSet.DR_FOR_OF_NAME = 'dr-for-of';
|
@@ -638,6 +650,7 @@ var RawSet = (function () {
|
|
638
650
|
RawSet.DR_REPEAT_NAME = 'dr-repeat';
|
639
651
|
RawSet.DR_THIS_NAME = 'dr-this';
|
640
652
|
RawSet.DR_FORM_NAME = 'dr-form';
|
653
|
+
RawSet.DR_PRE_NAME = 'dr-pre';
|
641
654
|
RawSet.DR_INNERHTML_NAME = 'dr-inner-html';
|
642
655
|
RawSet.DR_INNERTEXT_NAME = 'dr-inner-text';
|
643
656
|
RawSet.DR_TAGS = [];
|
@@ -647,14 +660,7 @@ var RawSet = (function () {
|
|
647
660
|
RawSet.DR_COMPLETE_OPTIONNAME = 'dr-complete';
|
648
661
|
RawSet.DR_VAR_OPTIONNAME = 'dr-var';
|
649
662
|
RawSet.DR_STRIP_OPTIONNAME = 'dr-strip';
|
650
|
-
RawSet.DR_ATTRIBUTES = [RawSet.DR, RawSet.DR_IF_NAME, RawSet.DR_FOR_OF_NAME, RawSet.DR_FOR_NAME, RawSet.DR_THIS_NAME, RawSet.DR_FORM_NAME, RawSet.DR_INNERHTML_NAME, RawSet.DR_INNERTEXT_NAME, RawSet.DR_REPEAT_NAME];
|
651
|
-
RawSet.SCRIPTS_VARNAME = '$scripts';
|
652
|
-
RawSet.FAG_VARNAME = '$fag';
|
653
|
-
RawSet.RAWSET_VARNAME = '$rawset';
|
654
|
-
RawSet.RANGE_VARNAME = '$range';
|
655
|
-
RawSet.ELEMENT_VARNAME = '$element';
|
656
|
-
RawSet.TARGET_VARNAME = '$target';
|
657
|
-
RawSet.VARNAMES = [RawSet.SCRIPTS_VARNAME, RawSet.FAG_VARNAME, RawSet.RAWSET_VARNAME, RawSet.RANGE_VARNAME, RawSet.ELEMENT_VARNAME, RawSet.TARGET_VARNAME];
|
663
|
+
RawSet.DR_ATTRIBUTES = [RawSet.DR, RawSet.DR_IF_NAME, RawSet.DR_FOR_OF_NAME, RawSet.DR_FOR_NAME, RawSet.DR_THIS_NAME, RawSet.DR_FORM_NAME, RawSet.DR_PRE_NAME, RawSet.DR_INNERHTML_NAME, RawSet.DR_INNERTEXT_NAME, RawSet.DR_REPEAT_NAME];
|
658
664
|
return RawSet;
|
659
665
|
}());
|
660
666
|
export { RawSet };
|
package/dist/Config.d.ts
CHANGED
@@ -1,11 +1,12 @@
|
|
1
1
|
import { ConstructorType } from './types/Types';
|
2
|
-
import { RawSet } from './RawSet';
|
2
|
+
import { RawSet, Render } from './RawSet';
|
3
3
|
export declare type TargetElement = {
|
4
4
|
name: string;
|
5
5
|
template?: string;
|
6
6
|
styles?: string[];
|
7
7
|
callBack: (target: Element, obj: any, rawSet: RawSet) => DocumentFragment;
|
8
8
|
complete?: (target: Element, obj: any, rawSet: RawSet) => void;
|
9
|
+
__render?: Render;
|
9
10
|
};
|
10
11
|
export declare type TargetAttr = {
|
11
12
|
name: string;
|
@@ -15,7 +16,7 @@ export declare type TargetAttr = {
|
|
15
16
|
export interface Config {
|
16
17
|
targetElements?: TargetElement[];
|
17
18
|
targetAttrs?: TargetAttr[];
|
18
|
-
onElementInit?: (name: string, obj: any, rawSet: RawSet) => void;
|
19
|
+
onElementInit?: (name: string, obj: any, rawSet: RawSet, targetElement: TargetElement) => void;
|
19
20
|
onAttrInit?: (name: string, attrValue: string, obj: any, rawSet: RawSet) => void;
|
20
21
|
proxyExcludeTyps?: ConstructorType<any>[];
|
21
22
|
proxyExcludeOnBeforeReturnSets?: string[];
|
package/dist/RawSet.d.ts
CHANGED
@@ -14,6 +14,7 @@ export declare class RawSet {
|
|
14
14
|
static readonly DR_REPEAT_NAME = "dr-repeat";
|
15
15
|
static readonly DR_THIS_NAME = "dr-this";
|
16
16
|
static readonly DR_FORM_NAME = "dr-form";
|
17
|
+
static readonly DR_PRE_NAME = "dr-pre";
|
17
18
|
static readonly DR_INNERHTML_NAME = "dr-inner-html";
|
18
19
|
static readonly DR_INNERTEXT_NAME = "dr-inner-text";
|
19
20
|
static readonly DR_TAGS: never[];
|
@@ -24,13 +25,6 @@ export declare class RawSet {
|
|
24
25
|
static readonly DR_VAR_OPTIONNAME = "dr-var";
|
25
26
|
static readonly DR_STRIP_OPTIONNAME = "dr-strip";
|
26
27
|
static readonly DR_ATTRIBUTES: string[];
|
27
|
-
static readonly SCRIPTS_VARNAME = "$scripts";
|
28
|
-
static readonly FAG_VARNAME = "$fag";
|
29
|
-
static readonly RAWSET_VARNAME = "$rawset";
|
30
|
-
static readonly RANGE_VARNAME = "$range";
|
31
|
-
static readonly ELEMENT_VARNAME = "$element";
|
32
|
-
static readonly TARGET_VARNAME = "$target";
|
33
|
-
static readonly VARNAMES: string[];
|
34
28
|
constructor(uuid: string, point: {
|
35
29
|
start: Comment;
|
36
30
|
end: Comment;
|
@@ -39,6 +33,7 @@ export declare class RawSet {
|
|
39
33
|
getUsingTriggerVariables(config?: Config): Set<string>;
|
40
34
|
render(obj: any, config?: Config): RawSet[];
|
41
35
|
applyEvent(obj: any, fragment?: DocumentFragment, config?: Config): void;
|
36
|
+
getAttribute(element: Element, attr: string): string | null;
|
42
37
|
getAttributeAndDelete(element: Element, attr: string): string | null;
|
43
38
|
replaceBody(genNode: Node): void;
|
44
39
|
static checkPointCreates(element: Node, config?: Config): RawSet[];
|
@@ -68,12 +63,16 @@ export declare class RawSet {
|
|
68
63
|
} | undefined;
|
69
64
|
static createComponentTargetElement(name: string, objFactory: (element: Element, obj: any, rawSet: RawSet) => any, template?: string, styles?: string[], scripts?: {
|
70
65
|
[n: string]: any;
|
71
|
-
}): TargetElement;
|
66
|
+
}, complete?: (element: Element, obj: any, rawSet: RawSet) => void): TargetElement;
|
67
|
+
static exporesionGrouops(data: string): RegExpExecArray[];
|
72
68
|
}
|
73
69
|
export declare type Render = {
|
74
70
|
rawset: RawSet;
|
75
71
|
scripts: {
|
76
72
|
[n: string]: any;
|
77
73
|
};
|
74
|
+
bindScript?: string;
|
75
|
+
element?: any;
|
76
|
+
range?: any;
|
78
77
|
[n: string]: any;
|
79
78
|
};
|