Merge pull request #353 from preactjs/placeholder-highlight

Fix highlight error if child is a placeholder

Author: marvinhagemeister

src/adapter/shared/traverse.ts

@@ -48,10 +48,13 @@ function updateHighlight<T extends SharedVNode>(
 	bindings: PreactBindings<T>,
 ) {
 	if (profiler.highlightUpdates && bindings.isComponent(vnode)) {
-		const stack: any[] = [vnode];
+		const stack: Array<T | null | undefined> = [vnode];
 		let item;
 		let dom;
 		while ((item = stack.shift()) !== undefined) {
+			// Account for placholders/holes
+			if (item === null) continue;
+
 			if (!bindings.isComponent(item)) {
 				dom = bindings.getDom(item);
 				break;

test-e2e/fixtures/apps/holes.jsx

@@ -0,0 +1,19 @@
+import { h, render } from "preact";
+import { useState } from "preact/hooks";
+
+function Foo(props) {
+	return props.children;
+}
+
+function App() {
+	const [v, set] = useState(0);
+
+	return (
+		<Foo>
+			{v % 2 === 0 && "Not a placeholder"}
+			<button onClick={() => set(v + 1)}>Increment</button>
+		</Foo>
+	);
+}
+
+render(<App />, document.getElementById("app"));

test-e2e/tests/profiler/highlight-updates-holes.test.ts

@@ -0,0 +1,26 @@
+import {
+	newTestPage,
+	click,
+	clickTab,
+	waitForSelector,
+} from "../../test-utils";
+import { expect } from "chai";
+import { clickSelector } from "pentf/browser_utils";
+
+export const description = "Check if highlight updates is rendered";
+
+export async function run(config: any) {
+	const { page, devtools } = await newTestPage(config, "holes");
+	await waitForSelector(page, "button");
+
+	await clickTab(devtools, "SETTINGS");
+	await click(devtools, '[data-testId="toggle-highlight-updates"]');
+
+	const errors: string[] = [];
+	page.on("pageerror", err => errors.push(err.toString()));
+
+	await clickSelector(page, "button");
+	await clickSelector(page, "button");
+
+	expect(errors).to.deep.equal([]);
+}