refactor(rsc): add transformModuleExportWrap and deprecate transformWrapExport

packages/plugin-rsc/examples/use-cache-callable/callable-cache-plugin.ts

@@ -3,7 +3,7 @@ import {
   hasDirective,
   transformDirectiveProxyExport,
   transformHoistInlineDirective,
-  transformWrapExport,
+  transformModuleExportWrap,
 } from '@vitejs/plugin-rsc/transforms'
 import { parseAstAsync, type Plugin } from 'vite'
 
@@ -29,21 +29,26 @@ export function callableCachePlugin(): Plugin {
       const environmentName = this.environment.name
 
       if (environmentName === 'rsc') {
-        const runtime = (value: string, name: string) =>
+        const runtime = (value: string, name: string, originalName?: string) =>
           `$$ReactServer.registerServerReference(` +
-          `$$cacheWrapper(${value}),` +
+          (originalName
+            ? `Object.defineProperty($$cacheWrapper(${value}), "name", { value: ${JSON.stringify(originalName)} }),`
+            : `$$cacheWrapper(${value}),`) +
           `${JSON.stringify(reference.referenceKey)},` +
           `${JSON.stringify(name)})`
         const result = hasDirective(ast.body, directive)
-          ? transformWrapExport(code, ast, {
-              runtime,
+          ? transformModuleExportWrap(code, ast, {
+              generate: ({ implementation, originalName, exportName }) =>
+                runtime(implementation, exportName, originalName ?? exportName),
               rejectNonAsyncFunction: true,
             })
           : transformHoistInlineDirective(code, ast, {
               directive,
               rejectNonAsyncFunction: true,
               hoistRuntime: true,
-              runtime,
+              // TODO: Preserve the source function name once the inline hoist
+              // runtime callback exposes it.
+              runtime: (value, name) => runtime(value, name),
             })
         if (!result.output.hasChanged()) {
           manager.serverReferences.deleteClaim(pluginName, id)
@@ -52,7 +57,7 @@ export function callableCachePlugin(): Plugin {
 
         manager.serverReferences.replaceClaim(pluginName, id, {
           ...reference,
-          exportNames: 'names' in result ? result.names : result.exportNames,
+          exportNames: 'names' in result ? result.names : result.referenceNames,
         })
         result.output.prepend(
           `import $$cacheWrapper from "/src/framework/use-cache-runtime";\n` +

packages/plugin-rsc/src/plugin.ts

@@ -70,12 +70,12 @@ import {
   slash,
 } from './plugins/vite-utils'
 import {
-  type TransformWrapExportFilter,
+  type TransformModuleExportWrapFilter,
   hasDirective,
   transformDirectiveProxyExport,
   transformExpandExportAll,
   transformServerActionServer,
-  transformWrapExport,
+  transformModuleExportWrap,
   findDirectives,
   type TransformExpandExportAllContext,
 } from './transforms'
@@ -2419,7 +2419,7 @@ function vitePluginRscCss(
   }: {
     id: string
     code: string
-  }): false | TransformWrapExportFilter {
+  }): false | TransformModuleExportWrapFilter {
     const { filename, query } = parseIdQuery(id)
     if ('vite-rsc-css-export' in query) {
       const value = query['vite-rsc-css-export']
@@ -2451,7 +2451,7 @@ function vitePluginRscCss(
     //   export const Page = () => {}
     return (_name: string, meta) =>
       !!(
-        (meta.isFunction && meta.declName && /^[A-Z]/.test(meta.declName)) ||
+        (meta.isFunction && meta.localName && /^[A-Z]/.test(meta.localName)) ||
         (meta.defaultExportIdentifierName &&
           /^[A-Z]/.test(meta.defaultExportIdentifierName))
       )
@@ -2753,19 +2753,19 @@ export async function transformRscCssExport(options: {
   ast: Awaited<ReturnType<typeof parseAstAsync>>
   code: string
   id?: string
-  filter: TransformWrapExportFilter
+  filter: TransformModuleExportWrapFilter
 }): Promise<{ output: MagicString } | undefined> {
   if (hasDirective(options.ast.body, 'use client')) {
     return
   }
 
-  const result = transformWrapExport(options.code, options.ast, {
-    runtime: (value, name, meta) =>
-      `__vite_rsc_wrap_css__(${value}, ${JSON.stringify(
-        meta.defaultExportIdentifierName ?? name,
+  const result = transformModuleExportWrap(options.code, options.ast, {
+    generate: ({ implementation, exportName, meta }) =>
+      `__vite_rsc_wrap_css__(${implementation}, ${JSON.stringify(
+        meta.defaultExportIdentifierName ?? exportName,
       )})`,
     filter: options.filter,
-    ignoreExportAllDeclaration: true,
+    exportAll: 'preserve',
   })
   if (result.output.hasChanged()) {
     if (!options.code.includes('__vite_rsc_react__')) {

packages/plugin-rsc/src/transforms/fixtures/source-map/wrap-export/canonical-vs-wrapped-binding.js

@@ -0,0 +1,6 @@
+export async function direct() {}
+
+const indirect = async () => {}
+export { indirect }
+
+consume(direct, indirect)

packages/plugin-rsc/src/transforms/fixtures/source-map/wrap-export/canonical-vs-wrapped-binding.js.map.snap.md

@@ -0,0 +1,38 @@
+## wrap-export
+
+```txt
+(0:7) "async function direct() {}\n" --> (0:0) "async function direct() {}\n"
+(2:0) "const indirect = async () => {}\n" --> (2:0) "const indirect = async () => {}\n"
+(5:0) "consume(direct, indirect)\n" --> (5:0) "consume(direct, indirect)\n"
+(0:0) "export async function direct() {}\n" --> (6:0) "direct = /* #__PURE__ */ registerServerReference(direct, \"direct\");\n"
+(0:0) "export async function direct() {}\n" --> (7:0) "export { direct };\n"
+[unmapped] --> (8:0) ";\n"
+[unmapped] --> (9:0) "const $$wrap_indirect = /* #__PURE__ */ registerServerReference(indirect, \"indirect\");\n"
+[unmapped] --> (10:0) "export { $$wrap_indirect as indirect };\n"
+```
+
+## module-export-effect
+
+```txt
+(0:7) "async function direct() {}\n" --> (0:0) "async function direct() {}\n"
+(2:0) "const indirect = async () => {}\n" --> (2:0) "const indirect = async () => {}\n"
+(3:0) "export { indirect }\n" --> (3:0) "export { indirect }\n"
+(5:0) "consume(direct, indirect)\n" --> (5:0) "consume(direct, indirect)\n"
+(0:0) "export async function direct() {}\n" --> (6:0) "\n"
+(0:0) "export async function direct() {}\n" --> (7:0) "registerServerReference(direct, \"direct\");\n"
+(0:0) "export async function direct() {}\n" --> (8:0) "export { direct };\n"
+[unmapped] --> (10:0) "registerServerReference(indirect, \"indirect\");"
+```
+
+## module-export-wrap
+
+```txt
+(0:7) "async function direct() {}\n" --> (0:0) "\n"
+(0:7) "async function direct() " --> (1:0) "const $$module_0_implementation_direct = async function $$module_0_implementation_direct() "
+(0:31) "{}\n" --> (1:91) "{};\n"
+[unmapped] --> (2:0) "export const direct = /* #__PURE__ */ registerServerReference(Object.defineProperty($$module_0_implementation_direct, \"name\", { value: \"direct\" }), \"direct\");\n"
+(2:0) "const indirect = async () => {}\n" --> (4:0) "const indirect = async () => {}\n"
+(5:0) "consume(direct, indirect)\n" --> (7:0) "consume(direct, indirect)\n"
+[unmapped] --> (9:0) "const $$module_1_binding_indirect = /* #__PURE__ */ registerServerReference(indirect, \"indirect\");\n"
+[unmapped] --> (10:0) "export { $$module_1_binding_indirect as indirect };\n"
+```

packages/plugin-rsc/src/transforms/fixtures/source-map/wrap-export/canonical-vs-wrapped-binding.js.snap.md

@@ -0,0 +1,76 @@
+## Input
+
+```js
+export async function direct() {}
+
+const indirect = async () => {}
+export { indirect }
+
+consume(direct, indirect)
+```
+
+## wrap-export
+
+**Status:** transformed
+
+**References:** direct, indirect
+
+[Source map visualization](https://evanw.github.io/source-map-visualization/#MzA0AGFzeW5jIGZ1bmN0aW9uIGRpcmVjdCgpIHt9Cgpjb25zdCBpbmRpcmVjdCA9IGFzeW5jICgpID0+IHt9CgoKY29uc3VtZShkaXJlY3QsIGluZGlyZWN0KQpkaXJlY3QgPSAvKiAjX19QVVJFX18gKi8gcmVnaXN0ZXJTZXJ2ZXJSZWZlcmVuY2UoZGlyZWN0LCAiZGlyZWN0Iik7CmV4cG9ydCB7IGRpcmVjdCB9Owo7CmNvbnN0ICQkd3JhcF9pbmRpcmVjdCA9IC8qICNfX1BVUkVfXyAqLyByZWdpc3RlclNlcnZlclJlZmVyZW5jZShpbmRpcmVjdCwgImluZGlyZWN0Iik7CmV4cG9ydCB7ICQkd3JhcF9pbmRpcmVjdCBhcyBpbmRpcmVjdCB9OwozNzkAeyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIiJdLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgYXN5bmMgZnVuY3Rpb24gZGlyZWN0KCkge31cblxuY29uc3QgaW5kaXJlY3QgPSBhc3luYyAoKSA9PiB7fVxuZXhwb3J0IHsgaW5kaXJlY3QgfVxuXG5jb25zdW1lKGRpcmVjdCwgaW5kaXJlY3QpXG4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQU8sS0FBSyxDQUFDLFFBQVEsQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLENBQUM7O0FBRWhDLEtBQUssQ0FBQyxRQUFRLENBQUMsQ0FBQyxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDOzs7QUFHOUIsT0FBTyxDQUFDLE1BQU0sQ0FBQyxDQUFDLFFBQVE7QUFMeEI7QUFBQTs7OzsifQ==)
+
+```js
+async function direct() {}
+
+const indirect = async () => {}
+
+
+consume(direct, indirect)
+direct = /* #__PURE__ */ registerServerReference(direct, "direct");
+export { direct };
+;
+const $$wrap_indirect = /* #__PURE__ */ registerServerReference(indirect, "indirect");
+export { $$wrap_indirect as indirect };
+```
+
+## module-export-effect
+
+**Status:** transformed
+
+**References:** direct, indirect
+
+[Source map visualization](https://evanw.github.io/source-map-visualization/#MjE3AGFzeW5jIGZ1bmN0aW9uIGRpcmVjdCgpIHt9Cgpjb25zdCBpbmRpcmVjdCA9IGFzeW5jICgpID0+IHt9CmV4cG9ydCB7IGluZGlyZWN0IH0KCmNvbnN1bWUoZGlyZWN0LCBpbmRpcmVjdCkKCnJlZ2lzdGVyU2VydmVyUmVmZXJlbmNlKGRpcmVjdCwgImRpcmVjdCIpOwpleHBvcnQgeyBkaXJlY3QgfTsKCnJlZ2lzdGVyU2VydmVyUmVmZXJlbmNlKGluZGlyZWN0LCAiaW5kaXJlY3QiKTs0MTcAeyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIiJdLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgYXN5bmMgZnVuY3Rpb24gZGlyZWN0KCkge31cblxuY29uc3QgaW5kaXJlY3QgPSBhc3luYyAoKSA9PiB7fVxuZXhwb3J0IHsgaW5kaXJlY3QgfVxuXG5jb25zdW1lKGRpcmVjdCwgaW5kaXJlY3QpXG4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQU8sS0FBSyxDQUFDLFFBQVEsQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLENBQUM7O0FBRWhDLEtBQUssQ0FBQyxRQUFRLENBQUMsQ0FBQyxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDO0FBQzlCLE1BQU0sQ0FBQyxDQUFDLENBQUMsUUFBUSxDQUFDOztBQUVsQixPQUFPLENBQUMsTUFBTSxDQUFDLENBQUMsUUFBUTtBQUx4QjtBQUFBO0FBQUE7OyJ9)
+
+```js
+async function direct() {}
+
+const indirect = async () => {}
+export { indirect }
+
+consume(direct, indirect)
+
+registerServerReference(direct, "direct");
+export { direct };
+
+registerServerReference(indirect, "indirect");
+```
+
+## module-export-wrap
+
+**Status:** transformed
+
+**References:** direct, indirect
+
+[Source map visualization](https://evanw.github.io/source-map-visualization/#NDY4AApjb25zdCAkJG1vZHVsZV8wX2ltcGxlbWVudGF0aW9uX2RpcmVjdCA9IGFzeW5jIGZ1bmN0aW9uICQkbW9kdWxlXzBfaW1wbGVtZW50YXRpb25fZGlyZWN0KCkge307CmV4cG9ydCBjb25zdCBkaXJlY3QgPSAvKiAjX19QVVJFX18gKi8gcmVnaXN0ZXJTZXJ2ZXJSZWZlcmVuY2UoT2JqZWN0LmRlZmluZVByb3BlcnR5KCQkbW9kdWxlXzBfaW1wbGVtZW50YXRpb25fZGlyZWN0LCAibmFtZSIsIHsgdmFsdWU6ICJkaXJlY3QiIH0pLCAiZGlyZWN0Iik7Cgpjb25zdCBpbmRpcmVjdCA9IGFzeW5jICgpID0+IHt9CgoKY29uc3VtZShkaXJlY3QsIGluZGlyZWN0KQoKY29uc3QgJCRtb2R1bGVfMV9iaW5kaW5nX2luZGlyZWN0ID0gLyogI19fUFVSRV9fICovIHJlZ2lzdGVyU2VydmVyUmVmZXJlbmNlKGluZGlyZWN0LCAiaW5kaXJlY3QiKTsKZXhwb3J0IHsgJCRtb2R1bGVfMV9iaW5kaW5nX2luZGlyZWN0IGFzIGluZGlyZWN0IH07CjM0MQB7InZlcnNpb24iOjMsInNvdXJjZXMiOlsiIl0sInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCBhc3luYyBmdW5jdGlvbiBkaXJlY3QoKSB7fVxuXG5jb25zdCBpbmRpcmVjdCA9IGFzeW5jICgpID0+IHt9XG5leHBvcnQgeyBpbmRpcmVjdCB9XG5cbmNvbnN1bWUoZGlyZWN0LCBpbmRpcmVjdClcbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBTztBQUFBLDJGQUF3QixDQUFDOzs7QUFFaEMsS0FBSyxDQUFDLFFBQVEsQ0FBQyxDQUFDLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUM7OztBQUc5QixPQUFPLENBQUMsTUFBTSxDQUFDLENBQUMsUUFBUTs7OzsifQ==)
+
+```js
+
+const $$module_0_implementation_direct = async function $$module_0_implementation_direct() {};
+export const direct = /* #__PURE__ */ registerServerReference(Object.defineProperty($$module_0_implementation_direct, "name", { value: "direct" }), "direct");
+
+const indirect = async () => {}
+
+
+consume(direct, indirect)
+
+const $$module_1_binding_indirect = /* #__PURE__ */ registerServerReference(indirect, "indirect");
+export { $$module_1_binding_indirect as indirect };
+```

packages/plugin-rsc/src/transforms/fixtures/source-map/wrap-export/classes.js

@@ -0,0 +1,7 @@
+'use server'
+
+export class NamedClass {}
+
+export const ClassExpression = class InnerClass {}
+
+export default class DefaultClass {}

packages/plugin-rsc/src/transforms/fixtures/source-map/wrap-export/classes.js.map.snap.md

@@ -0,0 +1,49 @@
+## wrap-export
+
+```txt
+(0:0) "'use server'\n" --> (0:0) "'use server'\n"
+(2:7) "class NamedClass {}\n" --> (2:0) "class NamedClass {}\n"
+(4:7) "const" --> (4:0) "let"
+(4:12) " ClassExpression = class InnerClass {}\n" --> (4:3) " ClassExpression = class InnerClass {}\n"
+(6:15) "class DefaultClass {}\n" --> (6:0) "class DefaultClass {}\n"
+(2:0) "export class NamedClass {}\n" --> (7:0) "NamedClass = /* #__PURE__ */ registerServerReference(NamedClass, \"NamedClass\");\n"
+(2:0) "export class NamedClass {}\n" --> (8:0) "export { NamedClass };\n"
+(4:0) "export const ClassExpression = class InnerClass {}\n" --> (9:0) "ClassExpression = /* #__PURE__ */ registerServerReference(ClassExpression, \"ClassExpression\");\n"
+(4:0) "export const ClassExpression = class InnerClass {}\n" --> (10:0) "export { ClassExpression };\n"
+[unmapped] --> (11:0) ";\n"
+[unmapped] --> (12:0) "const $$wrap_DefaultClass = /* #__PURE__ */ registerServerReference(DefaultClass, \"default\");\n"
+[unmapped] --> (13:0) "export { $$wrap_DefaultClass as default };\n"
+```
+
+## module-export-effect
+
+```txt
+(0:0) "'use server'\n" --> (0:0) "'use server'\n"
+(2:7) "class NamedClass {}\n" --> (2:0) "class NamedClass {}\n"
+(4:7) "const ClassExpression = class InnerClass {}\n" --> (4:0) "const ClassExpression = class InnerClass {}\n"
+(6:15) "class DefaultClass {}\n" --> (6:0) "class DefaultClass {}\n"
+(2:0) "export class NamedClass {}\n" --> (7:0) "\n"
+(2:0) "export class NamedClass {}\n" --> (8:0) "registerServerReference(NamedClass, \"NamedClass\");\n"
+(2:0) "export class NamedClass {}\n" --> (9:0) "export { NamedClass };\n"
+(4:0) "export const ClassExpression = class InnerClass {}\n" --> (10:0) "\n"
+(4:0) "export const ClassExpression = class InnerClass {}\n" --> (11:0) "registerServerReference(ClassExpression, \"ClassExpression\");\n"
+(4:0) "export const ClassExpression = class InnerClass {}\n" --> (12:0) "export { ClassExpression };\n"
+(6:0) "export default class DefaultClass {}\n" --> (13:0) "\n"
+(6:0) "export default class DefaultClass {}\n" --> (14:0) "registerServerReference(DefaultClass, \"default\");\n"
+(6:0) "export default class DefaultClass {}\n" --> (15:0) "export default DefaultClass;\n"
+```
+
+## module-export-wrap
+
+```txt
+(0:0) "'use server'\n" --> (0:0) "'use server'\n"
+(2:7) "class NamedClass {}\n" --> (2:0) "class NamedClass {}\n"
+(4:7) "const ClassExpression = class InnerClass {}\n" --> (4:0) "const ClassExpression = class InnerClass {}\n"
+(6:15) "class DefaultClass {}\n" --> (6:0) "class DefaultClass {}\n"
+[unmapped] --> (8:0) "const $$module_0_binding_NamedClass = /* #__PURE__ */ registerServerReference(NamedClass, \"NamedClass\");\n"
+[unmapped] --> (9:0) "export { $$module_0_binding_NamedClass as NamedClass };\n"
+[unmapped] --> (10:0) "const $$module_1_binding_ClassExpression = /* #__PURE__ */ registerServerReference(ClassExpression, \"ClassExpression\");\n"
+[unmapped] --> (11:0) "export { $$module_1_binding_ClassExpression as ClassExpression };\n"
+[unmapped] --> (12:0) "const $$module_2_binding_default = /* #__PURE__ */ registerServerReference(DefaultClass, \"default\");\n"
+[unmapped] --> (13:0) "export { $$module_2_binding_default as default };\n"
+```