RSC: Add MultiCellPage to test fixture (#10029)

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

@@ -21,13 +21,15 @@ const UserExampleUserExamplePage = serve('UserExampleUserExamplePage')
 const UserExampleNewUserExamplePage = serve('UserExampleNewUserExamplePage')
 const EmptyUserEmptyUsersPage = serve('EmptyUserEmptyUsersPage')
 const EmptyUserNewEmptyUserPage = serve('EmptyUserNewEmptyUserPage')
+const MultiCellPage = serve('MultiCellPage')
 
 const Routes = () => {
   return (
     <Router>
       <Set wrap={NavigationLayout}>
         <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" />

__fixtures__/test-project-rsc-external-packages-and-cells/web/src/components/RandomNumberServerCell/RandomNumberServerCell.css

@@ -0,0 +1,4 @@
+.random-number-server-cell {
+  border: 1px dotted gray;
+  padding: 1em;
+}

__fixtures__/test-project-rsc-external-packages-and-cells/web/src/components/RandomNumberServerCell/RandomNumberServerCell.tsx

@@ -0,0 +1,38 @@
+import type { CellSuccessProps, CellFailureProps } from '@redwoodjs/web'
+
+import { globalValues } from './actions'
+
+import './RandomNumberServerCell.css'
+
+interface DataArgs {
+  global?: boolean
+}
+
+export const data = async ({ global }: DataArgs) => {
+  const num = Math.round(Math.random() * 1000)
+  if (global) {
+    globalValues.num ??= num
+  }
+
+  return { num: global ? globalValues.num : num }
+}
+
+export const Loading = () => <div>Loading...</div>
+
+export const Empty = () => <div>Empty</div>
+
+export const Failure = ({ error }: CellFailureProps) => (
+  <div className="rw-cell-error">{error?.message}</div>
+)
+
+type SuccessProps = CellSuccessProps<Awaited<ReturnType<typeof data>>> &
+  DataArgs
+
+export const Success = ({ num, global }: SuccessProps) => {
+  return (
+    <div className="random-number-server-cell">
+      <h2>RandomNumberServerCell{global && ' (global)'}</h2>
+      <div>{num}</div>
+    </div>
+  )
+}

__fixtures__/test-project-rsc-external-packages-and-cells/web/src/components/RandomNumberServerCell/UpdateRandomButton.tsx

@@ -0,0 +1,16 @@
+'use client'
+
+import { updateRandom } from './actions.js'
+
+export const UpdateRandomButton = () => {
+  return (
+    <button
+      onClick={async () => {
+        const res = await updateRandom()
+        console.log('res', res)
+      }}
+    >
+      Update
+    </button>
+  )
+}

__fixtures__/test-project-rsc-external-packages-and-cells/web/src/components/RandomNumberServerCell/actions.ts

@@ -0,0 +1,11 @@
+'use server'
+
+export const globalValues = {
+  num: undefined as number,
+}
+
+export async function updateRandom() {
+  globalValues.num = Math.round(Math.random() * 1000)
+
+  return globalValues.num
+}

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

@@ -20,6 +20,8 @@ export default defineEntries(
         return import('./pages/EmptyUser/EmptyUsersPage/EmptyUsersPage')
       case 'EmptyUserNewEmptyUserPage':
         return import('./pages/EmptyUser/NewEmptyUserPage/NewEmptyUserPage')
+      case 'MultiCellPage':
+        return import('./pages/MultiCellPage/MultiCellPage')
       default:
         return null
     }

__fixtures__/test-project-rsc-external-packages-and-cells/web/src/layouts/NavigationLayout/NavigationLayout.tsx

@@ -23,6 +23,9 @@ const NavigationLayout = ({ children }: NavigationLayoutProps) => {
           <li>
             <Link to={routes.emptyUsers()}>Empty Users</Link>
           </li>
+          <li>
+            <Link to={routes.multiCell()}>Multi Cell</Link>
+          </li>
         </ul>
       </nav>
       <main>{children}</main>

__fixtures__/test-project-rsc-external-packages-and-cells/web/src/pages/MultiCellPage/MultiCellPage.css

@@ -0,0 +1,9 @@
+.multi-cell-page {
+  padding: 1em;
+}
+
+.multi-cell-page-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1em;
+}

__fixtures__/test-project-rsc-external-packages-and-cells/web/src/pages/MultiCellPage/MultiCellPage.tsx

@@ -0,0 +1,36 @@
+import { Assets } from '@redwoodjs/vite/assets'
+import { ProdRwRscServerGlobal } from '@redwoodjs/vite/rwRscGlobal'
+
+import { updateRandom } from 'src/components/RandomNumberServerCell/actions'
+import RandomNumberServerCell from 'src/components/RandomNumberServerCell/RandomNumberServerCell'
+import { UpdateRandomButton } from 'src/components/RandomNumberServerCell/UpdateRandomButton'
+
+import './MultiCellPage.css'
+
+// TODO (RSC) Something like this will probably be needed
+// const RwRscGlobal = import.meta.env.PROD ? ProdRwRscServerGlobal : DevRwRscServerGlobal;
+
+globalThis.rwRscGlobal = new ProdRwRscServerGlobal()
+
+const MultiCellPage = () => {
+  return (
+    <div className="multi-cell-page">
+      {/* TODO (RSC) <Assets /> should be part of the router later */}
+      <Assets />
+      <div className="multi-cell-page-grid">
+        <RandomNumberServerCell />
+        <RandomNumberServerCell />
+        <RandomNumberServerCell global />
+        <RandomNumberServerCell global />
+      </div>
+      <h3>Update Random Number (client)</h3>
+      <UpdateRandomButton />
+      <h3>Update Random Number (server)</h3>
+      <form action={updateRandom}>
+        <button type="submit">Update</button>
+      </form>
+    </div>
+  )
+}
+
+export default MultiCellPage