react-router-dom 6.14.1 → 6.14.2-pre.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # `react-router-dom`
 
+## 6.14.2-pre.0
+
+### Patch Changes
+
+- Add missing `<Form state>` prop to populate `history.state` on submission navigations ([#10630](https://github.com/remix-run/react-router/pull/10630))
+- Properly decode element id when emulating hash scrolling via `<ScrollRestoration>` ([#10682](https://github.com/remix-run/react-router/pull/10682))
+- Support proper hydration of `Error` subclasses such as `ReferenceError`/`TypeError` ([#10633](https://github.com/remix-run/react-router/pull/10633))
+- Updated dependencies:
+  - `@remix-run/router@1.7.2-pre.0`
+  - `react-router@6.14.2-pre.0`
+
 ## 6.14.1
 
 ### Patch Changes

package/dist/dom.d.ts

@@ -62,6 +62,10 @@ export interface SubmitOptions {
      * to `false`.
      */
     replace?: boolean;
+    /**
+     * State object to add to the history stack entry for this navigation
+     */
+    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

package/dist/index.d.ts

@@ -94,7 +94,7 @@ export interface NavLinkProps extends Omit<LinkProps, "className" | "style" | "c
  * A <Link> wrapper that knows if it's "active" or not.
  */
 export declare const NavLink: React.ForwardRefExoticComponent<NavLinkProps & React.RefAttributes<HTMLAnchorElement>>;
-export interface FormProps extends React.FormHTMLAttributes<HTMLFormElement> {
+export interface FetcherFormProps extends React.FormHTMLAttributes<HTMLFormElement> {
     /**
      * The HTTP verb to use when the form is submit. Supports "get", "post",
      * "put", "delete", "patch".
@@ -109,16 +109,6 @@ export interface FormProps extends React.FormHTMLAttributes<HTMLFormElement> {
      * Normal `<form action>` but supports React Router's relative paths.
      */
     action?: string;
-    /**
-     * Forces a full document navigation instead of a fetch.
-     */
-    reloadDocument?: boolean;
-    /**
-     * Replaces the current entry in the browser history stack when the form
-     * navigates. Use this if you don't want the user to be able to click "back"
-     * to the page with the form on it.
-     */
-    replace?: boolean;
     /**
      * 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
@@ -136,6 +126,22 @@ export interface FormProps extends React.FormHTMLAttributes<HTMLFormElement> {
      */
     onSubmit?: React.FormEventHandler<HTMLFormElement>;
 }
+export interface FormProps extends FetcherFormProps {
+    /**
+     * Forces a full document navigation instead of a fetch.
+     */
+    reloadDocument?: boolean;
+    /**
+     * Replaces the current entry in the browser history stack when the form
+     * navigates. Use this if you don't want the user to be able to click "back"
+     * to the page with the form on it.
+     */
+    replace?: boolean;
+    /**
+     * State object to add to the history stack entry for this navigation
+     */
+    state?: any;
+}
 /**
  * A `@remix-run/router`-aware `<form>`. It behaves like a normal form except
  * that the interaction with the server is with `fetch` instead of new document
@@ -197,7 +203,7 @@ export interface SubmitFunction {
  * Submits a fetcher `<form>` to the server without reloading the page.
  */
 export interface FetcherSubmitFunction {
-    (target: SubmitTarget, options?: Omit<SubmitOptions, "replace">): void;
+    (target: SubmitTarget, options?: Omit<SubmitOptions, "replace" | "state">): void;
 }
 /**
  * Returns a function that may be used to programmatically submit a form (or
@@ -207,7 +213,7 @@ export declare function useSubmit(): SubmitFunction;
 export declare function useFormAction(action?: string, { relative }?: {
     relative?: RelativeRoutingType;
 }): string;
-declare function createFetcherForm(fetcherKey: string, routeId: string): React.ForwardRefExoticComponent<FormProps & React.RefAttributes<HTMLFormElement>>;
+declare function createFetcherForm(fetcherKey: string, routeId: string): React.ForwardRefExoticComponent<FetcherFormProps & React.RefAttributes<HTMLFormElement>>;
 export type FetcherWithComponents<TData> = Fetcher<TData> & {
     Form: ReturnType<typeof createFetcherForm>;
     submit: FetcherSubmitFunction;

package/dist/index.js

@@ -1,5 +1,5 @@
 /**
- * React Router DOM v6.14.1
+ * React Router DOM v6.14.2-pre.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -203,7 +203,7 @@ function getFormSubmissionInfo(target, basename) {
 
 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", "submit", "relative", "preventScrollReset"];
+  _excluded3 = ["reloadDocument", "replace", "state", "method", "action", "onSubmit", "submit", "relative", "preventScrollReset"];
 function createBrowserRouter(routes, opts) {
   return createRouter({
     basename: opts == null ? void 0 : opts.basename,
@@ -252,11 +252,29 @@ function deserializeErrors(errors) {
     if (val && val.__type === "RouteErrorResponse") {
       serialized[key] = new ErrorResponse(val.status, val.statusText, val.data, val.internal === true);
     } else if (val && val.__type === "Error") {
-      let error = new Error(val.message);
-      // Wipe away the client-side stack trace.  Nothing to fill it in with
-      // because we don't serialize SSR stack traces for security reasons
-      error.stack = "";
-      serialized[key] = error;
+      // Attempt to reconstruct the right type of Error (i.e., ReferenceError)
+      if (val.__subType) {
+        let ErrorConstructor = window[val.__subType];
+        if (typeof ErrorConstructor === "function") {
+          try {
+            // @ts-expect-error
+            let error = new ErrorConstructor(val.message);
+            // Wipe away the client-side stack trace.  Nothing to fill it in with
+            // because we don't serialize SSR stack traces for security reasons
+            error.stack = "";
+            serialized[key] = error;
+          } catch (e) {
+            // no-op - fall through and create a normal Error
+          }
+        }
+      }
+      if (serialized[key] == null) {
+        let error = new Error(val.message);
+        // Wipe away the client-side stack trace.  Nothing to fill it in with
+        // because we don't serialize SSR stack traces for security reasons
+        error.stack = "";
+        serialized[key] = error;
+      }
     } else {
       serialized[key] = val;
     }
@@ -560,6 +578,7 @@ const FormImpl = /*#__PURE__*/React.forwardRef((_ref6, forwardedRef) => {
   let {
       reloadDocument,
       replace,
+      state,
       method = defaultMethod,
       action,
       onSubmit,
@@ -581,6 +600,7 @@ const FormImpl = /*#__PURE__*/React.forwardRef((_ref6, forwardedRef) => {
     submit(submitter || event.currentTarget, {
       method: submitMethod,
       replace,
+      state,
       relative,
       preventScrollReset
     });
@@ -733,6 +753,7 @@ function useSubmit() {
       formMethod: options.method || method,
       formEncType: options.encType || encType,
       replace: options.replace,
+      state: options.state,
       fromRouteId: currentRouteId
     });
   }, [router, basename, currentRouteId]);
@@ -961,7 +982,7 @@ function useScrollRestoration(_temp3) {
       }
       // try to scroll to the hash
       if (location.hash) {
-        let el = document.getElementById(location.hash.slice(1));
+        let el = document.getElementById(decodeURIComponent(location.hash.slice(1)));
         if (el) {
           el.scrollIntoView();
           return;