RSC: Fake server-side routing (#9593)

__fixtures__/test-project-rsa/web/src/AboutPage.css

@@ -0,0 +1,2 @@
+.about-page {
+}

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

@@ -0,0 +1,26 @@
+import { Assets } from '@redwoodjs/vite/assets'
+import { ProdRwRscServerGlobal } from '@redwoodjs/vite/rwRscGlobal'
+
+import { Counter } from './Counter'
+
+import './AboutPage.css'
+
+// TODO (RSC) Something like this will probably be needed
+// const RwRscGlobal = import.meta.env.PROD ? ProdRwRscServerGlobal : DevRwRscServerGlobal;
+
+globalThis.rwRscGlobal = new ProdRwRscServerGlobal()
+
+const AboutPage = () => {
+  return (
+    <div className="about-page">
+      {/* TODO (RSC) <Assets /> should be part of the router later */}
+      <Assets />
+      <div style={{ border: '3px red dashed', margin: '1em', padding: '1em' }}>
+        <h1>About Redwood</h1>
+        <Counter />
+      </div>
+    </div>
+  )
+}
+
+export default AboutPage

__fixtures__/test-project-rsa/web/src/HomePage.css

@@ -0,0 +1,2 @@
+.home-page {
+}

__fixtures__/test-project-rsa/web/src/App.tsx → __fixtures__/test-project-rsa/web/src/HomePage.tsx

@@ -1,29 +1,29 @@
 import { Assets } from '@redwoodjs/vite/assets'
 import { ProdRwRscServerGlobal } from '@redwoodjs/vite/rwRscGlobal'
 
-// @ts-expect-error no types
-import styles from './App.module.css'
 import { onSend } from './chat'
 import { Form } from './Form'
+// @ts-expect-error no types
+import styles from './HomePage.module.css'
 
-import './App.css'
+import './HomePage.css'
 
 // TODO (RSC) Something like this will probably be needed
 // const RwRscGlobal = import.meta.env.PROD ? ProdRwRscServerGlobal : DevRwRscServerGlobal;
 
 globalThis.rwRscGlobal = new ProdRwRscServerGlobal()
 
-const App = ({ name = 'Anonymous' }) => {
+const HomePage = ({ name = 'Anonymous' }) => {
   return (
-    <>
+    <div className="home-page">
       {/* TODO (RSC) <Assets /> should be part of the router later */}
       <Assets />
       <div style={{ border: '3px red dashed', margin: '1em', padding: '1em' }}>
         <h1 className={styles.title}>Hello {name}!!</h1>
         <Form onSend={onSend} />
       </div>
-    </>
+    </div>
   )
 }
 
-export default App
+export default HomePage

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

@@ -12,6 +12,8 @@ import { Router, Route } from '@redwoodjs/router'
 const Routes = () => {
   return (
     <Router>
+      <Route path="/about" page={AboutPage} name="about" />
+      <Route path="/" page={HomePage} name="home" />
       <Route notfound page={NotFoundPage} />
     </Router>
   )

__fixtures__/test-project-rsa/web/src/entries.ts

@@ -4,8 +4,10 @@ export default defineEntries(
   // getEntry
   async (id) => {
     switch (id) {
-      case 'App':
-        return import('./App')
+      case 'AboutPage':
+        return import('./AboutPage')
+      case 'HomePage':
+        return import('./HomePage')
       default:
         return null
     }

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

@@ -1,10 +1,28 @@
 import { createRoot } from 'react-dom/client'
 
+import { Route, Router, Set } from '@redwoodjs/router'
 import { serve } from '@redwoodjs/vite/client'
 
+import NavigationLayout from './layouts/NavigationLayout/NavigationLayout'
+import NotFoundPage from './pages/NotFoundPage/NotFoundPage'
+
 const redwoodAppElement = document.getElementById('redwood-app')
 
-const App = serve('App')
+const AboutPage = serve('AboutPage')
+const HomePage = serve('HomePage')
 
 const root = createRoot(redwoodAppElement)
-root.render(<App name="Redwood RSAs" />)
+
+const App = () => {
+  return (
+    <Router>
+      <Set wrap={NavigationLayout}>
+        <Route path="/" page={HomePage} name="home" />
+        <Route path="/about" page={AboutPage} name="about" />
+      </Set>
+      <Route notfound page={NotFoundPage} />
+    </Router>
+  )
+}
+
+root.render(<App />)

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

@@ -1,20 +1,15 @@
-import { LocationProvider } from '@redwoodjs/router'
-
-import App from './App'
 import { Document } from './Document'
+import HomePage from './HomePage'
 
 interface Props {
-  url: string
   css: string[]
   meta?: any[]
 }
 
-export const ServerEntry: React.FC<Props> = ({ url, css, meta }) => {
+export const ServerEntry: React.FC<Props> = ({ css, meta }) => {
   return (
-    <LocationProvider location={{ pathname: url }}>
-      <Document css={css} meta={meta}>
-        <App />
-      </Document>
-    </LocationProvider>
+    <Document css={css} meta={meta}>
+      <HomePage />
+    </Document>
   )
 }

__fixtures__/test-project-rsa/web/src/index.css

@@ -0,0 +1,4 @@
+html, body {
+  margin: 0;
+  padding: 0;
+}

__fixtures__/test-project-rsa/web/src/index.html

@@ -5,6 +5,7 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <link rel="icon" type="image/png" href="/favicon.png" />
+  <link rel="stylesheet" href="index.css" />
   <script type="module" src="entry.client.tsx"></script>
 </head>
 

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

@@ -0,0 +1,32 @@
+.navigation-layout {
+  & nav {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px;
+    background-color: color-mix(in srgb, yellow 50%, transparent);
+    border-bottom: 2px dashed color-mix(in srgb, yellow 90%, black);
+  }
+
+  & ul {
+    list-style: none;
+    display: flex;
+    margin: 0;
+    padding: 0;
+  }
+
+  & li {
+    margin-right: 10px;
+  }
+
+  & a {
+    text-decoration: none;
+    color: #333;
+    padding: 5px;
+    border-bottom: 2px solid transparent;
+  }
+
+  & a:hover {
+    border-bottom: 2px solid #333;
+  }
+}

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

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import NavigationLayout from './NavigationLayout'
+
+const meta: Meta<typeof NavigationLayout> = {
+  component: NavigationLayout,
+}
+
+export default meta
+
+type Story = StoryObj<typeof NavigationLayout>
+
+export const Primary: Story = {}

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

@@ -0,0 +1,14 @@
+import { render } from '@redwoodjs/testing/web'
+
+import NavigationLayout from './NavigationLayout'
+
+//   Improve this test with help from the Redwood Testing Doc:
+//   https://redwoodjs.com/docs/testing#testing-pages-layouts
+
+describe('NavigationLayout', () => {
+  it('renders successfully', () => {
+    expect(() => {
+      render(<NavigationLayout />)
+    }).not.toThrow()
+  })
+})

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

@@ -0,0 +1,27 @@
+import { Link, routes } from '@redwoodjs/router'
+
+import './NavigationLayout.css'
+
+type NavigationLayoutProps = {
+  children?: React.ReactNode
+}
+
+const NavigationLayout = ({ children }: NavigationLayoutProps) => {
+  return (
+    <div className="navigation-layout">
+      <nav>
+        <ul>
+          <li>
+            <Link to={routes.home()}>Home</Link>
+          </li>
+          <li>
+            <Link to={routes.about()}>About</Link>
+          </li>
+        </ul>
+      </nav>
+      <main>{children}</main>
+    </div>
+  )
+}
+
+export default NavigationLayout

__fixtures__/test-project-rsc-external-packages/web/src/AboutPage.css

@@ -0,0 +1,2 @@
+.about-page {
+}

__fixtures__/test-project-rsc-external-packages/web/src/AboutPage.tsx

@@ -0,0 +1,26 @@
+import { Assets } from '@redwoodjs/vite/assets'
+import { ProdRwRscServerGlobal } from '@redwoodjs/vite/rwRscGlobal'
+
+import { Counter } from './Counter'
+
+import './AboutPage.css'
+
+// TODO (RSC) Something like this will probably be needed
+// const RwRscGlobal = import.meta.env.PROD ? ProdRwRscServerGlobal : DevRwRscServerGlobal;
+
+globalThis.rwRscGlobal = new ProdRwRscServerGlobal()
+
+const AboutPage = () => {
+  return (
+    <div className="about-page">
+      {/* TODO (RSC) <Assets /> should be part of the router later */}
+      <Assets />
+      <div style={{ border: '3px red dashed', margin: '1em', padding: '1em' }}>
+        <h1>About Redwood</h1>
+        <Counter />
+      </div>
+    </div>
+  )
+}
+
+export default AboutPage

__fixtures__/test-project-rsc-external-packages/web/src/HomePage.css

@@ -0,0 +1,2 @@
+.home-page {
+}

__fixtures__/test-project-rsc-external-packages/web/src/App.tsx → __fixtures__/test-project-rsc-external-packages/web/src/HomePage.tsx

@@ -3,26 +3,30 @@ import { RscForm } from '@tobbe.dev/rsc-test'
 import { Assets } from '@redwoodjs/vite/assets'
 import { ProdRwRscServerGlobal } from '@redwoodjs/vite/rwRscGlobal'
 
-// @ts-expect-error no types
-import styles from './App.module.css'
 import { onSend } from './actions'
 import { Counter } from './Counter'
+// @ts-expect-error no types
+import styles from './HomePage.module.css'
+
+import './HomePage.css'
 
-import './App.css'
+// TODO (RSC) Something like this will probably be needed
+// const RwRscGlobal = import.meta.env.PROD ? ProdRwRscServerGlobal : DevRwRscServerGlobal;
 
 globalThis.rwRscGlobal = new ProdRwRscServerGlobal()
 
-const App = ({ name = 'Anonymous' }) => {
+const HomePage = ({ name = 'Anonymous' }) => {
   return (
-    <>
+    <div className="home-page">
+      {/* TODO (RSC) <Assets /> should be part of the router later */}
       <Assets />
       <div style={{ border: '3px red dashed', margin: '1em', padding: '1em' }}>
         <h1 className={styles.title}>Hello {name}!!</h1>
         <RscForm onSend={onSend} />
         <Counter />
       </div>
-    </>
+    </div>
   )
 }
 
-export default App
+export default HomePage

__fixtures__/test-project-rsc-external-packages/web/src/Routes.tsx

@@ -12,6 +12,8 @@ import { Router, Route } from '@redwoodjs/router'
 const Routes = () => {
   return (
     <Router>
+      <Route path="/about" page={AboutPage} name="about" />
+      <Route path="/" page={HomePage} name="home" />
       <Route notfound page={NotFoundPage} />
     </Router>
   )

__fixtures__/test-project-rsc-external-packages/web/src/entries.ts

@@ -4,8 +4,10 @@ export default defineEntries(
   // getEntry
   async (id) => {
     switch (id) {
-      case 'App':
-        return import('./App')
+      case 'AboutPage':
+        return import('./AboutPage')
+      case 'HomePage':
+        return import('./HomePage')
       default:
         return null
     }

__fixtures__/test-project-rsc-external-packages/web/src/entry.client.tsx

@@ -1,10 +1,28 @@
 import { createRoot } from 'react-dom/client'
 
+import { Route, Router, Set } from '@redwoodjs/router'
 import { serve } from '@redwoodjs/vite/client'
 
+import NavigationLayout from './layouts/NavigationLayout/NavigationLayout'
+import NotFoundPage from './pages/NotFoundPage/NotFoundPage'
+
 const redwoodAppElement = document.getElementById('redwood-app')
 
-const App = serve('App')
+const AboutPage = serve('AboutPage')
+const HomePage = serve('HomePage')
 
 const root = createRoot(redwoodAppElement)
-root.render(<App name="Redwood RSAs" />)
+
+const App = () => {
+  return (
+    <Router>
+      <Set wrap={NavigationLayout}>
+        <Route path="/" page={HomePage} name="home" />
+        <Route path="/about" page={AboutPage} name="about" />
+      </Set>
+      <Route notfound page={NotFoundPage} />
+    </Router>
+  )
+}
+
+root.render(<App />)