feat(rsc): support optional single entry for loadModule (#1040)

Author: hi-ogawa

packages/plugin-rsc/README.md

@@ -224,9 +224,9 @@ The plugin provides an additional helper for multi environment interaction.
 
 #### `import.meta.viteRsc.loadModule`
 
-- Type: `(environmentName: "ssr" | "rsc", entryName: string) => Promise<T>`
+- Type: `(environmentName: "ssr" | "rsc", entryName?: string) => Promise<T>`
 
-This allows importing `ssr` environment module specified by `environments.ssr.build.rollupOptions.input[entryName]` inside `rsc` environment and vice versa.
+This allows importing `ssr` environment module specified by `environments.ssr.build.rollupOptions.input[entryName]` inside `rsc` environment and vice versa. When `entryName` is omitted, the function automatically uses the single entry from the target environment's `rollupOptions.input`.
 
 During development, by default, this API assumes both `rsc` and `ssr` environments execute under the main Vite process as `RunnableDevEnvironment`. Internally, `loadModule` uses the global `__VITE_ENVIRONMENT_RUNNER_IMPORT__` function to import modules in the target environment (see [`__VITE_ENVIRONMENT_RUNNER_IMPORT__`](#__vite_environment_runner_import__) below).
 
@@ -550,7 +550,7 @@ Types for global API are defined in `@vitejs/plugin-rsc/types`. For example, you
 ```ts
 import.meta.viteRsc.loadModule
 //                  ^^^^^^^^^^
-// <T>(environmentName: string, entryName: string) => Promise<T>
+// <T>(environmentName: string, entryName?: string) => Promise<T>
 ```
 
 See also [Vite documentation](https://vite.dev/guide/api-hmr.html#intellisense-for-typescript) for `vite/client` types.

packages/plugin-rsc/e2e/single-entry.test.ts

@@ -0,0 +1,48 @@
+import { test } from '@playwright/test'
+import { setupInlineFixture, useFixture } from './fixture'
+import { defineStarterTest } from './starter'
+
+test.describe(() => {
+  const root = 'examples/e2e/temp/single-entry'
+
+  test.beforeAll(async () => {
+    await setupInlineFixture({
+      src: 'examples/starter',
+      dest: root,
+      files: {
+        'src/framework/entry.rsc.tsx': {
+          edit: (s) => s.replace(`('ssr', 'index')`, `('ssr')`),
+        },
+        'vite.config.base.ts': { cp: 'vite.config.ts' },
+        'vite.config.ts': /* js */ `
+          import { defineConfig, mergeConfig } from 'vite'
+          import baseConfig from './vite.config.base.ts'
+
+          const overrideConfig = defineConfig({
+            environments: {
+              ssr: {
+                build: {
+                  rollupOptions: {
+                    input: './src/framework/entry.ssr.tsx',
+                  },
+                },
+              },
+            },
+          })
+
+          export default mergeConfig(baseConfig, overrideConfig)
+        `,
+      },
+    })
+  })
+
+  test.describe('dev-single-entry', () => {
+    const f = useFixture({ root, mode: 'dev' })
+    defineStarterTest(f)
+  })
+
+  test.describe('build-single-entry', () => {
+    const f = useFixture({ root, mode: 'build' })
+    defineStarterTest(f)
+  })
+})

packages/plugin-rsc/src/plugin.ts

@@ -49,6 +49,7 @@ import {
   getFetchHandlerExport,
   sortObject,
   withRollupError,
+  getFallbackRollupEntry,
 } from './plugins/utils'
 import { createDebug } from '@hiogawa/utils'
 import { scanBuildStripPlugin } from './plugins/scan'
@@ -609,7 +610,6 @@ export default function vitePluginRsc(
           environmentName: 'rsc',
           entryName: 'index',
         }
-
         const entryFile = path.join(
           manager.config.environments[options.environmentName]!.build.outDir,
           `${options.entryName}.js`,
@@ -779,7 +779,8 @@ export default function vitePluginRsc(
         )) {
           const [argStart, argEnd] = match.indices![1]!
           const argCode = code.slice(argStart, argEnd).trim()
-          const [environmentName, entryName] = evalValue(`[${argCode}]`)
+          const [environmentName, entryName]: [string, string | undefined] =
+            evalValue(`[${argCode}]`)
           let replacement: string
           if (
             this.environment.mode === 'dev' &&
@@ -793,8 +794,21 @@ export default function vitePluginRsc(
             assert(resolved, `[vite-rsc] failed to resolve entry '${source}'`)
             replacement = `globalThis.__VITE_ENVIRONMENT_RUNNER_IMPORT__(${JSON.stringify(environmentName)}, ${JSON.stringify(resolved.id)})`
           } else {
+            const environment = manager.config.environments[environmentName]!
+            const targetName =
+              entryName ||
+              getFallbackRollupEntry(environment.build.rollupOptions.input).name
             replacement = JSON.stringify(
-              `__vite_rsc_load_module:${this.environment.name}:${environmentName}:${entryName}`,
+              `__vite_rsc_load_module_start__:` +
+                JSON.stringify({
+                  fromEnv: this.environment.name,
+                  toEnv: environmentName,
+                  // TODO: custom entyFileNames
+                  // we can probably use an intermediate file like "__vite_rsc_assets_manifest.js"
+                  // and generate during buildApp.
+                  targetFileName: `${targetName}.js`,
+                }) +
+                `:__vite_rsc_load_module_end__`,
             )
           }
           const [start, end] = match.indices![0]!
@@ -812,9 +826,15 @@ export default function vitePluginRsc(
         const { config } = manager
         const s = new MagicString(code)
         for (const match of code.matchAll(
-          /['"]__vite_rsc_load_module:(\w+):(\w+):(\w+)['"]/dg,
+          /[`'"]__vite_rsc_load_module_start__:([\s\S]*?):__vite_rsc_load_module_end__[`'"]/dg,
         )) {
-          const [fromEnv, toEnv, entryName] = match.slice(1)
+          const markerString = evalValue(match[0])
+          const { fromEnv, toEnv, targetFileName } = JSON.parse(
+            markerString.slice(
+              '__vite_rsc_load_module_start__:'.length,
+              -'__:vite_rsc_load_module_end__'.length,
+            ),
+          )
           const importPath = normalizeRelativePath(
             path.relative(
               path.join(
@@ -824,8 +844,7 @@ export default function vitePluginRsc(
               ),
               path.join(
                 config.environments[toEnv!]!.build.outDir,
-                // TODO: this breaks when custom entyFileNames
-                `${entryName}.js`,
+                targetFileName,
               ),
             ),
           )
@@ -851,7 +870,6 @@ export default function vitePluginRsc(
             url.searchParams,
           )
           assert(environmentName)
-          assert(entryName)
           const environment = server.environments[
             environmentName
           ] as RunnableDevEnvironment

packages/plugin-rsc/src/plugins/utils.ts

@@ -1,5 +1,5 @@
-import assert from 'node:assert'
 import { createHash } from 'node:crypto'
+import path from 'node:path'
 import {
   normalizePath,
   type Plugin,
@@ -62,17 +62,59 @@ export function normalizeRelativePath(s: string): string {
 
 export function getEntrySource(
   config: Pick<ResolvedConfig, 'build'>,
-  name: string = 'index',
+  name?: string,
 ): string {
   const input = config.build.rollupOptions.input
-  assert(
+  if (!name) {
+    return getFallbackRollupEntry(input).source
+  }
+  if (
     typeof input === 'object' &&
-      !Array.isArray(input) &&
-      name in input &&
-      typeof input[name] === 'string',
+    !Array.isArray(input) &&
+    name in input &&
+    typeof input[name] === 'string'
+  ) {
+    return input[name]
+  }
+  throw new Error(
     `[vite-rsc:getEntrySource] expected 'build.rollupOptions.input' to be an object with a '${name}' property that is a string, but got ${JSON.stringify(input)}`,
   )
-  return input[name]
+}
+
+export function getFallbackRollupEntry(
+  input: Rollup.InputOptions['input'] = {},
+): {
+  name: string
+  source: string
+} {
+  const inputEntries = Object.entries(normalizeRollupOpitonsInput(input))
+  if (inputEntries.length === 1) {
+    const [name, source] = inputEntries[0]!
+    return { name, source }
+  }
+  throw new Error(
+    `[vite-rsc] cannot determine fallback entry name from multiple entries, please specify the entry name explicitly`,
+  )
+}
+
+// normalize to object form
+// https://rollupjs.org/configuration-options/#input
+// https://rollupjs.org/configuration-options/#output-entryfilenames
+function normalizeRollupOpitonsInput(
+  input: Rollup.InputOptions['input'] = {},
+): Record<string, string> {
+  if (typeof input === 'string') {
+    input = [input]
+  }
+  if (Array.isArray(input)) {
+    return Object.fromEntries(
+      input.map((file) => [
+        path.basename(file).slice(0, -path.extname(file).length),
+        file,
+      ]),
+    )
+  }
+  return input
 }
 
 export function hashString(v: string): string {

packages/plugin-rsc/types/index.d.ts

@@ -2,7 +2,7 @@ declare global {
   interface ImportMeta {
     readonly viteRsc: {
       loadCss: (importer?: string) => import('react').ReactNode
-      loadModule: <T>(environmentName: string, entryName: string) => Promise<T>
+      loadModule: <T>(environmentName: string, entryName?: string) => Promise<T>
       loadBootstrapScriptContent: (entryName: string) => Promise<string>
     }
   }