Merge branch 'dev' into markdalgleish/tree-shake-unused-route-exports

integration/helpers/vite.ts

@@ -3,7 +3,6 @@ import path from "node:path";
 import fs from "node:fs/promises";
 import type { Readable } from "node:stream";
 import url from "node:url";
-import execa from "execa";
 import fse from "fs-extra";
 import stripIndent from "strip-indent";
 import waitOn from "wait-on";
@@ -112,19 +111,6 @@ export async function createProject(files: Record<string, string> = {}) {
   return projectDir;
 }
 
-type ServerArgs = {
-  cwd: string;
-  port: number;
-};
-
-const createDev =
-  (nodeArgs: string[]) =>
-  async ({ cwd, port }: ServerArgs): Promise<() => Promise<void>> => {
-    let proc = node(nodeArgs, { cwd });
-    await waitForServer(proc, { port });
-    return async () => await kill(proc.pid!);
-  };
-
 export const viteBuild = ({ cwd }: { cwd: string }) => {
   let nodeBin = process.argv[0];
 
@@ -156,17 +142,37 @@ export const viteRemixServe = async ({
       env: { NODE_ENV: "production", PORT: port.toFixed(0) },
     }
   );
-
   await waitForServer(serveProc, { port });
+  return () => serveProc.kill();
+};
 
-  return () => {
-    serveProc.kill();
-  };
+type ServerArgs = {
+  cwd: string;
+  port: number;
 };
 
+const createDev =
+  (nodeArgs: string[]) =>
+  async ({ cwd, port }: ServerArgs): Promise<() => unknown> => {
+    let proc = node(nodeArgs, { cwd });
+    await waitForServer(proc, { port });
+    return () => proc.kill();
+  };
+
 export const viteDev = createDev([remixBin, "vite:dev"]);
 export const customDev = createDev(["./server.mjs"]);
 
