react-router 6.26.2 → 7.0.0-pre.0

package/dist/lib/components.d.ts

@@ -1,33 +1,53 @@
-import type { InitialEntry, LazyRouteFunction, Location, RelativeRoutingType, Router as RemixRouter, To, TrackedPromise } from "@remix-run/router";
-import { Action as NavigationType } from "@remix-run/router";
 import * as React from "react";
-import type { IndexRouteObject, Navigator, NonIndexRouteObject, RouteMatch, RouteObject } from "./context";
-export interface FutureConfig {
-    v7_relativeSplatPath: boolean;
-    v7_startTransition: boolean;
-}
+import type { InitialEntry, Location, To } from "./router/history";
+import { Action as NavigationType } from "./router/history";
+import type { FutureConfig, HydrationState, RelativeRoutingType, Router as DataRouter } from "./router/router";
+import type { DataStrategyFunction, LazyRouteFunction, TrackedPromise } from "./router/utils";
+import type { IndexRouteObject, Navigator, NonIndexRouteObject, PatchRoutesOnNavigationFunction, RouteMatch, RouteObject } from "./context";
+/**
+ * @private
+ */
+export declare function mapRouteProperties(route: RouteObject): Partial<RouteObject> & {
+    hasErrorBoundary: boolean;
+};
+/**
+ * @category Routers
+ */
+export declare function createMemoryRouter(routes: RouteObject[], opts?: {
+    basename?: string;
+    future?: Partial<FutureConfig>;
+    hydrationData?: HydrationState;
+    initialEntries?: InitialEntry[];
+    initialIndex?: number;
+    dataStrategy?: DataStrategyFunction;
+    patchRoutesOnNavigation?: PatchRoutesOnNavigationFunction;
+}): DataRouter;
 export interface RouterProviderProps {
-    fallbackElement?: React.ReactNode;
-    router: RemixRouter;
-    future?: Partial<Pick<FutureConfig, "v7_startTransition">>;
+    router: DataRouter;
+    flushSync?: (fn: () => unknown) => undefined;
 }
 /**
  * Given a Remix Router instance, render the appropriate UI
  */
-export declare function RouterProvider({ fallbackElement, router, future, }: RouterProviderProps): React.ReactElement;
+export declare function RouterProvider({ router, flushSync: reactDomFlushSyncImpl, }: RouterProviderProps): React.ReactElement;
+/**
+ * @category Types
+ */
 export interface MemoryRouterProps {
     basename?: string;
     children?: React.ReactNode;
     initialEntries?: InitialEntry[];
     initialIndex?: number;
-    future?: Partial<FutureConfig>;
 }
 /**
  * A `<Router>` that stores all entries in memory.
  *
- * @see https://reactrouter.com/router-components/memory-router
+ * @category Router Components
+ */
+export declare function MemoryRouter({ basename, children, initialEntries, initialIndex, }: MemoryRouterProps): React.ReactElement;
+/**
+ * @category Types
  */
