react-router-dom 0.0.0-experimental-4a8a492a → 0.0.0-experimental-e0f088aa

package/CHANGELOG.md

@@ -1,5 +1,59 @@
 # `react-router-dom`
 
+## 6.17.0
+
+### Minor Changes
+
+- Add experimental support for the [View Transitions API](https://developer.mozilla.org/en-US/docs/Web/API/ViewTransition) via `document.startViewTransition` to enable CSS animated transitions on SPA navigations in your application. ([#10916](https://github.com/remix-run/react-router/pull/10916))
+
+  The simplest approach to enabling a View Transition in your React Router app is via the new `<Link unstable_viewTransition>` prop. This will cause the navigation DOM update to be wrapped in `document.startViewTransition` which will enable transitions for the DOM update. Without any additional CSS styles, you'll get a basic cross-fade animation for your page.
+
+  If you need to apply more fine-grained styles for your animations, you can leverage the `unstable_useViewTransitionState` hook which will tell you when a transition is in progress and you can use that to apply classes or styles:
+
+  ```jsx
+  function ImageLink(to, src, alt) {
+    let isTransitioning = unstable_useViewTransitionState(to);
+    return (
+      <Link to={to} unstable_viewTransition>
+        <img
+          src={src}
+          alt={alt}
+          style={{
+            viewTransitionName: isTransitioning ? "image-expand" : "",
+          }}
+        />
+      </Link>
+    );
+  }
+  ```
+
+  You can also use the `<NavLink unstable_viewTransition>` shorthand which will manage the hook usage for you and automatically add a `transitioning` class to the `<a>` during the transition:
+
+  ```css
+  a.transitioning img {
+    view-transition-name: "image-expand";
+  }
+  ```
+
+  ```jsx
+  <NavLink to={to} unstable_viewTransition>
+    <img src={src} alt={alt} />
+  </NavLink>
+  ```
+
+  For an example usage of View Transitions with React Router, check out [our fork](https://github.com/brophdawg11/react-router-records) of the [Astro Records](https://github.com/Charca/astro-records) demo.
+
+  For more information on using the View Transitions API, please refer to the [Smooth and simple transitions with the View Transitions API](https://developer.chrome.com/docs/web-platform/view-transitions/) guide from the Google Chrome team.
+
+  Please note, that because the `ViewTransition` API is a DOM API, we now export a specific `RouterProvider` from `react-router-dom` with this functionality. If you are importing `RouterProvider` from `react-router`, then it will not support view transitions. ([#10928](https://github.com/remix-run/react-router/pull/10928)
+
+### Patch Changes
+
+- Log a warning and fail gracefully in `ScrollRestoration` when `sessionStorage` is unavailable ([#10848](https://github.com/remix-run/react-router/pull/10848))
+- Updated dependencies:
+  - `@remix-run/router@1.10.0`
+  - `react-router@6.17.0`
+
 ## 6.16.0
 
 ### Minor Changes

package/dist/dom.d.ts

@@ -56,6 +56,14 @@ export interface SubmitOptions {
      * Defaults to "application/x-www-form-urlencoded".
      */
     encType?: FormEncType;
+    /**
+     * Indicate a specific fetcherKey to use when using navigate=false
+     */
+    fetcherKey?: string;
+    /**
+     * navigate=false will use a fetcher instead of a navigation
+     */
+    navigate?: boolean;
     /**
      * 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

package/dist/index.d.ts

@@ -3,18 +3,21 @@
  * you'll need to update the rollup config for react-router-dom-v5-compat.
  */
 import * as React from "react";
-import type { FutureConfig, NavigateOptions, RelativeRoutingType, RouteObject, To } from "react-router";
+import type { FutureConfig, Location, NavigateOptions, RelativeRoutingType, RouteObject, RouterProviderProps, To } from "react-router";
 import type { Fetcher, FormEncType, FormMethod, FutureConfig as RouterFutureConfig, GetScrollRestorationKeyFunction, History, HTMLFormMethod, HydrationState, Router as RemixRouter, V7_FormMethod } from "@remix-run/router";
 import type { SubmitOptions, ParamKeyValuePair, URLSearchParamsInit, SubmitTarget } from "./dom";
 import { createSearchParams } from "./dom";
 export type { FormEncType, FormMethod, GetScrollRestorationKeyFunction, ParamKeyValuePair, SubmitOptions, URLSearchParamsInit, V7_FormMethod, };
 export { createSearchParams };
 export type { ActionFunction, ActionFunctionArgs, AwaitProps, unstable_Blocker, unstable_BlockerFunction, DataRouteMatch, DataRouteObject, ErrorResponse, Fetcher, Hash, IndexRouteObject, IndexRouteProps, JsonFunction, LazyRouteFunction, LayoutRouteProps, LoaderFunction, LoaderFunctionArgs, Location, MemoryRouterProps, NavigateFunction, NavigateOptions, NavigateProps, Navigation, Navigator, NonIndexRouteObject, OutletProps, Params, ParamParseKey, Path, PathMatch, Pathname, PathPattern, PathRouteProps, RedirectFunction, RelativeRoutingType, RouteMatch, RouteObject, RouteProps, RouterProps, RouterProviderProps, RoutesProps, Search, ShouldRevalidateFunction, ShouldRevalidateFunctionArgs, To, UIMatch, } from "react-router";
-export { AbortedDeferredError, Await, MemoryRouter, Navigate, NavigationType, Outlet, Route, Router, RouterProvider, Routes, createMemoryRouter, createPath, createRoutesFromChildren, createRoutesFromElements, defer, isRouteErrorResponse, generatePath, json, matchPath, matchRoutes, parsePath, redirect, redirectDocument, renderMatches, resolvePath, useActionData, useAsyncError, useAsyncValue, unstable_useBlocker, useHref, useInRouterContext, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes, } from "react-router";
+export { AbortedDeferredError, Await, MemoryRouter, Navigate, NavigationType, Outlet, Route, Router, Routes, createMemoryRouter, createPath, createRoutesFromChildren, createRoutesFromElements, defer, isRouteErrorResponse, generatePath, json, matchPath, matchRoutes, parsePath, redirect, redirectDocument, renderMatches, resolvePath, useActionData, useAsyncError, useAsyncValue, unstable_useBlocker, useHref, useInRouterContext, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes, } from "react-router";
 /** @internal */
-export { UNSAFE_DataRouterContext, UNSAFE_DataRouterStateContext, UNSAFE_NavigationContext, UNSAFE_LocationContext, UNSAFE_RouteContext, UNSAFE_ViewTransitionContext, UNSAFE_useRouteId, } from "react-router";
+export { UNSAFE_DataRouterContext, UNSAFE_DataRouterStateContext, UNSAFE_NavigationContext, UNSAFE_LocationContext, UNSAFE_RouteContext, UNSAFE_useRouteId, } from "react-router";
 declare global {
     var __staticRouterHydrationData: HydrationState | undefined;
+    interface Document {
+        startViewTransition(cb: () => Promise<void> | void): ViewTransition;
+    }
 }
 interface DOMRouterOpts {
     basename?: string;
@@ -24,6 +27,32 @@ interface DOMRouterOpts {
 }
 export declare function createBrowserRouter(routes: RouteObject[], opts?: DOMRouterOpts): RemixRouter;
 export declare function createHashRouter(routes: RouteObject[], opts?: DOMRouterOpts): RemixRouter;
+type ViewTransitionContextObject = {
+    isTransitioning: false;
+} | {
+    isTransitioning: true;
+    currentLocation: Location;
+    nextLocation: Location;
+};
+declare const ViewTransitionContext: React.Context<ViewTransitionContextObject>;
+export { ViewTransitionContext as UNSAFE_ViewTransitionContext };
+type FetchersContextObject = {
+    data: Map<string, any>;
+    register: (key: string) => void;
+    unregister: (key: string) => void;
+};
+declare const FetchersContext: React.Context<FetchersContextObject | null>;
+export { FetchersContext as UNSAFE_FetchersContext };
+interface ViewTransition {
+    finished: Promise<void>;
+    ready: Promise<void>;
+    updateCallbackDone: Promise<void>;
+    skipTransition(): void;
+}
+/**
+ * Given a Remix Router instance, render the appropriate UI
+ */
+export declare function RouterProvider({ fallbackElement, router, future, }: RouterProviderProps): React.ReactElement;
 export interface BrowserRouterProps {
     basename?: string;
     children?: React.ReactNode;
@@ -125,6 +154,14 @@ export interface FetcherFormProps extends React.FormHTMLAttributes<HTMLFormEleme
     onSubmit?: React.FormEventHandler<HTMLFormElement>;
 }
 export interface FormProps extends FetcherFormProps {
+    /**
+     * Indicate a specific fetcherKey to use when using navigate=false
+     */
+    fetcherKey?: string;
+    /**
+     * navigate=false will use a fetcher instead of a navigation
+     */
+    navigate?: boolean;
     /**
      * Forces a full document navigation instead of a fetch.
      */
@@ -216,9 +253,8 @@ export declare function useSubmit(): SubmitFunction;
 export declare function useFormAction(action?: string, { relative }?: {
     relative?: RelativeRoutingType;
 }): string;
-declare function createFetcherForm(fetcherKey: string, routeId: string): React.ForwardRefExoticComponent<FetcherFormProps & React.RefAttributes<HTMLFormElement>>;
 export type FetcherWithComponents<TData> = Fetcher<TData> & {
-    Form: ReturnType<typeof createFetcherForm>;
+    Form: React.ForwardRefExoticComponent<FetcherFormProps & React.RefAttributes<HTMLFormElement>>;
     submit: FetcherSubmitFunction;
     load: (href: string) => void;
 };
@@ -226,7 +262,9 @@ export type FetcherWithComponents<TData> = Fetcher<TData> & {
  * Interacts with route loaders and actions without causing a navigation. Great
  * for any interaction that stays on the same page.
  */
-export declare function useFetcher<TData = any>(): FetcherWithComponents<TData>;
+export declare function useFetcher<TData = any>({ key, }?: {
+    key?: string;
+}): FetcherWithComponents<TData>;
 /**
  * Provides all fetchers currently on the page. Useful for layouts and parent
  * routes that need to provide pending/optimistic UI regarding the fetch.