feat(RSC): Remove entries.ts file (redwoodjs#10533)

Co-authored-by: Tobbe Lundberg <tobbe@tlundberg.com>

packages/project-config/src/__tests__/paths.test.ts

@@ -184,7 +184,6 @@ describe('paths', () => {
           viteConfig: null,
           entryClient: null,
           entryServer: null,
-          entries: null,
           graphql: path.join(FIXTURE_BASEDIR, 'web', 'src', 'graphql'),
         },
       }
@@ -469,7 +468,6 @@ describe('paths', () => {
           viteConfig: path.join(FIXTURE_BASEDIR, 'web', 'vite.config.ts'),
           entryClient: null, // doesn't exist in example-todo-main
           entryServer: null, // doesn't exist in example-todo-main
-          entries: null, // doesn't exist in example-todo-main
         },
       }
 
@@ -756,7 +754,6 @@ describe('paths', () => {
           ),
           entryClient: null,
           entryServer: null,
-          entries: null,
           dist: path.join(FIXTURE_BASEDIR, 'web', 'dist'),
           distEntryServer: path.join(
             FIXTURE_BASEDIR,
@@ -1086,7 +1083,6 @@ describe('paths', () => {
           viteConfig: path.join(FIXTURE_BASEDIR, 'web', 'vite.config.ts'),
           entryClient: path.join(FIXTURE_BASEDIR, 'web/src/entry.client.tsx'),
           entryServer: null,
-          entries: null,
         },
       }
 

packages/project-config/src/paths.ts

@@ -42,7 +42,6 @@ export interface WebPaths {
   viteConfig: string | null // because vite is opt-in only
   entryClient: string | null
   entryServer: string | null
-  entries: string | null
   postcss: string
   storybookConfig: string
   storybookPreviewConfig: string | null
@@ -117,7 +116,6 @@ const PATH_WEB_DIR_CONFIG_WEBPACK = 'web/config/webpack.config.js'
 const PATH_WEB_DIR_CONFIG_VITE = 'web/vite.config' // .js,.ts
 const PATH_WEB_DIR_ENTRY_CLIENT = 'web/src/entry.client' // .jsx,.tsx
 const PATH_WEB_DIR_ENTRY_SERVER = 'web/src/entry.server' // .jsx,.tsx
-const PATH_WEB_DIR_ENTRIES = 'web/src/entries' // .js,.ts
 const PATH_WEB_DIR_GRAPHQL = 'web/src/graphql' // .js,.ts
 
 const PATH_WEB_DIR_CONFIG_POSTCSS = 'web/config/postcss.config.js'
@@ -259,7 +257,6 @@ export const getPaths = (BASE_DIR: string = getBaseDir()): Paths => {
       types: path.join(BASE_DIR, 'web/types'),
       entryClient: resolveFile(path.join(BASE_DIR, PATH_WEB_DIR_ENTRY_CLIENT)), // new vite/stream entry point for client
       entryServer: resolveFile(path.join(BASE_DIR, PATH_WEB_DIR_ENTRY_SERVER)),
-      entries: resolveFile(path.join(BASE_DIR, PATH_WEB_DIR_ENTRIES)),
       graphql: path.join(BASE_DIR, PATH_WEB_DIR_GRAPHQL),
     },
   }

packages/vite/package.json

@@ -14,10 +14,6 @@
       "types": "./dist/index.d.ts",
       "default": "./cjsWrapper.js"
     },
-    "./entries": {
-      "types": "./dist/entries.d.ts",
-      "default": "./dist/entries.js"
-    },
     "./client": {
       "types": "./dist/client.d.ts",
       "default": "./dist/client.js"

packages/vite/src/buildFeServer.ts

@@ -38,10 +38,6 @@ export const buildFeServer = async ({ verbose, webDir }: BuildOptions = {}) => {
   }
 
   if (rscEnabled) {
-    if (!rwPaths.web.entries) {
-      throw new Error('RSC entries file not found')
-    }
-
     await buildRscClientAndServer()
   }
 

packages/vite/src/buildRscClientAndServer.ts

@@ -1,7 +1,7 @@
 import { rscBuildAnalyze } from './rsc/rscBuildAnalyze.js'
 import { rscBuildClient } from './rsc/rscBuildClient.js'
-import { rscBuildClientEntriesMappings } from './rsc/rscBuildClientEntriesFile.js'
 import { rscBuildCopyCssAssets } from './rsc/rscBuildCopyCssAssets.js'
+import { rscBuildEntriesMappings } from './rsc/rscBuildEntriesFile.js'
 import { rscBuildForServer } from './rsc/rscBuildForServer.js'
 import { rscBuildRwEnvVars } from './rsc/rscBuildRwEnvVars.js'
 
@@ -28,9 +28,9 @@ export const buildRscClientAndServer = async () => {
   // Can we do this more similar to how it's done for streaming?
   await rscBuildCopyCssAssets(serverBuildOutput)
 
-  // Mappings from server to client asset file names
+  // Mappings from standard names to full asset names
   // Used by the RSC worker
-  await rscBuildClientEntriesMappings(
+  await rscBuildEntriesMappings(
     clientBuildOutput,
     serverBuildOutput,
     clientEntryFiles,

packages/vite/src/clientSsr.ts

@@ -24,8 +24,9 @@ async function getEntries() {
 async function getFunctionComponent<TProps>(
   rscId: string,
 ): Promise<React.FunctionComponent<TProps>> {
-  const { getEntry } = (await getEntries()).default
-  const mod = await getEntry(rscId)
+  const { serverEntries } = await getEntries()
+  const entryPath = path.join(getPaths().web.distRsc, serverEntries[rscId])
+  const mod = await import(makeFilePath(entryPath))
 
   if (typeof mod === 'function') {
     return mod
@@ -35,6 +36,11 @@ async function getFunctionComponent<TProps>(
     return mod?.default
   }
 
+  // We remove any potential "__rwjs__" prefix as these only exist in the mapping
+  // not in the built files. E.g. "__rwjs__ServerEntry" -> "ServerEntry" as we don't
+  // export "__rwjs__ServerEntry" in the built file we simply export "ServerEntry"
+  rscId = rscId.replace(/^__rwjs__/, '')
+
   if (typeof mod?.[rscId] === 'function') {
     return mod?.[rscId]
   }
@@ -98,7 +104,7 @@ export function renderFromDist<TProps extends Record<string, any>>(
     let ServerEntry: React.FunctionComponent<TProps>
 
     try {
-      ServerEntry = await getFunctionComponent<TProps>('ServerEntry')
+      ServerEntry = await getFunctionComponent<TProps>('__rwjs__ServerEntry')
     } catch (error) {
       console.log('SsrComponent error', error)
       // For now we'll just swallow this error because not all projects will
@@ -108,6 +114,7 @@ export function renderFromDist<TProps extends Record<string, any>>(
       ServerEntry = () => createElement('div', {}, 'Loading')
     }
 
+    console.log('clientSsr.ts getEntries()', getEntries())
     const clientEntries = (await getEntries()).clientEntries
 
     // TODO (RSC): Try removing the proxy here and see if it's really necessary.

packages/vite/src/lib/entries.ts

@@ -0,0 +1,52 @@
+import path from 'node:path'
+
+import type { PagesDependency } from '@redwoodjs/project-config'
+import {
+  ensurePosixPath,
+  getPaths,
+  processPagesDir,
+} from '@redwoodjs/project-config'
+
+import { makeFilePath } from '../utils'
+
+const getPathRelativeToSrc = (maybeAbsolutePath: string) => {
+  // If the path is already relative
+  if (!path.isAbsolute(maybeAbsolutePath)) {
+    return maybeAbsolutePath
+  }
+
+  return `./${path.relative(getPaths().web.src, maybeAbsolutePath)}`
+}
+
+const withRelativeImports = (page: PagesDependency) => {
+  return {
+    ...page,
+    relativeImport: ensurePosixPath(getPathRelativeToSrc(page.importPath)),
+  }
+}
+
+export function getEntries() {
+  const entries: Record<string, string> = {}
+
+  // Add the various pages
+  const pages = processPagesDir().map(withRelativeImports)
+  for (const page of pages) {
+    entries[page.importName] = page.path
+  }
+
+  // Add the ServerEntry entry, noting we use the "__rwjs__" prefix to avoid
+  // any potential conflicts with user-defined entries
+  const serverEntry = getPaths().web.entryServer
+  if (!serverEntry) {
+    throw new Error('Server Entry file not found')
+  }
+  entries['__rwjs__ServerEntry'] = serverEntry
+
+  return entries
+}
+
+export async function getEntriesFromDist(): Promise<Record<string, string>> {
+  const entriesDist = getPaths().web.distRscEntries
+  const { serverEntries } = await import(makeFilePath(entriesDist))
+  return serverEntries
+}

packages/vite/src/rsc/rscBuildAnalyze.ts

@@ -2,6 +2,7 @@ import { build as viteBuild } from 'vite'
 
 import { getPaths } from '@redwoodjs/project-config'
 
+import { getEntries } from '../lib/entries.js'
 import { onWarn } from '../lib/onWarn.js'
 import { rscAnalyzePlugin } from '../plugins/vite-plugin-rsc-analyze.js'
 
@@ -22,10 +23,6 @@ export async function rscBuildAnalyze() {
   const serverEntryFileSet = new Set<string>()
   const componentImportMap = new Map<string, string[]>()
 
-  if (!rwPaths.web.entries) {
-    throw new Error('RSC entries file not found')
-  }
-
   if (!rwPaths.web.viteConfig) {
     throw new Error('Vite config not found')
   }
@@ -69,16 +66,14 @@ export async function rscBuildAnalyze() {
       minify: false,
       manifest: 'rsc-build-manifest.json',
       write: false,
-      // TODO (RSC): In the future we want to generate the entries file
-      // automatically. Maybe by using `analyzeRoutes()`
-      // For the dev server we might need to generate these entries on the
-      // fly - so we will need something like a plugin or virtual module
-      // to generate these entries, rather than write to actual file.
-      // And so, we might as well use on-the-fly generation for regular
-      // builds too
-      ssr: rwPaths.web.entries,
+      // We generate the entries from the simple `getEntries` function that analyses
+      // the various pages plus the ServerEntry file. This may need revisiting when we
+      // spend time on improving dev support or expand the scope of the components
+      // that are looked up via the entries mappings.
+      ssr: true,
       rollupOptions: {
         onwarn: onWarn,
+        input: getEntries(),
       },
     },
   })

packages/vite/src/rsc/rscBuildClientEntriesFile.ts → packages/vite/src/rsc/rscBuildEntriesFile.ts

@@ -1,7 +1,12 @@
 import fs from 'fs/promises'
 
+import type { OutputChunk } from 'rollup'
+import { normalizePath } from 'vite'
+
 import { getPaths } from '@redwoodjs/project-config'
 
+import { getEntries } from '../lib/entries.js'
+
 import type { rscBuildClient } from './rscBuildClient.js'
 import type { rscBuildForServer } from './rscBuildForServer.js'
 
@@ -14,17 +19,18 @@ import type { rscBuildForServer } from './rscBuildForServer.js'
 // TODO(RSC_DC): This function should eventually be removed.
 // The dev server will need this implemented as a Vite plugin,
 // so worth waiting till implementation to swap out and just include the plugin for the prod build
-export function rscBuildClientEntriesMappings(
+export async function rscBuildEntriesMappings(
   clientBuildOutput: Awaited<ReturnType<typeof rscBuildClient>>,
   serverBuildOutput: Awaited<ReturnType<typeof rscBuildForServer>>,
   clientEntryFiles: Record<string, string>,
 ) {
   console.log('\n')
-  console.log('5. rscBuildClientEntriesMapping')
-  console.log('===============================\n')
+  console.log('5. rscBuildEntriesMapping')
+  console.log('=========================\n')
 
   const rwPaths = getPaths()
 
+  // RSC client component to client dist asset mapping
   const clientEntries: Record<string, string> = {}
   for (const item of clientBuildOutput) {
     const { name, fileName } = item
@@ -53,9 +59,27 @@ export function rscBuildClientEntriesMappings(
   }
 
   console.log('clientEntries', clientEntries)
+  await fs.appendFile(
+    rwPaths.web.distRscEntries,
+    `// client component mapping (dist/rsc -> dist/client)\nexport const clientEntries = ${JSON.stringify(clientEntries, undefined, 2)};\n\n`,
+  )
+
+  // Server component names to RSC server asset mapping
+  const entries = getEntries()
+  const serverEntries: Record<string, string> = {}
+  for (const [name, sourceFile] of Object.entries(entries)) {
+    const buildOutputItem = serverBuildOutput.find((item) => {
+      return (item as OutputChunk).facadeModuleId === normalizePath(sourceFile)
+    })
+
+    if (buildOutputItem) {
+      serverEntries[name] = buildOutputItem.fileName
+    }
+  }
 
-  return fs.appendFile(
+  console.log('serverEntries', serverEntries)
+  await fs.appendFile(
     rwPaths.web.distRscEntries,
-    `export const clientEntries=${JSON.stringify(clientEntries)};`,
+    `// server component mapping (src -> dist/rsc)\nexport const serverEntries = ${JSON.stringify(serverEntries, undefined, 2)};\n\n`,
   )
 }

packages/vite/src/rsc/rscBuildForServer.ts

@@ -2,6 +2,7 @@ import { build as viteBuild } from 'vite'
 
 import { getPaths } from '@redwoodjs/project-config'
 
+import { getEntries } from '../lib/entries.js'
 import { onWarn } from '../lib/onWarn.js'
 // import { rscCssPreinitPlugin } from '../plugins/vite-plugin-rsc-css-preinit.js'
 import { rscRoutesAutoLoader } from '../plugins/vite-plugin-rsc-routes-auto-loader.js'
@@ -25,9 +26,8 @@ export async function rscBuildForServer(
 
   const rwPaths = getPaths()
 
-  if (!rwPaths.web.entries) {
-    throw new Error('RSC entries file not found')
-  }
+  const entryFiles = getEntries()
+  const entryFilesKeys = Object.keys(entryFiles)
 
   if (!rwPaths.web.entryServer) {
     throw new Error('Server Entry file not found')
@@ -80,7 +80,7 @@ export async function rscBuildForServer(
       rollupOptions: {
         onwarn: onWarn,
         input: {
-          entries: rwPaths.web.entries,
+          ...entryFiles,
           ...clientEntryFiles,
           ...serverEntryFiles,
           ...customModules,
@@ -108,9 +108,11 @@ export async function rscBuildForServer(
             return code
           },
           entryFileNames: (chunkInfo) => {
-            // TODO (RSC) Probably don't want 'entries'. And definitely don't want it hardcoded
+            // Entries such as pages should be named like the other assets
+            if (entryFilesKeys.includes(chunkInfo.name)) {
+              return 'assets/[name]-[hash].mjs'
+            }
             if (
-              chunkInfo.name === 'entries' ||
               chunkInfo.name === 'entry.server' ||
               chunkInfo.name === 'rsdw-server' ||
               customModules[chunkInfo.name]