Skip to content

Commit 27d3f65

Browse files
marvinhagemeistermarvinhagemeister
committed
WIP
1 parent 1172940 commit 27d3f65

File tree

20 files changed

+236
-163
lines changed

20 files changed

+236
-163
lines changed

‎src/adapter/protocol/events.test.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ describe("applyEvent", () => {
99
const store = createStore();
1010
const data = fromSnapshot(["rootId: 1"]);
1111
applyEvent(store, "operation_v2", data);
12-
expect(store.roots.$.length).to.equal(1);
12+
expect(store.roots.$.size).to.equal(1);
1313
});
1414

1515
it("should update roots correctly", () => {
@@ -20,7 +20,7 @@ describe("applyEvent", () => {
2020
"Add 2 <div> to parent 1",
2121
]);
2222
applyEvent(store, "operation_v2", data);
23-
expect(store.roots.$.length).to.equal(1);
23+
expect(store.roots.$.size).to.equal(1);
2424
});
2525

2626
it("should mount nodes", () => {

‎src/adapter/protocol/events.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@ export function flush(commit: Commit) {
107107
* We currently expect all operations to be in order.
108108
*/
109109
export function applyOperationsV2(store: Store, data: number[]) {
110-
const { rootId: commitRootId, roots, tree, reasons, stats } = ops2Tree(
110+
const { rootId, roots, tree, reasons, stats, rendered } = ops2Tree(
111111
store.nodes.$,
112112
store.roots.$,
113113
data,
@@ -127,9 +127,9 @@ export function applyOperationsV2(store: Store, data: number[]) {
127127
// If we are profiling, we'll make a frozen copy of the mutable
128128
// elements tree because the profiler can step through time
129129
if (store.profiler.isRecording.$) {
130-
recordProfilerCommit(store.nodes.$, store.profiler, commitRootId);
130+
recordProfilerCommit(store.nodes.$, store.profiler, rendered, rootId);
131131
store.profiler.renderReasons.update(m => {
132-
m.set(commitRootId, reasons);
132+
m.set(rootId, reasons);
133133
});
134134
}
135135

‎src/adapter/protocol/legacy/operationsV1.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export function applyOperationsV1(store: Store, data: number[]) {
1515
switch (data[i]) {
1616
case MsgTypes.ADD_ROOT: {
1717
const id = data[i + 1];
18-
store.roots.$.push(id);
18+
store.roots.$.add(id);
1919
i += 1;
2020
break;
2121
}

‎src/adapter/protocol/operations.test.ts

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -9,18 +9,19 @@ describe("ops2Tree", () => {
99
Fragment ***
1010
`;
1111

12-
const res = ops2Tree(state.idMap, [], []);
12+
const res = ops2Tree(state.idMap, new Set(), []);
1313
expect(res.tree).not.to.equal(state.idMap);
1414
expect(res.tree.size).to.equal(state.idMap.size);
1515
});
1616

1717
describe("ADD_ROOT", () => {
1818
it("should add new roots", () => {
1919
const ops = fromSnapshot(["rootId: 1"]);
20-
expect(ops2Tree(new Map(), [], ops)).to.deep.equal({
20+
expect(ops2Tree(new Map(), new Set(), ops)).to.deep.equal({
2121
rootId: 1,
22-
roots: [1],
22+
roots: new Map([[1, 1]]),
2323
removals: [],
24+
rendered: [],
2425
tree: new Map(),
2526
reasons: new Map(),
2627
stats: null,
@@ -32,7 +33,7 @@ describe("ops2Tree", () => {
3233
it("should add a vnode", () => {
3334
const ops = fromSnapshot(["rootId: 1", "Add 1 <Fragment> to parent -1"]);
3435
expect(
35-
Array.from(ops2Tree(new Map(), [], ops).tree.values()),
36+
Array.from(ops2Tree(new Map(), new Set(), ops).tree.values()),
3637
).to.deep.equal([
3738
{
3839
children: [],
@@ -56,7 +57,7 @@ describe("ops2Tree", () => {
5657
"Add 2 <span> to parent 1",
5758
]);
5859

59-
const { tree } = ops2Tree(new Map(), [], ops);
60+
const { tree } = ops2Tree(new Map(), new Set(), ops);
6061
expect(Array.from(tree.values())).to.deep.equal([
6162
{
6263
children: [2],
@@ -93,7 +94,7 @@ describe("ops2Tree", () => {
9394
`;
9495

9596
const ops = fromSnapshot(["rootId: 1", "Update timings 1 time 20:40"]);
96-
const next = ops2Tree(state.idMap, [], ops).tree.get(1)!;
97+
const next = ops2Tree(state.idMap, new Set(), ops).tree.get(1)!;
9798

9899
expect(next.startTime).to.equal(20);
99100
expect(next.endTime).to.equal(40);
@@ -120,7 +121,7 @@ describe("ops2Tree", () => {
120121
"Remove 4",
121122
]);
122123

123-
const next = ops2Tree(state.idMap, [], ops).tree;
124+
const next = ops2Tree(state.idMap, new Set(), ops).tree;
124125
const root = next.get(1)!;
125126
const span = next.get(2)!;
126127

@@ -142,7 +143,7 @@ describe("ops2Tree", () => {
142143
"Remove 4",
143144
]);
144145

145-
const next = ops2Tree(state.idMap, [], ops);
146+
const next = ops2Tree(state.idMap, new Set(), ops);
146147
expect(next.removals).to.deep.equal([3, 4]);
147148
});
148149

@@ -158,7 +159,7 @@ describe("ops2Tree", () => {
158159
"Remove 2",
159160
]);
160161

161-
const next = ops2Tree(state.idMap, [], ops);
162+
const next = ops2Tree(state.idMap, new Set(), ops);
162163
expect(Array.from(next.tree.keys())).to.deep.equal([1, 4]);
163164
});
164165
});
@@ -178,7 +179,7 @@ describe("ops2Tree", () => {
178179
"Reorder 1 [3,2]",
179180
]);
180181

181-
const next = ops2Tree(state.idMap, [], ops).tree;
182+
const next = ops2Tree(state.idMap, new Set(), ops).tree;
182183
expect(next.get(1)!.children).to.deep.equal([3, 2]);
183184
});
184185

@@ -192,8 +193,10 @@ describe("ops2Tree", () => {
192193
"Update timings 1 time 20:40",
193194
]);
194195

195-
expect(() => ops2Tree(new Map(), [], ops)).to.not.throw();
196-
expect(ops2Tree(new Map(), [], ops).tree.get(1)!.startTime).to.equal(20);
196+
expect(() => ops2Tree(new Map(), new Set(), ops)).to.not.throw();
197+
expect(
198+
ops2Tree(new Map(), new Set(), ops).tree.get(1)!.startTime,
199+
).to.equal(20);
197200
});
198201
});
199202
});

