react-router-dom-v5-compat 6.3.0 → 6.4.0-pre.3

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# react-router-dom-v5-compat
+
+## 6.4.0-pre.3
+
+### Patch Changes
+
+- Updated dependencies

package/__tests__/link-click-test.tsx

@@ -0,0 +1,259 @@
+/**
+ * Just copied over the link click test as a quick smoke test that it's working
+ * the same as v6 proper.
+ */
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { act } from "react-dom/test-utils";
+import { MemoryRouter, Routes, Route, Link } from "../index";
+
+function click(anchor: HTMLAnchorElement, eventInit?: MouseEventInit) {
+  let event = new MouseEvent("click", {
+    view: window,
+    bubbles: true,
+    cancelable: true,
+    ...eventInit,
+  });
+  anchor.dispatchEvent(event);
+  return event;
+}
+
+describe("A <Link> click", () => {
+  let node: HTMLDivElement;
+  beforeEach(() => {
+    node = document.createElement("div");
+    document.body.appendChild(node);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(node);
+    node = null!;
+  });
+
+  it("navigates to the new page", () => {
+    function Home() {
+      return (
+        <div>
+          <h1>Home</h1>
+          <Link to="../about">About</Link>
+        </div>
+      );
+    }
+
+    act(() => {
+      ReactDOM.render(
+        <MemoryRouter initialEntries={["/home"]}>
+          <Routes>
+            <Route path="home" element={<Home />} />
+            <Route path="about" element={<h1>About</h1>} />
+          </Routes>
+        </MemoryRouter>,
+        node
+      );
+    });
+
+    let anchor = node.querySelector("a");
+    expect(anchor).not.toBeNull();
+
+    let event: MouseEvent;
+    act(() => {
+      event = click(anchor);
+    });
+
+    expect(event.defaultPrevented).toBe(true);
+    let h1 = node.querySelector("h1");
+    expect(h1).not.toBeNull();
+    expect(h1?.textContent).toEqual("About");
+  });
+
+  describe("when reloadDocument is specified", () => {
+    it("does not prevent default", () => {
+      function Home() {
+        return (
+          <div>
+            <h1>Home</h1>
+            <Link reloadDocument to="../about">
+              About
+            </Link>
+          </div>
+        );
+      }
+
+      act(() => {
+        ReactDOM.render(
+          <MemoryRouter initialEntries={["/home"]}>
+            <Routes>
+              <Route path="home" element={<Home />} />
+              <Route path="about" element={<h1>About</h1>} />
+            </Routes>
+          </MemoryRouter>,
+          node
+        );
+      });
+
+      let anchor = node.querySelector("a");
+      expect(anchor).not.toBeNull();
+
+      let event: MouseEvent;
+      act(() => {
+        event = click(anchor);
+      });
+
+      expect(event.defaultPrevented).toBe(false);
+    });
+  });
+
+  describe("when preventDefault is used on the click handler", () => {
+    it("stays on the same page", () => {
+      function Home() {
+        function handleClick(event: React.MouseEvent<HTMLAnchorElement>) {
+          event.preventDefault();
+        }
+
+        return (
+          <div>
+            <h1>Home</h1>
+            <Link to="../about" onClick={handleClick}>
+              About
+            </Link>
+          </div>
+        );
+      }
+
+      act(() => {
+        ReactDOM.render(
+          <MemoryRouter initialEntries={["/home"]}>
+            <Routes>
+              <Route path="home" element={<Home />} />
+              <Route path="about" element={<h1>About</h1>} />
+            </Routes>
+          </MemoryRouter>,
+          node
+        );
+      });
+
+      let anchor = node.querySelector("a");
+      expect(anchor).not.toBeNull();
+
+      act(() => {
+        click(anchor);
+      });
+
+      let h1 = node.querySelector("h1");
+      expect(h1).not.toBeNull();
+      expect(h1?.textContent).toEqual("Home");
+    });
+  });
+
+  describe("with a right click", () => {
+    it("stays on the same page", () => {
+      function Home() {
+        return (
+          <div>
+            <h1>Home</h1>
+            <Link to="../about">About</Link>
+          </div>
+        );
+      }
+
+      act(() => {
+        ReactDOM.render(
+          <MemoryRouter initialEntries={["/home"]}>
+            <Routes>
+              <Route path="home" element={<Home />} />
+              <Route path="about" element={<h1>About</h1>} />
+            </Routes>
+          </MemoryRouter>,
+          node
+        );
+      });
+
+      let anchor = node.querySelector("a");
+      expect(anchor).not.toBeNull();
+
+      act(() => {
+        // https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button
+        let RightMouseButton = 2;
+        click(anchor, { button: RightMouseButton });
+      });
+
+      let h1 = node.querySelector("h1");
+      expect(h1).not.toBeNull();
+      expect(h1?.textContent).toEqual("Home");
+    });
+  });
+
+  describe("when the link is supposed to open in a new window", () => {
+    it("stays on the same page", () => {
+      function Home() {
+        return (
+          <div>
+            <h1>Home</h1>
+            <Link to="../about" target="_blank">
+              About
+            </Link>
+          </div>
+        );
+      }
+
+      act(() => {
+        ReactDOM.render(
+          <MemoryRouter initialEntries={["/home"]}>
+            <Routes>
+              <Route path="home" element={<Home />} />
+              <Route path="about" element={<h1>About</h1>} />
+            </Routes>
+          </MemoryRouter>,
+          node
+        );
+      });
+
+      let anchor = node.querySelector("a");
+      expect(anchor).not.toBeNull();
+
+      act(() => {
+        click(anchor);
+      });
+
+      let h1 = node.querySelector("h1");
+      expect(h1).not.toBeNull();
+      expect(h1?.textContent).toEqual("Home");
+    });
+  });
+
+  describe("when the modifier keys are used", () => {
+    it("stays on the same page", () => {
+      function Home() {
+        return (
+          <div>
+            <h1>Home</h1>
+            <Link to="../about">About</Link>
+          </div>
+        );
+      }
+
+      act(() => {
+        ReactDOM.render(
+          <MemoryRouter initialEntries={["/home"]}>
+            <Routes>
+              <Route path="home" element={<Home />} />
+              <Route path="about" element={<h1>About</h1>} />
+            </Routes>
+          </MemoryRouter>,
+          node
+        );
+      });
+
+      let anchor = node.querySelector("a");
+      expect(anchor).not.toBeNull();
+
+      act(() => {
+        click(anchor, { ctrlKey: true });
+      });
+
+      let h1 = node.querySelector("h1");
+      expect(h1).not.toBeNull();
+      expect(h1?.textContent).toEqual("Home");
+    });
+  });
+});

