feat(rsc,transforms): rsc css transform for default export identifier

packages/rsc/examples/react-router/app/routes/home.tsx

@@ -13,7 +13,7 @@ export function loader({ request }: Route.LoaderArgs) {
   return { name: name || "Unknown" };
 }
 
-export function Component({ loaderData }: Route.ComponentProps) {
+const Component = ({ loaderData }: Route.ComponentProps) => {
   return (
     <main className="container my-8 px-8 mx-auto">
       <article className="paper prose max-w-none">
@@ -47,4 +47,6 @@ export function Component({ loaderData }: Route.ComponentProps) {
       </article>
     </main>
   );
-}
+};
+
+export default Component;

packages/rsc/src/plugin.ts

@@ -1266,7 +1266,11 @@ export function vitePluginRscCss(
     //   export function Page() {}
     //   export const Page = () => {}
     return (_name: string, meta) =>
-      !!(meta.isFunction && meta.declName && /^[A-Z]/.test(meta.declName));
+      !!(
+        (meta.isFunction && meta.declName && /^[A-Z]/.test(meta.declName)) ||
+        (meta.defaultExportIdentifierName &&
+          /^[A-Z]/.test(meta.defaultExportIdentifierName))
+      );
   }
 
   return [
@@ -1530,8 +1534,8 @@ export async function transformRscCssExport(options: {
   }
 
   const result = transformWrapExport(options.code, options.ast, {
-    runtime: (value, name) =>
-      `__vite_rsc_wrap_css__(${value}, ${JSON.stringify(name)})`,
+    runtime: (value, name, meta) =>
+      `__vite_rsc_wrap_css__(${value}, ${JSON.stringify(meta.defaultExportIdentifierName ?? name)})`,
     filter: options.filter,
     ignoreExportAllDeclaration: true,
   });
@@ -1541,6 +1545,8 @@ export async function transformRscCssExport(options: {
     }
     result.output.append(`
 function __vite_rsc_wrap_css__(value, name) {
+  if (typeof value !== 'function') return value;
+
   function __wrapper(props) {
     return __vite_rsc_react__.createElement(
       __vite_rsc_react__.Fragment,

packages/transforms/src/wrap-export.test.ts

@@ -251,4 +251,24 @@ export default () => {}
       "
     `);
   });
+
+  test("filter defaultExportIdentifierName", async () => {
+    const input = `
+const Page = () => {}
+export default Page;
+`;
+    expect(
+      await testTransform(input, {
+        filter: (_name, meta) => meta.defaultExportIdentifierName === "Page",
+      }),
+    ).toMatchInlineSnapshot(`
+      "
+      const Page = () => {}
+      const $$default = Page;
+      ;
+      const $$wrap_$$default = /* #__PURE__ */ $$wrap($$default, "<id>", "default");
+      export { $$wrap_$$default as default };
+      "
+    `);
+  });
 });

packages/transforms/src/wrap-export.ts

@@ -3,7 +3,11 @@ import type { Node, Program } from "estree";
 import MagicString from "magic-string";
 import { extract_names } from "periscopic";
 
-type ExportMeta = { declName?: string; isFunction?: boolean };
+type ExportMeta = {
+  declName?: string;
+  isFunction?: boolean;
+  defaultExportIdentifierName?: string;
+};
 
 export type TransformWrapExportFilter = (
   name: string,
@@ -14,7 +18,7 @@ export function transformWrapExport(
   input: string,
   ast: Program,
   options: {
-    runtime: (value: string, name: string) => string;
+    runtime: (value: string, name: string, meta: ExportMeta) => string;
     ignoreExportAllDeclaration?: boolean;
     rejectNonAsyncFunction?: boolean;
     filter?: TransformWrapExportFilter;
@@ -45,7 +49,7 @@ export function transformWrapExport(
     const newCode = exports
       .map((e) => [
         filter(e.name, e.meta) &&
-          `${e.name} = /* #__PURE__ */ ${options.runtime(e.name, e.name)};\n`,
+          `${e.name} = /* #__PURE__ */ ${options.runtime(e.name, e.name, e.meta)};\n`,
         `export { ${e.name} };\n`,
       ])
       .flat()
@@ -62,7 +66,7 @@ export function transformWrapExport(
     }
 
     toAppend.push(
-      `const $$wrap_${name} = /* #__PURE__ */ ${options.runtime(name, exportName)}`,
+      `const $$wrap_${name} = /* #__PURE__ */ ${options.runtime(name, exportName, meta)}`,
       `export { $$wrap_${name} as ${exportName} }`,
     );
   }
@@ -198,6 +202,7 @@ export function transformWrapExport(
       let localName: string;
       let isFunction = false;
       let declName: string | undefined;
+      let defaultExportIdentifierName: string | undefined;
       if (
         (node.declaration.type === "FunctionDeclaration" ||
           node.declaration.type === "ClassDeclaration") &&
@@ -212,8 +217,15 @@ export function transformWrapExport(
         // otherwise we can introduce new variable
         localName = "$$default";
         output.update(node.start, node.declaration.start, "const $$default = ");
+        if (node.declaration.type === "Identifier") {
+          defaultExportIdentifierName = node.declaration.name;
+        }
       }
-      wrapExport(localName, "default", { isFunction, declName });
+      wrapExport(localName, "default", {
+        isFunction,
+        declName,
+        defaultExportIdentifierName,
+      });
     }
   }