Merge branch 'main' of github.com:redwoodjs/redwood into fix/enhance-…

…error-apollo-suspense * 'main' of github.com:redwoodjs/redwood: fix(CLI): merge NODE_OPTIONS in `yarn rw dev` (redwoodjs#9585) chore(release): configure aloglia to index docs chore(release): handle OTP for lerna publish RSC: No need to patch Vite anymore (redwoodjs#9636) RSC: Remove unused code. Improve code organization (redwoodjs#9631) chore(release): improve tooling chore: Linting and disable some console logs (redwoodjs#9635) chore: Update Testing documentation to link to How to Test Email/Mailer (redwoodjs#9634) chore(release): fix open answer Add vscode web debugger and compound (redwoodjs#9567) RSC: Use Routes.tsx for (client-side) routing (redwoodjs#9630) RSC: Add RW env var definitions to Vite config and include FatalErrorBoundary (redwoodjs#9622)
dac09 · Dec 7, 2023 · 184f969 · 184f969
2 parents 433b9a7 + 3ca1f03
commit 184f969
Show file tree

Hide file tree

Showing 51 changed files with 843 additions and 932 deletions.
diff --git a/__fixtures__/test-project-rsa/web/src/AboutCounter.tsx b/__fixtures__/test-project-rsa/web/src/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>
+  )
+}
diff --git a/__fixtures__/test-project-rsa/web/src/AboutPage.tsx b/__fixtures__/test-project-rsa/web/src/AboutPage.tsx
@@ -1,7 +1,7 @@
 import { Assets } from '@redwoodjs/vite/assets'
 import { ProdRwRscServerGlobal } from '@redwoodjs/vite/rwRscGlobal'
 
-import { Counter } from './Counter'
+import { AboutCounter } from './AboutCounter'
 
 import './AboutPage.css'
 
@@ -17,7 +17,8 @@ const AboutPage = () => {
       <Assets />
       <div style={{ border: '3px red dashed', margin: '1em', padding: '1em' }}>
         <h1>About Redwood</h1>
-        <Counter />
+        <AboutCounter />
+        <p>RSC on server: {globalThis.RWJS_EXP_RSC ? 'enabled' : 'disabled'}</p>
       </div>
     </div>
   )

diff --git a/__fixtures__/test-project-rsa/web/src/Routes.tsx b/__fixtures__/test-project-rsa/web/src/Routes.tsx
@@ -7,13 +7,22 @@
 // 'src/pages/HomePage/HomePage.js'         -> HomePage
 // 'src/pages/Admin/BooksPage/BooksPage.js' -> AdminBooksPage
 
-import { Router, Route } from '@redwoodjs/router'
+import { Router, Route, Set } from '@redwoodjs/router'
+import { serve } from '@redwoodjs/vite/client'
+
+import NavigationLayout from './layouts/NavigationLayout/NavigationLayout'
+import NotFoundPage from './pages/NotFoundPage/NotFoundPage'
+
+const AboutPage = serve('AboutPage')
+const HomePage = serve('HomePage')
 
 const Routes = () => {
   return (
     <Router>
-      <Route path="/about" page={AboutPage} name="about" />
-      <Route path="/" page={HomePage} name="home" />
+      <Set wrap={NavigationLayout}>
+        <Route path="/" page={HomePage} name="home" />
+        <Route path="/about" page={AboutPage} name="about" />
+      </Set>
       <Route notfound page={NotFoundPage} />
     </Router>
   )

diff --git a/__fixtures__/test-project-rsa/web/src/entry.client.tsx b/__fixtures__/test-project-rsa/web/src/entry.client.tsx
@@ -1,27 +1,19 @@
 import { createRoot } from 'react-dom/client'
 
-import { Route, Router, Set } from '@redwoodjs/router'
-import { serve } from '@redwoodjs/vite/client'
+import { FatalErrorBoundary } from '@redwoodjs/web'
 
-import NavigationLayout from './layouts/NavigationLayout/NavigationLayout'
-import NotFoundPage from './pages/NotFoundPage/NotFoundPage'
+import FatalErrorPage from './pages/FatalErrorPage/FatalErrorPage'
+import Routes from './Routes'
 
 const redwoodAppElement = document.getElementById('redwood-app')
 
-const AboutPage = serve('AboutPage')
-const HomePage = serve('HomePage')
-
 const root = createRoot(redwoodAppElement)
 
 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>
+    <FatalErrorBoundary page={FatalErrorPage}>
+      <Routes />
+    </FatalErrorBoundary>
   )
 }
 