package/{index.d.ts → index.ts}

@@ -25,7 +25,7 @@
  * - TSC needs to generate the types, and it has to derive the output paths from
  *   the import paths. If we have a weird require *outside of this package* to
  *   "../../react-router-dom" it's going to generate types from the common root
- *   of all module paths (Which makes sense becuase what else would it do? It
+ *   of all module paths (Which makes sense because what else would it do? It
  *   needs to write the type files next to the source files so that typescript
  *   can resolve the types for tooling in the same location as the modules).
  *   Because tsc isn't as flexible as rollup, we have no control over this
@@ -46,7 +46,69 @@
  *   would break. We could stop doing two bundles in v6 "react-router-dom" and
  *   deprecate the deep require if we wanted to avoid the duplication here.
  */
-export type { Hash, Location, Path, To, MemoryRouterProps, NavigateFunction, NavigateOptions, NavigateProps, Navigator, OutletProps, Params, PathMatch, RouteMatch, RouteObject, RouteProps, PathRouteProps, LayoutRouteProps, IndexRouteProps, RouterProps, Pathname, Search, RoutesProps, } from "./react-router-dom";
-export { BrowserRouter, HashRouter, Link, MemoryRouter, NavLink, Navigate, NavigationType, Outlet, Route, Router, Routes, UNSAFE_LocationContext, UNSAFE_NavigationContext, UNSAFE_RouteContext, createPath, createRoutesFromChildren, createSearchParams, generatePath, matchPath, matchRoutes, parsePath, renderMatches, resolvePath, unstable_HistoryRouter, useHref, useInRouterContext, useLinkClickHandler, useLocation, useMatch, useNavigate, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRoutes, useSearchParams, } from "./react-router-dom";
+export type {
+  Hash,
+  Location,
+  Path,
+  To,
+  MemoryRouterProps,
+  NavigateFunction,
+  NavigateOptions,
+  NavigateProps,
+  Navigator,
+  OutletProps,
+  Params,
+  PathMatch,
+  RouteMatch,
+  RouteObject,
+  RouteProps,
+  PathRouteProps,
+  LayoutRouteProps,
+  IndexRouteProps,
+  RouterProps,
+  Pathname,
+  Search,
+  RoutesProps,
+} from "./react-router-dom";
+export {
+  BrowserRouter,
+  HashRouter,
+  Link,
+  MemoryRouter,
+  NavLink,
+  Navigate,
+  NavigationType,
+  Outlet,
+  Route,
+  Router,
+  Routes,
+  UNSAFE_LocationContext,
+  UNSAFE_NavigationContext,
+  UNSAFE_RouteContext,
+  createPath,
+  createRoutesFromChildren,
+  createSearchParams,
+  generatePath,
+  matchPath,
+  matchRoutes,
+  parsePath,
+  renderMatches,
+  resolvePath,
+  unstable_HistoryRouter,
+  useHref,
+  useInRouterContext,
+  useLinkClickHandler,
+  useLocation,
+  useMatch,
+  useNavigate,
+  useNavigationType,
+  useOutlet,
+  useOutletContext,
+  useParams,
+  useResolvedPath,
+  useRoutes,
+  useSearchParams,
+} from "./react-router-dom";
+
 export type { StaticRouterProps } from "./lib/components";
 export { CompatRouter, CompatRoute, StaticRouter } from "./lib/components";

package/jest-transformer.js

@@ -0,0 +1,10 @@
+const babelJest = require("babel-jest");
+
+module.exports = babelJest.createTransformer({
+  presets: [
+    ["@babel/preset-env", { loose: true }],
+    "@babel/preset-react",
+    "@babel/preset-typescript",
+  ],
+  plugins: ["babel-plugin-dev-expression"],
+});

package/jest.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+  testMatch: ["**/__tests__/*-test.[jt]s?(x)"],
+  transform: {
+    "\\.[jt]sx?$": "./jest-transformer.js",
+  },
+  globals: {
+    __DEV__: true,
+  },
+};

