chore: remove support for rr 4, dependencies, and build improvements (#122)

* chore: remove support for rr 4, dependencies, and build improvements

* fix: small improvement to UMD build

* chore: remove unnecessary dependency

Co-authored-by: Justin Schrader <jschrader@newrelic.com>

Author: icd2k3

.yarn/releases/yarn-berry.cjs renamed to .yarn/releases/yarn-2.4.2.cjs

@@ -4,4 +4,4 @@ plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
     spec: "@yarnpkg/plugin-interactive-tools"
 
-yarnPath: .yarn/releases/yarn-berry.cjs
+yarnPath: .yarn/releases/yarn-2.4.2.cjs

.yarnrc.yml

@@ -9,7 +9,7 @@
 </p>
 
 <p align="center">
-  A small (~1.6kb gzip), flexible, <a href="https://reactjs.org/docs/higher-order-components.html">higher order component</a> for rendering breadcrumbs with <a href="https://github.com/ReactTraining/react-router">react-router</a> 4 & 5
+  A small (~1.3kb compressed & gzipped), flexible, <a href="https://reactjs.org/docs/higher-order-components.html">higher order component</a> for rendering breadcrumbs with <a href="https://github.com/ReactTraining/react-router">react-router</a> 5
 </p>
 
 <hr/>
@@ -75,9 +75,9 @@ Start seeing generated breadcrumbs right away with this simple example ([codesan
 import withBreadcrumbs from 'react-router-breadcrumbs-hoc';
 
 const Breadcrumbs = ({ breadcrumbs }) => (
-  <React.Fragment>
+  <>
     {breadcrumbs.map(({ breadcrumb }) => breadcrumb)}
-  </React.Fragment>
+  </>
 )
 
 export default withBreadcrumbs()(Breadcrumbs);

README.md

@@ -9,6 +9,6 @@ module.exports = function(api) {
       '@babel/preset-react',
       '@babel/preset-typescript'
     ],
-    plugins: [],
+    plugins: ['@babel/plugin-transform-runtime'],
   };
 };

babel.config.js

@@ -1,6 +1,6 @@
 {
   "name": "react-router-breadcrumbs-hoc",
-  "version": "3.4.0",
+  "version": "4.0.0",
   "description": "small, flexible, higher order component for rendering breadcrumbs with react-router 4.x",
   "repository": "icd2k3/react-router-breadcrumbs-hoc",
   "main": "dist/cjs/index.js",
@@ -21,49 +21,46 @@
   "license": "MIT",
   "peerDependencies": {
     "react": ">=16.8",
-    "react-router": ">=4"
+    "react-router": ">=5"
   },
   "devDependencies": {
     "@babel/cli": "^7.14.3",
     "@babel/core": "^7.14.3",
-    "@babel/preset-env": "^7.14.2",
+    "@babel/plugin-transform-runtime": "^7.14.3",
+    "@babel/preset-env": "^7.14.4",
     "@babel/preset-react": "^7.13.13",
     "@babel/preset-typescript": "^7.13.0",
     "@commitlint/cli": "^12.1.4",
     "@commitlint/config-conventional": "^12.1.4",
-    "@rollup/plugin-commonjs": "^19.0.0",
-    "@rollup/plugin-node-resolve": "^13.0.0",
-    "@types/node": "^15.6.1",
-    "@types/react": "^17.0.8",
-    "@types/react-dom": "^17.0.5",
-    "@types/react-router": "^5.1.14",
-    "@typescript-eslint/eslint-plugin": "^4.25.0",
-    "@typescript-eslint/parser": "^4.25.0",
+    "@rollup/plugin-babel": "^5.3.0",
+    "@rollup/plugin-typescript": "^8.2.1",
+    "@types/react": "^17.0.9",
+    "@types/react-dom": "^17.0.6",
+    "@types/react-router": "^5.1.15",
+    "@typescript-eslint/eslint-plugin": "^4.26.1",
+    "@typescript-eslint/parser": "^4.26.1",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.1",
     "babel-eslint": "^10.1.0",
-    "babel-jest": "^27.0.1",
     "coveralls": "^3.1.0",
     "enzyme": "^3.11.0",
-    "eslint": "^7.27.0",
+    "eslint": "^7.28.0",
     "eslint-config-airbnb": "^18.2.1",
-    "eslint-plugin-import": "^2.23.3",
+    "eslint-plugin-import": "^2.23.4",
     "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-react": "^7.23.2",
-    "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint-plugin-react": "^7.24.0",
     "husky": "^6.0.0",
-    "jest": "^27.0.1",
+    "jest": "^27.0.4",
     "jsdom": "^16.6.0",
     "jsdom-global": "^3.0.2",
     "pinst": "^2.1.6",
     "prop-types": "^15.7.2",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-router": "^5.2.0",
-    "rollup": "^2.50.1",
-    "rollup-plugin-babel": "^4.4.0",
+    "rollup": "^2.51.1",
+    "rollup-plugin-size": "^0.2.2",
     "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-typescript2": "^0.30.0",
-    "typescript": "4.1.5"
+    "typescript": "4.3.2"
   },
   "keywords": [
     "react",

package.json

@@ -1,57 +1,51 @@
-import babel from 'rollup-plugin-babel';
-import commonjs from '@rollup/plugin-commonjs';
-import resolve from '@rollup/plugin-node-resolve';
-import typescript from 'rollup-plugin-typescript2';
-import ts from 'typescript';
+import babel from '@rollup/plugin-babel';
+import typescript from '@rollup/plugin-typescript';
+import size from 'rollup-plugin-size';
 import { terser } from 'rollup-plugin-terser';
 
 const pkg = require('./package.json');
 
-const external = Object.keys(pkg.peerDependencies);
+const external = Object.keys(pkg.peerDependencies).concat(/@babel\/runtime/);
 
 const extensions = ['.js', '.tsx'];
 
-const plugins = [
-  typescript({
-    useTsconfigDeclarationDir: true,
-    tsconfigOverride: {
-      typescript: ts,
-      compilerOptions: {
-        module: 'es2015',
-      },
-    },
-  }),
+const sharedPlugins = [
+  typescript(),
   babel({
+    babelHelpers: 'runtime',
     exclude: 'node_modules/**',
     extensions,
   }),
-  resolve({
-    mainFields: ['module', 'main', 'umd'],
-    extensions,
-  }),
+  size(),
 ];
 
 const formats = [
-  { format: 'cjs', file: pkg.main, plugins: plugins.concat([commonjs(), terser()]) },
-  { format: 'umd', file: pkg.umd, plugins: plugins.concat([commonjs(), terser()]) },
-  { format: 'es', file: pkg.module, plugins },
+  { format: 'umd', file: pkg.umd, plugins: sharedPlugins.concat([terser({ format: { comments: false } })]) },
+  { format: 'cjs', file: pkg.main, plugins: sharedPlugins },
+  { format: 'es', file: pkg.module, plugins: sharedPlugins },
 ];
 
 const globals = {
   react: 'React',
   'react-router': 'ReactRouter',
 };
 
-export default formats.map((item) => ({
+export default formats.map(({ plugins, file, format }) => ({
   input: 'src/index.tsx',
-  plugins: item.plugins,
+  plugins,
   external,
   output: {
     exports: 'named',
-    file: item.file,
-    format: item.format,
+    file,
+    format,
     name: 'react-router-breadcrumbs-hoc',
-    globals,
-    sourcemap: true,
+    globals: format !== 'umd'
+      ? globals
+      : {
+        ...globals,
+        '@babel/runtime/helpers/toConsumableArray': '_toConsumableArray',
+        '@babel/runtime/helpers/defineProperty': '_defineProperty',
+        '@babel/runtime/helpers/objectWithoutProperties': '_objectWithoutProperties',
+      },
   },
 }));

rollup.config.js

@@ -19,7 +19,7 @@
  */
 
 import React, { createElement } from 'react';
-import { useLocation, matchPath, withRouter } from 'react-router';
+import { useLocation, matchPath } from 'react-router';
 
 const DEFAULT_MATCH_OPTIONS = { exact: true };
 const NO_BREADCRUMB = 'NO_BREADCRUMB';
@@ -269,48 +269,30 @@ const flattenRoutes = (routes: BreadcrumbsRoute[]) => (routes)
   }, [] as BreadcrumbsRoute[]);
 
 /**
- * This is the main default HOC wrapper component. There is some
- * logic in here for legacy react-router v4 support
+ * Accepts optional routes array and options and returns an array of
+ * breadcrumbs.
+ *
+ * @example
+ * import withBreadcrumbs from 'react-router-breadcrumbs-hoc';
+ * const Breadcrumbs = ({ breadcrumbs }) => (
+ *  <>{breadcrumbs.map(({ breadcrumb }) => breadcrumb)}</>
+ * )
+ * export default withBreadcrumbs()(Breadcrumbs);
  */
-export default (
+const withBreadcrumbs = (
   routes?: BreadcrumbsRoute[],
   options?: Options,
 ) => (
   Component: React.ComponentType<{
     breadcrumbs: Array<React.ReactNode | string>
   }>,
-) => {
-  const sharedBreadcrumbProps = {
+) => (props: any) => React.createElement(Component, {
+  ...props,
+  breadcrumbs: getBreadcrumbs({
     options,
     routes: flattenRoutes(routes || []),
-  };
-
-  // use the location hook if available (5.x)
-  /* istanbul ignore else */
-  if (useLocation) {
-    return (props: any) => React.createElement(Component, {
-      ...props,
-      breadcrumbs: getBreadcrumbs({
-        ...sharedBreadcrumbProps,
-        location: useLocation(),
-      }),
-    });
-  }
+    location: useLocation(),
+  }),
+});
 
-  // fallback to withRouter for older react-router versions (4.x)
-  /* istanbul ignore next */
-  return withRouter(
-    (props: { location: Location }) => {
-      // eslint-disable-next-line no-console
-      console.warn('[react-router-breadcrumbs-hoc]: react-router v4 support will be deprecated in the next major release. Please consider upgrading react-router and react-router-dom to >= 5.1.0');
-
-      return createElement(Component, {
-        ...props,
-        breadcrumbs: getBreadcrumbs({
-          ...sharedBreadcrumbProps,
-          location: props.location,
-        }),
-      });
-    },
-  );
-};
+export default withBreadcrumbs;

src/index.tsx

@@ -1,25 +1,14 @@
 {
   "compilerOptions": {
-    "allowJs": true,
-    "checkJs": true,
     "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
     "jsx": "react",
-    "lib": ["es2015", "dom"],
-    "module": "commonjs",
+    "module": "esnext",
     "moduleResolution": "node",
-    "noEmit": true,
-    "noImplicitAny": true,
-    "noImplicitReturns": true,
-    "noImplicitThis": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "outDir": "./dist",
-    "strictFunctionTypes": true,
-    "strictNullChecks": true,
-    "strictPropertyInitialization": true,
-    "target": "es5",
-    "declaration": true,
-    "declarationDir": "./dist"
+    "outDir": "dist",
+    "removeComments": true,
+    "strict": true,
+    "target": "es6"
   },
   "files": [
     "src/index.tsx"