@dooboostore/dom-render 1.0.108 → 1.0.109
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/README.MD +27 -1451
- package/dist/cjs/DomRender.js +41 -26
- package/dist/cjs/DomRender.js.map +2 -2
- package/dist/cjs/DomRenderProxy.js +12 -5
- package/dist/cjs/DomRenderProxy.js.map +2 -2
- package/dist/cjs/bundle-entry.js +32 -21
- package/dist/cjs/bundle-entry.js.map +2 -2
- package/dist/cjs/components/ComponentBase.js +20 -2
- package/dist/cjs/components/ComponentBase.js.map +2 -2
- package/dist/cjs/components/ComponentRouterBase.js +11 -1
- package/dist/cjs/components/ComponentRouterBase.js.map +2 -2
- package/dist/cjs/components/choose/Choose.js +4 -0
- package/dist/cjs/components/choose/Choose.js.map +2 -2
- package/dist/cjs/components/router/RouterOutlet.js +15 -1
- package/dist/cjs/components/router/RouterOutlet.js.map +2 -2
- package/dist/cjs/components/select/Select.js +20 -6
- package/dist/cjs/components/select/Select.js.map +2 -2
- package/dist/cjs/components/timer/Timer.js +14 -11
- package/dist/cjs/components/timer/Timer.js.map +2 -2
- package/dist/cjs/decorators/DomRenderNoProxy.js +2 -1
- package/dist/cjs/decorators/DomRenderNoProxy.js.map +2 -2
- package/dist/cjs/lifecycle/OnRawSetRendered.js +26 -0
- package/dist/cjs/lifecycle/OnRawSetRendered.js.map +7 -0
- package/dist/cjs/lifecycle/index.js +1 -0
- package/dist/cjs/lifecycle/index.js.map +2 -2
- package/dist/cjs/operators/DrTargetElement.js +2 -0
- package/dist/cjs/operators/DrTargetElement.js.map +2 -2
- package/dist/cjs/operators/OperatorExecuter.js +1 -2
- package/dist/cjs/operators/OperatorExecuter.js.map +2 -2
- package/dist/cjs/package.json +5 -0
- package/dist/cjs/rawsets/RawSet.js +154 -74
- package/dist/cjs/rawsets/RawSet.js.map +3 -3
- package/dist/cjs/rawsets/Render.js.map +1 -1
- package/dist/cjs/routers/Router.js +31 -15
- package/dist/cjs/routers/Router.js.map +3 -3
- package/dist/esm/DomRender.js +41 -26
- package/dist/esm/DomRender.js.map +2 -2
- package/dist/esm/DomRenderProxy.js +12 -5
- package/dist/esm/DomRenderProxy.js.map +2 -2
- package/dist/esm/bundle-entry.js +22 -21
- package/dist/esm/bundle-entry.js.map +2 -2
- package/dist/esm/components/ComponentBase.js +20 -2
- package/dist/esm/components/ComponentBase.js.map +2 -2
- package/dist/esm/components/ComponentRouterBase.js +11 -1
- package/dist/esm/components/ComponentRouterBase.js.map +2 -2
- package/dist/esm/components/choose/Choose.js +4 -0
- package/dist/esm/components/choose/Choose.js.map +2 -2
- package/dist/esm/components/router/RouterOutlet.js +16 -2
- package/dist/esm/components/router/RouterOutlet.js.map +2 -2
- package/dist/esm/components/select/Select.js +20 -6
- package/dist/esm/components/select/Select.js.map +2 -2
- package/dist/esm/components/timer/Timer.js +14 -11
- package/dist/esm/components/timer/Timer.js.map +2 -2
- package/dist/esm/decorators/DomRenderNoProxy.js +2 -1
- package/dist/esm/decorators/DomRenderNoProxy.js.map +2 -2
- package/dist/esm/lifecycle/OnRawSetRendered.js +7 -0
- package/dist/esm/lifecycle/OnRawSetRendered.js.map +7 -0
- package/dist/esm/lifecycle/index.js +1 -0
- package/dist/esm/lifecycle/index.js.map +2 -2
- package/dist/esm/operators/DrTargetElement.js +2 -0
- package/dist/esm/operators/DrTargetElement.js.map +2 -2
- package/dist/esm/operators/OperatorExecuter.js +1 -2
- package/dist/esm/operators/OperatorExecuter.js.map +2 -2
- package/dist/esm/rawsets/RawSet.js +154 -74
- package/dist/esm/rawsets/RawSet.js.map +3 -3
- package/dist/esm/routers/Router.js +31 -15
- package/dist/esm/routers/Router.js.map +3 -3
- package/dist/esm-bundle/dooboostore-dom-render.esm.js +12586 -6496
- package/dist/esm-bundle/dooboostore-dom-render.esm.js.map +4 -4
- package/dist/types/DomRender.d.ts +11 -5
- package/dist/types/DomRender.d.ts.map +1 -1
- package/dist/types/DomRenderProxy.d.ts.map +1 -1
- package/dist/types/bundle-entry.d.ts +5 -2
- package/dist/types/bundle-entry.d.ts.map +1 -1
- package/dist/types/components/ComponentBase.d.ts +7 -1
- package/dist/types/components/ComponentBase.d.ts.map +1 -1
- package/dist/types/components/ComponentRouterBase.d.ts +8 -0
- package/dist/types/components/ComponentRouterBase.d.ts.map +1 -1
- package/dist/types/components/choose/Choose.d.ts.map +1 -1
- package/dist/types/components/index.d.ts +2 -1
- package/dist/types/components/index.d.ts.map +1 -1
- package/dist/types/components/router/RouterOutlet.d.ts +5 -1
- package/dist/types/components/router/RouterOutlet.d.ts.map +1 -1
- package/dist/types/components/select/Select.d.ts +2 -2
- package/dist/types/components/select/Select.d.ts.map +1 -1
- package/dist/types/components/timer/Timer.d.ts +5 -3
- package/dist/types/components/timer/Timer.d.ts.map +1 -1
- package/dist/types/decorators/DomRenderNoProxy.d.ts.map +1 -1
- package/dist/types/index.d.ts +1 -0
- package/dist/types/lifecycle/OnRawSetRendered.d.ts +10 -0
- package/dist/types/lifecycle/OnRawSetRendered.d.ts.map +1 -0
- package/dist/types/lifecycle/index.d.ts +1 -0
- package/dist/types/lifecycle/index.d.ts.map +1 -1
- package/dist/types/operators/DrTargetElement.d.ts.map +1 -1
- package/dist/types/operators/OperatorExecuter.d.ts.map +1 -1
- package/dist/types/rawsets/RawSet.d.ts +11 -4
- package/dist/types/rawsets/RawSet.d.ts.map +1 -1
- package/dist/types/rawsets/Render.d.ts +1 -0
- package/dist/types/rawsets/Render.d.ts.map +1 -1
- package/dist/types/routers/Router.d.ts +2 -3
- package/dist/types/routers/Router.d.ts.map +1 -1
- package/dist/umd-bundle/dooboostore-dom-render.umd.js +12600 -6529
- package/dist/umd-bundle/dooboostore-dom-render.umd.js.map +4 -4
- package/package.json +6 -5
- package/src/DomRender.ts +62 -34
- package/src/DomRenderProxy.ts +20 -8
- package/src/bundle-entry.ts +5 -3
- package/src/components/ComponentBase.ts +29 -7
- package/src/components/ComponentRouterBase.ts +17 -2
- package/src/components/choose/Choose.ts +4 -0
- package/src/components/router/RouterOutlet.ts +25 -5
- package/src/components/select/Select.ts +40 -26
- package/src/components/timer/Timer.ts +19 -51
- package/src/decorators/DomRenderNoProxy.ts +3 -1
- package/src/lifecycle/OnRawSetRendered.ts +15 -0
- package/src/lifecycle/index.ts +1 -0
- package/src/operators/DrTargetElement.ts +14 -0
- package/src/operators/OperatorExecuter.ts +1 -2
- package/src/rawsets/RawSet.ts +572 -257
- package/src/rawsets/Render.ts +1 -0
- package/src/routers/Router.ts +40 -23
- package/types.d.ts +68 -20
|
@@ -22,7 +22,6 @@ __export(RawSet_exports, {
|
|
|
22
22
|
module.exports = __toCommonJS(RawSet_exports);
|
|
23
23
|
var import_RandomUtils = require("@dooboostore/core/random/RandomUtils");
|
|
24
24
|
var import_StringUtils = require("@dooboostore/core/string/StringUtils");
|
|
25
|
-
var import_ScriptUtils = require("@dooboostore/core-web/script/ScriptUtils");
|
|
26
25
|
var import_EventManager = require("../events/EventManager");
|
|
27
26
|
var import_Range = require("../iterators/Range");
|
|
28
27
|
var import_ElementUtils = require("@dooboostore/core-web/element/ElementUtils");
|
|
@@ -54,6 +53,7 @@ var import_OnCreatedThisChild = require("../lifecycle/OnCreatedThisChild");
|
|
|
54
53
|
var import_OnDestroyRender = require("../lifecycle/OnDestroyRender");
|
|
55
54
|
var import_DrTargetElementIsElement = require("../operators/DrTargetElementIsElement");
|
|
56
55
|
var import_ObjectUtils = require("@dooboostore/core/object/ObjectUtils");
|
|
56
|
+
var import_NodeUtils = require("@dooboostore/core-web/node/NodeUtils");
|
|
57
57
|
const _RawSet = class _RawSet {
|
|
58
58
|
constructor(uuid, type, point, dataSet, detect) {
|
|
59
59
|
this.uuid = uuid;
|
|
@@ -65,14 +65,14 @@ const _RawSet = class _RawSet {
|
|
|
65
65
|
const path = this.findNearThisPath(rawSet);
|
|
66
66
|
if (path) {
|
|
67
67
|
const optionalPath = import_ObjectUtils.ObjectUtils.Path.toOptionalChainPath(path);
|
|
68
|
-
return
|
|
68
|
+
return import_ObjectUtils.ObjectUtils.Script.evaluateReturn(optionalPath, obj);
|
|
69
69
|
}
|
|
70
70
|
};
|
|
71
71
|
this.findParentThis = (obj, rawSet = this) => {
|
|
72
72
|
const path = this.findParentThisPath(rawSet);
|
|
73
73
|
if (path) {
|
|
74
74
|
const optionalPath = import_ObjectUtils.ObjectUtils.Path.toOptionalChainPath(path);
|
|
75
|
-
return
|
|
75
|
+
return import_ObjectUtils.ObjectUtils.Script.evaluateReturn(optionalPath, obj);
|
|
76
76
|
}
|
|
77
77
|
};
|
|
78
78
|
this.findNearThisPath = (rawSet = this) => {
|
|
@@ -87,11 +87,10 @@ const _RawSet = class _RawSet {
|
|
|
87
87
|
const paths = [];
|
|
88
88
|
const findPath = (rawSet2) => {
|
|
89
89
|
if (rawSet2 && rawSet2.point) {
|
|
90
|
-
if ("getAttribute" in rawSet2.point.start && rawSet2.point.start.getAttribute("this-path")) {
|
|
90
|
+
if (rawSet2.point?.start && "getAttribute" in rawSet2.point.start && rawSet2.point.start.getAttribute("this-path")) {
|
|
91
91
|
paths.push(rawSet2.point.start.getAttribute("this-path"));
|
|
92
92
|
}
|
|
93
|
-
if (rawSet2.point.parentRawSet)
|
|
94
|
-
findPath(rawSet2.point.parentRawSet);
|
|
93
|
+
if (rawSet2.point.parentRawSet) findPath(rawSet2.point.parentRawSet);
|
|
95
94
|
}
|
|
96
95
|
};
|
|
97
96
|
findPath(rawSet);
|
|
@@ -100,7 +99,7 @@ const _RawSet = class _RawSet {
|
|
|
100
99
|
};
|
|
101
100
|
}
|
|
102
101
|
get isConnected() {
|
|
103
|
-
return this.point.start.isConnected && this.point.end.isConnected;
|
|
102
|
+
return this.point && this.point.start && this.point.end && this.point.start.isConnected && this.point.end.isConnected;
|
|
104
103
|
}
|
|
105
104
|
// 중요
|
|
106
105
|
getUsingTriggerVariables(config) {
|
|
@@ -115,7 +114,12 @@ const _RawSet = class _RawSet {
|
|
|
115
114
|
}
|
|
116
115
|
} else if (cNode.nodeType === Node.ELEMENT_NODE) {
|
|
117
116
|
const element = cNode;
|
|
118
|
-
const targetAttrNames = (config?.targetAttrs?.map((it) => it.name) ?? []).concat(
|
|
117
|
+
const targetAttrNames = (config?.targetAttrs?.map((it) => it.name) ?? []).concat(
|
|
118
|
+
_RawSet.DR_ATTRIBUTES,
|
|
119
|
+
_RawSet.DR_DETECT_FILTER_OPTIONNAME,
|
|
120
|
+
_RawSet.DR_DETECT_IF_OPTIONNAME,
|
|
121
|
+
_RawSet.DR_DETECT_ATTR_OPTIONNAME
|
|
122
|
+
);
|
|
119
123
|
const targetScripts = targetAttrNames.map((it) => element.getAttribute(it)).filter((it) => it).map((it) => `(${it})`);
|
|
120
124
|
const targetAttrMap = element.getAttribute(import_EventManager.EventManager.normalAttrMapAttrName);
|
|
121
125
|
if (targetAttrMap) {
|
|
@@ -136,6 +140,8 @@ const _RawSet = class _RawSet {
|
|
|
136
140
|
return usingTriggerVariables;
|
|
137
141
|
}
|
|
138
142
|
// 중요 render 처리 부분
|
|
143
|
+
// public async render(obj: any, config: DomRenderConfig): Promise<RawSet[]> {
|
|
144
|
+
// }
|
|
139
145
|
async render(obj, config) {
|
|
140
146
|
const genNode = config.window.document.importNode(this.dataSet.fragment, true);
|
|
141
147
|
const raws = [];
|
|
@@ -143,6 +149,7 @@ const _RawSet = class _RawSet {
|
|
|
143
149
|
const onElementInitCallBacks = [];
|
|
144
150
|
const onThisComponentSetCallBacks = [];
|
|
145
151
|
const drAttrs = [];
|
|
152
|
+
const executedOperators = [];
|
|
146
153
|
for (const cNode of Array.from(genNode.childNodes.values())) {
|
|
147
154
|
let attribute = {};
|
|
148
155
|
if (cNode.nodeType === Node.ELEMENT_NODE) {
|
|
@@ -156,7 +163,7 @@ const _RawSet = class _RawSet {
|
|
|
156
163
|
element: cNode,
|
|
157
164
|
attribute,
|
|
158
165
|
rootObject: obj,
|
|
159
|
-
scriptUtils:
|
|
166
|
+
scriptUtils: import_ObjectUtils.ObjectUtils.Script,
|
|
160
167
|
nearThis: this.findNearThis(obj),
|
|
161
168
|
parentThis: this.findParentThis(obj),
|
|
162
169
|
bindScript: ` /** render **/
|
|
@@ -178,12 +185,12 @@ const _RawSet = class _RawSet {
|
|
|
178
185
|
const runText = _RawSet.expressionGroups(textContent)[0][1];
|
|
179
186
|
let newNode;
|
|
180
187
|
if (textContent?.startsWith("#")) {
|
|
181
|
-
const r =
|
|
188
|
+
const r = import_ObjectUtils.ObjectUtils.Script.evaluate(`${__render.bindScript} return ${runText}`, Object.assign(obj, { __render }));
|
|
182
189
|
const template = config.window.document.createElement("template");
|
|
183
190
|
template.innerHTML = r;
|
|
184
191
|
newNode = template.content;
|
|
185
192
|
} else {
|
|
186
|
-
const r =
|
|
193
|
+
const r = import_ObjectUtils.ObjectUtils.Script.evaluate(`${__render.bindScript} return ${runText}`, Object.assign(obj, { __render }));
|
|
187
194
|
newNode = config.window.document.createTextNode(r);
|
|
188
195
|
}
|
|
189
196
|
cNode.parentNode?.replaceChild(newNode, cNode);
|
|
@@ -243,9 +250,10 @@ const _RawSet = class _RawSet {
|
|
|
243
250
|
for (const operator of operators) {
|
|
244
251
|
const state = await operator.start();
|
|
245
252
|
if (state === import_OperatorExecuter.ExecuteState.EXECUTE) {
|
|
253
|
+
executedOperators.push(operator);
|
|
246
254
|
break;
|
|
247
255
|
} else if (state === import_OperatorExecuter.ExecuteState.STOP) {
|
|
248
|
-
return raws;
|
|
256
|
+
return { raws, executedOperators };
|
|
249
257
|
}
|
|
250
258
|
}
|
|
251
259
|
}
|
|
@@ -265,11 +273,14 @@ const _RawSet = class _RawSet {
|
|
|
265
273
|
fag: genNode,
|
|
266
274
|
scripts: import_EventManager.EventManager.setBindProperty(config?.scripts, obj)
|
|
267
275
|
});
|
|
268
|
-
|
|
276
|
+
import_ObjectUtils.ObjectUtils.Script.evaluate(
|
|
277
|
+
`
|
|
269
278
|
const ${import_EventManager.EventManager.FAG_VARNAME} = this.__render.fag;
|
|
270
279
|
const ${import_EventManager.EventManager.SCRIPTS_VARNAME} = this.__render.scripts;
|
|
271
280
|
const ${import_EventManager.EventManager.RAWSET_VARNAME} = this.__render.rawSet;
|
|
272
|
-
${it.drCompleteOption}`,
|
|
281
|
+
${it.drCompleteOption}`,
|
|
282
|
+
Object.assign(obj, { __render: render })
|
|
283
|
+
);
|
|
273
284
|
}
|
|
274
285
|
});
|
|
275
286
|
for (const it of onThisComponentSetCallBacks) {
|
|
@@ -297,7 +308,7 @@ const _RawSet = class _RawSet {
|
|
|
297
308
|
}
|
|
298
309
|
});
|
|
299
310
|
}
|
|
300
|
-
return raws;
|
|
311
|
+
return { raws, executedOperators };
|
|
301
312
|
}
|
|
302
313
|
// 중요 스타일 적용 부분
|
|
303
314
|
static generateRuleSelector(start, end, sit) {
|
|
@@ -330,9 +341,7 @@ const _RawSet = class _RawSet {
|
|
|
330
341
|
const isRoot = rule.selector.includes(":root");
|
|
331
342
|
if (!isRoot) {
|
|
332
343
|
const selectors = rule.selector.split(",").map((s) => s.trim());
|
|
333
|
-
const transformedSelectors = selectors.map(
|
|
334
|
-
(selector) => this.generateRuleSelector(start, end, selector)
|
|
335
|
-
);
|
|
344
|
+
const transformedSelectors = selectors.map((selector) => this.generateRuleSelector(start, end, selector));
|
|
336
345
|
rule.selector = transformedSelectors.join(", ");
|
|
337
346
|
}
|
|
338
347
|
} else if ((0, import_CssParser.isAtRule)(rule)) {
|
|
@@ -344,9 +353,7 @@ const _RawSet = class _RawSet {
|
|
|
344
353
|
rule.children.forEach((childRule) => {
|
|
345
354
|
if ((0, import_CssParser.isStyleRule)(childRule)) {
|
|
346
355
|
const selectors = childRule.selector.split(",").map((s) => s.trim());
|
|
347
|
-
const transformedSelectors = selectors.map(
|
|
348
|
-
(selector) => this.generateRuleSelector(start, end, selector)
|
|
349
|
-
);
|
|
356
|
+
const transformedSelectors = selectors.map((selector) => this.generateRuleSelector(start, end, selector));
|
|
350
357
|
childRule.selector = transformedSelectors.join(", ");
|
|
351
358
|
}
|
|
352
359
|
});
|
|
@@ -364,7 +371,11 @@ const _RawSet = class _RawSet {
|
|
|
364
371
|
return styleBody;
|
|
365
372
|
}
|
|
366
373
|
applyEvent(obj, fragment = this.dataSet.fragment, config) {
|
|
367
|
-
this.dataSet.config.eventManager.applyEvent(
|
|
374
|
+
this.dataSet.config.eventManager.applyEvent(
|
|
375
|
+
obj,
|
|
376
|
+
this.dataSet.config.eventManager.findAttrElements(fragment, config),
|
|
377
|
+
config
|
|
378
|
+
);
|
|
368
379
|
}
|
|
369
380
|
onRenderedEvent(obj, nodes, config) {
|
|
370
381
|
this.dataSet.config.eventManager.onRenderedEvent(obj, nodes, config);
|
|
@@ -381,7 +392,7 @@ const _RawSet = class _RawSet {
|
|
|
381
392
|
getDrAppendAttributeAndDelete(element, obj) {
|
|
382
393
|
let data = element.getAttribute(_RawSet.DR_APPENDER_NAME);
|
|
383
394
|
if (data && !/\[.+\]/g.test(data)) {
|
|
384
|
-
const currentIndex =
|
|
395
|
+
const currentIndex = import_ObjectUtils.ObjectUtils.Script.evaluateReturn(`${import_ObjectUtils.ObjectUtils.Path.toOptionalChainPath(data)}?.length -1`, obj);
|
|
385
396
|
data = `${data}[${currentIndex}]`;
|
|
386
397
|
element.setAttribute(_RawSet.DR_APPENDER_NAME, data);
|
|
387
398
|
}
|
|
@@ -394,19 +405,28 @@ const _RawSet = class _RawSet {
|
|
|
394
405
|
}
|
|
395
406
|
// 중요 important
|
|
396
407
|
static checkPointCreates(element, obj, config) {
|
|
397
|
-
const
|
|
398
|
-
|
|
399
|
-
|
|
408
|
+
const NodeFilter2 = config.window.NodeFilter;
|
|
409
|
+
const Node2 = config.window.Node;
|
|
410
|
+
const processedNodes = /* @__PURE__ */ new Set();
|
|
411
|
+
const findNodes = import_NodeUtils.NodeUtils.findNodes(
|
|
412
|
+
element,
|
|
413
|
+
(node) => {
|
|
414
|
+
if (node.nodeType === Node2.TEXT_NODE) {
|
|
400
415
|
const between = _RawSet.expressionGroups(import_StringUtils.StringUtils.deleteEnter(node.data ?? ""));
|
|
401
|
-
|
|
402
|
-
|
|
416
|
+
const r2 = between?.length > 0 ? import_NodeUtils.NodeUtils.FindNodesFilterResult.MATCH_AND_SKIP_CHILDREN : import_NodeUtils.NodeUtils.FindNodesFilterResult.NO_MATCH_AND_SKIP_CHILDREN;
|
|
417
|
+
return r2;
|
|
418
|
+
} else if (node.nodeType === Node2.ELEMENT_NODE) {
|
|
403
419
|
const element2 = node;
|
|
404
420
|
if (element2.hasAttribute(_RawSet.DR_PRE_NAME)) {
|
|
405
|
-
|
|
421
|
+
let r3 = import_NodeUtils.NodeUtils.FindNodesFilterResult.NO_MATCH_AND_SKIP_CHILDREN;
|
|
422
|
+
return r3;
|
|
406
423
|
}
|
|
407
424
|
if (element2.hasAttribute(import_EventManager.EventManager.attrAttrName)) {
|
|
408
425
|
const script = element2.getAttribute(import_EventManager.EventManager.attrAttrName) ?? "";
|
|
409
|
-
const keyValuePairs = Array.from(script.matchAll(/(\w+):\s*([^,}]+)/g)).map((match) => ({
|
|
426
|
+
const keyValuePairs = Array.from(script.matchAll(/(\w+):\s*([^,}]+)/g)).map((match) => ({
|
|
427
|
+
key: match[1],
|
|
428
|
+
value: match[2]
|
|
429
|
+
}));
|
|
410
430
|
(keyValuePairs ?? []).forEach((it) => {
|
|
411
431
|
element2.setAttribute(it.key, "${" + it.value + "}$");
|
|
412
432
|
});
|
|
@@ -427,7 +447,7 @@ const _RawSet = class _RawSet {
|
|
|
427
447
|
const originVariable = variablePath;
|
|
428
448
|
variablePath = variablePath.replace(/#[^#]*#/g, "({})");
|
|
429
449
|
const optionalChainPath = import_ObjectUtils.ObjectUtils.Path.toOptionalChainPath(variablePath);
|
|
430
|
-
const cval =
|
|
450
|
+
const cval = import_ObjectUtils.ObjectUtils.Script.evaluateReturn(optionalChainPath, Object.assign(obj));
|
|
431
451
|
if (cval === null) {
|
|
432
452
|
element2.removeAttribute(it);
|
|
433
453
|
} else {
|
|
@@ -439,58 +459,75 @@ const _RawSet = class _RawSet {
|
|
|
439
459
|
return isTargetAttr;
|
|
440
460
|
}).length > 0;
|
|
441
461
|
if (linkVariables.size) {
|
|
442
|
-
element2.setAttribute(
|
|
462
|
+
element2.setAttribute(
|
|
463
|
+
import_EventManager.EventManager.linkTargetMapAttrName,
|
|
464
|
+
JSON.stringify(Array.from(linkVariables.entries()))
|
|
465
|
+
);
|
|
443
466
|
}
|
|
444
467
|
if (normalAttrs.size) {
|
|
445
468
|
element2.setAttribute(import_EventManager.EventManager.normalAttrMapAttrName, JSON.stringify(Array.from(normalAttrs.entries())));
|
|
446
469
|
}
|
|
447
|
-
const
|
|
448
|
-
return
|
|
470
|
+
const r2 = isAttr || isElement ? import_NodeUtils.NodeUtils.FindNodesFilterResult.MATCH_AND_SKIP_CHILDREN : import_NodeUtils.NodeUtils.FindNodesFilterResult.NO_MATCH_AND_CONTINUE;
|
|
471
|
+
return r2;
|
|
449
472
|
}
|
|
450
|
-
|
|
473
|
+
const r = import_NodeUtils.NodeUtils.FindNodesFilterResult.NO_MATCH_AND_CONTINUE;
|
|
474
|
+
return r;
|
|
451
475
|
}
|
|
452
|
-
|
|
476
|
+
);
|
|
453
477
|
const pars = [];
|
|
454
478
|
let currentNode;
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
479
|
+
const name = import_RandomUtils.RandomUtils.uuid();
|
|
480
|
+
for (const currentNode2 of findNodes) {
|
|
481
|
+
processedNodes.add(currentNode2);
|
|
482
|
+
if (currentNode2.nodeType === Node2.TEXT_NODE) {
|
|
483
|
+
const text = currentNode2.textContent ?? "";
|
|
458
484
|
const template = config.window.document?.createElement("template");
|
|
459
485
|
if (!template) break;
|
|
460
486
|
const groups = _RawSet.expressionGroups(text);
|
|
461
|
-
const map = groups.map((it) => ({
|
|
487
|
+
const map = groups.map((it) => ({
|
|
488
|
+
uuid: `${import_RandomUtils.RandomUtils.alphabet(40)}_${obj?.constructor?.name}`,
|
|
489
|
+
content: it[0],
|
|
490
|
+
regexArr: it
|
|
491
|
+
}));
|
|
462
492
|
let lasterIndex = 0;
|
|
463
493
|
for (let i = 0; i < map.length; i++) {
|
|
464
494
|
const it = map[i];
|
|
465
495
|
const regexArr = it.regexArr;
|
|
466
496
|
const preparedText = regexArr.input.substring(lasterIndex, regexArr.index);
|
|
467
497
|
let type;
|
|
468
|
-
if (
|
|
498
|
+
if (currentNode2.parentNode && currentNode2.parentNode.nodeName.toUpperCase() === "STYLE") {
|
|
469
499
|
type = import_RawSetType.RawSetType.STYLE_TEXT;
|
|
470
500
|
} else {
|
|
471
501
|
type = import_RawSetType.RawSetType.TEXT;
|
|
472
502
|
}
|
|
473
|
-
const node = document.createTextNode(preparedText);
|
|
503
|
+
const node = config.window.document.createTextNode(preparedText);
|
|
474
504
|
const startEndPoint = _RawSet.createStartEndPoint({ id: it.uuid, type }, config);
|
|
475
505
|
template.content.append(node);
|
|
476
506
|
template.content.append(startEndPoint.start);
|
|
477
507
|
template.content.append(startEndPoint.end);
|
|
478
508
|
const fragment = config.window.document.createDocumentFragment();
|
|
479
509
|
fragment.append(config.window.document.createTextNode(it.content));
|
|
480
|
-
pars.push(
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
510
|
+
pars.push(
|
|
511
|
+
new _RawSet(
|
|
512
|
+
it.uuid,
|
|
513
|
+
type,
|
|
514
|
+
{
|
|
515
|
+
start: startEndPoint.start,
|
|
516
|
+
node: currentNode2,
|
|
517
|
+
end: startEndPoint.end,
|
|
518
|
+
parent: currentNode2.parentNode
|
|
519
|
+
// thisVariableName: thisVariableName
|
|
520
|
+
},
|
|
521
|
+
{ fragment, config }
|
|
522
|
+
)
|
|
523
|
+
);
|
|
487
524
|
lasterIndex = regexArr.index + it.content.length;
|
|
488
525
|
}
|
|
489
526
|
template.content.append(config.window.document.createTextNode(text.substring(lasterIndex, text.length)));
|
|
490
|
-
|
|
491
|
-
} else if (
|
|
527
|
+
currentNode2?.parentNode?.replaceChild(template.content, currentNode2);
|
|
528
|
+
} else if (currentNode2.nodeType === Node2.ELEMENT_NODE) {
|
|
492
529
|
const uuid = `${import_RandomUtils.RandomUtils.alphabet(40)}`;
|
|
493
|
-
const element2 =
|
|
530
|
+
const element2 = currentNode2;
|
|
494
531
|
const fragment = config.window.document.createDocumentFragment();
|
|
495
532
|
const elementType = import_RawSetType.RawSetType.TARGET_ELEMENT;
|
|
496
533
|
const startEndPoint = _RawSet.createStartEndPoint({ node: element2, id: uuid, type: elementType }, config);
|
|
@@ -499,19 +536,25 @@ const _RawSet = class _RawSet {
|
|
|
499
536
|
const isElement = targetElementNames.includes(element2.tagName.toLowerCase()) || targetElementNames.includes(targetElementIs?.toLowerCase());
|
|
500
537
|
const targetAttrNames = (config.targetAttrs?.map((it) => it.name) ?? []).concat(_RawSet.DR_ATTRIBUTES);
|
|
501
538
|
const isAttr = element2.getAttributeNames().filter((it) => targetAttrNames.includes(it.toLowerCase())).length > 0;
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
fragment.append(
|
|
505
|
-
const rawSet = new _RawSet(
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
539
|
+
currentNode2?.parentNode?.insertBefore(startEndPoint.start, currentNode2);
|
|
540
|
+
currentNode2?.parentNode?.insertBefore(startEndPoint.end, currentNode2.nextSibling);
|
|
541
|
+
fragment.append(currentNode2);
|
|
542
|
+
const rawSet = new _RawSet(
|
|
543
|
+
uuid,
|
|
544
|
+
isElement ? elementType : isAttr ? import_RawSetType.RawSetType.TARGET_ATTR : import_RawSetType.RawSetType.UNKOWN,
|
|
545
|
+
{
|
|
546
|
+
start: startEndPoint.start,
|
|
547
|
+
node: currentNode2,
|
|
548
|
+
end: startEndPoint.end,
|
|
549
|
+
parent: currentNode2.parentNode
|
|
550
|
+
// thisVariableName: thisVariableName
|
|
551
|
+
},
|
|
552
|
+
{ config, fragment }
|
|
553
|
+
);
|
|
512
554
|
pars.push(rawSet);
|
|
513
555
|
}
|
|
514
556
|
}
|
|
557
|
+
const util = import_ElementUtils.ElementUtils;
|
|
515
558
|
return pars;
|
|
516
559
|
}
|
|
517
560
|
static createStartEndPoint(data, config) {
|
|
@@ -587,13 +630,17 @@ const _RawSet = class _RawSet {
|
|
|
587
630
|
static drItOtherEncoding(element, postFix) {
|
|
588
631
|
const random = import_RandomUtils.RandomUtils.uuid() + postFix;
|
|
589
632
|
const regex = /#it#/g;
|
|
590
|
-
element.querySelectorAll(
|
|
633
|
+
element.querySelectorAll(
|
|
634
|
+
`[${_RawSet.DR_IT_OPTIONNAME}], [${_RawSet.DR_FOR_OF_NAME}], [${_RawSet.DR_REPEAT_NAME}], [${_RawSet.DR_APPENDER_NAME}]`
|
|
635
|
+
).forEach((it) => {
|
|
591
636
|
it.innerHTML = it.innerHTML.replace(regex, random);
|
|
592
637
|
});
|
|
593
638
|
return random;
|
|
594
639
|
}
|
|
595
640
|
static drItOtherDecoding(element, random) {
|
|
596
|
-
element.querySelectorAll(
|
|
641
|
+
element.querySelectorAll(
|
|
642
|
+
`[${_RawSet.DR_IT_OPTIONNAME}], [${_RawSet.DR_FOR_OF_NAME}], [${_RawSet.DR_REPEAT_NAME}], [${_RawSet.DR_APPENDER_NAME}]`
|
|
643
|
+
).forEach((it) => {
|
|
597
644
|
it.innerHTML = it.innerHTML.replace(RegExp(random, "g"), "#it#");
|
|
598
645
|
});
|
|
599
646
|
}
|
|
@@ -734,7 +781,7 @@ const _RawSet = class _RawSet {
|
|
|
734
781
|
const style = _RawSet.generateStyleTransform(set.styles ?? [], rawSet.uuid, true);
|
|
735
782
|
targetElement.innerHTML = style + (set.template ?? "");
|
|
736
783
|
} else {
|
|
737
|
-
targetObj =
|
|
784
|
+
targetObj = import_ObjectUtils.ObjectUtils.Script.evaluateReturn(import_ObjectUtils.ObjectUtils.Path.toOptionalChainPath(drThis), obj);
|
|
738
785
|
}
|
|
739
786
|
const componentKey = rawSet.uuid;
|
|
740
787
|
const renderScript = ` /*drThisCreate*/
|
|
@@ -778,7 +825,10 @@ const _RawSet = class _RawSet {
|
|
|
778
825
|
render.attribute = _RawSet.getAttributeObject(element, { script: renderScript, obj, renderData: render });
|
|
779
826
|
render = Object.freeze(render);
|
|
780
827
|
const onCreateDataScript = `return {rootParent: this, render: this.__render}`;
|
|
781
|
-
const onCreateDataParam =
|
|
828
|
+
const onCreateDataParam = import_ObjectUtils.ObjectUtils.Script.evaluate(
|
|
829
|
+
onCreateDataScript,
|
|
830
|
+
Object.assign(obj, { __render: render })
|
|
831
|
+
);
|
|
782
832
|
if ((0, import_OnCreateRenderData.isOnCreateRenderData)(targetObj)) {
|
|
783
833
|
targetObj?.onCreateRenderData(onCreateDataParam);
|
|
784
834
|
}
|
|
@@ -788,7 +838,10 @@ const _RawSet = class _RawSet {
|
|
|
788
838
|
const onCreate = element.getAttribute(_RawSet.DR_ON_CREATE_ARGUMENTS_OPTIONNAME);
|
|
789
839
|
let createParam = [];
|
|
790
840
|
if (onCreate) {
|
|
791
|
-
createParam =
|
|
841
|
+
createParam = import_ObjectUtils.ObjectUtils.Script.evaluateReturn(
|
|
842
|
+
{ bodyScript: renderScript, returnScript: import_ObjectUtils.ObjectUtils.Path.toOptionalChainPath(onCreate) },
|
|
843
|
+
obj
|
|
844
|
+
);
|
|
792
845
|
if (!Array.isArray(createParam)) {
|
|
793
846
|
createParam = [createParam];
|
|
794
847
|
}
|
|
@@ -809,12 +862,13 @@ const _RawSet = class _RawSet {
|
|
|
809
862
|
const oninit = element.getAttribute(_RawSet.DR_ON_CREATED_CALLBACK_OPTIONNAME);
|
|
810
863
|
if (oninit) {
|
|
811
864
|
const script = `${renderScript} ${oninit} `;
|
|
812
|
-
|
|
865
|
+
import_ObjectUtils.ObjectUtils.Script.evaluate(script, Object.assign(obj, { __render: render }));
|
|
813
866
|
}
|
|
814
867
|
targetElement.querySelectorAll(import_EventManager.EventManager.attrNames.map((it) => `[${it}]`).join(",")).forEach((it) => {
|
|
815
868
|
it.setAttribute(import_EventManager.EventManager.ownerVariablePathAttrName, "this");
|
|
816
869
|
});
|
|
817
870
|
const componentNameReplaceKey = import_RandomUtils.RandomUtils.uuid();
|
|
871
|
+
rawSet.point.innerHTML = element.innerHTML;
|
|
818
872
|
const innerHTMLName = targetElement.getAttribute(_RawSet.DR_COMPONENT_INNER_HTML_NAME_OPTIONNAME) ?? "innerHTML";
|
|
819
873
|
if (innerHTMLName) {
|
|
820
874
|
_RawSet.replaceInnerHTML(targetElement, { asIs: `#${innerHTMLName}#`, toBe: element.innerHTML });
|
|
@@ -825,8 +879,14 @@ const _RawSet = class _RawSet {
|
|
|
825
879
|
if (optionThisName) {
|
|
826
880
|
targetElement.innerHTML = targetElement.innerHTML.replaceAll(`@${optionThisName}@`, drThis);
|
|
827
881
|
}
|
|
828
|
-
const nearThisRandom = this.drThisBindEncoding(targetElement, /@nearThis@/g, {
|
|
829
|
-
|
|
882
|
+
const nearThisRandom = this.drThisBindEncoding(targetElement, /@nearThis@/g, {
|
|
883
|
+
config,
|
|
884
|
+
otherReplaceVariablePath: rawSet.findNearThisPath()
|
|
885
|
+
});
|
|
886
|
+
const parentThisRandom = this.drThisBindEncoding(targetElement, /@parentThis@/g, {
|
|
887
|
+
config,
|
|
888
|
+
otherReplaceVariablePath: rawSet.findParentThisPath()
|
|
889
|
+
});
|
|
830
890
|
const vars = this.drVarEncoding(targetElement, drVarOption);
|
|
831
891
|
this.drVarDecoding(targetElement, vars);
|
|
832
892
|
this.drThisDecoding(targetElement, { asIs: thisRandom, toBe: "@this@" });
|
|
@@ -869,7 +929,13 @@ const _RawSet = class _RawSet {
|
|
|
869
929
|
};
|
|
870
930
|
return targetAttribute;
|
|
871
931
|
}
|
|
872
|
-
static createComponentTargetElement({
|
|
932
|
+
static createComponentTargetElement({
|
|
933
|
+
name,
|
|
934
|
+
objFactory,
|
|
935
|
+
template = "",
|
|
936
|
+
styles = [],
|
|
937
|
+
noStrip
|
|
938
|
+
}) {
|
|
873
939
|
const targetElement = {
|
|
874
940
|
name,
|
|
875
941
|
styles,
|
|
@@ -919,7 +985,10 @@ const _RawSet = class _RawSet {
|
|
|
919
985
|
render.attribute = _RawSet.getAttributeObject(element, { script: renderScript, obj, renderData: render });
|
|
920
986
|
render = Object.freeze(render);
|
|
921
987
|
if (constructor) {
|
|
922
|
-
let param =
|
|
988
|
+
let param = import_ObjectUtils.ObjectUtils.Script.evaluateReturn(
|
|
989
|
+
{ bodyScript: renderScript, returnScript: import_ObjectUtils.ObjectUtils.Path.toOptionalChainPath(constructor) },
|
|
990
|
+
Object.assign(obj, { __render: render })
|
|
991
|
+
) ?? [];
|
|
923
992
|
if (!Array.isArray(param)) {
|
|
924
993
|
param = [param];
|
|
925
994
|
}
|
|
@@ -945,7 +1014,15 @@ const _RawSet = class _RawSet {
|
|
|
945
1014
|
applayTemplate = (this.template ?? "").replace(RegExp(`#${innerHTMLName}#`, "g"), applayTemplate);
|
|
946
1015
|
const style = _RawSet.generateStyleTransform(this.styles, rawSet.uuid, true);
|
|
947
1016
|
element.innerHTML = style + (applayTemplate ?? "");
|
|
948
|
-
let data = await _RawSet.drThisCreate(
|
|
1017
|
+
let data = await _RawSet.drThisCreate(
|
|
1018
|
+
rawSet,
|
|
1019
|
+
element,
|
|
1020
|
+
`this.__domrender_components.${rawSet.uuid}`,
|
|
1021
|
+
"",
|
|
1022
|
+
!noStrip,
|
|
1023
|
+
obj,
|
|
1024
|
+
config
|
|
1025
|
+
);
|
|
949
1026
|
if (data && innerHTMLThisRandom) {
|
|
950
1027
|
const template2 = config.window.document.createElement("template");
|
|
951
1028
|
template2.content.append(data);
|
|
@@ -986,7 +1063,10 @@ const _RawSet = class _RawSet {
|
|
|
986
1063
|
const normalAttribute = attribute[import_EventManager.EventManager.normalAttrMapAttrName];
|
|
987
1064
|
if (normalAttribute) {
|
|
988
1065
|
new Map(JSON.parse(normalAttribute)).forEach((v, k) => {
|
|
989
|
-
const cval =
|
|
1066
|
+
const cval = import_ObjectUtils.ObjectUtils.Script.evaluateReturn(
|
|
1067
|
+
{ bodyScript: config.script, returnScript: v },
|
|
1068
|
+
Object.assign(config.obj, config.renderData ? { __render: config.renderData } : void 0)
|
|
1069
|
+
);
|
|
990
1070
|
attribute[k] = cval;
|
|
991
1071
|
});
|
|
992
1072
|
}
|