react-router-dom 0.0.0-experimental-af76d50e → 0.0.0-experimental-dc8656c8

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # `react-router-dom`
 
+## 6.11.1
+
+### Patch Changes
+
+- Updated dependencies:
+  - `react-router@6.11.1`
+  - `@remix-run/router@1.6.1`
+
+## 6.11.0
+
+### Minor Changes
+
+- Enable `basename` support in `useFetcher` ([#10336](https://github.com/remix-run/react-router/pull/10336))
+  - If you were previously working around this issue by manually prepending the `basename` then you will need to remove the manually prepended `basename` from your `fetcher` calls (`fetcher.load('/basename/route') -> fetcher.load('/route')`)
+
+### Patch Changes
+
+- Fix inadvertent re-renders when using `Component` instead of `element` on a route definition ([#10287](https://github.com/remix-run/react-router/pull/10287))
+- Fail gracefully on `<Link to="//">` and other invalid URL values ([#10367](https://github.com/remix-run/react-router/pull/10367))
+- Switched from `useSyncExternalStore` to `useState` for internal `@remix-run/router` router state syncing in `<RouterProvider>`. We found some [subtle bugs](https://codesandbox.io/s/use-sync-external-store-loop-9g7b81) where router state updates got propagated _before_ other normal `useState` updates, which could lead to footguns in `useEffect` calls. ([#10377](https://github.com/remix-run/react-router/pull/10377), [#10409](https://github.com/remix-run/react-router/pull/10409))
+- Add static prop to `StaticRouterProvider`'s internal `Router` component ([#10401](https://github.com/remix-run/react-router/pull/10401))
+- When using a `RouterProvider`, `useNavigate`/`useSubmit`/`fetcher.submit` are now stable across location changes, since we can handle relative routing via the `@remix-run/router` instance and get rid of our dependence on `useLocation()`. When using `BrowserRouter`, these hooks remain unstable across location changes because they still rely on `useLocation()`. ([#10336](https://github.com/remix-run/react-router/pull/10336))
+- Updated dependencies:
+  - `react-router@6.11.0`
+  - `@remix-run/router@1.6.0`
+
 ## 6.10.0
 
 ### Minor Changes

package/LICENSE.md

@@ -1,7 +1,8 @@
 MIT License
 
-Copyright (c) React Training 2015-2019
-Copyright (c) Remix Software 2020-2022
+Copyright (c) React Training LLC 2015-2019
+Copyright (c) Remix Software Inc. 2020-2021
+Copyright (c) Shopify Inc. 2022-2023
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/dist/dom.d.ts

@@ -1,4 +1,4 @@
-import type { ActionFunction, FormEncType, HTMLFormMethod, RelativeRoutingType } from "@remix-run/router";
+import type { FormEncType, HTMLFormMethod, RelativeRoutingType } from "@remix-run/router";
 export declare const defaultMethod: HTMLFormMethod;
 export declare function isHtmlElement(object: any): object is HTMLElement;
 export declare function isButtonElement(object: any): object is HTMLButtonElement;
@@ -31,9 +31,6 @@ export declare type URLSearchParamsInit = string | ParamKeyValuePair[] | Record<
  */
 export declare function createSearchParams(init?: URLSearchParamsInit): URLSearchParams;
 export declare function getSearchParamsForLocation(locationSearch: string, defaultSearchParams: URLSearchParams | null): URLSearchParams;
-export declare type SubmitTarget = HTMLFormElement | HTMLButtonElement | HTMLInputElement | FormData | URLSearchParams | {
-    [name: string]: string;
-} | NonNullable<unknown> | null;
 export interface SubmitOptions {
     /**
      * The HTTP method used to submit the form. Overrides `<form method>`.
@@ -44,17 +41,12 @@ export interface SubmitOptions {
      * The action URL path used to submit the form. Overrides `<form action>`.
      * Defaults to the path of the current route.
      */
-    action?: string | ActionFunction;
+    action?: string;
     /**
      * The action URL used to submit the form. 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.
-     *
-     * In v7, the default behavior will change from "application/x-www-form-urlencoded"
-     * to `null` and will make serialization opt-in
+     * Defaults to "application/x-www-form-urlencoded".
      */
-    encType?: FormEncType | null;
+    encType?: FormEncType;
     /**
      * 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
@@ -73,11 +65,12 @@ export interface SubmitOptions {
      */
     preventScrollReset?: boolean;
 }
-export declare function getFormSubmissionInfo(target: SubmitTarget, formEncType: FormEncType | undefined, basename: string): {
+export declare function getFormSubmissionInfo(target: HTMLFormElement | HTMLButtonElement | HTMLInputElement | FormData | URLSearchParams | {
+    [name: string]: string;
+} | null, options: SubmitOptions, basename: string): {
     action: string | null;
     method: string;
-    encType: string | null;
-    formData: FormData | undefined;
-    payload: any;
+    encType: string;
+    formData: FormData;
 };
 export {};

package/dist/index.d.ts

@@ -4,8 +4,8 @@
  */
 import * as React from "react";
 import type { NavigateOptions, RelativeRoutingType, RouteObject, To } from "react-router";
-import type { Fetcher, FormEncType, FormMethod, FutureConfig, GetScrollRestorationKeyFunction, History, HTMLFormMethod, HydrationState, LoaderFunction, Router as RemixRouter, V7_FormMethod } from "@remix-run/router";
-import type { SubmitOptions, ParamKeyValuePair, URLSearchParamsInit, SubmitTarget } from "./dom";
+import type { Fetcher, FormEncType, FormMethod, FutureConfig, GetScrollRestorationKeyFunction, History, HTMLFormMethod, HydrationState, Router as RemixRouter, V7_FormMethod } from "@remix-run/router";
+import type { SubmitOptions, ParamKeyValuePair, URLSearchParamsInit } from "./dom";
 import { createSearchParams } from "./dom";
 export type { FormEncType, FormMethod, GetScrollRestorationKeyFunction, ParamKeyValuePair, SubmitOptions, URLSearchParamsInit, V7_FormMethod, };
 export { createSearchParams };
@@ -164,7 +164,10 @@ export declare function useLinkClickHandler<E extends Element = HTMLAnchorElemen
  * URLSearchParams interface.
  */
 export declare function useSearchParams(defaultInit?: URLSearchParamsInit): [URLSearchParams, SetURLSearchParams];
-declare type SetURLSearchParams = (nextInit?: URLSearchParamsInit | ((prev: URLSearchParams) => URLSearchParamsInit), navigateOpts?: NavigateOptions) => void;
+export declare type SetURLSearchParams = (nextInit?: URLSearchParamsInit | ((prev: URLSearchParams) => URLSearchParamsInit), navigateOpts?: NavigateOptions) => void;
+declare type SubmitTarget = HTMLFormElement | HTMLButtonElement | HTMLInputElement | FormData | URLSearchParams | {
+    [name: string]: string;
+} | null;
 /**
  * Submits a HTML `<form>` to the server without reloading the page.
  */
@@ -197,7 +200,7 @@ declare function createFetcherForm(fetcherKey: string, routeId: string): React.F
 export declare type FetcherWithComponents<TData> = Fetcher<TData> & {
     Form: ReturnType<typeof createFetcherForm>;
     submit: (target: SubmitTarget, options?: Omit<SubmitOptions, "replace" | "preventScrollReset">) => void;
-    load: (href: string | LoaderFunction) => void;
+    load: (href: string) => void;
 };
 /**
  * Interacts with route loaders and actions without causing a navigation. Great

package/dist/index.js

@@ -1,5 +1,5 @@
 /**
- * React Router DOM v0.0.0-experimental-af76d50e
+ * React Router DOM v0.0.0-experimental-dc8656c8
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -117,37 +117,52 @@ function getSearchParamsForLocation(locationSearch, defaultSearchParams) {
 
   return searchParams;
 }
-function getFormSubmissionInfo(target, formEncType, basename) {
+function getFormSubmissionInfo(target, options, basename) {
   let method;
-  let action;
+  let action = null;
   let encType;
-  let formData = undefined;
-  let payload = undefined;
+  let formData;
 
   if (isFormElement(target)) {
-    // When grabbing the action from the element, it will have had the basename
-    // prefixed to ensure non-JS scenarios work, so strip it since we'll
-    // re-prefix in the router
-    let attr = target.getAttribute("action");
-    action = attr ? stripBasename(attr, basename) : null;
-    method = target.getAttribute("method") || defaultMethod;
-    encType = target.getAttribute("enctype") || defaultEncType;
+    let submissionTrigger = options.submissionTrigger;
+
+    if (options.action) {
+      action = options.action;
+    } else {
+      // When grabbing the action from the element, it will have had the basename
+      // prefixed to ensure non-JS scenarios work, so strip it since we'll
+      // re-prefix in the router
+      let attr = target.getAttribute("action");
+      action = attr ? stripBasename(attr, basename) : null;
+    }
+
+    method = options.method || target.getAttribute("method") || defaultMethod;
+    encType = options.encType || target.getAttribute("enctype") || defaultEncType;
     formData = new FormData(target);
+
+    if (submissionTrigger && submissionTrigger.name) {
+      formData.append(submissionTrigger.name, submissionTrigger.value);
+    }
   } else if (isButtonElement(target) || isInputElement(target) && (target.type === "submit" || target.type === "image")) {
     let form = target.form;
 
     if (form == null) {
       throw new Error("Cannot submit a <button> or <input type=\"submit\"> without a <form>");
     } // <button>/<input type="submit"> may override attributes of <form>
-    // When grabbing the action from the element, it will have had the basename
-    // prefixed to ensure non-JS scenarios work, so strip it since we'll
-    // re-prefix in the router
 
 
-    let attr = target.getAttribute("formaction") || form.getAttribute("action");
-    action = attr ? stripBasename(attr, basename) : null;
-    method = target.getAttribute("formmethod") || form.getAttribute("method") || defaultMethod;
-    encType = target.getAttribute("formenctype") || form.getAttribute("enctype") || defaultEncType;
+    if (options.action) {
+      action = options.action;
+    } else {
+      // When grabbing the action from the element, it will have had the basename
+      // prefixed to ensure non-JS scenarios work, so strip it since we'll
+      // re-prefix in the router
+      let attr = target.getAttribute("formaction") || form.getAttribute("action");
+      action = attr ? stripBasename(attr, basename) : null;
+    }
+
+    method = options.method || target.getAttribute("formmethod") || form.getAttribute("method") || defaultMethod;
+    encType = options.encType || target.getAttribute("formenctype") || form.getAttribute("enctype") || defaultEncType;
     formData = new FormData(form); // Include name + value from a <button>, appending in case the button name
     // matches an existing input name
 
@@ -156,22 +171,10 @@ function getFormSubmissionInfo(target, formEncType, basename) {
     }
   } else if (isHtmlElement(target)) {
     throw new Error("Cannot submit element that is not <form>, <button>, or " + "<input type=\"submit|image\">");
-  } else if (formEncType !== undefined && formEncType !== "application/x-www-form-urlencoded") {
-    // The default behavior is to encode as application/x-www-form-urlencoded
-    // into FormData which is handled in the else block below.
-    //
-    // Any other encType value (null, application/json, text/plain) means
-    // we will not be submitting as FormData so send the payload through
-    // directly.  The @remix-run/router will handle serialization of the
-    // payload upon Request creation if needed.
-    method = defaultMethod;
-    action = null;
-    encType = null;
-    payload = target;
   } else {
-    method = defaultMethod;
-    action = null;
-    encType = defaultEncType;
+    method = options.method || defaultMethod;
+    action = options.action || null;
+    encType = options.encType || defaultEncType;
 
     if (target instanceof FormData) {
       formData = target;
@@ -183,14 +186,7 @@ function getFormSubmissionInfo(target, formEncType, basename) {
           formData.append(name, value);
         }
       } else if (target != null) {
-        // When a raw object is sent - even though we encode it into formData,
-        // we still expose it as payload so it aligns with the behavior if
-        // encType were application/json or text/plain
-        payload = target; // To be deprecated in v7 so the default behavior of undefined matches
-        // the null behavior of no-serialization
-
         for (let name of Object.keys(target)) {
-          // @ts-expect-error
           formData.append(name, target[name]);
         }
       }
@@ -201,8 +197,7 @@ function getFormSubmissionInfo(target, formEncType, basename) {
     action,
     method: method.toLowerCase(),
     encType,
-    formData,
-    payload
+    formData
   };
 }
 
@@ -736,26 +731,21 @@ function useSubmitImpl(fetcherKey, fetcherRouteId) {
       action,
       method,
       encType,
-      formData,
-      payload
-    } = getFormSubmissionInfo(target, options.encType, basename);
-    let path = typeof options.action === "function" ? null : options.action || action;
-    let routerAction = typeof options.action === "function" ? options.action : null; // Base options shared between fetch() and navigate()
+      formData
+    } = getFormSubmissionInfo(target, options, basename); // Base options shared between fetch() and navigate()
 
     let opts = {
       preventScrollReset: options.preventScrollReset,
       formData,
-      payload,
-      formMethod: options.method || method,
-      formEncType: options.encType || encType,
-      action: routerAction
+      formMethod: method,
+      formEncType: encType
     };
 
     if (fetcherKey) {
       !(fetcherRouteId != null) ? process.env.NODE_ENV !== "production" ? UNSAFE_invariant(false, "No routeId available for useFetcher()") : UNSAFE_invariant(false) : void 0;
-      router.fetch(fetcherKey, fetcherRouteId, path, opts);
+      router.fetch(fetcherKey, fetcherRouteId, action, opts);
     } else {
-      router.navigate(path, _extends({}, opts, {
+      router.navigate(action, _extends({}, opts, {
         replace: options.replace,
         fromRouteId: currentRouteId
       }));
@@ -859,14 +849,7 @@ function useFetcher() {
   let [load] = React.useState(() => href => {
     !router ? process.env.NODE_ENV !== "production" ? UNSAFE_invariant(false, "No router available for fetcher.load()") : UNSAFE_invariant(false) : void 0;
     !routeId ? process.env.NODE_ENV !== "production" ? UNSAFE_invariant(false, "No routeId available for fetcher.load()") : UNSAFE_invariant(false) : void 0;
-
-    if (typeof href === "function") {
-      router.fetch(fetcherKey, routeId, null, {
-        loader: href
-      });
-    } else {
-      router.fetch(fetcherKey, routeId, href);
-    }
+    router.fetch(fetcherKey, routeId, href);
   });
   let submit = useSubmitImpl(fetcherKey, routeId);
   let fetcher = router.getFetcher(fetcherKey);