Add type deprecations for types now in React Router (#5679)

.changeset/flat-boxes-brake.md

@@ -0,0 +1,6 @@
+---
+"@remix-run/react": patch
+"@remix-run/server-runtime": patch
+---
+
+Add type deprecations for types now in React Router

packages/remix-react/components.tsx

@@ -112,19 +112,6 @@ function useRemixContext(): RemixContextObject {
   return context;
 }
 
-////////////////////////////////////////////////////////////////////////////////
-// RemixEntry
-
-export function RemixEntry(props: {
-  context: EntryContext;
-  action: NavigationType;
-  location: Location;
-  navigator: Navigator;
-  static?: boolean;
-}) {
-  return <h1>Not Implemented!</h1>;
-}
-
 ////////////////////////////////////////////////////////////////////////////////
 // RemixRoute
 

packages/remix-react/data.ts

@@ -2,16 +2,14 @@ import {
   AbortedDeferredError,
   UNSAFE_DeferredData as DeferredData,
 } from "@remix-run/router";
-import type { FormMethod as FormMethodRR } from "react-router-dom";
 
+/**
+ * Data for a route that was returned from a `loader()`.
+ *
+ * Note: This moves to unknown in ReactRouter and eventually likely in Remix
+ */
 export type AppData = any;
 
-export type FormMethod = FormMethodRR;
-
-export type FormEncType =
-  | "application/x-www-form-urlencoded"
-  | "multipart/form-data";
-
 export function isCatchResponse(response: any): boolean {
   return (
     response instanceof Response &&

packages/remix-react/errors.ts

@@ -3,6 +3,10 @@ import { ErrorResponse } from "@remix-run/router";
 
 import type { AppData } from "./data";
 
+/**
+ * @deprecated in favor of the `ErrorResponse` class in React Router.  Please
+ * enable the `future.v2_errorBoundary` flag to ease your migration to Remix v2.
+ */
 export interface ThrownResponse<
   Status extends number = number,
   Data = AppData

packages/remix-react/index.tsx

@@ -1,6 +1,8 @@
 export type { RemixBrowserProps } from "./browser";
 export { RemixBrowser } from "./browser";
 export type {
+  FormEncType,
+  FormMethod,
   FormProps,
   Location,
   NavigateFunction,
@@ -63,8 +65,6 @@ export {
   RemixContext as UNSAFE_RemixContext,
 } from "./components";
 
-export type { FormMethod, FormEncType } from "./data";
-
 export type { ThrownResponse } from "./errors";
 export { useCatch } from "./errorBoundaries";
 

packages/remix-react/routeModules.ts

@@ -1,4 +1,5 @@
 import type { ComponentType } from "react";
+import type { RouterState } from "@remix-run/router";
 import type {
   DataRouteMatch,
   Params,
@@ -10,7 +11,8 @@ import type { LoaderFunction, SerializeFrom } from "@remix-run/server-runtime";
 import type { AppData } from "./data";
 import type { LinkDescriptor } from "./links";
 import type { EntryRoute } from "./routes";
-import type { RouteData } from "./routeData";
+
+type RouteData = RouterState["loaderData"];
 
 export interface RouteModules {
   [routeId: string]: RouteModule;

packages/remix-react/transition.ts

@@ -1,10 +1,4 @@
-import type { Location, NavigationType as Action } from "react-router-dom";
-
-export interface CatchData<T = any> {
-  status: number;
-  statusText: string;
-  data: T;
-}
+import type { Location } from "react-router-dom";
 
 export interface Submission {
   action: string;
@@ -81,29 +75,6 @@ export type TransitionStates = {
 
 export type Transition = TransitionStates[keyof TransitionStates];
 
-export type Redirects = {
-  Loader: {
-    isRedirect: true;
-    type: "loader";
-    setCookie: boolean;
-  };
-  Action: {
-    isRedirect: true;
-    type: "action";
-    setCookie: boolean;
-  };
-  LoaderSubmission: {
-    isRedirect: true;
-    type: "loaderSubmission";
-    setCookie: boolean;
-  };
-  FetchAction: {
-    isRedirect: true;
-    type: "fetchAction";
-    setCookie: boolean;
-  };
-};
-
 // TODO: keep data around on resubmission?
 export type FetcherStates<TData = any> = {
   Idle: {
@@ -181,30 +152,6 @@ export type FetcherStates<TData = any> = {
 export type Fetcher<TData = any> =
   FetcherStates<TData>[keyof FetcherStates<TData>];
 
-export class CatchValue {
-  constructor(
-    public status: number,
-    public statusText: string,
-    public data: any
-  ) {}
-}
-
-export type NavigationEvent = {
-  type: "navigation";
-  action: Action;
-  location: Location;
-  submission?: Submission;
-};
-
-export type FetcherEvent = {
-  type: "fetcher";
-  key: string;
-  submission?: Submission;
-  href: string;
-};
-
-export type DataEvent = NavigationEvent | FetcherEvent;
-
 export const IDLE_TRANSITION: TransitionStates["Idle"] = {
   state: "idle",
   submission: undefined,

packages/remix-server-runtime/data.ts

@@ -21,6 +21,8 @@ export interface AppLoadContext {
 
 /**
  * Data for a route that was returned from a `loader()`.
+ *
+ * Note: This moves to unknown in ReactRouter and eventually likely in Remix
  */
 export type AppData = any;
 

packages/remix-server-runtime/errors.ts

@@ -43,7 +43,10 @@ import { isRouteErrorResponse } from "@remix-run/router";
  * line.
  */
 
-// TODO Re-export as ErrorResponse?
+/**
+ * @deprecated in favor of the `ErrorResponse` class in React Router.  Please
+ * enable the `future.v2_errorBoundary` flag to ease your migration to Remix v2.
+ */
 export interface ThrownResponse<T = any> {
   status: number;
   statusText: string;

packages/remix-server-runtime/responses.ts

@@ -1,5 +1,7 @@
 import {
   defer as routerDefer,
+  json as routerJson,
+  redirect as routerRedirect,
   type UNSAFE_DeferredData as DeferredData,
   type TrackedPromise,
 } from "@remix-run/router";
@@ -39,37 +41,16 @@ export type TypedResponse<T extends unknown = unknown> = Omit<
  * @see https://remix.run/utils/json
  */
 export const json: JsonFunction = (data, init = {}) => {
-  let responseInit = typeof init === "number" ? { status: init } : init;
-
-  let headers = new Headers(responseInit.headers);
-  if (!headers.has("Content-Type")) {
-    headers.set("Content-Type", "application/json; charset=utf-8");
-  }
-
-  return new Response(JSON.stringify(data), {
-    ...responseInit,
-    headers,
-  });
+  return routerJson(data, init);
 };
 
 /**
- * This is a shortcut for creating `application/json` responses. Converts `data`
- * to JSON and sets the `Content-Type` header.
+ * This is a shortcut for creating Remix deferred responses
  *
- * @see https://remix.run/api/remix#json
+ * @see https://remix.run/docs/utils/defer
  */
 export const defer: DeferFunction = (data, init = {}) => {
-  let responseInit = typeof init === "number" ? { status: init } : init;
-
-  let headers = new Headers(responseInit.headers);
-  if (!headers.has("Content-Type")) {
-    headers.set("Content-Type", "application/json; charset=utf-8");
-  }
-
-  return routerDefer(data, {
-    ...responseInit,
-    headers,
-  }) as TypedDeferredData<typeof data>;
+  return routerDefer(data, init) as TypedDeferredData<typeof data>;
 };
 
 export type RedirectFunction = (
@@ -84,20 +65,7 @@ export type RedirectFunction = (
  * @see https://remix.run/utils/redirect
  */
 export const redirect: RedirectFunction = (url, init = 302) => {
-  let responseInit = init;
-  if (typeof responseInit === "number") {
-    responseInit = { status: responseInit };
-  } else if (typeof responseInit.status === "undefined") {
-    responseInit.status = 302;
-  }
-
-  let headers = new Headers(responseInit.headers);
-  headers.set("Location", url);
-
-  return new Response(null, {
-    ...responseInit,
-    headers,
-  }) as TypedResponse<never>;
+  return routerRedirect(url, init) as TypedResponse<never>;
 };
 
 export function isDeferredData(value: any): value is DeferredData {

packages/remix-server-runtime/routeModules.ts

@@ -1,17 +1,28 @@
-import type { AgnosticRouteMatch, Location, Params } from "@remix-run/router";
+import type {
+  AgnosticRouteMatch,
+  Location,
+  Params,
+  RouterState,
+} from "@remix-run/router";
 import type { ComponentType } from "react";
 
 import type { AppLoadContext, AppData } from "./data";
 import type { LinkDescriptor } from "./links";
-import type { RouteData } from "./routeData";
 import type { SerializeFrom } from "./serialize";
 
+type RouteData = RouterState["loaderData"];
+
 export interface RouteModules<RouteModule> {
   [routeId: string]: RouteModule;
 }
 
 /**
  * The arguments passed to ActionFunction and LoaderFunction.
+ *
+ * Note this is almost identical to React Router's version but over there the
+ * context is optional since it's only there during static handler invocations.
+ * Keeping Remix's own definition for now so it can differentiate between
+ * client/server
  */
 export interface DataFunctionArgs {
   request: Request;
@@ -20,6 +31,7 @@ export interface DataFunctionArgs {
 }
 
 export type LoaderArgs = DataFunctionArgs;
+
 export type ActionArgs = DataFunctionArgs;
 
 /**