Merge branch 'main' of github.com:redwoodjs/redwood into feat/move-se…

…rver-store * 'main' of github.com:redwoodjs/redwood: chore(deps): bump @fastify/reply-from from 9.4.0 to 9.8.0 (redwoodjs#10728) chore(deps): bump jose from 4.15.4 to 4.15.5 (redwoodjs#10726) chore(ci): Track `@redwoodjs/router` in RSC CI (redwoodjs#10727) chore(deps): bump ejs from 3.1.9 to 3.1.10 (redwoodjs#10725) RSC: Include `<App>` in SSR (redwoodjs#10688) chore(logging): Remove overly verbose logging (redwoodjs#10723) chore(formatting): Fix "check annotations" (redwoodjs#10722) chore(comment): Update comment to match implementation (redwoodjs#10720) chore(imports): Differentiate between React type import and method imports (redwoodjs#10721) chore(auth): auth-supabase-api dependency fixes (redwoodjs#10719)
dac09 · Jun 5, 2024 · 2e174c1 · 2e174c1
2 parents 819b92e + 1d664ab
commit 2e174c1
Show file tree

Hide file tree

Showing 29 changed files with 540 additions and 206 deletions.
diff --git a/.github/actions/detect-changes/cases/rsc.mjs b/.github/actions/detect-changes/cases/rsc.mjs
@@ -21,6 +21,7 @@ export function rscChanged(changedFiles){
       changedFile.startsWith('packages/project-config/') ||
       changedFile.startsWith('packages/web/') ||
       changedFile.startsWith('packages/vite/') ||
+      changedFile.startsWith('packages/router/') ||
       changedFile.startsWith('__fixtures__/test-project-rsa') ||
       changedFile.startsWith('__fixtures__/test-project-rsc-kitchen-sink')
     ) {

diff --git a/packages/auth-providers/supabase/api/package.json b/packages/auth-providers/supabase/api/package.json
@@ -24,14 +24,14 @@
   },
   "dependencies": {
     "@babel/runtime-corejs3": "7.24.5",
+    "@redwoodjs/api": "workspace:*",
     "@supabase/ssr": "0.3.0",
     "core-js": "3.37.1",
     "jsonwebtoken": "9.0.2"
   },
   "devDependencies": {
     "@babel/cli": "7.24.5",
     "@babel/core": "^7.22.20",
-    "@redwoodjs/api": "workspace:*",
     "@types/aws-lambda": "8.10.138",
     "@types/jsonwebtoken": "9.0.6",
     "typescript": "5.4.5",

diff --git a/packages/auth-providers/supabase/api/tsconfig.json b/packages/auth-providers/supabase/api/tsconfig.json
@@ -6,8 +6,5 @@
     "outDir": "dist"
   },
   "include": ["src"],
-  "references": [
-    { "path": "../../../auth/tsconfig.build.json" },
-    { "path": "../../../vite" }
-  ]
+  "references": [{ "path": "../../../api" }]
 }
diff --git a/packages/cli/src/commands/serve.js b/packages/cli/src/commands/serve.js
@@ -45,7 +45,7 @@ export const builder = async (yargs) => {
           const { bothSsrRscServerHandler } = await import(
             './serveBothHandler.js'
           )
-          await bothSsrRscServerHandler(argv)
+          await bothSsrRscServerHandler(argv, rscEnabled)
         } else {
           await bothServerCLIConfig.handler(argv)
         }
@@ -87,7 +87,7 @@ export const builder = async (yargs) => {
         })
 
         if (streamingEnabled) {
-          await webSsrServerHandler()
+          await webSsrServerHandler(rscEnabled)
         } else {
           await webServerCLIConfig.handler(argv)
         }

diff --git a/packages/cli/src/commands/serveBothHandler.js b/packages/cli/src/commands/serveBothHandler.js
@@ -79,7 +79,7 @@ export const bothServerFileHandler = async (argv) => {
   }
 }
 
