WIP

Author: marvinhagemeister

src/adapter/protocol/events.test.ts

@@ -9,7 +9,7 @@ describe("applyEvent", () => {
 		const store = createStore();
 		const data = fromSnapshot(["rootId: 1"]);
 		applyEvent(store, "operation_v2", data);
-		expect(store.roots.$.length).to.equal(1);
+		expect(store.roots.$.size).to.equal(1);
 	});
 
 	it("should update roots correctly", () => {
@@ -20,7 +20,7 @@ describe("applyEvent", () => {
 			"Add 2 <div> to parent 1",
 		]);
 		applyEvent(store, "operation_v2", data);
-		expect(store.roots.$.length).to.equal(1);
+		expect(store.roots.$.size).to.equal(1);
 	});
 
 	it("should mount nodes", () => {

src/adapter/protocol/events.ts

@@ -107,7 +107,7 @@ export function flush(commit: Commit) {
  * We currently expect all operations to be in order.
  */
 export function applyOperationsV2(store: Store, data: number[]) {
-	const { rootId: commitRootId, roots, tree, reasons, stats } = ops2Tree(
+	const { rootId, roots, tree, reasons, stats, rendered } = ops2Tree(
 		store.nodes.$,
 		store.roots.$,
 		data,
@@ -127,9 +127,9 @@ export function applyOperationsV2(store: Store, data: number[]) {
 	// If we are profiling, we'll make a frozen copy of the mutable
 	// elements tree because the profiler can step through time
 	if (store.profiler.isRecording.$) {
-		recordProfilerCommit(store.nodes.$, store.profiler, commitRootId);
+		recordProfilerCommit(store.nodes.$, store.profiler, rendered, rootId);
 		store.profiler.renderReasons.update(m => {
-			m.set(commitRootId, reasons);
+			m.set(rootId, reasons);
 		});
 	}
 

src/adapter/protocol/legacy/operationsV1.ts

@@ -15,7 +15,7 @@ export function applyOperationsV1(store: Store, data: number[]) {
 		switch (data[i]) {
 			case MsgTypes.ADD_ROOT: {
 				const id = data[i + 1];
-				store.roots.$.push(id);
+				store.roots.$.add(id);
 				i += 1;
 				break;
 			}

src/adapter/protocol/operations.test.ts

@@ -9,18 +9,19 @@ describe("ops2Tree", () => {
         Fragment ***
 			`;
 
-		const res = ops2Tree(state.idMap, [], []);
+		const res = ops2Tree(state.idMap, new Set(), []);
 		expect(res.tree).not.to.equal(state.idMap);
 		expect(res.tree.size).to.equal(state.idMap.size);
 	});
 
 	describe("ADD_ROOT", () => {
 		it("should add new roots", () => {
 			const ops = fromSnapshot(["rootId: 1"]);
-			expect(ops2Tree(new Map(), [], ops)).to.deep.equal({
+			expect(ops2Tree(new Map(), new Set(), ops)).to.deep.equal({
 				rootId: 1,
-				roots: [1],
+				roots: new Map([[1, 1]]),
 				removals: [],
+				rendered: [],
 				tree: new Map(),
 				reasons: new Map(),
 				stats: null,
@@ -32,7 +33,7 @@ describe("ops2Tree", () => {
 		it("should add a vnode", () => {
 			const ops = fromSnapshot(["rootId: 1", "Add 1 <Fragment> to parent -1"]);
 			expect(
-				Array.from(ops2Tree(new Map(), [], ops).tree.values()),
+				Array.from(ops2Tree(new Map(), new Set(), ops).tree.values()),
 			).to.deep.equal([
 				{
 					children: [],
@@ -56,7 +57,7 @@ describe("ops2Tree", () => {
 				"Add 2 <span> to parent 1",
 			]);
 
-			const { tree } = ops2Tree(new Map(), [], ops);
+			const { tree } = ops2Tree(new Map(), new Set(), ops);
 			expect(Array.from(tree.values())).to.deep.equal([
 				{
 					children: [2],
@@ -93,7 +94,7 @@ describe("ops2Tree", () => {
       `;
 
 			const ops = fromSnapshot(["rootId: 1", "Update timings 1 time 20:40"]);
-			const next = ops2Tree(state.idMap, [], ops).tree.get(1)!;
+			const next = ops2Tree(state.idMap, new Set(), ops).tree.get(1)!;
 
 			expect(next.startTime).to.equal(20);
 			expect(next.endTime).to.equal(40);
@@ -120,7 +121,7 @@ describe("ops2Tree", () => {
 				"Remove 4",
 			]);
 
-			const next = ops2Tree(state.idMap, [], ops).tree;
+			const next = ops2Tree(state.idMap, new Set(), ops).tree;
 			const root = next.get(1)!;
 			const span = next.get(2)!;
 
@@ -142,7 +143,7 @@ describe("ops2Tree", () => {
 				"Remove 4",
 			]);
 
-			const next = ops2Tree(state.idMap, [], ops);
+			const next = ops2Tree(state.idMap, new Set(), ops);
 			expect(next.removals).to.deep.equal([3, 4]);
 		});
 
@@ -158,7 +159,7 @@ describe("ops2Tree", () => {
 				"Remove 2",
 			]);
 
-			const next = ops2Tree(state.idMap, [], ops);
+			const next = ops2Tree(state.idMap, new Set(), ops);
 			expect(Array.from(next.tree.keys())).to.deep.equal([1, 4]);
 		});
 	});
@@ -178,7 +179,7 @@ describe("ops2Tree", () => {
 				"Reorder 1 [3,2]",
 			]);
 
-			const next = ops2Tree(state.idMap, [], ops).tree;
+			const next = ops2Tree(state.idMap, new Set(), ops).tree;
 			expect(next.get(1)!.children).to.deep.equal([3, 2]);
 		});
 
@@ -192,8 +193,10 @@ describe("ops2Tree", () => {
 				"Update timings 1 time 20:40",
 			]);
 
-			expect(() => ops2Tree(new Map(), [], ops)).to.not.throw();
-			expect(ops2Tree(new Map(), [], ops).tree.get(1)!.startTime).to.equal(20);
+			expect(() => ops2Tree(new Map(), new Set(), ops)).to.not.throw();
+			expect(
+				ops2Tree(new Map(), new Set(), ops).tree.get(1)!.startTime,
+			).to.equal(20);
 		});
 	});
 });

