From 60de47155554d09f7a7537ab81cfc68735c135bc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Sun, 29 May 2022 15:33:52 +0200 Subject: [PATCH] refactor: use `react-router-dom` import instead of `history` or `react-router` where possible --- packages/remix-react/__tests__/transition-test.tsx | 4 ---- packages/remix-react/browser.tsx | 2 +- packages/remix-react/components.tsx | 13 +++++++++---- packages/remix-react/errorBoundaries.tsx | 4 +--- packages/remix-react/links.ts | 11 ++++------- packages/remix-react/routeMatching.ts | 5 +---- packages/remix-react/routeModules.ts | 5 +---- packages/remix-react/routes.tsx | 2 +- packages/remix-react/server.tsx | 4 +--- packages/remix-react/transition.ts | 4 ++-- packages/remix-server-runtime/routeMatching.ts | 2 +- 11 files changed, 22 insertions(+), 34 deletions(-) diff --git a/packages/remix-react/__tests__/transition-test.tsx b/packages/remix-react/__tests__/transition-test.tsx index 005cc31c2f6..145bf52059d 100644 --- a/packages/remix-react/__tests__/transition-test.tsx +++ b/packages/remix-react/__tests__/transition-test.tsx @@ -1809,10 +1809,6 @@ describe("navigating with inflight fetchers", () => { }); }); -// describe("react-router", () => { -// it.todo("replaces pending locations even on a push"); -// }); - //////////////////////////////////////////////////////////////////////////////// type Deferred = ReturnType; diff --git a/packages/remix-react/browser.tsx b/packages/remix-react/browser.tsx index 22d85195ed2..57d7976e9c5 100644 --- a/packages/remix-react/browser.tsx +++ b/packages/remix-react/browser.tsx @@ -1,5 +1,5 @@ // TODO: We eventually might not want to import anything directly from `history` -// and leverage `react-router` here instead +// and leverage `react-router-dom` here instead import type { BrowserHistory, Update } from "history"; import { createBrowserHistory } from "history"; import type { ReactElement } from "react"; diff --git a/packages/remix-react/components.tsx b/packages/remix-react/components.tsx index 721e5a49ae3..d0947a640f2 100644 --- a/packages/remix-react/components.tsx +++ b/packages/remix-react/components.tsx @@ -1,6 +1,6 @@ // TODO: We eventually might not want to import anything directly from `history` -// and leverage `react-router` here instead -import type { Action, Location } from "history"; +// and leverage `react-router-dom` here instead +import type { Action } from "history"; import type { FocusEventHandler, FormHTMLAttributes, @@ -8,7 +8,13 @@ import type { TouchEventHandler, } from "react"; import * as React from "react"; -import type { Navigator, Params } from "react-router"; +import type { + LinkProps, + Location, + NavLinkProps, + Navigator, + Params, +} from "react-router-dom"; import { Router, Link as RouterLink, @@ -19,7 +25,6 @@ import { useHref, useResolvedPath, } from "react-router-dom"; -import type { LinkProps, NavLinkProps } from "react-router-dom"; import type { AppData, FormEncType, FormMethod } from "./data"; import type { EntryContext, AssetsManifest } from "./entry"; diff --git a/packages/remix-react/errorBoundaries.tsx b/packages/remix-react/errorBoundaries.tsx index 81a905bc06f..4801f2716f2 100644 --- a/packages/remix-react/errorBoundaries.tsx +++ b/packages/remix-react/errorBoundaries.tsx @@ -1,6 +1,4 @@ -// TODO: We eventually might not want to import anything directly from `history` -// and leverage `react-router` here instead -import type { Location } from "history"; +import type { Location } from "react-router-dom"; import React, { useContext } from "react"; import type { diff --git a/packages/remix-react/links.ts b/packages/remix-react/links.ts index f0105e2a519..21b359c3a5b 100644 --- a/packages/remix-react/links.ts +++ b/packages/remix-react/links.ts @@ -1,14 +1,11 @@ -// TODO: We eventually might not want to import anything directly from `history` -// and leverage `react-router` here instead -import type { Location } from "history"; -import { parsePath } from "history"; +import type { Location } from "react-router-dom"; +import { parsePath } from "react-router-dom"; import type { AssetsManifest } from "./entry"; -import type { ClientRoute } from "./routes"; import type { RouteMatch } from "./routeMatching"; -// import { matchClientRoutes } from "./routeMatching"; -import type { RouteModules, RouteModule } from "./routeModules"; +import type { RouteModule, RouteModules } from "./routeModules"; import { loadRouteModule } from "./routeModules"; +import type { ClientRoute } from "./routes"; type Primitive = null | undefined | string | number | boolean | symbol | bigint; diff --git a/packages/remix-react/routeMatching.ts b/packages/remix-react/routeMatching.ts index 81efe7a79e5..6c515b05d09 100644 --- a/packages/remix-react/routeMatching.ts +++ b/packages/remix-react/routeMatching.ts @@ -1,7 +1,4 @@ -// TODO: We eventually might not want to import anything directly from `history` -// and leverage `react-router` here instead -import type { Location } from "history"; -import type { Params, RouteObject } from "react-router"; // TODO: export/import from react-router-dom +import type { Location, Params, RouteObject } from "react-router-dom"; import { matchRoutes } from "react-router-dom"; import type { ClientRoute } from "./routes"; diff --git a/packages/remix-react/routeModules.ts b/packages/remix-react/routeModules.ts index 6f98a61e945..a41b02b8c55 100644 --- a/packages/remix-react/routeModules.ts +++ b/packages/remix-react/routeModules.ts @@ -1,8 +1,5 @@ -// TODO: We eventually might not want to import anything directly from `history` -// and leverage `react-router` here instead -import type { Location } from "history"; import type { ComponentType } from "react"; -import type { Params } from "react-router"; // TODO: import/export from react-router-dom +import type { Location, Params } from "react-router-dom"; import type { AppData } from "./data"; import type { LinkDescriptor } from "./links"; diff --git a/packages/remix-react/routes.tsx b/packages/remix-react/routes.tsx index 5873e13bf17..d3fa7cc3a84 100644 --- a/packages/remix-react/routes.tsx +++ b/packages/remix-react/routes.tsx @@ -1,6 +1,6 @@ import type { ComponentType, ReactNode } from "react"; import * as React from "react"; -import type { Params } from "react-router"; +import type { Params } from "react-router-dom"; import type { RouteModules, ShouldReloadFunction } from "./routeModules"; import { loadRouteModule } from "./routeModules"; diff --git a/packages/remix-react/server.tsx b/packages/remix-react/server.tsx index 7ef4b8dfdba..b95ed08b815 100644 --- a/packages/remix-react/server.tsx +++ b/packages/remix-react/server.tsx @@ -1,9 +1,7 @@ -// TODO: We eventually might not want to import anything directly from `history` -// and leverage `react-router` here instead -import type { Location, To } from "history"; import { Action, createPath } from "history"; import type { ReactElement } from "react"; import * as React from "react"; +import type { Location, To } from "react-router-dom"; import { RemixEntry } from "./components"; import type { EntryContext } from "./entry"; diff --git a/packages/remix-react/transition.ts b/packages/remix-react/transition.ts index 219836e6529..bc12b8de5f0 100644 --- a/packages/remix-react/transition.ts +++ b/packages/remix-react/transition.ts @@ -1,7 +1,7 @@ // TODO: We eventually might not want to import anything directly from `history` -// and leverage `react-router` here instead +// and leverage `react-router-dom` here instead import { Action } from "history"; -import type { Location } from "history"; +import type { Location } from "react-router-dom"; import type { RouteData } from "./routeData"; import type { RouteMatch } from "./routeMatching"; diff --git a/packages/remix-server-runtime/routeMatching.ts b/packages/remix-server-runtime/routeMatching.ts index 4373fd6f012..363de4bdefc 100644 --- a/packages/remix-server-runtime/routeMatching.ts +++ b/packages/remix-server-runtime/routeMatching.ts @@ -1,4 +1,4 @@ -import type { Params, RouteObject } from "react-router"; // TODO: export/import from react-router-dom +import type { Params, RouteObject } from "react-router-dom"; import { matchRoutes } from "react-router-dom"; import type { ServerRoute } from "./routes";