diff --git a/__fixtures__/test-project-rsc-external-packages/web/src/AboutCounter.tsx b/__fixtures__/test-project-rsc-external-packages/web/src/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>
+  )
+}
diff --git a/__fixtures__/test-project-rsc-external-packages/web/src/AboutPage.tsx b/__fixtures__/test-project-rsc-external-packages/web/src/AboutPage.tsx
@@ -1,7 +1,7 @@
 import { Assets } from '@redwoodjs/vite/assets'
 import { ProdRwRscServerGlobal } from '@redwoodjs/vite/rwRscGlobal'
 
-import { Counter } from './Counter'
+import { AboutCounter } from './AboutCounter'
 
 import './AboutPage.css'
 
@@ -17,7 +17,8 @@ const AboutPage = () => {
       <Assets />
       <div style={{ border: '3px red dashed', margin: '1em', padding: '1em' }}>
         <h1>About Redwood</h1>
-        <Counter />
+        <AboutCounter />
+        <p>RSC on server: {globalThis.RWJS_EXP_RSC ? 'enabled' : 'disabled'}</p>
       </div>
     </div>
   )

diff --git a/__fixtures__/test-project-rsc-external-packages/web/src/Routes.tsx b/__fixtures__/test-project-rsc-external-packages/web/src/Routes.tsx
@@ -7,13 +7,22 @@
 // 'src/pages/HomePage/HomePage.js'         -> HomePage
 // 'src/pages/Admin/BooksPage/BooksPage.js' -> AdminBooksPage
 
-import { Router, Route } from '@redwoodjs/router'
+import { Router, Route, Set } from '@redwoodjs/router'
+import { serve } from '@redwoodjs/vite/client'
+
+import NavigationLayout from './layouts/NavigationLayout/NavigationLayout'
+import NotFoundPage from './pages/NotFoundPage/NotFoundPage'
+
+const AboutPage = serve('AboutPage')
+const HomePage = serve('HomePage')
 
 const Routes = () => {
   return (
     <Router>
-      <Route path="/about" page={AboutPage} name="about" />
-      <Route path="/" page={HomePage} name="home" />
+      <Set wrap={NavigationLayout}>
+        <Route path="/" page={HomePage} name="home" />
+        <Route path="/about" page={AboutPage} name="about" />
+      </Set>
       <Route notfound page={NotFoundPage} />
     </Router>
   )

diff --git a/__fixtures__/test-project-rsc-external-packages/web/src/entry.client.tsx b/__fixtures__/test-project-rsc-external-packages/web/src/entry.client.tsx
@@ -1,27 +1,19 @@
 import { createRoot } from 'react-dom/client'
 
-import { Route, Router, Set } from '@redwoodjs/router'
-import { serve } from '@redwoodjs/vite/client'
+import { FatalErrorBoundary } from '@redwoodjs/web'
 
-import NavigationLayout from './layouts/NavigationLayout/NavigationLayout'
-import NotFoundPage from './pages/NotFoundPage/NotFoundPage'
+import FatalErrorPage from './pages/FatalErrorPage/FatalErrorPage'
+import Routes from './Routes'
 
 const redwoodAppElement = document.getElementById('redwood-app')
 
-const AboutPage = serve('AboutPage')
-const HomePage = serve('HomePage')
-
 const root = createRoot(redwoodAppElement)
 
 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>
+    <FatalErrorBoundary page={FatalErrorPage}>
+      <Routes />
+    </FatalErrorBoundary>
   )
 }
 

diff --git a/__fixtures__/test-project/.vscode/launch.json b/__fixtures__/test-project/.vscode/launch.json
@@ -2,7 +2,7 @@
   "version": "0.3.0",
   "configurations": [
     {
-      "command": "yarn redwood dev --apiDebugPort 18911",
+      "command": "yarn redwood dev --apiDebugPort 18911", // you can add --fwd='--open=false' to prevent the browser from opening
       "name": "Run Dev Server",
       "request": "launch",
       "type": "node-terminal"
@@ -18,7 +18,16 @@
       "localRoot": "${workspaceFolder}/node_modules/@redwoodjs/api-server/dist",
       "remoteRoot": "${workspaceFolder}/node_modules/@redwoodjs/api-server/dist",
       "sourceMaps": true,
-      "restart": true
+      "restart": true,
+      "preLaunchTask": "WaitForDevServer",
+    },
+    {
+      "name": "Launch Web debugger",
+      "type": "chrome",
+      "request": "launch",
+      "url": "http://localhost:8910",
+      "webRoot": "${workspaceRoot}/web/src",
+      "preLaunchTask": "WaitForDevServer",
     },
     {
       "command": "yarn redwood test api",
@@ -32,5 +41,16 @@
       "request": "launch",
       "type": "node-terminal"
     },
+  ],
+  "compounds": [
+    {
+      "name": "Start Debug",
+      "configurations": [
+        "Run Dev Server",
+        "Attach API debugger",
+        "Launch Web debugger"
+      ],
+      "stopAll": true
+    }
   ]
 }
