From 64c7c4989cb6dceb8ac92e03d43070b8ff5d1043 Mon Sep 17 00:00:00 2001 From: Anton Gilgur Date: Thu, 16 Jun 2022 13:20:00 -0400 Subject: [PATCH] deps: update peerDeps to support React 18 without warnings (#89) - seems to work without any component modifications needed on React 18 - React 18 was mostly _deprecations_ and new features per the upgrade guide: https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html - React 18 has concurrent mode opt-in, which is technically breaking, but doesn't seem to effect this library (fortunately) - ensure tests pass with React 18 - update devDeps to React 18, react-dom 18, @types/react 18 - update devDeps to RTL 13 which supports React 18 - see previous commit for the migration from Enzyme to RTL since Enzyme never had official support for React 17, let alone React 18 - update example to use `createRoot` instead of `ReactDOM.render` - this is one of the opt-ins to React 18 mode, and doesn't seem to change anything about the example (just no warnings anymore) --- example/src/index.js | 4 +- package-lock.json | 142 ++++++++++++++++++++----------------------- package.json | 12 ++-- 3 files changed, 75 insertions(+), 83 deletions(-) diff --git a/example/src/index.js b/example/src/index.js index fbcfb8e..fef9101 100644 --- a/example/src/index.js +++ b/example/src/index.js @@ -1,5 +1,5 @@ import React, { Component } from 'react' -import ReactDOM from 'react-dom' +import { createRoot } from 'react-dom/client' import SignaturePad from '../../src/index.tsx' @@ -43,4 +43,4 @@ class App extends Component { } } -ReactDOM.render(, document.getElementById('container')) +createRoot(document.getElementById('container')).render() diff --git a/package-lock.json b/package-lock.json index d1fb5b1..8404c69 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,7 +11,7 @@ "dependencies": { "@babel/runtime": "^7.17.9", "@types/prop-types": "^15.7.3", - "@types/react": "^17.0.44", + "@types/react": "^18.0.12", "@types/signature_pad": "^2.3.0", "signature_pad": "^2.3.2", "trim-canvas": "^0.1.0" @@ -29,15 +29,15 @@ "@rollup/plugin-babel": "^5.3.1", "@rollup/plugin-commonjs": "^21.1.0", "@rollup/plugin-node-resolve": "^13.2.1", - "@testing-library/react": "^12.1.5", + "@testing-library/react": "^13.3.0", "canvas": "^2.9.1", "concurrently": "^7.1.0", "jest": "^27.5.1", "jest-config": "^27.5.1", "package-json-type": "^1.0.3", "parcel": "^2.4.1", - "react": "^17.0.2", - "react-dom": "^17.0.2", + "react": "^18.2.0", + "react-dom": "^18.2.0", "rollup": "^2.70.2", "rollup-plugin-node-externals": "^4.0.0", "rollup-plugin-terser": "^7.0.2", @@ -52,8 +52,8 @@ }, "peerDependencies": { "prop-types": "^15.5.8", - "react": "0.14 - 17", - "react-dom": "0.14 - 17" + "react": "0.14 - 18", + "react-dom": "0.14 - 18" } }, "node_modules/@agilgur5/changelog-maker": { @@ -4998,21 +4998,21 @@ } }, "node_modules/@testing-library/react": { - "version": "12.1.5", - "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-12.1.5.tgz", - "integrity": "sha512-OfTXCJUFgjd/digLUuPxa0+/3ZxsQmE7ub9kcbW/wi96Bh3o/p5vrETcBGfP17NWPGqeYYl5LTRpwyGoMC4ysg==", + "version": "13.3.0", + "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-13.3.0.tgz", + "integrity": "sha512-DB79aA426+deFgGSjnf5grczDPiL4taK3hFaa+M5q7q20Kcve9eQottOG5kZ74KEr55v0tU2CQormSSDK87zYQ==", "dev": true, "dependencies": { "@babel/runtime": "^7.12.5", - "@testing-library/dom": "^8.0.0", - "@types/react-dom": "<18.0.0" + "@testing-library/dom": "^8.5.0", + "@types/react-dom": "^18.0.0" }, "engines": { "node": ">=12" }, "peerDependencies": { - "react": "<18.0.0", - "react-dom": "<18.0.0" + "react": "^18.0.0", + "react-dom": "^18.0.0" } }, "node_modules/@tootallnate/once": { @@ -5179,9 +5179,9 @@ "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==" }, "node_modules/@types/react": { - "version": "17.0.44", - "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.44.tgz", - "integrity": "sha512-Ye0nlw09GeMp2Suh8qoOv0odfgCoowfM/9MG6WeRD60Gq9wS90bdkdRtYbRkNhXOpG4H+YXGvj4wOWhAC0LJ1g==", + "version": "18.0.12", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.12.tgz", + "integrity": "sha512-duF1OTASSBQtcigUvhuiTB1Ya3OvSy+xORCiEf20H0P0lzx+/KeVsA99U5UjLXSbyo1DRJDlLKqTeM1ngosqtg==", "dependencies": { "@types/prop-types": "*", "@types/scheduler": "*", @@ -5189,12 +5189,12 @@ } }, "node_modules/@types/react-dom": { - "version": "17.0.17", - "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.17.tgz", - "integrity": "sha512-VjnqEmqGnasQKV0CWLevqMTXBYG9GbwuE6x3VetERLh0cq2LTptFE73MrQi2S7GkKXCf2GgwItB/melLnxfnsg==", + "version": "18.0.5", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.5.tgz", + "integrity": "sha512-OWPWTUrY/NIrjsAPkAk1wW9LZeIjSvkXRhclsFO8CZcZGCOg2G0YZy4ft+rOyYxy8B7ui5iZzi9OkDebZ7/QSA==", "dev": true, "dependencies": { - "@types/react": "^17" + "@types/react": "*" } }, "node_modules/@types/resolve": { @@ -12310,40 +12310,28 @@ } }, "node_modules/react": { - "version": "17.0.2", - "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz", - "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==", + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", + "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==", "dev": true, "dependencies": { - "loose-envify": "^1.1.0", - "object-assign": "^4.1.1" + "loose-envify": "^1.1.0" }, "engines": { "node": ">=0.10.0" } }, "node_modules/react-dom": { - "version": "17.0.2", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz", - "integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==", + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", + "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==", "dev": true, "dependencies": { "loose-envify": "^1.1.0", - "object-assign": "^4.1.1", - "scheduler": "^0.20.2" + "scheduler": "^0.23.0" }, "peerDependencies": { - "react": "17.0.2" - } - }, - "node_modules/react-dom/node_modules/scheduler": { - "version": "0.20.2", - "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz", - "integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==", - "dev": true, - "dependencies": { - "loose-envify": "^1.1.0", - "object-assign": "^4.1.1" + "react": "^18.2.0" } }, "node_modules/react-is": { @@ -12781,6 +12769,15 @@ "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", "dev": true }, + "node_modules/scheduler": { + "version": "0.23.0", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz", + "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==", + "dev": true, + "dependencies": { + "loose-envify": "^1.1.0" + } + }, "node_modules/semver": { "version": "5.7.1", "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", @@ -18006,14 +18003,14 @@ } }, "@testing-library/react": { - "version": "12.1.5", - "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-12.1.5.tgz", - "integrity": "sha512-OfTXCJUFgjd/digLUuPxa0+/3ZxsQmE7ub9kcbW/wi96Bh3o/p5vrETcBGfP17NWPGqeYYl5LTRpwyGoMC4ysg==", + "version": "13.3.0", + "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-13.3.0.tgz", + "integrity": "sha512-DB79aA426+deFgGSjnf5grczDPiL4taK3hFaa+M5q7q20Kcve9eQottOG5kZ74KEr55v0tU2CQormSSDK87zYQ==", "dev": true, "requires": { "@babel/runtime": "^7.12.5", - "@testing-library/dom": "^8.0.0", - "@types/react-dom": "<18.0.0" + "@testing-library/dom": "^8.5.0", + "@types/react-dom": "^18.0.0" } }, "@tootallnate/once": { @@ -18174,9 +18171,9 @@ "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==" }, "@types/react": { - "version": "17.0.44", - "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.44.tgz", - "integrity": "sha512-Ye0nlw09GeMp2Suh8qoOv0odfgCoowfM/9MG6WeRD60Gq9wS90bdkdRtYbRkNhXOpG4H+YXGvj4wOWhAC0LJ1g==", + "version": "18.0.12", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.12.tgz", + "integrity": "sha512-duF1OTASSBQtcigUvhuiTB1Ya3OvSy+xORCiEf20H0P0lzx+/KeVsA99U5UjLXSbyo1DRJDlLKqTeM1ngosqtg==", "requires": { "@types/prop-types": "*", "@types/scheduler": "*", @@ -18184,12 +18181,12 @@ } }, "@types/react-dom": { - "version": "17.0.17", - "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.17.tgz", - "integrity": "sha512-VjnqEmqGnasQKV0CWLevqMTXBYG9GbwuE6x3VetERLh0cq2LTptFE73MrQi2S7GkKXCf2GgwItB/melLnxfnsg==", + "version": "18.0.5", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.5.tgz", + "integrity": "sha512-OWPWTUrY/NIrjsAPkAk1wW9LZeIjSvkXRhclsFO8CZcZGCOg2G0YZy4ft+rOyYxy8B7ui5iZzi9OkDebZ7/QSA==", "dev": true, "requires": { - "@types/react": "^17" + "@types/react": "*" } }, "@types/resolve": { @@ -23588,36 +23585,22 @@ } }, "react": { - "version": "17.0.2", - "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz", - "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==", + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", + "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==", "dev": true, "requires": { - "loose-envify": "^1.1.0", - "object-assign": "^4.1.1" + "loose-envify": "^1.1.0" } }, "react-dom": { - "version": "17.0.2", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz", - "integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==", + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", + "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==", "dev": true, "requires": { "loose-envify": "^1.1.0", - "object-assign": "^4.1.1", - "scheduler": "^0.20.2" - }, - "dependencies": { - "scheduler": { - "version": "0.20.2", - "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz", - "integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==", - "dev": true, - "requires": { - "loose-envify": "^1.1.0", - "object-assign": "^4.1.1" - } - } + "scheduler": "^0.23.0" } }, "react-is": { @@ -23942,6 +23925,15 @@ "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", "dev": true }, + "scheduler": { + "version": "0.23.0", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz", + "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==", + "dev": true, + "requires": { + "loose-envify": "^1.1.0" + } + }, "semver": { "version": "5.7.1", "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", diff --git a/package.json b/package.json index 717b4c7..e80a803 100644 --- a/package.json +++ b/package.json @@ -65,13 +65,13 @@ }, "peerDependencies": { "prop-types": "^15.5.8", - "react": "0.14 - 17", - "react-dom": "0.14 - 17" + "react": "0.14 - 18", + "react-dom": "0.14 - 18" }, "dependencies": { "@babel/runtime": "^7.17.9", "@types/prop-types": "^15.7.3", - "@types/react": "^17.0.44", + "@types/react": "^18.0.12", "@types/signature_pad": "^2.3.0", "signature_pad": "^2.3.2", "trim-canvas": "^0.1.0" @@ -89,15 +89,15 @@ "@rollup/plugin-babel": "^5.3.1", "@rollup/plugin-commonjs": "^21.1.0", "@rollup/plugin-node-resolve": "^13.2.1", - "@testing-library/react": "^12.1.5", + "@testing-library/react": "^13.3.0", "canvas": "^2.9.1", "concurrently": "^7.1.0", "jest": "^27.5.1", "jest-config": "^27.5.1", "package-json-type": "^1.0.3", "parcel": "^2.4.1", - "react": "^17.0.2", - "react-dom": "^17.0.2", + "react": "^18.2.0", + "react-dom": "^18.2.0", "rollup": "^2.70.2", "rollup-plugin-node-externals": "^4.0.0", "rollup-plugin-terser": "^7.0.2",