feat: load preact/debug in dev by default

`preact/debug` is now imported by the client boot chunk — the first framework code any page with islands runs. It is a top-level `await`, so the import finishes before any island hydrates.

`import.meta.env.DEV` is `false` in a production build, so the import is dropped and `preact/debug` never ends up in the shipped bundle.

Author: lucacasonato

src/entrypoints/internal/client.ts

@@ -1,3 +1,18 @@
+// This module is the client boot chunk — the first framework code every page
+// with islands (or client navigation) evaluates. In dev we load
+// `preact/debug` here, so it is on by default without the user wiring up an
+// `entry.client.ts`. The `await` is what keeps the ordering: the inline boot
+// script's `import { boot } from <this chunk>` doesn't resolve until
+// `preact/debug` has been imported, so no island renders before it.
+//
+// `import.meta.env.DEV` is statically `false` in a production build, so the
+// import is dropped and `preact/debug` never ends up in the shipped bundle.
+// The `typeof` guard matches the rest of the client runtime — it keeps the
+// module evaluable outside a Vite pipeline (e.g. plain Vitest imports).
+if (typeof import.meta.env !== "undefined" && import.meta.env.DEV) {
+  await import("preact/debug");
+}
+
 export { signal } from "@preact/signals";
 export {
   boot,

tests/e2e/preact-debug.spec.ts

@@ -0,0 +1,16 @@
+import { expect, test } from "@playwright/test";
+
+// The dev server pulls in `preact/debug` from the client boot chunk, so
+// Preact's development warnings and the devtools bridge are on without the
+// app wiring up an `entry.client.ts`. (These tests run against `vite dev`.)
+test("preact/debug is loaded on a page with islands in dev", async ({ page }) => {
+  const requested: string[] = [];
+  page.on("request", (req) => requested.push(req.url()));
+
+  await page.goto("/islands");
+  // Hydration finishing means the boot chunk evaluated — including its
+  // top-level `await import("preact/debug")`.
+  await expect(page.locator("#counter")).toHaveAttribute("data-hydrated", "true");
+
+  expect(requested.some((url) => /preact[_/]debug/.test(url))).toBe(true);
+});