Support react 17 and update dependencies

.eslintrc.json

@@ -10,6 +10,9 @@
     "useJSXTextNode": true
   },
   "settings": {
+    "react": {
+      "version": "detect"
+    },
     "import/resolver": {
       "node": {
         "extensions": [
@@ -36,6 +39,8 @@
   ],
   "rules": {
     "@typescript-eslint/no-explicit-any": "off",
+    "no-use-before-define": [0],
+    "@typescript-eslint/no-use-before-define": [1],
     "prettier/prettier": "error",
     "import/extensions": "off",
     "import/prefer-default-export": "off",

package.json

@@ -33,53 +33,49 @@
     "lint": "eslint -c .eslintrc.json --ext ts,tsx src"
   },
   "peerDependencies": {
-    "react": ">=16.8.0",
-    "react-dom": ">=16.8.0",
-    "ts-graphviz": "^0.13.1"
+    "react": ">=16.8.0 || >=17"
   },
   "dependencies": {
     "prop-types": "^15.7.2",
-    "react-reconciler": "^0.25.1"
+    "react-dom": "^17.0.1",
+    "react-reconciler": "^0.26.1",
+    "ts-graphviz": "^0.14.0"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^15.0.0",
-    "@testing-library/jest-dom": "^5.5.0",
-    "@testing-library/react": "^10.0.4",
-    "@testing-library/react-hooks": "^3.2.1",
+    "@rollup/plugin-commonjs": "^17.0.0",
+    "@testing-library/jest-dom": "^5.11.8",
+    "@testing-library/react": "^11.2.3",
+    "@testing-library/react-hooks": "^4.0.0",
     "@types/fs-extra": "^9.0.1",
     "@types/glob": "^7.1.3",
     "@types/prop-types": "^15.7.3",
-    "@types/react": "^16.9.17",
-    "@types/react-dom": "^16.9.4",
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
     "@types/react-reconciler": "^0.18.0",
-    "@typescript-eslint/eslint-plugin": "^2.28.0",
-    "@typescript-eslint/parser": "^2.28.0",
-    "babel-loader": "^8.1.0",
-    "eslint": "^6.8.0",
-    "eslint-config-airbnb": "^18.1.0",
-    "eslint-config-prettier": "^6.10.1",
-    "eslint-plugin-import": "^2.20.2",
-    "eslint-plugin-jest": "^23.8.2",
-    "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-prettier": "^3.1.3",
-    "eslint-plugin-react": "^7.19.0",
-    "eslint-plugin-react-hooks": "^4.0.0",
-    "fs-extra": "^9.0.0",
+    "@typescript-eslint/eslint-plugin": "^4.12.0",
+    "@typescript-eslint/parser": "^4.12.0",
+    "eslint": "^7.17.0",
+    "eslint-config-airbnb": "^18.2.1",
+    "eslint-config-prettier": "^7.1.0",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jest": "^24.1.3",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-prettier": "^3.3.1",
+    "eslint-plugin-react": "^ 7.22.0",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "fs-extra": "^9.0.1",
     "glob": "^7.1.6",
-    "jest": "^25.3.0",
-    "jest-graphviz": "^0.3.1",
-    "prettier": "^2.0.5",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "react-test-renderer": "^16.13.1",
-    "rollup": "^2.6.1",
-    "rollup-plugin-dts": "^1.4.9",
-    "rollup-plugin-terser": "^7.0.0",
-    "rollup-plugin-typescript2": "^0.27.0",
-    "ts-graphviz": "^0.13.1",
-    "ts-jest": "^25.3.1",
-    "ts-loader": "^8.0.3",
-    "ts-node": "^8.9.1",
-    "typescript": "^3.8.2"
+    "jest": "^26.6.3",
+    "jest-graphviz": "^0.4.0",
+    "prettier": "^2.2.1",
+    "react": "^17.0.1",
+    "react-test-renderer": "^17.0.1",
+    "rollup": "^2.36.1",
+    "rollup-plugin-dts": "^2.0.1",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-typescript2": "^0.29.0",
+    "ts-jest": "^26.4.4",
+    "ts-node": "^9.1.1",
+    "typescript": "^4.1.3"
   }
 }

src/components/HtmlLike.ts

@@ -27,7 +27,7 @@ export type TableProps = {
   WIDTH?: AttributesValue; // "value"
 };
 
-type NoAttributes = {};
+type NoAttributes = Record<string, unknown>;
 
 export type TrProps = NoAttributes;
 

src/components/__tests__/utils/renderExpectToThrow.tsx

@@ -3,10 +3,10 @@
 import React, { Component, ReactElement } from 'react';
 import { render } from '../../../renderer/render';
 
-export function renderExpectToThrow(element: ReactElement, expectedError: string) {
+export function renderExpectToThrow(element: ReactElement, expectedError: string): void {
   const errors: Error[] = [];
-  class ErrorBoundary extends Component<{}, { hasError: boolean }> {
-    constructor(props: {}) {
+  class ErrorBoundary extends Component<Record<string, unknown>, { hasError: boolean }> {
+    constructor(props: Record<string, unknown>) {
       super(props);
       this.state = { hasError: false };
     }

src/hooks/__tests__/__snapshots__/use-rendered-id.spec.tsx.snap

@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`useRenderedID  1`] = `"hoge"`;
+exports[`useRenderedID case 1`] = `"hoge"`;
 
-exports[`useRenderedID  2`] = `"<<b>bold</b>>"`;
+exports[`useRenderedID case 2`] = `"<<b>bold</b>>"`;
 
-exports[`useRenderedID  3`] = `"<<B>bold</B>>"`;
+exports[`useRenderedID case 3`] = `"<<B>bold</B>>"`;
 
-exports[`useRenderedID  4`] = `"<<TABLE BORDER=\\"0\\" CELLBORDER=\\"1\\" CELLSPACING=\\"0\\"><TR><TD>left</TD><TD PORT=\\"m\\">middle</TD><TD PORT=\\"r\\">right</TD></TR></TABLE>>"`;
+exports[`useRenderedID case 4`] = `"<<TABLE BORDER=\\"0\\" CELLBORDER=\\"1\\" CELLSPACING=\\"0\\"><TR><TD>left</TD><TD PORT=\\"m\\">middle</TD><TD PORT=\\"r\\">right</TD></TR></TABLE>>"`;

src/hooks/__tests__/use-rendered-id.spec.tsx

@@ -16,7 +16,7 @@ describe('useRenderedID', () => {
         <DOT.TD PORT="r">right</DOT.TD>
       </DOT.TR>
     </DOT.TABLE>,
-  ])('', (id) => {
+  ])('case', (id) => {
     const { result } = renderHook(() => useRenderedID(id), {
       wrapper: context(),
     });

src/renderer/reconciler.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 /* eslint-disable class-methods-use-this */
 /* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable class-methods-use-this */
@@ -6,7 +7,7 @@ import ReactReconciler from 'react-reconciler';
 
 type Type = FC;
 type Props = any;
-type Container = {};
+type Container = Record<string, never>;
 
 type Instance = any;
 type TextInstance = any;