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 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}</div>
31
- <div>${this.office.addr.first}, ${this.office.addr.last}, ${this.office.addr.street} (${this.office.name})</div>
32
- <div dr="this.office.addr.street">${this.getOfficeFullAddr()}</div>
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}</div>
43
- <div dr-for-of="$range(10, 20)"><div>${#it#}</div><div>
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}</option>
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
- RawSet.VARNAMES.forEach(function (it) {
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("___" + RawSet.SCRIPTS_VARNAME) && !it.startsWith("___" + RawSet.SCRIPTS_VARNAME); }).forEach(function (it) { return usingTriggerVariables.add(it); });
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 n = document.createTextNode(ScriptUtils.eval("\n const " + RawSet.SCRIPTS_VARNAME + " = this.__render.scripts;\n const " + RawSet.RAWSET_VARNAME + " = this.__render.rawset;\n return `" + textContent + "`\n ", Object.assign(obj, {
94
- __render: Object.freeze({
95
- rawset: _this,
96
- scripts: RawSet.setBindProperty(config === null || config === void 0 ? void 0 : config.scripts, obj)
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 const " + RawSet.SCRIPTS_VARNAME + " = this.__render.scripts;\n const " + RawSet.RAWSET_VARNAME + " = this.__render.rawset;\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.__fag.append(it));\n } else {\n this.__render.fag.append(n);\n }", Object.assign(obj, {
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 const " + RawSet.SCRIPTS_VARNAME + " = this.__render.scripts;\n const " + RawSet.RAWSET_VARNAME + " = this.__render.rawset;\n " + ((_e = drAttr_1.drBeforeOption) !== null && _e !== void 0 ? _e : '') + "\n if(" + drAttr_1.drIf + ") {\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 " + ((_f = drAttr_1.drAfterOption) !== null && _f !== void 0 ? _f : '') + "\n ", Object.assign(obj, {
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 = this.__element.cloneNode(true); \n " + ((_k = drAttr_1.drBeforeOption) !== null && _k !== void 0 ? _k : '') + "\n n.innerText = this.__data;\n if (this.__drStripOption) {\n Array.from(n.childNodes).forEach(it => this.__fag.append(it));\n } else {\n this.__fag.append(n);\n }\n " + ((_l = drAttr_1.drAfterOption) !== null && _l !== void 0 ? _l : '') + "\n ", Object.assign({
216
- __fag: newTemp,
217
- __drStripOption: drAttr_1.drStripOption,
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 = this.__element.cloneNode(true);\n " + ((_o = drAttr_1.drBeforeOption) !== null && _o !== void 0 ? _o : '') + "\n n.innerHTML = this.__data;\n if (this.__drStripOption) {\n Array.from(n.childNodes).forEach(it => this.__fag.append(it));\n } else {\n this.__fag.append(n);\n }\n " + ((_p = drAttr_1.drAfterOption) !== null && _p !== void 0 ? _p : '') + "\n ", Object.assign({
232
- __fag: newTemp,
233
- __drStripOption: drAttr_1.drStripOption,
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 const " + RawSet.SCRIPTS_VARNAME + " = this.__render.scripts;\n const " + RawSet.RANGE_VARNAME + " = this.__render.range;\n const " + RawSet.ELEMENT_VARNAME + " = this.__render.element;\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, {
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 const " + RawSet.SCRIPTS_VARNAME + " = this.__render.scripts;\n const " + RawSet.RANGE_VARNAME + " = this.__render.range;\n const " + RawSet.ELEMENT_VARNAME + " = this.__render.element;\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, {
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 const " + RawSet.SCRIPTS_VARNAME + " = this.__render.scripts;\n const " + RawSet.RANGE_VARNAME + " = this.__render.range;\n const " + RawSet.ELEMENT_VARNAME + " = this.__render.element;\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 = " + RawSet.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, {
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 " + RawSet.FAG_VARNAME + " = this.__render.fag;\n const " + RawSet.SCRIPTS_VARNAME + " = this.__render.scripts;\n const " + RawSet.RAWSET_VARNAME + " = this.__render.rawset;\n " + it.drCompleteOption + "\n ", Object.assign(obj, {
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
- return /\$\{.*?\}/g.test(StringUtils.deleteEnter((_a = node.data) !== null && _a !== void 0 ? _a : '')) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
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 = StringUtils.regexExec(/\$\{.*?\}/g, text);
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: s[0],
531
- value: s[1],
532
- regex: RegExp('\\$var\\.' + s[0] + '(?=.?)', 'g'),
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: Object.freeze({
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
  };