Merge branch 'main' into renovate/babel-monorepo

.eslintrc.js

@@ -27,6 +27,7 @@ module.exports = {
     'packages/core/**/__fixtures__/**/*',
     'packages/codemods/**/__testfixtures__/**/*',
     'packages/core/config/storybook/**/*',
+    'packages/studio/dist-*/**/*',
   ],
   rules: {
     '@typescript-eslint/no-explicit-any': 'off',

.github/actions/telemetry_check/check.mjs

@@ -8,28 +8,6 @@ console.log(
   `Telemetry is being redirected to ${process.env.REDWOOD_REDIRECT_TELEMETRY}`
 )
 
-// All the fields we expect inside a telemetry packet
-const expectedPacketFields = [
-  'type',
-  'command',
-  'duration',
-  'uid',
-  'ci',
-  'redwoodCi',
-  'NODE_ENV',
-  'os',
-  'osVersion',
-  // "shell", // Not expected on windows
-  'nodeVersion',
-  'yarnVersion',
-  'npmVersion',
-  'redwoodVersion',
-  'system',
-  'complexity',
-  'sides',
-  'webBundler',
-]
-
 // Setup fake telemetry server
 const server = http.createServer((req, res) => {
   let data = ''
@@ -39,27 +17,8 @@ const server = http.createServer((req, res) => {
   req.on('end', () => {
     res.writeHead(200)
     res.end()
-
-    const packet = JSON.parse(data)
-
-    let hasAllFields = true
-    for (const field of expectedPacketFields) {
-      if (packet[field] === undefined) {
-        hasAllFields = false
-        console.error(`Telemetry packet is missing field "${field}"`)
-      }
-    }
-
-    const isCI = packet.ci ?? false
-
-    if (hasAllFields && isCI) {
-      console.log('Valid telemetry received')
-      process.exit(0)
-    } else {
-      console.error('Invalid telemetry received')
-      console.error(packet)
-      process.exit(1)
-    }
+    console.log('Telemetry packet received')
+    process.exit(0)
   })
 })
 
@@ -77,7 +36,7 @@ try {
   switch (mode) {
     case 'crwa':
       exitCode = await exec(
-        `yarn node ./packages/create-redwood-app/dist/create-redwood-app.js ../project-for-telemetry --typescript false --git false --yarn-install true`
+        `yarn node ./packages/create-redwood-app/dist/create-redwood-app.js ../project-for-telemetry --typescript true --git false --yarn-install true`
       )
       if (exitCode) {
         process.exit(1)

.gitignore

@@ -21,3 +21,6 @@ blog-test-project/*
 .pnp.*
 *.code-workspace
 .nova
+
+# For esbuild.
+**/meta.json

__fixtures__/test-project/README.md

@@ -4,7 +4,7 @@ Welcome to [RedwoodJS](https://redwoodjs.com)!
 
 > **Prerequisites**
 >
-> - Redwood requires [Node.js](https://nodejs.org/en/) (>=14.19.x <=16.x) and [Yarn](https://yarnpkg.com/) (>=1.15)
+> - Redwood requires [Node.js](https://nodejs.org/en/) (>=16.20 <=18.x) and [Yarn](https://yarnpkg.com/) (>=1.15)
 > - Are you on Windows? For best results, follow our [Windows development setup](https://redwoodjs.com/docs/how-to/windows-development-setup) guide
 
 Start by installing dependencies:

__fixtures__/test-project/web/package.json

@@ -25,8 +25,8 @@
   "devDependencies": {
     "autoprefixer": "^10.4.14",
     "postcss": "^8.4.21",
-    "postcss-loader": "^7.1.0",
-    "prettier-plugin-tailwindcss": "^0.2.5",
-    "tailwindcss": "^3.2.7"
+    "postcss-loader": "^7.2.4",
+    "prettier-plugin-tailwindcss": "^0.2.7",
+    "tailwindcss": "^3.3.1"
   }
 }

__fixtures__/test-project/web/src/components/BlogPost/BlogPost.tsx

@@ -29,7 +29,7 @@ const BlogPost = ({ blogPost }: Props) => {
               </Link>
             </h2>
           </header>
-          <div className="mt-2 mb-4 font-light text-gray-900">
+          <div className="mb-4 mt-2 font-light text-gray-900">
             {blogPost.body}
           </div>
         </>

__fixtures__/test-project/web/src/components/WaterfallBlogPostCell/WaterfallBlogPostCell.tsx

@@ -51,7 +51,7 @@ export const Success = ({
             {waterfallBlogPost.title}
           </h2>
         </header>
-        <div className="mt-2 mb-4 font-light text-gray-900">
+        <div className="mb-4 mt-2 font-light text-gray-900">
           {waterfallBlogPost.body}
         </div>
       </>

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

@@ -11,7 +11,7 @@ const BlogLayout = ({ children }: BlogLayoutProps) => {
 
   return (
     <>
-      <header className="relative flex items-center justify-between bg-blue-700 py-4 px-8 text-white">
+      <header className="relative flex items-center justify-between bg-blue-700 px-8 py-4 text-white">
         <h1 className="text-3xl font-semibold tracking-tight">
           <Link
             className="text-blue-400 transition duration-100 hover:text-blue-100"
@@ -24,23 +24,23 @@ const BlogLayout = ({ children }: BlogLayoutProps) => {
           <ul className="relative flex items-center font-light">
             <li>
               <Link
-                className="rounded py-2 px-4 transition duration-100 hover:bg-blue-600"
+                className="rounded px-4 py-2 transition duration-100 hover:bg-blue-600"
                 to={routes.about()}
               >
                 About
               </Link>
             </li>
             <li>
               <Link
-                className="rounded py-2 px-4 transition duration-100 hover:bg-blue-600"
+                className="rounded px-4 py-2 transition duration-100 hover:bg-blue-600"
                 to={routes.contactUs()}
               >
                 Contact Us
               </Link>
             </li>
             <li>
               <Link
-                className="rounded py-2 px-4 transition duration-100 hover:bg-blue-600"
+                className="rounded px-4 py-2 transition duration-100 hover:bg-blue-600"
                 to={routes.posts()}
               >
                 Admin
@@ -49,7 +49,7 @@ const BlogLayout = ({ children }: BlogLayoutProps) => {
             {isAuthenticated && (
               <li>
                 <Link
-                  className="rounded py-2 px-4 transition duration-100 hover:bg-blue-600"
+                  className="rounded px-4 py-2 transition duration-100 hover:bg-blue-600"
                   onClick={logOut}
                   to={''}
                 >
@@ -60,7 +60,7 @@ const BlogLayout = ({ children }: BlogLayoutProps) => {
             {!isAuthenticated && (
               <li>
                 <Link
-                  className="rounded py-2 px-4 transition duration-100 hover:bg-blue-600"
+                  className="rounded px-4 py-2 transition duration-100 hover:bg-blue-600"
                   to={routes.login()}
                 >
                   Log In

__fixtures__/test-project/web/src/scaffold.css

@@ -21,7 +21,7 @@
   @apply text-gray-500;
 }
 .rw-header {
-  @apply flex justify-between py-4 px-8;
+  @apply flex justify-between px-8 py-4;
 }
 .rw-main {
   @apply mx-4 pb-4;
@@ -34,13 +34,13 @@
   height: initial;
 }
 .rw-segment::-webkit-scrollbar-track {
-  @apply rounded-t-none rounded-b-[10px] border-0 border-t border-solid border-gray-200 bg-transparent p-[2px];
+  @apply rounded-b-[10px] rounded-t-none border-0 border-t border-solid border-gray-200 bg-transparent p-[2px];
 }
 .rw-segment::-webkit-scrollbar-thumb {
   @apply rounded-full border-[3px] border-solid border-transparent bg-zinc-400 bg-clip-content;
 }
 .rw-segment-header {
-  @apply bg-gray-200 py-3 px-4 text-gray-700;
+  @apply bg-gray-200 px-4 py-3 text-gray-700;
 }
 .rw-segment-main {
   @apply bg-gray-100 p-4;
@@ -89,13 +89,13 @@
   @apply mt-2 list-inside list-disc;
 }
 .rw-button {
-  @apply flex cursor-pointer justify-center rounded border-0 bg-gray-200 py-1 px-4 text-xs font-semibold uppercase leading-loose tracking-wide text-gray-500 no-underline transition duration-100;
+  @apply flex cursor-pointer justify-center rounded border-0 bg-gray-200 px-4 py-1 text-xs font-semibold uppercase leading-loose tracking-wide text-gray-500 no-underline transition duration-100;
 }
 .rw-button:hover {
   @apply bg-gray-500 text-white;
 }
 .rw-button.rw-button-small {
-  @apply rounded-sm py-1 px-2 text-xs;
+  @apply rounded-sm px-2 py-1 text-xs;
 }
 .rw-button.rw-button-green {
   @apply bg-green-500 text-white;
@@ -119,7 +119,7 @@
   @apply mr-1 text-xl leading-5;
 }
 .rw-button-group {
-  @apply my-3 mx-2 flex justify-center;
+  @apply mx-2 my-3 flex justify-center;
 }
 .rw-button-group .rw-button {
   @apply mx-1;

docs/docs/auth/dbauth.md

@@ -248,6 +248,27 @@ resetPassword: {
 
 This handler is invoked after the password has been successfully changed in the database. Returning something truthy (like `return user`) will automatically log the user in after their password is changed. If you'd like to return them to the login page and make them log in manually, `return false` and redirect the user in the Reset Password page.
 
+### usernameMatch
+
+This configuration allows you to perform a case insensitive check on a username at the point of user creation.
+
+```javascript
+signup: {
+  usernameMatch: 'insensitive'
+}
+```
+
+By default no setting is required. This is because each db has its own rules for enabling this feature. To enable please see the table below and pick the correct 'userMatchString' for your db of choice.
+
+| DB | Default  | usernameMatchString  | notes |
+|---|---|---|---|
+| Postgres  | 'default'  | 'insensitive'  | |
+| MySQL  | 'case-insensitive'  | N/A  | turned on by default so no setting required |
+| MongoDB  | 'default'  | 'insensitive'  |
+| SQLite | N/A  | N/A  | [Not Supported] Insensitive checks can only be defined at a per column level |
+| Microsoft SQL Server | 'case-insensitive' | N/A | turned on by default so no setting required |
+
+
 ### Cookie config
 
 These options determine how the cookie that tracks whether the client is authorized is stored in the browser. The default configuration should work for most use cases. If you serve your web and api sides from different domains you'll need to make some changes: set `SameSite` to `None` and then add [CORS configuration](#cors-config).

docs/docs/cells.md

@@ -354,7 +354,7 @@ When would you want to do this? If you just want a file to end in "Cell" for som
 
 ## Advanced Example: Implementing a Cell Yourself
 
-If we didn't do all that built-time stuff for you, how might you go about implementing a Cell yourself?
+If we didn't do all that build-time stuff for you, how might you go about implementing a Cell yourself?
 
 Consider the [example from the Tutorial](tutorial/chapter2/cells.md#our-first-cell) where we're fetching posts:
 

docs/docs/cli-commands.md

@@ -2043,7 +2043,7 @@ A canary release is published to npm every time a PR is merged to the `main` bra
 | Option          | Description                                                                                                                                                                                                        |
 | :-------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `--dry-run, -d` | Check for outdated packages without upgrading                                                                                                                                                                      |
-| `--tag, -t`     | Choices are "canary", "rc", or a specific version (e.g. "0.19.3"). WARNING: Unstable releases in the case of "canary" and "rc", which will force upgrade packages to the most recent release of the specified tag. |
+| `--tag, -t`     | Choices are "rc", "canary", "latest", "next", "experimental", or a specific version (e.g. "0.19.3"). WARNING: Unstable releases in the case of "canary", "rc", "next", and "experimental". And "canary" releases include breaking changes often requiring codemods if upgrading a project. |
 
 **Example**
 

docs/docs/deploy/serverless.md

@@ -4,6 +4,15 @@ description: Deploy to AWS with Serverless Framework
 
 # Deploy to AWS with Serverless Framework
 
+>⚠️ **Deprecated**
+>As of Redwood v5, we are deprecating this deploy setup as an "officially" supported provider. This means:
+>- For projects already using this deploy provider, there will be NO change at this time
+>- Both the associated `setup` and `deploy` commands will remain in the framework as is; when setup is run, there will be a “deprecation” message
+>- We will no longer run CI/CD on the Serverless-AWS deployments, which means we are no longer guaranteeing this deploy works with each new version
+>- We are exploring better options to deploy directly to AWS Lambdas; the current deploy commands will not be removed until we find a replacement
+>
+>For more details (e.g. why?) and current status, see the Forum post ["Deprecating support for Serverless Framework Deployments to AWS Lambdas"](https://community.redwoodjs.com/t/deprecating-support-for-serverless-framework-deployments-to-aws-lambdas/4755/10)
+
 >The following instructions assume you have read the [General Deployment Setup](./introduction.md#general-deployment-setup) section above.
 
 Yes, the name is confusing, but Serverless provides a very interesting option—deploy to your own cloud service account and skip the middleman entirely! By default, Serverless just orchestrates starting up services in your cloud provider of choice and pushing your code up to them. Any bill you receive is from your hosting provider (although many offer a generous free tier). You can optionally use the [Serverless Dashboard](https://www.serverless.com/dashboard/) to monitor your deploys and setup CI/CD to automatically deploy when pushing to your repo of choice. If you don't setup CI/CD you actually deploy from your development machine (or another designated machine you've setup to do the deployment).

docs/docs/environment-variables.md

@@ -17,7 +17,7 @@ For a reference on dotenv syntax, see the dotenv README's [Rules](https://github
 
 <!-- also in a Redwood app's base directory. -->
 
-Redwood also configures Webpack with `dotenv-webpack`, so that all references to `process.env` vars on the Web side will be replaced with the variable's actual value at built-time. More on this in [Web](#Web).
+Redwood also configures Webpack with `dotenv-webpack`, so that all references to `process.env` vars on the Web side will be replaced with the variable's actual value at build-time. More on this in [Web](#Web).
 
 ## Web
 
@@ -48,7 +48,7 @@ Note: if someone inspects your site's source, _they could see your `REDWOOD_ENV_
 
 #### Option 2: Prefixing with REDWOOD\_ENV\_
 
-In `.env`, if you prefix your environment variables with `REDWOOD_ENV_`, they'll be available via `process.env.REDWOOD_ENV_MY_VAR_NAME`, and will be dynamically replaced at built-time.
+In `.env`, if you prefix your environment variables with `REDWOOD_ENV_`, they'll be available via `process.env.REDWOOD_ENV_MY_VAR_NAME`, and will be dynamically replaced at build-time.
 
 Like the option above, these are also removed and replaced with the _actual value_ during build in order to be available in production.
 

docs/docs/graphql.md

@@ -1456,7 +1456,7 @@ The [GraphQL Playground](https://www.graphql-yoga.com/docs/features/graphiql) is
 
 [GraphQL Armor](https://escape.tech/graphql-armor/) is a middleware that adds a security layer the RedwoodJS GraphQL endpoint configured with sensible defaults.
 
-You don't have to configure anything to enforce protection against alias, cost, depth, directive, tokens abuse in GraphQL operations as well as to block field suggestions or revealing error messages that might leak sensitive infomration.
+You don't have to configure anything to enforce protection against alias, cost, depth, directive, tokens abuse in GraphQL operations as well as to block field suggestions or revealing error messages that might leak sensitive information.
 
 But, if you need to enable, disable to modify the default settings, GraphQL Armor is fully configurable in a per-plugin fashion.
 

docs/docs/how-to/using-a-third-party-api.md

@@ -66,7 +66,7 @@ For some reason it can take up to 30 minutes for OpenWeather to enable your API
 }
 ```
 
-Good ol' faithful JSON. Let's see, what can we use here to display on our site? How about the `name` of the city that the zip is in, the `main.temp` (listed here in Kelvin, so we'll need to [convert](https://www.google.com/search?q=297+kelvin+to+fahrenheit&oq=297+kelvin+to+farenheit)) and then under the `weather` key we have an array with a `main` that lists the current conditions in english. How about that `icon`? Turns out OpenWeather has some we can use! Just take the icon code and use it in a URL like http://openweathermap.org/img/wn/10d@2x.png
+Good ol' faithful JSON. Let's see, what can we use here to display on our site? How about the `name` of the city that the zip is in, the `main.temp` (listed here in Kelvin, so we'll need to [convert](https://www.google.com/search?q=297+kelvin+to+fahrenheit&oq=297+kelvin+to+fahrenheit)) and then under the `weather` key we have an array with a `main` that lists the current conditions in english. How about that `icon`? Turns out OpenWeather has some we can use! Just take the icon code and use it in a URL like http://openweathermap.org/img/wn/10d@2x.png
 
 ![rain icon](https://user-images.githubusercontent.com/300/79376259-c33c4c80-7f0e-11ea-8285-701375665451.png)
 

docs/docs/intro-to-servers.md

@@ -359,7 +359,7 @@ And you should be in!
 
 When connecting to a remote server, it would be nice if you could also SSH into other machines and have them identify you as *you*, on your personal computer, not as the server itself. By default this doesn't happen: making an SSH connection from your remote server uses the credentials on the server itself, meaning you'd have to go through all of the steps above to now treat the remote server as the client as whatever server *that* server wants to connect to as the host, allowing you to connect with your public key. Ugh.
 
-Luckly SSH has a mechanism that supports this: SSH Agent Forwarding.
+Luckily SSH has a mechanism that supports this: SSH Agent Forwarding.
 
 This is most useful when trying to deploy a codebase from GitHub to your remote server: you're already connected to the remote server as you, and you're already authorized to connect to GitHub, so just use those credentials. You can verify if this is already working for you: