From d1ed86c3b4394afcd89a521e9d53e09150fb8140 Mon Sep 17 00:00:00 2001 From: Justin Schrader Date: Fri, 9 Sep 2022 14:00:04 -0700 Subject: [PATCH] refactor: switch from react-router peer dep to react-router-dom (#64) * refactor: switch from react-router peer dep to react-router-dom * chore: update yarn lockfile * fix: some TS warnings in test file * fix: types Co-authored-by: Justin Schrader --- package.json | 6 +++--- rollup.config.js | 2 +- src/index.test.tsx | 33 ++++++++++++++++++++------------- src/index.tsx | 13 +++++++++++-- yarn.lock | 19 ++++++++++++++++--- 5 files changed, 51 insertions(+), 22 deletions(-) diff --git a/package.json b/package.json index 2415075..37c1964 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "use-react-router-breadcrumbs", - "version": "3.2.1", + "version": "4.0.0", "description": "A hook for displaying and setting breadcrumbs for react router", "main": "dist/cjs/index.js", "module": "dist/es/index.js", @@ -11,7 +11,7 @@ "types": "dist/index.d.ts", "peerDependencies": { "react": ">=16.8", - "react-router": ">=6.0.0" + "react-router-dom": ">=6.0.0" }, "scripts": { "prepublishOnly": "yarn build && pinst --disable", @@ -55,7 +55,7 @@ "pinst": "^3.0.0", "react": "^18.2.0", "react-dom": "^18.2.0", - "react-router": "^6.3.0", + "react-router-dom": "^6.3.0", "rollup": "^2.79.0", "rollup-plugin-size": "^0.2.2", "rollup-plugin-terser": "^7.0.2", diff --git a/rollup.config.js b/rollup.config.js index bc71aa6..5645e1d 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -27,7 +27,7 @@ const formats = [ const globals = { react: 'React', - 'react-router': 'ReactRouter', + 'react-router-dom': 'ReactRouterDom', }; export default formats.map(({ plugins, file, format }) => ({ diff --git a/src/index.test.tsx b/src/index.test.tsx index 44b69ac..d79e1eb 100644 --- a/src/index.test.tsx +++ b/src/index.test.tsx @@ -3,8 +3,8 @@ import '@testing-library/jest-dom'; import React from 'react'; import { render, screen } from '@testing-library/react'; -import { MemoryRouter as Router, useLocation } from 'react-router'; -import useBreadcrumbs, { getBreadcrumbs, createRoutesFromChildren, BreadcrumbsRoute, Route, Options } from './index'; +import { MemoryRouter as Router, useLocation } from 'react-router-dom'; +import useBreadcrumbs, { getBreadcrumbs, createRoutesFromChildren, BreadcrumbsRoute, Route, Options, BreadcrumbComponentProps } from './index'; // imports to test compiled builds import useBreadcrumbsCompiledES, { @@ -19,6 +19,11 @@ import useBreadcrumbsCompiledCJS, { getBreadcrumbs as getBreadcrumbsCompiledCJS, } from '../dist/cjs/index'; +interface ExtraPropsTest extends BreadcrumbComponentProps { + foo?: string; + bar?: string; +} + const components = { Breadcrumbs: ({ useBreadcrumbs: useBreadcrumbsHook, @@ -69,23 +74,23 @@ const components = { BreadcrumbLocationTest: ({ location, - }: { - location?: { - state?: { isLocationTest?: boolean } - } - }) => {location?.state?.isLocationTest ? 'pass' : 'fail'}, + }: BreadcrumbComponentProps) => ( + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + {location?.state?.isLocationTest ? 'pass' : 'fail'} + ), - BreadcrumbExtraPropsTest: ({ foo, bar }: { foo: string, bar: string }) => ( - - {foo} - {bar} - + BreadcrumbExtraPropsTest: (props: ExtraPropsTest) => ( + <> + {props.foo} + {props.bar} + ), BreadcrumbMemoized: React.memo(() => Memoized), // eslint-disable-next-line react/prefer-stateless-function - BreadcrumbClass: class BreadcrumbClass extends React.PureComponent { + BreadcrumbClass: class BreadcrumbClass extends React.PureComponent { render() { return Class; } @@ -457,6 +462,8 @@ describe('use-react-router-breadcrumbs', () => { }, ]; + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore arbitrary prop is not expected, but should not error renderer({ pathname: '/one', routes }); expect(getByTextContent('Home / foobar')).toBeTruthy(); }); diff --git a/src/index.tsx b/src/index.tsx index b974a20..d154b70 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -23,15 +23,23 @@ import { useLocation, RouteObject, Params, - PathPattern, Route, PathRouteProps, LayoutRouteProps, IndexRouteProps, -} from 'react-router'; +} from 'react-router-dom'; type Location = ReturnType; +/** + * This type interface is copied in directly from react-router (react-router-dom does not export it) + */ +interface PathPattern { + path: Path; + caseSensitive?: boolean; + end?: boolean; +} + export interface Options { disableDefaults?: boolean; excludePaths?: string[]; @@ -61,6 +69,7 @@ export interface BreadcrumbComponentProps { key: string; match: BreadcrumbMatch; location: Location; + [x: string]: unknown; } export type BreadcrumbComponentType = diff --git a/yarn.lock b/yarn.lock index 3c51a59..de0cf7c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6897,7 +6897,20 @@ __metadata: languageName: node linkType: hard -"react-router@npm:^6.3.0": +"react-router-dom@npm:^6.3.0": + version: 6.3.0 + resolution: "react-router-dom@npm:6.3.0" + dependencies: + history: ^5.2.0 + react-router: 6.3.0 + peerDependencies: + react: ">=16.8" + react-dom: ">=16.8" + checksum: 77603a654f8a8dc7f65535a2e5917a65f8d9ffcb06546d28dd297e52adcc4b8a84377e0115f48dca330b080af2da3e78f29d590c89307094d36927d2b1751ec3 + languageName: node + linkType: hard + +"react-router@npm:6.3.0": version: 6.3.0 resolution: "react-router@npm:6.3.0" dependencies: @@ -8116,14 +8129,14 @@ __metadata: pinst: ^3.0.0 react: ^18.2.0 react-dom: ^18.2.0 - react-router: ^6.3.0 + react-router-dom: ^6.3.0 rollup: ^2.79.0 rollup-plugin-size: ^0.2.2 rollup-plugin-terser: ^7.0.2 typescript: ^4.8.3 peerDependencies: react: ">=16.8" - react-router: ">=6.0.0" + react-router-dom: ">=6.0.0" languageName: unknown linkType: soft