src/adapter/protocol/operations.ts

@@ -1,4 +1,4 @@
-import { ID, Tree } from "../../view/store/types";
+import { DevNodeType, ID, Tree } from "../../view/store/types";
 import { parseTable } from "./string-table";
 import { MsgTypes } from "./events";
 import { deepClone } from "../../view/components/profiler/flamegraph/modes/adjustNodesToRight";
@@ -12,23 +12,39 @@ import { ParsedStats, parseStats } from "../shared/stats";
  *
  * We currently expect all operations to be in order.
  */
-export function ops2Tree(oldTree: Tree, existingRoots: ID[], ops: number[]) {
+export function ops2Tree(oldTree: Tree, existingRoots: Set<ID>, ops: number[]) {
 	const pending: Tree = new Map(oldTree);
 	const rootId = ops[0];
-	const roots: ID[] = [...existingRoots];
+	const roots = new Set(existingRoots);
 	const removals: ID[] = [];
 	const reasons: RenderReasonMap = new Map();
 	let stats: ParsedStats | null = null;
+	const rendered: ID[] = [];
 
 	let i = ops[1] + 1;
 	const strings = parseTable(ops.slice(1, i + 1));
 
 	for (i += 1; i < ops.length; i++) {
 		switch (ops[i]) {
-			case MsgTypes.ADD_ROOT:
-				roots.push(ops[i + 1]);
+			case MsgTypes.ADD_ROOT: {
+				const id = ops[i + 1];
+				roots.add(id);
 				i += 1;
+
+				pending.set(id, {
+					children: [],
+					depth: -1,
+					id,
+					hocs: null,
+					name: "__VIRTUAL__ROOT__",
+					parent: -1,
+					type: DevNodeType.Group,
+					key: "",
+					startTime: -1,
+					endTime: -1,
+				});
 				break;
+			}
 			case MsgTypes.ADD_VNODE: {
 				const id = ops[i + 1];
 				const parentId = ops[i + 3];
@@ -39,6 +55,8 @@ export function ops2Tree(oldTree: Tree, existingRoots: ID[], ops: number[]) {
 					clone.children.push(id);
 				}
 
+				rendered.push(id);
+
 				pending.set(id, {
 					children: [],
 					depth: parent ? parent.depth + 1 : 0,
@@ -61,6 +79,8 @@ export function ops2Tree(oldTree: Tree, existingRoots: ID[], ops: number[]) {
 				x.startTime = ops[i + 2] / 1000;
 				x.endTime = ops[i + 3] / 1000;
 
+				rendered.push(id);
+
 				i += 3;
 				break;
 			}
@@ -84,12 +104,6 @@ export function ops2Tree(oldTree: Tree, existingRoots: ID[], ops: number[]) {
 							}
 						}
 
-						// Check if node was a root
-						const rootIdx = roots.indexOf(node.id);
-						if (rootIdx > -1) {
-							roots.splice(rootIdx, 1);
-						}
-
 						// Delete children recursively
 						const stack = [node.id];
 						let item;
@@ -159,5 +173,5 @@ export function ops2Tree(oldTree: Tree, existingRoots: ID[], ops: number[]) {
 		}
 	}
 
-	return { rootId, roots, tree: pending, removals, reasons, stats };
+	return { rootId, roots, tree: pending, removals, reasons, stats, rendered };
 }

src/adapter/shared/renderer.test.tsx

@@ -77,7 +77,6 @@ describe("Renderer 10", () => {
 		expect(toSnapshot(spy.args[1][1])).to.deep.equal([
 			"rootId: 1",
 			"Update timings 1",
-			"Update timings 2",
 		]);
 	});
 
@@ -111,7 +110,6 @@ describe("Renderer 10", () => {
 			"rootId: 1",
 			"Add 3 <span> to parent 2",
 			"Update timings 1",
-			"Update timings 2",
 		]);
 	});
 
@@ -154,7 +152,6 @@ describe("Renderer 10", () => {
 		expect(toSnapshot(spy.args[1][1])).to.deep.equal([
 			"rootId: 1",
 			"Update timings 1",
-			"Update timings 2",
 		]);
 	});
 
@@ -177,9 +174,6 @@ describe("Renderer 10", () => {
 		expect(toSnapshot(spy.args[1][1])).to.deep.equal([
 			"rootId: 1",
 			"Update timings 1",
-			"Update timings 2",
-			"Update timings 4",
-			"Update timings 3",
 			"Reorder 2 [4, 3]",
 		]);
 	});
@@ -341,9 +335,8 @@ describe("Renderer 10", () => {
 			});
 
 			expect(toSnapshot(spy.args[1][1])).to.deep.equal([
-				"rootId: 2",
+				"rootId: 1",
 				"Update timings 2",
-				"Update timings 3",
 			]);
 		});
 