package/lib/components.tsx

@@ -0,0 +1,130 @@
+import * as React from "react";
+import type { Location, To } from "history";
+import { Action, createPath, parsePath } from "history";
+
+// Get useHistory from react-router-dom v5 (peer dep).
+// @ts-expect-error
+import { useHistory, Route as RouteV5 } from "react-router-dom";
+
+// We are a wrapper around react-router-dom v6, so bring it in
+// and bundle it because an app can't have two versions of
+// react-router-dom in its package.json.
+import { Router, Routes, Route } from "../react-router-dom";
+
+// v5 isn't in TypeScript, they'll also lose the @types/react-router with this
+// but not worried about that for now.
+export function CompatRoute(props: any) {
+  let { path } = props;
+  if (!props.exact) path += "/*";
+  return (
+    <Routes>
+      <Route path={path} element={<RouteV5 {...props} />} />
+    </Routes>
+  );
+}
+
+export function CompatRouter({ children }: { children: React.ReactNode }) {
+  let history = useHistory();
+  let [state, setState] = React.useState(() => ({
+    location: history.location,
+    action: history.action,
+  }));
+
+  React.useLayoutEffect(() => {
+    history.listen((location: Location, action: Action) =>
+      setState({ location, action })
+    );
+  }, [history]);
+
+  return (
+    <Router
+      navigationType={state.action}
+      location={state.location}
+      navigator={history}
+    >
+      <Routes>
+        <Route path="*" element={children} />
+      </Routes>
+    </Router>
+  );
+}
+
+export interface StaticRouterProps {
+  basename?: string;
+  children?: React.ReactNode;
+  location: Partial<Location> | string;
+}
+
+/**
+ * A <Router> that may not navigate to any other location. This is useful
+ * on the server where there is no stateful UI.
+ */
+export function StaticRouter({
+  basename,
+  children,
+  location: locationProp = "/",
+}: StaticRouterProps) {
+  if (typeof locationProp === "string") {
+    locationProp = parsePath(locationProp);
+  }
+
+  let action = Action.Pop;
+  let location: Location = {
+    pathname: locationProp.pathname || "/",
+    search: locationProp.search || "",
+    hash: locationProp.hash || "",
+    state: locationProp.state || null,
+    key: locationProp.key || "default",
+  };
+
+  let staticNavigator = {
+    createHref(to: To) {
+      return typeof to === "string" ? to : createPath(to);
+    },
+    push(to: To) {
+      throw new Error(
+        `You cannot use navigator.push() on the server because it is a stateless ` +
+          `environment. This error was probably triggered when you did a ` +
+          `\`navigate(${JSON.stringify(to)})\` somewhere in your app.`
+      );
+    },
+    replace(to: To) {
+      throw new Error(
+        `You cannot use navigator.replace() on the server because it is a stateless ` +
+          `environment. This error was probably triggered when you did a ` +
+          `\`navigate(${JSON.stringify(to)}, { replace: true })\` somewhere ` +
+          `in your app.`
+      );
+    },
+    go(delta: number) {
+      throw new Error(
+        `You cannot use navigator.go() on the server because it is a stateless ` +
+          `environment. This error was probably triggered when you did a ` +
+          `\`navigate(${delta})\` somewhere in your app.`
+      );
+    },
+    back() {
+      throw new Error(
+        `You cannot use navigator.back() on the server because it is a stateless ` +
+          `environment.`
+      );
+    },
+    forward() {
+      throw new Error(
+        `You cannot use navigator.forward() on the server because it is a stateless ` +
+          `environment.`
+      );
+    },
+  };
+
+  return (
+    <Router
+      basename={basename}
+      children={children}
+      location={location}
+      navigationType={action}
+      navigator={staticNavigator}
+      static={true}
+    />
+  );
+}

