WIP

Author: marvinhagemeister

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/operations.test.ts

@@ -21,6 +21,7 @@ describe("ops2Tree", () => {
 				rootId: 1,
 				roots: [1],
 				removals: [],
+				rendered: [],
 				tree: new Map(),
 				reasons: new Map(),
 				stats: null,

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";
@@ -19,16 +19,32 @@ export function ops2Tree(oldTree: Tree, existingRoots: ID[], ops: number[]) {
 	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.push(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;
 			}
@@ -85,7 +105,7 @@ export function ops2Tree(oldTree: Tree, existingRoots: ID[], ops: number[]) {
 						}
 
 						// Check if node was a root
-						const rootIdx = roots.indexOf(node.id);
+						const rootIdx = roots.indexOf(node.parent);
 						if (rootIdx > -1) {
 							roots.splice(rootIdx, 1);
 						}
@@ -159,5 +179,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,