RSC: Use pages directory (#9660)

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

@@ -1,11 +1,18 @@
-import { FatalErrorBoundary } from '@redwoodjs/web'
+import { FatalErrorBoundary, RedwoodProvider } from '@redwoodjs/web'
+import { RedwoodApolloProvider } from '@redwoodjs/web/apollo'
 
 import FatalErrorPage from './pages/FatalErrorPage/FatalErrorPage'
 import Routes from './Routes'
 
+import './index.css'
+
 const App = () => (
   <FatalErrorBoundary page={FatalErrorPage}>
-    <Routes />
+    <RedwoodProvider titleTemplate="%PageTitle | %AppTitle">
+      <RedwoodApolloProvider>
+        <Routes />
+      </RedwoodApolloProvider>
+    </RedwoodProvider>
   </FatalErrorBoundary>
 )
 

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

@@ -5,9 +5,9 @@ export default defineEntries(
   async (id) => {
     switch (id) {
       case 'AboutPage':
-        return import('./AboutPage')
+        return import('./pages/AboutPage/AboutPage')
       case 'HomePage':
-        return import('./HomePage')
+        return import('./pages/HomePage/HomePage')
       default:
         return null
     }

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

@@ -5,7 +5,6 @@
   <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-rsc-external-packages/web/src/AboutPage.tsx → __fixtures__/test-project-rsa/web/src/pages/AboutPage/AboutPage.tsx

@@ -1,7 +1,7 @@
 import { Assets } from '@redwoodjs/vite/assets'
 import { ProdRwRscServerGlobal } from '@redwoodjs/vite/rwRscGlobal'
 
-import { AboutCounter } from './AboutCounter'
+import { AboutCounter } from '../../components/Counter/AboutCounter'
 
 import './AboutPage.css'
 

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

@@ -3,8 +3,8 @@ import { RscForm } from '@tobbe.dev/rsc-test'
 import { Assets } from '@redwoodjs/vite/assets'
 import { ProdRwRscServerGlobal } from '@redwoodjs/vite/rwRscGlobal'
 
+import { Counter } from '../../components/Counter/Counter'
 import { onSend } from './actions'
-import { Counter } from './Counter'
 // @ts-expect-error no types
 import styles from './HomePage.module.css'
 

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

@@ -1,11 +1,18 @@
-import { FatalErrorBoundary } from '@redwoodjs/web'
+import { FatalErrorBoundary, RedwoodProvider } from '@redwoodjs/web'
+import { RedwoodApolloProvider } from '@redwoodjs/web/apollo'
 
 import FatalErrorPage from './pages/FatalErrorPage/FatalErrorPage'
 import Routes from './Routes'
 
+import './index.css'
+
 const App = () => (
   <FatalErrorBoundary page={FatalErrorPage}>
-    <Routes />
+    <RedwoodProvider titleTemplate="%PageTitle | %AppTitle">
+      <RedwoodApolloProvider>
+        <Routes />
+      </RedwoodApolloProvider>
+    </RedwoodProvider>
   </FatalErrorBoundary>
 )
 

__fixtures__/test-project-rsc-external-packages/web/src/components/Counter/AboutCounter.tsx

@@ -0,0 +1,20 @@
+'use client'
+
+import React from 'react'
+
+// @ts-expect-error no types
+import styles from './Counter.module.css'
+import './Counter.css'
+
+export const AboutCounter = () => {
+  const [count, setCount] = React.useState(0)
+
+  return (
+    <div style={{ border: '3px blue dashed', margin: '1em', padding: '1em' }}>
+      <p>Count: {count}</p>
+      <button onClick={() => setCount((c) => c + 1)}>Increment</button>
+      <h3 className={styles.header}>This is a client component.</h3>
+      <p>RSC on client: {globalThis.RWJS_EXP_RSC ? 'enabled' : 'disabled'}</p>
+    </div>
+  )
+}

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

@@ -0,0 +1,7 @@
+/**
+ * This should affect all h3 elements on the page, both server components and
+ * client components. This is just standard CSS stuff
+ */
+h3 {
+  color: orange;
+}

__fixtures__/test-project-rsc-external-packages/web/src/components/Counter/Counter.module.css

@@ -0,0 +1,3 @@
+.header {
+  font-style: italic;
+}

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

@@ -0,0 +1,21 @@
+'use client'
+
+import React from 'react'
+
+import 'client-only'
+
+// @ts-expect-error no types
+import styles from './Counter.module.css'
+import './Counter.css'
+
+export const Counter = () => {
+  const [count, setCount] = React.useState(0)
+
+  return (
+    <div style={{ border: '3px blue dashed', margin: '1em', padding: '1em' }}>
+      <p>Count: {count}</p>
+      <button onClick={() => setCount((c) => c + 1)}>Increment</button>
+      <h3 className={styles.header}>This is a client component.</h3>
+    </div>
+  )
+}

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

@@ -5,9 +5,9 @@ export default defineEntries(
   async (id) => {
     switch (id) {
       case 'AboutPage':
-        return import('./AboutPage')
+        return import('./pages/AboutPage/AboutPage')
       case 'HomePage':
-        return import('./HomePage')
+        return import('./pages/HomePage/HomePage')
       default:
         return null
     }

__fixtures__/test-project-rsc-external-packages/web/src/index.html

@@ -5,7 +5,6 @@
   <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-rsc-external-packages/web/src/pages/AboutPage/AboutPage.css

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

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

@@ -0,0 +1,27 @@
+import { Assets } from '@redwoodjs/vite/assets'
+import { ProdRwRscServerGlobal } from '@redwoodjs/vite/rwRscGlobal'
+
+import { AboutCounter } from '../../components/Counter/AboutCounter'
+
+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>
+        <AboutCounter />
+        <p>RSC on server: {globalThis.RWJS_EXP_RSC ? 'enabled' : 'disabled'}</p>
+      </div>
+    </div>
+  )
+}
+
+export default AboutPage

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

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

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

@@ -0,0 +1,3 @@
+.title {
+  color: green;
+}

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

@@ -0,0 +1,32 @@
+import { RscForm } from '@tobbe.dev/rsc-test'
+
+import { Assets } from '@redwoodjs/vite/assets'
+import { ProdRwRscServerGlobal } from '@redwoodjs/vite/rwRscGlobal'
+
+import { Counter } from '../../components/Counter/Counter'
+import { onSend } from './actions'
+// @ts-expect-error no types
+import styles from './HomePage.module.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 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 HomePage

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

@@ -8,6 +8,7 @@ import {
   processPagesDir,
   getPaths,
   ensurePosixPath,
+  getConfig,
 } from '@redwoodjs/project-config'
 
 interface PluginOptions {
@@ -63,6 +64,14 @@ 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: {

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

@@ -102,7 +102,11 @@ export const handler = async ({ force, verbose }) => {
             ),
             'utf-8'
           )
-          const homePagePath = path.join(rwPaths.web.src, 'HomePage.tsx')
+          const homePagePath = path.join(
+            rwPaths.web.pages,
+            'HomePage',
+            'HomePage.tsx'
+          )
 
           writeFile(homePagePath, homePageTemplate, {
             overwriteExisting: force,
@@ -117,7 +121,11 @@ export const handler = async ({ force, verbose }) => {
             ),
             'utf-8'
           )
-          const aboutPagePath = path.join(rwPaths.web.src, 'AboutPage.tsx')
+          const aboutPagePath = path.join(
+            rwPaths.web.pages,
+            'AboutPage',
+            'AboutPage.tsx'
+          )
 
           writeFile(aboutPagePath, aboutPageTemplate, {
             overwriteExisting: force,
@@ -131,7 +139,11 @@ export const handler = async ({ force, verbose }) => {
             path.resolve(__dirname, 'templates', 'rsc', 'Counter.tsx.template'),
             'utf-8'
           )
-          const counterPath = path.join(rwPaths.web.src, 'Counter.tsx')
+          const counterPath = path.join(
+            rwPaths.web.components,
+            'Counter',
+            'Counter.tsx'
+          )
 
           writeFile(counterPath, counterTemplate, {
             overwriteExisting: force,
@@ -150,7 +162,11 @@ export const handler = async ({ force, verbose }) => {
             ),
             'utf-8'
           )
-          const counterPath = path.join(rwPaths.web.src, 'AboutCounter.tsx')
+          const counterPath = path.join(
+            rwPaths.web.components,
+            'Counter',
+            'AboutCounter.tsx'
+          )
 
           writeFile(counterPath, counterTemplate, {
             overwriteExisting: force,
@@ -163,23 +179,23 @@ export const handler = async ({ force, verbose }) => {
           const files = [
             {
               template: 'Counter.css.template',
-              path: 'Counter.css',
+              path: ['components', 'Counter', 'Counter.css'],
             },
             {
               template: 'Counter.module.css.template',
-              path: 'Counter.module.css',
+              path: ['components', 'Counter', 'Counter.module.css'],
             },
             {
               template: 'HomePage.css.template',
-              path: 'HomePage.css',
+              path: ['pages', 'HomePage', 'HomePage.css'],
             },
             {
               template: 'HomePage.module.css.template',
-              path: 'HomePage.module.css',
+              path: ['pages', 'HomePage', 'HomePage.module.css'],
             },
             {
               template: 'AboutPage.css.template',
-              path: 'AboutPage.css',
+              path: ['pages', 'AboutPage', 'AboutPage.css'],
             },
           ]
 
@@ -188,7 +204,7 @@ export const handler = async ({ force, verbose }) => {
               path.resolve(__dirname, 'templates', 'rsc', file.template),
               'utf-8'
             )
-            const filePath = path.join(rwPaths.web.src, file.path)
+            const filePath = path.join(rwPaths.web.src, ...file.path)
 
             writeFile(filePath, template, {
               overwriteExisting: force,

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

@@ -1,7 +1,7 @@
 import { Assets } from '@redwoodjs/vite/assets'
 import { ProdRwRscServerGlobal } from '@redwoodjs/vite/rwRscGlobal'
 
-import { AboutCounter } from './AboutCounter'
+import { AboutCounter } from '../../components/Counter/AboutCounter'
 
 import './AboutPage.css'
 

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

@@ -1,4 +1,5 @@
 import { FatalErrorBoundary, RedwoodProvider } from '@redwoodjs/web'
+import { RedwoodApolloProvider } from '@redwoodjs/web/apollo'
 
 import FatalErrorPage from './pages/FatalErrorPage/FatalErrorPage'
 import Routes from './Routes'
@@ -8,7 +9,9 @@ import './index.css'
 const App = () => (
   <FatalErrorBoundary page={FatalErrorPage}>
     <RedwoodProvider titleTemplate="%PageTitle | %AppTitle">
-      <Routes />
+      <RedwoodApolloProvider>
+        <Routes />
+      </RedwoodApolloProvider>
     </RedwoodProvider>
   </FatalErrorBoundary>
 )

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

@@ -1,7 +1,7 @@
 import { Assets } from '@redwoodjs/vite/assets'
 import { ProdRwRscServerGlobal } from '@redwoodjs/vite/rwRscGlobal'
 
-import { Counter } from './Counter'
+import { Counter } from '../../components/Counter/Counter'
 // @ts-expect-error no types
 import styles from './HomePage.module.css'
 

packages/cli/src/commands/experimental/templates/rsc/entries.ts.template

@@ -5,9 +5,9 @@ export default defineEntries(
   async (id) => {
     switch (id) {
       case 'AboutPage':
-        return import('./AboutPage')
+        return import('./pages/AboutPage/AboutPage')
       case 'HomePage':
-        return import('./HomePage')
+        return import('./pages/HomePage/HomePage')
       default:
         return null
     }