+export const using = async (
+  cleanup: () => unknown | Promise<unknown>,
+  task: () => unknown | Promise<unknown>
+) => {
+  try {
+    await task();
+  } finally {
+    await cleanup();
+  }
+};
+
 function node(args: string[], options: { cwd: string }) {
   let nodeBin = process.argv[0];
 
@@ -178,36 +184,6 @@ function node(args: string[], options: { cwd: string }) {
   return proc;
 }
 
-async function kill(pid: number) {
-  if (!isAlive(pid)) return;
-
-  let isWindows = process.platform === "win32";
-  if (isWindows) {
-    await execa("taskkill", ["/F", "/PID", pid.toString()]).catch((error) => {
-      // taskkill 128 -> the process is already dead
-      if (error.exitCode === 128) return;
-      if (/There is no running instance of the task./.test(error.message))
-        return;
-      console.warn(error.message);
-    });
-    return;
-  }
-  await execa("kill", ["-9", pid.toString()]).catch((error) => {
-    // process is already dead
-    if (/No such process/.test(error.message)) return;
-    console.warn(error.message);
-  });
-}
-
-function isAlive(pid: number) {
-  try {
-    process.kill(pid, 0);
-    return true;
-  } catch (error) {
-    return false;
-  }
-}
-
 async function waitForServer(
   proc: ChildProcess & { stdout: Readable; stderr: Readable },
   args: { port: number }
@@ -221,7 +197,7 @@ async function waitForServer(
   }).catch((err) => {
     let stdout = devStdout();
     let stderr = devStderr();
-    kill(proc.pid!);
+    proc.kill();
     throw new Error(
       [
         err.message,

integration/package.json

@@ -35,6 +35,7 @@
     "tailwindcss": "^3.3.0",
     "type-fest": "^4.0.0",
     "typescript": "^5.1.0",
+    "vite-env-only": "^2.0.0",
     "vite-tsconfig-paths": "^4.2.2"
   }
 }

integration/vite-css-test.ts

@@ -133,7 +133,7 @@ test.describe(() => {
   test.describe(async () => {
     let port: number;
     let cwd: string;
-    let stop: () => Promise<void>;
+    let stop: () => void;
 
     test.beforeAll(async () => {
       port = await getPort();
@@ -143,7 +143,7 @@ test.describe(() => {
       });
       stop = await viteDev({ cwd, port });
     });
-    test.afterAll(async () => await stop());
+    test.afterAll(() => stop());
 
     test.describe(() => {
       test.use({ javaScriptEnabled: false });
@@ -164,7 +164,7 @@ test.describe(() => {
   test.describe(async () => {
     let port: number;
     let cwd: string;
-    let stop: () => Promise<void>;
+    let stop: () => void;
 
     test.beforeAll(async () => {
       port = await getPort();
@@ -175,7 +175,7 @@ test.describe(() => {
       });
       stop = await customDev({ cwd, port });
     });
-    test.afterAll(async () => await stop());
+    test.afterAll(() => stop());
 
     test.describe(() => {
       test.use({ javaScriptEnabled: false });
@@ -210,7 +210,7 @@ test.describe(() => {
         contents.replace('"sideEffects": false', '"sideEffects": ["*.css.ts"]')
       );
 
-      await viteBuild({ cwd });
+      viteBuild({ cwd });
       stop = await viteRemixServe({ cwd, port });
     });
     test.afterAll(() => stop());

integration/vite-dot-server-test.ts

@@ -1,8 +1,17 @@
 import * as path from "node:path";
 import { test, expect } from "@playwright/test";
 import stripAnsi from "strip-ansi";
+import getPort from "get-port";
 
-import { createProject, grep, viteBuild } from "./helpers/vite.js";
+import {
+  VITE_CONFIG,
+  createProject,
+  grep,
+  using,
+  viteBuild,
+  viteDev,
+  viteRemixServe,
+} from "./helpers/vite.js";
 
 let serverOnlyModule = String.raw`
   export const serverOnly = "SERVER_ONLY";
@@ -219,26 +228,66 @@ test.describe("Vite / non-route / server-only module referenced by client", () =
   }
 });
 
-test("Vite / `handle` with dynamic imports as an escape hatch for server-only code", async () => {
-  let cwd = await createProject({
-    "app/utils.server.ts": serverOnlyModule,
-    "app/.server/utils.ts": serverOnlyModule,
-    "app/routes/handle-server-only.tsx": String.raw`
+test.describe("Vite / server-only escape hatch", async () => {
+  let port: number;
+  let cwd: string;
+
+  test.beforeAll(async () => {
+    port = await getPort();
+    cwd = await createProject({
+      "vite.config.ts": await VITE_CONFIG({
+        port,
+        vitePlugins:
+          '(await import("vite-env-only")).default(), (await import("vite-tsconfig-paths")).default()',
+      }),
+      "app/utils.server.ts": serverOnlyModule,
+      "app/.server/utils.ts": serverOnlyModule,
+      "app/routes/_index.tsx": String.raw`
+      import { serverOnly$ } from "vite-env-only";
+
+      import { serverOnly as serverOnlyFile } from "~/utils.server";
+      import serverOnlyDir from "~/.server/utils";
+
       export const handle = {
-        escapeHatch: !import.meta.env.SSR ? undefined :
-          async () => {
-            let { serverOnly: serverOnlyFile } = await import("~/utils.server");
-            let serverOnlyDir = await import("~/.server/utils");
-            return { serverOnlyFile, serverOnlyDir };
-          }
+        escapeHatch: serverOnly$(async () => {
+          return { serverOnlyFile, serverOnlyDir };
+        })
       }
 
-      export default () => <h1>This should work</h1>;
+      export default () => <h1 data-title>This should work</h1>;
     `,
+    });
   });
-  let { status } = viteBuild({ cwd });
-  expect(status).toBe(0);
 
-  let lines = grep(path.join(cwd, "build/client"), /SERVER_ONLY/);
-  expect(lines).toHaveLength(0);
+  test("vite build + remix-serve", async ({ page }) => {
+    let { status } = viteBuild({ cwd });
+    expect(status).toBe(0);
+
+    let lines = grep(path.join(cwd, "build/client"), /SERVER_ONLY/);
+    expect(lines).toHaveLength(0);
+
+    await using(await viteRemixServe({ cwd, port }), async () => {
+      let pageErrors: Error[] = [];
+      page.on("pageerror", (error) => pageErrors.push(error));
+
+      await page.goto(`http://localhost:${port}/`, {
+        waitUntil: "networkidle",
+      });
+      await expect(page.locator("[data-title]")).toHaveText("This should work");
+      expect(pageErrors).toEqual([]);
+    });
+  });
+
+  test("vite dev", async ({ page }) => {
+    await using(await viteDev({ cwd, port }), async () => {
+      let pageErrors: Error[] = [];
+      page.on("pageerror", (error) => pageErrors.push(error));
+
+      await page.goto(`http://localhost:${port}/`, {
+        waitUntil: "networkidle",
+      });
+      await expect(page.locator("[data-title]")).toHaveText("This should work");
+      expect(pageErrors).toEqual([]);
+    });
+  });
 });

integration/vite-dotenv-test.ts

@@ -46,7 +46,7 @@ let files = {
 test.describe(async () => {
   let port: number;
   let cwd: string;
-  let stop: () => Promise<void>;
+  let stop: () => void;
 
   test.beforeAll(async () => {
     port = await getPort();
@@ -57,7 +57,7 @@ test.describe(async () => {
     });
     stop = await customDev({ cwd, port });
   });
-  test.afterAll(async () => await stop());
+  test.afterAll(() => stop());
 
   test("Vite / Load context / express", async ({ page }) => {
     let pageErrors: unknown[] = [];

integration/vite-hmr-hdr-test.ts

@@ -45,7 +45,7 @@ const files = {
 test.describe(async () => {
   let port: number;
   let cwd: string;
-  let stop: () => Promise<void>;
+  let stop: () => void;
 
   test.beforeAll(async () => {
     port = await getPort();
@@ -55,7 +55,7 @@ test.describe(async () => {
     });
     stop = await viteDev({ cwd, port });
   });
-  test.afterAll(async () => await stop());
+  test.afterAll(() => stop());
 
   test("Vite / HMR & HDR / vite dev", async ({ page, browserName }) => {
     await workflow({ page, browserName, cwd, port });
@@ -65,7 +65,7 @@ test.describe(async () => {
 test.describe(async () => {
   let port: number;
   let cwd: string;
-  let stop: () => Promise<void>;
+  let stop: () => void;
 
   test.beforeAll(async () => {
     port = await getPort();
@@ -76,7 +76,7 @@ test.describe(async () => {
     });
     stop = await customDev({ cwd, port });
   });
-  test.afterAll(async () => await stop());
+  test.afterAll(() => stop());
 
   test("Vite / HMR & HDR / express", async ({ page, browserName }) => {
     await workflow({ page, browserName, cwd, port });

integration/vite-loader-context-test.ts

@@ -10,7 +10,7 @@ import {
 
 let port: number;
 let cwd: string;
-let stop: () => Promise<void>;
+let stop: () => void;
 
 test.beforeAll(async () => {
   port = await getPort();
@@ -37,7 +37,7 @@ test.beforeAll(async () => {
   });
   stop = await customDev({ cwd, port });
 });
-test.afterAll(async () => await stop());
+test.afterAll(() => stop());
 
 test("Vite / Load context / express", async ({ page }) => {
   let pageErrors: Error[] = [];

integration/vite-manifest-invalidation-test.ts

@@ -44,7 +44,7 @@ const files = {
 test.describe(async () => {
   let port: number;
   let cwd: string;
-  let stop: () => Promise<void>;
+  let stop: () => void;
 
   test.beforeAll(async () => {
     port = await getPort();
@@ -54,7 +54,7 @@ test.describe(async () => {
     });
     stop = await viteDev({ cwd, port });
   });
-  test.afterAll(async () => await stop());
+  test.afterAll(() => stop());
 
   test("Vite / dev / invalidate manifest on route exports change", async ({
     page,

integration/vite-node-env-test.ts

@@ -20,7 +20,7 @@ let files = {
 test.describe(async () => {
   let devPort: number;
   let cwd: string;
-  let stop: () => Promise<void> | void;
+  let stop: () => void;
 
   test.beforeAll(async () => {
     devPort = await getPort();
@@ -34,7 +34,7 @@ test.describe(async () => {
     test.beforeAll(async () => {
       stop = await viteDev({ cwd, port: devPort });
     });
-    test.afterAll(async () => await stop());
+    test.afterAll(() => stop());
 
     test("Vite / NODE_ENV / dev", async ({ page }) => {
       let pageErrors: unknown[] = [];
@@ -55,11 +55,11 @@ test.describe(async () => {
   test.describe(() => {
     let buildPort: number;
     test.beforeAll(async () => {
-      await viteBuild({ cwd });
+      viteBuild({ cwd });
       buildPort = await getPort();
       stop = await viteRemixServe({ cwd, port: buildPort });
     });
-    test.afterAll(async () => await stop());
+    test.afterAll(() => stop());
 
     test("Vite / NODE_ENV / build", async ({ page }) => {
       let pageErrors: unknown[] = [];