feat(react-router): add useSubmit/useFetcher to createMemoryRouter

.changeset/memory-submit-fetcher.md

@@ -0,0 +1,5 @@
+---
+"react-router": minor
+---
+
+Add `useSubmit`/`useFetcher` support to `createMemoryRouter` apps in `react-router` now that we can support non-DOM submissions

docs/hooks/use-fetcher.md

@@ -82,6 +82,8 @@ function SomeComponent() {
 }
 ```
 
+<docs-warn>`fetcher.Form` is only available in the DOM-based versions of React Router (`createBrowserRouter`and `createHashRouter`) but not in the memory-based versions (`createMemoryRouter`)</docs-warn>
+
 ## `fetcher.load()`
 
 Loads data from a route loader.

docs/hooks/use-submit.md

@@ -106,7 +106,9 @@ let text = "Plain ol' text";
 submit(obj, { encType: "text/plain" }); // -> request.text()
 ```
 
-<docs-warn>In future versions of React Router, the default behavior will not serialize raw JSON payloads. If you are submitting raw JSON today it's recommended to specify an explicit `encType`.</docs-warn>
+<docs-info>If you're using `createMemoryRouter`, then the `FormData` APIs of `useSubmit` aren't relevant, and all submissions are `payload` based.</docs-info>
+
+<docs-warn>In future versions of React Router DOM, the default behavior will not serialize raw JSON payloads. If you are submitting raw JSON today it's recommended to specify an explicit `encType`.</docs-warn>
 
 ### Opting out of serialization
 

package.json

@@ -108,10 +108,10 @@
       "none": "45.8 kB"
     },
     "packages/react-router/dist/react-router.production.min.js": {
-      "none": "12.9 kB"
+      "none": "14.0 kB"
     },
     "packages/react-router/dist/umd/react-router.production.min.js": {
-      "none": "15.3 kB"
+      "none": "16.4 kB"
     },
     "packages/react-router-dom/dist/react-router-dom.production.min.js": {
       "none": "12 kB"

packages/react-router-dom/__tests__/exports-test.tsx

@@ -3,16 +3,22 @@ import * as ReactRouterDOM from "react-router-dom";
 
 let nonReExportedKeys = new Set(["UNSAFE_mapRouteProperties"]);
 
+let exportedButDifferent = new Set(["useFetcher", "useFetchers", "useSubmit"]);
+
 describe("react-router-dom", () => {
   for (let key in ReactRouter) {
-    if (!nonReExportedKeys.has(key)) {
-      it(`re-exports ${key} from react-router`, () => {
-        expect(ReactRouterDOM[key]).toBe(ReactRouter[key]);
-      });
-    } else {
+    if (nonReExportedKeys.has(key)) {
       it(`does not re-export ${key} from react-router`, () => {
         expect(ReactRouterDOM[key]).toBe(undefined);
       });
+    } else if (exportedButDifferent.has(key)) {
+      it(`exports ${key} but not from react-router`, () => {
+        expect(ReactRouterDOM[key]).not.toBe(ReactRouter[key]);
+      });
+    } else {
+      it(`re-exports ${key} from react-router`, () => {
+        expect(ReactRouterDOM[key]).toBe(ReactRouter[key]);
+      });
     }
   }
 });

packages/react-router-dom/dom.ts

@@ -128,13 +128,14 @@ export interface SubmitOptions {
   method?: HTMLFormMethod;
 
   /**
-   * The action URL path used to submit the form. Overrides `<form action>`.
-   * Defaults to the path of the current route.
+   * The action URL path used to submit the form (or a direct action to be
+   * executed). Overrides `<form action>`. Defaults to the path of the current
+   * route.
    */
   action?: string | ActionFunction;
 
   /**
-   * The action URL used to submit the form. Overrides `<form encType>`.
+   * The encType to be used to encode the submission. Overrides `<form encType>`.
    * Defaults to "application/x-www-form-urlencoded".  Specifying `null` will
    * opt-out of serialization and will submit the data directly to your action
    * in the `payload` parameter.

packages/react-router-dom/index.tsx

@@ -979,7 +979,7 @@ function useSubmitImpl(
       let path =
         typeof options.action === "function" ? null : options.action || action;
       let routerAction =
-        typeof options.action === "function" ? options.action : null;
+        typeof options.action === "function" ? options.action : undefined;
 
       // Base options shared between fetch() and navigate()
       let opts = {

packages/react-router-native/__tests__/exports-test.tsx

@@ -5,14 +5,14 @@ let nonReExportedKeys = new Set(["UNSAFE_mapRouteProperties"]);
 
 describe("react-router-native", () => {
   for (let key in ReactRouter) {
-    if (!nonReExportedKeys.has(key)) {
-      it(`re-exports ${key} from react-router`, () => {
-        expect(ReactRouterNative[key]).toBe(ReactRouter[key]);
-      });
-    } else {
+    if (nonReExportedKeys.has(key)) {
       it(`does not re-export ${key} from react-router`, () => {
         expect(ReactRouterNative[key]).toBe(undefined);
       });
+    } else {
+      it(`re-exports ${key} from react-router`, () => {
+        expect(ReactRouterNative[key]).toBe(ReactRouter[key]);
+      });
     }
   }
 });

packages/react-router-native/index.tsx

@@ -27,6 +27,7 @@ export type {
   unstable_BlockerFunction,
   DataRouteMatch,
   DataRouteObject,
+  FetcherWithMethods,
   Fetcher,
   Hash,
   IndexRouteObject,
@@ -62,6 +63,8 @@ export type {
   RoutesProps,
   Search,
   ShouldRevalidateFunction,
+  SubmitFunction,
+  SubmitOptions,
   To,
 } from "react-router";
 export {
@@ -92,6 +95,8 @@ export {
   useActionData,
   useAsyncError,
   useAsyncValue,
+  useFetcher,
+  useFetchers,
   unstable_useBlocker,
   useHref,
   useInRouterContext,
@@ -110,6 +115,7 @@ export {
   useRouteError,
   useRouteLoaderData,
   useRoutes,
+  useSubmit,
 } from "react-router";
 
 ///////////////////////////////////////////////////////////////////////////////