@@ -383,13 +376,12 @@ describe("Renderer 10", () => {
 
 			expect(toSnapshot(spy.args[2][1])).to.deep.equal([
 				"rootId: 3",
+				"Add 3 <Fragment> to parent -1",
 				"Add 4 <div> to parent 3",
 				"Add 5 <Foo> to parent 4",
 				"Add 6 <div> to parent 5",
 				"Add 7 <span> to parent 4",
 				"Add 8 <span> to parent 4",
-				"Remove 3", // TODO: Seems wrong
-				"Remove 3", // TODO: Seems wrong
 			]);
 		});
 
@@ -434,6 +426,7 @@ describe("Renderer 10", () => {
 			]);
 			expect(toSnapshot(spy.args[2][1])).to.deep.equal([
 				"rootId: 4",
+				"Add 4 <Fragment> to parent -1",
 				"Add 5 <div> to parent 4",
 				"Add 6 <Foo> to parent 5",
 				"Add 7 <div> to parent 6",
@@ -442,7 +435,6 @@ describe("Renderer 10", () => {
 				"Add 10 <div> to parent 9",
 				"Add 11 <span> to parent 5",
 				"Add 12 <span> to parent 5",
-				"Update timings 2",
 			]);
 
 			renderer.applyFilters({

src/adapter/shared/renderer.ts

@@ -21,6 +21,7 @@ import { PreactBindings, SharedVNode } from "../shared/bindings";
 import { inspectVNode } from "./inspectVNode";
 import { logVNode } from "../10/log";
 import { VNodeTimings } from "./timings";
+import { printCommit } from "../debug";
 
 export interface RendererConfig {
 	Fragment: FunctionalComponent;
@@ -69,7 +70,7 @@ export function createRenderer<T extends SharedVNode>(
 	bindings: PreactBindings<T>,
 	timings: VNodeTimings,
 ): Renderer<T> {
-	const roots = new Set<T>();
+	const roots = new Map<T, ID>();
 
 	let currentUnmounts: number[] = [];
 
@@ -96,9 +97,10 @@ export function createRenderer<T extends SharedVNode>(
 
 	return {
 		clear() {
-			roots.forEach(vnode => {
+			roots.forEach((id, vnode) => {
 				onUnmount(vnode);
 			});
+			roots.clear();
 		},
 
 		getVNodeById: id => getVNodeById(ids, id),
@@ -179,8 +181,7 @@ export function createRenderer<T extends SharedVNode>(
 			/** Queue events and flush in one go */
 			const queue: BaseEvent<any, any>[] = [];
 
-			roots.forEach(root => {
-				const rootId = getVNodeId(ids, root);
+			roots.forEach((rootId, root) => {
 				traverse(root, vnode => this.onUnmount(vnode), bindings);
 
 				const commit: Commit = {
@@ -258,6 +259,7 @@ export function createRenderer<T extends SharedVNode>(
 				profiler.pendingHighlightUpdates.clear();
 			}
 
+			printCommit(ev.data);
 			port.send(ev.type as any, ev.data);
 		},
 		onUnmount,