fix: enable RSC full transition support

Author: jacob-ebey

packages/react-router/lib/components.tsx

@@ -392,144 +392,6 @@ export interface RouterProviderProps {
   unstable_useTransitions?: boolean;
 }
 
-function shallowDiff(a: any, b: any) {
-  if (a === b) {
-    return false;
-  }
-  let aKeys = Object.keys(a);
-  let bKeys = Object.keys(b);
-  if (aKeys.length !== bKeys.length) {
-    return true;
-  }
-  for (let key of aKeys) {
-    if (a[key] !== b[key]) {
-      return true;
-    }
-  }
-  return false;
-}
-
-export function UNSTABLE_TransitionEnabledRouterProvider({
-  router,
-  flushSync: reactDomFlushSyncImpl,
-  unstable_onError,
-}: Omit<RouterProviderProps, "unstable_useTransitions">): React.ReactElement {
-  let fetcherData = React.useRef<Map<string, any>>(new Map());
-  let [revalidating, startRevalidation] = React.useTransition();
-  let [state, setState] = React.useState(router.state);
-
-  (router as any).__setPendingRerender = (promise: Promise<() => void>) =>
-    startRevalidation(
-      // @ts-expect-error - need react 19 types for this to be async
-      async () => {
-        const rerender = await promise;
-        startRevalidation(() => {
-          rerender();
-        });
-      },
-    );
-
-  let navigator = React.useMemo((): Navigator => {
-    return {
-      createHref: router.createHref,
-      encodeLocation: router.encodeLocation,
-      go: (n) => router.navigate(n),
-      push: (to, state, opts) =>
-        router.navigate(to, {
-          state,
-          preventScrollReset: opts?.preventScrollReset,
-        }),
-      replace: (to, state, opts) =>
-        router.navigate(to, {
-          replace: true,
-          state,
-          preventScrollReset: opts?.preventScrollReset,
-        }),
-    };
-  }, [router]);
-
-  let basename = router.basename || "/";
-
-  let dataRouterContext = React.useMemo(
-    () => ({
-      router,
-      navigator,
-      static: false,
-      basename,
-      unstable_onError,
-    }),
-    [router, navigator, basename, unstable_onError],
-  );
-
-  React.useLayoutEffect(() => {
-    return router.subscribe(
-      (newState, { deletedFetchers, flushSync, viewTransitionOpts }) => {
-        newState.fetchers.forEach((fetcher, key) => {
-          if (fetcher.data !== undefined) {
-            fetcherData.current.set(key, fetcher.data);
-          }
-        });
-        deletedFetchers.forEach((key) => fetcherData.current.delete(key));
-
-        const diff = shallowDiff(state, newState);
-
-        if (!diff) return;
-
-        if (flushSync) {
-          if (reactDomFlushSyncImpl) {
-            reactDomFlushSyncImpl(() => setState(newState));
-          } else {
-            setState(newState);
-          }
-        } else {
-          React.startTransition(() => {
-            setState(newState);
-          });
-        }
-      },
-    );
-  }, [router, reactDomFlushSyncImpl, state]);
-
-  // The fragment and {null} here are important!  We need them to keep React 18's
-  // useId happy when we are server-rendering since we may have a <script> here
-  // containing the hydrated server-side staticContext (from StaticRouterProvider).
-  // useId relies on the component tree structure to generate deterministic id's
-  // so we need to ensure it remains the same on the client even though
-  // we don't need the <script> tag
-  return (
-    <>
-      <DataRouterContext.Provider value={dataRouterContext}>
-        <DataRouterStateContext.Provider
-          value={{
-            ...state,
-            revalidation: revalidating ? "loading" : state.revalidation,
-          }}
-        >
-          <FetchersContext.Provider value={fetcherData.current}>
-            {/* <ViewTransitionContext.Provider value={vtContext}> */}
-            <Router
-              basename={basename}
-              location={state.location}
-              navigationType={state.historyAction}
-              navigator={navigator}
-              unstable_useTransitions={true}
-            >
-              <MemoizedDataRoutes
-                routes={router.routes}
-                future={router.future}
-                state={state}
-                unstable_onError={unstable_onError}
-              />
-            </Router>
-            {/* </ViewTransitionContext.Provider> */}
-          </FetchersContext.Provider>
-        </DataRouterStateContext.Provider>
-      </DataRouterContext.Provider>
-      {null}
-    </>
-  );
-}
-
 /**
  * Render the UI for the given {@link DataRouter}. This component should
  * typically be at the top of an app's element tree.

packages/react-router/lib/dom/lib.tsx

@@ -2603,7 +2603,9 @@ let getUniqueFetcherId = () => `__${String(++fetcherId)}__`;
  * @returns A function that can be called to submit a {@link Form} imperatively.
  */
 export function useSubmit(): SubmitFunction {
-  let { router } = useDataRouterContext(DataRouterHook.UseSubmit);
+  let {
+    router: { fetch: routerFetch, navigate },
+  } = useDataRouterContext(DataRouterHook.UseSubmit);
   let { basename } = React.useContext(NavigationContext);
   let currentRouteId = useRouteId();
 
@@ -2616,7 +2618,7 @@ export function useSubmit(): SubmitFunction {
 
       if (options.navigate === false) {
         let key = options.fetcherKey || getUniqueFetcherId();
-        await router.fetch(key, currentRouteId, options.action || action, {
+        await routerFetch(key, currentRouteId, options.action || action, {
           preventScrollReset: options.preventScrollReset,
           formData,
           body,
@@ -2625,7 +2627,7 @@ export function useSubmit(): SubmitFunction {
           flushSync: options.flushSync,
         });
       } else {
-        await router.navigate(options.action || action, {
+        await navigate(options.action || action, {
           preventScrollReset: options.preventScrollReset,
           formData,
           body,
@@ -2639,7 +2641,7 @@ export function useSubmit(): SubmitFunction {
         });
       }
     },
-    [router, basename, currentRouteId],
+    [routerFetch, navigate, basename, currentRouteId],
   );
 }
 
@@ -2916,7 +2918,9 @@ export function useFetcher<T = any>({
 }: {
   key?: string;
 } = {}): FetcherWithComponents<SerializeFrom<T>> {
-  let { router } = useDataRouterContext(DataRouterHook.UseFetcher);
+  let {
+    router: { deleteFetcher, getFetcher, resetFetcher, fetch: routerFetch },
+  } = useDataRouterContext(DataRouterHook.UseFetcher);
   let state = useDataRouterState(DataRouterStateHook.UseFetcher);
   let fetcherData = React.useContext(FetchersContext);
   let route = React.useContext(RouteContext);
@@ -2938,17 +2942,17 @@ export function useFetcher<T = any>({
 
   // Registration/cleanup
   React.useEffect(() => {
-    router.getFetcher(fetcherKey);
-    return () => router.deleteFetcher(fetcherKey);
-  }, [router, fetcherKey]);
+    getFetcher(fetcherKey);
+    return () => deleteFetcher(fetcherKey);
+  }, [deleteFetcher, getFetcher, fetcherKey]);
 
   // Fetcher additions
   let load = React.useCallback(
     async (href: string, opts?: { flushSync?: boolean }) => {
       invariant(routeId, "No routeId available for fetcher.load()");
-      await router.fetch(fetcherKey, routeId, href, opts);
+      await routerFetch(fetcherKey, routeId, href, opts);
     },
-    [fetcherKey, routeId, router],
+    [fetcherKey, routeId, routerFetch],
   );
 
   let submitImpl = useSubmit();
@@ -2965,7 +2969,7 @@ export function useFetcher<T = any>({
 
   let unstable_reset = React.useCallback<
     FetcherWithComponents<T>["unstable_reset"]
-  >((opts) => router.resetFetcher(fetcherKey, opts), [router, fetcherKey]);
+  >((opts) => resetFetcher(fetcherKey, opts), [resetFetcher, fetcherKey]);
 
   let FetcherForm = React.useMemo(() => {
     let FetcherForm = React.forwardRef<HTMLFormElement, FetcherFormProps>(