Remove duplicate RouterProvider implementations

.changeset/thin-nails-turn.md

@@ -0,0 +1,5 @@
+---
+"react-router": minor
+---
+
+Remove duplicate `RouterProvider` impliementations

packages/react-router/__tests__/data-memory-router-test.tsx

@@ -40,7 +40,6 @@ import urlDataStrategy from "./router/utils/urlDataStrategy";
 import { createDeferred } from "./router/utils/utils";
 import MemoryNavigate from "./utils/MemoryNavigate";
 import getHtml from "./utils/getHtml";
-import { RouterProvider as DomRouterProvider } from "../lib/dom/lib";
 
 describe("createMemoryRouter", () => {
   let consoleWarn: jest.SpyInstance;
@@ -1193,9 +1192,7 @@ describe("createMemoryRouter", () => {
       },
     ]);
 
-    // TODO: Fetchers only supported in DomRouterProvider at the moment, but
-    // that should be fixed once we align the two
-    render(<DomRouterProvider router={router} />);
+    render(<RouterProvider router={router} />);
 
     await waitFor(() => screen.getByText("Fetch (1, empty)"));
     fireEvent.click(screen.getByText("Fetch (1, empty)"));
@@ -1251,9 +1248,7 @@ describe("createMemoryRouter", () => {
       },
     ]);
 
-    // TODO: Fetchers only supported in DomRouterProvider at the moment, but
-    // that should be fixed once we align the two
-    render(<DomRouterProvider router={router} />);
+    render(<RouterProvider router={router} />);
 
     await waitFor(() => screen.getByText("Fetch (1, empty)"));
     fireEvent.click(screen.getByText("Fetch (1, empty)"));
