feat(remix-dev/vite): add buildDirectory and manifest options (#8575)

markdalgleish · web-flow · commit 6ce2250bb809 · 2024-01-22T12:37:03.000-05:00
diff --git a/integration/vite-adapter-test.ts b/integration/vite-adapter-test.ts
@@ -20,7 +20,7 @@ test.describe(async () => {
     return normalizePath(pathname).startsWith(normalizePath(cwd));
   }
 
-  function pathRelativeToCwd(pathname: string) {
+  function relativeToCwd(pathname: string) {
     return normalizePath(path.relative(cwd, pathname));
   }
 
@@ -57,35 +57,24 @@ test.describe(async () => {
     let { status } = viteBuild({ cwd });
     expect(status).toBe(0);
 
-    expect(
-      Object.keys(
-        JSON.parse(
-          fs.readFileSync(path.join(cwd, "build/server/bundles.json"), "utf8")
-        ).serverBundles
-      )
-    ).toEqual(["user-options--adapter-options"]);
-
     let buildEndArgs: any = JSON.parse(
       fs.readFileSync(path.join(cwd, "BUILD_END_ARGS.json"), "utf8")
     );
+    let { remixConfig } = buildEndArgs;
 
     // Before rewriting to relative paths, assert that paths are absolute within cwd
-    expect(pathStartsWithCwd(buildEndArgs.serverBuildDirectory)).toBe(true);
-    expect(pathStartsWithCwd(buildEndArgs.assetsBuildDirectory)).toBe(true);
+    expect(pathStartsWithCwd(remixConfig.buildDirectory)).toBe(true);
 
     // Rewrite path args to be relative and normalized for snapshot test
-    buildEndArgs.serverBuildDirectory = pathRelativeToCwd(
-      buildEndArgs.serverBuildDirectory
-    );
-    buildEndArgs.assetsBuildDirectory = pathRelativeToCwd(
-      buildEndArgs.assetsBuildDirectory
-    );
+    remixConfig.buildDirectory = relativeToCwd(remixConfig.buildDirectory);
 
     expect(buildEndArgs).toEqual({
-      assetsBuildDirectory: "build/client",
-      serverBuildDirectory: "build/server",
-      serverBuildFile: "index.js",
-      unstable_serverBundlesManifest: {
+      remixConfig: {
+        buildDirectory: "build",
+        serverBuildFile: "index.js",
+        unstable_ssr: true,
+      },
+      buildManifest: {
         routeIdToServerBundleId: {
           "routes/_index": "user-options--adapter-options",
         },
@@ -109,7 +98,6 @@ test.describe(async () => {
           },
         },
       },
-      unstable_ssr: true,
     });
   });
 });
diff --git a/integration/vite-build-manifest-test.ts b/integration/vite-build-manifest-test.ts
@@ -0,0 +1,95 @@
+import fs from "node:fs";
+import path from "node:path";
+import { test, expect } from "@playwright/test";
+import getPort from "get-port";
+
+import { createProject, viteBuild, VITE_CONFIG } from "./helpers/vite.js";
+
+function createRoute(path: string) {
+  return {
+    [`app/routes/${path}`]: `
+      export default function Route() {
+        return <p>Path: ${path}</p>;
+      }
+    `,
+  };
+}
+
+const TEST_ROUTES = [
+  "_index.tsx",
+  "parent-route.tsx",
+  "parent-route.child-route.tsx",
+];
+
+const files = {
+  "app/root.tsx": `
+    import { Links, Meta, Outlet, Scripts, LiveReload } from "@remix-run/react";
+
+    export default function Root() {
+      return (
+        <html lang="en">
+          <head>
+            <Meta />
+            <Links />
+          </head>
+          <body>
+            <Outlet />
+            <Scripts />
+            <LiveReload />
+          </body>
+        </html>
+      );
+    }
+  `,
+  ...Object.assign({}, ...TEST_ROUTES.map(createRoute)),
+};
+
+test.describe(() => {
+  let cwd: string;
+  let devPort: number;
+
+  test.beforeAll(async () => {
+    devPort = await getPort();
+    cwd = await createProject({
+      "vite.config.ts": await VITE_CONFIG({
+        port: devPort,
+        pluginOptions: "{ manifest: true }",
+      }),
+      ...files,
+    });
+
+    await viteBuild({ cwd });
+  });
+
+  test("Vite / build manifest", async () => {
+    expect(
+      JSON.parse(fs.readFileSync(path.join(cwd, "build/manifest.json"), "utf8"))
+    ).toEqual({
+      routes: {
+        root: {
+          file: "root.tsx",
+          id: "root",
+          path: "",
+        },
+        "routes/_index": {
+          file: "routes/_index.tsx",
+          id: "routes/_index",
+          index: true,
+          parentId: "root",
+        },
+        "routes/parent-route": {
+          file: "routes/parent-route.tsx",
+          id: "routes/parent-route",
+          parentId: "root",
+          path: "parent-route",
+        },
+        "routes/parent-route.child-route": {
+          file: "routes/parent-route.child-route.tsx",
+          id: "routes/parent-route.child-route",
+          parentId: "routes/parent-route",
+          path: "child-route",
+        },
+      },
+    });
+  });
+});
diff --git a/integration/vite-server-bundles-test.ts b/integration/vite-server-bundles-test.ts
@@ -28,7 +28,7 @@ function createRoute(path: string) {
   return {
     [`app/routes/${path}`]: `
       ${ROUTE_FILE_COMMENT}
-      import { Links, Meta, Outlet, Scripts, LiveReload } from "@remix-run/react";
+      import { Outlet } from "@remix-run/react";
       import { useState, useEffect } from "react";
 
       export default function Route() {
@@ -121,6 +121,7 @@ test.describe(() => {
       "vite.config.ts": await VITE_CONFIG({
         port: devPort,
         pluginOptions: `{
+          manifest: true,
           unstable_serverBundles: async ({ branch }) => {
             // Smoke test to ensure we can read the route files via 'route.file'
             await Promise.all(branch.map(async (route) => {
@@ -291,7 +292,7 @@ test.describe(() => {
     test("Vite / server bundles / build / manifest", async () => {
       expect(
         JSON.parse(
-          fs.readFileSync(path.join(cwd, "build/server/bundles.json"), "utf8")
+          fs.readFileSync(path.join(cwd, "build/manifest.json"), "utf8")
         )
       ).toEqual({
         serverBundles: {
diff --git a/packages/remix-dev/index.ts b/packages/remix-dev/index.ts
@@ -7,7 +7,7 @@ export * as cli from "./cli/index";
 export type { Manifest as AssetsManifest } from "./manifest";
 export { getDependenciesToBundle } from "./dependencies";
 export type {
-  Unstable_ServerBundlesManifest,
+  Unstable_BuildManifest,
   Unstable_VitePluginAdapter,
 } from "./vite";
 export { unstable_vitePlugin } from "./vite";
diff --git a/packages/remix-dev/vite/build.ts b/packages/remix-dev/vite/build.ts
@@ -6,8 +6,10 @@ import colors from "picocolors";
 import {
   type ResolvedVitePluginConfig,
   type ServerBundleBuildConfig,
-  type ServerBundlesManifest,
+  type BuildManifest,
+  type ServerBundlesBuildManifest,
   configRouteToBranchRoute,
+  getServerBuildDirectory,
 } from "./plugin";
 import type { ConfigRoute, RouteManifest } from "../config/routes";
 import invariant from "../invariant";
@@ -96,19 +98,24 @@ type RemixViteServerBuildArgs = {
 
 type RemixViteBuildArgs = RemixViteClientBuildArgs | RemixViteServerBuildArgs;
 
-async function getServerBuilds({
-  routes,
-  serverBuildDirectory,
-  serverBuildFile,
-  serverBundles,
-  rootDirectory,
-  appDirectory,
-}: ResolvedVitePluginConfig): Promise<{
+async function getServerBuilds(remixConfig: ResolvedVitePluginConfig): Promise<{
   serverBuilds: RemixViteServerBuildArgs[];
-  serverBundlesManifest?: ServerBundlesManifest;
+  buildManifest: BuildManifest;
 }> {
+  // eslint-disable-next-line prefer-let/prefer-let -- Improve type narrowing
+  const {
+    routes,
+    serverBuildFile,
+    serverBundles,
+    rootDirectory,
+    appDirectory,
+  } = remixConfig;
+  let serverBuildDirectory = getServerBuildDirectory(remixConfig);
   if (!serverBundles) {
-    return { serverBuilds: [{ ssr: true }] };
+    return {
+      serverBuilds: [{ ssr: true }],
+      buildManifest: { routes },
+    };
   }
 
   let { normalizePath } = await import("vite");
@@ -124,7 +131,7 @@ async function getServerBuilds({
     })
   );
 
-  let serverBundlesManifest: ServerBundlesManifest = {
+  let buildManifest: ServerBundlesBuildManifest = {
     serverBundles: {},
     routeIdToServerBundleId: {},
     routes: rootRelativeRoutes,
@@ -149,15 +156,15 @@ async function getServerBuilds({
           `The "unstable_serverBundles" function must return a string`
         );
       }
-      serverBundlesManifest.routeIdToServerBundleId[route.id] = serverBundleId;
+      buildManifest.routeIdToServerBundleId[route.id] = serverBundleId;
 
       let relativeServerBundleDirectory = path.relative(
         rootDirectory,
         path.join(serverBuildDirectory, serverBundleId)
       );
       let serverBuildConfig = serverBundleBuildConfigById.get(serverBundleId);
       if (!serverBuildConfig) {
-        serverBundlesManifest.serverBundles[serverBundleId] = {
+        buildManifest.serverBundles[serverBundleId] = {
           id: serverBundleId,
           file: normalizePath(
             path.join(relativeServerBundleDirectory, serverBuildFile)
@@ -187,16 +194,20 @@ async function getServerBuilds({
 
   return {
     serverBuilds,
-    serverBundlesManifest,
+    buildManifest,
   };
 }
 
 async function cleanServerBuildDirectory(
   viteConfig: Vite.ResolvedConfig,
-  { rootDirectory, serverBuildDirectory }: ResolvedVitePluginConfig
+  remixConfig: ResolvedVitePluginConfig
 ) {
+  let serverBuildDirectory = getServerBuildDirectory(remixConfig);
   let isWithinRoot = () => {
-    let relativePath = path.relative(rootDirectory, serverBuildDirectory);
+    let relativePath = path.relative(
+      remixConfig.rootDirectory,
+      serverBuildDirectory
+    );
     return !relativePath.startsWith("..") && !path.isAbsolute(relativePath);
   };
 
@@ -270,28 +281,26 @@ export async function build(
   await viteBuild({ ssr: false });
 
   // Then run Vite SSR builds in parallel
-  let { serverBuilds, serverBundlesManifest } = await getServerBuilds(
-    remixConfig
-  );
+  let { serverBuilds, buildManifest } = await getServerBuilds(remixConfig);
 
   await Promise.all(serverBuilds.map(viteBuild));
 
-  if (serverBundlesManifest) {
+  if (remixConfig.manifest) {
     await fse.writeFile(
-      path.join(remixConfig.serverBuildDirectory, "bundles.json"),
-      JSON.stringify(serverBundlesManifest, null, 2),
+      path.join(remixConfig.buildDirectory, "manifest.json"),
+      JSON.stringify(buildManifest, null, 2),
       "utf-8"
     );
   }
 
-  let { assetsBuildDirectory, serverBuildDirectory, serverBuildFile, ssr } =
-    remixConfig;
+  let { buildDirectory, serverBuildFile, ssr } = remixConfig;
 
   await remixConfig.adapter?.buildEnd?.({
-    assetsBuildDirectory,
-    serverBuildDirectory,
-    serverBuildFile,
-    unstable_serverBundlesManifest: serverBundlesManifest,
-    unstable_ssr: ssr,
+    buildManifest,
+    remixConfig: {
+      buildDirectory,
+      serverBuildFile,
+      unstable_ssr: ssr,
+    },
   });
 }
diff --git a/packages/remix-dev/vite/index.ts b/packages/remix-dev/vite/index.ts
@@ -3,7 +3,7 @@
 // be imported at the top level.
 import type { RemixVitePlugin } from "./plugin";
 export type {
-  ServerBundlesManifest as Unstable_ServerBundlesManifest,
+  BuildManifest as Unstable_BuildManifest,
   VitePluginAdapter as Unstable_VitePluginAdapter,
 } from "./plugin";
 
diff --git a/packages/remix-dev/vite/plugin.ts b/packages/remix-dev/vite/plugin.ts
