RSC Client Router (#10557)

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

@@ -7,14 +7,19 @@
 // 'src/pages/HomePage/HomePage.js'         -> HomePage
 // 'src/pages/Admin/BooksPage/BooksPage.js' -> AdminBooksPage
 
-import { Router, Route, Set } from '@redwoodjs/router'
+import { Route } from '@redwoodjs/router/dist/Route'
+import { Set } from '@redwoodjs/router/dist/Set'
+
+// @ts-expect-error - ESM issue. RW projects need to be ESM to properly pick up
+// on the types here
+import { Router } from '@redwoodjs/vite/Router'
 
 import NavigationLayout from './layouts/NavigationLayout/NavigationLayout'
 import NotFoundPage from './pages/NotFoundPage/NotFoundPage'
 
-const Routes = () => {
+const Routes = ({ location }: { location?: any }) => {
   return (
-    <Router>
+    <Router location={location}>
       <Set wrap={NavigationLayout}>
         <Route path="/" page={HomePage} name="home" />
         <Route path="/about" page={AboutPage} name="about" />

__fixtures__/test-project-rsa/web/src/entry.server.tsx

@@ -1,16 +1,22 @@
 import type { TagDescriptor } from '@redwoodjs/web/dist/components/htmlTags'
 
 import { Document } from './Document'
+import Routes from './Routes'
 
 interface Props {
   css: string[]
   meta?: TagDescriptor[]
+  location: {
+    pathname: string
+    hash?: string
+    search?: string
+  }
 }
 
-export const ServerEntry: React.FC<Props> = ({ css, meta }) => {
+export const ServerEntry: React.FC<Props> = ({ css, meta, location }) => {
   return (
     <Document css={css} meta={meta}>
-      <div>App</div>
+      <Routes location={location} />
     </Document>
   )
 }

__fixtures__/test-project-rsa/web/src/layouts/NavigationLayout/NavigationLayout.tsx

@@ -1,11 +1,15 @@
-import { Link, routes } from '@redwoodjs/router'
+import { namedRoutes as routes } from '@redwoodjs/router/dist/namedRoutes'
 
 import './NavigationLayout.css'
 
 type NavigationLayoutProps = {
   children?: React.ReactNode
 }
 
+const Link = (props: any) => {
+  return <a href={props.to}>{props.children}</a>
+}
+
 const NavigationLayout = ({ children }: NavigationLayoutProps) => {
   return (
     <div className="navigation-layout">

__fixtures__/test-project-rsc-kitchen-sink/web/src/Routes.tsx

@@ -7,30 +7,34 @@
 // 'src/pages/HomePage/HomePage.js'         -> HomePage
 // 'src/pages/Admin/BooksPage/BooksPage.js' -> AdminBooksPage
 
-import { Router, Route, Set } from '@redwoodjs/router'
+import { Route } from '@redwoodjs/router/dist/Route'
+import { Set } from '@redwoodjs/router/dist/Set'
+
+// @ts-expect-error - ESM issue. RW projects need to be ESM to properly pick up
+// on the types here
+import { Router } from '@redwoodjs/vite/Router'
 
 import NavigationLayout from './layouts/NavigationLayout/NavigationLayout'
 import ScaffoldLayout from './layouts/ScaffoldLayout/ScaffoldLayout'
-import NotFoundPage from './pages/NotFoundPage/NotFoundPage'
 
-const Routes = () => {
+const Routes = ({ location }: { location?: any }) => {
   return (
-    <Router>
-      <Set wrap={NavigationLayout}>
+    <Router location={location}>
+      <Set wrap={NavigationLayout} rnd={0.7}>
         <Route path="/" page={HomePage} name="home" />
         <Route path="/about" page={AboutPage} name="about" />
         <Route path="/multi-cell" page={MultiCellPage} name="multiCell" />
 
         <Set wrap={ScaffoldLayout} title="EmptyUsers" titleTo="emptyUsers" buttonLabel="New EmptyUser" buttonTo="newEmptyUser">
           <Route path="/empty-users/new" page={EmptyUserNewEmptyUserPage} name="newEmptyUser" />
-          {/* <Route path="/empty-users/{id:Int}/edit" page={EmptyUserEditEmptyUserPage} name="editEmptyUser" />
-            <Route path="/empty-users/{id:Int}" page={EmptyUserEmptyUserPage} name="emptyUser" /> */}
+          <Route path="/empty-users/{id:Int}/edit" page={EmptyUserEditEmptyUserPage} name="editEmptyUser" />
+          <Route path="/empty-users/{id:Int}" page={EmptyUserEmptyUserPage} name="emptyUser" />
           <Route path="/empty-users" page={EmptyUserEmptyUsersPage} name="emptyUsers" />
         </Set>
 
         <Set wrap={ScaffoldLayout} title="UserExamples" titleTo="userExamples" buttonLabel="New UserExample" buttonTo="newUserExample">
           <Route path="/user-examples/new" page={UserExampleNewUserExamplePage} name="newUserExample" />
-          {/* <Route path="/user-examples/{id:Int}/edit" page={UserExampleEditUserExamplePage} name="editUserExample" /> */}
+          <Route path="/user-examples/{id:Int}/edit" page={UserExampleEditUserExamplePage} name="editUserExample" />
           <Route path="/user-examples/{id:Int}" page={UserExampleUserExamplePage} name="userExample" />
           <Route path="/user-examples" page={UserExampleUserExamplesPage} name="userExamples" />
         </Set>

__fixtures__/test-project-rsc-kitchen-sink/web/src/components/EmptyUser/EmptyUsersCell/EmptyUsersCell.tsx

@@ -2,7 +2,9 @@
 
 import type { FindEmptyUsers, FindEmptyUsersVariables } from 'types/graphql'
 
-import { Link, routes } from '@redwoodjs/router'
+// TODO (RSC): Use Link from '@redwoodjs/router'
+// import { Link, routes } from '@redwoodjs/router'
+import { routes } from '@redwoodjs/router'
 import type {
   CellSuccessProps,
   CellFailureProps,
@@ -11,6 +13,10 @@ import type {
 
 import EmptyUsers from 'src/components/EmptyUser/EmptyUsers'
 
+const Link = (props: any) => {
+  return <a href={props.to}>{props.children}</a>
+}
+
 export const QUERY: TypedDocumentNode<FindEmptyUsers, FindEmptyUsersVariables> =
   gql`
     query FindEmptyUsers {

__fixtures__/test-project-rsc-kitchen-sink/web/src/components/ReadFileServerCell/ReadFileServerCell.tsx

@@ -0,0 +1,44 @@
+import fs from 'node:fs'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+import type { CellSuccessProps, CellFailureProps } from '@redwoodjs/web'
+
+export const data = async () => {
+  const srcPath = path.join(
+    path.dirname(fileURLToPath(import.meta.url)),
+    '..',
+    '..',
+    '..',
+    'src',
+    'components',
+    'ReadFileServerCell',
+    'ReadFileServerCell.tsx'
+  )
+
+  const file = fs.readFileSync(srcPath, 'utf-8')
+
+  return { file }
+}
+
+export const Loading = () => <div>Reading file...</div>
+
+export const Empty = () => <div>Empty file</div>
+
+export const Failure = ({ error }: CellFailureProps) => (
+  <div className="rw-cell-error">{error?.message}</div>
+)
+
+type SuccessProps = CellSuccessProps<Awaited<ReturnType<typeof data>>>
+export const Success = ({ file }: SuccessProps) => {
+  return (
+    <div className="read-file-server-cell">
+      <p>The source of this server cell:</p>
+      <pre
+        style={{ border: '1px solid gray', margin: '1em', background: '#ddd' }}
+      >
+        <code>{file}</code>
+      </pre>
+    </div>
+  )
+}

__fixtures__/test-project-rsc-kitchen-sink/web/src/entry.server.tsx

@@ -1,7 +1,7 @@
 import type { TagDescriptor } from '@redwoodjs/web/dist/components/htmlTags'
 
 import { Document } from './Document'
-import ServerRoutes from './ServerRoutes'
+import Routes from './Routes'
 
 interface Props {
   css: string[]
@@ -16,7 +16,7 @@ interface Props {
 export const ServerEntry: React.FC<Props> = ({ css, meta, location }) => {
   return (
     <Document css={css} meta={meta}>
-      <ServerRoutes location={location} />
+      <Routes location={location} />
     </Document>
   )
 }

__fixtures__/test-project-rsc-kitchen-sink/web/src/layouts/NavigationLayout/NavigationLayout.tsx

@@ -1,5 +1,7 @@
 import { namedRoutes as routes } from '@redwoodjs/router/dist/namedRoutes'
 
+import ReadFileServerCell from 'src/components/ReadFileServerCell'
+
 import './NavigationLayout.css'
 
 type NavigationLayoutProps = {
@@ -34,6 +36,7 @@ const NavigationLayout = ({ children, rnd }: NavigationLayoutProps) => {
         </ul>
       </nav>
       <div id="rnd">{Math.round(rnd * 100)}</div>
+      <ReadFileServerCell />
       <p>Layout end</p>
       <hr />
       <main>{children}</main>

packages/cli/src/commands/experimental/setupRscHandler.js

@@ -77,6 +77,30 @@ export const handler = async ({ force, verbose }) => {
         },
         options: { persistentOutput: true },
       },
+      {
+        title: `Overwriting entry.client${ext}...`,
+        task: async () => {
+          const entryClientTemplate = fs.readFileSync(
+            path.resolve(
+              __dirname,
+              'templates',
+              'rsc',
+              'entry.client.tsx.template',
+            ),
+            'utf-8',
+          )
+          const entryClientContent = isTypeScriptProject()
+            ? entryClientTemplate
+            : await transformTSToJS(
+                rwPaths.web.entryClient,
+                entryClientTemplate,
+              )
+
+          writeFile(rwPaths.web.entryClient, entryClientContent, {
+            overwriteExisting: true,
+          })
+        },
+      },
       {
         title: `Overwriting entry.server${ext}...`,
         task: async () => {

packages/cli/src/commands/experimental/templates/rsc/NavigationLayout.tsx.template

@@ -1,7 +1,11 @@
-import { Link, routes } from '@redwoodjs/router'
+import { namedRoutes as routes } from '@redwoodjs/router/dist/namedRoutes'
 
 import './NavigationLayout.css'
 
+const Link = (props: any) => {
+  return <a href={props.to}>{props.children}</a>
+}
+
 type NavigationLayoutProps = {
   children?: React.ReactNode
 }

packages/cli/src/commands/experimental/templates/rsc/Routes.tsx.template

@@ -7,14 +7,18 @@
 // 'src/pages/HomePage/HomePage.js'         -> HomePage
 // 'src/pages/Admin/BooksPage/BooksPage.js' -> AdminBooksPage
 
-import { Router, Route, Set } from '@redwoodjs/router'
+import { Route } from '@redwoodjs/router/dist/Route'
+import { Set } from '@redwoodjs/router/dist/Set'
+// @ts-expect-error - ESM issue. RW projects need to be ESM to properly pick up
+// on the types here
+import { Router } from '@redwoodjs/vite/Router'
 
 import NavigationLayout from 'src/layouts/NavigationLayout'
 import NotFoundPage from 'src/pages/NotFoundPage'
 
-const Routes = () => {
+const Routes = ({ location }: { location?: any }) => {
   return (
-    <Router>
+    <Router location={location}>
       <Set wrap={NavigationLayout}>
         <Route path="/" page={HomePage} name="home" />
         <Route path="/about" page={AboutPage} name="about" />

packages/cli/src/commands/experimental/templates/rsc/entry.client.tsx.template

@@ -0,0 +1,35 @@
+import { hydrateRoot, createRoot } from 'react-dom/client'
+
+import App from './App'
+import Routes from './Routes'
+
+/**
+ * When `#redwood-app` isn't empty then it's very likely that you're using
+ * pre-rendering. So React attaches event listeners to the existing markup
+ * rather than replacing it.
+ * https://react.dev/reference/react-dom/client/hydrateRoot
+ */
+const redwoodAppElement = document.getElementById('redwood-app')
+
+if (!redwoodAppElement) {
+  throw new Error(
+    "Could not find an element with ID 'redwood-app'. Please ensure it " +
+      "exists in your 'web/src/index.html' file."
+  )
+}
+
+if (redwoodAppElement.children?.length > 0) {
+  hydrateRoot(
+    redwoodAppElement,
+    <App>
+      <Routes />
+    </App>
+  )
+} else {
+  const root = createRoot(redwoodAppElement)
+  root.render(
+    <App>
+      <Routes />
+    </App>
+  )
+}