Merge pull request #417 from preactjs/root-order

Author: marvinhagemeister

src/adapter/10/options.ts

@@ -7,6 +7,8 @@ import {
 	getStatefulHooks,
 	getStatefulHookValue,
 	getComponent,
+	isRoot,
+	getActualChildren,
 } from "./bindings";
 import {
 	addDebugValue,
@@ -42,6 +44,7 @@ function trackPrevState(Ctor: ComponentConstructor) {
 export function setupOptionsV10(
 	options: Options,
 	renderer: Renderer,
+	roots: Map<VNode, Node>,
 	config: RendererConfig,
 ) {
 	// Track component state. Only supported in Preact > 10.4.0
@@ -58,6 +61,7 @@ export function setupOptionsV10(
 	// Store (possible) previous hooks so that we don't overwrite them
 	const prevVNodeHook = options.vnode;
 	const prevCommitRoot = o._commit || o.__c;
+	const prevRoot = o._root || o.__;
 	const prevBeforeUnmount = options.unmount;
 	const prevBeforeDiff = o._diff || o.__b;
 	const prevRender = o._render || o.__r;
@@ -164,18 +168,44 @@ export function setupOptionsV10(
 		if (prevAfterDiff) prevAfterDiff(vnode);
 	};
 
+	const userRootToContainer = new Map<VNode, Node>();
 	o._commit = o.__c = (vnode: VNode | null, queue: any[]) => {
 		if (prevCommitRoot) prevCommitRoot(vnode, queue);
 
 		// These cases are already handled by `unmount`
 		if (vnode == null) return;
+		if (isRoot(vnode, config)) {
+			const children = getActualChildren(vnode);
+			if (children.length > 0) {
+				const dom = userRootToContainer.get(children[0] as any);
+				if (dom) {
+					roots.set(vnode, dom);
+				}
+			}
+		}
 
 		const tmpTimings = timings;
 		ownerStack = [];
 		timings = createVNodeTimings();
 		renderer.onCommit(vnode, owners, tmpTimings, null);
 	};
 
+	o._root = o.__ = (vnode: VNode, parent: Node | null) => {
+		if (parent === null) {
+			userRootToContainer.delete(vnode);
+		} else {
+			// Some islands based frameworks use a virtual container node
+			// instead of an actual DOM node.
+			const treeParent =
+				"Node" in globalThis && parent instanceof Node
+					? parent
+					: (parent as any).parentNode;
+			userRootToContainer.set(vnode, treeParent);
+		}
+
+		if (prevRoot) prevRoot(vnode, parent);
+	};
+
 	options.unmount = vnode => {
 		if (prevBeforeUnmount) prevBeforeUnmount(vnode);
 		if (vnode.type !== null) {

src/adapter/11/options.ts

@@ -90,6 +90,7 @@ function trackPrevState(Ctor: any) {
 export function setupOptionsV11(
 	options: OptionsV11,
 	renderer: Renderer,
+	roots: Map<any, Node>,
 	config: RendererConfig,
 	profiler: ProfilerState,
 ) {

src/adapter/adapter/adapter.ts

@@ -9,6 +9,7 @@ import { PortPageHook } from "./port";
 import { PropData } from "../../view/components/sidebar/inspect/parseProps";
 import { PROFILE_RELOAD, STATS_RELOAD } from "../../constants";
 import { ProfilerState } from "./profiler";
+import { RootData, sortRoots } from "../shared/utils";
 
 export type Path = Array<string | number>;
 
@@ -44,7 +45,7 @@ export function createAdapter(
 	profiler: ProfilerState,
 	renderers: Map<number, Renderer>,
 ) {
-	const { listen, send } = port;
+	const { listen, send, listenToPage } = port;
 
 	const forAll = (fn: (renderer: Renderer) => void) => {
 		for (const r of renderers.values()) {
@@ -131,6 +132,17 @@ export function createAdapter(
 		inspect(id);
 	};
 
+	listenToPage("root-order-page", () => {
+		let roots: RootData[] = [];
+		renderers.forEach(r => {
+			const m = r.getRootMappings();
+			roots = roots.concat(m);
+		});
+
+		const sorted = sortRoots(document.body, roots);
+		send("root-order", sorted);
+	});
+
 	listen("update-prop", data => update({ ...data, type: "props" }));
 	listen("update-state", data => update({ ...data, type: "state" }));
 	listen("update-context", data => update({ ...data, type: "context" }));

src/adapter/adapter/port.ts

@@ -18,6 +18,18 @@ export function listenToDevtools<
 	});
 }
 
+export function listenToPageHook<
+	K extends keyof DevtoolEvents,
+	T extends DevtoolEvents[K]
+>(ctx: Window, type: K, callback: (message: T) => void) {
+	ctx.addEventListener("message", e => {
+		if (e.source === window && e.data.source === PageHookName) {
+			const data = e.data;
+			if (data.type === type) callback(data.data);
+		}
+	});
+}
+
 export function sendToDevtools<K extends keyof DevtoolEvents>(
 	ctx: Window,
 	type: K,
@@ -46,11 +58,16 @@ export interface PortPageHook {
 		type: K,
 		callback: (data: T) => void,
 	) => void;
+	listenToPage: <K extends keyof DevtoolEvents, T extends DevtoolEvents[K]>(
+		type: K,
+		callback: (data: T) => void,
+	) => void;
 }
 
 export function createPortForHook(ctx: Window): PortPageHook {
 	return {
 		send: (type, message) => sendToDevtools(ctx, type, message),
 		listen: (type, callback) => listenToDevtools(ctx, type, callback),
+		listenToPage: (type, callback) => listenToPageHook(ctx, type, callback),
 	};
 }

src/adapter/hook.ts

@@ -58,6 +58,10 @@ export interface DevtoolEvents {
 	refresh: null;
 	disconnect: null;
 	suspend: { id: ID; active: boolean };
+	"root-order-page": null;
+	"root-order": number[];
+	operation: number[];
+	operation_v2: number[];
 }
 export type EmitFn = <K extends keyof DevtoolEvents>(
 	name: K,
@@ -206,6 +210,8 @@ export function createHook(port: PortPageHook): DevtoolsHook {
 			// multiple connected renderers
 			const namespace = Math.floor(Math.random() * 2 ** 32);
 
+			const roots = new Map<any, Node>();
+
 			// currently we only support preact >= 10, later we can add another branch for major === 8
 			if (preactVersionMatch.major == 10) {
 				const supports = {
@@ -230,8 +236,9 @@ export function createHook(port: PortPageHook): DevtoolsHook {
 					filters,
 					idMapper,
 					bindingsV10,
+					roots,
 				);
-				setupOptionsV10(options, renderer, config as any);
+				setupOptionsV10(options, renderer, roots, config as any);
 				return attachRenderer(renderer, supports);
 			} else if (preactVersionMatch.major === 11) {
 				const idMapper = createIdMappingState(
@@ -248,8 +255,9 @@ export function createHook(port: PortPageHook): DevtoolsHook {
 					filters,
 					idMapper,
 					bindingsV11,
+					roots,
 				);
-				setupOptionsV11(options as any, renderer, config, profiler);
+				setupOptionsV11(options as any, renderer, roots, config, profiler);
 				return attachRenderer(renderer, {
 					hooks: true,
 					renderReasons: true,

src/adapter/protocol/events.ts

@@ -5,6 +5,7 @@ import { recordProfilerCommit } from "../../view/components/profiler/data/commit
 import { ops2Tree } from "./operations";
 import { applyOperationsV1 } from "./legacy/operationsV1";
 import { OperationInfo, Stats, stats2ops } from "../shared/stats";
+import { DevtoolEvents } from "../hook";
 
 export enum MsgTypes {
 	ADD_ROOT = 1,
@@ -192,7 +193,7 @@ export function applyOperationsV2(store: Store, data: number[]) {
 	}
 }
 
-export function applyEvent(store: Store, type: string, data: any) {
+export function applyEvent(store: Store, type: keyof DevtoolEvents, data: any) {
 	switch (type) {
 		case "attach":
 			if (!store.profiler.isSupported.value) {
@@ -238,5 +239,19 @@ export function applyEvent(store: Store, type: string, data: any) {
 		case "stop-picker":
 			store.isPicking.value = false;
 			break;
+		case "root-order": {
+			const oldRoots = store.roots.value;
+			const newOrder = new Set(data);
+
+			for (let i = 0; i < oldRoots.length; i++) {
+				const id = oldRoots[i];
+				if (!newOrder.has(id)) {
+					data.push(id);
+				}
+			}
+
+			store.roots.value = data;
+			break;
+		}
 	}
 }

src/adapter/renderer.ts

@@ -4,6 +4,7 @@ import { InspectData, UpdateType } from "./adapter/adapter";
 import { SharedVNode } from "./shared/bindings";
 import { VNodeTimings } from "./shared/timings";
 import { RenderReasonData } from "./shared/renderReasons";
+import { RootData } from "./shared/utils";
 
 export type ObjPath = Array<string | number>;
 
@@ -31,6 +32,9 @@ export interface Renderer<T extends SharedVNode = SharedVNode> {
 
 	// Component actions
 	suspend?(id: ID, active: boolean): void; // V4
+
+	// Get a list of root node mappings
+	getRootMappings(): RootData[];
 }
 
 export function getRendererByVNodeId(