‎src/adapter/protocol/operations.ts

Lines changed: 26 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ID, Tree } from "../../view/store/types";
1+
import { DevNodeType, ID, Tree } from "../../view/store/types";
22
import { parseTable } from "./string-table";
33
import { MsgTypes } from "./events";
44
import { deepClone } from "../../view/components/profiler/flamegraph/modes/adjustNodesToRight";
@@ -12,23 +12,39 @@ import { ParsedStats, parseStats } from "../shared/stats";
1212
*
1313
* We currently expect all operations to be in order.
1414
*/
15-
export function ops2Tree(oldTree: Tree, existingRoots: ID[], ops: number[]) {
15+
export function ops2Tree(oldTree: Tree, existingRoots: Set<ID>, ops: number[]) {
1616
const pending: Tree = new Map(oldTree);
1717
const rootId = ops[0];
18-
const roots: ID[] = [...existingRoots];
18+
const roots = new Set(existingRoots);
1919
const removals: ID[] = [];
2020
const reasons: RenderReasonMap = new Map();
2121
let stats: ParsedStats | null = null;
22+
const rendered: ID[] = [];
2223

2324
let i = ops[1] + 1;
2425
const strings = parseTable(ops.slice(1, i + 1));
2526

2627
for (i += 1; i < ops.length; i++) {
2728
switch (ops[i]) {
28-
case MsgTypes.ADD_ROOT:
29-
roots.push(ops[i + 1]);
29+
case MsgTypes.ADD_ROOT: {
30+
const id = ops[i + 1];
31+
roots.add(id);
3032
i += 1;
33+
34+
pending.set(id, {
35+
children: [],
36+
depth: -1,
37+
id,
38+
hocs: null,
39+
name: "__VIRTUAL__ROOT__",
40+
parent: -1,
41+
type: DevNodeType.Group,
42+
key: "",
43+
startTime: -1,
44+
endTime: -1,
45+
});
3146
break;
47+
}
3248
case MsgTypes.ADD_VNODE: {
3349
const id = ops[i + 1];
3450
const parentId = ops[i + 3];
@@ -39,6 +55,8 @@ export function ops2Tree(oldTree: Tree, existingRoots: ID[], ops: number[]) {
3955
clone.children.push(id);
4056
}
4157

58+
rendered.push(id);
59+
4260
pending.set(id, {
4361
children: [],
4462
depth: parent ? parent.depth + 1 : 0,
@@ -61,6 +79,8 @@ export function ops2Tree(oldTree: Tree, existingRoots: ID[], ops: number[]) {
6179
x.startTime = ops[i + 2] / 1000;
6280
x.endTime = ops[i + 3] / 1000;
6381

82+
rendered.push(id);
83+
6484
i += 3;
6585
break;
6686
}
@@ -84,12 +104,6 @@ export function ops2Tree(oldTree: Tree, existingRoots: ID[], ops: number[]) {
84104
}
85105
}
86106

87-
// Check if node was a root
88-
const rootIdx = roots.indexOf(node.id);
89-
if (rootIdx > -1) {
90-
roots.splice(rootIdx, 1);
91-
}
92-
93107
// Delete children recursively
94108
const stack = [node.id];
95109
let item;
@@ -159,5 +173,5 @@ export function ops2Tree(oldTree: Tree, existingRoots: ID[], ops: number[]) {
159173
}
160174
}
161175

162-
return { rootId, roots, tree: pending, removals, reasons, stats };
176+
return { rootId, roots, tree: pending, removals, reasons, stats, rendered };
163177
}

‎src/adapter/shared/renderer.test.tsx

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,6 @@ describe("Renderer 10", () => {
7777
expect(toSnapshot(spy.args[1][1])).to.deep.equal([
7878
"rootId: 1",
7979
"Update timings 1",
80-
"Update timings 2",
8180
]);
8281
});
8382

@@ -111,7 +110,6 @@ describe("Renderer 10", () => {
111110
"rootId: 1",
112111
"Add 3 <span> to parent 2",
113112
"Update timings 1",
114-
"Update timings 2",
115113
]);
116114
});
117115

@@ -154,7 +152,6 @@ describe("Renderer 10", () => {
154152
expect(toSnapshot(spy.args[1][1])).to.deep.equal([
155153
"rootId: 1",
156154
"Update timings 1",
157-
"Update timings 2",
158155
]);
159156
});
160157

@@ -177,9 +174,6 @@ describe("Renderer 10", () => {
177174
expect(toSnapshot(spy.args[1][1])).to.deep.equal([
178175
"rootId: 1",
179176
"Update timings 1",
180-
"Update timings 2",
181-
"Update timings 4",
182-
"Update timings 3",
183177
"Reorder 2 [4, 3]",
184178
]);
185179
});
@@ -341,9 +335,8 @@ describe("Renderer 10", () => {
341335
});
342336

343337
expect(toSnapshot(spy.args[1][1])).to.deep.equal([
344-
"rootId: 2",
338+
"rootId: 1",
345339
"Update timings 2",
346-
"Update timings 3",
347340
]);
348341
});
349342

