react-router 6.17.0-pre.1 → 6.17.0-pre.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # `react-router`
 
+## 6.17.0-pre.2
+
+### Patch Changes
+
+- Export a separate `RouterProvider` from `react-router-dom` with `startViewTransition` support ([#10928](https://github.com/remix-run/react-router/pull/10928))
+
 ## 6.17.0-pre.1
 
 ### Patch Changes

package/dist/index.d.ts

@@ -3,7 +3,7 @@ import { AbortedDeferredError, Action as NavigationType, createPath, defer, gene
 import type { AwaitProps, FutureConfig, IndexRouteProps, LayoutRouteProps, MemoryRouterProps, NavigateProps, OutletProps, PathRouteProps, RouteProps, RouterProps, RouterProviderProps, RoutesProps } from "./lib/components";
 import { Await, MemoryRouter, Navigate, Outlet, Route, Router, RouterProvider, Routes, createRoutesFromChildren, renderMatches } from "./lib/components";
 import type { DataRouteMatch, DataRouteObject, IndexRouteObject, NavigateOptions, Navigator, NonIndexRouteObject, RouteMatch, RouteObject } from "./lib/context";
-import { DataRouterContext, DataRouterStateContext, LocationContext, NavigationContext, RouteContext, ViewTransitionContext } from "./lib/context";
+import { DataRouterContext, DataRouterStateContext, LocationContext, NavigationContext, RouteContext } from "./lib/context";
 import type { NavigateFunction } from "./lib/hooks";
 import { useActionData, useAsyncError, useAsyncValue, useBlocker, useHref, useInRouterContext, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError, useRouteId, useRouteLoaderData, useRoutes, useRoutesImpl } from "./lib/hooks";
 type Hash = string;
@@ -22,4 +22,4 @@ export declare function createMemoryRouter(routes: RouteObject[], opts?: {
     initialIndex?: number;
 }): RemixRouter;
 /** @internal */
-export { DataRouterContext as UNSAFE_DataRouterContext, DataRouterStateContext as UNSAFE_DataRouterStateContext, LocationContext as UNSAFE_LocationContext, NavigationContext as UNSAFE_NavigationContext, RouteContext as UNSAFE_RouteContext, ViewTransitionContext as UNSAFE_ViewTransitionContext, mapRouteProperties as UNSAFE_mapRouteProperties, useRouteId as UNSAFE_useRouteId, useRoutesImpl as UNSAFE_useRoutesImpl, };
+export { DataRouterContext as UNSAFE_DataRouterContext, DataRouterStateContext as UNSAFE_DataRouterStateContext, LocationContext as UNSAFE_LocationContext, NavigationContext as UNSAFE_NavigationContext, RouteContext as UNSAFE_RouteContext, mapRouteProperties as UNSAFE_mapRouteProperties, useRouteId as UNSAFE_useRouteId, useRoutesImpl as UNSAFE_useRoutesImpl, };

package/dist/index.js

@@ -1,5 +1,5 @@
 /**
- * React Router v6.17.0-pre.1
+ * React Router v6.17.0-pre.2
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -37,12 +37,6 @@ const DataRouterStateContext = /*#__PURE__*/React.createContext(null);
 if (process.env.NODE_ENV !== "production") {
   DataRouterStateContext.displayName = "DataRouterState";
 }
-const ViewTransitionContext = /*#__PURE__*/React.createContext({
-  isTransitioning: false
-});
-if (process.env.NODE_ENV !== "production") {
-  ViewTransitionContext.displayName = "ViewTransition";
-}
 const AwaitContext = /*#__PURE__*/React.createContext(null);
 if (process.env.NODE_ENV !== "production") {
   AwaitContext.displayName = "Await";
@@ -873,36 +867,6 @@ function warningOnce(key, cond, message) {
 */
 const START_TRANSITION = "startTransition";
 const startTransitionImpl = React[START_TRANSITION];
-function startTransitionSafe(cb) {
-  if (startTransitionImpl) {
-    startTransitionImpl(cb);
-  } else {
-    cb();
-  }
-}
-class Deferred {
-  // @ts-expect-error - no initializer
-
-  // @ts-expect-error - no initializer
-
-  constructor() {
-    this.status = "pending";
-    this.promise = new Promise((resolve, reject) => {
-      this.resolve = value => {
-        if (this.status === "pending") {
-          this.status = "resolved";
-          resolve(value);
-        }
-      };
-      this.reject = reason => {
-        if (this.status === "pending") {
-          this.status = "rejected";
-          reject(reason);
-        }
-      };
-    });
-  }
-}
 
 /**
  * Given a Remix Router instance, render the appropriate UI
@@ -914,107 +878,20 @@ function RouterProvider(_ref) {
     future
   } = _ref;
   let [state, setStateImpl] = React.useState(router.state);
-  let [pendingState, setPendingState] = React.useState();
-  let [vtContext, setVtContext] = React.useState({
-    isTransitioning: false
-  });
-  let [renderDfd, setRenderDfd] = React.useState();
-  let [transition, setTransition] = React.useState();
-  let [interruption, setInterruption] = React.useState();
   let {
     v7_startTransition
   } = future || {};
-  let optInStartTransition = React.useCallback(cb => {
-    if (v7_startTransition) {
-      startTransitionSafe(cb);
-    } else {
-      cb();
-    }
-  }, [v7_startTransition]);
-  let setState = React.useCallback((newState, _ref2) => {
-    let {
-      unstable_viewTransitionOpts: viewTransitionOpts
-    } = _ref2;
-    if (!viewTransitionOpts || router.window == null || typeof router.window.document.startViewTransition !== "function") {
-      // Mid-navigation state update, or startViewTransition isn't available
-      optInStartTransition(() => setStateImpl(newState));
-    } else if (transition && renderDfd) {
-      // Interrupting an in-progress transition, cancel and let everything flush
-      // out, and then kick off a new transition from the interruption state
-      renderDfd.resolve();
-      transition.skipTransition();
-      setInterruption({
-        state: newState,
-        currentLocation: viewTransitionOpts.currentLocation,
-        nextLocation: viewTransitionOpts.nextLocation
-      });
+  let setState = React.useCallback(newState => {
+    if (v7_startTransition && startTransitionImpl) {
+      startTransitionImpl(() => setStateImpl(newState));
     } else {
-      // Completed navigation update with opted-in view transitions, let 'er rip
-      setPendingState(newState);
-      setVtContext({
-        isTransitioning: true,
-        currentLocation: viewTransitionOpts.currentLocation,
-        nextLocation: viewTransitionOpts.nextLocation
-      });
+      setStateImpl(newState);
     }
-  }, [optInStartTransition, transition, renderDfd, router.window]);
+  }, [setStateImpl, v7_startTransition]);
 
   // Need to use a layout effect here so we are subscribed early enough to
   // pick up on any render-driven redirects/navigations (useEffect/<Navigate>)
   React.useLayoutEffect(() => router.subscribe(setState), [router, setState]);
-
-  // When we start a view transition, create a Deferred we can use for the
-  // eventual "completed" render
-  React.useEffect(() => {
-    if (vtContext.isTransitioning) {
-      setRenderDfd(new Deferred());
-    }
-  }, [vtContext.isTransitioning]);
-
-  // Once the deferred is created, kick off startViewTransition() to update the
-  // DOM and then wait on the Deferred to resolve (indicating the DOM update has
-  // happened)
-  React.useEffect(() => {
-    if (renderDfd && pendingState && router.window) {
-      let newState = pendingState;
-      let renderPromise = renderDfd.promise;
-      let transition = router.window.document.startViewTransition(async () => {
-        optInStartTransition(() => setStateImpl(newState));
-        await renderPromise;
-      });
-      transition.finished.finally(() => {
-        setRenderDfd(undefined);
-        setTransition(undefined);
-        setPendingState(undefined);
-        setVtContext({
-          isTransitioning: false
-        });
-      });
-      setTransition(transition);
-    }
-  }, [optInStartTransition, pendingState, renderDfd, router.window]);
-
-  // When the new location finally renders and is committed to the DOM, this
-  // effect will run to resolve the transition
-  React.useEffect(() => {
-    if (renderDfd && pendingState && state.location.key === pendingState.location.key) {
-      renderDfd.resolve();
-    }
-  }, [renderDfd, transition, state.location, pendingState]);
-
-  // If we get interrupted with a new navigation during a transition, we skip
-  // the active transition, let it cleanup, then kick it off again here
-  React.useEffect(() => {
-    if (!vtContext.isTransitioning && interruption) {
-      setPendingState(interruption.state);
-      setVtContext({
-        isTransitioning: true,
-        currentLocation: interruption.currentLocation,
-        nextLocation: interruption.nextLocation
-      });
-      setInterruption(undefined);
-    }
-  }, [vtContext.isTransitioning, interruption]);
   let navigator = React.useMemo(() => {
     return {
       createHref: router.createHref,
@@ -1049,8 +926,6 @@ function RouterProvider(_ref) {
     value: dataRouterContext
   }, /*#__PURE__*/React.createElement(DataRouterStateContext.Provider, {
     value: state
-  }, /*#__PURE__*/React.createElement(ViewTransitionContext.Provider, {
-    value: vtContext
   }, /*#__PURE__*/React.createElement(Router, {
     basename: basename,
     location: state.location,
@@ -1059,13 +934,13 @@ function RouterProvider(_ref) {
   }, state.initialized ? /*#__PURE__*/React.createElement(DataRoutes, {
     routes: router.routes,
     state: state
-  }) : fallbackElement)))), null);
+  }) : fallbackElement))), null);
 }
