Merge branch 'main' into release-next

Author: brophdawg11

.github/ISSUE_TEMPLATE/config.yml

@@ -5,7 +5,7 @@ contact_links:
     about: If you've got an idea for a new feature in React Router, please open a new Discussion with the `Proposals` label
   - name: 🤔 Usage Question (Github Discussions)
     url: https://github.com/remix-run/remix/discussions/new?category=q-a
-    about: Open a Discussion in GitHub wih the `Q&A` label
+    about: Open a Discussion in GitHub with the `Q&A` label
   - name: 💬 Remix Discord Channel
     url: https://rmx.as/discord
     about: Interact with other people using React Router and Remix 📀

SECURITY.md

@@ -18,4 +18,14 @@ To report a security issue, please use the GitHub Security Advisory [Report a Vu
 
 The React Router team will send a response indicating the next steps in handling your report. After the initial reply to your report, our team will keep you informed of the progress towards a fix and full announcement, and may ask for additional information or guidance.
 
+Generally, the full process will look something like this when we receive a new advisory via Github:
+
+- If the advisory is valid, we'll move it into `Draft` status as we begin our investigation
+- We'll inform common hosting platforms of the vulnerability so they can make any preventative changes on their end even before the vulnerability is fixed/published
+  - If you are a hosting provider and you want to be notified right away, please email us at [[email protected]](mailto:[email protected]) and we'll get you added
+- We'll publish a new version of React Router with a fix
+- We'll update our own sites with the new version
+- After a period of time, potentially up to a month or so, we'll publish the advisory
+  - This gives application developers time to update their applications to the latest version before we make the details of the advisory public
+
 Report security bugs in third-party modules to the person or team maintaining the module. You can also report a vulnerability through the [npm contact form](https://www.npmjs.com/support) by selecting "I'm reporting a security vulnerability".

contributors.yml

@@ -195,6 +195,7 @@
 - kylegirard
 - landisdesign
 - latin-1
+- lazybean
 - lequangdongg
 - liborgabrhel
 - liuhanqu

decisions/0003-infer-types-for-useloaderdata-and-useactiondata-from-loader-and-action-via-generics.md

@@ -32,7 +32,7 @@ export default function Route() {
 }
 ```
 
-For end-to-end type safety, it is then the user's responsability to make sure that `loader` and `action` also use the same type in the `json` generic:
+For end-to-end type safety, it is then the user's responsibility to make sure that `loader` and `action` also use the same type in the `json` generic:
 
 ```ts
 export const loader: LoaderFunction = () => {
@@ -108,7 +108,7 @@ export const loader: LoaderFunction = () => {
 
 export default function Route() {
   const { birthday } = useLoaderData<MyLoaderData>();
-  // ^ `useLoaderData` tricks Typescript into thinking this is a `Date`, when in fact its a `string`!
+  // ^ `useLoaderData` tricks Typescript into thinking this is a `Date`, when in fact it's a `string`!
 }
 ```
 
@@ -144,7 +144,7 @@ Though `loader` and `useLoaderData` exist together in the same file at developme
 Without the `loader` argument to infer types from, `useLoaderData` needs a way to learn about `loader`'s type at compile-time.
 
 Additionally, `loader` and `useLoaderData` are both managed by Remix across the network.
-While its true that Remix doesn't "own" the network in the strictest sense, having `useLoaderData` return data that does not correspond to its `loader` is an exceedingly rare edge-case.
+While it's true that Remix doesn't "own" the network in the strictest sense, having `useLoaderData` return data that does not correspond to its `loader` is an exceedingly rare edge-case.
 
 Same goes for `useActionData`.
 

docs/how-to/navigation-blocking.md

@@ -0,0 +1,232 @@
+---
+title: Navigation Blocking
+---
+
+# Navigation Blocking
+
+[MODES: framework, data]
+
+## Overview
+
+When users are in the middle of a workflow, like filling out an important form, you may want to prevent them from navigating away from the page.
+
+This example will show:
+
+- Setting up a route with a form and action called with a fetcher
+- Blocking navigation when the form is dirty
+- Showing a confirmation when the user tries to leave the page
+
+## 1. Set up a route with a form
+
+Add a route with the form, we'll use a "contact" route for this example:
+
+```ts filename=routes.ts
+import {
+  type RouteConfig,
+  index,
+  route,
+} from "@react-router/dev/routes";
+
+export default [
+  index("routes/home.tsx"),
+  route("contact", "routes/contact.tsx"),
+] satisfies RouteConfig;
+```
+
+Add the form to the contact route module:
+
+```tsx filename=routes/contact.tsx
+import { useFetcher } from "react-router";
+import type { Route } from "./+types/contact";
+
+export async function action({
+  request,
+}: Route.ActionArgs) {
+  let formData = await request.formData();
+  let email = formData.get("email");
+  let message = formData.get("message");
+  console.log(email, message);
+  return { ok: true };
+}
+
+export default function Contact() {
+  let fetcher = useFetcher();
+
+  return (
+    <fetcher.Form method="post">
+      <p>
+        <label>
+          Email: <input name="email" type="email" />
+        </label>
+      </p>
+      <p>
+        <textarea name="message" />
+      </p>
+      <p>
+        <button type="submit">
+          {fetcher.state === "idle" ? "Send" : "Sending..."}
+        </button>
+      </p>
+    </fetcher.Form>
+  );
+}
+```
+
+## 2. Add dirty state and onChange handler
+
+To track the dirty state of the form, we'll use a single boolean and a quick form onChange handler. You may want to track the dirty state differently but this works for this guide.
+
+```tsx filename=routes/contact.tsx lines=[2,8-12]
+export default function Contact() {
+  let [isDirty, setIsDirty] = useState(false);
+  let fetcher = useFetcher();
+
+  return (
+    <fetcher.Form
+      method="post"
+      onChange={(event) => {
+        let email = event.currentTarget.email.value;
+        let message = event.currentTarget.message.value;
+        setIsDirty(Boolean(email || message));
+      }}
+    >
+      {/* existing code */}
+    </fetcher.Form>
+  );
+}
+```
+
+## 3. Block navigation when the form is dirty
+
+```tsx filename=routes/contact.tsx lines=[1,6-8]
+import { useBlocker } from "react-router";
+
+export default function Contact() {
+  let [isDirty, setIsDirty] = useState(false);
+  let fetcher = useFetcher();
+  let blocker = useBlocker(
+    useCallback(() => isDirty, [isDirty])
+  );
+
+  // ... existing code
+}
+```
+
+While this will now block a navigation, there's no way for the user to confirm it.
+
+## 4. Show confirmation UI
+
+This uses a simple div, but you may want to use a modal dialog.
+
+```tsx filename=routes/contact.tsx lines=[19-41]
+export default function Contact() {
+  let [isDirty, setIsDirty] = useState(false);
+  let fetcher = useFetcher();
+  let blocker = useBlocker(
+    useCallback(() => isDirty, [isDirty])
+  );
+
+  return (
+    <fetcher.Form
+      method="post"
+      onChange={(event) => {
+        let email = event.currentTarget.email.value;
+        let message = event.currentTarget.message.value;
+        setIsDirty(Boolean(email || message));
+      }}
+    >
+      {/* existing code */}
+
+      {blocker.state === "blocked" && (
+        <div>
+          <p>Wait! You didn't send the message yet:</p>
+          <p>
+            <button
+              type="button"
+              onClick={() => blocker.proceed()}
+            >
+              Leave
+            </button>{" "}
+            <button
+              type="button"
+              onClick={() => blocker.reset()}
+            >
+              Stay here
+            </button>
+          </p>
+        </div>
+      )}
+    </fetcher.Form>
+  );
+}
+```
+
+If the user clicks "leave" then `blocker.proceed()` will proceed with the navigation. If they click "stay here" then `blocker.reset()` will clear the blocker and keep them on the current page.
+
+## 5. Reset the blocker when the action resolves
+
+If the user doesn't click either "leave" or "stay here", then then submits the form, the blocker will still be active. Let's reset the blocker when the action resolves with an effect.
+
+```tsx filename=routes/contact.tsx
+useEffect(() => {
+  if (fetcher.data?.ok) {
+    if (blocker.state === "blocked") {
+      blocker.reset();
+    }
+  }
+}, [fetcher.data]);
+```
+
+## 6. Clear the form when the action resolves
+
+While unrelated to navigation blocking, let's clear the form when the action resolves with a ref.
+
+```tsx
+let formRef = useRef<HTMLFormElement>(null);
+
+// put it on the form
+<fetcher.Form
+  ref={formRef}
+  method="post"
+  onChange={(event) => {
+    // ... existing code
+  }}
+>
+  {/* existing code */}
+</fetcher.Form>;
+```
+
+```tsx
+useEffect(() => {
+  if (fetcher.data?.ok) {
+    // clear the form in the effect
+    formRef.current?.reset();
+    if (blocker.state === "blocked") {
+      blocker.reset();
+    }
+  }
+}, [fetcher.data]);
+```
+
+Alternatively, if a navigation is currently blocked, instead of resetting the blocker, you can proceed through to the blocked navigation.
+
+```tsx
+useEffect(() => {
+  if (fetcher.data?.ok) {
+    if (blocker.state === "blocked") {
+      // proceed with the blocked navigation
+      blocker.proceed();
+    } else {
+      formRef.current?.reset();
+    }
+  }
+}, [fetcher.data]);
+```
+
+In this case the user flow is:
+
+- User fills out the form
+- User forgets to click "send" and clicks a link instead
+- The navigation is blocked, and the confirmation message is shown
+- Instead of clicking "leave" or "stay here", the user submits the form
+- The user is taken to the requested page

docs/start/data/routing.md

@@ -56,7 +56,7 @@ createBrowserRouter([
 
 ## Route Objects
 
-Route objects define the behavior of a route beyond just the path and component, like data loading and actions. We'll go into more detail in the [Route Object guide](./route-objects), but here's a quick example of a loader.
+Route objects define the behavior of a route beyond just the path and component, like data loading and actions. We'll go into more detail in the [Route Object guide](./route-object), but here's a quick example of a loader.
 
 ```tsx filename=app/team.tsx
 import {

integration/fetcher-layout-test.ts

@@ -231,7 +231,7 @@ test("fetcher calls index route loader when at index route", async ({
   expect(dataElement.text()).toBe("index data");
 });
 
-test("fetcher calls layout route action when at paramaterized route", async ({
+test("fetcher calls layout route action when at parameterized route", async ({
   page,
 }) => {
   let app = new PlaywrightFixture(appFixture, page);

integration/helpers/vite-plugin-cloudflare-template/worker-configuration.d.ts

@@ -5135,7 +5135,7 @@ declare module "assets:*" {
 //     https://opensource.org/licenses/Apache-2.0
 declare abstract class PipelineTransform {
   /**
-   * transformJson recieves an array of javascript objects which can be
+   * transformJson receives an array of javascript objects which can be
    * mutated and returned to the pipeline
    * @param data The data to be mutated
    * @returns A promise containing the mutated data

playground/vite-plugin-cloudflare/worker-configuration.d.ts

@@ -4272,7 +4272,7 @@ declare module "assets:*" {
 //     https://opensource.org/licenses/Apache-2.0
 declare abstract class PipelineTransform {
     /**
-     * transformJson recieves an array of javascript objects which can be
+     * transformJson receives an array of javascript objects which can be
      * mutated and returned to the pipeline
      * @param data The data to be mutated
      * @returns A promise containing the mutated data

scripts/start-prerelease.sh

@@ -14,6 +14,12 @@ git checkout dev
 git pull
 git checkout -b release-next
 git merge main --no-edit
+
+if [[ -n $(git status --porcelain) ]]; then
+  echo "Error: Your git working directory is not clean after merging main ito release-next."
+  exit 1
+fi
+
 pnpm changeset pre enter pre
 git add .changeset/pre.json
 git commit -m "Enter prerelease mode"