From ba63eebe24257676098709d0fd6c5732f46366fd Mon Sep 17 00:00:00 2001
From: Mehdi Achour <machour@gmail.com>
Date: Thu, 7 Apr 2022 16:34:35 +0100
Subject: [PATCH 01/15] docs(gotcha): Add an entry about hydration warnings
 (#2682)

---
 docs/pages/gotchas.md | 12 ++++++++++++
 1 file changed, 12 insertions(+)
diff --git a/docs/pages/gotchas.md b/docs/pages/gotchas.md
index 76438fa5f87..9144a3034cb 100644
--- a/docs/pages/gotchas.md
+++ b/docs/pages/gotchas.md
@@ -120,3 +120,15 @@ if (typeof document === "undefined") {
 This will work for all JS environments (Node.js, Deno, Workers, etc.).
 
 [esbuild]: https://esbuild.github.io/
+
+## Browser extensions injecting code
+
+You may run into this warning in the browser:
+
+```
+Warning: Did not expect server HTML to contain a <script> in <html>.
+```
+
+This is a hydration warning from React, and is most likely due to one of your browser extensions injecting scripts into the server-rendered HTML, creating a difference with the resulting HTML.
+
+Check out the page in incognito mode, the warning should disappear.
\ No newline at end of file

From 5d724d40703944937c413443db370efb6bddc37c Mon Sep 17 00:00:00 2001
From: Remix Run Bot <hello@remix.run>
Date: Thu, 7 Apr 2022 15:36:36 +0000
Subject: [PATCH 02/15] chore: format

---
 docs/pages/gotchas.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/pages/gotchas.md b/docs/pages/gotchas.md
index 9144a3034cb..9d0d7084966 100644
--- a/docs/pages/gotchas.md
+++ b/docs/pages/gotchas.md
@@ -131,4 +131,4 @@ Warning: Did not expect server HTML to contain a <script> in <html>.
 
 This is a hydration warning from React, and is most likely due to one of your browser extensions injecting scripts into the server-rendered HTML, creating a difference with the resulting HTML.
 
-Check out the page in incognito mode, the warning should disappear.
\ No newline at end of file
+Check out the page in incognito mode, the warning should disappear.

From 7d799e2b6d71f5d7ff572addca623545f975af96 Mon Sep 17 00:00:00 2001
From: Chance Strickland <hi@chance.dev>
Date: Fri, 8 Apr 2022 13:32:49 -0700
Subject: [PATCH 03/15] chore(tests): update outdated snapshots

---
 packages/remix-dev/__tests__/create-test.ts   | 26 +++++++++----------
 .../remix-dev/__tests__/readConfig-test.ts    |  3 ++-
 2 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/packages/remix-dev/__tests__/create-test.ts b/packages/remix-dev/__tests__/create-test.ts
index 81a91c1aef6..0988f713bc7 100644
--- a/packages/remix-dev/__tests__/create-test.ts
+++ b/packages/remix-dev/__tests__/create-test.ts
@@ -119,7 +119,7 @@ describe("the create command", () => {
     ]);
     expect(output).toMatchInlineSnapshot(`
       "
-      💿 That's it! \`cd\` into <TEMP_DIR>/example and check the README for development and deploy instructions!"
+      💿 That's it! \`cd\` into example and check the README for development and deploy instructions!"
     `);
     expect(fse.existsSync(path.join(projectDir, "package.json"))).toBeTruthy();
     expect(fse.existsSync(path.join(projectDir, "app/root.tsx"))).toBeTruthy();
@@ -139,7 +139,7 @@ describe("the create command", () => {
 
       💿 You've opted out of installing dependencies so we won't run the remix.init/index.js script for you just yet. Once you've installed dependencies, you can run it manually with \`npx remix init\`
 
-      💿 That's it! \`cd\` into <TEMP_DIR>/template and check the README for development and deploy instructions!"
+      💿 That's it! \`cd\` into template and check the README for development and deploy instructions!"
     `);
     expect(fse.existsSync(path.join(projectDir, "package.json"))).toBeTruthy();
     expect(fse.existsSync(path.join(projectDir, "app/root.tsx"))).toBeTruthy();
@@ -159,7 +159,7 @@ describe("the create command", () => {
 
       💿 You've opted out of installing dependencies so we won't run the remix.init/index.js script for you just yet. Once you've installed dependencies, you can run it manually with \`npx remix init\`
 
-      💿 That's it! \`cd\` into <TEMP_DIR>/repo and check the README for development and deploy instructions!"
+      💿 That's it! \`cd\` into repo and check the README for development and deploy instructions!"
     `);
     expect(fse.existsSync(path.join(projectDir, "package.json"))).toBeTruthy();
     expect(fse.existsSync(path.join(projectDir, "app/root.tsx"))).toBeTruthy();
@@ -179,7 +179,7 @@ describe("the create command", () => {
 
       💿 You've opted out of installing dependencies so we won't run the remix.init/index.js script for you just yet. Once you've installed dependencies, you can run it manually with \`npx remix init\`
 
-      💿 That's it! \`cd\` into <TEMP_DIR>/remote-tarball and check the README for development and deploy instructions!"
+      💿 That's it! \`cd\` into remote-tarball and check the README for development and deploy instructions!"
     `);
     expect(fse.existsSync(path.join(projectDir, "package.json"))).toBeTruthy();
     expect(fse.existsSync(path.join(projectDir, "app/root.tsx"))).toBeTruthy();
@@ -199,7 +199,7 @@ describe("the create command", () => {
 
       💿 You've opted out of installing dependencies so we won't run the remix.init/index.js script for you just yet. Once you've installed dependencies, you can run it manually with \`npx remix init\`
 
-      💿 That's it! \`cd\` into <TEMP_DIR>/diff-branch and check the README for development and deploy instructions!"
+      💿 That's it! \`cd\` into diff-branch and check the README for development and deploy instructions!"
     `);
     expect(fse.existsSync(path.join(projectDir, "package.json"))).toBeTruthy();
     expect(fse.existsSync(path.join(projectDir, "app/root.tsx"))).toBeTruthy();
@@ -216,7 +216,7 @@ describe("the create command", () => {
     ]);
     expect(output).toMatchInlineSnapshot(`
       "
-      💿 That's it! \`cd\` into <TEMP_DIR>/local-tarball and check the README for development and deploy instructions!"
+      💿 That's it! \`cd\` into local-tarball and check the README for development and deploy instructions!"
     `);
     expect(fse.existsSync(path.join(projectDir, "package.json"))).toBeTruthy();
     expect(fse.existsSync(path.join(projectDir, "app/root.tsx"))).toBeTruthy();
@@ -233,7 +233,7 @@ describe("the create command", () => {
     ]);
     expect(output).toMatchInlineSnapshot(`
       "
-      💿 That's it! \`cd\` into <TEMP_DIR>/file-url-tarball and check the README for development and deploy instructions!"
+      💿 That's it! \`cd\` into file-url-tarball and check the README for development and deploy instructions!"
     `);
     expect(fse.existsSync(path.join(projectDir, "package.json"))).toBeTruthy();
     expect(fse.existsSync(path.join(projectDir, "app/root.tsx"))).toBeTruthy();
@@ -254,7 +254,7 @@ describe("the create command", () => {
 
       💿 You've opted out of installing dependencies so we won't run the remix.init/index.js script for you just yet. Once you've installed dependencies, you can run it manually with \`npx remix init\`
 
-      💿 That's it! \`cd\` into <TEMP_DIR>/template-to-js and check the README for development and deploy instructions!"
+      💿 That's it! \`cd\` into template-to-js and check the README for development and deploy instructions!"
     `);
     expect(fse.existsSync(path.join(projectDir, "package.json"))).toBeTruthy();
     expect(fse.existsSync(path.join(projectDir, "app/root.jsx"))).toBeTruthy();
@@ -283,7 +283,7 @@ describe("the create command", () => {
 
       💿 You've opted out of installing dependencies so we won't run the remix.init/index.js script for you just yet. Once you've installed dependencies, you can run it manually with \`npx remix init\`
 
-      💿 That's it! \`cd\` into <TEMP_DIR>/local-directory and check the README for development and deploy instructions!"
+      💿 That's it! \`cd\` into local-directory and check the README for development and deploy instructions!"
     `);
     expect(fse.existsSync(path.join(projectDir, "package.json"))).toBeTruthy();
     expect(fse.existsSync(path.join(projectDir, "app/root.tsx"))).toBeTruthy();
@@ -303,7 +303,7 @@ describe("the create command", () => {
 
       💿 You've opted out of installing dependencies so we won't run the remix.init/index.js script for you just yet. Once you've installed dependencies, you can run it manually with \`npx remix init\`
 
-      💿 That's it! \`cd\` into <TEMP_DIR>/file-url-directory and check the README for development and deploy instructions!"
+      💿 That's it! \`cd\` into file-url-directory and check the README for development and deploy instructions!"
     `);
     expect(fse.existsSync(path.join(projectDir, "package.json"))).toBeTruthy();
     expect(fse.existsSync(path.join(projectDir, "app/root.tsx"))).toBeTruthy();
@@ -321,7 +321,7 @@ describe("the create command", () => {
     expect(output).toMatchInlineSnapshot(`
       "
       💿 Running remix.init script
-      💿 That's it! \`cd\` into <TEMP_DIR>/remix-init-auto and check the README for development and deploy instructions!"
+      💿 That's it! \`cd\` into remix-init-auto and check the README for development and deploy instructions!"
     `);
     expect(output).toContain(`💿 Running remix.init script`);
     expect(fse.existsSync(path.join(projectDir, "package.json"))).toBeTruthy();
@@ -344,7 +344,7 @@ describe("the create command", () => {
 
       💿 You've opted out of installing dependencies so we won't run the remix.init/index.js script for you just yet. Once you've installed dependencies, you can run it manually with \`npx remix init\`
 
-      💿 That's it! \`cd\` into <TEMP_DIR>/remix-init-manual and check the README for development and deploy instructions!"
+      💿 That's it! \`cd\` into remix-init-manual and check the README for development and deploy instructions!"
     `);
 
     output = "";
@@ -394,7 +394,7 @@ describe("the create command", () => {
 
       💿 You've opted out of installing dependencies so we won't run the remix.init/index.js script for you just yet. Once you've installed dependencies, you can run it manually with \`npx remix init\`
 
-      💿 That's it! \`cd\` into <TEMP_DIR>/invalid-remix-init-manual and check the README for development and deploy instructions!"
+      💿 That's it! \`cd\` into invalid-remix-init-manual and check the README for development and deploy instructions!"
     `);
 
     process.chdir(projectDir);
diff --git a/packages/remix-dev/__tests__/readConfig-test.ts b/packages/remix-dev/__tests__/readConfig-test.ts
index 6e5ec45e814..6d7dc58b0c5 100644
--- a/packages/remix-dev/__tests__/readConfig-test.ts
+++ b/packages/remix-dev/__tests__/readConfig-test.ts
@@ -17,6 +17,7 @@ describe("readConfig", () => {
         rootDirectory: expect.any(String),
         appDirectory: expect.any(String),
         cacheDirectory: expect.any(String),
+        devServerPort: expect.any(Number),
         serverBuildPath: expect.any(String),
         assetsBuildDirectory: expect.any(String),
       },
@@ -26,7 +27,7 @@ describe("readConfig", () => {
         "assetsBuildDirectory": Any<String>,
         "cacheDirectory": Any<String>,
         "devServerBroadcastDelay": 0,
-        "devServerPort": 8002,
+        "devServerPort": Any<Number>,
         "entryClientFile": "entry.client.tsx",
         "entryServerFile": "entry.server.tsx",
         "mdx": undefined,

From ef9e3053b01a0571471baffeb8edf139212c0a02 Mon Sep 17 00:00:00 2001
From: Anthony Morris <amorriscode@gmail.com>
Date: Sun, 10 Apr 2022 12:20:42 -0700
Subject: [PATCH 04/15] docs(pages/technical-explanation): update code
 highlighting (#2717)

---
 contributors.yml                    | 1 +
 docs/pages/technical-explanation.md | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/contributors.yml b/contributors.yml
index a0d2a64d1b9..14e980c3e37 100644
--- a/contributors.yml
+++ b/contributors.yml
@@ -14,6 +14,7 @@
 - andrelandgraf
 - andrewbrey
 - AndrewIngram
+- amorriscode
 - anishpras
 - anmolm96
 - anmonteiro
diff --git a/docs/pages/technical-explanation.md b/docs/pages/technical-explanation.md
index 7601a9e2185..3e8144c1da2 100644
--- a/docs/pages/technical-explanation.md
+++ b/docs/pages/technical-explanation.md
@@ -168,7 +168,7 @@ Taking our route module from before, here are a few small, but useful UX improve
 2. Focus the input when server side form validation fails
 3. Animate in the error messages
 
-```jsx nocopy lines=[4-6,8-12,21,22,28-30]
+```jsx nocopy lines=[4-6,8-12,23-26,30-32]
 export default function Projects() {
   const projects = useLoaderData();
   const actionData = useActionData();

From 47ca49c5221e1482a0b44cc622d9bc78a6906a5e Mon Sep 17 00:00:00 2001
From: "remix-cla-bot[bot]"
 <92060565+remix-cla-bot[bot]@users.noreply.github.com>
Date: Sun, 10 Apr 2022 19:20:45 +0000
Subject: [PATCH 05/15] chore: sort contributors list

---
 contributors.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/contributors.yml b/contributors.yml
index 14e980c3e37..5983368315f 100644
--- a/contributors.yml
+++ b/contributors.yml
@@ -11,10 +11,10 @@
 - Alarid
 - alex-ketch
 - alexuxui
+- amorriscode
 - andrelandgraf
 - andrewbrey
 - AndrewIngram
-- amorriscode
 - anishpras
 - anmolm96
 - anmonteiro

From 301c1f1cc159ddb96179034b521f981c82484421 Mon Sep 17 00:00:00 2001
From: athongsavath <39385037+athongsavath@users.noreply.github.com>
Date: Sun, 10 Apr 2022 15:22:13 -0400
Subject: [PATCH 06/15] Add missing installation setup line (#2721)

Co-authored-by: Andrew Thongsavath <git@athongsavath.com>
---
 contributors.yml        | 1 +
 docs/tutorials/jokes.md | 1 +
 2 files changed, 2 insertions(+)

diff --git a/contributors.yml b/contributors.yml
index 5983368315f..549d999df2d 100644
--- a/contributors.yml
+++ b/contributors.yml
@@ -321,3 +321,4 @@
 - zachdtaylor
 - zainfathoni
 - zhe
+- athongsavath
diff --git a/docs/tutorials/jokes.md b/docs/tutorials/jokes.md
index 142931a8ffc..01c16551b78 100644
--- a/docs/tutorials/jokes.md
+++ b/docs/tutorials/jokes.md
@@ -102,6 +102,7 @@ R E M I X
 💿 Welcome to Remix! Let's get you set up with a new project.
 
 ? Where would you like to create your app? remix-jokes
+? What type of app do you want to create? Just the basics
 ? Where do you want to deploy? Choose Remix if you're unsure, it's easy to change deployment targets. Remix
  App Server
 ? TypeScript or JavaScript? TypeScript

From 0467ac15f5833814d04fac0c839d50a31afc9b34 Mon Sep 17 00:00:00 2001
From: "remix-cla-bot[bot]"
 <92060565+remix-cla-bot[bot]@users.noreply.github.com>
Date: Sun, 10 Apr 2022 19:22:15 +0000
Subject: [PATCH 07/15] chore: sort contributors list

---
 contributors.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/contributors.yml b/contributors.yml
index 549d999df2d..423b18cf8c8 100644
--- a/contributors.yml
+++ b/contributors.yml
@@ -29,6 +29,7 @@
 - ascorbic
 - ashleyryan
 - ashocean
+- athongsavath
 - axel-habermaier
 - BasixKOR
 - BenMcH
@@ -321,4 +322,3 @@
 - zachdtaylor
 - zainfathoni
 - zhe
-- athongsavath

From a8bd2f4bb04cb8022c32eac9250e9dc7c060f731 Mon Sep 17 00:00:00 2001
From: Chance Strickland <hi@chance.dev>
Date: Sun, 10 Apr 2022 13:05:01 -0700
Subject: [PATCH 08/15] docs: Fix upload handler examples + add context (#2704)

A few of our examples incorrectly called server-only functions at the
top-level scope of a route module which will result in an error when
they use Node globals. The examples were fixed and clarity added where
needed. Addresses issue raised in #2248.
---
 docs/api/remix.md     | 24 +++++++++++-------------
 docs/pages/gotchas.md | 25 +++++++++++++++++++++++++
 2 files changed, 36 insertions(+), 13 deletions(-)

diff --git a/docs/api/remix.md b/docs/api/remix.md
index 6b036306cf0..2d6a72ecbdd 100644
--- a/docs/api/remix.md
+++ b/docs/api/remix.md
@@ -1555,14 +1555,13 @@ These are fully featured utilities for handling fairly simple use cases. It's no
 **Example:**
 
 ```tsx
-const uploadHandler = unstable_createFileUploadHandler({
-  maxFileSize: 5_000_000,
-  file: ({ filename }) => filename,
-});
-
 export const action: ActionFunction = async ({
   request,
 }) => {
+  const uploadHandler = unstable_createFileUploadHandler({
+    maxFileSize: 5_000_000,
+    file: ({ filename }) => filename,
+  });
   const formData = await unstable_parseMultipartFormData(
     request,
     uploadHandler
@@ -1594,13 +1593,12 @@ The `filter` function accepts an `object` and returns a `boolean` (or a promise
 **Example:**
 
 ```tsx
-const uploadHandler = unstable_createMemoryUploadHandler({
-  maxFileSize: 500_000,
-});
-
 export const action: ActionFunction = async ({
   request,
 }) => {
+  const uploadHandler = unstable_createMemoryUploadHandler({
+    maxFileSize: 500_000,
+  });
   const formData = await unstable_parseMultipartFormData(
     request,
     uploadHandler
@@ -1709,12 +1707,12 @@ Your job is to do whatever you need with the `stream` and return a value that's
 
 We have the built-in `unstable_createFileUploadHandler` and `unstable_createMemoryUploadHandler` and we also expect more upload handler utilities to be developed in the future. If you have a form that needs to use different upload handlers, you can compose them together with a custom handler, here's a theoretical example:
 
-```tsx
+```tsx filename=file-upload-handler.server.tsx
 import type { UploadHandler } from "@remix-run/{runtime}";
 import { unstable_createFileUploadHandler } from "@remix-run/{runtime}";
 import { createCloudinaryUploadHandler } from "some-handy-remix-util";
 
-export const fileUploadHandler =
+export const standardFileUploadHandler =
   unstable_createFileUploadHandler({
     directory: "public/calendar-events",
   });
@@ -1724,9 +1722,9 @@ export const cloudinaryUploadHandler =
     folder: "/my-site/avatars",
   });
 
-export const multHandler: UploadHandler = (args) => {
+export const fileUploadHandler: UploadHandler = (args) => {
   if (args.name === "calendarEvent") {
-    return fileUploadHandler(args);
+    return standardFileUploadHandler(args);
   } else if (args.name === "eventBanner") {
     return cloudinaryUploadHandler(args);
   } else {
diff --git a/docs/pages/gotchas.md b/docs/pages/gotchas.md
index 9d0d7084966..88bda11ebd3 100644
--- a/docs/pages/gotchas.md
+++ b/docs/pages/gotchas.md
@@ -55,6 +55,31 @@ export default function SomeRoute() {
 
 Even better, send a PR to the project to add `"sideEffects": false` to their package.json so that bundlers that tree shake know they can safely remove the code from browser bundles.
 
+Similarly, you may run into the same error if you call a function at the top-level scope of your route module that depends on server-only code.
+
+For example, [Remix upload handlers like `unstable_createFileUploadHandler` and `unstable_createMemoryUploadHandler`](../api/remix#uploadhandler) use Node globals under the hood and should only be called on the server. You can call either of these functions in a `*.server.js` or `*.server.ts` file, or you can move them into your route's `action` or `loader` function:
+
+```tsx filename=app/routes/some-route.jsx
+import { unstable_createFileUploadHandler } from "@remix-run/{runtime}";
+
+// Instead of this…
+const uploadHandler = unstable_createFileUploadHandler({
+  maxFileSize: 5_000_000,
+  file: ({ filename }) => filename,
+});
+
+// …do this
+
+export async function action({ request }) {
+  const uploadHandler = unstable_createFileUploadHandler({
+    maxFileSize: 5_000_000,
+    file: ({ filename }) => filename,
+  });
+
+  // ...
+}
+```
+
 > Why does this happen?
 
 Remix uses "tree shaking" to remove server code from browser bundles. Anything inside of Route module `loader`, `action`, and `headers` exports will be removed. It's a great approach but suffers from ecosystem compatibility.

From 5b09fd5896f07adc88724392ffde5ce816dd678f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bartosz=20Olch=C3=B3wka?= <b.olchowka@livechat.com>
Date: Mon, 11 Apr 2022 02:27:32 +0200
Subject: [PATCH 09/15] docs(guides/constraints): handle root path in
 `removeTrailingSlash` helper (#2705)

* Handle root path in removeTrailingSlash helper

* Update contributors.yml
---
 contributors.yml           | 1 +
 docs/guides/constraints.md | 4 ++--
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/contributors.yml b/contributors.yml
index 423b18cf8c8..0385f7355b2 100644
--- a/contributors.yml
+++ b/contributors.yml
@@ -36,6 +36,7 @@
 - bmontalvo
 - bogas04
 - BogdanDevBst
+- bolchowka
 - brophdawg11
 - bruno-oliveira
 - bsharrow
diff --git a/docs/guides/constraints.md b/docs/guides/constraints.md
index 3c369c20be7..c71aedabd09 100644
--- a/docs/guides/constraints.md
+++ b/docs/guides/constraints.md
@@ -160,7 +160,7 @@ export function removeTrailingSlash(loader) {
   return function (arg) {
     const { request } = arg;
     const url = new URL(request.url);
-    if (url.pathname.endsWith("/")) {
+    if (url.pathname !== '/' && url.pathname.endsWith("/")) {
       return redirect(request.url.slice(0, -1), {
         status: 308,
       });
@@ -188,7 +188,7 @@ This type of abstraction is introduced to try to return a response early. Since
 import { redirect } from "@remix-run/{runtime}";
 
 export function removeTrailingSlash(url) {
-  if (url.pathname.endsWith("/")) {
+  if (url.pathname !== '/' && url.pathname.endsWith("/")) {
     throw redirect(request.url.slice(0, -1), {
       status: 308,
     });

From 0d681e3bab8cfdc76e3296589534dcda7b66362a Mon Sep 17 00:00:00 2001
From: Remix Run Bot <hello@remix.run>
Date: Mon, 11 Apr 2022 00:29:47 +0000
Subject: [PATCH 10/15] chore: format

---
 docs/guides/constraints.md | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/docs/guides/constraints.md b/docs/guides/constraints.md
index c71aedabd09..5e94f65f2f4 100644
--- a/docs/guides/constraints.md
+++ b/docs/guides/constraints.md
@@ -160,7 +160,10 @@ export function removeTrailingSlash(loader) {
   return function (arg) {
     const { request } = arg;
     const url = new URL(request.url);
-    if (url.pathname !== '/' && url.pathname.endsWith("/")) {
+    if (
+      url.pathname !== "/" &&
+      url.pathname.endsWith("/")
+    ) {
       return redirect(request.url.slice(0, -1), {
         status: 308,
       });
@@ -188,7 +191,7 @@ This type of abstraction is introduced to try to return a response early. Since
 import { redirect } from "@remix-run/{runtime}";
 
 export function removeTrailingSlash(url) {
-  if (url.pathname !== '/' && url.pathname.endsWith("/")) {
+  if (url.pathname !== "/" && url.pathname.endsWith("/")) {
     throw redirect(request.url.slice(0, -1), {
       status: 308,
     });

From d9b46a66c2f93eda4e53d8a72952b18628c49927 Mon Sep 17 00:00:00 2001
From: Michael Richardson <probackpacker@gmail.com>
Date: Mon, 11 Apr 2022 16:03:53 -0400
Subject: [PATCH 11/15] docs(blog): add imports (#2710)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Michaël De Boey <info@michaeldeboey.be>
Co-authored-by: Kent C. Dodds <me+github@kentcdodds.com>
---
 contributors.yml       | 1 +
 docs/tutorials/blog.md | 8 ++++++--
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/contributors.yml b/contributors.yml
index 0385f7355b2..ff7d94cad49 100644
--- a/contributors.yml
+++ b/contributors.yml
@@ -3,6 +3,7 @@
 - abereghici
 - abotsi
 - adicuco
+- accidentaldeveloper
 - ahbruns
 - ahmedeldessouki
 - aiji42
diff --git a/docs/tutorials/blog.md b/docs/tutorials/blog.md
index dc2ef8b734d..16a2b3b13ac 100644
--- a/docs/tutorials/blog.md
+++ b/docs/tutorials/blog.md
@@ -930,8 +930,12 @@ Let's add some validation before we create the post.
 
 💿 Validate if the form data contains what we need, and return the errors if not
 
-```tsx filename=app/routes/posts/admin/new.tsx lines=[3-9,19-29]
-// ...
+```tsx filename=app/routes/posts/admin/new.tsx lines=[3,8-14,24-34]
+import type { ActionFunction } from "@remix-run/node";
+import { json, redirect } from "@remix-run/node";
+import { Form } from "@remix-run/react";
+
+import { createPost } from "~/models/post.server";
 
 type ActionData =
   | {

From 8cf8e18366945fc43188ede35513af5fc8dbfe8f Mon Sep 17 00:00:00 2001
From: "remix-cla-bot[bot]"
 <92060565+remix-cla-bot[bot]@users.noreply.github.com>
Date: Mon, 11 Apr 2022 20:03:57 +0000
Subject: [PATCH 12/15] chore: sort contributors list

---
 contributors.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/contributors.yml b/contributors.yml
index ff7d94cad49..5696bb50e74 100644
--- a/contributors.yml
+++ b/contributors.yml
@@ -2,8 +2,8 @@
 - aaronshaf
 - abereghici
 - abotsi
-- adicuco
 - accidentaldeveloper
+- adicuco
 - ahbruns
 - ahmedeldessouki
 - aiji42

From d30d8a57c597f8787b553a7d04dcc590ac934d05 Mon Sep 17 00:00:00 2001
From: Jody Geraldo <ajody.geraldo@gmail.com>
Date: Tue, 12 Apr 2022 04:48:25 +0700
Subject: [PATCH 13/15] docs(api/remix): add missing `id` on match object from
 `useMatches` (#2727)

* add id to matches object

* add jodygeraldo to contributors list
---
 contributors.yml  | 1 +
 docs/api/remix.md | 6 +++---
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/contributors.yml b/contributors.yml
index 5696bb50e74..8b1153b669a 100644
--- a/contributors.yml
+++ b/contributors.yml
@@ -142,6 +142,7 @@
 - jmasson
 - jo-ninja
 - joaosamouco
+- jodygeraldo
 - johannesbraeunig
 - johnson444
 - johnson444
diff --git a/docs/api/remix.md b/docs/api/remix.md
index 2d6a72ecbdd..76c86d0cc3a 100644
--- a/docs/api/remix.md
+++ b/docs/api/remix.md
@@ -1270,9 +1270,9 @@ function SomeComponent() {
 
 ```js
 [
-  { pathname, data, params, handle }, // root route
-  { pathname, data, params, handle }, // layout route
-  { pathname, data, params, handle }, // child route
+  { id, pathname, data, params, handle }, // root route
+  { id, pathname, data, params, handle }, // layout route
+  { id, pathname, data, params, handle }, // child route
   // etc.
 ];
 ```

From acb16cabef9cba5f9867c94a2403875eb047a4ef Mon Sep 17 00:00:00 2001
From: Mehdi Achour <machour@gmail.com>
Date: Tue, 12 Apr 2022 15:49:00 +0100
Subject: [PATCH 14/15] docs(faq): Explain the difference between
 `CatchBoundary` & `ErrorBoundary` (#2757)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* docs(faq): Explain the difference between CatchBoundary and ErrorBoundary

* Update docs/pages/faq.md

Co-authored-by: Michaël De Boey <info@michaeldeboey.be>
---
 docs/pages/faq.md | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/docs/pages/faq.md b/docs/pages/faq.md
index def732141a4..d1a2704c87f 100644
--- a/docs/pages/faq.md
+++ b/docs/pages/faq.md
@@ -228,3 +228,9 @@ Again, `formData.getAll()` is often all you need, we encourage you to give it a
 
 [form-data]: https://developer.mozilla.org/en-US/docs/Web/API/FormData
 [query-string]: https://www.npmjs.com/package/query-string
+
+## What's the difference between `CatchBoundary` & `ErrorBoundary`?
+
+Error boundaries render when your application throws an error and you had no clue it was going to happen. Most apps just go blank or have spinners spin forever. In remix the error boundary renders and you have granular control over it.
+
+Catch boundaries render when you decide in a loader that you can't proceed down the happy path to render the UI you want (auth required, record not found, etc.), so you throw a response and let some catch boundary up the tree handle it.
\ No newline at end of file

From 9d1b88b180fa9ab30d4ee284b216432d3874f25a Mon Sep 17 00:00:00 2001
From: Remix Run Bot <hello@remix.run>
Date: Tue, 12 Apr 2022 14:50:45 +0000
Subject: [PATCH 15/15] chore: format

---
 docs/pages/faq.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/pages/faq.md b/docs/pages/faq.md
index d1a2704c87f..864f39e2a93 100644
--- a/docs/pages/faq.md
+++ b/docs/pages/faq.md
@@ -233,4 +233,4 @@ Again, `formData.getAll()` is often all you need, we encourage you to give it a
 
 Error boundaries render when your application throws an error and you had no clue it was going to happen. Most apps just go blank or have spinners spin forever. In remix the error boundary renders and you have granular control over it.
 
-Catch boundaries render when you decide in a loader that you can't proceed down the happy path to render the UI you want (auth required, record not found, etc.), so you throw a response and let some catch boundary up the tree handle it.
\ No newline at end of file
+Catch boundaries render when you decide in a loader that you can't proceed down the happy path to render the UI you want (auth required, record not found, etc.), so you throw a response and let some catch boundary up the tree handle it.
