Merge branch 'main' into fix-chakra-ui-integration

README.md

@@ -164,7 +164,7 @@ for my nascent web app framework. Namely:
 And there you have it.
 
 ## Contributors
-*A gigantic "Thank YOU!" to everyone below who has contributed to one or more Redwood projects: [Framework](https://github.com/redwoodjs/redwood), [Website](https://github.com/redwoodjs/redwoodjs.com) (docs!), and [Create-Redwood Template](https://github.com/redwoodjs/create-redwood-app). 🚀*
+*A gigantic "Thank YOU!" to everyone below who has contributed to one or more Redwood projects: [Framework](https://github.com/redwoodjs/redwood), [Website](https://github.com/redwoodjs/redwoodjs.com) (docs!), and [Create-Redwood Template](https://github.com/redwoodjs/redwood/tree/main/packages/create-redwood-app/template). 🚀*
 
 ### Core Team
 <!-- prettier-ignore-start -->

docs/docs/authentication.md

@@ -1015,7 +1015,7 @@ console.log(context.currentUser)
 // }
 ```
 
-You can map the "raw decoded JWT" into a real user object by passing a `getCurrentUser` function to `createCreateGraphQLHandler`
+You can map the "raw decoded JWT" into a real user object by passing a `getCurrentUser` function to `createGraphQLHandler`
 
 Our recommendation is to create a `src/lib/auth.js|ts` file that exports a `getCurrentUser`. (Note: You may already have stub functions.)
 

docs/docs/contributing-walkthrough.md

@@ -84,12 +84,12 @@ All that said, we highly recommend using one of the following setups to maximize
 1. Use [Git for Windows and Git Bash](how-to/windows-development-setup.md) (included in installation)
 2. Use [WSL following this setup guide on the Forums](https://community.redwoodjs.com/t/windows-subsystem-for-linux-setup/2439)
 
-Lastly, the new GitPod integration is a great option and only getting better. You might just want to start using it from the beginning (see section below in “Local Development Setup”).
+Lastly, the new Gitpod integration is a great option and only getting better. You might just want to start using it from the beginning (see section below in “Local Development Setup”).
 
-**GitPod**
-We recently added an integration with [GitPod](http://gitpod.io) that automatically creates a Framework dev workspace, complete with test project, in a browser-based VS Code environment. It’s pretty amazing and we highly recommend giving it a shot. (If you’re developing on Windows, it’s also an amazing option for you anytime you run into something that isn’t working correctly or supported.)
+**Gitpod**
+We recently added an integration with [Gitpod](http://gitpod.io) that automatically creates a Framework dev workspace, complete with test project, in a browser-based VS Code environment. It’s pretty amazing and we highly recommend giving it a shot. (If you’re developing on Windows, it’s also an amazing option for you anytime you run into something that isn’t working correctly or supported.)
 
-But don’t skip out reading the following steps in “Local Development Setup” — GitPod uses the same workflow and tools to initialize. If you want to develop in GitPod, you’ll need to understand how it all works.
+But don’t skip out reading the following steps in “Local Development Setup” — Gitpod uses the same workflow and tools to initialize. If you want to develop in Gitpod, you’ll need to understand how it all works.
 
 But when you’re ready, learn how to use it in the section at the end [“GitPod: Browser-based Development”](#gitpod-browser-based-development).
 
@@ -113,7 +113,7 @@ There are several options for creating a local Redwood Project to use during dev
 With those details out of the way, now is the time to choose an option below that meets your needs based on functionality and codebase version.
 
 **Build a Functional Test Project [Recommended]**
-1. 👉 **Use the build script to create a test project**: From the Framework root directory, run `yarn build:test-project <path/to/directory>`. This command installs a new project using the Template codebase from your current Framework branch, it then adds Tutorial features, and finally it initializes the DB (with seed data!). It should work 90% of the time and is the recommended starting place. We also use this out-of-the-box with GitPod.
+1. 👉 **Use the build script to create a test project**: From the Framework root directory, run `yarn build:test-project <path/to/directory>`. This command installs a new project using the Template codebase from your current Framework branch, it then adds Tutorial features, and finally it initializes the DB (with seed data!). It should work 90% of the time and is the recommended starting place. We also use this out-of-the-box with Gitpod.
 
 **Other Options to create a project**
 
@@ -175,7 +175,7 @@ All of these checks are included in Redwood’s GitHub PR Continuous Integration
 
 > **Heads up for Windows Devs**
 > The Cypress E2E does *not* work on Windows. Two options are available if needed:
-> 1. Use GitPod (see related section for info)
+> 1. Use Gitpod (see related section for info)
 > 2. When you create a PR, just ask for help from a maintainer
 
 #### Step 5: Open a PR 🚀
@@ -197,8 +197,8 @@ What isn’t a fun experience is spending a whole bunch of time on code that end
 
 When in doubt, just try first and ask for help and direction!
 
-### GitPod: Browser-based Development
-[GitPod](http://gitpod.io) has recently been integrated with Redwood to JustWork™ with any branch or PR. When a virtual GitPod workspace is initialized, it automatically:
+### Gitpod: Browser-based Development
+[Gitpod](http://gitpod.io) has recently been integrated with Redwood to JustWork™ with any branch or PR. When a virtual Gitpod workspace is initialized, it automatically:
 1. Checks-out the code from your branch or PR
 2. Run Yarn installation
 3. Creates the functional Test Project via `yarn build:test-project`
@@ -207,19 +207,19 @@ When in doubt, just try first and ask for help and direction!
 6. 🤯
 
 > **Chrome works best**
-> We’ve noticed some bugs using GitPod with either Brave or Safari. Currently we recommend sticking to Chrome (although it’s worth trying out Edge and Firefox).
+> We’ve noticed some bugs using Gitpod with either Brave or Safari. Currently we recommend sticking to Chrome (although it’s worth trying out Edge and Firefox).
 
-**Demo of GitPod**
-David briefly walks-through an automatically prebuilt GitPod workspace here:
-- [GitPod + RedwoodJS 3-minute Walkthrough](https://youtu.be/_kMuTW3x--s)
+**Demo of Gitpod**
+David briefly walks-through an automatically prebuilt Gitpod workspace here:
+- [Gitpod + RedwoodJS 3-minute Walkthrough](https://youtu.be/_kMuTW3x--s)
 
 Make sure you watch until the end where David shows how to set up your integration with GitHub and VS Code sync. 🤩
 
-**Start a GitPod Workspace**
-There are two ways to get started with GitPod + Redwood.
+**Start a Gitpod Workspace**
+There are two ways to get started with Gitpod + Redwood.
 
 *Option 1: Open a PR*
-Every PR will trigger a GitPod prebuild using the PR branch. Just look for GitPod in the list of checks at the bottom of the PR — click the “Details” link and away you’ll go!
+Every PR will trigger a Gitpod prebuild using the PR branch. Just look for Gitpod in the list of checks at the bottom of the PR — click the “Details” link and away you’ll go!
 
 <img width="350" alt="PR Checks" src="https://user-images.githubusercontent.com/2951/151928088-58e26232-b752-4471-adf4-a2bc59b79ac8.png" />
 

docs/docs/deploy/introduction.md

@@ -12,14 +12,13 @@ Redwood is designed for both serverless and traditional infrastructure deploymen
 4. the hosting provider deploys the built Web static assets to a CDN and the API code to a serverless backend (e.g. AWS Lambdas)
 
 Currently, these are the officially supported deploy targets:
+- Baremetal (physical server that you have SSH access to)
 - [Flightcontrol.dev](https://www.flightcontrol.dev?ref=redwood)
 - [Layer0.co](https://layer0.co)
 - [Netlify.com](https://www.netlify.com/)
 - [Render.com](https://render.com)
 - [Serverless.com](https://serverless.com)
 - [Vercel.com](https://vercel.com)
-- Baremetal (physical server that you have SSH access to)
-
 
 Redwood has a CLI generator that adds the code and configuration required by the specified provider (see the [CLI Doc](cli-commands.md#deploy-config) for more information):
 ```shell

docs/docs/environment-variables.md

@@ -69,6 +69,19 @@ The toml values are mapped as follows:
 
 See the [redwood.toml reference](app-configuration-redwood-toml.md#api-paths) for more details.
 
+## Development Fatal Error Page
+
+```text title=".env"
+REDWOOD_ENV_EDITOR=vscode
+```
+
+Redwood comes with a `FatalErrorPage` that displays helpful information—like the stack trace and the request—when something breaks.
+
+> `FatalErrorPage` isn't bundled when deploying to production
+
+As part of the stack trace, there are links to the original source files so that they can be quickly opened in your editor.
+The page defaults to VSCode, but you can override the editor by setting the environment variable `REDWOOD_ENV_EDITOR`.
+
 ## API
 
 ### Development

docs/docs/quick-start.md

@@ -117,14 +117,14 @@ To make the integration even more seamless, Redwood augments Jest with database
 Redwood is designed for both serverless deploy targets like Netlify and Vercel and serverful deploy targets like Render and AWS:
 
 ```
-yarn rw g setup deploy --help
+yarn rw setup deploy --help
 ```
 
 Don't go live without auth!
 Lock down your front and backends with Redwood's built-in, database-backed authentication system ([dbAuth](authentication.md#self-hosted-auth-installation-and-setup)), or integrate with nearly a dozen third party auth providers:
 
 ```
-yarn rw g setup auth --help
+yarn rw setup auth --help
 ```
 
 ## Next Steps

docs/docs/tutorial/chapter2/cells.md

@@ -270,17 +270,21 @@ The page should now show a dump of all the data you created for any blog posts y
 
 Now we're in the realm of good ol' React components, so just build out the `Success` component to display the blog post in a nicer format:
 
-```jsx {2-10} title="web/src/components/ArticlesCell/ArticlesCell.js"
+```jsx {3-13} title="web/src/components/ArticlesCell/ArticlesCell.js"
 export const Success = ({ articles }) => {
-  return articles.map((article) => (
-    <article key={article.id}>
-      <header>
-        <h2>{article.title}</h2>
-      </header>
-      <p>{article.body}</p>
-      <div>Posted at: {article.createdAt}</div>
-    </article>
-  ))
+  return (
+    <>
+      {articles.map((article) => (
+        <article key={article.id}>
+          <header>
+            <h2>{article.title}</h2>
+          </header>
+          <p>{article.body}</p>
+          <div>Posted at: {article.createdAt}</div>
+        </article>
+      ))}
+    </>
+  )
 }
 ```
 

docs/docs/tutorial/chapter2/routing-params.md

@@ -15,18 +15,22 @@ import { Link, routes } from '@redwoodjs/router'
 // QUERY, Loading, Empty and Failure definitions...
 
 export const Success = ({ articles }) => {
-  return articles.map((article) => (
-    <article key={article.id}>
-      <header>
-        <h2>
-          // highlight-next-line
-          <Link to={routes.article()}>{article.title}</Link>
-        </h2>
-      </header>
-      <p>{article.body}</p>
-      <div>Posted at: {article.createdAt}</div>
-    </article>
-  ))
+  return (
+    <>
+      {articles.map((article) => (
+        <article key={article.id}>
+          <header>
+            <h2>
+              // highlight-next-line
+              <Link to={routes.article()}>{article.title}</Link>
+            </h2>
+          </header>
+          <p>{article.body}</p>
+          <div>Posted at: {article.createdAt}</div>
+        </article>
+      ))}
+    </>
+  )
 }
 ```
 
@@ -306,10 +310,14 @@ export const Failure = ({ error }) => (
 )
 
 export const Success = ({ articles }) => {
-  return articles.map((article) => (
-    // highlight-next-line
-    <Article key={article.id} article={article} />
-  ))
+  return (
+    <>
+      {articles.map((article) => (
+        // highlight-next-line
+        <Article key={article.id} article={article} />
+      ))}
+    </>
+  )
 }
 ```
 

docs/docs/tutorial/chapter3/saving-data.md

@@ -195,7 +195,7 @@ export const deleteContact = ({ id }) => {
 
 Pretty simple. You can see here how the `createContact()` function expects the `input` argument and just passes that on to Prisma in the `create()` call.
 
-You can delete `updateContact` and `deleteContact` here if you want, but since there's no longer an assessible GraphQL field for them they can't be used by the client anyway.
+You can delete `updateContact` and `deleteContact` here if you want, but since there's no longer an accessible GraphQL field for them they can't be used by the client anyway.
 
 Before we plug this into the UI, let's take a look at a nifty GUI you get just by running `yarn redwood dev`.
 
@@ -299,10 +299,11 @@ export default ContactPage
 
 We reference the `createContact` mutation we defined in the Contacts SDL passing it an `input` object which will contain the actual name, email and message values.
 
-Next we'll call the `useMutation` hook provided by Redwood which will allow us to execute the mutation when we're ready (don't forget the `import` statement):
+Next we'll call the `useMutation` hook provided by Redwood which will allow us to execute the mutation when we're ready (don't forget to `import` it):
 
 ```jsx title="web/src/pages/ContactPage/ContactPage.js"
-import { MetaTags } from '@redwoodjs/web'
+// highlight-next-line
+import { MetaTags, useMutation } from '@redwoodjs/web'
 import {
   FieldError,
   Form,
@@ -311,8 +312,6 @@ import {
   TextAreaField,
   Submit,
 } from '@redwoodjs/forms'
-// highlight-next-line
-import { useMutation } from '@redwoodjs/web'
 
 const CREATE_CONTACT = gql`
   mutation CreateContactMutation($input: CreateContactInput!) {
@@ -399,7 +398,7 @@ If you'll recall `<Form>` gives us all of the fields in a nice object where the
 That means we can update the `onSubmit` function to invoke the mutation with the data it receives:
 
 ```jsx title="web/src/pages/ContactPage/ContactPage.js"
-import { MetaTags } from '@redwoodjs/web'
+import { MetaTags, useMutation } from '@redwoodjs/web'
 import {
   FieldError,
   Form,
@@ -408,7 +407,6 @@ import {
   TextAreaField,
   Submit,
 } from '@redwoodjs/forms'
-import { useMutation } from '@redwoodjs/web'
 
 const CREATE_CONTACT = gql`
   mutation CreateContactMutation($input: CreateContactInput!) {
@@ -542,7 +540,9 @@ Next, let's show a notification to let the user know their submission was succes
 Add the `onCompleted` callback to `useMutation` and include the **&lt;Toaster&gt;** component in our `return`, just before the **&lt;Form&gt;**:
 
 ```jsx title="web/src/pages/ContactPage/ContactPage.js"
-import { MetaTags } from '@redwoodjs/web'
+import { MetaTags, useMutation } from '@redwoodjs/web'
+// highlight-next-line
+import { toast, Toaster } from '@redwoodjs/web/toast'
 import {
   FieldError,
   Form,
@@ -551,9 +551,6 @@ import {
   TextAreaField,
   Submit,
 } from '@redwoodjs/forms'
-import { useMutation } from '@redwoodjs/web'
-// highlight-next-line
-import { toast, Toaster } from '@redwoodjs/web/toast'
 
 const CREATE_CONTACT = gql`
   mutation CreateContactMutation($input: CreateContactInput!) {
@@ -694,7 +691,8 @@ Remember when we said that `<Form>` had one more trick up its sleeve? Here it co
 Add a `<FormError>` component, passing the `error` constant we got from `useMutation` and a little bit of styling to `wrapperStyle` (don't forget the `import`). We'll also pass `error` to `<Form>` so it can setup a context:
 
 ```jsx title="web/src/pages/ContactPage/ContactPage.js"
-import { MetaTags } from '@redwoodjs/web'
+import { MetaTags, useMutation } from '@redwoodjs/web'
+import { toast, Toaster } from '@redwoodjs/web/toast'
 import {
   FieldError,
   Form,
@@ -705,8 +703,6 @@ import {
   TextAreaField,
   Submit,
 } from '@redwoodjs/forms'
-import { useMutation } from '@redwoodjs/web'
-import { toast, Toaster } from '@redwoodjs/web/toast'
 
 const CREATE_CONTACT = gql`
   mutation CreateContactMutation($input: CreateContactInput!) {
@@ -796,7 +792,7 @@ We get that error message at the top saying something went wrong in plain Englis
 > - `listStyle` / `listClassName`: the `<ul>` that contains the list of errors
 > - `listItemStyle` / `listItemClassName`: each individual `<li>` around each error
 
-This just scratches the service of what Service Validations can do. You can perform more complex validations, including combining multiple directives in a single call. What if we had a model representing a `Car`, and users could submit them to us for sale on our exclusive car shopping site. How do we make sure we only get the cream of the crop of motorized vehicles? Sevice validations would allow us to be very particular about the values someone would be allowed to submit, all without any custom checks, just built-in `validate()` calls:
+This just scratches the surface of what Service Validations can do. You can perform more complex validations, including combining multiple directives in a single call. What if we had a model representing a `Car`, and users could submit them to us for sale on our exclusive car shopping site. How do we make sure we only get the cream of the crop of motorized vehicles? Sevice validations would allow us to be very particular about the values someone would be allowed to submit, all without any custom checks, just built-in `validate()` calls:
 
 ```js
 export const createCar = ({ input }) => {
@@ -904,7 +900,8 @@ const [create, { loading, error }] = useMutation(CREATE_CONTACT, {
 Here's the entire page:
 
 ```jsx title="web/src/pages/ContactPage/ContactPage.js"
-import { MetaTags } from '@redwoodjs/web'
+import { MetaTags, useMutation } from '@redwoodjs/web'
+import { toast, Toaster } from '@redwoodjs/web/toast'
 import {
   FieldError,
   Form,
@@ -915,8 +912,6 @@ import {
   Submit,
   useForm,
 } from '@redwoodjs/forms'
-import { useMutation } from '@redwoodjs/web'
-import { toast, Toaster } from '@redwoodjs/web/toast'
 
 const CREATE_CONTACT = gql`
   mutation CreateContactMutation($input: CreateContactInput!) {