build: Migrate from Microbundle to TSDX (#19)

* Switch from Microbundle to TSDX

* Update eslint, jest, and other configs and scripts to work with TSDX

* Fix code coverage reporting

.eslintignore

@@ -0,0 +1,11 @@
+*.log*
+.DS_Store
+
+.idea/
+.vscode/
+build/
+dist/
+coverage/
+coverage-local/
+node_modules/
+storybook-static/

.eslintrc.js

@@ -1,26 +1,13 @@
-/* eslint-env node */
-
 module.exports = {
   root: true,
-  extends: [
-    'eslint:recommended',
-    'plugin:react/recommended',
-    'plugin:@typescript-eslint/eslint-recommended',
-    'plugin:@typescript-eslint/recommended',
-    'prettier',
-    'prettier/@typescript-eslint',
-  ],
+  extends: ['react-app', 'prettier/@typescript-eslint', 'plugin:prettier/recommended'],
 
-  parser: '@typescript-eslint/parser',
-  parserOptions: {
-    ecmaVersion: 2018,
-    sourceType: 'module',
-    ecmaFeatures: {
-      jsx: true,
+  settings: {
+    react: {
+      version: 'detect',
     },
   },
 
-  rules: {},
   ignorePatterns: [
     'build/',
     'dist/',
@@ -29,25 +16,4 @@ module.exports = {
     'node_modules/',
     'storybook-static/',
   ],
-  overrides: [
-    {
-      files: ['*.js'],
-      rules: {
-        '@typescript-eslint/ban-ts-ignore': 'off',
-        '@typescript-eslint/explicit-function-return-type': 'off',
-        '@typescript-eslint/no-var-requires': 'off',
-      },
-    },
-  ],
-  settings: {
-    react: {
-      version: 'detect',
-    },
-    propWrapperFunctions: [
-      // The names of any function used to wrap propTypes, e.g. `forbidExtraProps`. If this isn't set, any propTypes wrapped in a function will be skipped.
-      'forbidExtraProps',
-      { property: 'freeze', object: 'Object' },
-    ],
-    linkComponents: [{ name: 'Link', linkAttribute: 'to' }],
-  },
 };

.gitattributes

@@ -0,0 +1 @@
+* text=auto

.gitignore

@@ -1,11 +1,25 @@
-*.log*
-.DS_Store
+# dependencies
+/.pnp
+/node_modules
+/packages/*/node_modules
+.pnp.js
+
+# outputs
+/coverage
+/storybook-static
+/packages/*/coverage-local
+/packages/*/dist
 
+# misc
 .idea/
 .vscode/
-build/
-dist/
-coverage/
-coverage-local/
-node_modules/
-storybook-static/
+
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

package.json

@@ -36,63 +36,43 @@
     "demo:deploy": "gh-pages -d ./storybook-static",
     "format": "prettier --write .",
     "format:verify": "prettier --list-different .",
-    "lint": "eslint . --max-warnings 0",
+    "lint": "tsdx lint . --max-warnings 0",
     "storybook": "start-storybook -p 6006",
     "storybook:clean": "rimraf ./storybook-static",
     "build-storybook": "build-storybook",
     "release:version": "yarn lerna version --no-changelog --no-push --no-git-tag-version ",
     "release:tag": "yarn lerna version --no-changelog --no-push --sign-git-commit ",
     "release:postpublish": "standard-version --commit-all --sign --skip.changelog --release-as ",
     "test:clean": "rimraf ./coverage",
-    "test:nowatch": "jest --coverage",
-    "test:report": "cross-env CI=true jest --coverage && coveralls < ./coverage/lcov.info",
-    "test:watch": "jest --coverage --watch",
-    "types": "tsc --noEmit --p tsconfig.json --jsx react"
+    "test:nowatch": "tsdx test --coverage",
+    "test:report": "tsdx test --coverage && coveralls < ./coverage/lcov.info",
+    "test:watch": "tsdx test --coverage --watch",
+    "types": "tsc --p tsconfig.json"
   },
   "dependencies": {},
   "devDependencies": {
     "@babel/core": "7.11.6",
-    "@babel/preset-react": "7.10.4",
-    "@babel/preset-typescript": "7.10.4",
     "@storybook/addon-actions": "6.0.22",
     "@storybook/addon-essentials": "6.0.22",
     "@storybook/addon-links": "6.0.22",
     "@storybook/react": "6.0.22",
     "@testing-library/jest-dom": "5.11.4",
     "@testing-library/react": "11.0.4",
+    "@types/react": "16.9.50",
     "@types/react-dom": "16.9.8",
     "@types/react-is": "16.7.1",
     "@types/react-redux": "7.1.9",
     "@types/react-router": "5.1.8",
     "@types/react-router-dom": "5.1.5",
-    "@typescript-eslint/eslint-plugin": "4.3.0",
-    "@typescript-eslint/parser": "4.3.0",
     "babel-loader": "8.1.0",
     "coveralls": "3.1.0",
-    "cross-env": "7.0.2",
-    "eslint": "7.10.0",
-    "eslint-config-prettier": "6.12.0",
-    "eslint-plugin-prettier": "3.1.4",
-    "eslint-plugin-react": "7.21.2",
-    "fork-ts-checker-webpack-plugin": "5.2.0",
     "gh-pages": "3.1.0",
     "husky": "4.3.0",
-    "jest": "26.4.2",
     "lerna": "3.22.1",
     "lint-staged": "10.4.0",
-    "microbundle": "0.12.4",
-    "prettier": "2.1.2",
-    "react": "16.13.1",
-    "react-docgen-typescript-loader": "3.7.2",
-    "react-dom": "16.13.1",
-    "react-is": "16.13.1",
-    "react-test-renderer": "16.13.1",
-    "rimraf": "3.0.2",
     "standard-version": "9.0.0",
-    "ts-jest": "26.4.1",
-    "ts-loader": "8.0.4",
-    "tslib": "2.0.1",
-    "typescript": "4.0.3",
+    "tsdx": "0.14.0",
+    "typescript": "3.9.7",
     "yarn-or-npm": "3.0.1"
   },
   "lint-staged": {
@@ -102,14 +82,22 @@
   },
   "husky": {
     "hooks": {
-      "pre-commit": "lint-staged"
+      "pre-commit": "lint-staged",
+      "pre-push": "yon run dev:readonly"
     }
   },
   "standard-version": {
     "scripts": {
-      "postchangelog": "yon format"
+      "postchangelog": "yon run format"
     }
   },
+  "jest": {
+    "collectCoverageFrom": [
+      "packages/*/src/**/*.{js,jsx,ts,tsx}",
+      "!packages/*/src/(index|serviceWorker|setupTests).*",
+      "!packages/*/src/**/*.(ignored|stories|test).{js,jsx,ts,tsx}"
+    ]
+  },
   "workspaces": [
     "packages/*"
   ]

packages/dev-helpers/package.json

@@ -22,7 +22,9 @@
     "*.md"
   ],
   "source": "src/index.ts",
-  "main": "dist/react-hibernate-dev-helpers.js",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "jsnext:main": "dist/index.esm.js",
   "types": "dist/index.d.ts",
   "sideEffects": false,
   "scripts": {
@@ -40,17 +42,17 @@
     "all": "yarn run clean && yarn run dev && yarn run test:nowatch && yarn run build",
     "all:readonly": "yarn run dev:readonly && yarn run test:nowatch",
     "____ INDIVIDUAL COMMANDS ___________________________________________": "",
-    "build": "microbundle build -f cjs --jsx React.createElement",
+    "build": "tsdx build",
     "build:clean": "rimraf ./dist",
-    "build:watch": "microbundle watch -f cjs --jsx React.createElement",
+    "build:watch": "tsdx watch",
     "format": "prettier --write .",
     "format:verify": "prettier --list-different .",
-    "lint": "eslint . --max-warnings 0",
+    "lint": "tsdx lint . --max-warnings 0",
     "release:changelog": "standard-version --skip.commit --skip.tag --release-as ",
-    "test:clean": "rimraf ./coverage-local",
-    "test:nowatch": "echo \"@TODO: tests for dev-helpers\"",
-    "test:watch": "echo \"@TODO: tests for dev-helpers\"",
-    "types": "tsc --noEmit --p tsconfig.json --jsx react"
+    "test:clean": "rimraf ./coverage",
+    "test:nowatch": "tsdx test --coverage --passWithNoTests",
+    "test:watch": "tsdx test --coverage --watch --passWithNoTests",
+    "types": "tsc --p tsconfig.json"
   },
   "dependencies": {
     "@material-ui/core": "^4.11.0",
@@ -66,5 +68,8 @@
   "peerDependencies": {
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
+  },
+  "jest": {
+    "coverageDirectory": "coverage-local"
   }
 }

packages/dev-helpers/src/components/DemoContainer.tsx

@@ -48,6 +48,7 @@ const DemoContainer: React.FC<DemoContainerProps> = (props: DemoContainerProps):
         setTimeout(() => onUnmount(titleWithMyInstanceNum));
       }
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   React.useEffect(() => {
@@ -62,7 +63,10 @@ const DemoContainer: React.FC<DemoContainerProps> = (props: DemoContainerProps):
   // Global state, if appropriate
   let reduxContent;
   if (withRedux) {
+    // @TODO: Split this into two components (with/without Redux) so that we don't call things conditionally
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     const state = useSelector(selectEntireState);
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     const dispatch = useDispatch();
 
     reduxContent = (

packages/dev-helpers/src/jest/renderWithRouterContext.tsx

@@ -7,13 +7,9 @@ const renderWithRouterContext = (
   AppRoot: ReactElement | ComponentType,
   routerProps: MemoryRouterProps = {},
 ): ReturnType<typeof render> => {
-  const renderResult = render(
+  return render(
     <MemoryRouter {...routerProps}>{isElement(AppRoot) ? AppRoot : <AppRoot />}</MemoryRouter>,
   );
-  return {
-    ...renderResult,
-    history,
-  };
 };
 
 export default renderWithRouterContext;

packages/dev-helpers/src/redux/reduxDecorator.tsx

@@ -4,6 +4,7 @@ import { Provider } from 'react-redux';
 import { createDevHelperStore } from './store';
 
 const reduxDecorator = (storyFn: () => ReactNode): ReactNode => {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
   const devHelperStore = useMemo(createDevHelperStore, []);
 
   return <Provider store={devHelperStore}>{storyFn()}</Provider>;

packages/react-hibernate/package.json

@@ -43,17 +43,17 @@
     "all": "yarn run clean && yarn run dev && yarn run test:nowatch && yarn run build",
     "all:readonly": "yarn run dev:readonly && yarn run test:nowatch",
     "____ INDIVIDUAL COMMANDS ___________________________________________": "",
-    "build": "microbundle build --jsx React.createElement",
+    "build": "tsdx build",
     "build:clean": "rimraf ./dist",
-    "build:watch": "microbundle watch --jsx React.createElement",
+    "build:watch": "tsdx watch",
     "format": "prettier --write .",
     "format:verify": "prettier --list-different .",
-    "lint": "eslint . --max-warnings 0",
+    "lint": "tsdx lint . --max-warnings 0",
     "release:changelog": "standard-version --skip.commit --skip.tag --release-as ",
-    "test:clean": "rimraf ./coverage-local",
-    "test:nowatch": "echo \"@TODO: tests for react-hibernate\"",
-    "test:watch": "echo \"@TODO: tests for react-hibernate\"",
-    "types": "tsc --noEmit --p tsconfig.json --jsx react"
+    "test:clean": "rimraf ./coverage",
+    "test:nowatch": "tsdx test --coverage --passWithNoTests",
+    "test:watch": "tsdx test --coverage --watch --passWithNoTests",
+    "types": "tsc --p tsconfig.json"
   },
   "dependencies": {
     "limited-cache": "^1.0.0",
@@ -67,5 +67,8 @@
   "peerDependencies": {
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
+  },
+  "jest": {
+    "coverageDirectory": "coverage-local"
   }
 }

packages/react-hibernate/src/HibernationProvider.tsx

@@ -53,6 +53,7 @@ const HibernationProvider: React.FC<HibernationProviderProps> = ({
       );
     }
 
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     const InitialWrapperComponentRef = useRef(WrapperComponent);
     if (WrapperComponent !== InitialWrapperComponentRef.current) {
       console.warn(
@@ -65,13 +66,14 @@ const HibernationProvider: React.FC<HibernationProviderProps> = ({
   const activeSubtreeCache = useRef<Record<HibernatingSubtreeId, HibernatingSubtreeEntry | null>>(
     Object.create(null),
   ).current;
-  const hibernatedSubtreeCache = useMemo(
+  const hibernatedSubtreeCache = useMemo(LimitedCache, []);
+  useMemo(
     () =>
-      LimitedCache({
+      hibernatedSubtreeCache.setOptions({
         maxCacheSize,
         maxCacheTime,
       }),
-    [],
+    [hibernatedSubtreeCache, maxCacheSize, maxCacheTime],
   );
 
   const [, setState] = React.useState(0);

packages/react-hibernate/src/useHibernatingEffect.ts

@@ -13,6 +13,7 @@ const useHibernatingEffect = (
       cleanupFnRef.current = callbackFn(isActive);
       return cleanupFnRef.current;
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     deps ? [...deps, isActive] : [isActive],
   );
 };

packages/react-hibernate/src/useHibernatingLayoutEffect.ts

@@ -13,6 +13,7 @@ const useHibernatingLayoutEffect = (
       cleanupFnRef.current = callbackFn(isActive);
       return cleanupFnRef.current;
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     deps ? [...deps, isActive] : [isActive],
   );
 };