Typegen server-first routes in RSC Framework Mode (#14309)

Author: markdalgleish

integration/typegen-test.ts

@@ -247,13 +247,22 @@ export async function typegen(
 ) {
   root = resolveRootDirectory(root, flags);
 
+  const rsc = await hasReactRouterRscPlugin({
+    root,
+    viteBuildOptions: {
+      config: flags.config,
+      mode: flags.mode,
+    },
+  });
+
   if (flags.watch) {
     await preloadVite();
     const vite = getVite();
     const logger = vite.createLogger("info", { prefix: "[react-router]" });
 
     await Typegen.watch(root, {
       mode: flags.mode ?? "development",
+      rsc,
       logger,
     });
     await new Promise(() => {}); // keep alive
@@ -262,5 +271,6 @@ export async function typegen(
 
   await Typegen.run(root, {
     mode: flags.mode ?? "production",
+    rsc,
   });
 }

packages/react-router-dev/cli/commands.ts

@@ -8,16 +8,19 @@ export type Context = {
   rootDirectory: string;
   configLoader: ConfigLoader;
   config: ResolvedReactRouterConfig;
+  rsc: boolean;
 };
 
 export async function createContext({
   rootDirectory,
   watch,
   mode,
+  rsc,
 }: {
   rootDirectory: string;
   watch: boolean;
   mode: string;
+  rsc: boolean;
 }): Promise<Context> {
   const configLoader = await createConfigLoader({ rootDirectory, mode, watch });
   const configResult = await configLoader.getConfig();
@@ -32,5 +35,6 @@ export async function createContext({
     configLoader,
     rootDirectory,
     config,
+    rsc,
   };
 }

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

@@ -274,7 +274,7 @@ function getRouteAnnotations({
     Babel.generate(matchesType).code +
     "\n\n" +
     ts`
-      type Annotations = GetAnnotations<Info & { module: Module, matches: Matches }>;
+      type Annotations = GetAnnotations<Info & { module: Module, matches: Matches }, ${ctx.rsc}>;
 
       export namespace Route {
         // links

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

@@ -29,8 +29,11 @@ async function write(...files: Array<VirtualFile>) {
   );
 }
 
-export async function run(rootDirectory: string, { mode }: { mode: string }) {
-  const ctx = await createContext({ rootDirectory, mode, watch: false });
+export async function run(
+  rootDirectory: string,
+  { mode, rsc }: { mode: string; rsc: boolean },
+) {
+  const ctx = await createContext({ rootDirectory, mode, rsc, watch: false });
   await fs.rm(typesDirectory(ctx), { recursive: true, force: true });
   await write(
     generateFuture(ctx),
@@ -45,9 +48,9 @@ export type Watcher = {
 
 export async function watch(
   rootDirectory: string,
-  { mode, logger }: { mode: string; logger?: vite.Logger },
+  { mode, logger, rsc }: { mode: string; logger?: vite.Logger; rsc: boolean },
 ): Promise<Watcher> {
-  const ctx = await createContext({ rootDirectory, mode, watch: true });
+  const ctx = await createContext({ rootDirectory, mode, rsc, watch: true });
   await fs.rm(typesDirectory(ctx), { recursive: true, force: true });
   await write(
     generateFuture(ctx),

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

@@ -1197,6 +1197,7 @@ export const reactRouterVitePlugin: ReactRouterVitePlugin = () => {
         if (viteCommand === "serve") {
           typegenWatcherPromise = Typegen.watch(rootDirectory, {
             mode,
+            rsc: false,
             // ignore `info` logs from typegen since they are redundant when Vite plugin logs are active
             logger: vite.createLogger("warn", { prefix: "[react-router]" }),
           });

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

@@ -267,6 +267,7 @@ export function reactRouterRSCVitePlugin(): Vite.PluginOption[] {
             getRootDirectory(viteUserConfig),
             {
               mode,
+              rsc: true,
               // ignore `info` logs from typegen since they are
               // redundant when Vite plugin logs are active
               logger: vite.createLogger("warn", {

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

@@ -120,11 +120,33 @@ type CreateClientActionArgs<T extends RouteInfo> = ClientDataFunctionArgs<
   serverAction: () => Promise<ServerDataFrom<T["module"]["action"]>>;
 };
 
-type CreateHydrateFallbackProps<T extends RouteInfo> = {
+type IsServerFirstRoute<
+  T extends RouteInfo,
+  RSCEnabled extends boolean,
+> = RSCEnabled extends true
+  ? T["module"] extends { ServerComponent: Func }
+    ? true
+    : false
+  : false;
+
+type CreateHydrateFallbackProps<
+  T extends RouteInfo,
+  RSCEnabled extends boolean,
+> = {
   params: T["params"];
-  loaderData?: T["loaderData"];
-  actionData?: T["actionData"];
-};
+} & (IsServerFirstRoute<T, RSCEnabled> extends true
+  ? {
+      /** The data returned from the `loader` */
+      loaderData?: ServerDataFrom<T["module"]["loader"]>;
+      /** The data returned from the `action` following an action submission. */
+      actionData?: ServerDataFrom<T["module"]["action"]>;
+    }
+  : {
+      /** The data returned from the `loader` or `clientLoader` */
+      loaderData?: T["loaderData"];
+      /** The data returned from the `action` or `clientAction` following an action submission. */
+      actionData?: T["actionData"];
+    });
 
 type Match<T extends MatchInfo> = Pretty<{
   id: T["id"];
@@ -142,7 +164,7 @@ type Matches<T extends Array<MatchInfo>> =
     ? [Match<F>, ...Matches<R>]
     : Array<Match<MatchInfo> | undefined>;
 
-type CreateComponentProps<T extends RouteInfo> = {
+type CreateComponentProps<T extends RouteInfo, RSCEnabled extends boolean> = {
   /**
    * {@link https://reactrouter.com/start/framework/routing#dynamic-segments Dynamic route params} for the current route.
    * @example
@@ -158,15 +180,26 @@ type CreateComponentProps<T extends RouteInfo> = {
    * }
    **/
   params: T["params"];
-  /** The data returned from the `loader` or `clientLoader` */
-  loaderData: T["loaderData"];
-  /** The data returned from the `action` or `clientAction` following an action submission. */
-  actionData?: T["actionData"];
   /** An array of the current {@link https://api.reactrouter.com/v7/interfaces/react_router.UIMatch.html route matches}, including parent route matches. */
   matches: Matches<T["matches"]>;
-};
-
-type CreateErrorBoundaryProps<T extends RouteInfo> = {
+} & (IsServerFirstRoute<T, RSCEnabled> extends true
+  ? {
+      /** The data returned from the `loader` */
+      loaderData: ServerDataFrom<T["module"]["loader"]>;
+      /** The data returned from the `action` following an action submission. */
+      actionData?: ServerDataFrom<T["module"]["action"]>;
+    }
+  : {
+      /** The data returned from the `loader` or `clientLoader` */
+      loaderData: T["loaderData"];
+      /** The data returned from the `action` or `clientAction` following an action submission. */
+      actionData?: T["actionData"];
+    });
+
+type CreateErrorBoundaryProps<
+  T extends RouteInfo,
+  RSCEnabled extends boolean,
+> = {
   /**
    * {@link https://reactrouter.com/start/framework/routing#dynamic-segments Dynamic route params} for the current route.
    * @example
@@ -183,11 +216,24 @@ type CreateErrorBoundaryProps<T extends RouteInfo> = {
    **/
   params: T["params"];
   error: unknown;
-  loaderData?: T["loaderData"];
-  actionData?: T["actionData"];
-};
-
-export type GetAnnotations<Info extends RouteInfo> = {
+} & (IsServerFirstRoute<T, RSCEnabled> extends true
+  ? {
+      /** The data returned from the `loader` */
+      loaderData?: ServerDataFrom<T["module"]["loader"]>;
+      /** The data returned from the `action` following an action submission. */
+      actionData?: ServerDataFrom<T["module"]["action"]>;
+    }
+  : {
+      /** The data returned from the `loader` or `clientLoader` */
+      loaderData?: T["loaderData"];
+      /** The data returned from the `action` or `clientAction` following an action submission. */
+      actionData?: T["actionData"];
+    });
+
+export type GetAnnotations<
+  Info extends RouteInfo,
+  RSCEnabled extends boolean,
+> = {
   // links
   LinkDescriptors: LinkDescriptor[];
   LinksFunction: () => LinkDescriptor[];
@@ -220,13 +266,13 @@ export type GetAnnotations<Info extends RouteInfo> = {
   ClientActionArgs: CreateClientActionArgs<Info>;
 
   // HydrateFallback
-  HydrateFallbackProps: CreateHydrateFallbackProps<Info>;
+  HydrateFallbackProps: CreateHydrateFallbackProps<Info, RSCEnabled>;
 
   // default (Component)
-  ComponentProps: CreateComponentProps<Info>;
+  ComponentProps: CreateComponentProps<Info, RSCEnabled>;
 
   // ErrorBoundary
-  ErrorBoundaryProps: CreateErrorBoundaryProps<Info>;
+  ErrorBoundaryProps: CreateErrorBoundaryProps<Info, RSCEnabled>;
 };
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars