creo 0.2.0 → 0.2.1
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/LICENSE +21 -0
- package/README.md +114 -40
- package/dist/index.d.ts +1 -1
- package/dist/index.js +340 -317
- package/dist/index.js.map +8 -8
- package/dist/internal/engine.d.ts +4 -4
- package/dist/internal/internal_view.d.ts +3 -3
- package/dist/public/primitives/primitives.d.ts +2 -1
- package/dist/public/view.d.ts +10 -3
- package/package.json +3 -3
package/dist/index.js
CHANGED
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
var F_PENDING = 1;
|
|
3
3
|
var F_DIRTY = 1 << 1;
|
|
4
4
|
var F_MOVED = 1 << 2;
|
|
5
|
-
var
|
|
6
|
-
var
|
|
7
|
-
var
|
|
5
|
+
var F_PRIMITIVE = 1 << 3;
|
|
6
|
+
var F_TEXT_CONTENT = 1 << 4;
|
|
7
|
+
var F_DISPOSED = 1 << 5;
|
|
8
8
|
function hasScStructuralChange(prev, next) {
|
|
9
9
|
const prevLen = prev?.length ?? 0;
|
|
10
10
|
const nextLen = next?.length ?? 0;
|
|
@@ -26,6 +26,153 @@ function hasScStructuralChange(prev, next) {
|
|
|
26
26
|
// src/public/primitive.ts
|
|
27
27
|
var $primitive = Symbol("primitive");
|
|
28
28
|
|
|
29
|
+
// src/internal/orchestrator.ts
|
|
30
|
+
class Orchestrator {
|
|
31
|
+
#currentEngine;
|
|
32
|
+
setCurrentEngine(engine) {
|
|
33
|
+
this.#currentEngine = engine;
|
|
34
|
+
}
|
|
35
|
+
currentEngine() {
|
|
36
|
+
return this.#currentEngine;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
var orchestrator = new Orchestrator;
|
|
40
|
+
|
|
41
|
+
// src/public/view.ts
|
|
42
|
+
function view(body) {
|
|
43
|
+
return (props, slot) => {
|
|
44
|
+
orchestrator.currentEngine().view(body, props, slot, maybeGetUserKey(props));
|
|
45
|
+
};
|
|
46
|
+
}
|
|
47
|
+
function maybeGetUserKey(params) {
|
|
48
|
+
if (params != null && typeof params === "object" && "key" in params && params.key != null && (typeof params.key === "string" || typeof params.key === "number")) {
|
|
49
|
+
return params.key;
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
// src/public/primitives/primitives.ts
|
|
54
|
+
function html(tag) {
|
|
55
|
+
const fn = ({
|
|
56
|
+
slot
|
|
57
|
+
}) => ({
|
|
58
|
+
render() {
|
|
59
|
+
slot();
|
|
60
|
+
}
|
|
61
|
+
});
|
|
62
|
+
fn[$primitive] = tag;
|
|
63
|
+
return view(fn);
|
|
64
|
+
}
|
|
65
|
+
var textViewFn = Object.assign(() => ({ render() {} }), { [$primitive]: "text" });
|
|
66
|
+
function text(content) {
|
|
67
|
+
orchestrator.currentEngine().view(textViewFn, content, null, null);
|
|
68
|
+
}
|
|
69
|
+
var div = html("div");
|
|
70
|
+
var span = html("span");
|
|
71
|
+
var section = html("section");
|
|
72
|
+
var article = html("article");
|
|
73
|
+
var aside = html("aside");
|
|
74
|
+
var nav = html("nav");
|
|
75
|
+
var header = html("header");
|
|
76
|
+
var footer = html("footer");
|
|
77
|
+
var main = html("main");
|
|
78
|
+
var p = html("p");
|
|
79
|
+
var h1 = html("h1");
|
|
80
|
+
var h2 = html("h2");
|
|
81
|
+
var h3 = html("h3");
|
|
82
|
+
var h4 = html("h4");
|
|
83
|
+
var h5 = html("h5");
|
|
84
|
+
var h6 = html("h6");
|
|
85
|
+
var pre = html("pre");
|
|
86
|
+
var code = html("code");
|
|
87
|
+
var em = html("em");
|
|
88
|
+
var strong = html("strong");
|
|
89
|
+
var small = html("small");
|
|
90
|
+
var br = html("br");
|
|
91
|
+
var hr = html("hr");
|
|
92
|
+
var a = html("a");
|
|
93
|
+
var blockquote = html("blockquote");
|
|
94
|
+
var label = html("label");
|
|
95
|
+
var ul = html("ul");
|
|
96
|
+
var ol = html("ol");
|
|
97
|
+
var li = html("li");
|
|
98
|
+
var table = html("table");
|
|
99
|
+
var thead = html("thead");
|
|
100
|
+
var tbody = html("tbody");
|
|
101
|
+
var tfoot = html("tfoot");
|
|
102
|
+
var tr = html("tr");
|
|
103
|
+
var th = html("th");
|
|
104
|
+
var td = html("td");
|
|
105
|
+
var form = html("form");
|
|
106
|
+
var button = html("button");
|
|
107
|
+
var input = html("input");
|
|
108
|
+
var textarea = html("textarea");
|
|
109
|
+
var select = html("select");
|
|
110
|
+
var option = html("option");
|
|
111
|
+
var fieldset = html("fieldset");
|
|
112
|
+
var legend = html("legend");
|
|
113
|
+
var img = html("img");
|
|
114
|
+
var video = html("video");
|
|
115
|
+
var audio = html("audio");
|
|
116
|
+
var canvas = html("canvas");
|
|
117
|
+
var source = html("source");
|
|
118
|
+
var details = html("details");
|
|
119
|
+
var summary = html("summary");
|
|
120
|
+
var dialog = html("dialog");
|
|
121
|
+
var menu = html("menu");
|
|
122
|
+
var iframe = html("iframe");
|
|
123
|
+
var embed = html("embed");
|
|
124
|
+
var object = html("object");
|
|
125
|
+
var picture = html("picture");
|
|
126
|
+
var portal = html("portal");
|
|
127
|
+
var svg = html("svg");
|
|
128
|
+
var script = html("script");
|
|
129
|
+
var noscript = html("noscript");
|
|
130
|
+
var template = html("template");
|
|
131
|
+
var slot = html("slot");
|
|
132
|
+
var address = html("address");
|
|
133
|
+
var hgroup = html("hgroup");
|
|
134
|
+
var search = html("search");
|
|
135
|
+
var abbr = html("abbr");
|
|
136
|
+
var b = html("b");
|
|
137
|
+
var bdi = html("bdi");
|
|
138
|
+
var bdo = html("bdo");
|
|
139
|
+
var cite = html("cite");
|
|
140
|
+
var data = html("data");
|
|
141
|
+
var dfn = html("dfn");
|
|
142
|
+
var i = html("i");
|
|
143
|
+
var kbd = html("kbd");
|
|
144
|
+
var mark = html("mark");
|
|
145
|
+
var q = html("q");
|
|
146
|
+
var rp = html("rp");
|
|
147
|
+
var rt = html("rt");
|
|
148
|
+
var ruby = html("ruby");
|
|
149
|
+
var s = html("s");
|
|
150
|
+
var samp = html("samp");
|
|
151
|
+
var sub = html("sub");
|
|
152
|
+
var sup = html("sup");
|
|
153
|
+
var time = html("time");
|
|
154
|
+
var u = html("u");
|
|
155
|
+
var varEl = html("var");
|
|
156
|
+
var wbr = html("wbr");
|
|
157
|
+
var del = html("del");
|
|
158
|
+
var ins = html("ins");
|
|
159
|
+
var caption = html("caption");
|
|
160
|
+
var colgroup = html("colgroup");
|
|
161
|
+
var col = html("col");
|
|
162
|
+
var datalist = html("datalist");
|
|
163
|
+
var optgroup = html("optgroup");
|
|
164
|
+
var output = html("output");
|
|
165
|
+
var progress = html("progress");
|
|
166
|
+
var meter = html("meter");
|
|
167
|
+
var figure = html("figure");
|
|
168
|
+
var figcaption = html("figcaption");
|
|
169
|
+
var dd = html("dd");
|
|
170
|
+
var dl = html("dl");
|
|
171
|
+
var dt = html("dt");
|
|
172
|
+
var track = html("track");
|
|
173
|
+
var map = html("map");
|
|
174
|
+
var area = html("area");
|
|
175
|
+
|
|
29
176
|
// src/public/state.ts
|
|
30
177
|
class State {
|
|
31
178
|
#current;
|
|
@@ -91,8 +238,8 @@ class Store {
|
|
|
91
238
|
};
|
|
92
239
|
}
|
|
93
240
|
#notify() {
|
|
94
|
-
for (const
|
|
95
|
-
|
|
241
|
+
for (const sub2 of this.#subscribers) {
|
|
242
|
+
sub2();
|
|
96
243
|
}
|
|
97
244
|
}
|
|
98
245
|
}
|
|
@@ -106,20 +253,20 @@ var store = {
|
|
|
106
253
|
};
|
|
107
254
|
|
|
108
255
|
// src/functional/shallow_equal.ts
|
|
109
|
-
function shallowEqual(
|
|
110
|
-
if (
|
|
256
|
+
function shallowEqual(a2, b2) {
|
|
257
|
+
if (a2 === b2)
|
|
111
258
|
return true;
|
|
112
|
-
if (typeof
|
|
259
|
+
if (typeof a2 !== "object" || a2 === null || typeof b2 !== "object" || b2 === null) {
|
|
113
260
|
return false;
|
|
114
261
|
}
|
|
115
262
|
let countA = 0;
|
|
116
|
-
for (const key in
|
|
263
|
+
for (const key in a2) {
|
|
117
264
|
countA++;
|
|
118
|
-
if (!Object.is(
|
|
265
|
+
if (!Object.is(a2[key], b2[key]))
|
|
119
266
|
return false;
|
|
120
267
|
}
|
|
121
268
|
let countB = 0;
|
|
122
|
-
for (const _ in
|
|
269
|
+
for (const _ in b2)
|
|
123
270
|
countB++;
|
|
124
271
|
return countA === countB;
|
|
125
272
|
}
|
|
@@ -131,10 +278,10 @@ function lis(arr) {
|
|
|
131
278
|
return new Set;
|
|
132
279
|
const tails = [];
|
|
133
280
|
const prev = new Array(len).fill(-1);
|
|
134
|
-
for (let
|
|
135
|
-
if (arr[
|
|
281
|
+
for (let i2 = 0;i2 < len; i2++) {
|
|
282
|
+
if (arr[i2] < 0)
|
|
136
283
|
continue;
|
|
137
|
-
const val = arr[
|
|
284
|
+
const val = arr[i2];
|
|
138
285
|
let lo = 0;
|
|
139
286
|
let hi = tails.length;
|
|
140
287
|
while (lo < hi) {
|
|
@@ -145,8 +292,8 @@ function lis(arr) {
|
|
|
145
292
|
hi = mid;
|
|
146
293
|
}
|
|
147
294
|
if (lo > 0)
|
|
148
|
-
prev[
|
|
149
|
-
tails[lo] =
|
|
295
|
+
prev[i2] = tails[lo - 1];
|
|
296
|
+
tails[lo] = i2;
|
|
150
297
|
}
|
|
151
298
|
const result = new Set;
|
|
152
299
|
if (tails.length === 0)
|
|
@@ -159,18 +306,6 @@ function lis(arr) {
|
|
|
159
306
|
return result;
|
|
160
307
|
}
|
|
161
308
|
|
|
162
|
-
// src/internal/orchestrator.ts
|
|
163
|
-
class Orchestrator {
|
|
164
|
-
#currentEngine;
|
|
165
|
-
setCurrentEngine(engine) {
|
|
166
|
-
this.#currentEngine = engine;
|
|
167
|
-
}
|
|
168
|
-
currentEngine() {
|
|
169
|
-
return this.#currentEngine;
|
|
170
|
-
}
|
|
171
|
-
}
|
|
172
|
-
var orchestrator = new Orchestrator;
|
|
173
|
-
|
|
174
309
|
// src/internal/engine.ts
|
|
175
310
|
class Engine {
|
|
176
311
|
renderer;
|
|
@@ -185,12 +320,12 @@ class Engine {
|
|
|
185
320
|
this.#scheduler = scheduler ?? ((cb) => queueMicrotask(cb));
|
|
186
321
|
renderer.engine = this;
|
|
187
322
|
}
|
|
188
|
-
newView(viewFn, parent, props,
|
|
323
|
+
newView(viewFn, parent, props, slot2, userKey) {
|
|
189
324
|
const res = {
|
|
190
325
|
viewFn,
|
|
191
326
|
userKey,
|
|
192
327
|
props,
|
|
193
|
-
slot,
|
|
328
|
+
slot: slot2,
|
|
194
329
|
body: null,
|
|
195
330
|
sc: null,
|
|
196
331
|
renderRef: null,
|
|
@@ -201,52 +336,53 @@ class Engine {
|
|
|
201
336
|
parent,
|
|
202
337
|
scHost: null
|
|
203
338
|
};
|
|
204
|
-
if (
|
|
205
|
-
|
|
339
|
+
if (slot2) {
|
|
340
|
+
const slotFn = typeof slot2 === "string" ? this.#stringSlot(slot2) : slot2;
|
|
341
|
+
res.sc = this.#collect(slotFn, [], res);
|
|
206
342
|
}
|
|
207
343
|
return res;
|
|
208
344
|
}
|
|
209
|
-
view(viewFn, props,
|
|
210
|
-
const
|
|
211
|
-
this.#collector?.push(
|
|
212
|
-
return
|
|
345
|
+
view(viewFn, props, slot2, userKey) {
|
|
346
|
+
const view2 = this.newView(viewFn, this.#collectFor, props, slot2, userKey);
|
|
347
|
+
this.#collector?.push(view2);
|
|
348
|
+
return view2;
|
|
213
349
|
}
|
|
214
350
|
views(views) {
|
|
215
351
|
if (views)
|
|
216
352
|
this.#collector?.push(...views);
|
|
217
353
|
}
|
|
218
|
-
initViewBody(
|
|
219
|
-
if (!(
|
|
354
|
+
initViewBody(view2) {
|
|
355
|
+
if (!(view2.flags & F_PENDING))
|
|
220
356
|
return;
|
|
221
|
-
|
|
222
|
-
if (
|
|
357
|
+
view2.flags &= ~F_PENDING;
|
|
358
|
+
if (view2.flags & F_PRIMITIVE) {
|
|
223
359
|
const engine = this;
|
|
224
|
-
|
|
360
|
+
view2.body = {
|
|
225
361
|
render() {
|
|
226
|
-
engine.views(
|
|
362
|
+
engine.views(view2.sc);
|
|
227
363
|
}
|
|
228
364
|
};
|
|
229
365
|
return;
|
|
230
366
|
}
|
|
231
|
-
|
|
232
|
-
props: () =>
|
|
367
|
+
view2.body = view2.viewFn({
|
|
368
|
+
props: () => view2.props,
|
|
233
369
|
use: (storeOrState) => {
|
|
234
370
|
if (!isStore(storeOrState)) {
|
|
235
|
-
return new State(storeOrState, () => this.markDirty(
|
|
371
|
+
return new State(storeOrState, () => this.markDirty(view2));
|
|
236
372
|
}
|
|
237
|
-
const
|
|
238
|
-
const unsub =
|
|
239
|
-
if (!
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
return
|
|
373
|
+
const s2 = storeOrState;
|
|
374
|
+
const unsub = s2.subscribe(() => this.markDirty(view2));
|
|
375
|
+
if (!view2.unsubscribe)
|
|
376
|
+
view2.unsubscribe = [];
|
|
377
|
+
view2.unsubscribe.push(unsub);
|
|
378
|
+
return s2;
|
|
243
379
|
},
|
|
244
380
|
slot: () => {
|
|
245
|
-
if (!
|
|
381
|
+
if (!view2.sc)
|
|
246
382
|
return;
|
|
247
|
-
|
|
248
|
-
for (const child of
|
|
249
|
-
child.parent = this.#collectFor ??
|
|
383
|
+
view2.scHost = this.#collectFor ?? view2;
|
|
384
|
+
for (const child of view2.sc) {
|
|
385
|
+
child.parent = this.#collectFor ?? view2;
|
|
250
386
|
this.#collector?.push(child);
|
|
251
387
|
}
|
|
252
388
|
}
|
|
@@ -254,28 +390,32 @@ class Engine {
|
|
|
254
390
|
}
|
|
255
391
|
createRoot(children, props) {
|
|
256
392
|
orchestrator.setCurrentEngine(this);
|
|
257
|
-
const
|
|
393
|
+
const view2 = this.newView(({ slot: slot2 }) => ({
|
|
258
394
|
render() {
|
|
259
|
-
|
|
395
|
+
slot2();
|
|
260
396
|
}
|
|
261
397
|
}), null, props, children, null);
|
|
262
|
-
this.markDirty(
|
|
263
|
-
return
|
|
398
|
+
this.markDirty(view2);
|
|
399
|
+
return view2;
|
|
264
400
|
}
|
|
265
|
-
markDirty(
|
|
266
|
-
if (
|
|
401
|
+
markDirty(view2) {
|
|
402
|
+
if (view2.flags & F_DISPOSED)
|
|
403
|
+
return;
|
|
404
|
+
if (view2.flags & F_DIRTY) {
|
|
267
405
|
return;
|
|
268
406
|
}
|
|
269
|
-
|
|
270
|
-
this.#dirtyQueue.add(
|
|
407
|
+
view2.flags |= F_DIRTY;
|
|
408
|
+
this.#dirtyQueue.add(view2);
|
|
271
409
|
this.schedule();
|
|
272
410
|
}
|
|
273
|
-
markMoved(
|
|
274
|
-
if (
|
|
411
|
+
markMoved(view2) {
|
|
412
|
+
if (view2.flags & F_DISPOSED)
|
|
413
|
+
return;
|
|
414
|
+
if (view2.flags & F_MOVED) {
|
|
275
415
|
return;
|
|
276
416
|
}
|
|
277
|
-
|
|
278
|
-
this.#dirtyQueue.add(
|
|
417
|
+
view2.flags |= F_MOVED;
|
|
418
|
+
this.#dirtyQueue.add(view2);
|
|
279
419
|
this.schedule();
|
|
280
420
|
}
|
|
281
421
|
schedule() {
|
|
@@ -297,27 +437,37 @@ class Engine {
|
|
|
297
437
|
this.#collectFor = beforeParent;
|
|
298
438
|
return collector;
|
|
299
439
|
}
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
440
|
+
#stringSlot(content) {
|
|
441
|
+
return () => {
|
|
442
|
+
this.view(textViewFn, content, null, null);
|
|
443
|
+
};
|
|
444
|
+
}
|
|
445
|
+
nextProps(view2, nextProps, nextSlot, preCollectedSc) {
|
|
446
|
+
const prevSc = view2.sc;
|
|
447
|
+
view2.slot = nextSlot;
|
|
303
448
|
if (preCollectedSc) {
|
|
304
449
|
for (const child of preCollectedSc)
|
|
305
|
-
child.parent =
|
|
306
|
-
|
|
450
|
+
child.parent = view2;
|
|
451
|
+
view2.sc = preCollectedSc;
|
|
307
452
|
} else {
|
|
308
|
-
|
|
453
|
+
if (nextSlot) {
|
|
454
|
+
const slotFn = typeof nextSlot === "string" ? this.#stringSlot(nextSlot) : nextSlot;
|
|
455
|
+
view2.sc = this.#collect(slotFn, [], view2);
|
|
456
|
+
} else {
|
|
457
|
+
view2.sc = null;
|
|
458
|
+
}
|
|
309
459
|
}
|
|
310
|
-
const structChanged = hasScStructuralChange(prevSc,
|
|
311
|
-
const shouldUpdate =
|
|
460
|
+
const structChanged = hasScStructuralChange(prevSc, view2.sc);
|
|
461
|
+
const shouldUpdate = view2.body?.shouldUpdate ? view2.body.shouldUpdate(nextProps) : !shallowEqual(view2.props, nextProps);
|
|
312
462
|
if (shouldUpdate || structChanged) {
|
|
313
|
-
|
|
314
|
-
this.markDirty(
|
|
315
|
-
} else if (
|
|
316
|
-
this.#propagateScProps(
|
|
317
|
-
} else if (
|
|
318
|
-
for (let
|
|
319
|
-
if (
|
|
320
|
-
this.markDirty(
|
|
463
|
+
view2.props = nextProps;
|
|
464
|
+
this.markDirty(view2);
|
|
465
|
+
} else if (view2.sc && view2.scHost?.children) {
|
|
466
|
+
this.#propagateScProps(view2);
|
|
467
|
+
} else if (view2.sc && prevSc) {
|
|
468
|
+
for (let i2 = 0;i2 < view2.sc.length; i2++) {
|
|
469
|
+
if (view2.sc[i2].props !== prevSc[i2].props) {
|
|
470
|
+
this.markDirty(view2);
|
|
321
471
|
break;
|
|
322
472
|
}
|
|
323
473
|
}
|
|
@@ -339,131 +489,131 @@ class Engine {
|
|
|
339
489
|
}
|
|
340
490
|
} else {
|
|
341
491
|
const len = Math.min(sc.length, host.children.length);
|
|
342
|
-
for (let
|
|
343
|
-
const live = host.children[
|
|
344
|
-
if (live.viewFn === sc[
|
|
345
|
-
this.nextProps(live, sc[
|
|
492
|
+
for (let i2 = 0;i2 < len; i2++) {
|
|
493
|
+
const live = host.children[i2];
|
|
494
|
+
if (live.viewFn === sc[i2].viewFn) {
|
|
495
|
+
this.nextProps(live, sc[i2].props, sc[i2].slot);
|
|
346
496
|
}
|
|
347
497
|
}
|
|
348
498
|
}
|
|
349
499
|
}
|
|
350
|
-
reconcile(
|
|
500
|
+
reconcile(view2) {
|
|
351
501
|
let pendingChildren = null;
|
|
352
|
-
if (
|
|
353
|
-
pendingChildren = this.#collect(
|
|
502
|
+
if (view2.body?.render) {
|
|
503
|
+
pendingChildren = this.#collect(view2.body.render, [], view2);
|
|
354
504
|
}
|
|
355
505
|
if (pendingChildren == null || pendingChildren.length === 0) {
|
|
356
|
-
if (
|
|
357
|
-
for (const child of
|
|
506
|
+
if (view2.children)
|
|
507
|
+
for (const child of view2.children)
|
|
358
508
|
this.dispose(child);
|
|
359
509
|
return;
|
|
360
510
|
}
|
|
361
|
-
if (
|
|
362
|
-
|
|
511
|
+
if (view2.children == null) {
|
|
512
|
+
view2.children = pendingChildren;
|
|
363
513
|
for (const child of pendingChildren) {
|
|
364
514
|
this.initViewBody(child);
|
|
365
515
|
this.markDirty(child);
|
|
366
516
|
if (child.userKey != null) {
|
|
367
|
-
if (!
|
|
368
|
-
|
|
369
|
-
|
|
517
|
+
if (!view2.keyToView)
|
|
518
|
+
view2.keyToView = new Map;
|
|
519
|
+
view2.keyToView.set(child.userKey, child);
|
|
370
520
|
}
|
|
371
521
|
}
|
|
372
522
|
return;
|
|
373
523
|
}
|
|
374
524
|
const hasKeys = pendingChildren.some((c) => c.userKey != null);
|
|
375
525
|
if (hasKeys) {
|
|
376
|
-
this.#reconcileKeyed(
|
|
526
|
+
this.#reconcileKeyed(view2, view2.children, pendingChildren);
|
|
377
527
|
} else {
|
|
378
|
-
this.#reconcileNonKeyed(
|
|
528
|
+
this.#reconcileNonKeyed(view2, view2.children, pendingChildren);
|
|
379
529
|
}
|
|
380
530
|
}
|
|
381
|
-
#reconcileNonKeyed(
|
|
531
|
+
#reconcileNonKeyed(view2, oldChildren, pending) {
|
|
382
532
|
const oldLen = oldChildren.length;
|
|
383
533
|
const newLen = pending.length;
|
|
384
534
|
const minLen = Math.min(oldLen, newLen);
|
|
385
|
-
for (let
|
|
386
|
-
const old = oldChildren[
|
|
387
|
-
const pend = pending[
|
|
388
|
-
this.#patchOrReplace(
|
|
535
|
+
for (let i2 = 0;i2 < minLen; i2++) {
|
|
536
|
+
const old = oldChildren[i2];
|
|
537
|
+
const pend = pending[i2];
|
|
538
|
+
this.#patchOrReplace(view2, oldChildren, i2, old, pend);
|
|
389
539
|
}
|
|
390
|
-
for (let
|
|
391
|
-
oldChildren[
|
|
392
|
-
this.initViewBody(pending[
|
|
393
|
-
this.markDirty(pending[
|
|
540
|
+
for (let i2 = oldLen;i2 < newLen; i2++) {
|
|
541
|
+
oldChildren[i2] = pending[i2];
|
|
542
|
+
this.initViewBody(pending[i2]);
|
|
543
|
+
this.markDirty(pending[i2]);
|
|
394
544
|
}
|
|
395
|
-
for (let
|
|
396
|
-
this.dispose(oldChildren[
|
|
545
|
+
for (let i2 = newLen;i2 < oldLen; i2++) {
|
|
546
|
+
this.dispose(oldChildren[i2]);
|
|
397
547
|
}
|
|
398
548
|
oldChildren.length = newLen;
|
|
399
549
|
}
|
|
400
|
-
#reconcileKeyed(
|
|
401
|
-
let
|
|
550
|
+
#reconcileKeyed(view2, oldChildren, pending) {
|
|
551
|
+
let i2 = 0;
|
|
402
552
|
let oldEnd = oldChildren.length - 1;
|
|
403
553
|
let newEnd = pending.length - 1;
|
|
404
|
-
while (
|
|
405
|
-
const oldView = oldChildren[
|
|
406
|
-
const pendView = pending[
|
|
554
|
+
while (i2 <= oldEnd && i2 <= newEnd) {
|
|
555
|
+
const oldView = oldChildren[i2];
|
|
556
|
+
const pendView = pending[i2];
|
|
407
557
|
if (oldView.userKey !== pendView.userKey)
|
|
408
558
|
break;
|
|
409
|
-
this.#patchOrReplace(
|
|
410
|
-
|
|
559
|
+
this.#patchOrReplace(view2, oldChildren, i2, oldView, pendView);
|
|
560
|
+
i2++;
|
|
411
561
|
}
|
|
412
|
-
while (oldEnd >=
|
|
562
|
+
while (oldEnd >= i2 && newEnd >= i2) {
|
|
413
563
|
const oldView = oldChildren[oldEnd];
|
|
414
564
|
const pendView = pending[newEnd];
|
|
415
565
|
if (oldView.userKey !== pendView.userKey)
|
|
416
566
|
break;
|
|
417
|
-
this.#patchOrReplace(
|
|
567
|
+
this.#patchOrReplace(view2, oldChildren, oldEnd, oldView, pendView);
|
|
418
568
|
oldEnd--;
|
|
419
569
|
newEnd--;
|
|
420
570
|
}
|
|
421
|
-
if (
|
|
422
|
-
for (let j =
|
|
571
|
+
if (i2 > oldEnd) {
|
|
572
|
+
for (let j = i2;j <= newEnd; j++) {
|
|
423
573
|
this.initViewBody(pending[j]);
|
|
424
574
|
this.markDirty(pending[j]);
|
|
425
575
|
if (pending[j].userKey != null) {
|
|
426
|
-
if (!
|
|
427
|
-
|
|
428
|
-
|
|
576
|
+
if (!view2.keyToView)
|
|
577
|
+
view2.keyToView = new Map;
|
|
578
|
+
view2.keyToView.set(pending[j].userKey, pending[j]);
|
|
429
579
|
}
|
|
430
580
|
}
|
|
431
|
-
|
|
432
|
-
...oldChildren.slice(0,
|
|
433
|
-
...pending.slice(
|
|
434
|
-
...oldChildren.slice(
|
|
581
|
+
view2.children = [
|
|
582
|
+
...oldChildren.slice(0, i2),
|
|
583
|
+
...pending.slice(i2, newEnd + 1),
|
|
584
|
+
...oldChildren.slice(i2, oldEnd + 1)
|
|
435
585
|
];
|
|
436
586
|
return;
|
|
437
587
|
}
|
|
438
|
-
if (
|
|
439
|
-
for (let j =
|
|
588
|
+
if (i2 > newEnd) {
|
|
589
|
+
for (let j = i2;j <= oldEnd; j++) {
|
|
440
590
|
this.dispose(oldChildren[j]);
|
|
441
591
|
}
|
|
442
|
-
|
|
443
|
-
...oldChildren.slice(0,
|
|
592
|
+
view2.children = [
|
|
593
|
+
...oldChildren.slice(0, i2),
|
|
444
594
|
...oldChildren.slice(oldEnd + 1)
|
|
445
595
|
];
|
|
446
596
|
return;
|
|
447
597
|
}
|
|
448
598
|
const newKeyToIndex = new Map;
|
|
449
|
-
for (let j =
|
|
599
|
+
for (let j = i2;j <= newEnd; j++) {
|
|
450
600
|
const key = pending[j].userKey;
|
|
451
601
|
if (key != null)
|
|
452
602
|
newKeyToIndex.set(key, j);
|
|
453
603
|
}
|
|
454
|
-
const middleLen = newEnd -
|
|
604
|
+
const middleLen = newEnd - i2 + 1;
|
|
455
605
|
const newIdxToOldIdx = new Array(middleLen).fill(-1);
|
|
456
606
|
const matched = new Set;
|
|
457
|
-
for (let j =
|
|
607
|
+
for (let j = i2;j <= oldEnd; j++) {
|
|
458
608
|
const oldView = oldChildren[j];
|
|
459
609
|
const key = oldView.userKey;
|
|
460
610
|
if (key != null && newKeyToIndex.has(key)) {
|
|
461
611
|
const newIdx = newKeyToIndex.get(key);
|
|
462
|
-
newIdxToOldIdx[newIdx -
|
|
612
|
+
newIdxToOldIdx[newIdx - i2] = j;
|
|
463
613
|
matched.add(j);
|
|
464
614
|
}
|
|
465
615
|
}
|
|
466
|
-
for (let j =
|
|
616
|
+
for (let j = i2;j <= oldEnd; j++) {
|
|
467
617
|
if (!matched.has(j)) {
|
|
468
618
|
this.dispose(oldChildren[j]);
|
|
469
619
|
}
|
|
@@ -471,29 +621,29 @@ class Engine {
|
|
|
471
621
|
const stable = lis(newIdxToOldIdx);
|
|
472
622
|
const newChildren = new Array(middleLen);
|
|
473
623
|
for (let j = middleLen - 1;j >= 0; j--) {
|
|
474
|
-
const newIdx =
|
|
624
|
+
const newIdx = i2 + j;
|
|
475
625
|
const pendView = pending[newIdx];
|
|
476
626
|
if (newIdxToOldIdx[j] === -1) {
|
|
477
627
|
this.initViewBody(pendView);
|
|
478
628
|
this.markDirty(pendView);
|
|
479
629
|
if (pendView.userKey != null) {
|
|
480
|
-
if (!
|
|
481
|
-
|
|
482
|
-
|
|
630
|
+
if (!view2.keyToView)
|
|
631
|
+
view2.keyToView = new Map;
|
|
632
|
+
view2.keyToView.set(pendView.userKey, pendView);
|
|
483
633
|
}
|
|
484
634
|
newChildren[j] = pendView;
|
|
485
635
|
} else {
|
|
486
636
|
const oldView = oldChildren[newIdxToOldIdx[j]];
|
|
487
|
-
this.#patchOrReplace(
|
|
637
|
+
this.#patchOrReplace(view2, oldChildren, newIdxToOldIdx[j], oldView, pendView);
|
|
488
638
|
if (!stable.has(j)) {
|
|
489
639
|
this.markMoved(oldView);
|
|
490
640
|
}
|
|
491
641
|
newChildren[j] = oldView;
|
|
492
642
|
}
|
|
493
643
|
}
|
|
494
|
-
const head = oldChildren.slice(0,
|
|
644
|
+
const head = oldChildren.slice(0, i2);
|
|
495
645
|
const tail = oldChildren.slice(oldEnd + 1);
|
|
496
|
-
|
|
646
|
+
view2.children = [...head, ...newChildren, ...tail];
|
|
497
647
|
}
|
|
498
648
|
#patchOrReplace(parent, oldChildren, idx, oldView, pendView) {
|
|
499
649
|
if (oldView.viewFn === pendView.viewFn) {
|
|
@@ -510,10 +660,10 @@ class Engine {
|
|
|
510
660
|
}
|
|
511
661
|
}
|
|
512
662
|
}
|
|
513
|
-
dispose(
|
|
514
|
-
const isPrimitiveWithDom =
|
|
515
|
-
if (
|
|
516
|
-
for (const child of
|
|
663
|
+
dispose(view2) {
|
|
664
|
+
const isPrimitiveWithDom = view2.flags & F_PRIMITIVE && view2.renderRef;
|
|
665
|
+
if (view2.children) {
|
|
666
|
+
for (const child of view2.children) {
|
|
517
667
|
if (isPrimitiveWithDom) {
|
|
518
668
|
this.#disposeVirtual(child);
|
|
519
669
|
} else {
|
|
@@ -521,26 +671,30 @@ class Engine {
|
|
|
521
671
|
}
|
|
522
672
|
}
|
|
523
673
|
}
|
|
524
|
-
if (
|
|
525
|
-
for (const unsub of
|
|
674
|
+
if (view2.unsubscribe)
|
|
675
|
+
for (const unsub of view2.unsubscribe)
|
|
526
676
|
unsub();
|
|
527
|
-
if (
|
|
528
|
-
|
|
529
|
-
this.renderer.unmount(
|
|
530
|
-
this.#dirtyQueue.delete(
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
677
|
+
if (view2.userKey != null)
|
|
678
|
+
view2.parent?.keyToView?.delete(view2.userKey);
|
|
679
|
+
this.renderer.unmount(view2);
|
|
680
|
+
this.#dirtyQueue.delete(view2);
|
|
681
|
+
view2.flags |= F_DISPOSED;
|
|
682
|
+
view2.flags &= ~(F_DIRTY | F_MOVED);
|
|
683
|
+
}
|
|
684
|
+
#disposeVirtual(view2) {
|
|
685
|
+
if (view2.children) {
|
|
686
|
+
for (const child of view2.children)
|
|
535
687
|
this.#disposeVirtual(child);
|
|
536
688
|
}
|
|
537
|
-
if (
|
|
538
|
-
for (const unsub of
|
|
689
|
+
if (view2.unsubscribe)
|
|
690
|
+
for (const unsub of view2.unsubscribe)
|
|
539
691
|
unsub();
|
|
540
|
-
if (
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
this.#dirtyQueue.delete(
|
|
692
|
+
if (view2.userKey != null)
|
|
693
|
+
view2.parent?.keyToView?.delete(view2.userKey);
|
|
694
|
+
view2.renderRef = undefined;
|
|
695
|
+
this.#dirtyQueue.delete(view2);
|
|
696
|
+
view2.flags |= F_DISPOSED;
|
|
697
|
+
view2.flags &= ~(F_DIRTY | F_MOVED);
|
|
544
698
|
}
|
|
545
699
|
render() {
|
|
546
700
|
if (this.#rendering)
|
|
@@ -549,26 +703,28 @@ class Engine {
|
|
|
549
703
|
this.#rendering = true;
|
|
550
704
|
try {
|
|
551
705
|
const cbs = [];
|
|
552
|
-
for (const
|
|
553
|
-
|
|
554
|
-
|
|
706
|
+
for (const view2 of this.#dirtyQueue) {
|
|
707
|
+
if (view2.flags & F_DISPOSED)
|
|
708
|
+
continue;
|
|
709
|
+
this.initViewBody(view2);
|
|
710
|
+
const isNew = !view2.renderRef;
|
|
555
711
|
if (!isNew)
|
|
556
|
-
|
|
557
|
-
if (
|
|
558
|
-
this.reconcile(
|
|
559
|
-
this.renderer.render(
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
if (isNew &&
|
|
563
|
-
const
|
|
564
|
-
cbs.push(() =>
|
|
565
|
-
} else if (!isNew &&
|
|
566
|
-
const
|
|
567
|
-
cbs.push(() =>
|
|
712
|
+
view2.body?.onUpdateBefore?.();
|
|
713
|
+
if (view2.flags & F_DIRTY) {
|
|
714
|
+
this.reconcile(view2);
|
|
715
|
+
this.renderer.render(view2);
|
|
716
|
+
view2.flags &= ~F_DIRTY;
|
|
717
|
+
view2.flags &= ~F_MOVED;
|
|
718
|
+
if (isNew && view2.body?.onMount) {
|
|
719
|
+
const b2 = view2.body;
|
|
720
|
+
cbs.push(() => b2.onMount());
|
|
721
|
+
} else if (!isNew && view2.body?.onUpdateAfter) {
|
|
722
|
+
const b2 = view2.body;
|
|
723
|
+
cbs.push(() => b2.onUpdateAfter());
|
|
568
724
|
}
|
|
569
725
|
} else {
|
|
570
|
-
this.renderer.render(
|
|
571
|
-
|
|
726
|
+
this.renderer.render(view2);
|
|
727
|
+
view2.flags &= ~F_MOVED;
|
|
572
728
|
}
|
|
573
729
|
}
|
|
574
730
|
this.#dirtyQueue.clear();
|
|
@@ -585,149 +741,16 @@ class Engine {
|
|
|
585
741
|
}
|
|
586
742
|
|
|
587
743
|
// src/public/app.ts
|
|
588
|
-
function createApp(
|
|
744
|
+
function createApp(slot2, renderer, options) {
|
|
589
745
|
return {
|
|
590
746
|
mount(props) {
|
|
591
747
|
const engine = new Engine(renderer, options?.scheduler);
|
|
592
|
-
engine.createRoot(
|
|
748
|
+
engine.createRoot(slot2, props ?? {});
|
|
593
749
|
engine.render();
|
|
594
750
|
return { engine };
|
|
595
751
|
}
|
|
596
752
|
};
|
|
597
753
|
}
|
|
598
|
-
// src/public/view.ts
|
|
599
|
-
function view(body) {
|
|
600
|
-
return (props, slot) => {
|
|
601
|
-
orchestrator.currentEngine().view(body, props, slot, maybeGetUserKey(props));
|
|
602
|
-
};
|
|
603
|
-
}
|
|
604
|
-
function maybeGetUserKey(params) {
|
|
605
|
-
if (params != null && typeof params === "object" && "key" in params && params.key != null && (typeof params.key === "string" || typeof params.key === "number")) {
|
|
606
|
-
return params.key;
|
|
607
|
-
}
|
|
608
|
-
}
|
|
609
|
-
// src/public/primitives/primitives.ts
|
|
610
|
-
function html(tag) {
|
|
611
|
-
const fn = ({
|
|
612
|
-
slot
|
|
613
|
-
}) => ({
|
|
614
|
-
render() {
|
|
615
|
-
slot();
|
|
616
|
-
}
|
|
617
|
-
});
|
|
618
|
-
fn[$primitive] = tag;
|
|
619
|
-
return view(fn);
|
|
620
|
-
}
|
|
621
|
-
var textViewFn = Object.assign(() => ({ render() {} }), { [$primitive]: "text" });
|
|
622
|
-
function text(content) {
|
|
623
|
-
orchestrator.currentEngine().view(textViewFn, content, null, null);
|
|
624
|
-
}
|
|
625
|
-
var div = html("div");
|
|
626
|
-
var span = html("span");
|
|
627
|
-
var section = html("section");
|
|
628
|
-
var article = html("article");
|
|
629
|
-
var aside = html("aside");
|
|
630
|
-
var nav = html("nav");
|
|
631
|
-
var header = html("header");
|
|
632
|
-
var footer = html("footer");
|
|
633
|
-
var main = html("main");
|
|
634
|
-
var p = html("p");
|
|
635
|
-
var h1 = html("h1");
|
|
636
|
-
var h2 = html("h2");
|
|
637
|
-
var h3 = html("h3");
|
|
638
|
-
var h4 = html("h4");
|
|
639
|
-
var h5 = html("h5");
|
|
640
|
-
var h6 = html("h6");
|
|
641
|
-
var pre = html("pre");
|
|
642
|
-
var code = html("code");
|
|
643
|
-
var em = html("em");
|
|
644
|
-
var strong = html("strong");
|
|
645
|
-
var small = html("small");
|
|
646
|
-
var br = html("br");
|
|
647
|
-
var hr = html("hr");
|
|
648
|
-
var a = html("a");
|
|
649
|
-
var blockquote = html("blockquote");
|
|
650
|
-
var label = html("label");
|
|
651
|
-
var ul = html("ul");
|
|
652
|
-
var ol = html("ol");
|
|
653
|
-
var li = html("li");
|
|
654
|
-
var table = html("table");
|
|
655
|
-
var thead = html("thead");
|
|
656
|
-
var tbody = html("tbody");
|
|
657
|
-
var tfoot = html("tfoot");
|
|
658
|
-
var tr = html("tr");
|
|
659
|
-
var th = html("th");
|
|
660
|
-
var td = html("td");
|
|
661
|
-
var form = html("form");
|
|
662
|
-
var button = html("button");
|
|
663
|
-
var input = html("input");
|
|
664
|
-
var textarea = html("textarea");
|
|
665
|
-
var select = html("select");
|
|
666
|
-
var option = html("option");
|
|
667
|
-
var fieldset = html("fieldset");
|
|
668
|
-
var legend = html("legend");
|
|
669
|
-
var img = html("img");
|
|
670
|
-
var video = html("video");
|
|
671
|
-
var audio = html("audio");
|
|
672
|
-
var canvas = html("canvas");
|
|
673
|
-
var source = html("source");
|
|
674
|
-
var details = html("details");
|
|
675
|
-
var summary = html("summary");
|
|
676
|
-
var dialog = html("dialog");
|
|
677
|
-
var menu = html("menu");
|
|
678
|
-
var iframe = html("iframe");
|
|
679
|
-
var embed = html("embed");
|
|
680
|
-
var object = html("object");
|
|
681
|
-
var picture = html("picture");
|
|
682
|
-
var portal = html("portal");
|
|
683
|
-
var svg = html("svg");
|
|
684
|
-
var script = html("script");
|
|
685
|
-
var noscript = html("noscript");
|
|
686
|
-
var template = html("template");
|
|
687
|
-
var slot = html("slot");
|
|
688
|
-
var address = html("address");
|
|
689
|
-
var hgroup = html("hgroup");
|
|
690
|
-
var search = html("search");
|
|
691
|
-
var abbr = html("abbr");
|
|
692
|
-
var b = html("b");
|
|
693
|
-
var bdi = html("bdi");
|
|
694
|
-
var bdo = html("bdo");
|
|
695
|
-
var cite = html("cite");
|
|
696
|
-
var data = html("data");
|
|
697
|
-
var dfn = html("dfn");
|
|
698
|
-
var i = html("i");
|
|
699
|
-
var kbd = html("kbd");
|
|
700
|
-
var mark = html("mark");
|
|
701
|
-
var q = html("q");
|
|
702
|
-
var rp = html("rp");
|
|
703
|
-
var rt = html("rt");
|
|
704
|
-
var ruby = html("ruby");
|
|
705
|
-
var s = html("s");
|
|
706
|
-
var samp = html("samp");
|
|
707
|
-
var sub = html("sub");
|
|
708
|
-
var sup = html("sup");
|
|
709
|
-
var time = html("time");
|
|
710
|
-
var u = html("u");
|
|
711
|
-
var varEl = html("var");
|
|
712
|
-
var wbr = html("wbr");
|
|
713
|
-
var del = html("del");
|
|
714
|
-
var ins = html("ins");
|
|
715
|
-
var caption = html("caption");
|
|
716
|
-
var colgroup = html("colgroup");
|
|
717
|
-
var col = html("col");
|
|
718
|
-
var datalist = html("datalist");
|
|
719
|
-
var optgroup = html("optgroup");
|
|
720
|
-
var output = html("output");
|
|
721
|
-
var progress = html("progress");
|
|
722
|
-
var meter = html("meter");
|
|
723
|
-
var figure = html("figure");
|
|
724
|
-
var figcaption = html("figcaption");
|
|
725
|
-
var dd = html("dd");
|
|
726
|
-
var dl = html("dl");
|
|
727
|
-
var dt = html("dt");
|
|
728
|
-
var track = html("track");
|
|
729
|
-
var map = html("map");
|
|
730
|
-
var area = html("area");
|
|
731
754
|
// src/render/html_render.ts
|
|
732
755
|
function isEventProp(key) {
|
|
733
756
|
return key.charCodeAt(0) === 111 && key.charCodeAt(1) === 110 && key.charCodeAt(2) >= 65 && key.charCodeAt(2) <= 90;
|
|
@@ -1354,4 +1377,4 @@ export {
|
|
|
1354
1377
|
$primitive
|
|
1355
1378
|
};
|
|
1356
1379
|
|
|
1357
|
-
//# debugId=
|
|
1380
|
+
//# debugId=68581B5762BB1F1C64756E2164756E21
|