Generate types for virtual:react-router/server-build (#13152)

Author: markdalgleish

.changeset/silver-peas-shop.md

@@ -0,0 +1,5 @@
+---
+"@react-router/dev": minor
+---
+
+Generate types for `virtual:react-router/server-build` module

integration/helpers/vite-plugin-cloudflare-template/workers/app.ts

@@ -14,7 +14,6 @@ declare module "react-router" {
 }
 
 const requestHandler = createRequestHandler(
-  // @ts-expect-error
   () => import("virtual:react-router/server-build"),
   import.meta.env.MODE
 );

integration/typegen-test.ts

@@ -444,4 +444,47 @@ test.describe("typegen", () => {
     expect(proc.stderr.toString()).toBe("");
     expect(proc.status).toBe(0);
   });
+
+  test.describe("virtual:react-router/server-build", async () => {
+    test("static import matches 'createRequestHandler' argument type", async () => {
+      const cwd = await createProject({
+        "vite.config.ts": viteConfig,
+        "app/routes.ts": tsx`
+          import { type RouteConfig } from "@react-router/dev/routes";
+          export default [] satisfies RouteConfig;
+        `,
+        "app/handler.ts": tsx`
+          import { createRequestHandler } from "react-router";
+          import * as serverBuild from "virtual:react-router/server-build";
+          export default createRequestHandler(serverBuild);
+        `,
+      });
+
+      const proc = typecheck(cwd);
+      expect(proc.stdout.toString()).toBe("");
+      expect(proc.stderr.toString()).toBe("");
+      expect(proc.status).toBe(0);
+    });
+
+    test("dynamic import matches 'createRequestHandler' function argument type", async () => {
+      const cwd = await createProject({
+        "vite.config.ts": viteConfig,
+        "app/routes.ts": tsx`
+          import { type RouteConfig } from "@react-router/dev/routes";
+          export default [] satisfies RouteConfig;
+        `,
+        "app/handler.ts": tsx`
+          import { createRequestHandler } from "react-router";
+          export default createRequestHandler(
+            () => import("virtual:react-router/server-build")
+          );
+        `,
+      });
+
+      const proc = typecheck(cwd);
+      expect(proc.stdout.toString()).toBe("");
+      expect(proc.stderr.toString()).toBe("");
+      expect(proc.status).toBe(0);
+    });
+  });
 });

packages/react-router-dev/typegen/index.ts

@@ -88,6 +88,9 @@ async function writeAll(ctx: Context): Promise<void> {
 
   const registerPath = Path.join(typegenDir, "+register.ts");
   fs.writeFileSync(registerPath, register(ctx));
+
+  const virtualPath = Path.join(typegenDir, "+virtual.ts");
+  fs.writeFileSync(virtualPath, virtual);
 }
 
 function register(ctx: Context) {
@@ -146,3 +149,20 @@ function register(ctx: Context) {
 
   return [register, Babel.generate(typeParams).code].join("\n\n");
 }
+
+const virtual = ts`
+  declare module "virtual:react-router/server-build" {
+    import { ServerBuild } from "react-router";
+    export const assets: ServerBuild["assets"];
+    export const assetsBuildDirectory: ServerBuild["assetsBuildDirectory"];
+    export const basename: ServerBuild["basename"];
+    export const entry: ServerBuild["entry"];
+    export const future: ServerBuild["future"];
+    export const isSpaMode: ServerBuild["isSpaMode"];
+    export const prerender: ServerBuild["prerender"];
+    export const publicPath: ServerBuild["publicPath"];
+    export const routes: ServerBuild["routes"];
+    export const ssr: ServerBuild["ssr"];
+    export const unstable_getCriticalCss: ServerBuild["unstable_getCriticalCss"];
+  }
+`;

packages/react-router-dev/vite/plugin.ts

@@ -771,7 +771,7 @@ export const reactRouterVitePlugin: ReactRouterVitePlugin = () => {
         ctx.reactRouterConfig.future.unstable_viteEnvironmentApi &&
         viteCommand === "serve"
           ? `
-              export const getCriticalCss = ({ pathname }) => {
+              export const unstable_getCriticalCss = ({ pathname }) => {
                 return {
                   rel: "stylesheet",
                   href: "${

packages/react-router/lib/server-runtime/build.ts

@@ -29,7 +29,7 @@ export interface ServerBuild {
   assetsBuildDirectory: string;
   future: FutureConfig;
   ssr: boolean;
-  getCriticalCss?: (args: {
+  unstable_getCriticalCss?: (args: {
     pathname: string;
   }) => OptionalCriticalCss | Promise<OptionalCriticalCss>;
   /**

packages/react-router/lib/server-runtime/server.ts

@@ -269,8 +269,8 @@ export const createRequestHandler: CreateRequestHandlerFunction = (
       let { pathname } = url;
 
       let criticalCss: CriticalCss | undefined = undefined;
-      if (_build.getCriticalCss) {
-        criticalCss = await _build.getCriticalCss({ pathname });
+      if (_build.unstable_getCriticalCss) {
+        criticalCss = await _build.unstable_getCriticalCss({ pathname });
       } else if (
         mode === ServerMode.Development &&
         getDevServerHooks()?.getCriticalCss

playground/vite-plugin-cloudflare/workers/app.ts

@@ -14,7 +14,6 @@ declare module "react-router" {
 }
 
 const requestHandler = createRequestHandler(
-  // @ts-expect-error
   () => import("virtual:react-router/server-build"),
   import.meta.env.MODE
 );