package/node-main.js

@@ -0,0 +1,7 @@
+/* eslint-env node */
+
+if (process.env.NODE_ENV === "production") {
+  module.exports = require("./umd/react-router-dom-v5-compat.production.min.js");
+} else {
+  module.exports = require("./umd/react-router-dom-v5-compat.development.js");
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-router-dom-v5-compat",
-  "version": "6.3.0",
+  "version": "6.4.0-pre.3",
   "author": "Remix Software <hello@remix.run>",
   "description": "Migration path to React Router v6 from v4/5",
   "repository": {
@@ -15,12 +15,12 @@
   "unpkg": "./umd/react-router.production.min.js",
   "dependencies": {
     "history": "^5.3.0",
-    "react-router": "6.3.0"
+    "react-router": "6.4.0-pre.3"
   },
   "peerDependencies": {
     "react": ">=16.8",
     "react-dom": ">=16.8",
-    "react-router-dom": "4 || 5"
+    "react-router-dom": "6.4.0-pre.3"
   },
   "sideEffects": false,
   "keywords": [

package/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "files": ["index.ts"],
+  "compilerOptions": {
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "target": "ES2020",
+    "module": "ES2020",
+    "moduleResolution": "node",
+
+    "strict": true,
+    "jsx": "react",
+
+    "declaration": true,
+    "emitDeclarationOnly": true,
+
+    "skipLibCheck": true,
+
+    "outDir": "../../build/node_modules/react-router-dom-v5-compat",
+    "rootDirs": ["."]
+  }
+}

package/LICENSE.md

@@ -1,22 +0,0 @@
-MIT License
-
-Copyright (c) React Training 2015-2019
-Copyright (c) Remix Software 2020-2021
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.