react-router-dom-v5-compat 6.13.0 → 6.14.0-pre.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # `react-router-dom-v5-compat`
 
+## 6.14.0-pre.0
+
+### Patch Changes
+
+- upgrade typescript to 5.1 ([#10581](https://github.com/remix-run/react-router/pull/10581))
+- Updated dependencies:
+  - `react-router@6.14.0-pre.0`
+  - `react-router-dom@6.14.0-pre.0`
+
 ## 6.13.0
 
 ### Patch Changes

package/dist/index.js

@@ -1,5 +1,5 @@
 /**
- * React Router DOM v5 Compat v6.13.0
+ * React Router DOM v5 Compat v6.14.0-pre.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -9,9 +9,9 @@
  * @license MIT
  */
 import * as React from 'react';
-import { UNSAFE_mapRouteProperties, UNSAFE_startTransitionImpl, Router, UNSAFE_NavigationContext, useHref, useResolvedPath, useLocation, UNSAFE_DataRouterStateContext, useNavigate, createPath, UNSAFE_useRouteId, UNSAFE_RouteContext, useMatches, useNavigation, unstable_useBlocker, UNSAFE_DataRouterContext, Routes, Route } from 'react-router';
+import { UNSAFE_mapRouteProperties, Router, UNSAFE_NavigationContext, useHref, useResolvedPath, useLocation, UNSAFE_DataRouterStateContext, useNavigate, createPath, UNSAFE_useRouteId, UNSAFE_RouteContext, useMatches, useNavigation, unstable_useBlocker, UNSAFE_DataRouterContext, Routes, Route } from 'react-router';
 export { AbortedDeferredError, Await, MemoryRouter, Navigate, NavigationType, Outlet, Route, Router, RouterProvider, Routes, UNSAFE_DataRouterContext, UNSAFE_DataRouterStateContext, UNSAFE_LocationContext, UNSAFE_NavigationContext, UNSAFE_RouteContext, UNSAFE_useRouteId, createMemoryRouter, createPath, createRoutesFromChildren, createRoutesFromElements, defer, generatePath, isRouteErrorResponse, json, matchPath, matchRoutes, parsePath, redirect, renderMatches, resolvePath, unstable_useBlocker, useActionData, useAsyncError, useAsyncValue, useHref, useInRouterContext, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes } from 'react-router';
-import { stripBasename, createRouter, createBrowserHistory, createHashHistory, ErrorResponse, UNSAFE_warning, UNSAFE_invariant, joinPaths } from '@remix-run/router';
+import { stripBasename, UNSAFE_warning, createRouter, createBrowserHistory, createHashHistory, ErrorResponse, UNSAFE_invariant, joinPaths } from '@remix-run/router';
 import { parsePath, Action, createPath as createPath$1 } from 'history';
 import { Route as Route$1, useHistory } from 'react-router-dom';
 
@@ -110,83 +110,95 @@ function getSearchParamsForLocation(locationSearch, defaultSearchParams) {
   }
   return searchParams;
 }
-function getFormSubmissionInfo(target, options, basename) {
+// One-time check for submitter support
+let formDataSupportsSubmitter = false;
+try {
+  // @ts-expect-error if FormData supports the submitter parameter, this will throw
+  new FormData(undefined, 0);
+} catch (e) {
+  formDataSupportsSubmitter = true;
+}
+const supportedFormEncTypes = new Set(["application/x-www-form-urlencoded", "multipart/form-data", "text/plain"]);
+function getFormEncType(encType) {
+  if (encType != null && !supportedFormEncTypes.has(encType)) {
+    process.env.NODE_ENV !== "production" ? UNSAFE_warning(false, "\"" + encType + "\" is not a valid `encType` for `<Form>`/`<fetcher.Form>` " + ("and will default to \"" + defaultEncType + "\"")) : void 0;
+    return null;
+  }
+  return encType;
+}
+function getFormSubmissionInfo(target, basename) {
   let method;
-  let action = null;
+  let action;
   let encType;
   let formData;
+  let body;
   if (isFormElement(target)) {
-    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;
+    // 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 = getFormEncType(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>
-    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
-    if (target.name) {
-      formData.append(target.name, target.value);
+    // 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 = getFormEncType(target.getAttribute("formenctype")) || getFormEncType(form.getAttribute("enctype")) || defaultEncType;
+    // Build a FormData object populated from a form and submitter
+    formData = new FormData(form, target);
+    // If this browser doesn't support the `FormData(el, submitter)` format,
+    // then tack on the submitter value at the end.  This is a lightweight
+    // solution that is not 100% spec compliant.  For complete support in older
+    // browsers, consider using the `formdata-submitter-polyfill` package
+    if (!formDataSupportsSubmitter) {
+      let {
+        name,
+        type,
+        value
+      } = target;
+      if (type === "image") {
+        let prefix = name ? name + "." : "";
+        formData.append(prefix + "x", "0");
+        formData.append(prefix + "y", "0");
+      } else if (name) {
+        formData.append(name, value);
+      }
     }
   } else if (isHtmlElement(target)) {
     throw new Error("Cannot submit element that is not <form>, <button>, or " + "<input type=\"submit|image\">");
   } else {
-    method = options.method || defaultMethod;
-    action = options.action || null;
-    encType = options.encType || defaultEncType;
-    if (target instanceof FormData) {
-      formData = target;
-    } else {
-      formData = new FormData();
-      if (target instanceof URLSearchParams) {
-        for (let [name, value] of target) {
-          formData.append(name, value);
-        }
-      } else if (target != null) {
-        for (let name of Object.keys(target)) {
-          formData.append(name, target[name]);
-        }
-      }
-    }
+    method = defaultMethod;
+    action = null;
+    encType = defaultEncType;
+    body = target;
+  }
+  // Send body for <Form encType="text/plain" so we encode it into text
+  if (formData && encType === "text/plain") {
+    body = formData;
+    formData = undefined;
   }
   return {
     action,
     method: method.toLowerCase(),
     encType,
-    formData
+    formData,
+    body
   };
 }
 
 const _excluded = ["onClick", "relative", "reloadDocument", "replace", "state", "target", "to", "preventScrollReset"],
   _excluded2 = ["aria-current", "caseSensitive", "className", "end", "style", "to", "children"],
-  _excluded3 = ["reloadDocument", "replace", "method", "action", "onSubmit", "fetcherKey", "routeId", "relative", "preventScrollReset"];
+  _excluded3 = ["reloadDocument", "replace", "method", "action", "onSubmit", "submit", "relative", "preventScrollReset"];
 function createBrowserRouter(routes, opts) {
   return createRouter({
     basename: opts == null ? void 0 : opts.basename,
@@ -246,6 +258,33 @@ function deserializeErrors(errors) {
   }
   return serialized;
 }
+//#endregion
+////////////////////////////////////////////////////////////////////////////////
+//#region Components
+////////////////////////////////////////////////////////////////////////////////
+/**
+  Webpack + React 17 fails to compile on any of the following because webpack
+  complains that `startTransition` doesn't exist in `React`:
+  * import { startTransition } from "react"
+  * import * as React from from "react";
+    "startTransition" in React ? React.startTransition(() => setState()) : setState()
+  * import * as React from from "react";
+    "startTransition" in React ? React["startTransition"](() => setState()) : setState()
+
+  Moving it to a constant such as the following solves the Webpack/React 17 issue:
+  * import * as React from from "react";
+    const START_TRANSITION = "startTransition";
+    START_TRANSITION in React ? React[START_TRANSITION](() => setState()) : setState()
+
+  However, that introduces webpack/terser minification issues in production builds
+  in React 18 where minification/obfuscation ends up removing the call of
+  React.startTransition entirely from the first half of the ternary.  Grabbing
+  this exported reference once up front resolves that issue.
+
+  See https://github.com/remix-run/react-router/issues/10579
+*/
+const START_TRANSITION = "startTransition";
+const startTransitionImpl = React[START_TRANSITION];
 /**
  * A `<Router>` for use in web browsers. Provides the cleanest URLs.
  */
@@ -272,7 +311,7 @@ function BrowserRouter(_ref) {
     v7_startTransition
   } = future || {};
   let setState = React.useCallback(newState => {
-    v7_startTransition && UNSAFE_startTransitionImpl ? UNSAFE_startTransitionImpl(() => setStateImpl(newState)) : setStateImpl(newState);
+    v7_startTransition && startTransitionImpl ? startTransitionImpl(() => setStateImpl(newState)) : setStateImpl(newState);
   }, [setStateImpl, v7_startTransition]);
   React.useLayoutEffect(() => history.listen(setState), [history, setState]);
   return /*#__PURE__*/React.createElement(Router, {
@@ -310,7 +349,7 @@ function HashRouter(_ref2) {
     v7_startTransition
   } = future || {};
   let setState = React.useCallback(newState => {
-    v7_startTransition && UNSAFE_startTransitionImpl ? UNSAFE_startTransitionImpl(() => setStateImpl(newState)) : setStateImpl(newState);
+    v7_startTransition && startTransitionImpl ? startTransitionImpl(() => setStateImpl(newState)) : setStateImpl(newState);
   }, [setStateImpl, v7_startTransition]);
   React.useLayoutEffect(() => history.listen(setState), [history, setState]);
   return /*#__PURE__*/React.createElement(Router, {
@@ -342,7 +381,7 @@ function HistoryRouter(_ref3) {
     v7_startTransition
   } = future || {};
   let setState = React.useCallback(newState => {
-    v7_startTransition && UNSAFE_startTransitionImpl ? UNSAFE_startTransitionImpl(() => setStateImpl(newState)) : setStateImpl(newState);
+    v7_startTransition && startTransitionImpl ? startTransitionImpl(() => setStateImpl(newState)) : setStateImpl(newState);
   }, [setStateImpl, v7_startTransition]);
   React.useLayoutEffect(() => history.listen(setState), [history, setState]);
   return /*#__PURE__*/React.createElement(Router, {
@@ -503,7 +542,9 @@ if (process.env.NODE_ENV !== "production") {
  * submitted and returns with data.
  */
 const Form = /*#__PURE__*/React.forwardRef((props, ref) => {
+  let submit = useSubmit();
   return /*#__PURE__*/React.createElement(FormImpl, _extends({}, props, {
+    submit: submit,
     ref: ref
   }));
 });
@@ -517,13 +558,11 @@ const FormImpl = /*#__PURE__*/React.forwardRef((_ref6, forwardedRef) => {
       method = defaultMethod,
       action,
       onSubmit,
-      fetcherKey,
-      routeId,
+      submit,
       relative,
       preventScrollReset
     } = _ref6,
     props = _objectWithoutPropertiesLoose(_ref6, _excluded3);
-  let submit = useSubmitImpl(fetcherKey, routeId);
   let formMethod = method.toLowerCase() === "get" ? "get" : "post";
   let formAction = useFormAction(action, {
     relative
@@ -576,7 +615,8 @@ if (process.env.NODE_ENV !== "production") {
 var DataRouterHook;
 (function (DataRouterHook) {
   DataRouterHook["UseScrollRestoration"] = "useScrollRestoration";
-  DataRouterHook["UseSubmitImpl"] = "useSubmitImpl";
+  DataRouterHook["UseSubmit"] = "useSubmit";
+  DataRouterHook["UseSubmitFetcher"] = "useSubmitFetcher";
   DataRouterHook["UseFetcher"] = "useFetcher";
 })(DataRouterHook || (DataRouterHook = {}));
 var DataRouterStateHook;
@@ -652,17 +692,19 @@ function useSearchParams(defaultInit) {
   }, [navigate, searchParams]);
   return [searchParams, setSearchParams];
 }
+function validateClientSideSubmission() {
+  if (typeof document === "undefined") {
+    throw new Error("You are calling submit during the server render. " + "Try calling submit within a `useEffect` or callback instead.");
+  }
+}
 /**
  * Returns a function that may be used to programmatically submit a form (or
  * some arbitrary data) to the server.
  */
 function useSubmit() {
-  return useSubmitImpl();
-}
-function useSubmitImpl(fetcherKey, fetcherRouteId) {
   let {
     router
-  } = useDataRouterContext(DataRouterHook.UseSubmitImpl);
+  } = useDataRouterContext(DataRouterHook.UseSubmit);
   let {
     basename
   } = React.useContext(UNSAFE_NavigationContext);
@@ -671,32 +713,56 @@ function useSubmitImpl(fetcherKey, fetcherRouteId) {
     if (options === void 0) {
       options = {};
     }
-    if (typeof document === "undefined") {
-      throw new Error("You are calling submit during the server render. " + "Try calling submit within a `useEffect` or callback instead.");
-    }
+    validateClientSideSubmission();
     let {
       action,
       method,
       encType,
-      formData
-    } = getFormSubmissionInfo(target, options, basename);
-    // Base options shared between fetch() and navigate()
-    let opts = {
+      formData,
+      body
+    } = getFormSubmissionInfo(target, basename);
+    router.navigate(options.action || action, {
       preventScrollReset: options.preventScrollReset,
       formData,
-      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, action, opts);
-    } else {
-      router.navigate(action, _extends({}, opts, {
-        replace: options.replace,
-        fromRouteId: currentRouteId
-      }));
+      body,
+      formMethod: options.method || method,
+      formEncType: options.encType || encType,
+      replace: options.replace,
+      fromRouteId: currentRouteId
+    });
+  }, [router, basename, currentRouteId]);
+}
+/**
+ * Returns the implementation for fetcher.submit
+ */
+function useSubmitFetcher(fetcherKey, fetcherRouteId) {
+  let {
+    router
+  } = useDataRouterContext(DataRouterHook.UseSubmitFetcher);
+  let {
+    basename
+  } = React.useContext(UNSAFE_NavigationContext);
+  return React.useCallback(function (target, options) {
+    if (options === void 0) {
+      options = {};
     }
-  }, [router, basename, fetcherKey, fetcherRouteId, currentRouteId]);
+    validateClientSideSubmission();
+    let {
+      action,
+      method,
+      encType,
+      formData,
+      body
+    } = getFormSubmissionInfo(target, basename);
+    !(fetcherRouteId != null) ? process.env.NODE_ENV !== "production" ? UNSAFE_invariant(false, "No routeId available for useFetcher()") : UNSAFE_invariant(false) : void 0;
+    router.fetch(fetcherKey, fetcherRouteId, options.action || action, {
+      preventScrollReset: options.preventScrollReset,
+      formData,
+      body,
+      formMethod: options.method || method,
+      formEncType: options.encType || encType
+    });
+  }, [router, basename, fetcherKey, fetcherRouteId]);
 }
 // v7: Eventually we should deprecate this entirely in favor of using the
 // router method directly?
@@ -750,10 +816,10 @@ function useFormAction(action, _temp2) {
 }
 function createFetcherForm(fetcherKey, routeId) {
   let FetcherForm = /*#__PURE__*/React.forwardRef((props, ref) => {
+    let submit = useSubmitFetcher(fetcherKey, routeId);
     return /*#__PURE__*/React.createElement(FormImpl, _extends({}, props, {
       ref: ref,
-      fetcherKey: fetcherKey,
-      routeId: routeId
+      submit: submit
     }));
   });
   if (process.env.NODE_ENV !== "production") {
@@ -785,7 +851,7 @@ function useFetcher() {
     !routeId ? process.env.NODE_ENV !== "production" ? UNSAFE_invariant(false, "No routeId available for fetcher.load()") : UNSAFE_invariant(false) : void 0;
     router.fetch(fetcherKey, routeId, href);
   });
-  let submit = useSubmitImpl(fetcherKey, routeId);
+  let submit = useSubmitFetcher(fetcherKey, routeId);
   let fetcher = router.getFetcher(fetcherKey);
   let fetcherWithComponents = React.useMemo(() => _extends({
     Form,
@@ -831,6 +897,9 @@ function useScrollRestoration(_temp3) {
     restoreScrollPosition,
     preventScrollReset
   } = useDataRouterState(DataRouterStateHook.UseScrollRestoration);
+  let {
+    basename
+  } = React.useContext(UNSAFE_NavigationContext);
   let location = useLocation();
   let matches = useMatches();
   let navigation = useNavigation();
@@ -866,9 +935,13 @@ function useScrollRestoration(_temp3) {
     // Enable scroll restoration in the router
     // eslint-disable-next-line react-hooks/rules-of-hooks
     React.useLayoutEffect(() => {
-      let disableScrollRestoration = router == null ? void 0 : router.enableScrollRestoration(savedScrollPositions, () => window.scrollY, getKey);
+      let getKeyWithoutBasename = getKey && basename !== "/" ? (location, matches) => getKey( // Strip the basename to match useLocation()
+      _extends({}, location, {
+        pathname: stripBasename(location.pathname, basename) || location.pathname
+      }), matches) : getKey;
+      let disableScrollRestoration = router == null ? void 0 : router.enableScrollRestoration(savedScrollPositions, () => window.scrollY, getKeyWithoutBasename);
       return () => disableScrollRestoration && disableScrollRestoration();
-    }, [router, getKey]);
+    }, [router, basename, getKey]);
     // Restore scrolling when state.restoreScrollPosition changes
     // eslint-disable-next-line react-hooks/rules-of-hooks
     React.useLayoutEffect(() => {