refactor: switch to auto generated type definitions (#110)

* refactor: switch to auto generated type definitions

* chore: switch to latest LTS version of node

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

Author: icd2k3

.github/workflows/nodejs.yml

@@ -16,7 +16,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [12.16.1]
+        node-version: [12.18.0]
 
     steps:
     - uses: actions/checkout@v2

.nvmrc

@@ -1 +1 @@
-v12.16.1
+v12.18.0

package.json

@@ -1,20 +1,18 @@
 {
   "name": "react-router-breadcrumbs-hoc",
-  "version": "3.2.10",
+  "version": "3.3.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",
   "module": "dist/es/index.js",
   "umd": "dist/umd/index.js",
-  "types": "types/react-router-breadcrumbs-hoc/index.d.ts",
+  "types": "dist/index.d.ts",
   "scripts": {
     "prepublishOnly": "npm run build",
     "build": "rollup -c",
     "test": "jest",
     "test-build": "sh ./scripts/test-build.sh",
-    "types": "yarn type-src && yarn type-descriptions",
-    "type-src": "tsc -p tsconfig.json",
-    "type-descriptions": "tsc -p types/react-router-breadcrumbs-hoc",
+    "types": "tsc -p tsconfig.json",
     "lint": "eslint ./src/**"
   },
   "husky": {
@@ -66,6 +64,7 @@
     "react-router": "^5.1.2",
     "rollup": "^2.1.0",
     "rollup-plugin-babel": "^4.4.0",
+    "rollup-plugin-typescript2": "^0.27.1",
     "rollup-plugin-uglify": "^6.0.2",
     "typescript": "^3.8.3"
   },

rollup.config.js

@@ -1,6 +1,8 @@
 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 { uglify } from 'rollup-plugin-uglify';
 
 const pkg = require('./package.json');
@@ -10,6 +12,15 @@ const external = Object.keys(pkg.peerDependencies);
 const extensions = ['.js', '.tsx'];
 
 const plugins = [
+  typescript({
+    useTsconfigDeclarationDir: true,
+    tsconfigOverride: {
+      typescript: ts,
+      compilerOptions: {
+        module: 'es2015',
+      },
+    },
+  }),
   babel({
     exclude: 'node_modules/**',
     extensions,

src/index.tsx

@@ -21,12 +21,33 @@
 import React, { createElement } from 'react';
 import { useLocation, matchPath, withRouter } from 'react-router';
 
-// eslint-disable-next-line import/extensions, import/no-unresolved, no-unused-vars
-import * as types from '../types/react-router-breadcrumbs-hoc/index';
-
 const DEFAULT_MATCH_OPTIONS = { exact: true };
 const NO_BREADCRUMB = 'NO_BREADCRUMB';
 
+export interface Options {
+  currentSection?: string;
+  disableDefaults?: boolean;
+  excludePaths?: string[];
+  pathSection?: string;
+}
+
+export interface Location {
+  pathname: string
+}
+
+export interface MatchOptions {
+  exact?: boolean;
+  strict?: boolean;
+  sensitive?: boolean;
+}
+
+export interface BreadcrumbsRoute {
+  path: string;
+  breadcrumb?: React.ComponentType | React.ElementType | string;
+  matchOptions?: MatchOptions;
+  routes?: BreadcrumbsRoute[];
+}
+
 /**
  * This method was "borrowed" from https://stackoverflow.com/a/28339742
  * we used to use the humanize-string package, but it added a lot of bundle
@@ -49,10 +70,10 @@ const render = ({
 }: {
   breadcrumb: React.ComponentType | string,
   match: { url: string },
-  location: types.Location
+  location: Location
 }): {
   match: { url: string },
-  location: types.Location,
+  location: Location,
   key: string,
   breadcrumb: React.ReactNode
 } => {
@@ -75,7 +96,7 @@ const getDefaultBreadcrumb = ({
   pathSection,
 }: {
   currentSection: string,
-  location: types.Location,
+  location: Location,
   pathSection: string,
 }) => {
   const match = matchPath(pathSection, { ...DEFAULT_MATCH_OPTIONS, path: pathSection })
@@ -106,7 +127,7 @@ const getBreadcrumbMatch = ({
   excludePaths?: string[],
   location: { pathname: string },
   pathSection: string,
-  routes: types.BreadcrumbsRoute[]
+  routes: BreadcrumbsRoute[]
 }) => {
   let breadcrumb;
 
@@ -189,9 +210,9 @@ export const getBreadcrumbs = (
     location,
     options = {},
   }: {
-    routes: types.BreadcrumbsRoute[],
-    location: types.Location,
-    options?: types.Options
+    routes: BreadcrumbsRoute[],
+    location: Location,
+    options?: Options
   },
 ): Array<React.ReactNode | string> => {
   const matches:Array<React.ReactNode | string> = [];
@@ -238,21 +259,21 @@ export const getBreadcrumbs = (
  * Takes a route array and recursively flattens it IF there are
  * nested routes in the config.
 */
-const flattenRoutes = (routes: types.BreadcrumbsRoute[]) => (routes)
-  .reduce((arr, route: types.BreadcrumbsRoute): types.BreadcrumbsRoute[] => {
+const flattenRoutes = (routes: BreadcrumbsRoute[]) => (routes)
+  .reduce((arr, route: BreadcrumbsRoute): BreadcrumbsRoute[] => {
     if (route.routes) {
       return arr.concat([route, ...flattenRoutes(route.routes)]);
     }
     return arr.concat(route);
-  }, [] as types.BreadcrumbsRoute[]);
+  }, [] as BreadcrumbsRoute[]);
 
 /**
  * This is the main default HOC wrapper component. There is some
  * logic in here for legacy react-router v4 support
  */
 export default (
-  routes?: types.BreadcrumbsRoute[],
-  options?: types.Options,
+  routes?: BreadcrumbsRoute[],
+  options?: Options,
 ) => (
   Component: React.ComponentType<{
     breadcrumbs: Array<React.ReactNode | string>
@@ -278,7 +299,7 @@ export default (
   // fallback to withRouter for older react-router versions (4.x)
   /* istanbul ignore next */
   return withRouter(
-    (props: { location: types.Location }) => {
+    (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');
 

tsconfig.json

@@ -17,7 +17,9 @@
     "strictFunctionTypes": true,
     "strictNullChecks": true,
     "strictPropertyInitialization": true,
-    "target": "es5"
+    "target": "es5",
+    "declaration": true,
+    "declarationDir": "./dist"
   },
   "files": [
     "src/index.tsx"