-export declare function MemoryRouter({ basename, children, initialEntries, initialIndex, future, }: MemoryRouterProps): React.ReactElement;
 export interface NavigateProps {
     to: To;
     replace?: boolean;
@@ -35,24 +55,52 @@ export interface NavigateProps {
     relative?: RelativeRoutingType;
 }
 /**
- * Changes the current location.
+ * A component-based version of {@link useNavigate} to use in a [`React.Component
+ * Class`](https://reactjs.org/docs/react-component.html) where hooks are not
+ * able to be used.
  *
- * Note: This API is mostly useful in React.Component subclasses that are not
- * able to use hooks. In functional components, we recommend you use the
- * `useNavigate` hook instead.
+ * It's recommended to avoid using this component in favor of {@link useNavigate}
  *
- * @see https://reactrouter.com/components/navigate
+ * @category Components
  */
 export declare function Navigate({ to, replace, state, relative, }: NavigateProps): null;
+/**
+ * @category Types
+ */
 export interface OutletProps {
+    /**
+      Provides a context value to the element tree below the outlet. Use when the parent route needs to provide values to child routes.
+  
+      ```tsx
+      <Outlet context={myContextValue} />
+      ```
+  
+      Access the context with {@link useOutletContext}.
+     */
     context?: unknown;
 }
 /**
- * Renders the child route's element, if there is one.
- *
- * @see https://reactrouter.com/components/outlet
+  Renders the matching child route of a parent route or nothing if no child route matches.
+
+  ```tsx
+  import { Outlet } from "react-router"
+
+  export default function SomeParent() {
+    return (
+      <div>
+        <h1>Parent Content</h1>
+        <Outlet />
+      </div>
+    );
+  }
+  ```
+
+  @category Components
  */
 export declare function Outlet(props: OutletProps): React.ReactElement | null;
+/**
+ * @category Types
+ */
 export interface PathRouteProps {
     caseSensitive?: NonIndexRouteObject["caseSensitive"];
     path?: NonIndexRouteObject["path"];
@@ -72,8 +120,14 @@ export interface PathRouteProps {
     HydrateFallback?: React.ComponentType | null;
     ErrorBoundary?: React.ComponentType | null;
 }
+/**
+ * @category Types
+ */
 export interface LayoutRouteProps extends PathRouteProps {
 }
+/**
+ * @category Types
+ */
 export interface IndexRouteProps {
     caseSensitive?: IndexRouteObject["caseSensitive"];
     path?: IndexRouteObject["path"];
@@ -95,11 +149,17 @@ export interface IndexRouteProps {
 }
 export type RouteProps = PathRouteProps | LayoutRouteProps | IndexRouteProps;
 /**
- * Declares an element that should be rendered at a certain URL path.
+ * Configures an element to render when a pattern matches the current location.
+ * It must be rendered within a {@link Routes} element. Note that these routes
+ * do not participate in data loading, actions, code splitting, or any other
+ * route module features.
  *
- * @see https://reactrouter.com/components/route
+ * @category Components
  */
 export declare function Route(_props: RouteProps): React.ReactElement | null;
+/**
+ * @category Types
+ */
 export interface RouterProps {
     basename?: string;
     children?: React.ReactNode;
@@ -107,7 +167,6 @@ export interface RouterProps {
     navigationType?: NavigationType;
     navigator: Navigator;
     static?: boolean;
-    future?: Partial<Pick<FutureConfig, "v7_relativeSplatPath">>;
 }
 /**
  * Provides location context for the rest of the app.
@@ -116,42 +175,198 @@ export interface RouterProps {
  * router that is more specific to your environment such as a `<BrowserRouter>`
  * in web browsers or a `<StaticRouter>` for server rendering.
  *
- * @see https://reactrouter.com/router-components/router
+ * @category Components
+ */
+export declare function Router({ basename: basenameProp, children, location: locationProp, navigationType, navigator, static: staticProp, }: RouterProps): React.ReactElement | null;
+/**
+ * @category Types
  */
-export declare function Router({ basename: basenameProp, children, location: locationProp, navigationType, navigator, static: staticProp, future, }: RouterProps): React.ReactElement | null;
 export interface RoutesProps {
+    /**
+     * Nested {@link Route} elements
+     */
     children?: React.ReactNode;
+    /**
+     * The location to match against. Defaults to the current location.
+     */
     location?: Partial<Location> | string;
 }
 /**
- * A container for a nested tree of `<Route>` elements that renders the branch
- * that best matches the current location.
- *
- * @see https://reactrouter.com/components/routes
+ Renders a branch of {@link Route | `<Routes>`} that best matches the current
+ location. Note that these routes do not participate in data loading, actions,
+ code splitting, or any other route module features.
+
+ ```tsx
+ import { Routes, Route } from "react-router"
+
+<Routes>
+  <Route index element={<StepOne />} />
+  <Route path="step-2" element={<StepTwo />} />
+  <Route path="step-3" element={<StepThree />}>
+</Routes>
+ ```
+
+ @category Components
  */
 export declare function Routes({ children, location, }: RoutesProps): React.ReactElement | null;
 export interface AwaitResolveRenderFunction {
     (data: Awaited<any>): React.ReactNode;
 }
+/**
+ * @category Types
+ */
 export interface AwaitProps {
+    /**
+    When using a function, the resolved value is provided as the parameter.
+  
+    ```tsx [2]
+    <Await resolve={reviewsPromise}>
+      {(resolvedReviews) => <Reviews items={resolvedReviews} />}
+    </Await>
+    ```
+  
+    When using React elements, {@link useAsyncValue} will provide the
+    resolved value:
+  
+    ```tsx [2]
+    <Await resolve={reviewsPromise}>
+      <Reviews />
+    </Await>
+  
+    function Reviews() {
+      const resolvedReviews = useAsyncValue()
+      return <div>...</div>
+    }
+    ```
+    */
     children: React.ReactNode | AwaitResolveRenderFunction;
+    /**
+    The error element renders instead of the children when the promise rejects.
+  
+    ```tsx
+    <Await
+      errorElement={<div>Oops</div>}
+      resolve={reviewsPromise}
+    >
+      <Reviews />
+    </Await>
+    ```
+  
+    To provide a more contextual error, you can use the {@link useAsyncError} in a
+    child component
+  
+    ```tsx
+    <Await
+      errorElement={<ReviewsError />}
+      resolve={reviewsPromise}
+    >
+      <Reviews />
+    </Await>
+  
+    function ReviewsError() {
+      const error = useAsyncError()
+      return <div>Error loading reviews: {error.message}</div>
+    }
+    ```
+  
+    If you do not provide an errorElement, the rejected value will bubble up to
+    the nearest route-level {@link NonIndexRouteObject#ErrorBoundary | ErrorBoundary} and be accessible
+    via {@link useRouteError} hook.
+    */
     errorElement?: React.ReactNode;
+    /**
+    Takes a promise returned from a {@link LoaderFunction | loader} value to be resolved and rendered.
+  
+    ```jsx
+    import { useLoaderData, Await } from "react-router"
+  
+    export async function loader() {
+      let reviews = getReviews() // not awaited
+      let book = await getBook()
+      return {
+        book,
+        reviews, // this is a promise
+      }
+    }
+  
+    export default function Book() {
+      const {
+        book,
+        reviews, // this is the same promise
+      } = useLoaderData()
+  
+      return (
+        <div>
+          <h1>{book.title}</h1>
+          <p>{book.description}</p>
+          <React.Suspense fallback={<ReviewsSkeleton />}>
+            <Await
+              // and is the promise we pass to Await
+              resolve={reviews}
+            >
+              <Reviews />
+            </Await>
+          </React.Suspense>
+        </div>
+      );
+    }
+    ```
+     */
     resolve: TrackedPromise | any;
 }
 /**
- * Component to use for rendering lazily loaded data from returning defer()
- * in a loader function
- */
+Used to render promise values with automatic error handling.
+
+```tsx
+import { Await, useLoaderData } from "react-router";
+
+export function loader() {
+  // not awaited
+  const reviews = getReviews()
+  // awaited (blocks the transition)
+  const book = await fetch("/api/book").then((res) => res.json())
+  return { book, reviews }
+}
+
+function Book() {
+  const { book, reviews } = useLoaderData();
+  return (
+    <div>
+      <h1>{book.title}</h1>
+      <p>{book.description}</p>
+      <React.Suspense fallback={<ReviewsSkeleton />}>
+        <Await
+          resolve={reviews}
+          errorElement={
+            <div>Could not load reviews 😬</div>
+          }
+          children={(resolvedReviews) => (
+            <Reviews items={resolvedReviews} />
+          )}
+        />
+      </React.Suspense>
+    </div>
+  );
+}
+```
+
+**Note:** `<Await>` expects to be rendered inside of a `<React.Suspense>`
+
+@category Components
+
+*/
 export declare function Await({ children, errorElement, resolve }: AwaitProps): React.JSX.Element;
 /**
  * Creates a route config from a React "children" object, which is usually
  * either a `<Route>` element or an array of them. Used internally by
  * `<Routes>` to create a route config from its children.
  *
- * @see https://reactrouter.com/utils/create-routes-from-children
+ * @category Utils
  */
 export declare function createRoutesFromChildren(children: React.ReactNode, parentPath?: number[]): RouteObject[];
 /**
  * Renders the result of `matchRoutes()` into a React element.
+ *
+ * @category Utils
  */
 export declare function renderMatches(matches: RouteMatch[] | null): React.ReactElement | null;

package/dist/lib/context.d.ts

@@ -1,5 +1,7 @@
 import * as React from "react";
-import type { AgnosticIndexRouteObject, AgnosticNonIndexRouteObject, AgnosticRouteMatch, History, LazyRouteFunction, Location, Action as NavigationType, RelativeRoutingType, Router, StaticHandlerContext, To, TrackedPromise } from "@remix-run/router";
+import type { History, Action as NavigationType, Location, To } from "./router/history";
+import type { RelativeRoutingType, Router, StaticHandlerContext } from "./router/router";
+import type { AgnosticIndexRouteObject, AgnosticNonIndexRouteObject, AgnosticPatchRoutesOnNavigationFunction, AgnosticPatchRoutesOnNavigationFunctionArgs, AgnosticRouteMatch, LazyRouteFunction, TrackedPromise } from "./router/utils";
 export interface IndexRouteObject {
     caseSensitive?: AgnosticIndexRouteObject["caseSensitive"];
     path?: AgnosticIndexRouteObject["path"];
@@ -47,20 +49,33 @@ export interface RouteMatch<ParamKey extends string = string, RouteObjectType ex
 }
 export interface DataRouteMatch extends RouteMatch<string, DataRouteObject> {
 }
+export type PatchRoutesOnNavigationFunctionArgs = AgnosticPatchRoutesOnNavigationFunctionArgs<RouteObject, RouteMatch>;
+export type PatchRoutesOnNavigationFunction = AgnosticPatchRoutesOnNavigationFunction<RouteObject, RouteMatch>;
 export interface DataRouterContextObject extends Omit<NavigationContextObject, "future"> {
     router: Router;
     staticContext?: StaticHandlerContext;
 }
 export declare const DataRouterContext: React.Context<DataRouterContextObject | null>;
-export declare const DataRouterStateContext: React.Context<import("@remix-run/router").RouterState | null>;
+export declare const DataRouterStateContext: React.Context<import("./router/router").RouterState | null>;
+export type ViewTransitionContextObject = {
+    isTransitioning: false;
+} | {
+    isTransitioning: true;
+    flushSync: boolean;
+    currentLocation: Location;
+    nextLocation: Location;
+};
+export declare const ViewTransitionContext: React.Context<ViewTransitionContextObject>;
+export type FetchersContextObject = Map<string, any>;
+export declare const FetchersContext: React.Context<FetchersContextObject>;
 export declare const AwaitContext: React.Context<TrackedPromise | null>;
 export interface NavigateOptions {
     replace?: boolean;
     state?: any;
     preventScrollReset?: boolean;
     relative?: RelativeRoutingType;
-    unstable_flushSync?: boolean;
-    unstable_viewTransition?: boolean;
+    flushSync?: boolean;
+    viewTransition?: boolean;
 }
 /**
  * A Navigator is a "location changer"; it's how you get to different locations.
@@ -82,9 +97,7 @@ interface NavigationContextObject {
     basename: string;
     navigator: Navigator;
     static: boolean;
-    future: {
-        v7_relativeSplatPath: boolean;
-    };
+    future: {};
 }
 export declare const NavigationContext: React.Context<NavigationContextObject>;
 interface LocationContextObject {

package/dist/lib/dom/dom.d.ts

@@ -0,0 +1,123 @@
+import type { RelativeRoutingType } from "../router/router";
+import type { FormEncType, HTMLFormMethod } from "../router/utils";
+export declare const defaultMethod: HTMLFormMethod;
+export declare function isHtmlElement(object: any): object is HTMLElement;
+export declare function isButtonElement(object: any): object is HTMLButtonElement;
+export declare function isFormElement(object: any): object is HTMLFormElement;
+export declare function isInputElement(object: any): object is HTMLInputElement;
+type LimitedMouseEvent = Pick<MouseEvent, "button" | "metaKey" | "altKey" | "ctrlKey" | "shiftKey">;
+export declare function shouldProcessLinkClick(event: LimitedMouseEvent, target?: string): boolean;
+export type ParamKeyValuePair = [string, string];
+export type URLSearchParamsInit = string | ParamKeyValuePair[] | Record<string, string | string[]> | URLSearchParams;
+/**
+  Creates a URLSearchParams object using the given initializer.
+
+  This is identical to `new URLSearchParams(init)` except it also
+  supports arrays as values in the object form of the initializer
+  instead of just strings. This is convenient when you need multiple
+  values for a given key, but don't want to use an array initializer.
+
+  For example, instead of:
+
+  ```tsx
+  let searchParams = new URLSearchParams([
+    ['sort', 'name'],
+    ['sort', 'price']
+  ]);
+  ```
+  you can do:
+
+  ```
+  let searchParams = createSearchParams({
+    sort: ['name', 'price']
+  });
+  ```
+
+  @category Utils
+ */
+export declare function createSearchParams(init?: URLSearchParamsInit): URLSearchParams;
+export declare function getSearchParamsForLocation(locationSearch: string, defaultSearchParams: URLSearchParams | null): URLSearchParams;
+type JsonObject = {
+    [Key in string]: JsonValue;
+} & {
+    [Key in string]?: JsonValue | undefined;
+};
+type JsonArray = JsonValue[] | readonly JsonValue[];
+type JsonPrimitive = string | number | boolean | null;
+type JsonValue = JsonPrimitive | JsonObject | JsonArray;
+export type SubmitTarget = HTMLFormElement | HTMLButtonElement | HTMLInputElement | FormData | URLSearchParams | JsonValue | null;
+/**
+ * Submit options shared by both navigations and fetchers
+ */
+interface SharedSubmitOptions {
+    /**
+     * The HTTP method used to submit the form. Overrides `<form method>`.
+     * Defaults to "GET".
+     */
+    method?: HTMLFormMethod;
+    /**
+     * The action URL path used to submit the form. Overrides `<form action>`.
+     * Defaults to the path of the current route.
+     */
+    action?: string;
+    /**
+     * The encoding used to submit the form. Overrides `<form encType>`.
+     * Defaults to "application/x-www-form-urlencoded".
+     */
+    encType?: FormEncType;
+    /**
+     * Determines whether the form action is relative to the route hierarchy or
+     * the pathname.  Use this if you want to opt out of navigating the route
+     * hierarchy and want to instead route based on /-delimited URL segments
+     */
+    relative?: RelativeRoutingType;
+    /**
+     * In browser-based environments, prevent resetting scroll after this
+     * navigation when using the <ScrollRestoration> component
+     */
+    preventScrollReset?: boolean;
+    /**
+     * Enable flushSync for this submission's state updates
+     */
+    flushSync?: boolean;
+}
+/**
+ * Submit options available to fetchers
+ */
+export interface FetcherSubmitOptions extends SharedSubmitOptions {
+}
+/**
+ * Submit options available to navigations
+ */
+export interface SubmitOptions extends FetcherSubmitOptions {
+    /**
+     * 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
+     * to `false`.
+     */
+    replace?: boolean;
+    /**
+     * State object to add to the history stack entry for this navigation
+     */
+    state?: any;
+    /**
+     * Indicate a specific fetcherKey to use when using navigate=false
+     */
+    fetcherKey?: string;
+    /**
+     * navigate=false will use a fetcher instead of a navigation
+     */
+    navigate?: boolean;
+    /**
+     * Enable view transitions on this submission navigation
+     */
+    viewTransition?: boolean;
+}
+export declare function getFormSubmissionInfo(target: SubmitTarget, basename: string): {
+    action: string | null;
+    method: string;
+    encType: string;
+    formData: FormData | undefined;
+    body: any;
+};
+export {};

package/dist/lib/dom/global.d.ts

@@ -0,0 +1,40 @@
+import type { HydrationState, Router as DataRouter } from "../router/router";
+import type { AssetsManifest, FutureConfig } from "./ssr/entry";
+import type { RouteModules } from "./ssr/routeModules";
+export type WindowReactRouterContext = {
+    basename?: string;
+    state: HydrationState;
+    criticalCss?: string;
+    future: FutureConfig;
+    isSpaMode: boolean;
+    stream: ReadableStream<Uint8Array> | undefined;
+    streamController: ReadableStreamDefaultController<Uint8Array>;
+    a?: number;
+    dev?: {
+        port?: number;
+        hmrRuntime?: string;
+    };
+};
+export interface ViewTransition {
+    finished: Promise<void>;
+    ready: Promise<void>;
+    updateCallbackDone: Promise<void>;
+    skipTransition(): void;
+}
+declare global {
+    var __staticRouterHydrationData: HydrationState | undefined;
+    var __reactRouterVersion: string;
+    interface Document {
+        startViewTransition(cb: () => Promise<void> | void): ViewTransition;
+    }
+    var __reactRouterContext: WindowReactRouterContext | undefined;
+    var __reactRouterManifest: AssetsManifest | undefined;
+    var __reactRouterRouteModules: RouteModules | undefined;
+    var __reactRouterInstance: DataRouter | undefined;
+    var __reactRouterHdrActive: boolean;
+    var __reactRouterClearCriticalCss: (() => void) | undefined;
+    var $RefreshRuntime$: {
+        performReactRefresh: () => void;
+    } | undefined;
+}
+export {};