lithent 1.2.2 → 1.2.4
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 +11 -13
- package/dist/lithent.mjs +797 -360
- package/dist/lithent.mjs.map +1 -1
- package/dist/lithent.umd.js +1 -1
- package/dist/lithent.umd.js.map +1 -1
- package/dist/render.d.ts +1 -0
- package/examples/dist/assets/index-dd17bda0.js +2 -0
- package/examples/dist/assets/index-dd17bda0.js.map +1 -0
- package/examples/dist/index.html +1 -1
- package/package.json +1 -1
- package/src/diff.ts +8 -9
- package/src/render.ts +6 -4
- package/src/tests/loop2.tsx +77 -0
- package/examples/dist/assets/index-35f93159.js +0 -2
- package/examples/dist/assets/index-35f93159.js.map +0 -1
package/dist/lithent.mjs
CHANGED
|
@@ -1,24 +1,64 @@
|
|
|
1
|
-
const
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
var
|
|
6
|
-
return
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
1
|
+
const checkPlainWDomType = (wDom) => typeof wDom === "object" && !("resolve" in wDom);
|
|
2
|
+
const checkPlainType = (wDom, typeName) => checkPlainWDomType(wDom) && wDom.type === typeName;
|
|
3
|
+
const checkSameCustomComponent = (newWDom, originalWDom) => "ctor" in newWDom ? newWDom.ctor === (originalWDom == null ? void 0 : originalWDom.ctor) : newWDom === (originalWDom == null ? void 0 : originalWDom.ctor);
|
|
4
|
+
const checkSameFragment = (newWDom, originalWDom) => {
|
|
5
|
+
var _a, _b;
|
|
6
|
+
return checkPlainWDomType(newWDom) && (originalWDom == null ? void 0 : originalWDom.type) === "fragment" && ((_a = originalWDom == null ? void 0 : originalWDom.children) == null ? void 0 : _a.length) === ((_b = newWDom == null ? void 0 : newWDom.children) == null ? void 0 : _b.length);
|
|
7
|
+
};
|
|
8
|
+
const checkSameTagElement = (newWDom, originalWDom) => {
|
|
9
|
+
var _a, _b;
|
|
10
|
+
return checkPlainWDomType(newWDom) && (originalWDom == null ? void 0 : originalWDom.type) === "element" && (originalWDom == null ? void 0 : originalWDom.tag) === newWDom.tag && ((_a = originalWDom == null ? void 0 : originalWDom.children) == null ? void 0 : _a.length) === ((_b = newWDom == null ? void 0 : newWDom.children) == null ? void 0 : _b.length);
|
|
11
|
+
};
|
|
12
|
+
const checkNormalTypeElement = (newWDom, originalWDom) => checkPlainWDomType(newWDom) && (originalWDom == null ? void 0 : originalWDom.type) === newWDom.type && (newWDom.type !== "loop" || newWDom.type === "loop" && checkExisty(getKey((newWDom.children || [])[0])) && checkExisty(getKey((originalWDom.children || [])[0])));
|
|
13
|
+
const getKey = (target) => {
|
|
14
|
+
var _a, _b;
|
|
15
|
+
return ((_a = target == null ? void 0 : target.compProps) == null ? void 0 : _a.key) ?? ((_b = target == null ? void 0 : target.props) == null ? void 0 : _b.key);
|
|
16
|
+
};
|
|
17
|
+
const checkVirtualType = (type) => type && ["fragment", "loop"].includes(type);
|
|
18
|
+
const checkCustemComponentFunction = (target) => typeof target === "function" && !checkFragmentFunction(target) || typeof target === "object" && "resolve" in target;
|
|
19
|
+
const checkFragmentFunction = (target) => typeof target === "function" && target === Fragment;
|
|
20
|
+
const checkEmptyElement = (wDom) => checkPlainWDomType(wDom) && !wDom.type;
|
|
21
|
+
const checkExisty = (value) => value !== null && value !== void 0;
|
|
22
|
+
const checkStyleData = (dataKey, dataValue) => dataKey === "style" && typeof dataValue === "object";
|
|
23
|
+
const checkRefData = (dataKey, dataValue) => dataKey === "ref" && typeof dataValue === "object";
|
|
24
|
+
const checkOptionElement = (element) => element.nodeType === 1 && element.tagName === "OPTION";
|
|
25
|
+
const checkTextareaElement = (element) => element.nodeType === 1 && element.tagName === "TEXTAREA";
|
|
26
|
+
const checkCheckableElement = (element) => element.nodeType === 1 && ["radio", "checkbox"].includes(element.type);
|
|
27
|
+
const getWDomType = (wDom) => {
|
|
28
|
+
let result = "et";
|
|
29
|
+
if (checkCustemComponentFunction(wDom)) {
|
|
30
|
+
result = "c";
|
|
31
|
+
} else if (checkPlainType(wDom, "fragment")) {
|
|
32
|
+
result = "f";
|
|
33
|
+
} else if (checkPlainType(wDom, "element")) {
|
|
34
|
+
result = "e";
|
|
35
|
+
} else if (checkPlainType(wDom, "loop")) {
|
|
36
|
+
result = "l";
|
|
37
|
+
} else if (checkPlainType(wDom, "text")) {
|
|
38
|
+
result = "t";
|
|
39
|
+
} else if (checkEmptyElement(wDom)) {
|
|
40
|
+
result = "et";
|
|
41
|
+
}
|
|
42
|
+
return result;
|
|
43
|
+
};
|
|
44
|
+
const checkSameWDomWithOriginal = {
|
|
45
|
+
c: checkSameCustomComponent,
|
|
46
|
+
l: checkNormalTypeElement,
|
|
47
|
+
t: checkNormalTypeElement,
|
|
48
|
+
e: checkSameTagElement,
|
|
49
|
+
f: checkSameFragment,
|
|
50
|
+
et: checkNormalTypeElement
|
|
51
|
+
};
|
|
52
|
+
const getParent = (vDom) => vDom.getParent && vDom.getParent();
|
|
53
|
+
const entries = Object.entries;
|
|
54
|
+
const keys = Object.keys;
|
|
55
|
+
const assign = Object.assign;
|
|
56
|
+
const xmlnsRef = { value: "" };
|
|
57
|
+
const compKeyRef = { value: {} };
|
|
58
|
+
const needDiffRef = { value: false };
|
|
59
|
+
const componentRef = /* @__PURE__ */ new WeakMap();
|
|
60
|
+
const setComponetRef = (compKey) => {
|
|
61
|
+
componentRef.set(compKey, {
|
|
22
62
|
vd: { value: null },
|
|
23
63
|
up: () => {
|
|
24
64
|
},
|
|
@@ -29,377 +69,774 @@ const k = (e) => typeof e == "object" && !("resolve" in e), x = (e, t) => k(e) &
|
|
|
29
69
|
mts: [],
|
|
30
70
|
umts: []
|
|
31
71
|
});
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
|
|
72
|
+
};
|
|
73
|
+
const getComponentKey = () => compKeyRef.value;
|
|
74
|
+
const getComponentSubInfo = (compKey, subKey) => componentRef.get(compKey)[subKey];
|
|
75
|
+
const initUpdateHookState = (compKey) => compKeyRef.value = compKey;
|
|
76
|
+
const initMountHookState = (compKey) => {
|
|
77
|
+
compKeyRef.value = compKey;
|
|
78
|
+
setComponetRef(compKey);
|
|
79
|
+
};
|
|
80
|
+
const unmount = (effectAction) => {
|
|
81
|
+
componentRef.get(getComponentKey()).umts.push(effectAction);
|
|
82
|
+
};
|
|
83
|
+
const runUnmountQueueFromWDom = (newWDom) => {
|
|
84
|
+
const { compKey } = newWDom;
|
|
85
|
+
if (compKey) {
|
|
86
|
+
removeItem(compKey);
|
|
87
|
+
}
|
|
88
|
+
recursiveRunUnmount(newWDom);
|
|
89
|
+
};
|
|
90
|
+
const recursiveRunUnmount = (wDom) => {
|
|
91
|
+
(wDom.children || []).forEach((item) => {
|
|
92
|
+
const childComKey = item.compKey;
|
|
93
|
+
if (childComKey) {
|
|
94
|
+
runUnmountQueueFromWDom(item);
|
|
95
|
+
} else {
|
|
96
|
+
recursiveRunUnmount(item);
|
|
97
|
+
}
|
|
42
98
|
});
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
}
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
99
|
+
};
|
|
100
|
+
const removeItem = (compKey) => {
|
|
101
|
+
const subInfo = componentRef.get(compKey);
|
|
102
|
+
if (subInfo) {
|
|
103
|
+
subInfo.umts.forEach((effect) => effect());
|
|
104
|
+
subInfo.umts = [];
|
|
105
|
+
componentRef.delete(compKey);
|
|
106
|
+
}
|
|
107
|
+
};
|
|
108
|
+
let mountedQueue = [];
|
|
109
|
+
const execMountedQueue = () => {
|
|
110
|
+
mountedQueue.forEach((item) => runMountedQueueFromWDom(item));
|
|
111
|
+
mountedQueue = [];
|
|
112
|
+
};
|
|
113
|
+
const addMountedQueue = (wDom) => {
|
|
114
|
+
if (wDom.compKey) {
|
|
115
|
+
mountedQueue.push(wDom);
|
|
116
|
+
}
|
|
117
|
+
};
|
|
118
|
+
const mountCallback = (effectAction) => componentRef.get(getComponentKey()).mts.push(effectAction);
|
|
119
|
+
const runMountedQueueFromWDom = (newWDom) => {
|
|
120
|
+
const { compKey } = newWDom;
|
|
121
|
+
if (compKey) {
|
|
122
|
+
const component = componentRef.get(compKey);
|
|
123
|
+
const queue = component == null ? void 0 : component.mts;
|
|
124
|
+
const sequence = component == null ? void 0 : component.upS;
|
|
125
|
+
compKeyRef.value = compKey;
|
|
126
|
+
if (sequence) {
|
|
127
|
+
sequence.value = 0;
|
|
128
|
+
}
|
|
129
|
+
if (queue) {
|
|
130
|
+
component.mts = [];
|
|
131
|
+
queue.forEach((effect) => {
|
|
132
|
+
const callback = effect();
|
|
133
|
+
if (callback) {
|
|
134
|
+
unmount(callback);
|
|
135
|
+
}
|
|
136
|
+
});
|
|
137
|
+
}
|
|
138
|
+
}
|
|
139
|
+
};
|
|
140
|
+
const useUpdated = (effectAction, dependencies = () => []) => {
|
|
141
|
+
const component = componentRef.get(getComponentKey());
|
|
142
|
+
const { upD, upS } = component;
|
|
143
|
+
const def = upD[upS.value];
|
|
144
|
+
if (def && checkNeedPushQueue(def, dependencies())) {
|
|
145
|
+
const callback = effectAction();
|
|
146
|
+
if (callback) {
|
|
147
|
+
component.upCB.push(callback);
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
upD[upS.value] = dependencies();
|
|
151
|
+
upS.value += 1;
|
|
152
|
+
};
|
|
153
|
+
const runUpdatedQueueFromWDom = (newWDom) => {
|
|
154
|
+
const { compKey } = newWDom;
|
|
155
|
+
if (compKey) {
|
|
156
|
+
const component = componentRef.get(compKey);
|
|
157
|
+
const queue = component == null ? void 0 : component.upCB;
|
|
158
|
+
const sequence = component == null ? void 0 : component.upS;
|
|
159
|
+
compKeyRef.value = compKey;
|
|
160
|
+
if (sequence) {
|
|
161
|
+
sequence.value = 0;
|
|
162
|
+
}
|
|
163
|
+
if (newWDom.ctor && queue) {
|
|
164
|
+
component.upCB = [];
|
|
165
|
+
queue.forEach((effect) => effect());
|
|
166
|
+
}
|
|
167
|
+
}
|
|
168
|
+
};
|
|
169
|
+
const checkNeedPushQueue = (originalDefs, newDefs) => !originalDefs.length ? true : originalDefs.some((def, index) => def !== newDefs[index]);
|
|
170
|
+
const getAttrKey = (keyName) => keyName === "className" ? "class" : keyName;
|
|
171
|
+
const getEventName = (eventKey) => eventKey.replace(/^on(.*)/, (_match, p1) => p1.toLowerCase());
|
|
172
|
+
const DF = () => new DocumentFragment();
|
|
173
|
+
const CE = (t) => document.createElement(t);
|
|
174
|
+
const render = (wDom, wrapElement, afterElement) => {
|
|
175
|
+
wrapElement ?? (wrapElement = document.body);
|
|
176
|
+
wDom.isRoot = true;
|
|
177
|
+
wDom.wrapElement = wrapElement;
|
|
178
|
+
const Dom = wDomToDom(wDom);
|
|
179
|
+
if (afterElement) {
|
|
180
|
+
wDom.afterElement = afterElement;
|
|
181
|
+
wrapElement.insertBefore(Dom, afterElement);
|
|
182
|
+
} else {
|
|
183
|
+
wrapElement.appendChild(Dom);
|
|
184
|
+
}
|
|
185
|
+
execMountedQueue();
|
|
186
|
+
return () => {
|
|
187
|
+
var _a;
|
|
188
|
+
const component = (_a = componentRef.get(wDom.compProps || {})) == null ? void 0 : _a.vd.value;
|
|
189
|
+
if (component) {
|
|
190
|
+
runUnmountQueueFromWDom(component);
|
|
191
|
+
recursiveRemoveEvent(component);
|
|
192
|
+
rootDelete(component);
|
|
193
|
+
}
|
|
81
194
|
};
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
195
|
+
};
|
|
196
|
+
const wDomUpdate = (newWDomTree) => {
|
|
197
|
+
const { needRerender } = newWDomTree;
|
|
198
|
+
if (needRerender && needRerender !== "N") {
|
|
199
|
+
({
|
|
200
|
+
A: typeAdd,
|
|
201
|
+
D: typeDelete,
|
|
202
|
+
R: typeReplace,
|
|
203
|
+
U: typeUpdate,
|
|
204
|
+
SR: typeSortedReplace,
|
|
205
|
+
SU: typeSortedUpdate
|
|
206
|
+
})[needRerender](newWDomTree);
|
|
207
|
+
delete newWDomTree.needRerender;
|
|
208
|
+
}
|
|
209
|
+
};
|
|
210
|
+
const recursiveRemoveEvent = (originalWDom) => {
|
|
211
|
+
if (originalWDom.props && originalWDom.el) {
|
|
212
|
+
removeEvent(originalWDom.props, originalWDom.el);
|
|
213
|
+
}
|
|
214
|
+
(originalWDom.children || []).forEach((childItem) => {
|
|
215
|
+
recursiveRemoveEvent(childItem);
|
|
95
216
|
});
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
217
|
+
};
|
|
218
|
+
const rootDelete = (newWDom) => {
|
|
219
|
+
deleteRealDom(newWDom, newWDom.wrapElement);
|
|
220
|
+
};
|
|
221
|
+
const typeDelete = (newWDom) => {
|
|
222
|
+
if (newWDom.oldProps && newWDom.el) {
|
|
223
|
+
removeEvent(newWDom.oldProps, newWDom.el);
|
|
224
|
+
}
|
|
225
|
+
deleteRealDom(
|
|
226
|
+
newWDom,
|
|
227
|
+
findRealParentElement(getParent(newWDom))
|
|
102
228
|
);
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
229
|
+
};
|
|
230
|
+
const deleteRealDom = (newWDom, parent) => {
|
|
231
|
+
var _a, _b;
|
|
232
|
+
if (parent && newWDom.el) {
|
|
233
|
+
if (((_a = newWDom.el) == null ? void 0 : _a.nodeType) === 1) {
|
|
234
|
+
parent.removeChild(newWDom.el);
|
|
235
|
+
} else if (((_b = newWDom.el) == null ? void 0 : _b.nodeType) === 11) {
|
|
236
|
+
findChildWithRemoveElement(newWDom, parent);
|
|
237
|
+
}
|
|
238
|
+
delete newWDom.el;
|
|
239
|
+
}
|
|
240
|
+
};
|
|
241
|
+
const findChildWithRemoveElement = (newWDom, parent) => {
|
|
242
|
+
((newWDom == null ? void 0 : newWDom.oldChildren) || (newWDom == null ? void 0 : newWDom.children) || []).forEach((item) => {
|
|
243
|
+
var _a, _b;
|
|
244
|
+
if (((_a = item.el) == null ? void 0 : _a.nodeType) === 1) {
|
|
245
|
+
parent.removeChild(item == null ? void 0 : item.el);
|
|
246
|
+
} else if (((_b = item.el) == null ? void 0 : _b.nodeType) === 11) {
|
|
247
|
+
findChildWithRemoveElement(item, parent);
|
|
248
|
+
}
|
|
110
249
|
});
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
250
|
+
};
|
|
251
|
+
const typeSortedReplace = (newWDom) => {
|
|
252
|
+
typeDelete(newWDom);
|
|
253
|
+
typeAdd(newWDom);
|
|
254
|
+
};
|
|
255
|
+
const typeSortedUpdate = (newWDom) => {
|
|
256
|
+
typeDelete(newWDom);
|
|
257
|
+
typeAdd(newWDom, newWDom.el);
|
|
258
|
+
};
|
|
259
|
+
const typeAdd = (newWDom, newElement) => {
|
|
260
|
+
if (!newElement) {
|
|
261
|
+
newElement = wDomToDom(newWDom);
|
|
262
|
+
}
|
|
263
|
+
const parentWDom = getParent(newWDom);
|
|
264
|
+
if (parentWDom.type) {
|
|
265
|
+
const parentEl = findRealParentElement(parentWDom);
|
|
266
|
+
const isLoop = parentWDom.type === "loop";
|
|
267
|
+
const nextEl = isLoop && parentWDom.needRerender ? startFindNextBrotherElement(parentWDom, getParent(parentWDom)) : startFindNextBrotherElement(newWDom, parentWDom);
|
|
268
|
+
if (newElement && parentEl) {
|
|
269
|
+
if (nextEl) {
|
|
270
|
+
parentEl.insertBefore(newElement, nextEl);
|
|
271
|
+
} else {
|
|
272
|
+
parentEl.appendChild(newElement);
|
|
273
|
+
}
|
|
274
|
+
execMountedQueue();
|
|
275
|
+
}
|
|
276
|
+
}
|
|
277
|
+
};
|
|
278
|
+
const startFindNextBrotherElement = (wDom, parentWDom) => {
|
|
279
|
+
const brothers = parentWDom.children || [];
|
|
280
|
+
const index = brothers.indexOf(wDom);
|
|
281
|
+
const nextIndex = index + 1;
|
|
282
|
+
const candidiateBrothers = brothers.slice(nextIndex);
|
|
283
|
+
const finedNextEl = findChildFragmentNextElement(candidiateBrothers);
|
|
284
|
+
const parentType = parentWDom.type || "";
|
|
285
|
+
if (finedNextEl) {
|
|
286
|
+
return finedNextEl;
|
|
287
|
+
}
|
|
288
|
+
if (!parentWDom.isRoot && checkVirtualType(parentType)) {
|
|
289
|
+
return startFindNextBrotherElement(parentWDom, getParent(parentWDom));
|
|
290
|
+
} else if (parentWDom.isRoot && checkVirtualType(parentType) && parentWDom.afterElement) {
|
|
291
|
+
return parentWDom.afterElement;
|
|
292
|
+
}
|
|
293
|
+
return void 0;
|
|
294
|
+
};
|
|
295
|
+
const findChildFragmentNextElement = (candidiateBrothers) => candidiateBrothers.reduce(
|
|
296
|
+
(targetEl, bItem) => {
|
|
297
|
+
const type = bItem.type;
|
|
298
|
+
const el = bItem.el;
|
|
299
|
+
const isFragment = type && checkVirtualType(type);
|
|
300
|
+
if (targetEl) {
|
|
301
|
+
return targetEl;
|
|
302
|
+
} else if (isFragment) {
|
|
303
|
+
return findChildFragmentNextElement(bItem.children || []);
|
|
304
|
+
} else if (el && el.nodeType !== 11) {
|
|
305
|
+
return el;
|
|
306
|
+
}
|
|
307
|
+
return targetEl;
|
|
134
308
|
},
|
|
135
309
|
void 0
|
|
136
|
-
)
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
310
|
+
);
|
|
311
|
+
const typeReplace = (newWDom) => {
|
|
312
|
+
const parentWDom = getParent(newWDom);
|
|
313
|
+
const orignalElement = newWDom.el;
|
|
314
|
+
if (parentWDom.type && orignalElement) {
|
|
315
|
+
if (orignalElement.nodeType === 11) {
|
|
316
|
+
typeSortedReplace(newWDom);
|
|
317
|
+
} else {
|
|
318
|
+
const parentElement = findRealParentElement(parentWDom);
|
|
319
|
+
const newElement = wDomToDom(newWDom);
|
|
320
|
+
if (parentElement) {
|
|
321
|
+
parentElement.replaceChild(newElement, orignalElement);
|
|
322
|
+
}
|
|
323
|
+
execMountedQueue();
|
|
324
|
+
}
|
|
325
|
+
}
|
|
326
|
+
};
|
|
327
|
+
const removeEvent = (oldProps, element) => {
|
|
328
|
+
entries(oldProps || {}).forEach(([dataKey, dataValue]) => {
|
|
329
|
+
if (dataKey.match(/^on/)) {
|
|
330
|
+
element.removeEventListener(
|
|
331
|
+
getEventName(dataKey),
|
|
332
|
+
dataValue
|
|
333
|
+
);
|
|
144
334
|
}
|
|
145
|
-
}, te = (e, t) => {
|
|
146
|
-
a(e || {}).forEach(([s, c]) => {
|
|
147
|
-
s.match(/^on/) && t.removeEventListener(
|
|
148
|
-
V(s),
|
|
149
|
-
c
|
|
150
|
-
);
|
|
151
335
|
});
|
|
152
|
-
}
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
336
|
+
};
|
|
337
|
+
const typeUpdate = (newWDom) => {
|
|
338
|
+
var _a;
|
|
339
|
+
const element = newWDom.el;
|
|
340
|
+
if (newWDom.type === "text") {
|
|
341
|
+
updateText(newWDom);
|
|
157
342
|
return;
|
|
158
343
|
}
|
|
159
|
-
if (
|
|
160
|
-
const { oldProps
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
344
|
+
if (element) {
|
|
345
|
+
const { oldProps, props } = newWDom;
|
|
346
|
+
updateProps$1(props, element, oldProps);
|
|
347
|
+
delete newWDom.oldProps;
|
|
348
|
+
if (newWDom.tag === "input") {
|
|
349
|
+
element.value = String(((_a = newWDom == null ? void 0 : newWDom.props) == null ? void 0 : _a.value) || "");
|
|
350
|
+
}
|
|
351
|
+
}
|
|
352
|
+
(newWDom.children || []).forEach((childItem) => wDomUpdate(childItem));
|
|
353
|
+
runUpdatedQueueFromWDom(newWDom);
|
|
354
|
+
};
|
|
355
|
+
const updateText = (newWDom) => {
|
|
356
|
+
const element = newWDom.el;
|
|
357
|
+
if (element) {
|
|
358
|
+
element.nodeValue = String(newWDom.text);
|
|
359
|
+
}
|
|
360
|
+
};
|
|
361
|
+
const updateProps$1 = (props, element, oldProps) => {
|
|
362
|
+
const originalProps = { ...oldProps };
|
|
363
|
+
entries(props || {}).forEach(([dataKey, dataValue]) => {
|
|
364
|
+
let chkRemoveProp = true;
|
|
365
|
+
if (dataKey === "key")
|
|
366
|
+
;
|
|
367
|
+
else if (dataKey === "innerHTML" && typeof dataValue === "string") {
|
|
368
|
+
element.innerHTML = dataValue;
|
|
369
|
+
} else if (checkStyleData(dataKey, dataValue)) {
|
|
370
|
+
updateStyle(
|
|
371
|
+
dataValue,
|
|
372
|
+
checkStyleData(dataKey, originalProps.style) ? originalProps.style : {},
|
|
373
|
+
element
|
|
374
|
+
);
|
|
375
|
+
} else if (checkRefData(dataKey, dataValue)) {
|
|
376
|
+
dataValue.value = element;
|
|
377
|
+
} else if (dataKey.match(/^on/)) {
|
|
378
|
+
updateEvent(
|
|
379
|
+
element,
|
|
380
|
+
dataKey,
|
|
381
|
+
dataValue,
|
|
382
|
+
originalProps[dataKey]
|
|
383
|
+
);
|
|
384
|
+
} else if (checkCheckableElement(element) && dataKey === "checked") {
|
|
385
|
+
element.checked = !!dataValue;
|
|
386
|
+
} else if (checkTextareaElement(element) && dataKey === "value") {
|
|
387
|
+
element.value = dataValue;
|
|
388
|
+
} else if (checkOptionElement(element) && dataKey === "selected") {
|
|
389
|
+
element.selected = !!dataValue;
|
|
390
|
+
} else if (dataKey) {
|
|
391
|
+
[chkRemoveProp, dataValue] = makeAttrDataValue(dataValue);
|
|
392
|
+
if (chkRemoveProp) {
|
|
393
|
+
if (xmlnsRef.value && dataKey !== "xmlns") {
|
|
394
|
+
element.setAttributeNS(
|
|
395
|
+
null,
|
|
396
|
+
getAttrKey(dataKey),
|
|
397
|
+
dataValue
|
|
398
|
+
);
|
|
399
|
+
} else {
|
|
400
|
+
element.setAttribute(
|
|
401
|
+
getAttrKey(dataKey),
|
|
402
|
+
dataValue
|
|
403
|
+
);
|
|
404
|
+
}
|
|
405
|
+
}
|
|
406
|
+
}
|
|
407
|
+
if (chkRemoveProp) {
|
|
408
|
+
delete originalProps[dataKey];
|
|
409
|
+
}
|
|
410
|
+
});
|
|
411
|
+
keys(originalProps).forEach(
|
|
412
|
+
(dataKey) => element.removeAttribute(dataKey)
|
|
190
413
|
);
|
|
191
|
-
}
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
414
|
+
};
|
|
415
|
+
const makeAttrDataValue = (dataValue) => {
|
|
416
|
+
let allowSetAttr = true;
|
|
417
|
+
if (typeof dataValue === "boolean") {
|
|
418
|
+
if (!dataValue) {
|
|
419
|
+
allowSetAttr = false;
|
|
420
|
+
}
|
|
421
|
+
dataValue = "";
|
|
422
|
+
}
|
|
423
|
+
return [allowSetAttr, String(dataValue)];
|
|
424
|
+
};
|
|
425
|
+
const wDomToDom = (wDom) => {
|
|
426
|
+
let element;
|
|
427
|
+
const { type, tag, text, props, children = [] } = wDom;
|
|
428
|
+
const isVirtualType = checkVirtualType(type);
|
|
429
|
+
if (tag === "svg") {
|
|
430
|
+
xmlnsRef.value = String(props == null ? void 0 : props.xmlns);
|
|
431
|
+
}
|
|
432
|
+
if (isVirtualType) {
|
|
433
|
+
element = DF();
|
|
434
|
+
} else if (type === "element" && tag) {
|
|
435
|
+
element = xmlnsRef.value ? document.createElementNS(xmlnsRef.value, tag) : CE(tag);
|
|
436
|
+
} else if (type === "text" && checkExisty(text)) {
|
|
437
|
+
element = document.createTextNode(String(text));
|
|
438
|
+
} else {
|
|
439
|
+
element = CE("e");
|
|
440
|
+
}
|
|
441
|
+
wDomChildrenToDom(children, element);
|
|
442
|
+
updateProps$1(props, element);
|
|
443
|
+
wDom.el = element;
|
|
444
|
+
addMountedQueue(wDom);
|
|
445
|
+
if (tag === "svg") {
|
|
446
|
+
xmlnsRef.value = "";
|
|
447
|
+
}
|
|
448
|
+
return element;
|
|
449
|
+
};
|
|
450
|
+
const wDomChildrenToDom = (children, parentElement) => {
|
|
451
|
+
const elementChildren = children.reduce(
|
|
452
|
+
(acc, childItem) => {
|
|
453
|
+
if (childItem.type) {
|
|
454
|
+
acc.appendChild(wDomToDom(childItem));
|
|
455
|
+
}
|
|
456
|
+
return acc;
|
|
457
|
+
},
|
|
458
|
+
DF()
|
|
202
459
|
);
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
const
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
}
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
}
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
}
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
460
|
+
if (parentElement && elementChildren.hasChildNodes()) {
|
|
461
|
+
parentElement.appendChild(elementChildren);
|
|
462
|
+
}
|
|
463
|
+
};
|
|
464
|
+
const updateEvent = (element, eventKey, newEventHandler, oldEventHandler) => {
|
|
465
|
+
const eventName = getEventName(eventKey);
|
|
466
|
+
if (oldEventHandler !== newEventHandler) {
|
|
467
|
+
if (oldEventHandler) {
|
|
468
|
+
element.removeEventListener(eventName, oldEventHandler);
|
|
469
|
+
}
|
|
470
|
+
if (newEventHandler) {
|
|
471
|
+
element.addEventListener(eventName, newEventHandler);
|
|
472
|
+
}
|
|
473
|
+
}
|
|
474
|
+
};
|
|
475
|
+
const updateStyle = (style, oldStyle, element) => {
|
|
476
|
+
const originalStyle = { ...oldStyle };
|
|
477
|
+
const elementStyle = element == null ? void 0 : element.style;
|
|
478
|
+
if (elementStyle) {
|
|
479
|
+
entries(style).forEach(([styleKey, dataValue]) => {
|
|
480
|
+
elementStyle[styleKey] = dataValue;
|
|
481
|
+
delete originalStyle[styleKey];
|
|
482
|
+
});
|
|
483
|
+
entries(originalStyle).forEach(
|
|
484
|
+
([styleKey]) => elementStyle[styleKey] = ""
|
|
485
|
+
);
|
|
486
|
+
}
|
|
487
|
+
};
|
|
488
|
+
const findRealParentElement = (vDom) => {
|
|
489
|
+
const isVirtualType = checkVirtualType(vDom.type);
|
|
490
|
+
if (vDom.isRoot && isVirtualType) {
|
|
491
|
+
return vDom.wrapElement;
|
|
492
|
+
}
|
|
493
|
+
if (!isVirtualType) {
|
|
494
|
+
return vDom.el;
|
|
495
|
+
}
|
|
496
|
+
return findRealParentElement(getParent(vDom));
|
|
497
|
+
};
|
|
498
|
+
const makeNewWDomTree = (newWDom, originalWDom) => remakeNewWDom(
|
|
499
|
+
newWDom,
|
|
500
|
+
checkSameWDomWithOriginal[getWDomType(newWDom)](newWDom, originalWDom),
|
|
501
|
+
originalWDom
|
|
502
|
+
);
|
|
503
|
+
const remakeNewWDom = (newWDom, isSameType, originalWDom) => {
|
|
504
|
+
const remakeWDom = generalize(newWDom, isSameType, originalWDom);
|
|
505
|
+
const param = [
|
|
506
|
+
remakeWDom,
|
|
507
|
+
isSameType,
|
|
508
|
+
originalWDom
|
|
509
|
+
];
|
|
510
|
+
const needRerender = addReRenderTypeProperty(...param);
|
|
511
|
+
remakeWDom.children = remakeChildrenForDiff(...param);
|
|
512
|
+
remakeWDom.needRerender = needRerender;
|
|
513
|
+
inheritPropForRender(remakeWDom, originalWDom, needRerender);
|
|
514
|
+
return remakeWDom;
|
|
515
|
+
};
|
|
516
|
+
const inheritPropForRender = (remakeWDom, originalWDom, needRerender) => {
|
|
517
|
+
if (needRerender !== "A" && originalWDom) {
|
|
518
|
+
remakeWDom.el = originalWDom.el;
|
|
519
|
+
}
|
|
520
|
+
if (needRerender && ["D", "R", "SR"].includes(needRerender)) {
|
|
521
|
+
if (originalWDom == null ? void 0 : originalWDom.compKey) {
|
|
522
|
+
runUnmountQueueFromWDom(originalWDom);
|
|
523
|
+
recursiveRemoveEvent(originalWDom);
|
|
524
|
+
}
|
|
525
|
+
remakeWDom.oldChildren = originalWDom == null ? void 0 : originalWDom.children;
|
|
526
|
+
}
|
|
527
|
+
remakeWDom.oldProps = originalWDom == null ? void 0 : originalWDom.props;
|
|
528
|
+
};
|
|
529
|
+
const addReRenderTypeProperty = (newWDom, isSameType, originalWDom) => {
|
|
530
|
+
var _a;
|
|
531
|
+
const existOriginalWDom = originalWDom && originalWDom.type;
|
|
532
|
+
const isEmptyElement = checkEmptyElement(newWDom);
|
|
533
|
+
const isRoot = newWDom.isRoot;
|
|
534
|
+
const origParentType = !isRoot && originalWDom && ((_a = getParent(originalWDom)) == null ? void 0 : _a.type);
|
|
535
|
+
const key = getKey(newWDom);
|
|
536
|
+
const isKeyCheckedWDom = origParentType === "loop" && checkExisty(key);
|
|
537
|
+
const isSameText = newWDom.type === "text" && isSameType && newWDom.text === (originalWDom == null ? void 0 : originalWDom.text);
|
|
538
|
+
let result;
|
|
539
|
+
if (isEmptyElement) {
|
|
540
|
+
result = "D";
|
|
541
|
+
} else if (isSameText) {
|
|
542
|
+
result = "N";
|
|
543
|
+
} else if (!existOriginalWDom) {
|
|
544
|
+
result = "A";
|
|
545
|
+
} else if (isSameType) {
|
|
546
|
+
result = isKeyCheckedWDom ? "SU" : "U";
|
|
547
|
+
} else {
|
|
548
|
+
result = isKeyCheckedWDom ? "SR" : "R";
|
|
549
|
+
}
|
|
550
|
+
return result;
|
|
551
|
+
};
|
|
552
|
+
const updateProps = (props, infoProps) => {
|
|
553
|
+
if (props && infoProps !== props) {
|
|
554
|
+
keys(props).forEach((key) => delete props[key]);
|
|
555
|
+
entries(infoProps || {}).forEach(([key, value]) => props[key] = value);
|
|
556
|
+
}
|
|
557
|
+
};
|
|
558
|
+
const updateChildren = (children, infoChidren) => {
|
|
559
|
+
if (children && infoChidren !== children) {
|
|
560
|
+
children.splice(0, children.length);
|
|
561
|
+
if (infoChidren) {
|
|
562
|
+
infoChidren.forEach((childrenItem) => children.push(childrenItem));
|
|
563
|
+
}
|
|
564
|
+
}
|
|
565
|
+
};
|
|
566
|
+
const runUpdate = (vDom, infoVdom) => {
|
|
567
|
+
const { compProps: props, compChild: children } = vDom;
|
|
568
|
+
const { props: infoProps, children: infoChidren } = infoVdom;
|
|
569
|
+
if (props) {
|
|
570
|
+
updateProps(props, infoProps);
|
|
571
|
+
}
|
|
572
|
+
if (children) {
|
|
573
|
+
updateChildren(children, infoChidren);
|
|
574
|
+
}
|
|
575
|
+
const newVDom = vDom.reRender && vDom.reRender();
|
|
576
|
+
return newVDom;
|
|
577
|
+
};
|
|
578
|
+
const generalize = (newWDom, isSameType, originalWDom) => {
|
|
579
|
+
if (checkCustemComponentFunction(newWDom)) {
|
|
580
|
+
return isSameType && originalWDom ? runUpdate(originalWDom, newWDom) : newWDom.resolve();
|
|
581
|
+
}
|
|
582
|
+
return newWDom;
|
|
583
|
+
};
|
|
584
|
+
const remakeChildrenForDiff = (newWDom, isSameType, originalWDom) => isSameType && originalWDom ? remakeChildrenForUpdate(newWDom, originalWDom) : remakeChildrenForAdd(newWDom);
|
|
585
|
+
const remakeChildrenForAdd = (newWDom) => (newWDom.children || []).map(
|
|
586
|
+
(item) => assign(makeNewWDomTree(item), { getParent: () => newWDom })
|
|
587
|
+
);
|
|
588
|
+
const remakeChildrenForUpdate = (newWDom, originalWDom) => newWDom.type === "loop" && checkExisty(getKey((newWDom.children || [])[0])) ? remakeChildrenForLoopUpdate(newWDom, originalWDom) : (newWDom.children || []).map(
|
|
589
|
+
(item, index) => assign(makeNewWDomTree(item, (originalWDom.children || [])[index]), {
|
|
590
|
+
getParent: () => newWDom
|
|
246
591
|
})
|
|
247
|
-
)
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
592
|
+
);
|
|
593
|
+
const remakeChildrenForLoopUpdate = (newWDom, originalWDom) => {
|
|
594
|
+
const [remakedChildren, unUsedChildren] = diffLoopChildren(
|
|
595
|
+
newWDom,
|
|
596
|
+
originalWDom
|
|
251
597
|
);
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
}
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
598
|
+
unUsedChildren.map((unusedItem) => {
|
|
599
|
+
runUnmountQueueFromWDom(unusedItem);
|
|
600
|
+
recursiveRemoveEvent(unusedItem);
|
|
601
|
+
typeDelete(unusedItem);
|
|
602
|
+
});
|
|
603
|
+
return remakedChildren;
|
|
604
|
+
};
|
|
605
|
+
const diffLoopChildren = (newWDom, originalWDom) => {
|
|
606
|
+
const newChildren = [...newWDom.children || []];
|
|
607
|
+
const originalChildren = [...originalWDom.children || []];
|
|
608
|
+
const remakedChildren = newChildren.map((item) => {
|
|
609
|
+
const originalItem = findSameKeyOriginalItem(item, originalChildren);
|
|
610
|
+
const childItem = makeNewWDomTree(item, originalItem);
|
|
611
|
+
if (originalItem) {
|
|
612
|
+
originalChildren.splice(originalChildren.indexOf(originalItem), 1);
|
|
613
|
+
}
|
|
614
|
+
childItem.getParent = () => newWDom;
|
|
615
|
+
return childItem;
|
|
616
|
+
});
|
|
617
|
+
return [remakedChildren, originalChildren];
|
|
618
|
+
};
|
|
619
|
+
const findSameKeyOriginalItem = (item, originalChildren) => originalChildren.find(
|
|
620
|
+
(orignalChildItem) => getKey(orignalChildItem) === getKey(item)
|
|
264
621
|
);
|
|
265
|
-
let
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
622
|
+
let redrawQueue = [];
|
|
623
|
+
let redrawQueueTimeout = false;
|
|
624
|
+
const setRedrawAction = (compKey, exec) => {
|
|
625
|
+
componentRef.get(compKey).up = () => {
|
|
626
|
+
redrawQueue.push({
|
|
627
|
+
compKey,
|
|
628
|
+
exec
|
|
629
|
+
});
|
|
630
|
+
if (!redrawQueueTimeout) {
|
|
631
|
+
redrawQueueTimeout = true;
|
|
632
|
+
queueMicrotask(execRedrawQueue);
|
|
633
|
+
}
|
|
272
634
|
};
|
|
273
|
-
}
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
635
|
+
};
|
|
636
|
+
const componentUpdate = (compKey) => () => {
|
|
637
|
+
var _a;
|
|
638
|
+
const up = (_a = componentRef.get(compKey)) == null ? void 0 : _a.up;
|
|
639
|
+
let result = false;
|
|
640
|
+
if (up) {
|
|
641
|
+
up();
|
|
642
|
+
result = true;
|
|
643
|
+
}
|
|
644
|
+
return result;
|
|
645
|
+
};
|
|
646
|
+
const recursiveGetChildKeys = (wDom, result) => {
|
|
647
|
+
(wDom.children || []).forEach((item) => {
|
|
648
|
+
const childComKey = item.compKey;
|
|
649
|
+
if (childComKey) {
|
|
650
|
+
result.push(childComKey);
|
|
651
|
+
}
|
|
652
|
+
recursiveGetChildKeys(item, result);
|
|
282
653
|
});
|
|
283
|
-
}
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
654
|
+
};
|
|
655
|
+
const execRedrawQueue = () => {
|
|
656
|
+
let childItemList = [];
|
|
657
|
+
redrawQueue.forEach((item) => {
|
|
658
|
+
var _a, _b;
|
|
659
|
+
const childVd = (_b = (_a = componentRef.get(item.compKey)) == null ? void 0 : _a.vd) == null ? void 0 : _b.value;
|
|
660
|
+
if (childVd) {
|
|
661
|
+
recursiveGetChildKeys(childVd, childItemList);
|
|
662
|
+
}
|
|
289
663
|
});
|
|
290
|
-
const
|
|
291
|
-
|
|
292
|
-
|
|
664
|
+
const addedKey = [];
|
|
665
|
+
const result = redrawQueue.reduce((acc, item) => {
|
|
666
|
+
const { compKey } = item;
|
|
667
|
+
if (childItemList.includes(compKey) || addedKey.includes(compKey)) {
|
|
668
|
+
return acc;
|
|
669
|
+
}
|
|
670
|
+
addedKey.push(compKey);
|
|
671
|
+
acc.push(item);
|
|
672
|
+
return acc;
|
|
293
673
|
}, []);
|
|
294
|
-
|
|
295
|
-
const
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
}
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
674
|
+
while (result.length) {
|
|
675
|
+
const action = result.shift();
|
|
676
|
+
if (action) {
|
|
677
|
+
action.exec();
|
|
678
|
+
}
|
|
679
|
+
}
|
|
680
|
+
redrawQueue = [];
|
|
681
|
+
redrawQueueTimeout = false;
|
|
682
|
+
};
|
|
683
|
+
const updateCallback = (effectAction, dependencies = () => []) => {
|
|
684
|
+
const updateReqs = componentRef.get(getComponentKey()).upR;
|
|
685
|
+
updateReqs.push(() => useUpdated(effectAction, dependencies));
|
|
686
|
+
useUpdated(effectAction, dependencies);
|
|
687
|
+
};
|
|
688
|
+
const runUpdateCallback = () => {
|
|
689
|
+
var _a;
|
|
690
|
+
const updateReqs = (_a = componentRef.get(getComponentKey())) == null ? void 0 : _a.upR;
|
|
691
|
+
if (updateReqs == null ? void 0 : updateReqs.length) {
|
|
692
|
+
updateReqs.forEach((callback) => callback());
|
|
693
|
+
}
|
|
694
|
+
};
|
|
695
|
+
const Fragment = (_props, ...children) => ({
|
|
306
696
|
type: "fragment",
|
|
307
|
-
children
|
|
308
|
-
})
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
const
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
697
|
+
children
|
|
698
|
+
});
|
|
699
|
+
const h = (tag, props, ...children) => {
|
|
700
|
+
const nodeParentPointer = { value: void 0 };
|
|
701
|
+
const newProps = props || {};
|
|
702
|
+
const newChildren = remakeChildren(nodeParentPointer, children);
|
|
703
|
+
const node = makeNode(tag, newProps, newChildren);
|
|
704
|
+
if (!checkCustemComponentFunction(node)) {
|
|
705
|
+
nodeParentPointer.value = node;
|
|
706
|
+
}
|
|
707
|
+
return node;
|
|
708
|
+
};
|
|
709
|
+
const mount = (component) => (_props, _children) => component;
|
|
710
|
+
const reRenderCustomComponent = (tag, props, children, originalWDom) => {
|
|
711
|
+
var _a;
|
|
712
|
+
needDiffRef.value = true;
|
|
713
|
+
const newWDom = makeWDomResolver(tag, props, children);
|
|
714
|
+
const newWDomTree = makeNewWDomTree(newWDom, originalWDom);
|
|
715
|
+
const { isRoot, getParent: getParent2, wrapElement, afterElement } = originalWDom;
|
|
716
|
+
newWDomTree.getParent = getParent2;
|
|
717
|
+
if (!isRoot && getParent2) {
|
|
718
|
+
const brothers = ((_a = getParent2()) == null ? void 0 : _a.children) || [];
|
|
719
|
+
const index = brothers.indexOf(originalWDom);
|
|
720
|
+
brothers.splice(index, 1, newWDomTree);
|
|
721
|
+
} else {
|
|
722
|
+
newWDomTree.isRoot = true;
|
|
723
|
+
newWDomTree.wrapElement = wrapElement;
|
|
724
|
+
newWDomTree.afterElement = afterElement;
|
|
725
|
+
}
|
|
726
|
+
needDiffRef.value = false;
|
|
727
|
+
wDomUpdate(newWDomTree);
|
|
728
|
+
};
|
|
729
|
+
const makeWDomResolver = (tag, props, children) => {
|
|
730
|
+
const tagName = tag.name;
|
|
731
|
+
const ctor = tag;
|
|
732
|
+
const resolve = (compKey = props) => {
|
|
733
|
+
initMountHookState(compKey);
|
|
734
|
+
const component = tag(props, children);
|
|
735
|
+
const componentMaker = component(componentUpdate(compKey), props, children);
|
|
736
|
+
const customNode = makeCustomNode(
|
|
737
|
+
componentMaker,
|
|
738
|
+
compKey,
|
|
739
|
+
tag,
|
|
740
|
+
props,
|
|
741
|
+
children
|
|
742
|
+
);
|
|
743
|
+
const originalWDom = customNode;
|
|
744
|
+
setRedrawAction(
|
|
745
|
+
compKey,
|
|
746
|
+
() => reRenderCustomComponent(tag, props, children, originalWDom)
|
|
747
|
+
);
|
|
748
|
+
getComponentSubInfo(compKey, "vd").value = customNode;
|
|
749
|
+
return customNode;
|
|
750
|
+
};
|
|
751
|
+
return { tagName, ctor, props, children, resolve };
|
|
752
|
+
};
|
|
753
|
+
const makeCustomNode = (componentMaker, compKey, tag, props, children) => {
|
|
754
|
+
const customNode = componentMaker(props);
|
|
755
|
+
if (customNode.reRender) {
|
|
337
756
|
throw new Error(
|
|
338
757
|
'Avoid the case where the first element of a component is a component. Instead of "mount(()=>()=><Component />)" replace it with something like "mount(()=>()=><Fragment><Component /></Fragment>)".'
|
|
339
758
|
);
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
759
|
+
}
|
|
760
|
+
addComponentProps(
|
|
761
|
+
customNode,
|
|
762
|
+
compKey,
|
|
763
|
+
tag,
|
|
764
|
+
props,
|
|
765
|
+
children,
|
|
766
|
+
makeReRender(componentMaker, compKey, tag, props, children)
|
|
767
|
+
);
|
|
768
|
+
return customNode;
|
|
769
|
+
};
|
|
770
|
+
const makeReRender = (componentMaker, compKey, tag, props, children) => {
|
|
771
|
+
const reRender = () => wDomMaker(componentMaker, compKey, tag, props, children, reRender);
|
|
772
|
+
return reRender;
|
|
773
|
+
};
|
|
774
|
+
const wDomMaker = (componentMaker, compKey, tag, props, children, reRender) => {
|
|
775
|
+
initUpdateHookState(compKey);
|
|
776
|
+
runUpdateCallback();
|
|
777
|
+
const originalWDom = componentMaker(props);
|
|
778
|
+
setRedrawAction(
|
|
779
|
+
compKey,
|
|
780
|
+
() => reRenderCustomComponent(tag, props, children, originalWDom)
|
|
781
|
+
);
|
|
782
|
+
addComponentProps(originalWDom, compKey, tag, props, children, reRender);
|
|
783
|
+
getComponentSubInfo(compKey, "vd").value = originalWDom;
|
|
784
|
+
return originalWDom;
|
|
785
|
+
};
|
|
786
|
+
const addComponentProps = (wDom, compKey, tag, props, children, reRender) => {
|
|
787
|
+
assign(wDom, {
|
|
788
|
+
compProps: props,
|
|
789
|
+
compChild: children,
|
|
790
|
+
ctor: tag,
|
|
791
|
+
tagName: tag.name,
|
|
792
|
+
compKey,
|
|
793
|
+
reRender
|
|
366
794
|
});
|
|
367
|
-
}
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
795
|
+
};
|
|
796
|
+
const makeNode = (tag, props, children) => {
|
|
797
|
+
if (checkFragmentFunction(tag)) {
|
|
798
|
+
return Fragment(props, ...children);
|
|
799
|
+
} else if (checkCustemComponentFunction(tag)) {
|
|
800
|
+
const componetMakeResolver = makeWDomResolver(tag, props, children);
|
|
801
|
+
return needDiffRef.value ? componetMakeResolver : componetMakeResolver.resolve();
|
|
373
802
|
}
|
|
374
803
|
return {
|
|
375
804
|
type: "element",
|
|
376
|
-
tag
|
|
377
|
-
props
|
|
378
|
-
children
|
|
805
|
+
tag,
|
|
806
|
+
props,
|
|
807
|
+
children
|
|
379
808
|
};
|
|
380
|
-
}
|
|
381
|
-
|
|
382
|
-
),
|
|
383
|
-
|
|
809
|
+
};
|
|
810
|
+
const remakeChildren = (nodeParentPointer, children) => children.map(
|
|
811
|
+
(item) => assign(makeChildrenItem(item), { getParent: () => nodeParentPointer.value })
|
|
812
|
+
);
|
|
813
|
+
const makeChildrenItem = (item) => {
|
|
814
|
+
if (item === null || item === void 0 || item === false) {
|
|
384
815
|
return { type: null };
|
|
385
|
-
if (Array.isArray(
|
|
386
|
-
const
|
|
816
|
+
} else if (Array.isArray(item)) {
|
|
817
|
+
const nodeParentPointer = { value: void 0 };
|
|
818
|
+
const children = remakeChildren(nodeParentPointer, item);
|
|
819
|
+
const node = {
|
|
387
820
|
type: "loop",
|
|
388
|
-
children
|
|
821
|
+
children
|
|
389
822
|
};
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
}
|
|
823
|
+
nodeParentPointer.value = node;
|
|
824
|
+
return node;
|
|
825
|
+
} else if (typeof item === "string" || typeof item === "number") {
|
|
826
|
+
return { type: "text", text: item };
|
|
827
|
+
}
|
|
828
|
+
return item;
|
|
829
|
+
};
|
|
830
|
+
const ref = (initValue) => ({ value: initValue });
|
|
831
|
+
const nextTick = () => Promise.resolve();
|
|
395
832
|
export {
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
833
|
+
Fragment,
|
|
834
|
+
h,
|
|
835
|
+
mount,
|
|
836
|
+
mountCallback,
|
|
837
|
+
nextTick,
|
|
838
|
+
ref,
|
|
839
|
+
render,
|
|
840
|
+
updateCallback
|
|
404
841
|
};
|
|
405
842
|
//# sourceMappingURL=lithent.mjs.map
|