feat(rsc-streaming): Integrating RSC builds with Streaming and Client side hydration

__fixtures__/test-project-rsa/web/package.json

@@ -11,6 +11,7 @@
     ]
   },
   "dependencies": {
+    "@apollo/experimental-nextjs-app-support": "0.0.0-commit-b8a73fe",
     "@redwoodjs/forms": "7.0.0-canary.717",
     "@redwoodjs/router": "7.0.0-canary.717",
     "@redwoodjs/web": "7.0.0-canary.717",

__fixtures__/test-project-rsa/web/src/Routes.tsx

@@ -8,14 +8,10 @@
 // 'src/pages/Admin/BooksPage/BooksPage.js' -> AdminBooksPage
 
 import { Router, Route, Set } from '@redwoodjs/router'
-import { serve } from '@redwoodjs/vite/client'
 
 import NavigationLayout from './layouts/NavigationLayout/NavigationLayout'
 import NotFoundPage from './pages/NotFoundPage/NotFoundPage'
 
-const AboutPage = serve('AboutPage')
-const HomePage = serve('HomePage')
-
 const Routes = () => {
   return (
     <Router>

packages/babel-config/src/plugins/__tests__/babel-plugin-redwood-routes-auto-loader.test.ts

@@ -6,13 +6,17 @@ import * as babel from '@babel/core'
 import { getPaths } from '@redwoodjs/project-config'
 
 import babelRoutesAutoLoader from '../babel-plugin-redwood-routes-auto-loader'
+import type { PluginOptions as RoutesAutoLoaderOptions } from '../babel-plugin-redwood-routes-auto-loader'
 
-const transform = (filename: string) => {
+const transform = (
+  filename: string,
+  pluginOptions?: RoutesAutoLoaderOptions
+) => {
   const code = fs.readFileSync(filename, 'utf-8')
   return babel.transform(code, {
     filename,
     presets: ['@babel/preset-react'],
-    plugins: [babelRoutesAutoLoader],
+    plugins: [[babelRoutesAutoLoader, pluginOptions]],
   })
 }
 
@@ -67,4 +71,59 @@ describe('page auto loader correctly imports pages', () => {
   test('Already imported pages are left alone.', () => {
     expect(result?.code).toContain(`import FooPage from 'src/pages/FooPage'`)
   })
+
+  test('RSC specific code should not be added', () => {
+    expect(result?.code).not.toContain(
+      'import { renderFromRscServer } from "@redwoodjs/vite/client"'
+    )
+  })
+})
+
+describe('page auto loader handles imports for RSC', () => {
+  const FIXTURE_PATH = path.resolve(
+    __dirname,
+    '../../../../../__fixtures__/example-todo-main/'
+  )
+
+  let result: babel.BabelFileResult | null
+
+  beforeAll(() => {
+    process.env.RWJS_CWD = FIXTURE_PATH
+    result = transform(getPaths().web.routes, { forRscClient: true })
+  })
+
+  afterAll(() => {
+    delete process.env.RWJS_CWD
+  })
+
+  test('Pages are loaded with renderFromRscServer', () => {
+    const codeOutput = result?.code
+    expect(codeOutput).not.toContain(`const HomePage = {
+  name: "HomePage",
+  prerenderLoader: name => __webpack_require__(require.resolveWeak("./pages/HomePage/HomePage")),
+  LazyComponent: lazy(() => import( /* webpackChunkName: "HomePage" */"./pages/HomePage/HomePage"))
+`)
+
+    expect(codeOutput).toContain(
+      'import { renderFromRscServer } from "@redwoodjs/vite/client"'
+    )
+
+    expect(codeOutput).toContain(
+      'const HomePage = renderFromRscServer("HomePage")'
+    )
+
+    // Un-imported pages get added with renderFromRscServer
+    // so it calls the RSC worker to get a flight response
+    expect(codeOutput).toContain(
+      'const HomePage = renderFromRscServer("HomePage")'
+    )
+    expect(codeOutput).toContain(
+      'const BarPage = renderFromRscServer("BarPage")'
+    )
+  })
+
+  // Not sure about this 👇 - what should the behaviour be?
+  test('Already imported pages are left alone.', () => {
+    expect(result?.code).toContain(`import FooPage from 'src/pages/FooPage'`)
+  })
 })

packages/babel-config/src/plugins/babel-plugin-redwood-routes-auto-loader.ts

@@ -4,16 +4,16 @@ import type { PluginObj, types } from '@babel/core'
 
 import type { PagesDependency } from '@redwoodjs/project-config'
 import {
+  ensurePosixPath,
+  getPaths,
   importStatementPath,
   processPagesDir,
-  getPaths,
-  ensurePosixPath,
-  getConfig,
 } from '@redwoodjs/project-config'
 
-interface PluginOptions {
-  prerender?: boolean
-  vite?: boolean
+export interface PluginOptions {
+  forPrerender?: boolean
+  forVite?: boolean
+  forRscClient?: boolean
 }
 
 /**
@@ -39,7 +39,7 @@ const withRelativeImports = (page: PagesDependency) => {
 
 export default function (
   { types: t }: { types: typeof types },
-  { prerender = false, vite = false }: PluginOptions
+  { forPrerender = false, forVite = false, forRscClient = false }: PluginOptions
 ): PluginObj {
   // @NOTE: This var gets mutated inside the visitors
   let pages = processPagesDir().map(withRelativeImports)
@@ -64,14 +64,6 @@ export default function (
     )
   }
 
-  if (getConfig().experimental?.rsc?.enabled) {
-    // TODO (RSC): Enable auto-loader for RSC
-    return {
-      name: 'babel-plugin-redwood-routes-auto-loader',
-      visitor: {},
-    }
-  }
-
   return {
     name: 'babel-plugin-redwood-routes-auto-loader',
     visitor: {
@@ -102,7 +94,7 @@ export default function (
         // This is to make sure that all the imported "Page modules" are normal
         // imports and not asynchronous ones.
         // Note that jest in a user's project does not enter this block, but our tests do
-        if (prerender) {
+        if (forPrerender) {
           // Match import paths, const name could be different
 
           const pageThatUserImported = pages.find((page) => {
@@ -152,67 +144,103 @@ export default function (
             )
           )
 
+          // For RSC Client builds add
+          // import { renderFromRscServer } from '@redwoodjs/vite/client'
+          if (forRscClient) {
+            nodes.unshift(
+              t.importDeclaration(
+                [
+                  t.importSpecifier(
+                    t.identifier('renderFromRscServer'),
+                    t.identifier('renderFromRscServer')
+                  ),
+                ],
+                t.stringLiteral('@redwoodjs/vite/client')
+              )
+            )
+          }
+
           // Prepend all imports to the top of the file
           for (const { importName, relativeImport } of pages) {
-            //  const <importName> = {
-            //     name: <importName>,
-            //     prerenderLoader: (name) => prerenderLoaderImpl
-            //     LazyComponent: lazy(() => import(/* webpackChunkName: "..." */ <relativeImportPath>)
-            //   }
-
-            /**
-             * Real example
-             * const LoginPage = {
-             *  name: "LoginPage",
-             *  prerenderLoader: () => __webpack_require__(require.resolveWeak("./pages/LoginPage/LoginPage")), */
-            // LazyComponent: lazy(() => import("/* webpackChunkName: "LoginPage" *//pages/LoginPage/LoginPage.tsx"))
-            /*
-             * }
-             */
-
             const importArgument = t.stringLiteral(relativeImport)
 
-            importArgument.leadingComments = [
-              {
-                type: 'CommentBlock',
-                value: ` webpackChunkName: "${importName}" `,
-              },
-            ]
+            if (forRscClient) {
+              // rsc CLIENT wants this format
+              // const AboutPage = renderFromRscServer('AboutPage')
+              // this basically allows the page to be rendered via flight response
+              nodes.push(
+                t.variableDeclaration('const', [
+                  t.variableDeclarator(
+                    t.identifier(importName),
+                    t.callExpression(t.identifier('renderFromRscServer'), [
+                      t.stringLiteral(importName),
+                    ])
+                  ),
+                ])
+              )
+            } else {
+              //  const <importName> = {
+              //     name: <importName>,
+              //     prerenderLoader: (name) => prerenderLoaderImpl
+              //     LazyComponent: lazy(() => import(/* webpackChunkName: "..." */ <relativeImportPath>)
+              //   }
+
+              /**
+               * Real example
+               * const LoginPage = {
+               *  name: "LoginPage",
+               *  prerenderLoader: () => __webpack_require__(require.resolveWeak("./pages/LoginPage/LoginPage")), */
+              // LazyComponent: lazy(() => import("/* webpackChunkName: "LoginPage" *//pages/LoginPage/LoginPage.tsx"))
+              /*
+               * }
+               */
+              importArgument.leadingComments = [
+                {
+                  type: 'CommentBlock',
+                  value: ` webpackChunkName: "${importName}" `,
+                },
+              ]
 
-            nodes.push(
-              t.variableDeclaration('const', [
-                t.variableDeclarator(
-                  t.identifier(importName),
-                  t.objectExpression([
-                    t.objectProperty(
-                      t.identifier('name'),
-                      t.stringLiteral(importName)
-                    ),
-                    // prerenderLoader for ssr/prerender and first load of
-                    // prerendered pages in browser (csr)
-                    // prerenderLoader: (name) => { prerenderLoaderImpl }
-                    t.objectProperty(
-                      t.identifier('prerenderLoader'),
-                      t.arrowFunctionExpression(
-                        [t.identifier('name')],
-                        prerenderLoaderImpl(prerender, vite, relativeImport, t)
-                      )
-                    ),
-                    t.objectProperty(
-                      t.identifier('LazyComponent'),
-                      t.callExpression(t.identifier('lazy'), [
+              nodes.push(
+                t.variableDeclaration('const', [
+                  t.variableDeclarator(
+                    t.identifier(importName),
+                    t.objectExpression([
+                      t.objectProperty(
+                        t.identifier('name'),
+                        t.stringLiteral(importName)
+                      ),
+                      // prerenderLoader for ssr/prerender and first load of
+                      // prerendered pages in browser (csr)
+                      // prerenderLoader: (name) => { prerenderLoaderImpl }
+                      t.objectProperty(
+                        t.identifier('prerenderLoader'),
                         t.arrowFunctionExpression(
-                          [],
-                          t.callExpression(t.identifier('import'), [
-                            importArgument,
-                          ])
-                        ),
-                      ])
-                    ),
-                  ])
-                ),
-              ])
-            )
+                          [t.identifier('name')],
+                          prerenderLoaderImpl(
+                            forPrerender,
+                            forVite,
+                            relativeImport,
+                            t
+                          )
+                        )
+                      ),
+                      t.objectProperty(
+                        t.identifier('LazyComponent'),
+                        t.callExpression(t.identifier('lazy'), [
+                          t.arrowFunctionExpression(
+                            [],
+                            t.callExpression(t.identifier('import'), [
+                              importArgument,
+                            ])
+                          ),
+                        ])
+                      ),
+                    ])
+                  ),
+                ])
+              )
+            }
           }
 
           // Insert at the top of the file
@@ -225,7 +253,7 @@ export default function (
 
 function prerenderLoaderImpl(
   prerender: boolean,
-  vite: boolean,
+  forVite: boolean,
   relativeImport: string,
   t: typeof types
 ) {
@@ -243,7 +271,7 @@ function prerenderLoaderImpl(
   // Manually imported pages will be bundled in the main bundle and will be
   // loaded by the code in `normalizePage` in util.ts
   let implForBuild
-  if (vite) {
+  if (forVite) {
     implForBuild = t.objectExpression([
       t.objectProperty(
         t.identifier('default'),

packages/babel-config/src/web.ts

@@ -4,6 +4,8 @@ import path from 'path'
 import * as babel from '@babel/core'
 import type { TransformOptions } from '@babel/core'
 
+// Weird import, but just doing this for typesafety. Its just a type, no harm importing from src.
+import type { PluginOptions as RoutesAutoloaderOptions } from '@redwoodjs/babel-config/src/plugins/babel-plugin-redwood-routes-auto-loader'
 import { getConfig, getPaths } from '@redwoodjs/project-config'
 
 import type { RegisterHookOptions } from './common'
@@ -99,11 +101,20 @@ export const getWebSideBabelPlugins = (
 }
 
 export const getWebSideOverrides = (
-  { prerender, forVite }: Flags = {
-    prerender: false,
+  { forPrerender, forVite, forRscClient }: Flags = {
+    forPrerender: false,
     forVite: false,
+    forRscClient: false,
   }
 ) => {
+  // Bit of complexity here!
+  // The plugin will modify the Routes file differently based on what context we're building for
+  const routeLoaderOptions: RoutesAutoloaderOptions = {
+    forPrerender,
+    forVite,
+    forRscClient,
+  }
+
   const overrides = [
     {
       test: /.+Cell.(js|tsx|jsx)$/,
@@ -116,10 +127,7 @@ export const getWebSideOverrides = (
       plugins: [
         [
           require('./plugins/babel-plugin-redwood-routes-auto-loader').default,
-          {
-            prerender,
-            vite: forVite,
-          },
+          routeLoaderOptions,
         ],
       ],
     },
@@ -199,8 +207,9 @@ export const getWebSideBabelConfigPath = () => {
 // These flags toggle on/off certain features
 export interface Flags {
   forJest?: boolean // will change the alias for module-resolver plugin
-  prerender?: boolean // changes what babel-plugin-redwood-routes-auto-loader does
+  forPrerender?: boolean // changes what babel-plugin-redwood-routes-auto-loader does
   forVite?: boolean
+  forRscClient?: boolean
 }
 
 export const getWebSideDefaultBabelConfig = (options: Flags = {}) => {
@@ -234,7 +243,7 @@ export const registerWebSideBabelHook = ({
     // We only register for prerender currently
     // Static importing pages makes sense
     overrides: [
-      ...getWebSideOverrides({ prerender: true, forVite }),
+      ...getWebSideOverrides({ forPrerender: true, forVite }),
       ...overrides,
     ],
   })