dom-render 1.0.76 → 1.0.79
Sign up to get free protection for your applications and to get access to all the features.
- package/DomRenderProxy.d.ts +1 -1
- package/DomRenderProxy.js +40 -10
- package/README.MD +12 -1
- package/RawSet.d.ts +11 -2
- package/RawSet.js +100 -65
- package/dist/bundle.js +436 -347
- package/events/EventManager.d.ts +2 -1
- package/events/EventManager.js +40 -6
- package/lifecycle/OnChangeAttrRender.d.ts +3 -0
- package/lifecycle/OnChangeAttrRender.js +2 -0
- package/operators/AttrExpresion.d.ts +0 -4
- package/operators/AttrExpresion.js +43 -67
- package/operators/DrTargetElement.js +26 -0
- package/package.json +1 -1
package/DomRenderProxy.d.ts
CHANGED
@@ -14,7 +14,7 @@ export declare class DomRenderProxy<T extends object> implements ProxyHandler<T>
|
|
14
14
|
run(objProxy: T): void;
|
15
15
|
initRender(target: Node): void;
|
16
16
|
getRawSets(): RawSet[];
|
17
|
-
render(raws?: RawSet[] | string): void;
|
17
|
+
render(raws?: RawSet[] | string, fullPathStr?: string): void;
|
18
18
|
root(paths: string[], value?: any, lastDoneExecute?: boolean): string[];
|
19
19
|
set(target: T, p: string | symbol, value: any, receiver: T): boolean;
|
20
20
|
get(target: T, p: string | symbol, receiver: any): any;
|
package/DomRenderProxy.js
CHANGED
@@ -56,8 +56,8 @@ var DomRenderProxy = /** @class */ (function () {
|
|
56
56
|
DomRenderProxy.prototype.initRender = function (target) {
|
57
57
|
var _this = this;
|
58
58
|
var _a, _b, _c, _d, _e, _f, _g;
|
59
|
-
var onCreate = (_b = (_a = target).getAttribute) === null || _b === void 0 ? void 0 : _b.call(_a,
|
60
|
-
var createParam
|
59
|
+
var onCreate = (_b = (_a = target).getAttribute) === null || _b === void 0 ? void 0 : _b.call(_a, "".concat(EventManager_1.EventManager.attrPrefix, "on-create"));
|
60
|
+
var createParam;
|
61
61
|
if (onCreate) {
|
62
62
|
createParam = ScriptUtils_1.ScriptUtils.evalReturn(onCreate, this._domRender_proxy);
|
63
63
|
}
|
@@ -65,7 +65,8 @@ var DomRenderProxy = /** @class */ (function () {
|
|
65
65
|
var innerHTML = (_e = target.innerHTML) !== null && _e !== void 0 ? _e : '';
|
66
66
|
this._targets.add(target);
|
67
67
|
var rawSets = RawSet_1.RawSet.checkPointCreates(target, this.config);
|
68
|
-
// console.log('-------rawSet', rawSets)
|
68
|
+
// console.log('initRender -------rawSet', rawSets)
|
69
|
+
// 중요 초기에 한번 튕겨줘야함.
|
69
70
|
EventManager_1.eventManager.applyEvent(this._domRender_proxy, EventManager_1.eventManager.findAttrElements(target, this.config), this.config);
|
70
71
|
rawSets.forEach(function (it) {
|
71
72
|
var variables = it.getUsingTriggerVariables(_this.config);
|
@@ -94,7 +95,8 @@ var DomRenderProxy = /** @class */ (function () {
|
|
94
95
|
});
|
95
96
|
return Array.from(set);
|
96
97
|
};
|
97
|
-
|
98
|
+
// 중요 important
|
99
|
+
DomRenderProxy.prototype.render = function (raws, fullPathStr) {
|
98
100
|
var _this = this;
|
99
101
|
if (typeof raws === 'string') {
|
100
102
|
var iter = this._rawSets.get(raws);
|
@@ -107,15 +109,40 @@ var DomRenderProxy = /** @class */ (function () {
|
|
107
109
|
}
|
108
110
|
var removeRawSets = [];
|
109
111
|
(raws !== null && raws !== void 0 ? raws : this.getRawSets()).forEach(function (it) {
|
110
|
-
var _a;
|
112
|
+
var _a, _b, _c;
|
111
113
|
it.getUsingTriggerVariables(_this.config).forEach(function (path) { return _this.addRawSet(path, it); });
|
112
|
-
// console.log('------->', it, it.isConnected)
|
114
|
+
// console.log('------->', it, it.isConnected);
|
113
115
|
if (it.isConnected) {
|
114
|
-
|
116
|
+
// 중요 render될때 targetAttribute 체크 해야함.
|
117
|
+
var targetAttrMap = (_b = (_a = it.point.node) === null || _a === void 0 ? void 0 : _a.getAttribute) === null || _b === void 0 ? void 0 : _b.call(_a, EventManager_1.EventManager.normalAttrMapAttrName);
|
118
|
+
if ((_c = it.detect) === null || _c === void 0 ? void 0 : _c.action) {
|
115
119
|
it.detect.action();
|
116
120
|
}
|
121
|
+
else if (it.type === RawSet_1.RawSetType.TARGET_ELEMENT && it.data && fullPathStr && targetAttrMap && it.fragment.render) {
|
122
|
+
new Map(JSON.parse(targetAttrMap)).forEach(function (v, k) {
|
123
|
+
// it?.data.onChangeAttrRender(k, null, v);
|
124
|
+
var isUsing = EventManager_1.EventManager.isUsingThisVar(v, "this.".concat(fullPathStr));
|
125
|
+
if (isUsing) {
|
126
|
+
var render = it.fragment.render;
|
127
|
+
// console.log('render-->', (it.fragment as any).render)
|
128
|
+
var script = "".concat(render.renderScript, " return ").concat(v, " ");
|
129
|
+
var cval = ScriptUtils_1.ScriptUtils.eval(script, Object.assign(_this._domRender_proxy, { __render: render }));
|
130
|
+
it.data.onChangeAttrRender(k, cval);
|
131
|
+
}
|
132
|
+
// console.log('---?', v, fullPathStr, isUsing);
|
133
|
+
});
|
134
|
+
// ------------------->
|
135
|
+
}
|
117
136
|
else {
|
118
137
|
var rawSets = it.render(_this._domRender_proxy, _this.config);
|
138
|
+
// 대상 attribute 있으면
|
139
|
+
// const targetAttrs = (it.point.node as Element).getAttribute(EventManager.normalAttrMapAttrName);
|
140
|
+
// if (it?.data.onChangeAttrRender && it.type === RawSetType.TARGET_ELEMENT && targetAttrs) {
|
141
|
+
// new Map<string, string>(JSON.parse(targetAttrs)).forEach((v, k) => {
|
142
|
+
// it?.data.onChangeAttrRender(k, null, v);
|
143
|
+
// });
|
144
|
+
// }
|
145
|
+
// 그외 자식들 render
|
119
146
|
if (rawSets && rawSets.length > 0) {
|
120
147
|
_this.render(rawSets);
|
121
148
|
}
|
@@ -158,6 +185,7 @@ var DomRenderProxy = /** @class */ (function () {
|
|
158
185
|
var fullPathStr_1 = strings.map(function (it) { return isNaN(Number(it)) ? '.' + it : "[".concat(it, "]"); }).join('').slice(1);
|
159
186
|
if (lastDoneExecute) {
|
160
187
|
var iterable = this._rawSets.get(fullPathStr_1);
|
188
|
+
// console.log('----->', iterable);
|
161
189
|
// array check
|
162
190
|
var front = strings.slice(0, strings.length - 1).map(function (it) { return isNaN(Number(it)) ? '.' + it : "[".concat(it, "]"); }).join('');
|
163
191
|
var last = strings[strings.length - 1];
|
@@ -169,12 +197,14 @@ var DomRenderProxy = /** @class */ (function () {
|
|
169
197
|
}
|
170
198
|
}
|
171
199
|
else if (iterable) {
|
172
|
-
|
173
|
-
this.render(Array.from(iterable));
|
200
|
+
this.render(Array.from(iterable), fullPathStr_1);
|
174
201
|
}
|
175
202
|
this._targets.forEach(function (it) {
|
203
|
+
// console.log('target------->,', it)
|
204
|
+
// return;
|
176
205
|
if (it.nodeType === Node.DOCUMENT_FRAGMENT_NODE || it.nodeType === Node.ELEMENT_NODE) {
|
177
206
|
var targets = EventManager_1.eventManager.findAttrElements(it, _this.config);
|
207
|
+
// console.log('------>', targets);
|
178
208
|
EventManager_1.eventManager.changeVar(_this._domRender_proxy, targets, "this.".concat(fullPathStr_1), _this.config);
|
179
209
|
}
|
180
210
|
});
|
@@ -281,7 +311,7 @@ var DomRenderProxy = /** @class */ (function () {
|
|
281
311
|
};
|
282
312
|
DomRenderProxy.prototype.addRawSet = function (path, rawSet) {
|
283
313
|
var _a;
|
284
|
-
// console.log('addRawSet-->', path, rawSet)
|
314
|
+
// console.log('addRawSet--> path:', path, 'rawSet:', rawSet)
|
285
315
|
if (!this._rawSets.get(path)) {
|
286
316
|
this._rawSets.set(path, new Set());
|
287
317
|
}
|
package/README.MD
CHANGED
@@ -7,7 +7,7 @@ DOM-RENDER
|
|
7
7
|
|
8
8
|
# 🚀 Quick start
|
9
9
|
```html
|
10
|
-
<script src="https://cdn.jsdelivr.net/npm/dom-render@1.0.
|
10
|
+
<script src="https://cdn.jsdelivr.net/npm/dom-render@1.0.78/dist/bundle.js"></script>
|
11
11
|
```
|
12
12
|
```html
|
13
13
|
<!DOCTYPE html>
|
@@ -624,6 +624,13 @@ const data = DomRender.run(new Data(), document.querySelector('#app')!, config);
|
|
624
624
|
using component
|
625
625
|
```html
|
626
626
|
<my-element dr-on-component-init="$component.say();"></my-element>
|
627
|
+
|
628
|
+
<home value="${this.name}$" wow="${this.color}$">
|
629
|
+
${#component#.homeName}$
|
630
|
+
<home value="${#component#.homeName}$" wow="${#component#.homeColor}$" dr-component-name="sub_component" dr-component-inner-html-name="innerHTML">
|
631
|
+
${#sub_component#.homeName}$
|
632
|
+
</home>
|
633
|
+
</home>
|
627
634
|
```
|
628
635
|
- attribute
|
629
636
|
- dr-on-component-init: component created init call script
|
@@ -631,6 +638,10 @@ using component
|
|
631
638
|
- $element: element instance
|
632
639
|
- $attribute: element attribute object
|
633
640
|
- $innerHTML: element innerHTML string
|
641
|
+
- #component#: component instance
|
642
|
+
- #innerHTML#: element innerHTML
|
643
|
+
- dr-component-name: renaming component variable name (default: component)
|
644
|
+
- dr-inner-html-name: renaming innerHTML variable name (default: innerHTML)
|
634
645
|
---
|
635
646
|
|
636
647
|
# License
|
package/RawSet.d.ts
CHANGED
@@ -47,6 +47,12 @@ export declare type ElementInitCallBack = {
|
|
47
47
|
targetElement: TargetElement;
|
48
48
|
creatorMetaData: CreatorMetaData;
|
49
49
|
};
|
50
|
+
export declare enum RawSetType {
|
51
|
+
TEXT = "TEXT",
|
52
|
+
TARGET_ELEMENT = "TARGET_ELEMENT",
|
53
|
+
TARGET_ATTR = "TARGET_ATTR",
|
54
|
+
UNKOWN = "UNKOWN"
|
55
|
+
}
|
50
56
|
export declare type Render = {
|
51
57
|
rawset?: RawSet;
|
52
58
|
scripts?: {
|
@@ -63,8 +69,10 @@ export declare type Render = {
|
|
63
69
|
};
|
64
70
|
export declare class RawSet {
|
65
71
|
uuid: string;
|
72
|
+
type: RawSetType;
|
66
73
|
point: {
|
67
74
|
start: Comment;
|
75
|
+
node: Node;
|
68
76
|
end: Comment;
|
69
77
|
thisVariableName?: string | null;
|
70
78
|
};
|
@@ -72,7 +80,7 @@ export declare class RawSet {
|
|
72
80
|
detect?: {
|
73
81
|
action: Function;
|
74
82
|
} | undefined;
|
75
|
-
data
|
83
|
+
data?: any;
|
76
84
|
static readonly DR = "dr";
|
77
85
|
static readonly DR_IF_NAME = "dr-if";
|
78
86
|
static readonly DR_FOR_NAME = "dr-for";
|
@@ -96,8 +104,9 @@ export declare class RawSet {
|
|
96
104
|
static readonly drAttrsOriginName: Attrs;
|
97
105
|
static readonly DR_TAGS: never[];
|
98
106
|
static readonly DR_ATTRIBUTES: string[];
|
99
|
-
constructor(uuid: string, point: {
|
107
|
+
constructor(uuid: string, type: RawSetType, point: {
|
100
108
|
start: Comment;
|
109
|
+
node: Node;
|
101
110
|
end: Comment;
|
102
111
|
thisVariableName?: string | null;
|
103
112
|
}, fragment: DocumentFragment, detect?: {
|
package/RawSet.js
CHANGED
@@ -20,7 +20,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
20
20
|
return to.concat(ar || Array.prototype.slice.call(from));
|
21
21
|
};
|
22
22
|
Object.defineProperty(exports, "__esModule", { value: true });
|
23
|
-
exports.RawSet = exports.DestroyOptionType = void 0;
|
23
|
+
exports.RawSet = exports.RawSetType = exports.DestroyOptionType = void 0;
|
24
24
|
var RandomUtils_1 = require("./utils/random/RandomUtils");
|
25
25
|
var StringUtils_1 = require("./utils/string/StringUtils");
|
26
26
|
var ScriptUtils_1 = require("./utils/script/ScriptUtils");
|
@@ -42,20 +42,27 @@ var DrAppender_1 = require("./operators/DrAppender");
|
|
42
42
|
var DrRepeat_1 = require("./operators/DrRepeat");
|
43
43
|
var DrTargetElement_1 = require("./operators/DrTargetElement");
|
44
44
|
var DrTargetAttr_1 = require("./operators/DrTargetAttr");
|
45
|
-
var AttrExpresion_1 = require("./operators/AttrExpresion");
|
46
45
|
var DestroyOptionType;
|
47
46
|
(function (DestroyOptionType) {
|
48
47
|
DestroyOptionType["NO_DESTROY"] = "NO_DESTROY";
|
49
48
|
DestroyOptionType["NO_MESSENGER_DESTROY"] = "NO_MESSENGER_DESTROY";
|
50
49
|
})(DestroyOptionType = exports.DestroyOptionType || (exports.DestroyOptionType = {}));
|
50
|
+
var RawSetType;
|
51
|
+
(function (RawSetType) {
|
52
|
+
RawSetType["TEXT"] = "TEXT";
|
53
|
+
RawSetType["TARGET_ELEMENT"] = "TARGET_ELEMENT";
|
54
|
+
RawSetType["TARGET_ATTR"] = "TARGET_ATTR";
|
55
|
+
RawSetType["UNKOWN"] = "UNKOWN";
|
56
|
+
})(RawSetType = exports.RawSetType || (exports.RawSetType = {}));
|
51
57
|
var RawSet = /** @class */ (function () {
|
52
|
-
function RawSet(uuid, point, fragment, detect, data) {
|
53
|
-
if (data === void 0) { data = {}; }
|
58
|
+
function RawSet(uuid, type, point, fragment, detect, data) {
|
54
59
|
this.uuid = uuid;
|
60
|
+
this.type = type;
|
55
61
|
this.point = point;
|
56
62
|
this.fragment = fragment;
|
57
63
|
this.detect = detect;
|
58
64
|
this.data = data;
|
65
|
+
// console.log('rawset constructor->', (this.point.node as Element).getAttributeNames());
|
59
66
|
}
|
60
67
|
Object.defineProperty(RawSet.prototype, "isConnected", {
|
61
68
|
get: function () {
|
@@ -76,19 +83,24 @@ var RawSet = /** @class */ (function () {
|
|
76
83
|
}
|
77
84
|
else if (cNode.nodeType === Node.ELEMENT_NODE) {
|
78
85
|
var element_1 = cNode;
|
79
|
-
var
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
86
|
+
var targetAttrNames = ((_c = (_b = config === null || config === void 0 ? void 0 : config.targetAttrs) === null || _b === void 0 ? void 0 : _b.map(function (it) { return it.name; })) !== null && _c !== void 0 ? _c : []).concat(RawSet.DR_ATTRIBUTES); // .concat(EventManager.normalAttrMapAttrName);
|
87
|
+
var targetScripts_1 = targetAttrNames.map(function (it) { return element_1.getAttribute(it); }).filter(function (it) { return it; });
|
88
|
+
var targetAttrMap = element_1.getAttribute(EventManager_1.EventManager.normalAttrMapAttrName);
|
89
|
+
if (targetAttrMap) {
|
90
|
+
// console.log('----->', targetAttr);
|
91
|
+
new Map(JSON.parse(targetAttrMap)).forEach(function (v, k) {
|
92
|
+
targetScripts_1.push(v);
|
93
|
+
});
|
94
|
+
}
|
95
|
+
script = targetScripts_1.join(';');
|
96
|
+
// attribute쪽 체크하는거 추가
|
84
97
|
// console.log('----!!!!!-->', targetAttrNames)
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
script += ';' + otherAttrs;
|
98
|
+
// const otherAttrs = element.getAttributeNames()
|
99
|
+
// .filter(it => !targetAttrNames.includes(it.toLowerCase()) && RawSet.isExporesion(element.getAttribute(it)))
|
100
|
+
// .map(it => {
|
101
|
+
// return `\`${element.getAttribute(it) ?? ''}\``;
|
102
|
+
// }).join(';');
|
103
|
+
// script += ';' + otherAttrs
|
92
104
|
}
|
93
105
|
if (script) {
|
94
106
|
// script = script.replace('}$','}');
|
@@ -106,6 +118,7 @@ var RawSet = /** @class */ (function () {
|
|
106
118
|
// console.log('usingTriggerVariable----------->', usingTriggerVariables)
|
107
119
|
return usingTriggerVariables;
|
108
120
|
};
|
121
|
+
// 중요 render
|
109
122
|
RawSet.prototype.render = function (obj, config) {
|
110
123
|
var _this = this;
|
111
124
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
@@ -179,7 +192,6 @@ var RawSet = /** @class */ (function () {
|
|
179
192
|
new Dr_1.Dr(this, __render, { raws: raws, fag: fag }, { element: element, attrs: drAttr }, { config: config, obj: obj }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
|
180
193
|
new DrIf_1.DrIf(this, __render, { raws: raws, fag: fag }, { element: element, attrs: drAttr }, { config: config, obj: obj }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
|
181
194
|
new DrThis_1.DrThis(this, __render, { raws: raws, fag: fag }, { element: element, attrs: drAttr }, { config: config, obj: obj }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
|
182
|
-
new AttrExpresion_1.AttrExpresion(this, __render, { raws: raws, fag: fag }, { element: element, attrs: drAttr }, { config: config, obj: obj }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
|
183
195
|
new DrForm_1.DrForm(this, __render, { raws: raws, fag: fag }, { element: element, attrs: drAttr }, { config: config, obj: obj }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
|
184
196
|
new DrInnerText_1.DrInnerText(this, __render, { raws: raws, fag: fag }, { element: element, attrs: drAttr }, { config: config, obj: obj }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
|
185
197
|
new DrInnerHTML_1.DrInnerHTML(this, __render, { raws: raws, fag: fag }, { element: element, attrs: drAttr }, { config: config, obj: obj }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
|
@@ -290,8 +302,9 @@ var RawSet = /** @class */ (function () {
|
|
290
302
|
this.childAllRemove();
|
291
303
|
(_a = this.point.start.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(genNode, this.point.start.nextSibling);
|
292
304
|
};
|
305
|
+
// 중요 important
|
293
306
|
RawSet.checkPointCreates = function (element, config) {
|
294
|
-
var _a, _b, _c, _d;
|
307
|
+
var _a, _b, _c, _d, _e, _f, _g, _h;
|
295
308
|
var thisVariableName = element.__domrender_this_variable_name;
|
296
309
|
// console.log('checkPointCreates thisVariableName', thisVariableName);
|
297
310
|
var nodeIterator = config.window.document.createNodeIterator(element, NodeFilter.SHOW_ALL, {
|
@@ -300,7 +313,7 @@ var RawSet = /** @class */ (function () {
|
|
300
313
|
if (node.nodeType === Node.TEXT_NODE) {
|
301
314
|
// console.log('????????', node.parentElement, node.parentElement?.getAttribute('dr-pre'));
|
302
315
|
// console.log('???????/',node.textContent, node.parentElement?.getAttribute('dr-pre'))
|
303
|
-
// 나중에
|
316
|
+
// TODO: 나중에
|
304
317
|
// const between = StringUtils.betweenRegexpStr('[$#]\\{', '\\}', StringUtils.deleteEnter((node as Text).data ?? ''))
|
305
318
|
var between = RawSet.exporesionGrouops(StringUtils_1.StringUtils.deleteEnter((_a = node.data) !== null && _a !== void 0 ? _a : ''));
|
306
319
|
// console.log('bbbb', between)
|
@@ -312,13 +325,21 @@ var RawSet = /** @class */ (function () {
|
|
312
325
|
var element_2 = node;
|
313
326
|
// console.log('------>', element);
|
314
327
|
var isElement = ((_c = (_b = config.targetElements) === null || _b === void 0 ? void 0 : _b.map(function (it) { return it.name.toLowerCase(); })) !== null && _c !== void 0 ? _c : []).includes(element_2.tagName.toLowerCase());
|
315
|
-
var
|
328
|
+
var targetAttrNames_1 = ((_e = (_d = config.targetAttrs) === null || _d === void 0 ? void 0 : _d.map(function (it) { return it.name; })) !== null && _e !== void 0 ? _e : []).concat(RawSet.DR_ATTRIBUTES);
|
329
|
+
var normalAttrs_1 = new Map();
|
316
330
|
var isAttr = element_2.getAttributeNames().filter(function (it) {
|
317
|
-
var
|
331
|
+
var value = element_2.getAttribute(it);
|
332
|
+
if (value && RawSet.isExporesion(value)) {
|
333
|
+
normalAttrs_1.set(it, RawSet.exporesionGrouops(value)[0][1]);
|
334
|
+
}
|
318
335
|
// console.log(element.getAttribute(it), attrExpresion);
|
319
|
-
var isTargetAttr =
|
320
|
-
return isTargetAttr
|
336
|
+
var isTargetAttr = targetAttrNames_1.includes(it.toLowerCase());
|
337
|
+
return isTargetAttr;
|
321
338
|
}).length > 0;
|
339
|
+
// 기본 attribute를 처리하기위해
|
340
|
+
if (normalAttrs_1.size) {
|
341
|
+
element_2.setAttribute(EventManager_1.EventManager.normalAttrMapAttrName, JSON.stringify(Array.from(normalAttrs_1.entries())));
|
342
|
+
}
|
322
343
|
return (isAttr || isElement) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
|
323
344
|
}
|
324
345
|
return NodeFilter.FILTER_REJECT;
|
@@ -329,52 +350,53 @@ var RawSet = /** @class */ (function () {
|
|
329
350
|
var _loop_1 = function () {
|
330
351
|
if (currentNode.nodeType === Node.TEXT_NODE) {
|
331
352
|
var text = (_a = currentNode.textContent) !== null && _a !== void 0 ? _a : '';
|
332
|
-
var
|
353
|
+
var template = config.window.document.createElement('template');
|
333
354
|
// const a = StringUtils.regexExec(/\$\{.*?\}/g, text);
|
334
355
|
// const a = StringUtils.regexExec(/[$#]\{.*?\}/g, text);
|
335
|
-
// const a = StringUtils.betweenRegexpStr('[$#]\\{', '\\}', text); //
|
336
|
-
var
|
337
|
-
var map =
|
338
|
-
|
339
|
-
|
340
|
-
|
341
|
-
|
342
|
-
|
343
|
-
|
344
|
-
|
345
|
-
map.forEach(function (it) {
|
346
|
-
var regexArr = it.regexArr;
|
347
|
-
var preparedText = regexArr.input.substring(lasterIndex_1, regexArr.index);
|
348
|
-
var start = config.window.document.createComment("start text ".concat(it.uuid));
|
349
|
-
var end = config.window.document.createComment("end text ".concat(it.uuid));
|
356
|
+
// const a = StringUtils.betweenRegexpStr('[$#]\\{', '\\}', text); // <--TODO: 나중에..
|
357
|
+
var groups = RawSet.exporesionGrouops(text);
|
358
|
+
var map = groups.map(function (it) { return ({ uuid: RandomUtils_1.RandomUtils.uuid(), content: it[0], regexArr: it }); });
|
359
|
+
var lasterIndex = 0;
|
360
|
+
for (var i = 0; i < map.length; i++) {
|
361
|
+
var it_4 = map[i];
|
362
|
+
var regexArr = it_4.regexArr;
|
363
|
+
var preparedText = regexArr.input.substring(lasterIndex, regexArr.index);
|
364
|
+
var start = config.window.document.createComment("start text ".concat(it_4.uuid));
|
365
|
+
var end = config.window.document.createComment("end text ".concat(it_4.uuid));
|
350
366
|
// layout setting
|
351
|
-
|
352
|
-
|
353
|
-
|
367
|
+
template.content.append(document.createTextNode(preparedText)); // 사이사이값.
|
368
|
+
template.content.append(start);
|
369
|
+
template.content.append(end);
|
354
370
|
// content
|
355
371
|
var fragment = config.window.document.createDocumentFragment();
|
356
|
-
fragment.append(config.window.document.createTextNode(
|
357
|
-
pars.push(new RawSet(
|
372
|
+
fragment.append(config.window.document.createTextNode(it_4.content));
|
373
|
+
pars.push(new RawSet(it_4.uuid, RawSetType.TEXT, {
|
358
374
|
start: start,
|
375
|
+
node: currentNode,
|
359
376
|
end: end,
|
360
377
|
thisVariableName: thisVariableName
|
361
378
|
}, fragment));
|
362
|
-
|
363
|
-
}
|
364
|
-
|
365
|
-
(_b = currentNode === null || currentNode === void 0 ? void 0 : currentNode.parentNode) === null || _b === void 0 ? void 0 : _b.replaceChild(
|
379
|
+
lasterIndex = regexArr.index + it_4.content.length;
|
380
|
+
}
|
381
|
+
template.content.append(config.window.document.createTextNode(text.substring(lasterIndex, text.length)));
|
382
|
+
(_b = currentNode === null || currentNode === void 0 ? void 0 : currentNode.parentNode) === null || _b === void 0 ? void 0 : _b.replaceChild(template.content, currentNode);
|
366
383
|
}
|
367
|
-
else {
|
384
|
+
else if (currentNode.nodeType === Node.ELEMENT_NODE) {
|
368
385
|
var uuid = RandomUtils_1.RandomUtils.uuid();
|
386
|
+
var element_3 = currentNode;
|
369
387
|
var fragment = config.window.document.createDocumentFragment();
|
370
388
|
var start = config.window.document.createComment("start ".concat(uuid));
|
371
389
|
var end = config.window.document.createComment("end ".concat(uuid));
|
372
390
|
// console.log('start--', uuid)
|
373
|
-
(_c =
|
374
|
-
(
|
391
|
+
var isElement = ((_d = (_c = config.targetElements) === null || _c === void 0 ? void 0 : _c.map(function (it) { return it.name.toLowerCase(); })) !== null && _d !== void 0 ? _d : []).includes(element_3.tagName.toLowerCase());
|
392
|
+
var targetAttrNames_2 = ((_f = (_e = config.targetAttrs) === null || _e === void 0 ? void 0 : _e.map(function (it) { return it.name; })) !== null && _f !== void 0 ? _f : []).concat(RawSet.DR_ATTRIBUTES);
|
393
|
+
var isAttr = element_3.getAttributeNames().filter(function (it) { return targetAttrNames_2.includes(it.toLowerCase()); }).length > 0;
|
394
|
+
(_g = currentNode === null || currentNode === void 0 ? void 0 : currentNode.parentNode) === null || _g === void 0 ? void 0 : _g.insertBefore(start, currentNode);
|
395
|
+
(_h = currentNode === null || currentNode === void 0 ? void 0 : currentNode.parentNode) === null || _h === void 0 ? void 0 : _h.insertBefore(end, currentNode.nextSibling);
|
375
396
|
fragment.append(currentNode);
|
376
|
-
pars.push(new RawSet(uuid, {
|
397
|
+
pars.push(new RawSet(uuid, isElement ? RawSetType.TARGET_ELEMENT : (isAttr ? RawSetType.TARGET_ATTR : RawSetType.UNKOWN), {
|
377
398
|
start: start,
|
399
|
+
node: currentNode,
|
378
400
|
end: end,
|
379
401
|
thisVariableName: thisVariableName
|
380
402
|
}, fragment));
|
@@ -452,8 +474,8 @@ var RawSet = /** @class */ (function () {
|
|
452
474
|
var nodeIterator = config.window.document.createNodeIterator(subElement, NodeFilter.SHOW_ELEMENT, {
|
453
475
|
acceptNode: function (node) {
|
454
476
|
if (node.nodeType === Node.ELEMENT_NODE) {
|
455
|
-
var
|
456
|
-
return
|
477
|
+
var element_4 = node;
|
478
|
+
return element_4.hasAttribute(as) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
|
457
479
|
}
|
458
480
|
else {
|
459
481
|
return NodeFilter.FILTER_REJECT;
|
@@ -463,9 +485,9 @@ var RawSet = /** @class */ (function () {
|
|
463
485
|
var node;
|
464
486
|
// eslint-disable-next-line no-cond-assign
|
465
487
|
while (node = nodeIterator.nextNode()) {
|
466
|
-
var
|
467
|
-
|
468
|
-
|
488
|
+
var element_5 = node;
|
489
|
+
element_5.setAttribute(to, (_a = element_5.getAttribute(as)) !== null && _a !== void 0 ? _a : '');
|
490
|
+
element_5.removeAttribute(as);
|
469
491
|
}
|
470
492
|
});
|
471
493
|
};
|
@@ -574,8 +596,8 @@ var RawSet = /** @class */ (function () {
|
|
574
596
|
styles: styles,
|
575
597
|
template: template,
|
576
598
|
callBack: function (element, obj, rawSet, attrs) {
|
577
|
-
var _a, _b, _c, _d;
|
578
|
-
// console.log('callback------->')
|
599
|
+
var _a, _b, _c, _d, _e, _f;
|
600
|
+
// console.log('callback------->', element)
|
579
601
|
if (!obj.__domrender_components) {
|
580
602
|
obj.__domrender_components = {};
|
581
603
|
}
|
@@ -584,6 +606,7 @@ var RawSet = /** @class */ (function () {
|
|
584
606
|
var attribute = DomUtils_1.DomUtils.getAttributeToObject(element);
|
585
607
|
var renderScript = 'var $component = this.__render.component; var $element = this.__render.element; var $router = this.__render.router; var $innerHTML = this.__render.innerHTML; var $attribute = this.__render.attribute; var $creatorMetaData = this.__render.creatorMetaData;';
|
586
608
|
var render = Object.freeze({
|
609
|
+
renderScript: renderScript,
|
587
610
|
element: element,
|
588
611
|
innerHTML: element.innerHTML,
|
589
612
|
attribute: attribute,
|
@@ -619,6 +642,16 @@ var RawSet = /** @class */ (function () {
|
|
619
642
|
i.creator = new Proxy(rawSet.point.thisVariableName ? ScriptUtils_1.ScriptUtils.evalReturn(rawSet.point.thisVariableName, obj) : obj, new Types_1.DomRenderFinalProxy());
|
620
643
|
this.__creatorMetaData = i;
|
621
644
|
render = __assign({ component: instance, creatorMetaData: i }, render);
|
645
|
+
// 중요 dr-normal-attr-map
|
646
|
+
var normalAttrMap = element.getAttribute(EventManager_1.EventManager.normalAttrMapAttrName);
|
647
|
+
if (instance.onChangeAttrRender && normalAttrMap) {
|
648
|
+
new Map(JSON.parse(normalAttrMap)).forEach(function (value, key) {
|
649
|
+
var script = "".concat(renderScript, " return ").concat(value, " ");
|
650
|
+
var cval = ScriptUtils_1.ScriptUtils.eval(script, Object.assign(obj, { __render: render }));
|
651
|
+
// element.setAttribute(key, cval);
|
652
|
+
instance.onChangeAttrRender(key, cval);
|
653
|
+
});
|
654
|
+
}
|
622
655
|
// dr-on-create onCreateRender
|
623
656
|
var onCreate = element.getAttribute("".concat(EventManager_1.EventManager.attrPrefix, "on-create"));
|
624
657
|
this.__render = render;
|
@@ -633,15 +666,17 @@ var RawSet = /** @class */ (function () {
|
|
633
666
|
(_d = instance === null || instance === void 0 ? void 0 : instance.onCreateRender) === null || _d === void 0 ? void 0 : _d.call.apply(_d, __spreadArray([instance], createParam, false));
|
634
667
|
var applayTemplate = element.innerHTML;
|
635
668
|
var innerHTMLThisRandom;
|
669
|
+
var componentName = (_e = element.getAttribute("".concat(EventManager_1.EventManager.attrPrefix, "component-name"))) !== null && _e !== void 0 ? _e : 'component';
|
670
|
+
var innerHTMLName = (_f = element.getAttribute("".concat(EventManager_1.EventManager.attrPrefix, "component-inner-html-name"))) !== null && _f !== void 0 ? _f : 'innerHTML';
|
636
671
|
if (applayTemplate) {
|
637
672
|
// if (rawSet.point.thisVariableName) {
|
638
673
|
// 넘어온 innerHTML에 this가 있으면 해당안되게 우선 치환.
|
639
674
|
innerHTMLThisRandom = RandomUtils_1.RandomUtils.uuid();
|
640
675
|
applayTemplate = applayTemplate.replace(/this\./g, innerHTMLThisRandom);
|
641
676
|
// }
|
642
|
-
applayTemplate = applayTemplate.replace(
|
677
|
+
applayTemplate = applayTemplate.replace(RegExp("#".concat(componentName, "#"), 'g'), 'this');
|
643
678
|
}
|
644
|
-
applayTemplate = template.replace(
|
679
|
+
applayTemplate = template.replace(RegExp("#".concat(innerHTMLName, "#"), 'g'), applayTemplate);
|
645
680
|
// dr-on-component-init
|
646
681
|
var oninit = element.getAttribute("".concat(EventManager_1.EventManager.attrPrefix, "on-component-init")); // dr-on-component-init
|
647
682
|
if (oninit) {
|
@@ -656,10 +691,10 @@ var RawSet = /** @class */ (function () {
|
|
656
691
|
var data = RawSet.drThisCreate(element, "this.__domrender_components.".concat(componentKey), '', true, obj, config);
|
657
692
|
// 넘어온 innerHTML에 this가 있는걸 다시 복호화해서 제대로 작동하도록한다.
|
658
693
|
if (innerHTMLThisRandom) {
|
659
|
-
var
|
660
|
-
|
661
|
-
|
662
|
-
data =
|
694
|
+
var template_1 = config.window.document.createElement('template');
|
695
|
+
template_1.content.append(data);
|
696
|
+
template_1.innerHTML = template_1.innerHTML.replace(RegExp(innerHTMLThisRandom, 'g'), 'this.');
|
697
|
+
data = template_1.content;
|
663
698
|
}
|
664
699
|
data.render = render;
|
665
700
|
return data;
|