Skip to content

Commit

Permalink
Support react-router 6.4+
Browse files Browse the repository at this point in the history
  • Loading branch information
@danielnixon
danielnixon committed Jan 9, 2023
1 parent 3006a27 commit fe6e9b2
Show file tree
Hide file tree
Showing 4 changed files with 1,182 additions and 671 deletions.
44 changes: 24 additions & 20 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,41 +8,45 @@
"url": "https://github.com/oaf-project/oaf-react-router.git"
},
"devDependencies": {
"@stryker-mutator/core": "^6.2.2",
"@stryker-mutator/jest-runner": "^6.2.2",
"@stryker-mutator/typescript-checker": "^6.2.2",
"@types/jest": "^29.0.0",
"@typescript-eslint/eslint-plugin": "^5.36.2",
"@typescript-eslint/parser": "^5.36.2",
"@stryker-mutator/core": "^6.3.1",
"@stryker-mutator/jest-runner": "^6.3.1",
"@stryker-mutator/typescript-checker": "^6.3.1",
"@types/jest": "^29.2.5",
"@typescript-eslint/eslint-plugin": "^5.48.0",
"@typescript-eslint/parser": "^5.48.0",
"codecov": "^3.8.3",
"eslint": "^8.23.0",
"eslint-config-agile-digital": "^1.2.1",
"eslint-config-prettier": "^8.5.0",
"eslint": "^8.31.0",
"eslint-config-agile-digital": "^1.4.0",
"eslint-config-prettier": "^8.6.0",
"eslint-config-typed-fp": "^3.3.0",
"eslint-plugin-functional": "^4.2.2",
"eslint-plugin-functional": "^4.4.1",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-jest": "^27.0.1",
"eslint-plugin-jest": "^27.2.1",
"eslint-plugin-jsx-a11y": "^6.6.1",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-react": "^7.31.7",
"eslint-plugin-react": "^7.31.11",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-sonarjs": "^0.17.0",
"eslint-plugin-spellcheck": "^0.0.20",
"eslint-plugin-total-functions": "^6.0.0",
"history": "^5.3.0",
"jest": "^29.0.0",
"jest-environment-jsdom": "^29.0.2",
"prettier": "^2.7.1",
"jest": "^29.3.1",
"jest-environment-jsdom": "^29.3.1",
"prettier": "^2.8.2",
"react": "^18.2.0",
"react-router": "^6.6.1",
"react-router-dom": "^6.6.1",
"total-functions": "^3.0.0",
"ts-jest": "^29.0.0",
"type-coverage": "^2.22.0",
"typescript": "^4.8.2"
"ts-jest": "^29.0.3",
"type-coverage": "^2.24.1",
"typescript": "^4.9.4"
},
"dependencies": {
"oaf-routing": "^4.0.2"
},
"peerDependencies": {
"history": "^5.2.0"
"react": "^18.2.0",
"react-router": "^6.6.1",
"react-router-dom": "^6.6.1"
},
"scripts": {
"build": "tsc",
Expand Down
42 changes: 21 additions & 21 deletions src/index.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@
/* eslint-disable functional/no-expression-statement */
/* eslint-disable functional/functional-parameters */

import { createBrowserHistory } from "history";
import { wrapHistory } from ".";
import { createBrowserRouter } from "react-router-dom";
import { wrapRouter } from ".";

// HACK: wait for history wrapper to update DOM.
const waitForDomUpdate = (): Promise<void> =>
Expand All @@ -21,14 +21,14 @@ beforeEach(() => {
describe("oaf-react-router", () => {
// eslint-disable-next-line jest/expect-expect
test("doesn't throw when wrapping and unwrapping history", () => {
const history = createBrowserHistory();
const unwrap = wrapHistory(history);
const router = createBrowserRouter([{}]);
const unwrap = wrapRouter(router);
unwrap();
});

test("sets the document title after initial render", async () => {
const history = createBrowserHistory();
wrapHistory(history, {
const router = createBrowserRouter([{}]);
wrapRouter(router, {
setPageTitle: true,
documentTitle: () => "test title",
});
Expand All @@ -41,40 +41,40 @@ describe("oaf-react-router", () => {
});

test("sets the document title after a navigation", async () => {
const history = createBrowserHistory();
wrapHistory(history, {
const router = createBrowserRouter([{}]);
wrapRouter(router, {
setPageTitle: true,
documentTitle: () => "test title",
});

expect(document.title).toBe("");

history.push("/");
router.navigate("/");

await waitForDomUpdate();

expect(document.title).toBe("test title");
});

test("does not set the document title when setPageTitle is false", async () => {
const history = createBrowserHistory();
wrapHistory(history, {
const router = createBrowserRouter([{}]);
wrapRouter(router, {
setPageTitle: false,
documentTitle: () => "test title",
});

expect(document.title).toBe("");

history.push("/");
router.navigate("/");

await waitForDomUpdate();

expect(document.title).toBe("");
});

test("leaves focus alone when repairFocus is false", async () => {
const history = createBrowserHistory();
wrapHistory(history, { repairFocus: false });
const router = createBrowserRouter([{}]);
wrapRouter(router, { repairFocus: false });

const main = document.createElement("main");
const mainH1 = document.createElement("h1");
Expand All @@ -86,16 +86,16 @@ describe("oaf-react-router", () => {
randomButton.focus();
expect(document.activeElement).toBe(randomButton);

history.push("/");
router.navigate("/");

await waitForDomUpdate();

expect(document.activeElement).toBe(randomButton);
});

test("moves focus to body when primary focus target cannot be focused", async () => {
const history = createBrowserHistory();
wrapHistory(history);
const router = createBrowserRouter([{}]);
wrapRouter(router);

const main = document.createElement("main");
const mainH1 = document.createElement("h1");
Expand All @@ -108,7 +108,7 @@ describe("oaf-react-router", () => {
randomButton.focus();
expect(document.activeElement).toBe(randomButton);

history.push("/");
router.navigate("/");

await waitForDomUpdate();

Expand All @@ -118,8 +118,8 @@ describe("oaf-react-router", () => {
});

test("moves focus to the primary focus target", async () => {
const history = createBrowserHistory();
wrapHistory(history);
const router = createBrowserRouter([{}]);
wrapRouter(router);

const main = document.createElement("main");
const mainH1 = document.createElement("h1");
Expand All @@ -130,7 +130,7 @@ describe("oaf-react-router", () => {
document.activeElement,
);

history.push("/");
router.navigate("/");

await waitForDomUpdate();

Expand Down
14 changes: 7 additions & 7 deletions src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
/* eslint-disable functional/no-return-void */
/* eslint-disable functional/no-expression-statement */

import { History, Location } from "history";
import { Router, Location } from "@remix-run/router";
import {
createOafRouter,
defaultSettings as oafRoutingDefaultSettings,
Expand All @@ -15,8 +15,8 @@ export const defaultSettings: RouterSettings<Location> = {
...oafRoutingDefaultSettings,
};

export const wrapHistory = (
history: History,
export const wrapRouter = (
router: Router,
settingsOverrides?: Partial<RouterSettings<Location>>,
): (() => void) => {
const settings: RouterSettings<Location> = {
Expand All @@ -26,7 +26,7 @@ export const wrapHistory = (

const oafRouter = createOafRouter(settings, (location) => location.hash);

const initialLocation = history.location;
const initialLocation = router.state.location;

// HACK: We use setTimeout to give React a chance to render before we repair focus.
setTimeout(() => {
Expand All @@ -37,12 +37,12 @@ export const wrapHistory = (
// eslint-disable-next-line functional/no-let
let previousLocation = initialLocation;

const unlisten = history.listen((update) => {
const unlisten = router.subscribe((update) => {
// We're the first subscribed listener, so the DOM won't have been updated yet.
oafRouter.handleLocationWillChange(
previousLocation.key,
update.location.key,
update.action,
update.historyAction,
);

// HACK: We use setTimeout to give React a chance to render before we repair focus.
Expand All @@ -53,7 +53,7 @@ export const wrapHistory = (
stablePreviousLocation,
update.location,
update.location.key,
update.action,
update.historyAction,
);
}, settings.renderTimeout);

Expand Down

0 comments on commit fe6e9b2

Please sign in to comment.