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

…d-cookies-dbauth

* 'main' of github.com:redwoodjs/redwood:
  fix(dependencies): Use RW-specific version of apollo ssr package (redwoodjs#9992)
  RSC: chore(test): Update RSC test fixture project (redwoodjs#9990)
  RSC: createServerCell (redwoodjs#9987)
  chore(refactor): Router: Splitting things up into smaller files (redwoodjs#9988)
  chore(project-config): make chore changes to trigger ci (redwoodjs#9985)

__fixtures__/test-project-rsc-external-packages-and-cells/.vscode/settings.json

@@ -3,7 +3,7 @@
   "files.trimTrailingWhitespace": true,
   "editor.formatOnSave": false,
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   },
   "[prisma]": {
     "editor.formatOnSave": true

__fixtures__/test-project-rsc-external-packages-and-cells/README.md

@@ -1,10 +1,14 @@
-RW smoke-test fixture project for an app that uses RSC and imports external npm
-packages
+RW smoke-test fixture project for an app that tests two RSC related features
+  1. imports external npm packages
+  2. Uses client cells to do client-side gql data fetching
 
 Mainly these things are tested:
   * Importing a package with company scope (@ and / in its name)
   * Importing a package that uses the 'use client' directive
   * Using the 'client-only' package
   * Using the 'server-only' package
+  * Imports a traditional RW Cell into a page (that's, like all pages, a server
+    component) to verify that we can still do client side GQL data fetching
+    like we've always been able to do
 
 Used by `.github/actions/set-up-rsc-from-fixture`

__fixtures__/test-project-rsc-external-packages-and-cells/api/package.json

@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "private": true,
   "dependencies": {
-    "@redwoodjs/api": "7.0.0-canary.966",
-    "@redwoodjs/graphql-server": "7.0.0-canary.966"
+    "@redwoodjs/api": "7.0.0-canary.981",
+    "@redwoodjs/graphql-server": "7.0.0-canary.981"
   }
 }

__fixtures__/test-project-rsc-external-packages-and-cells/package.json

@@ -7,7 +7,7 @@
     ]
   },
   "devDependencies": {
-    "@redwoodjs/core": "7.0.0-canary.966"
+    "@redwoodjs/core": "7.0.0-canary.981"
   },
   "eslintConfig": {
     "extends": "@redwoodjs/eslint-config",

__fixtures__/test-project-rsc-external-packages-and-cells/web/package.json

@@ -11,17 +11,17 @@
     ]
   },
   "dependencies": {
-    "@redwoodjs/forms": "7.0.0-canary.966",
-    "@redwoodjs/router": "7.0.0-canary.966",
-    "@redwoodjs/web": "7.0.0-canary.966",
+    "@redwoodjs/forms": "7.0.0-canary.981",
+    "@redwoodjs/router": "7.0.0-canary.981",
+    "@redwoodjs/web": "7.0.0-canary.981",
     "@tobbe.dev/rsc-test": "0.0.3",
     "client-only": "0.0.1",
     "react": "0.0.0-experimental-e5205658f-20230913",
     "react-dom": "0.0.0-experimental-e5205658f-20230913",
     "server-only": "0.0.1"
   },
   "devDependencies": {
-    "@redwoodjs/vite": "7.0.0-canary.966",
+    "@redwoodjs/vite": "7.0.0-canary.981",
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.2.19"
   }

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

@@ -17,13 +17,14 @@ import NotFoundPage from './pages/NotFoundPage/NotFoundPage'
 const AboutPage = serve('AboutPage')
 const HomePage = serve('HomePage')
 const UserExampleUserExamplesPage = serve('UserExampleUserExamplesPage')
+const UserExampleNewUserExamplePage = serve('UserExampleNewUserExamplePage')
 
 const Routes = () => {
   return (
     <Router>
       <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/new" page={UserExampleNewUserExamplePage} name="newUserExample" />
+        {/* <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-external-packages-and-cells/web/src/components/UserExample/NewUserExample/NewUserExample.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { navigate, routes } from '@redwoodjs/router'
 import { useMutation } from '@redwoodjs/web'
 import { toast } from '@redwoodjs/web/toast'

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

@@ -1,8 +1,8 @@
-"use client"
+'use client'
 
 import type { FindUserExamples } from 'types/graphql'
 
-// import { Link, routes } from '@redwoodjs/router'
+import { Link, routes } from '@redwoodjs/router'
 import type { CellSuccessProps, CellFailureProps } from '@redwoodjs/web'
 
 import UserExamples from '../UserExamples/UserExamples'
@@ -22,10 +22,10 @@ export const Loading = () => <div>Loading...</div>
 export const Empty = () => {
   return (
     <div className="rw-text-center">
-      {'No userExamples yet. '}
-      {/* <Link to={routes.newUserExample()} className="rw-link"> */}
-      {'Create one?'}
-      {/* </Link> */}
+      No userExamples yet.{' '}
+      <Link to={routes.newUserExample()} className="rw-link">
+        Create one?
+      </Link>
     </div>
   )
 }

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

@@ -2,14 +2,18 @@ import { defineEntries } from '@redwoodjs/vite/entries'
 
 export default defineEntries(
   // getEntry
-  async (id) => {
+  async (id: string) => {
     switch (id) {
       case 'AboutPage':
         return import('./pages/AboutPage/AboutPage')
       case 'HomePage':
         return import('./pages/HomePage/HomePage')
       case 'UserExampleUserExamplesPage':
         return import('./pages/UserExample/UserExamplesPage/UserExamplesPage')
+      case 'UserExampleNewUserExamplePage':
+        return import(
+          './pages/UserExample/NewUserExamplePage/NewUserExamplePage'
+        )
       default:
         return null
     }

__fixtures__/test-project/web/src/layouts/BlogLayout/BlogLayout.tsx

@@ -2,7 +2,7 @@ type BlogLayoutProps = {
   children?: React.ReactNode
 }
 
-import { Link, routes } from '@redwoodjs/router'
+import { Link, NavLink, routes } from '@redwoodjs/router'
 
 import { useAuth } from 'src/auth'
 
@@ -23,48 +23,53 @@ const BlogLayout = ({ children }: BlogLayoutProps) => {
         <nav>
           <ul className="relative flex items-center font-light">
             <li>
-              <Link
+              <NavLink
                 className="rounded px-4 py-2 transition duration-100 hover:bg-blue-600"
+                activeClassName="py-2 px-4 hover:bg-blue-600 transition duration-100 rounded underline underline-offset-4"
                 to={routes.about()}
               >
                 About
-              </Link>
+              </NavLink>
             </li>
             <li>
-              <Link
+              <NavLink
                 className="rounded px-4 py-2 transition duration-100 hover:bg-blue-600"
+                activeClassName="py-2 px-4 hover:bg-blue-600 transition duration-100 rounded underline underline-offset-4"
                 to={routes.contactUs()}
               >
                 Contact Us
-              </Link>
+              </NavLink>
             </li>
             <li>
-              <Link
+              <NavLink
                 className="rounded px-4 py-2 transition duration-100 hover:bg-blue-600"
+                activeClassName="py-2 px-4 hover:bg-blue-600 transition duration-100 rounded underline underline-offset-4"
                 to={routes.posts()}
               >
                 Admin
-              </Link>
+              </NavLink>
             </li>
             {isAuthenticated && (
               <li>
-                <Link
+                <NavLink
                   className="rounded px-4 py-2 transition duration-100 hover:bg-blue-600"
+                  activeClassName="py-2 px-4 hover:bg-blue-600 transition duration-100 rounded underline underline-offset-4"
                   onClick={logOut}
                   to={''}
                 >
                   Log Out
-                </Link>
+                </NavLink>
               </li>
             )}
             {!isAuthenticated && (
               <li>
-                <Link
+                <NavLink
                   className="rounded px-4 py-2 transition duration-100 hover:bg-blue-600"
+                  activeClassName="py-2 px-4 hover:bg-blue-600 transition duration-100 rounded underline underline-offset-4"
                   to={routes.login()}
                 >
                   Log In
-                </Link>
+                </NavLink>
               </li>
             )}
           </ul>

packages/babel-config/src/plugins/babel-plugin-redwood-cell.ts

@@ -10,11 +10,19 @@ import type { PluginObj, types } from '@babel/core'
 // <YOUR CODE>
 // export default createCell({ QUERY, Loading, Success, Failure, isEmpty, Empty, beforeQuery, afterQuery, displayName })
 // ```
+//
+// To debug the output of the plugin, you can use the following:
+// ```
+// import generate from '@babel/generator'
+// // ...
+// console.log(generate(path.node).code)
+// ```
 
 // A cell can export the declarations below.
 const EXPECTED_EXPORTS_FROM_CELL = [
   'beforeQuery',
   'QUERY',
+  'DATA',
   'isEmpty',
   'afterQuery',
   'Loading',
@@ -31,12 +39,31 @@ export default function ({ types: t }: { types: typeof types }): PluginObj {
   let exportNames: string[] = []
   let hasDefaultExport = false
 
+  // TODO (RSC):
+  // This code relies on the fact that all cells first become client side
+  // cells. And then we do a second pass over all cells and transform them to
+  // server cells if applicable
+  // It'd be better if we could only do one pass over all cells. So the real
+  // todo here is to first figure out why we do two passes, and then update
+  // this code to directly generate `createCell` or `createServerCell` HoCs
+
   return {
     name: 'babel-plugin-redwood-cell',
     visitor: {
-      ExportDefaultDeclaration() {
+      ExportDefaultDeclaration(path) {
         hasDefaultExport = true
-        return
+
+        // This is for RSC cells:
+        // Determine if this is `export default createCell(...)`
+        // If it is, then we change it to `export default createServerCell(...)`
+        const declaration = path.node.declaration
+        if (
+          t.isCallExpression(declaration) &&
+          t.isIdentifier(declaration.callee) &&
+          declaration.callee.name === 'createCell'
+        ) {
+          declaration.callee.name = 'createServerCell'
+        }
       },
       ExportNamedDeclaration(path) {
         const declaration = path.node.declaration
@@ -58,15 +85,46 @@ export default function ({ types: t }: { types: typeof types }): PluginObj {
           exportNames.push(name)
         }
       },
+      ImportDeclaration(path) {
+        // This is for RSC cells:
+        // Change createCell imports to createServerCell
+        const source = path.node.source.value
+        if (source === '@redwoodjs/web') {
+          const specifiers = path.node.specifiers
+          const createCellSpecifier: types.ImportSpecifier | undefined =
+            specifiers.find((specifier): specifier is types.ImportSpecifier => {
+              return (
+                t.isImportSpecifier(specifier) &&
+                t.isIdentifier(specifier.imported) &&
+                specifier.imported.name === 'createCell'
+              )
+            })
+
+          if (
+            createCellSpecifier &&
+            t.isIdentifier(createCellSpecifier.imported)
+          ) {
+            createCellSpecifier.imported.name = 'createServerCell'
+            createCellSpecifier.local.name = 'createServerCell'
+
+            // Also update where we import from
+            path.node.source.value =
+              '@redwoodjs/web/dist/components/cell/createServerCell.js'
+          }
+        }
+      },
       Program: {
         exit(path) {
+          const hasQueryOrDataExport =
+            exportNames.includes('QUERY') || exportNames.includes('DATA')
+
           // If the file already has a default export then
           //   1. It's likely not a cell, or it's a cell that's already been
           //      wrapped in `createCell`
           //   2. If we added another default export we'd be breaking JS module
           //      rules. There can only be one default export.
-          // If there's no QUERY export it's not a valid cell
-          if (hasDefaultExport || !exportNames.includes('QUERY')) {
+          // If there's no QUERY or DATA export it's not a valid cell
+          if (hasDefaultExport || !hasQueryOrDataExport) {
             return
           }
 
@@ -98,10 +156,8 @@ export default function ({ types: t }: { types: typeof types }): PluginObj {
                       true
                     )
                   ),
-                  /**
-                   * Add the `displayName` property
-                   * so we can name the Cell after the filename.
-                   */
+                  // Add the `displayName` property so we can name the Cell
+                  // after the filename.
                   t.objectProperty(
                     t.identifier('displayName'),
                     t.stringLiteral(

packages/project-config/README.md

@@ -6,19 +6,3 @@
 > **Don't depend on this directly in a Redwood project**.
 
 This package offers functionality to parse Redwood's configuration file, redwood.toml, and a convenient way of getting a Redwood project's paths.
-
-## Package size
-
-| Version                                                                            | Publish | Install |
-| :--------------------------------------------------------------------------------- | :------ | :------ |
-| [v5.2.1](https://packagephobia.com/result?p=%40redwoodjs%2Fproject-config%405.2.1) | 96.6 kB | 809 kB  |
-
-## Dependency graphs
-
-### src
-
-![src](./dependencyGraph.src.svg)
-
-### dist
-
-![dist](./dependencyGraph.dist.svg)