-export const bothSsrRscServerHandler = async (argv) => {
+export const bothSsrRscServerHandler = async (argv, rscEnabled) => {
   const apiPromise = apiServerHandler({
     apiRootPath: argv.apiRootPath,
     host: argv.apiHost,
@@ -92,6 +92,13 @@ export const bothSsrRscServerHandler = async (argv) => {
     cwd: getPaths().web.base,
     stdio: 'inherit',
     shell: true,
+    env: rscEnabled
+      ? {
+          // TODO (RSC): Is this how we want to do it? If so, we need to find a way
+          // to merge this with users' NODE_OPTIONS
+          NODE_OPTIONS: '--conditions react-server',
+        }
+      : undefined,
   })
 
   await Promise.all([apiPromise, fePromise])

diff --git a/packages/cli/src/commands/serveWebHandler.js b/packages/cli/src/commands/serveWebHandler.js
@@ -2,10 +2,17 @@ import execa from 'execa'
 
 import { getPaths } from '@redwoodjs/project-config'
 
-export const webSsrServerHandler = async () => {
+export const webSsrServerHandler = async (rscEnabled) => {
   await execa('yarn', ['rw-serve-fe'], {
     cwd: getPaths().web.base,
     stdio: 'inherit',
     shell: true,
+    env: rscEnabled
+      ? {
+          // TODO (RSC): Is this how we want to do it? If so, we need to find a way
+          // to merge this with users' NODE_OPTIONS
+          NODE_OPTIONS: '--conditions react-server',
+        }
+      : undefined,
   })
 }
diff --git a/packages/internal/src/generate/typeDefinitions.ts b/packages/internal/src/generate/typeDefinitions.ts
@@ -384,7 +384,7 @@ declare module '@storybook/react' {
   )
 
   const hasCliStorybookVite = Object.keys(
-    packageJson['devDependencies']
+    packageJson['devDependencies'],
   ).includes('@redwoodjs/cli-storybook-vite')
 
   if (hasCliStorybook || hasCliStorybookVite) {

diff --git a/packages/project-config/src/__tests__/paths.test.ts b/packages/project-config/src/__tests__/paths.test.ts
@@ -149,11 +149,11 @@ describe('paths', () => {
             'server',
             'entry.server.mjs',
           ),
-          distRscEntryServer: path.join(
+          distServerEntryServer: path.join(
             FIXTURE_BASEDIR,
             'web',
             'dist',
-            'rsc',
+            'server',
             'entry.server.mjs',
           ),
           distRouteHooks: path.join(
@@ -433,11 +433,11 @@ describe('paths', () => {
             'server',
             'entry.server.mjs',
           ),
-          distRscEntryServer: path.join(
+          distServerEntryServer: path.join(
             FIXTURE_BASEDIR,
             'web',
             'dist',
-            'rsc',
+            'server',
             'entry.server.mjs',
           ),
           distDocumentServer: path.join(
@@ -765,11 +765,11 @@ describe('paths', () => {
             'server',
             'entry.server.mjs',
           ),
-          distRscEntryServer: path.join(
+          distServerEntryServer: path.join(
             FIXTURE_BASEDIR,
             'web',
             'dist',
-            'rsc',
+            'server',
             'entry.server.mjs',
           ),
           distDocumentServer: path.join(
@@ -1050,11 +1050,11 @@ describe('paths', () => {
             'server',
             'entry.server.mjs',
           ),
-          distRscEntryServer: path.join(
+          distServerEntryServer: path.join(
             FIXTURE_BASEDIR,
             'web',
             'dist',
-            'rsc',
+            'server',
             'entry.server.mjs',
           ),
           distDocumentServer: path.join(

diff --git a/packages/project-config/src/paths.ts b/packages/project-config/src/paths.ts
@@ -52,7 +52,7 @@ export interface WebPaths {
   distRsc: string
   distServer: string
   distEntryServer: string
-  distRscEntryServer: string
+  distServerEntryServer: string
   distDocumentServer: string
   distRouteHooks: string
   distRscEntries: string
@@ -252,7 +252,10 @@ export const getPaths = (BASE_DIR: string = getBaseDir()): Paths => {
         BASE_DIR,
         PATH_WEB_DIR_DIST_SERVER_ENTRY_SERVER,
       ),
-      distRscEntryServer: path.join(BASE_DIR, 'web/dist/rsc/entry.server.mjs'),
+      distServerEntryServer: path.join(
+        BASE_DIR,
+        'web/dist/server/entry.server.mjs',
+      ),
       distDocumentServer: path.join(BASE_DIR, PATH_WEB_DIR_DIST_DOCUMENT),
       distRouteHooks: path.join(BASE_DIR, PATH_WEB_DIR_DIST_SERVER_ROUTEHOOKS),
       distRscEntries: path.join(BASE_DIR, PATH_WEB_DIR_DIST_RSC_ENTRIES),

diff --git a/packages/storybook/src/plugins/docgen-handlers/actualNameHandler.ts b/packages/storybook/src/plugins/docgen-handlers/actualNameHandler.ts
@@ -9,46 +9,53 @@
  * directly from displayNameHandler, using the same approach as babel-plugin-react-docgen.
  */
 
-import type { Handler, NodePath, babelTypes as t } from 'react-docgen';
-import { utils } from 'react-docgen';
+import type { Handler, NodePath, babelTypes as t } from 'react-docgen'
+import { utils } from 'react-docgen'
 
-const { getNameOrValue, isReactForwardRefCall } = utils;
+const { getNameOrValue, isReactForwardRefCall } = utils
 
-const actualNameHandler: Handler = function actualNameHandler(documentation, componentDefinition) {
+const actualNameHandler: Handler = function actualNameHandler(
+  documentation,
+  componentDefinition,
+) {
   if (
-    (componentDefinition.isClassDeclaration() || componentDefinition.isFunctionDeclaration()) &&
+    (componentDefinition.isClassDeclaration() ||
+      componentDefinition.isFunctionDeclaration()) &&
     componentDefinition.has('id')
   ) {
     documentation.set(
       'actualName',
-      getNameOrValue(componentDefinition.get('id') as NodePath<t.Identifier>)
-    );
+      getNameOrValue(componentDefinition.get('id') as NodePath<t.Identifier>),
+    )
   } else if (
     componentDefinition.isArrowFunctionExpression() ||
     componentDefinition.isFunctionExpression() ||
     isReactForwardRefCall(componentDefinition)
   ) {
-    let currentPath: NodePath = componentDefinition;
+    let currentPath: NodePath = componentDefinition
 
     while (currentPath.parentPath) {
       if (currentPath.parentPath.isVariableDeclarator()) {
-        documentation.set('actualName', getNameOrValue(currentPath.parentPath.get('id')));
-        return;
+        documentation.set(
+          'actualName',
+          getNameOrValue(currentPath.parentPath.get('id')),
+        )
+        return
       }
       if (currentPath.parentPath.isAssignmentExpression()) {
-        const leftPath = currentPath.parentPath.get('left');
+        const leftPath = currentPath.parentPath.get('left')
 
         if (leftPath.isIdentifier() || leftPath.isLiteral()) {
-          documentation.set('actualName', getNameOrValue(leftPath));
-          return;
+          documentation.set('actualName', getNameOrValue(leftPath))
+          return
         }
       }
 
-      currentPath = currentPath.parentPath;
+      currentPath = currentPath.parentPath
     }
     // Could not find an actual name
-    documentation.set('actualName', '');
+    documentation.set('actualName', '')
   }
-};
+}
 
-export default actualNameHandler;
+export default actualNameHandler
diff --git a/packages/vite/package.json b/packages/vite/package.json
@@ -34,6 +34,11 @@
       "react-server": "./dist/ServerRouter.js",
       "default": "./dist/ClientRouter.js"
     },
+    "./SsrRouter": {
+      "types": "./dist/SsrRouter.d.ts",
+      "react-server": "./dist/ServerRouter.js",
+      "default": "./dist/SsrRouter.js"
+    },
     "./react-node-loader": {
       "types": "./dist/react-server-dom-webpack/node-loader.d.ts",
       "default": "./dist/react-server-dom-webpack/node-loader.js"

diff --git a/packages/vite/src/SsrRouter.tsx b/packages/vite/src/SsrRouter.tsx
@@ -0,0 +1,39 @@
+// TODO (RSC): This should live in @redwoodjs/router I think. But we should
+// figure out what to do with ClientRouter first, and then we can think about
+// this file.
+
+import React, { useMemo } from 'react'
+
+import { analyzeRoutes } from '@redwoodjs/router/dist/analyzeRoutes'
+import { LocationProvider, useLocation } from '@redwoodjs/router/dist/location'
+import { namedRoutes } from '@redwoodjs/router/dist/namedRoutes'
+import type { RouterProps } from '@redwoodjs/router/dist/router'
+
+import { renderRoutesFromDist } from './clientSsr'
+
+export const Router = ({ paramTypes, children }: RouterProps) => {
+  return (
+    <LocationProvider>
+      <LocationAwareRouter paramTypes={paramTypes}>
+        {children}
+      </LocationAwareRouter>
+    </LocationProvider>
+  )
+}
+
+const LocationAwareRouter = ({ paramTypes, children }: RouterProps) => {
+  const { pathname } = useLocation()
+
+  const { namedRoutesMap } = useMemo(() => {
+    return analyzeRoutes(children, {
+      currentPathName: pathname,
+      userParamTypes: paramTypes,
+    })
+  }, [pathname, children, paramTypes])
+
+  // Assign namedRoutes so it can be imported like import {routes} from 'rwjs/router'
+  // Note that the value changes at runtime
+  Object.assign(namedRoutes, namedRoutesMap)
+
+  return renderRoutesFromDist(pathname)
+}
diff --git a/packages/vite/src/buildFeServer.ts b/packages/vite/src/buildFeServer.ts
@@ -38,7 +38,9 @@ export const buildFeServer = async ({ verbose, webDir }: BuildOptions = {}) => {
   }
 
   if (rscEnabled) {
-    await buildRscClientAndServer()
+    await buildRscClientAndServer({ verbose })
+  } else {
+    await buildForStreamingServer({ verbose })
   }
 
   // We generate the RSC client bundle in the rscBuildClient function
@@ -48,8 +50,6 @@ export const buildFeServer = async ({ verbose, webDir }: BuildOptions = {}) => {
     await buildWeb({ verbose })
   }
 
-  await buildForStreamingServer({ verbose, rscEnabled })
-
   await buildRouteHooks(verbose, rwPaths)
 
   // Write a route manifest

diff --git a/packages/vite/src/buildRscClientAndServer.ts b/packages/vite/src/buildRscClientAndServer.ts
@@ -3,15 +3,22 @@ import { rscBuildClient } from './rsc/rscBuildClient.js'
 import { rscBuildCopyCssAssets } from './rsc/rscBuildCopyCssAssets.js'
 import { rscBuildEntriesMappings } from './rsc/rscBuildEntriesFile.js'
 import { rscBuildForServer } from './rsc/rscBuildForServer.js'
+import { rscBuildForSsr } from './rsc/rscBuildForSsr.js'
 import { rscBuildRwEnvVars } from './rsc/rscBuildRwEnvVars.js'
 
-export const buildRscClientAndServer = async () => {
+export const buildRscClientAndServer = async ({
+  verbose = false,
+}: {
+  verbose?: boolean
+}) => {
   // Analyze all files and generate a list of RSCs and RSFs
   const { clientEntryFiles, serverEntryFiles } = await rscBuildAnalyze()
 
   // Generate the client bundle
   const clientBuildOutput = await rscBuildClient(clientEntryFiles)
 
+  const ssrBuildOutput = await rscBuildForSsr({ clientEntryFiles, verbose })
+
   // Generate the server output
   const serverBuildOutput = await rscBuildForServer(
     clientEntryFiles,
@@ -30,6 +37,7 @@ export const buildRscClientAndServer = async () => {
   // Used by the RSC worker
   await rscBuildEntriesMappings(
     clientBuildOutput,
+    ssrBuildOutput,
     serverBuildOutput,
     clientEntryFiles,
   )