diff --git a/__fixtures__/test-project/.vscode/tasks.json b/__fixtures__/test-project/.vscode/tasks.json
@@ -0,0 +1,43 @@
+{
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "label": "WaitForDevServer",
+      "group": "none",
+      "type": "shell",
+      "windows": {
+        "command": "powershell",
+        "args": [
+          "-NoProfile",
+          "-ExecutionPolicy", "Bypass",
+          "$port = $env:PORT; while (-not (Test-NetConnection -ComputerName localhost -Port $port)) { Start-Sleep -Seconds 1 };"
+        ]
+      },
+      "linux": {
+        "command": "bash",
+        "args": [
+          "-c",
+          "port=$PORT; while ! nc -z localhost $port; do sleep 1; done;"
+        ]
+      },
+      "osx": {
+        "command": "bash",
+        "args": [
+          "-c",
+          "port=$PORT; while ! nc -z localhost $port; do sleep 1; done;"
+        ]
+      },
+      "options": {
+        "env": {
+          "port": "18911"
+        }
+      },
+      "presentation": {
+        "reveal": "silent",
+        "revealProblems": "onProblem",
+        "panel": "shared",
+        "close": true
+      }
+    },
+  ]
+}
diff --git a/docs/.node-version b/docs/.node-version
@@ -1 +1 @@
-18
+18.18.2
diff --git a/docs/docs/project-configuration-dev-test-build.mdx b/docs/docs/project-configuration-dev-test-build.mdx
@@ -104,40 +104,28 @@ You can find all the details in the [source](https://github.com/redwoodjs/redwoo
 
 You can customize the types that Redwood generates from your project too! This is documented in a bit more detail in the [Generated Types](typescript/generated-types#customising-codegen-config) doc.
 
-## Debugger configuration
-The `yarn rw dev` command is configured by default to launch a debugger on the port `18911`, your Redwood app also ships with default configuration to attach a debugger from VSCode.
-
-Simply run your dev server, then attach the debugger from the "run and debug" panel. Quick demo below:
-
-<ReactPlayer width='100%' height='100%' controls url='https://user-images.githubusercontent.com/1521877/159887978-95075ccd-d10c-403c-90cc-a5b944c429e3.mp4' />
+## Debug configurations
 
+### Dev Server
+The `yarn rw dev` command is configured by default to open a browser and a debugger on the port `18911` and your redwood app ships with several default configurations to debug with VSCode.
 
-<br/>
-
-> **ℹ️ Tip: Can't see the "Attach debugger" configuration?** In VSCode
->
-> You can grab the latest launch.json from the Redwood template [here](https://github.com/redwoodjs/redwood/blob/main/packages/create-redwood-app/templates/ts/.vscode/launch.json). Copy the contents into your project's `.vscode/launch.json`
-
-
-#### Customizing the debug port
-You can choose to use a different debug port in one of two ways:
-
+#### Customizing the configuration
 **a) Using the redwood.toml**
 
-Add/change the `debugPort` under your api settings
+Add/change the `debugPort` or `open` under your api settings
 
 ```toml title="redwood.toml"
 [web]
   # .
-  # .
 [api]
-  port = 8911
+  # .
   // highlight-next-line
-  debugPort = 18911 # 👈 change me!
+  debugPort = 18911 # change me!
+[browser]
+  // highlight-next-line
+  open = true # change me!
 ```
 
-If you set it to `false`, no debug port will be exposed. The `debugPort` is only ever used during development when running `yarn rw dev`
-
 **b) Pass a flag to `rw dev` command**
 
 You can also pass a flag when you launch your dev servers, for example:
@@ -149,6 +137,21 @@ The flag passed in the CLI will always take precedence over your setting in the
 
 Just remember to also change the port you are attaching to in your `./vscode/launch.json`
 
+### API and Web Debuggers
+Simply run your dev server, then attach the debugger from the "run and debug" panel. Quick demo below:
+
+<ReactPlayer width='100%' height='100%' controls url='https://user-images.githubusercontent.com/1521877/159887978-95075ccd-d10c-403c-90cc-a5b944c429e3.mp4' />
+
+### Compound Debugger
+The compound configuration is a combination of the dev, api and web configurations.
+It allows you to start all debugging configurations at once, facilitating simultaneous debugging of server and client-side code.
+
+<br/>
+
+> **ℹ️ Tip: Can't see the debug configurations?** In VSCode
+>
+> You can grab the latest launch.json from the Redwood template [here](https://github.com/redwoodjs/redwood/blob/main/packages/create-redwood-app/templates/ts/.vscode/launch.json). Copy the contents into your project's `.vscode/launch.json`
+
 ## Ignoring the `.yarn` folder
 
 The `.yarn` folder contains the most recent Yarn executable that Redwood supports

diff --git a/docs/docs/testing.md b/docs/docs/testing.md
@@ -1975,6 +1975,16 @@ console.log(testCacheClient.storage)
 This is mainly helpful when you are testing for a very specific value, or have edgecases in how the serialization/deserialization works in the cache.
 
 
+## Testing Mailer
+
+If your project uses [RedwoodJS Mailer](./mailer.md) to send emails, you can [also write tests](./mailer.md#testing) to make sure that email:
+
+* is sent to an sandbox inbox
+* renders properly
+* sets the expected to, from, cc, bcc, subject attributes based on the email sending logic
+* checks that the html and text content is set correctly
+
+Since these tests send mail to a sandbox inbox, you can be confident that no emails accidentally get sent into the wild as part of your test or CI runs.
 
 
 ## Wrapping Up

diff --git a/docs/netlify.toml b/docs/netlify.toml
@@ -279,3 +279,9 @@
   from = "/docs/3.2/*"
   to = "/docs/3.x/:splat"
   status = 301
+
+[[plugins]]
+  package = "@algolia/netlify-plugin-crawler"
+
+  [plugins.inputs]
+    branches = ['next']
diff --git a/package.json b/package.json
@@ -86,6 +86,7 @@
     "dependency-cruiser": "13.1.5",
     "dotenv": "16.3.1",
     "eslint": "8.55.0",
+    "execa": "5.1.1",
     "fast-glob": "3.3.2",
     "fs-extra": "11.2.0",
     "jest": "29.7.0",