Add unstable prefix

packages/react-router-dom/dom.ts

@@ -198,7 +198,7 @@ export interface SubmitOptions {
   /**
    * Allow submissions to enable view transitions
    */
-  viewTransition?: boolean | ViewTransitionFunction;
+  unstable_viewTransition?: boolean | ViewTransitionFunction;
 }
 
 const supportedFormEncTypes: Set<FormEncType> = new Set([

packages/react-router-dom/index.tsx

@@ -503,7 +503,7 @@ export interface LinkProps
   preventScrollReset?: boolean;
   relative?: RelativeRoutingType;
   to: To;
-  viewTransition?: boolean | ViewTransitionFunction;
+  unstable_viewTransition?: boolean | ViewTransitionFunction;
 }
 
 const isBrowser =
@@ -527,7 +527,7 @@ export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
       target,
       to,
       preventScrollReset,
-      viewTransition,
+      unstable_viewTransition,
       ...rest
     },
     ref
@@ -577,7 +577,7 @@ export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
       target,
       preventScrollReset,
       relative,
-      viewTransition,
+      unstable_viewTransition,
     });
     function handleClick(
       event: React.MouseEvent<HTMLAnchorElement, MouseEvent>
@@ -787,7 +787,7 @@ export interface FormProps extends FetcherFormProps {
   /**
    * Boolean/function to enable/disable view transitions
    */
-  viewTransition?: boolean | ViewTransitionFunction;
+  unstable_viewTransition?: boolean | ViewTransitionFunction;
 }
 
 /**
@@ -831,7 +831,7 @@ const FormImpl = React.forwardRef<HTMLFormElement, FormImplProps>(
       submit,
       relative,
       preventScrollReset,
-      viewTransition,
+      unstable_viewTransition,
       ...props
     },
     forwardedRef
@@ -857,7 +857,7 @@ const FormImpl = React.forwardRef<HTMLFormElement, FormImplProps>(
         state,
         relative,
         preventScrollReset,
-        viewTransition,
+        unstable_viewTransition,
       });
     };
 
@@ -947,14 +947,14 @@ export function useLinkClickHandler<E extends Element = HTMLAnchorElement>(
     state,
     preventScrollReset,
     relative,
-    viewTransition,
+    unstable_viewTransition,
   }: {
     target?: React.HTMLAttributeAnchorTarget;
     replace?: boolean;
     state?: any;
     preventScrollReset?: boolean;
     relative?: RelativeRoutingType;
-    viewTransition?: boolean | ViewTransitionFunction;
+    unstable_viewTransition?: boolean | ViewTransitionFunction;
   } = {}
 ): (event: React.MouseEvent<E, MouseEvent>) => void {
   let navigate = useNavigate();
@@ -973,13 +973,12 @@ export function useLinkClickHandler<E extends Element = HTMLAnchorElement>(
             ? replaceProp
             : createPath(location) === createPath(path);
 
-        debugger;
         navigate(to, {
           replace,
           state,
           preventScrollReset,
           relative,
-          viewTransition,
+          unstable_viewTransition,
         });
       }
     },
@@ -993,7 +992,7 @@ export function useLinkClickHandler<E extends Element = HTMLAnchorElement>(
       to,
       preventScrollReset,
       relative,
-      viewTransition,
+      unstable_viewTransition,
     ]
   );
 }
@@ -1118,7 +1117,7 @@ export function useSubmit(): SubmitFunction {
 
       router.navigate(options.action || action, {
         preventScrollReset: options.preventScrollReset,
-        viewTransition: options.viewTransition,
+        unstable_viewTransition: options.unstable_viewTransition,
         formData,
         body,
         formMethod: options.method || (method as HTMLFormMethod),

packages/react-router/lib/context.ts

@@ -95,7 +95,7 @@ export interface NavigateOptions {
   state?: any;
   preventScrollReset?: boolean;
   relative?: RelativeRoutingType;
-  viewTransition?: boolean | ViewTransitionFunction;
+  unstable_viewTransition?: boolean | ViewTransitionFunction;
 }
 
 /**

packages/react-router/lib/hooks.tsx

@@ -13,7 +13,6 @@ import type {
   RevalidationState,
   To,
   UIMatch,
-  ViewTransitionFunction,
 } from "@remix-run/router";
 import {
   IDLE_BLOCKER,

packages/router/router.ts

@@ -375,7 +375,7 @@ export interface RouterInit {
   mapRouteProperties?: MapRoutePropertiesFunction;
   future?: Partial<FutureConfig>;
   hydrationData?: HydrationState;
-  viewTransition?: ViewTransitionFunction;
+  unstable_viewTransition?: ViewTransitionFunction;
   window?: Window;
 }
 
@@ -454,7 +454,7 @@ type BaseNavigateOptions = BaseNavigateOrFetchOptions & {
   replace?: boolean;
   state?: any;
   fromRouteId?: string;
-  viewTransition?: boolean | ViewTransitionFunction;
+  unstable_viewTransition?: boolean | ViewTransitionFunction;
 };
 
 // Only allowed for submission navigations
@@ -1244,7 +1244,7 @@ export function createRouter(init: RouterInit): Router {
       pendingError: error,
       preventScrollReset,
       replace: opts && opts.replace,
-      viewTransition: opts && opts.viewTransition,
+      unstable_viewTransition: opts && opts.unstable_viewTransition,
     });
   }
 
@@ -1294,7 +1294,7 @@ export function createRouter(init: RouterInit): Router {
       pendingError?: ErrorResponseImpl;
       startUninterruptedRevalidation?: boolean;
       preventScrollReset?: boolean;
-      viewTransition?: boolean | ViewTransitionFunction;
+      unstable_viewTransition?: boolean | ViewTransitionFunction;
       replace?: boolean;
     }
   ): Promise<void> {
@@ -1313,8 +1313,8 @@ export function createRouter(init: RouterInit): Router {
     pendingPreventScrollReset = (opts && opts.preventScrollReset) === true;
 
     pendingNavigationViewTransition =
-      opts && typeof opts.viewTransition !== "undefined"
-        ? opts?.viewTransition
+      opts && opts.unstable_viewTransition != null
+        ? opts.unstable_viewTransition
         : null;
 
     let routesToUse = inFlightDataRoutes || dataRoutes;