chore: Bump Preact version

package.json

@@ -37,7 +37,8 @@
 		"dev:serve": "vite test-e2e/fixtures --port 8100",
 		"run:chrome": "node tools/build.mjs --browser chrome --debug && mkdir -p ./profiles/chrome && node tools/run-chrome.js",
 		"run:firefox": "node tools/build.mjs --browser firefox --debug && mkdir -p ./profiles/firefox && web-ext run --source-dir ./dist/firefox-debug/ --start-url https://preactjs.com --firefox-profile=./profiles/firefox --keep-profile-changes",
-		"release": "node tools/release.js"
+		"release": "node tools/release.js",
+		"postinstall": "patch-package"
 	},
 	"repository": {
 		"type": "git",
@@ -79,8 +80,10 @@
 		"lint-staged": "^10.4.0",
 		"mochette": "^1.0.1",
 		"mri": "^1.2.0",
+		"patch-package": "^8.0.0",
 		"playwright-chromium": "^1.28.0",
-		"preact": "^10.10.6",
+		"postinstall-postinstall": "^2.1.0",
+		"preact": "^10.24.1",
 		"prettier": "^3.2.5",
 		"tar": "^6.1.11",
 		"ts-node": "^10.9.2",

patches/preact+10.24.1.patch

@@ -0,0 +1,16 @@
+diff --git a/node_modules/preact/src/internal.d.ts b/node_modules/preact/src/internal.d.ts
+index 60e8d63..96fc2db 100644
+--- a/node_modules/preact/src/internal.d.ts
++++ b/node_modules/preact/src/internal.d.ts
+@@ -1,6 +1,5 @@
+ import * as preact from './index';
+
+-declare global {
+ 	export enum HookType {
+ 		useState = 1,
+ 		useReducer = 2,
+@@ -191,4 +190,3 @@ declare global {
+ 		_id: string;
+ 		_defaultValue: any;
+ 	}
+-}

src/adapter/shared/serialize.test.tsx

@@ -78,11 +78,13 @@ describe("cleanProps", () => {
 	});
 
 	it("should filter out __source", () => {
+		// @ts-expect-error
 		const vnode = h("div", { __source: "foo", foo: 1 });
 		expect(cleanProps(vnode.props)).to.deep.equal({ foo: 1 });
 	});
 
 	it("should filter out __self", () => {
+		// @ts-expect-error
 		const vnode = h("div", { __self: "foo", foo: 1 });
 		expect(cleanProps(vnode.props)).to.deep.equal({ foo: 1 });
 	});

src/view/components/devtools.css

@@ -165,7 +165,7 @@
 	z-index: 2;
 }
 
-.icon-btn:not([disabled])[data-active] .icon-btn-inner,
+.icon-btn:not([disabled])[data-active="true"] .icon-btn-inner,
 .icon-btn:focus .icon-btn-inner,
 .icon-btn:not([disabled]):active .icon-btn-inner {
 	color: var(--color-selected-text);
@@ -184,7 +184,7 @@
 	z-index: -1;
 }
 
-.icon-btn:not([disabled])[data-active] .icon-btn-bg {
+.icon-btn:not([disabled])[data-active="true"] .icon-btn-bg {
 	display: block;
 	content: "";
 	position: absolute;
@@ -299,34 +299,34 @@
 	white-space: nowrap;
 }
 
-.tree-view:focus-within .tree-view-item[data-selected] {
+.tree-view:focus-within .tree-view-item[data-selected="true"] {
 	background: var(--color-selected-bg);
 	color: var(--color-selected-text);
 }
 
-.tree-view:focus-within .tree-view-item[data-selected] :global(.hoc-item) {
+.tree-view:focus-within .tree-view-item[data-selected="true"] :global(.hoc-item) {
 	background: var(--color-hoc-selected-bg);
 	color: var(--color-hoc-selected-text);
 }
 
-.tree-view:focus-within .tree-view-item[data-selected]::after {
+.tree-view:focus-within .tree-view-item[data-selected="true"]::after {
 	background: var(--color-selected-bg);
 }
 
-.tree-view .tree-view-item[data-selected]::after {
+.tree-view .tree-view-item[data-selected="true"]::after {
 	background: var(--color-selected-inactive-bg);
 }
 
-.tree-view-item[data-selected] {
+.tree-view-item[data-selected="true"] {
 	background: var(--color-selected-inactive-bg);
 	color: var(--color-selected-inactive-text);
 }
 
-.tree-view-item:not([data-selected]):hover {
+.tree-view-item:not([data-selected="true"]):hover {
 	background: var(--color-hover);
 }
 
-.tree-view-item:not([data-selected]):hover::after {
+.tree-view-item:not([data-selected="true"]):hover::after {
 	background: var(--color-hover);
 }
 
@@ -354,11 +354,11 @@
 	transition: transform 0.3s;
 }
 
-.tree-view-item[data-selected] .tree-view-collapse {
+.tree-view-item[data-selected="true"] .tree-view-collapse {
 	color: var(--color-toggle-selected);
 }
 
-[data-collapsed].tree-view-collapse svg {
+[data-collapsed="true"].tree-view-collapse svg {
 	transform: rotate(-90deg);
 }
 
@@ -389,29 +389,29 @@
 	color: var(--color-key-label);
 }
 
-.tree-view:not(:focus-within) [data-selected] .tree-view-key-label {
+.tree-view:not(:focus-within) [data-selected="true"] .tree-view-key-label {
 	color: var(--color-key-label-selected-no-focus);
 }
-.tree-view:focus-within [data-selected] .tree-view-key-label {
+.tree-view:focus-within [data-selected="true"] .tree-view-key-label {
 	color: var(--color-key-label-selected);
 }
 
 .tree-view-key {
 	color: var(--color-key-value);
 }
 
-.tree-view:not(:focus-within) [data-selected] .tree-view-key {
+.tree-view:not(:focus-within) [data-selected="true"] .tree-view-key {
 	color: var(--color-key-value-selected);
 }
-.tree-view:focus-within [data-selected] .tree-view-key {
+.tree-view:focus-within [data-selected="true"] .tree-view-key {
 	color: var(--color-key-value-selected-focus);
 }
 
 /* Marker */
 .mark {
 	background: var(--color-marker);
 }
-.mark[data-marked] {
+.mark[data-marked="true"] {
 	background: var(--color-marker-selected);
 }
 
@@ -452,7 +452,7 @@
 .rendered-at-item:hover {
 	background: var(--color-dim-bg);
 }
-.rendered-at-item[data-active] {
+.rendered-at-item[data-active="true"] {
 	color: var(--color-selected-text);
 	background: var(--color-selected-bg);
 }
@@ -704,7 +704,7 @@
 	margin-left: 0.1rem;
 }
 
-.commit-timeline-item[data-selected]::after {
+.commit-timeline-item[data-selected="true"]::after {
 	content: "";
 	height: 0.1875rem;
 	width: 100%;
@@ -1013,46 +1013,46 @@
 	background: var(--color-profiler-old);
 }
 
-.flamegraph-node[data-overflow] .flamegraph-text {
+.flamegraph-node[data-overflow="true"] .flamegraph-text {
 	display: none;
 }
 
-.flamegraph-node[data-visible] {
+.flamegraph-node[data-visible="true"] {
 	transition-property: all;
 }
-.flamegraph-node:not([data-visible]) {
+.flamegraph-node:not([data-visible="true"]) {
 	transition-property: opacity;
 	transition-duration: 0.2s;
 	opacity: 0;
 	pointer-events: none;
 }
-.flamegraph-node[data-visible]:not([data-maximized]) {
+.flamegraph-node[data-visible="true"]:not([data-maximized="true"]) {
 	opacity: 1;
 }
 
-.flamegraph-node[data-weight="-1"]:not([data-commit-parent]) {
+.flamegraph-node[data-weight="-1"]:not([data-commit-parent="true"]) {
 	color: var(--color-bystander-text);
 }
-.flamegraph-node[data-weight="-1"]:not([data-commit-parent])::after {
+.flamegraph-node[data-weight="-1"]:not([data-commit-parent="true"])::after {
 	/* inline-pattern */
 	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0IDQiPgo8ZGVmcz4KICA8cGF0dGVybgogICAgaWQ9ImRpYWdvbmFsLWhhdGNoIgogICAgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSIKICAgIHdpZHRoPSI0IgogICAgaGVpZ2h0PSI0IgogID4KICAgIDxwYXRoCiAgICAgIGQ9Ik0tMSwxIGwyLC0yCk0wLDQgbDQsLTQKTTMsNSBsMiwtMiIKc3Ryb2tlPSIjZGVkZWRlIgpzdHJva2Utd2lkdGg9IjEiCiAgICAvPgogIDwvcGF0dGVybj4KICA8L2RlZnM+CiAgPHJlY3QKICAgIHg9IjAiCiAgICB5PSIwIgogICAgd2lkdGg9IjQiCiAgICBoZWlnaHQ9IjQiCiAgICBmaWxsPSJ1cmwoI2RpYWdvbmFsLWhhdGNoKSIKICA+PC9yZWN0Pgo8L3N2Zz4=");
 	background-repeat: repeat;
 	background-color: transparent;
 	background-size: 0.25rem 0.25rem;
 }
 
-.flamegraph-node[data-weight="-1"]:not([data-commit-parent])
+.flamegraph-node[data-weight="-1"]:not([data-commit-parent="true"])
 	[data-testid="hoc-labels"]
 	> * {
 	background: var(--color-hoc-not-rendered);
 }
 
 :global(.dark)
-	.flamegraph-node[data-weight="-1"]:not([data-commit-parent])::after {
+	.flamegraph-node[data-weight="-1"]:not([data-commit-parent="true"])::after {
 	opacity: 0.5;
 }
 
-.flamegraph-node[data-maximized][data-visible]:not([data-selected]) {
+.flamegraph-node[data-maximized="true"][data-visible="true"]:not([data-selected="true"]) {
 	opacity: 0.5;
 }
 

src/view/components/elements/TreeBar.module.css

@@ -8,7 +8,7 @@
 	color: var(--color-text);
 }
 
-.btnIcon[data-active] {
+.btnIcon[data-active="true"] {
 	color: var(--color-button-active);
 	color: var(--color-button-active);
 }

src/view/components/profiler/components/CommitTimeline/CommitTimeline.tsx

@@ -54,7 +54,7 @@ function calcSize(
 							viewport - selOffset - (selected < count - 1 ? itemWidth / 2 : 0),
 							paneWidth - viewport,
 							// eslint-disable-next-line no-mixed-spaces-and-tabs
-					  )
+						)
 					: 0;
 
 			paneContainer.current.style.width = org;
@@ -93,7 +93,7 @@ export function CommitTimeline(props: CommitTimelineProps) {
 
 	useEffect(() => {
 		if (pane.current) {
-			const active = pane.current.querySelector("[data-selected]");
+			const active = pane.current.querySelector('[data-selected="true"]');
 			// JSDOM doesn't support scrollIntoView
 			if (active && active.scrollIntoView) active.scrollIntoView();
 		}

test-e2e/tests/inspect-select.test.ts

@@ -34,7 +34,7 @@ test("Should inspect during picking", async ({ page }) => {
 	// Should select new node in element tree
 	await page.click(target);
 	active = await devtools.locator(inspect).getAttribute("data-active");
-	expect(active).toEqual(null);
+	expect(active).toEqual("false");
 
 	// ...and display the newly inspected data
 	await expect(devtools.locator(prop)).toHaveCount(1);

test-e2e/tests/profiler/flamegraph/utils.ts

@@ -6,12 +6,12 @@ export async function getFlameNodes(page: Frame) {
 	return await page.$$eval(selector, els => {
 		return els.map(el => {
 			return {
-				maximized: el.hasAttribute("data-maximized"),
+				maximized: el.getAttribute("data-maximized") === "true",
 				name: el.getAttribute("data-name") || "",
 				hocs: Array.from(el.querySelectorAll(".hoc-item")).map(
 					el => el.textContent,
 				),
-				visible: el.hasAttribute("data-visible"),
+				visible: el.getAttribute("data-visible") === "true",
 			};
 		});
 	});

test-e2e/tests/profiler/rendered-at.test.ts

@@ -32,22 +32,24 @@ test("Show in which commit a node rendered", async ({ page }) => {
 		.evaluateAll(els =>
 			Array.from(els).map(el => el.getAttribute("data-selected")),
 		);
-	expect(commits).toEqual(["true", null, null, null]);
+	expect(commits).toEqual(["true", "false", "false", "false"]);
 
 	const btns = await devtools
 		.locator('[data-testid="rendered-at"] button')
 		.evaluateAll(els =>
 			Array.from(els).map(el => el.getAttribute("data-active")),
 		);
 
-	expect(btns).toEqual(["true", null]);
+	expect(btns).toEqual(["true", "false"]);
 
-	await devtools.click('[data-testid="rendered-at"] button:not([data-active])');
+	await devtools.click(
+		'[data-testid="rendered-at"] button:not([data-active="true"])',
+	);
 
 	commits = await devtools
 		.locator('[data-testid="commit-item"]')
 		.evaluateAll(els =>
 			Array.from(els).map(el => el.getAttribute("data-selected")),
 		);
-	expect(commits).toEqual([null, null, "true", null]);
+	expect(commits).toEqual(["false", "false", "true", "false"]);
 });

test-e2e/tests/sync-selection.test.ts

@@ -21,5 +21,7 @@ test("Sync selection from profiler", async ({ page }) => {
 	await devtools.click(locateFlame("Display"));
 
 	await devtools.click(locateTab("ELEMENTS"));
-	await devtools.locator('[data-selected]:has-text("Display")').waitFor();
+	await devtools
+		.locator('[data-selected="true"]:has-text("Display")')
+		.waitFor();
 });