feat: enable bundled dev with Vite+ 1.4.0

.github/workflows/ci.yml

@@ -38,3 +38,6 @@ jobs:
 
       - name: Build
         run: vp run build
+
+      - name: Test dev server
+        run: vp run test:dev

apps/dashboard/vite.config.ts

@@ -5,6 +5,10 @@ import { defineConfig } from "vite-plus";
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [tailwindcss()],
+  experimental: {
+    // Vitest does not support bundled dev mode: https://github.com/vitest-dev/vitest/issues/11052
+    bundledDev: !process.env.VITEST,
+  },
   build: {
     rolldownOptions: {
       output: {

package.json

@@ -8,6 +8,7 @@
     "prepare": "vp config",
     "dev": "vp run @vibe/dashboard#dev",
     "build": "vp run @vibe/dashboard#build",
+    "test:dev": "playwright test",
     "deploy": "vp run build && void deploy --platform void --project vibe-dashboard --dir apps/dashboard/dist --spa",
     "generate": "node tools/override-vite.mjs --stats"
   },

playwright.config.ts

@@ -0,0 +1,23 @@
+import { defineConfig } from "playwright/test";
+
+const baseURL = "http://127.0.0.1:4173";
+
+export default defineConfig({
+  testDir: "./tests/dev",
+  outputDir: ".cache/playwright",
+  forbidOnly: true,
+  workers: 1,
+  reporter: "list",
+  use: {
+    browserName: "chromium",
+    baseURL,
+  },
+  webServer: {
+    command: "vp dev apps/dashboard --host 127.0.0.1 --port 4173 --strictPort",
+    url: baseURL,
+    reuseExistingServer: false,
+    timeout: 60_000,
+    stdout: "pipe",
+    env: { VITEST: "" },
+  },
+});

pnpm-workspace.yaml

@@ -19,8 +19,8 @@ catalog:
   tailwindcss: ^4.1.13
   top-github-dependents-by-stars: ^1.0.4
   typescript: ^7.0.0
-  vite-plus: 1.3.0
-  vite: npm:@voidzero-dev/vite-plus-core@1.3.0
+  vite-plus: 1.4.0
+  vite: npm:@voidzero-dev/vite-plus-core@1.4.0
   vitest: 5.0.5
   void: 1.1.11
   "@vitest/browser-playwright": 5.0.5

tests/dev/dashboard.spec.ts

@@ -0,0 +1,28 @@
+import { expect, test } from "playwright/test";
+
+test("vp dev renders the dashboard and lazy routes", async ({ page }) => {
+  const errors: string[] = [];
+  page.on("pageerror", (error) => errors.push(error.message));
+  page.on("console", (message) => {
+    if (message.type() === "error") errors.push(message.text());
+  });
+
+  const response = await page.goto("/");
+  expect(response?.ok()).toBe(true);
+  await expect(
+    page.getByRole("heading", { name: "VoidZero Dashboard", exact: true }),
+  ).toBeVisible();
+
+  await page
+    .getByRole("main")
+    .getByRole("link", { name: /Minification Benchmarks/ })
+    .click();
+  await expect(page).toHaveURL("/#/minification");
+  const heading = page.getByRole("heading", { name: "Minification Benchmarks", exact: true });
+  await expect(heading).toBeVisible();
+
+  const reloadResponse = await page.reload();
+  expect(reloadResponse?.ok()).toBe(true);
+  await expect(heading).toBeVisible();
+  expect(errors).toEqual([]);
+});