-function DataRoutes(_ref3) {
+function DataRoutes(_ref2) {
   let {
     routes,
     state
-  } = _ref3;
+  } = _ref2;
   return useRoutesImpl(routes, undefined, state);
 }
 /**
@@ -1073,14 +948,14 @@ function DataRoutes(_ref3) {
  *
  * @see https://reactrouter.com/router-components/memory-router
  */
-function MemoryRouter(_ref4) {
+function MemoryRouter(_ref3) {
   let {
     basename,
     children,
     initialEntries,
     initialIndex,
     future
-  } = _ref4;
+  } = _ref3;
   let historyRef = React.useRef();
   if (historyRef.current == null) {
     historyRef.current = createMemoryHistory({
@@ -1118,13 +993,13 @@ function MemoryRouter(_ref4) {
  *
  * @see https://reactrouter.com/components/navigate
  */
-function Navigate(_ref5) {
+function Navigate(_ref4) {
   let {
     to,
     replace,
     state,
     relative
-  } = _ref5;
+  } = _ref4;
   !useInRouterContext() ? process.env.NODE_ENV !== "production" ? UNSAFE_invariant(false, // TODO: This error is probably because they somehow have 2 versions of
   // the router loaded. We can help them understand how to avoid that.
   "<Navigate> may be used only in the context of a <Router> component.") : UNSAFE_invariant(false) : void 0;
@@ -1173,7 +1048,7 @@ function Route(_props) {
  *
  * @see https://reactrouter.com/router-components/router
  */
-function Router(_ref6) {
+function Router(_ref5) {
   let {
     basename: basenameProp = "/",
     children = null,
@@ -1181,7 +1056,7 @@ function Router(_ref6) {
     navigationType = Action.Pop,
     navigator,
     static: staticProp = false
-  } = _ref6;
+  } = _ref5;
   !!useInRouterContext() ? process.env.NODE_ENV !== "production" ? UNSAFE_invariant(false, "You cannot render a <Router> inside another <Router>." + " You should never have more than one in your app.") : UNSAFE_invariant(false) : void 0;
 
   // Preserve trailing slashes on basename, so we can let the user control
@@ -1235,23 +1110,23 @@ function Router(_ref6) {
  *
  * @see https://reactrouter.com/components/routes
  */
-function Routes(_ref7) {
+function Routes(_ref6) {
   let {
     children,
     location
-  } = _ref7;
+  } = _ref6;
   return useRoutes(createRoutesFromChildren(children), location);
 }
 /**
  * Component to use for rendering lazily loaded data from returning defer()
  * in a loader function
  */
-function Await(_ref8) {
+function Await(_ref7) {
   let {
     children,
     errorElement,
     resolve
-  } = _ref8;
+  } = _ref7;
   return /*#__PURE__*/React.createElement(AwaitErrorBoundary, {
     resolve: resolve,
     errorElement: errorElement
@@ -1356,10 +1231,10 @@ class AwaitErrorBoundary extends React.Component {
  * @private
  * Indirection to leverage useAsyncValue for a render-prop API on `<Await>`
  */
-function ResolveAwait(_ref9) {
+function ResolveAwait(_ref8) {
   let {
     children
-  } = _ref9;
+  } = _ref8;
   let data = useAsyncValue();
   let toRender = typeof children === "function" ? children(data) : children;
   return /*#__PURE__*/React.createElement(React.Fragment, null, toRender);
@@ -1472,5 +1347,5 @@ function createMemoryRouter(routes, opts) {
   }).initialize();
 }
 
-export { Await, MemoryRouter, Navigate, Outlet, Route, Router, RouterProvider, Routes, DataRouterContext as UNSAFE_DataRouterContext, DataRouterStateContext as UNSAFE_DataRouterStateContext, LocationContext as UNSAFE_LocationContext, NavigationContext as UNSAFE_NavigationContext, RouteContext as UNSAFE_RouteContext, ViewTransitionContext as UNSAFE_ViewTransitionContext, mapRouteProperties as UNSAFE_mapRouteProperties, useRouteId as UNSAFE_useRouteId, useRoutesImpl as UNSAFE_useRoutesImpl, createMemoryRouter, createRoutesFromChildren, createRoutesFromChildren as createRoutesFromElements, renderMatches, useBlocker as unstable_useBlocker, useActionData, useAsyncError, useAsyncValue, useHref, useInRouterContext, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes };
+export { Await, MemoryRouter, Navigate, Outlet, Route, Router, RouterProvider, Routes, DataRouterContext as UNSAFE_DataRouterContext, DataRouterStateContext as UNSAFE_DataRouterStateContext, LocationContext as UNSAFE_LocationContext, NavigationContext as UNSAFE_NavigationContext, RouteContext as UNSAFE_RouteContext, mapRouteProperties as UNSAFE_mapRouteProperties, useRouteId as UNSAFE_useRouteId, useRoutesImpl as UNSAFE_useRoutesImpl, createMemoryRouter, createRoutesFromChildren, createRoutesFromChildren as createRoutesFromElements, renderMatches, useBlocker as unstable_useBlocker, useActionData, useAsyncError, useAsyncValue, useHref, useInRouterContext, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes };
 //# sourceMappingURL=index.js.map