From 375358b6f7d00342ad2a282c34950ebfb4b2cdc8 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Fri, 22 Sep 2023 21:33:45 +0200 Subject: [PATCH] Bump eslint-plugin-react to ^7.33.2 (#38117) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Michał Dudak --- benchmark/browser/index.js | 6 +- .../src/index.tsx | 7 +- .../src/index.js | 7 +- examples/material-ui-express-ssr/client.js | 2 +- examples/material-ui-preact/src/index.js | 7 +- package.json | 2 +- .../src/elementAcceptingRef.test.tsx | 3 + .../src/elementTypeAcceptingRef.test.tsx | 3 + .../mui-utils/src/useIsFocusVisible.test.js | 9 +- packages/test-utils/src/createMount.tsx | 2 + test/regressions/index.js | 40 ++++---- yarn.lock | 97 +++++++++++++++++-- 12 files changed, 145 insertions(+), 40 deletions(-) diff --git a/benchmark/browser/index.js b/benchmark/browser/index.js index 225106d929a6af..50f9b600fd632a 100644 --- a/benchmark/browser/index.js +++ b/benchmark/browser/index.js @@ -1,5 +1,5 @@ import * as React from 'react'; -import * as ReactDOM from 'react-dom'; +import * as ReactDOMClient from 'react-dom/client'; import PropTypes from 'prop-types'; import { logReactMetrics } from './utils'; @@ -7,6 +7,7 @@ import { logReactMetrics } from './utils'; const requirePerfScenarios = require.context('./scenarios', true, /(js|ts|tsx)$/); const rootEl = document.getElementById('root'); +const root = ReactDOMClient.createRoot(rootEl); const scenarioSuitePath = window.location.search.replace('?', ''); @@ -35,11 +36,10 @@ Measure.propTypes = { children: PropTypes.node, }; -ReactDOM.render( +root.render( , - rootEl, ); diff --git a/examples/material-ui-cra-styled-components-ts/src/index.tsx b/examples/material-ui-cra-styled-components-ts/src/index.tsx index c95009af6b8b09..26a4e6b9dda593 100644 --- a/examples/material-ui-cra-styled-components-ts/src/index.tsx +++ b/examples/material-ui-cra-styled-components-ts/src/index.tsx @@ -1,13 +1,14 @@ import * as React from 'react'; -import * as ReactDOM from 'react-dom'; +import * as ReactDOMClient from 'react-dom/client'; import CssBaseline from '@mui/material/CssBaseline'; import App from './App'; -ReactDOM.render( +const root = ReactDOMClient.createRoot(document.getElementById('root')!); + +root.render( {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */} , - document.getElementById('root'), ); diff --git a/examples/material-ui-cra-styled-components/src/index.js b/examples/material-ui-cra-styled-components/src/index.js index 094f2c72d0d2b0..f2ec9a8a408d1a 100644 --- a/examples/material-ui-cra-styled-components/src/index.js +++ b/examples/material-ui-cra-styled-components/src/index.js @@ -1,16 +1,17 @@ import * as React from 'react'; -import * as ReactDOM from 'react-dom'; +import * as ReactDOMClient from 'react-dom/client'; import CssBaseline from '@mui/material/CssBaseline'; import App from './App'; import * as serviceWorker from './serviceWorker'; -ReactDOM.render( +const root = ReactDOMClient.createRoot(document.getElementById('root')); + +root.render( {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */} , - document.getElementById('root'), ); // If you want your app to work offline and load faster, you can change diff --git a/examples/material-ui-express-ssr/client.js b/examples/material-ui-express-ssr/client.js index 85226caaea013e..37174456bb43fd 100644 --- a/examples/material-ui-express-ssr/client.js +++ b/examples/material-ui-express-ssr/client.js @@ -21,4 +21,4 @@ function Main() { ); } -ReactDOM.hydrate(
, document.querySelector('#root')); +ReactDOM.hydrateRoot(document.querySelector('#root'),
); diff --git a/examples/material-ui-preact/src/index.js b/examples/material-ui-preact/src/index.js index 2725deba39850e..f479c894bfb169 100644 --- a/examples/material-ui-preact/src/index.js +++ b/examples/material-ui-preact/src/index.js @@ -1,10 +1,11 @@ import * as React from 'react'; -import * as ReactDOM from 'react-dom'; +import * as ReactDOMClient from 'react-dom/client'; import App from './App'; -ReactDOM.render( +const root = ReactDOMClient.createRoot(document.getElementById('root')); + +root.render( , - document.getElementById('root'), ); diff --git a/package.json b/package.json index fa114ab4fb2885..66f583f10f888b 100644 --- a/package.json +++ b/package.json @@ -130,7 +130,7 @@ "eslint-plugin-import": "^2.28.1", "eslint-plugin-jsx-a11y": "^6.7.1", "eslint-plugin-mocha": "^10.1.0", - "eslint-plugin-react": "^7.32.2", + "eslint-plugin-react": "^7.33.2", "eslint-plugin-react-hooks": "^4.6.0", "fast-glob": "^3.3.1", "fs-extra": "^11.1.1", diff --git a/packages/mui-utils/src/elementAcceptingRef.test.tsx b/packages/mui-utils/src/elementAcceptingRef.test.tsx index 465721411cebfa..4fbdf45e95439b 100644 --- a/packages/mui-utils/src/elementAcceptingRef.test.tsx +++ b/packages/mui-utils/src/elementAcceptingRef.test.tsx @@ -26,6 +26,8 @@ describe('elementAcceptingRef', () => { function testAct() { checkPropType(element); if (shouldMount) { + // TODO: replace with React 18 implementation after https://github.com/testing-library/react-testing-library/issues/1216 is closed. + // eslint-disable-next-line react/no-deprecated ReactDOM.render( }> {React.cloneElement(element, { ref: React.createRef() })} @@ -43,6 +45,7 @@ describe('elementAcceptingRef', () => { }); afterEach(() => { + // eslint-disable-next-line react/no-deprecated ReactDOM.unmountComponentAtNode(rootNode); }); diff --git a/packages/mui-utils/src/elementTypeAcceptingRef.test.tsx b/packages/mui-utils/src/elementTypeAcceptingRef.test.tsx index a39ec1610fcbee..4bf9a1a01ac794 100644 --- a/packages/mui-utils/src/elementTypeAcceptingRef.test.tsx +++ b/packages/mui-utils/src/elementTypeAcceptingRef.test.tsx @@ -26,6 +26,8 @@ describe('elementTypeAcceptingRef', () => { function testAct() { checkPropType(Component); if (shouldMount) { + // TODO: replace with React 18 implementation after https://github.com/testing-library/react-testing-library/issues/1216 is closed. + // eslint-disable-next-line react/no-deprecated ReactDOM.render( }> @@ -47,6 +49,7 @@ describe('elementTypeAcceptingRef', () => { }); afterEach(() => { + // eslint-disable-next-line react/no-deprecated ReactDOM.unmountComponentAtNode(rootNode); }); diff --git a/packages/mui-utils/src/useIsFocusVisible.test.js b/packages/mui-utils/src/useIsFocusVisible.test.js index d8b4751b3495e1..a6c2d0224c399b 100644 --- a/packages/mui-utils/src/useIsFocusVisible.test.js +++ b/packages/mui-utils/src/useIsFocusVisible.test.js @@ -1,6 +1,6 @@ import { expect } from 'chai'; import * as React from 'react'; -import * as ReactDOM from 'react-dom'; +import * as ReactDOMClient from 'react-dom/client'; import { act, createRenderer, @@ -67,15 +67,20 @@ describe('useIsFocusVisible', () => { }); let rootElement; + let reactRoot; beforeEach(() => { rootElement = document.createElement('div'); document.body.appendChild(rootElement); rootElement.attachShadow({ mode: 'open' }); + reactRoot = ReactDOMClient.createRoot(rootElement.shadowRoot); }); afterEach(() => { - ReactDOM.unmountComponentAtNode(rootElement.shadowRoot); + act(() => { + reactRoot.unmount(); + }); + teardownFocusVisible(rootElement.shadowRoot); document.body.removeChild(rootElement); }); diff --git a/packages/test-utils/src/createMount.tsx b/packages/test-utils/src/createMount.tsx index 7e47dbb83a5750..406e8e65b793c5 100644 --- a/packages/test-utils/src/createMount.tsx +++ b/packages/test-utils/src/createMount.tsx @@ -85,6 +85,7 @@ export default function createMount(options: CreateMountOptions = {}) { afterEach(() => { ReactDOMTestUtils.act(() => { + // eslint-disable-next-line react/no-deprecated ReactDOM.unmountComponentAtNode(container!); }); container!.parentElement!.removeChild(container!); @@ -103,6 +104,7 @@ export default function createMount(options: CreateMountOptions = {}) { ); } ReactDOMTestUtils.act(() => { + // eslint-disable-next-line react/no-deprecated ReactDOM.unmountComponentAtNode(container!); }); diff --git a/test/regressions/index.js b/test/regressions/index.js index 82e1997dae0e67..1f4d6b6956a02f 100644 --- a/test/regressions/index.js +++ b/test/regressions/index.js @@ -1,6 +1,6 @@ import * as React from 'react'; import PropTypes from 'prop-types'; -import * as ReactDOM from 'react-dom'; +import * as ReactDOMClient from 'react-dom/client'; import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'; import webfontloader from 'webfontloader'; import TestViewer from './TestViewer'; @@ -225,21 +225,31 @@ if (unusedBlacklistPatterns.size > 0) { const viewerRoot = document.getElementById('test-viewer'); function FixtureRenderer({ component: FixtureComponent }) { + const viewerReactRoot = React.useRef(null); + React.useLayoutEffect(() => { - const children = ( - - - - ); + const renderTimeout = setTimeout(() => { + const children = ( + + + + ); - ReactDOM.render(children, viewerRoot); - }, [FixtureComponent]); + if (viewerReactRoot.current === null) { + viewerReactRoot.current = ReactDOMClient.createRoot(viewerRoot); + } + + viewerReactRoot.current.render(children); + }); - React.useLayoutEffect(() => { return () => { - ReactDOM.unmountComponentAtNode(viewerRoot); + clearTimeout(renderTimeout); + setTimeout(() => { + viewerReactRoot.current.unmount(); + viewerReactRoot.current = null; + }); }; - }, []); + }, [FixtureComponent]); return null; } @@ -354,9 +364,5 @@ App.propTypes = { const container = document.getElementById('react-root'); const children = ; -if (typeof ReactDOM.unstable_createRoot === 'function') { - const root = ReactDOM.unstable_createRoot(container); - root.render(children); -} else { - ReactDOM.render(children, container); -} +const reactRoot = ReactDOMClient.createRoot(container); +reactRoot.render(children); diff --git a/yarn.lock b/yarn.lock index c872cf04dff346..82aade9d3959f6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4968,6 +4968,13 @@ async@^3.2.3: resolved "https://registry.yarnpkg.com/async/-/async-3.2.4.tgz#2d22e00f8cddeb5fde5dd33522b56d1cf569a81c" integrity sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ== +asynciterator.prototype@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/asynciterator.prototype/-/asynciterator.prototype-1.0.0.tgz#8c5df0514936cdd133604dfcc9d3fb93f09b2b62" + integrity sha512-wwHYEIS0Q80f5mosx3L/dfG5t5rjEa9Ft51GTaNt862EnpyGHpgz2RkZvLPp1oF5TnAiTohkEKVEu8pQPJI7Vg== + dependencies: + has-symbols "^1.0.3" + asynckit@^0.4.0: version "0.4.0" resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79" @@ -7578,7 +7585,7 @@ error-ex@^1.3.1: dependencies: is-arrayish "^0.2.1" -es-abstract@^1.19.0, es-abstract@^1.19.2, es-abstract@^1.20.1, es-abstract@^1.20.4, es-abstract@^1.21.2: +es-abstract@^1.19.0, es-abstract@^1.19.2, es-abstract@^1.20.1, es-abstract@^1.20.4, es-abstract@^1.21.2, es-abstract@^1.21.3: version "1.22.1" resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.22.1.tgz#8b4e5fc5cefd7f1660f0f8e1a52900dfbc9d9ccc" integrity sha512-ioRRcXMO6OFyRpyzV3kE1IIBd4WG5/kltnzdxSCqoP8CMGs/Li+M1uF5o7lOkZVFjDs+NLesthnF66Pg/0q0Lw== @@ -7643,6 +7650,26 @@ es-get-iterator@^1.0.2, es-get-iterator@^1.1.2: isarray "^2.0.5" stop-iteration-iterator "^1.0.0" +es-iterator-helpers@^1.0.12: + version "1.0.13" + resolved "https://registry.yarnpkg.com/es-iterator-helpers/-/es-iterator-helpers-1.0.13.tgz#72101046ffc19baf9996adc70e6177a26e6e8084" + integrity sha512-LK3VGwzvaPWobO8xzXXGRUOGw8Dcjyfk62CsY/wfHN75CwsJPbuypOYJxK6g5RyEL8YDjIWcl6jgd8foO6mmrA== + dependencies: + asynciterator.prototype "^1.0.0" + call-bind "^1.0.2" + define-properties "^1.2.0" + es-abstract "^1.21.3" + es-set-tostringtag "^2.0.1" + function-bind "^1.1.1" + get-intrinsic "^1.2.1" + globalthis "^1.0.3" + has-property-descriptors "^1.0.0" + has-proto "^1.0.1" + has-symbols "^1.0.3" + internal-slot "^1.0.5" + iterator.prototype "^1.1.0" + safe-array-concat "^1.0.0" + es-module-lexer@^1.2.1: version "1.2.1" resolved "https://registry.yarnpkg.com/es-module-lexer/-/es-module-lexer-1.2.1.tgz#ba303831f63e6a394983fde2f97ad77b22324527" @@ -7887,15 +7914,16 @@ eslint-plugin-react-hooks@^4.6.0: resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.0.tgz#4c3e697ad95b77e93f8646aaa1630c1ba607edd3" integrity sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g== -eslint-plugin-react@^7.32.2: - version "7.32.2" - resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.32.2.tgz#e71f21c7c265ebce01bcbc9d0955170c55571f10" - integrity sha512-t2fBMa+XzonrrNkyVirzKlvn5RXzzPwRHtMvLAtVZrt8oxgnTQaYbU6SXTOO1mwQgp1y5+toMSKInnzGr0Knqg== +eslint-plugin-react@^7.33.2: + version "7.33.2" + resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.33.2.tgz#69ee09443ffc583927eafe86ffebb470ee737608" + integrity sha512-73QQMKALArI8/7xGLNI/3LylrEYrlKZSb5C9+q3OtOewTnMQi5cT+aE9E41sLCmli3I9PGGmD1yiZydyo4FEPw== dependencies: array-includes "^3.1.6" array.prototype.flatmap "^1.3.1" array.prototype.tosorted "^1.1.1" doctrine "^2.1.0" + es-iterator-helpers "^1.0.12" estraverse "^5.3.0" jsx-ast-utils "^2.4.1 || ^3.0.0" minimatch "^3.1.2" @@ -7905,7 +7933,7 @@ eslint-plugin-react@^7.32.2: object.values "^1.1.6" prop-types "^15.8.1" resolve "^2.0.0-next.4" - semver "^6.3.0" + semver "^6.3.1" string.prototype.matchall "^4.0.8" eslint-rule-composer@^0.3.0: @@ -9839,6 +9867,13 @@ is-arrayish@^0.3.1: resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.3.2.tgz#4574a2ae56f7ab206896fb431eaeed066fdf8f03" integrity sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ== +is-async-function@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/is-async-function/-/is-async-function-2.0.0.tgz#8e4418efd3e5d3a6ebb0164c05ef5afb69aa9646" + integrity sha512-Y1JXKrfykRJGdlDwdKlLpLyMIiWqWvuSd17TvZk68PLAOGOoF4Xyav1z0Xhoi+gCYjZVeC5SI+hYFOfvXmGRCA== + dependencies: + has-tostringtag "^1.0.0" + is-bigint@^1.0.1: version "1.0.4" resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.0.4.tgz#08147a1875bc2b32005d41ccd8291dffc6691df3" @@ -9966,6 +10001,13 @@ is-extglob@^2.1.1: resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2" integrity sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ== +is-finalizationregistry@^1.0.2: + version "1.0.2" + resolved "https://registry.yarnpkg.com/is-finalizationregistry/-/is-finalizationregistry-1.0.2.tgz#c8749b65f17c133313e661b1289b95ad3dbd62e6" + integrity sha512-0by5vtUJs8iFQb5TYUHHPudOR+qXYIMKtiUzvLIZITZUjknFmziyBJuLhVRc+Ds0dREFlskDNJKYIdIzu/9pfw== + dependencies: + call-bind "^1.0.2" + is-fullwidth-code-point@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz#ef9e31386f031a7f0d643af82fde50c457ef00cb" @@ -9978,7 +10020,7 @@ is-fullwidth-code-point@^3.0.0: resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d" integrity sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg== -is-generator-function@^1.0.7: +is-generator-function@^1.0.10, is-generator-function@^1.0.7: version "1.0.10" resolved "https://registry.yarnpkg.com/is-generator-function/-/is-generator-function-1.0.10.tgz#f1558baf1ac17e0deea7c0415c438351ff2b3c72" integrity sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A== @@ -10372,6 +10414,17 @@ iterate-value@^1.0.2: es-get-iterator "^1.0.2" iterate-iterator "^1.0.1" +iterator.prototype@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/iterator.prototype/-/iterator.prototype-1.1.0.tgz#690c88b043d821f783843aaf725d7ac3b62e3b46" + integrity sha512-rjuhAk1AJ1fssphHD0IFV6TWL40CwRZ53FrztKx43yk2v6rguBYsY4Bj1VU4HmoMmKwZUlx7mfnhDf9cOp4YTw== + dependencies: + define-properties "^1.1.4" + get-intrinsic "^1.1.3" + has-symbols "^1.0.3" + has-tostringtag "^1.0.0" + reflect.getprototypeof "^1.0.3" + jackspeak@^2.0.3: version "2.2.1" resolved "https://registry.yarnpkg.com/jackspeak/-/jackspeak-2.2.1.tgz#655e8cf025d872c9c03d3eb63e8f0c024fef16a6" @@ -14519,6 +14572,18 @@ redux@^4.2.1: dependencies: "@babel/runtime" "^7.9.2" +reflect.getprototypeof@^1.0.3: + version "1.0.3" + resolved "https://registry.yarnpkg.com/reflect.getprototypeof/-/reflect.getprototypeof-1.0.3.tgz#2738fd896fcc3477ffbd4190b40c2458026b6928" + integrity sha512-TTAOZpkJ2YLxl7mVHWrNo3iDMEkYlva/kgFcXndqMgbo/AZUmmavEkdXV+hXtE4P8xdyEKRzalaFqZVuwIk/Nw== + dependencies: + call-bind "^1.0.2" + define-properties "^1.1.4" + es-abstract "^1.20.4" + get-intrinsic "^1.1.1" + globalthis "^1.0.3" + which-builtin-type "^1.1.3" + reflect.ownkeys@^0.2.0: version "0.2.0" resolved "https://registry.yarnpkg.com/reflect.ownkeys/-/reflect.ownkeys-0.2.0.tgz#749aceec7f3fdf8b63f927a04809e90c5c0b3460" @@ -17244,6 +17309,24 @@ which-boxed-primitive@^1.0.2: is-string "^1.0.5" is-symbol "^1.0.3" +which-builtin-type@^1.1.3: + version "1.1.3" + resolved "https://registry.yarnpkg.com/which-builtin-type/-/which-builtin-type-1.1.3.tgz#b1b8443707cc58b6e9bf98d32110ff0c2cbd029b" + integrity sha512-YmjsSMDBYsM1CaFiayOVT06+KJeXf0o5M/CAd4o1lTadFAtacTUM49zoYxr/oroopFDfhvN6iEcBxUyc3gvKmw== + dependencies: + function.prototype.name "^1.1.5" + has-tostringtag "^1.0.0" + is-async-function "^2.0.0" + is-date-object "^1.0.5" + is-finalizationregistry "^1.0.2" + is-generator-function "^1.0.10" + is-regex "^1.1.4" + is-weakref "^1.0.2" + isarray "^2.0.5" + which-boxed-primitive "^1.0.2" + which-collection "^1.0.1" + which-typed-array "^1.1.9" + which-collection@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/which-collection/-/which-collection-1.0.1.tgz#70eab71ebbbd2aefaf32f917082fc62cdcb70906"