@@ -383,13 +376,12 @@ describe("Renderer 10", () => {
383376

384377
expect(toSnapshot(spy.args[2][1])).to.deep.equal([
385378
"rootId: 3",
379+
"Add 3 <Fragment> to parent -1",
386380
"Add 4 <div> to parent 3",
387381
"Add 5 <Foo> to parent 4",
388382
"Add 6 <div> to parent 5",
389383
"Add 7 <span> to parent 4",
390384
"Add 8 <span> to parent 4",
391-
"Remove 3", // TODO: Seems wrong
392-
"Remove 3", // TODO: Seems wrong
393385
]);
394386
});
395387

@@ -434,6 +426,7 @@ describe("Renderer 10", () => {
434426
]);
435427
expect(toSnapshot(spy.args[2][1])).to.deep.equal([
436428
"rootId: 4",
429+
"Add 4 <Fragment> to parent -1",
437430
"Add 5 <div> to parent 4",
438431
"Add 6 <Foo> to parent 5",
439432
"Add 7 <div> to parent 6",
@@ -442,7 +435,6 @@ describe("Renderer 10", () => {
442435
"Add 10 <div> to parent 9",
443436
"Add 11 <span> to parent 5",
444437
"Add 12 <span> to parent 5",
445-
"Update timings 2",
446438
]);
447439

448440
renderer.applyFilters({

‎src/adapter/shared/renderer.ts

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import { PreactBindings, SharedVNode } from "../shared/bindings";
2121
import { inspectVNode } from "./inspectVNode";
2222
import { logVNode } from "../10/log";
2323
import { VNodeTimings } from "./timings";
24+
import { printCommit } from "../debug";
2425

2526
export interface RendererConfig {
2627
Fragment: FunctionalComponent;
@@ -69,7 +70,7 @@ export function createRenderer<T extends SharedVNode>(
6970
bindings: PreactBindings<T>,
7071
timings: VNodeTimings,
7172
): Renderer<T> {
72-
const roots = new Set<T>();
73+
const roots = new Map<T, ID>();
7374

7475
let currentUnmounts: number[] = [];
7576

@@ -96,9 +97,10 @@ export function createRenderer<T extends SharedVNode>(
9697

9798
return {
9899
clear() {
99-
roots.forEach(vnode => {
100+
roots.forEach((id, vnode) => {
100101
onUnmount(vnode);
101102
});
103+
roots.clear();
102104
},
103105

104106
getVNodeById: id => getVNodeById(ids, id),
@@ -179,8 +181,7 @@ export function createRenderer<T extends SharedVNode>(
179181
/** Queue events and flush in one go */
180182
const queue: BaseEvent<any, any>[] = [];
181183

182-
roots.forEach(root => {
183-
const rootId = getVNodeId(ids, root);
184+
roots.forEach((rootId, root) => {
184185
traverse(root, vnode => this.onUnmount(vnode), bindings);
185186

186187
const commit: Commit = {
@@ -258,6 +259,7 @@ export function createRenderer<T extends SharedVNode>(
258259
profiler.pendingHighlightUpdates.clear();
259260
}
260261

262+
printCommit(ev.data);
261263
port.send(ev.type as any, ev.data);
262264
},
263265
onUnmount,

0 commit comments

Comments
 (0)