@@ -3371,7 +3366,6 @@ describe("createMemoryRouter", () => {
         </React.Suspense>
       );
 
-      console.log(getHtml(container));
       expect(getHtml(container)).toMatchInlineSnapshot(`
         "<div>
           <p>

packages/react-router/__tests__/data-router-no-dom-test.tsx

@@ -0,0 +1,290 @@
+/**
+ * @jest-environment node
+ */
+
+import * as React from "react";
+import renderer from "react-test-renderer";
+import { RouterProvider, useFetcher } from "../lib/dom/lib";
+import { createMemoryRouter } from "../lib/components";
+import { useLoaderData, useNavigate } from "../lib/hooks";
+
+describe("RouterProvider works when no DOM APIs are available", () => {
+  it("renders and navigates", async () => {
+    let router = createMemoryRouter([
+      {
+        path: "/",
+        Component: () => {
+          let navigate = useNavigate();
+          return <button onClick={() => navigate("/foo")}>Go to /foo</button>;
+        },
+      },
+      {
+        path: "/foo",
+        loader: () => "FOO",
+        Component: () => {
+          let data = useLoaderData() as string;
+          return <h1>{data}</h1>;
+        },
+      },
+    ]);
+    const component = renderer.create(<RouterProvider router={router} />);
+    let tree = component.toJSON();
+    expect(tree).toMatchInlineSnapshot(`
+      <button
+        onClick={[Function]}
+      >
+        Go to /foo
+      </button>
+    `);
+
+    await renderer.act(async () => {
+      // @ts-expect-error
+      tree.props.onClick();
+      await new Promise((resolve) => setTimeout(resolve, 0));
+    });
+
+    tree = component.toJSON();
+    expect(tree).toMatchInlineSnapshot(`
+      <h1>
+        FOO
+      </h1>
+    `);
+  });
+
+  it("is defensive against a view transition navigation", async () => {
+    let router = createMemoryRouter([
+      {
+        path: "/",
+        Component: () => {
+          let navigate = useNavigate();
+          return <button onClick={() => navigate("/foo")}>Go to /foo</button>;
+        },
+      },
+      {
+        path: "/foo",
+        loader: () => "FOO",
+        Component: () => {
+          let data = useLoaderData() as string;
+          return <h1>{data}</h1>;
+        },
+      },
+    ]);
+    const component = renderer.create(<RouterProvider router={router} />);
+    let tree = component.toJSON();
+    expect(tree).toMatchInlineSnapshot(`
+      <button
+        onClick={[Function]}
+      >
+        Go to /foo
+      </button>
+    `);
+
+    let spy = jest.fn();
+    let unsubscribe = router.subscribe(spy);
+
+    await renderer.act(async () => {
+      router.navigate("/foo", {
+        unstable_viewTransition: true,
+      });
+      await new Promise((resolve) => setTimeout(resolve, 0));
+    });
+
+    tree = component.toJSON();
+    expect(tree).toMatchInlineSnapshot(`
+      <h1>
+        FOO
+      </h1>
+    `);
+
+    expect(spy.mock.calls[0][0].location.pathname).toBe("/");
+    expect(spy.mock.calls[0][0].navigation.state).toBe("loading");
+    expect(spy.mock.calls[0][0].navigation.location.pathname).toBe("/foo");
+    expect(spy.mock.calls[0][1].unstable_viewTransitionOpts).toBeUndefined();
+
+    expect(spy.mock.calls[1][0].location.pathname).toBe("/foo");
+    expect(spy.mock.calls[1][0].navigation.state).toBe("idle");
+    expect(spy.mock.calls[1][1].unstable_viewTransitionOpts).toEqual({
+      currentLocation: {
+        hash: "",
+        key: "default",
+        pathname: "/",
+        search: "",
+        state: null,
+      },
+      nextLocation: {
+        hash: "",
+        key: expect.any(String),
+        pathname: "/foo",
+        search: "",
+        state: null,
+      },
+    });
+
+    unsubscribe();
+  });
+
+  it("is defensive against a flushSync navigation", async () => {
+    let router = createMemoryRouter([
+      {
+        path: "/",
+        Component: () => {
+          let navigate = useNavigate();
+          return <button onClick={() => navigate("/foo")}>Go to /foo</button>;
+        },
+      },
+      {
+        path: "/foo",
+        loader: () => "FOO",
+        Component: () => {
+          let data = useLoaderData() as string;
+          return <h1>{data}</h1>;
+        },
+      },
+    ]);
+    const component = renderer.create(<RouterProvider router={router} />);
+    let tree = component.toJSON();
+    expect(tree).toMatchInlineSnapshot(`
+      <button
+        onClick={[Function]}
+      >
+        Go to /foo
+      </button>
+    `);
+
+    let spy = jest.fn();
+    let unsubscribe = router.subscribe(spy);
+
+    await renderer.act(async () => {
+      router.navigate("/foo", {
+        unstable_flushSync: true,
+      });
+      await new Promise((resolve) => setTimeout(resolve, 0));
+    });
+
+    tree = component.toJSON();
+    expect(tree).toMatchInlineSnapshot(`
+      <h1>
+        FOO
+      </h1>
+    `);
+
+    expect(spy.mock.calls[0][0].location.pathname).toBe("/");
+    expect(spy.mock.calls[0][0].navigation.state).toBe("loading");
+    expect(spy.mock.calls[0][0].navigation.location.pathname).toBe("/foo");
+    expect(spy.mock.calls[0][1].unstable_flushSync).toBe(true);
+
+    expect(spy.mock.calls[1][0].location.pathname).toBe("/foo");
+    expect(spy.mock.calls[1][0].navigation.state).toBe("idle");
+    expect(spy.mock.calls[1][1].unstable_flushSync).toBe(false);
+
+    unsubscribe();
+  });
+
+  it("supports fetcher loads", async () => {
+    let router = createMemoryRouter([
+      {
+        path: "/",
+        Component: () => {
+          let fetcher = useFetcher();
+          return (
+            <button onClick={() => fetcher.load("/fetch")}>
+              Load fetcher
+              {fetcher.data || ""}
+            </button>
+          );
+        },
+      },
+      {
+        path: "/fetch",
+        loader() {
+          return "LOADER";
+        },
+      },
+    ]);
+    const component = renderer.create(<RouterProvider router={router} />);
+    let tree = component.toJSON();
+    expect(tree).toMatchInlineSnapshot(`
+      <button
+        onClick={[Function]}
+      >
+        Load fetcher
+      </button>
+    `);
+
+    await renderer.act(async () => {
+      // @ts-expect-error
+      tree.props.onClick();
+      await new Promise((resolve) => setTimeout(resolve, 100));
+    });
+
+    tree = component.toJSON();
+    expect(tree).toMatchInlineSnapshot(`
+      <button
+        onClick={[Function]}
+      >
+        Load fetcher
+        LOADER
+      </button>
+    `);
+  });
+
+  it("supports fetcher submissions", async () => {
+    let router = createMemoryRouter([
+      {
+        path: "/",
+        Component: () => {
+          let fetcher = useFetcher();
+          return (
+            <button
+              onClick={() =>
+                fetcher.submit(
+                  { message: "echo" },
+                  {
+                    method: "post",
+                    action: "/fetch",
+                    encType: "application/json",
+                  }
+                )
+              }
+            >
+              Submit fetcher
+              {fetcher.data?.message || ""}
+            </button>
+          );
+        },
+      },
+      {
+        path: "/fetch",
+        async action({ request }) {
+          let data = await request.json();
+          return { message: data.message.toUpperCase() };
+        },
+      },
+    ]);
+    const component = renderer.create(<RouterProvider router={router} />);
+    let tree = component.toJSON();
+    expect(tree).toMatchInlineSnapshot(`
+      <button
+        onClick={[Function]}
+      >
+        Submit fetcher
+      </button>
+    `);
+
+    await renderer.act(async () => {
+      // @ts-expect-error
+      tree.props.onClick();
+      await new Promise((resolve) => setTimeout(resolve, 100));
+    });
+
+    tree = component.toJSON();
+    expect(tree).toMatchInlineSnapshot(`
+      <button
+        onClick={[Function]}
+      >
+        Submit fetcher
+        ECHO
+      </button>
+    `);
+  });
+});

packages/react-router/index.ts

@@ -57,7 +57,6 @@ import type {
   PathRouteProps,
   RouteProps,
   RouterProps,
-  RouterProviderProps,
   RoutesProps,
 } from "./lib/components";
 import {
@@ -67,7 +66,6 @@ import {
   Outlet,
   Route,
   Router,
-  RouterProvider,
   Routes,
   createRoutesFromChildren,
   renderMatches,
@@ -168,7 +166,6 @@ export type {
   RouteObject,
   RouteProps,
   RouterProps,
-  RouterProviderProps,
   RoutesProps,
   Search,
   ShouldRevalidateFunction,
@@ -188,7 +185,6 @@ export {
   Outlet,
   Route,
   Router,
-  RouterProvider,
   Routes,
   createMemoryRouter,
   createPath,
@@ -279,6 +275,7 @@ export type {
   SubmitFunction,
   FetcherSubmitFunction,
   FetcherWithComponents,
+  RouterProviderProps,
 } from "./lib/dom/lib";
 export {
   createBrowserRouter,
@@ -293,6 +290,7 @@ export {
   unstable_HistoryRouter,
   NavLink,
   Form,
+  RouterProvider,
   ScrollRestoration,
   useLinkClickHandler,
   useSearchParams,