Merge branch 'dev' into brophdawg11/fog-of-war

remix-run · Jun 14, 2024 · ce23383 · ce23383
2 parents 499ee1b + be8a259
commit ce23383
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 22 deletions.
diff --git a/.changeset/gorgeous-geese-sit.md b/.changeset/gorgeous-geese-sit.md
@@ -0,0 +1,5 @@
+---
+"react-router-dom": patch
+---
+
+Fix `fetcher.submit` types - remove incorrect `navigate`/`fetcherKey`/`unstable_viewTransition` options because they are only relevant for `useSubmit`
diff --git a/packages/react-router-dom/dom.ts b/packages/react-router-dom/dom.ts
@@ -150,7 +150,10 @@ function isFormDataSubmitterSupported() {
   return _formDataSupportsSubmitter;
 }
 
-export interface SubmitOptions {
+/**
+ * Submit options shared by both navigations and fetchers
+ */
+interface SharedSubmitOptions {
   /**
    * The HTTP method used to submit the form. Overrides `<form method>`.
    * Defaults to "GET".
@@ -170,15 +173,33 @@ export interface SubmitOptions {
   encType?: FormEncType;
 
   /**
-   * Indicate a specific fetcherKey to use when using navigate=false
+   * Determines whether the form action is relative to the route hierarchy or
+   * the pathname.  Use this if you want to opt out of navigating the route
+   * hierarchy and want to instead route based on /-delimited URL segments
    */
-  fetcherKey?: string;
+  relative?: RelativeRoutingType;
 
   /**
-   * navigate=false will use a fetcher instead of a navigation
+   * In browser-based environments, prevent resetting scroll after this
+   * navigation when using the <ScrollRestoration> component
    */
-  navigate?: boolean;
+  preventScrollReset?: boolean;
+
+  /**
+   * Enable flushSync for this submission's state updates
+   */
+  unstable_flushSync?: boolean;
+}
+
+/**
+ * Submit options available to fetchers
+ */
+export interface FetcherSubmitOptions extends SharedSubmitOptions {}
 
+/**
+ * Submit options available to navigations
+ */
+export interface SubmitOptions extends FetcherSubmitOptions {
   /**
    * Set `true` to replace the current entry in the browser's history stack
    * instead of creating a new one (i.e. stay on "the same page"). Defaults
@@ -192,22 +213,14 @@ export interface SubmitOptions {
   state?: any;
 
   /**
-   * Determines whether the form action is relative to the route hierarchy or
-   * the pathname.  Use this if you want to opt out of navigating the route
-   * hierarchy and want to instead route based on /-delimited URL segments
-   */
-  relative?: RelativeRoutingType;
-
-  /**
-   * In browser-based environments, prevent resetting scroll after this
-   * navigation when using the <ScrollRestoration> component
+   * Indicate a specific fetcherKey to use when using navigate=false
    */
-  preventScrollReset?: boolean;
+  fetcherKey?: string;
 
   /**
-   * Enable flushSync for this navigation's state updates
+   * navigate=false will use a fetcher instead of a navigation
    */
-  unstable_flushSync?: boolean;
+  navigate?: boolean;
 
   /**
    * Enable view transitions on this submission navigation

diff --git a/packages/react-router-dom/index.tsx b/packages/react-router-dom/index.tsx
@@ -73,6 +73,7 @@ import type {
   ParamKeyValuePair,
   URLSearchParamsInit,
   SubmitTarget,
+  FetcherSubmitOptions,
 } from "./dom";
 import {
   createSearchParams,
@@ -1163,8 +1164,10 @@ if (__DEV__) {
   NavLink.displayName = "NavLink";
 }
 
-export interface FetcherFormProps
-  extends React.FormHTMLAttributes<HTMLFormElement> {
+/**
+ * Form props shared by navigations and fetchers
+ */
+interface SharedFormProps extends React.FormHTMLAttributes<HTMLFormElement> {
   /**
    * The HTTP verb to use when the form is submit. Supports "get", "post",
    * "put", "delete", "patch".
@@ -1205,7 +1208,15 @@ export interface FetcherFormProps
   onSubmit?: React.FormEventHandler<HTMLFormElement>;
 }
 
-export interface FormProps extends FetcherFormProps {
+/**
+ * Form props available to fetchers
+ */
+export interface FetcherFormProps extends SharedFormProps {}
+
+/**
+ * Form props available to navigations
+ */
+export interface FormProps extends SharedFormProps {
   /**
    * Indicate a specific fetcherKey to use when using navigate=false
    */
@@ -1528,7 +1539,7 @@ export interface FetcherSubmitFunction {
   (
     target: SubmitTarget,
     // Fetchers cannot replace or set state because they are not navigation events
-    options?: Omit<SubmitOptions, "replace" | "state">
+    options?: FetcherSubmitOptions
   ): void;
 }
 

diff --git a/packages/router/__tests__/navigation-test.ts b/packages/router/__tests__/navigation-test.ts
@@ -170,7 +170,7 @@ describe("navigations", () => {
       );
       expect(t.router.state.loaderData).toEqual({});
 
-      // Node 18 and 20 output different errors here
+      // Node 16/18 versus 20 output different errors here :/
       let expected =
         process.version.startsWith("v16") || process.version.startsWith("v18")
           ? "Unexpected token } in JSON at position 15"
@@ -206,6 +206,8 @@ describe("navigations", () => {
         })
       );
       expect(t.router.state.loaderData).toEqual({});
+
+      // Node 16/18 versus 20 output different errors here :/
       let expected =
         process.version.startsWith("v16") || process.version.startsWith("v18")
           ? "Unexpected token } in JSON at position 15"