Merge branch 'main' into feat-lazy-import-glob-route

packages/react-server/src/entry/browser.tsx

@@ -174,7 +174,6 @@ export async function start() {
     reactDomClient.createRoot(document).render(reactRootEl);
   } else {
     reactDomClient.hydrateRoot(document, reactRootEl, {
-      // @ts-expect-error no type yet
       formState: initialLayout.action?.data,
     });
   }
@@ -189,7 +188,10 @@ export async function start() {
 }
 
 declare module "react-dom/client" {
-  // TODO: full document CSR works fine?
+  interface HydrationOptions {
+    formState?: unknown;
+  }
+
   interface DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_CREATE_ROOT_CONTAINERS {
     Document: Document;
   }

packages/react-server/src/entry/server.tsx

@@ -125,7 +125,6 @@ export async function renderHtml(
   let status = 200;
   try {
     ssrStream = await reactDomServer.renderToReadableStream(reactRootEl, {
-      // @ts-expect-error no type yet
       formState: result.actionResult?.data,
       bootstrapModules: url.search.includes("__nojs")
         ? []
@@ -233,3 +232,9 @@ async function getModuleNode(server: ViteDevServer, url: string, ssr: boolean) {
   const resolved = await server.moduleGraph.resolveUrl(url, ssr);
   return server.moduleGraph.getModuleById(resolved[1]);
 }
+
+declare module "react-dom/server" {
+  interface RenderToReadableStreamOptions {
+    formState?: unknown;
+  }
+}

packages/react-server/src/features/use-client/plugin.ts

@@ -41,7 +41,7 @@ export function vitePluginServerUseClient({
   // to actual client (browser, ssr) environment instead of faking out things on RSC module graph
 
   // intercept Vite's node resolve to virtualize "use client" in node_modules
-  const pluginUseClientNodeModules: Plugin = {
+  const useClientExternalPlugin: Plugin = {
     name: "server-virtual-use-client-node-modules",
     enforce: "pre", // "pre" to steal Vite's node resolve
     apply: "serve",
@@ -83,23 +83,27 @@ export function vitePluginServerUseClient({
         // node_modules is already transpiled so we can parse it right away
         const code = await fs.promises.readFile(meta.id, "utf-8");
         const ast = await parseAstAsync(code);
-        const exportNames = new Set(getExportNames(ast, {}).exportNames);
-        meta.exportNames = exportNames;
+        meta.exportNames = new Set(getExportNames(ast, {}).exportNames);
         // we need to transform to client reference directly
         // otherwise `soruce` will be resolved infinitely by recursion
         id = wrapId(id);
-        const result = generateClientReferenceCode(
+        const output = await transformDirectiveProxyExport(ast, {
+          directive: "use client",
           id,
-          exportNames,
-          runtimePath,
+          runtime: "$$proxy",
+        });
+        tinyassert(output);
+        output.prepend(
+          `import { registerClientReference as $$proxy } from "${runtimePath}";\n`,
         );
+        const result = output.toString();
         debug("[rsc.use-client-node-modules.load]", {
           source,
           meta,
           id,
           result,
         });
-        return result;
+        return output.toString();
       }
       return;
     },
@@ -117,8 +121,8 @@ export function vitePluginServerUseClient({
     }
   }
 
-  const pluginUseClientLocal: Plugin = {
-    name: "use-client-local",
+  const useClientPlugin: Plugin = {
+    name: vitePluginServerUseClient.name,
     async transform(code, id, _options) {
       manager.rscIds.add(id);
       manager.rscUseClientIds.delete(id);
@@ -169,23 +173,7 @@ export function vitePluginServerUseClient({
       },
     },
   };
-  return [pluginUseClientNodeModules, pluginUseClientLocal];
-}
-
-function generateClientReferenceCode(
-  id: string,
-  exportNames: Set<string>,
-  runtimePath: string,
-) {
-  let result = `import { registerClientReference as $$proxy } from "${runtimePath}";\n`;
-  for (const name of exportNames) {
-    if (name === "default") {
-      result += `export default $$proxy("${id}", "${name}");\n`;
-    } else {
-      result += `export const ${name} = $$proxy("${id}", "${name}");\n`;
-    }
-  }
-  return result;
+  return [useClientExternalPlugin, useClientPlugin];
 }
 
 // Apply same noramlizaion as Vite's dev import analysis