diff --git a/package-lock.json b/package-lock.json index 47f74ffea9b771..924b8395c5daf4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -98,7 +98,7 @@ "eslint-plugin-jest": "27.4.3", "eslint-plugin-jest-dom": "5.0.2", "eslint-plugin-prettier": "5.0.0", - "eslint-plugin-react-compiler": "19.0.0-beta-0dec889-20241115", + "eslint-plugin-react-compiler": "19.0.0-beta-ebf51a3-20250411", "eslint-plugin-ssr-friendly": "1.0.6", "eslint-plugin-storybook": "0.6.13", "eslint-plugin-testing-library": "6.0.2", @@ -2461,6 +2461,7 @@ "integrity": "sha512-nutsvktDItsNn4rpGItSNV2sz1XwS+nfU0Rg8aCx3W3NOKVzdMjJRu0O5OkgDp3ZGICSTbgRpxZoWsxoKRvbeA==", "deprecated": "This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-private-methods instead.", "dev": true, + "license": "MIT", "dependencies": { "@babel/helper-create-class-features-plugin": "^7.18.6", "@babel/helper-plugin-utils": "^7.18.6" @@ -23718,15 +23719,16 @@ } }, "node_modules/eslint-plugin-react-compiler": { - "version": "19.0.0-beta-0dec889-20241115", - "resolved": "https://registry.npmjs.org/eslint-plugin-react-compiler/-/eslint-plugin-react-compiler-19.0.0-beta-0dec889-20241115.tgz", - "integrity": "sha512-jTjEHuE8/R6qD/CD2d+5YvWMy1q9/tX3kft4WDyg42/HktjHtHXrEToyZ6THEQf8t/YWMY1RGeCkykePbACtFA==", + "version": "19.0.0-beta-ebf51a3-20250411", + "resolved": "https://registry.npmjs.org/eslint-plugin-react-compiler/-/eslint-plugin-react-compiler-19.0.0-beta-ebf51a3-20250411.tgz", + "integrity": "sha512-R7ncuwbCPFAoeMlS56DGGSJFxmRtlWafYH/iWyep5Ks0RaPqTCL4k5gA87axUBBcITsaIgUGkbqAxDxl8Xfm5A==", "dev": true, + "license": "MIT", "dependencies": { "@babel/core": "^7.24.4", "@babel/parser": "^7.24.4", "@babel/plugin-proposal-private-methods": "^7.18.6", - "hermes-parser": "^0.20.1", + "hermes-parser": "^0.25.1", "zod": "^3.22.4", "zod-validation-error": "^3.0.3" }, @@ -23738,18 +23740,20 @@ } }, "node_modules/eslint-plugin-react-compiler/node_modules/hermes-estree": { - "version": "0.20.1", - "resolved": "https://registry.npmjs.org/hermes-estree/-/hermes-estree-0.20.1.tgz", - "integrity": "sha512-SQpZK4BzR48kuOg0v4pb3EAGNclzIlqMj3Opu/mu7bbAoFw6oig6cEt/RAi0zTFW/iW6Iz9X9ggGuZTAZ/yZHg==", - "dev": true + "version": "0.25.1", + "resolved": "https://registry.npmjs.org/hermes-estree/-/hermes-estree-0.25.1.tgz", + "integrity": "sha512-0wUoCcLp+5Ev5pDW2OriHC2MJCbwLwuRx+gAqMTOkGKJJiBCLjtrvy4PWUGn6MIVefecRpzoOZ/UV6iGdOr+Cw==", + "dev": true, + "license": "MIT" }, "node_modules/eslint-plugin-react-compiler/node_modules/hermes-parser": { - "version": "0.20.1", - "resolved": "https://registry.npmjs.org/hermes-parser/-/hermes-parser-0.20.1.tgz", - "integrity": "sha512-BL5P83cwCogI8D7rrDCgsFY0tdYUtmFP9XaXtl2IQjC+2Xo+4okjfXintlTxcIwl4qeGddEl28Z11kbVIw0aNA==", + "version": "0.25.1", + "resolved": "https://registry.npmjs.org/hermes-parser/-/hermes-parser-0.25.1.tgz", + "integrity": "sha512-6pEjquH3rqaI6cYAXYPcz9MS4rY6R4ngRgrgfDshRptUZIc3lw0MCIJIGDj9++mfySOuPTHB4nrSW99BCvOPIA==", "dev": true, + "license": "MIT", "dependencies": { - "hermes-estree": "0.20.1" + "hermes-estree": "0.25.1" } }, "node_modules/eslint-plugin-react-hooks": { @@ -48616,6 +48620,7 @@ "resolved": "https://registry.npmjs.org/zod-validation-error/-/zod-validation-error-3.4.0.tgz", "integrity": "sha512-ZOPR9SVY6Pb2qqO5XHt+MkkTRxGXb4EVtnjc9JpXUOtUB1T9Ru7mZOT361AN3MsetVe7R0a1KZshJDZdgp9miQ==", "dev": true, + "license": "MIT", "engines": { "node": ">=18.0.0" }, diff --git a/package.json b/package.json index e1c516d42de826..451fb48fbd2dce 100644 --- a/package.json +++ b/package.json @@ -107,7 +107,7 @@ "eslint-plugin-jest": "27.4.3", "eslint-plugin-jest-dom": "5.0.2", "eslint-plugin-prettier": "5.0.0", - "eslint-plugin-react-compiler": "19.0.0-beta-0dec889-20241115", + "eslint-plugin-react-compiler": "19.0.0-beta-ebf51a3-20250411", "eslint-plugin-ssr-friendly": "1.0.6", "eslint-plugin-storybook": "0.6.13", "eslint-plugin-testing-library": "6.0.2", diff --git a/packages/block-editor/src/components/link-control/index.js b/packages/block-editor/src/components/link-control/index.js index 635054e14c6ae4..511df8fcee4f9d 100644 --- a/packages/block-editor/src/components/link-control/index.js +++ b/packages/block-editor/src/components/link-control/index.js @@ -185,7 +185,6 @@ function LinkControl( { const isMountingRef = useRef( true ); const wrapperNode = useRef(); const textInputRef = useRef(); - const isEndingEditWithFocusRef = useRef( false ); const settingsKeys = settings.map( ( { id } ) => id ); @@ -235,8 +234,6 @@ function LinkControl( { wrapperNode.current; nextFocusTarget.focus(); - - isEndingEditWithFocusRef.current = false; }, [ isEditingLink, isCreatingPage ] ); // The component mounting reference is maintained separately @@ -256,10 +253,6 @@ function LinkControl( { * the next render, if focus was within the wrapper when editing finished. */ const stopEditing = () => { - isEndingEditWithFocusRef.current = !! wrapperNode.current?.contains( - wrapperNode.current.ownerDocument.activeElement - ); - setIsEditingLink( false ); }; diff --git a/packages/block-editor/src/components/rich-text/event-listeners/index.js b/packages/block-editor/src/components/rich-text/event-listeners/index.js index 4ec67d8f30af97..210ff734356326 100644 --- a/packages/block-editor/src/components/rich-text/event-listeners/index.js +++ b/packages/block-editor/src/components/rich-text/event-listeners/index.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { useMemo, useRef, useInsertionEffect } from '@wordpress/element'; +import { useMemo, useState, useInsertionEffect } from '@wordpress/element'; import { useRefEffect } from '@wordpress/compose'; /** @@ -34,13 +34,16 @@ const allEventListeners = [ ]; export function useEventListeners( props ) { - const propsRef = useRef( props ); + const [ state, setState ] = useState( props ); useInsertionEffect( () => { - propsRef.current = props; + setState( props ); } ); const refEffects = useMemo( - () => allEventListeners.map( ( refEffect ) => refEffect( propsRef ) ), - [ propsRef ] + () => + allEventListeners.map( ( refEffect ) => + refEffect( { current: state } ) + ), + [ state ] ); return useRefEffect( diff --git a/packages/components/src/modal/index.tsx b/packages/components/src/modal/index.tsx index 2dec0f65240f9b..34449bc9ac28f4 100644 --- a/packages/components/src/modal/index.tsx +++ b/packages/components/src/modal/index.tsx @@ -137,6 +137,7 @@ function UnforwardedModal( // Keeps a fresh ref for the subsequent effect. const onRequestCloseRef = useRef< ModalProps[ 'onRequestClose' ] >(); useEffect( () => { + // eslint-disable-next-line react-compiler/react-compiler onRequestCloseRef.current = onRequestClose; }, [ onRequestClose ] ); diff --git a/packages/components/src/palette-edit/index.tsx b/packages/components/src/palette-edit/index.tsx index 2eb6e3bbe3b6fc..5d181b8d812f34 100644 --- a/packages/components/src/palette-edit/index.tsx +++ b/packages/components/src/palette-edit/index.tsx @@ -6,13 +6,7 @@ import clsx from 'clsx'; /** * WordPress dependencies */ -import { - useState, - useRef, - useEffect, - useCallback, - useMemo, -} from '@wordpress/element'; +import { useState, useRef, useCallback, useMemo } from '@wordpress/element'; import { __, sprintf } from '@wordpress/i18n'; import { lineSolid, moreVertical, plus } from '@wordpress/icons'; import { useDebounce } from '@wordpress/compose'; @@ -296,12 +290,6 @@ function PaletteEditListView< T extends PaletteElement >( { popoverProps, addColorRef, }: PaletteEditListViewProps< T > ) { - // When unmounting the component if there are empty elements (the user did not complete the insertion) clean them. - const elementsReferenceRef = useRef< typeof elements >(); - useEffect( () => { - elementsReferenceRef.current = elements; - }, [ elements ] ); - const debounceOnChange = useDebounce( ( updatedElements: T[] ) => onChange( deduplicateElementSlugs( updatedElements ) ), diff --git a/packages/compose/src/hooks/use-copy-to-clipboard/index.js b/packages/compose/src/hooks/use-copy-to-clipboard/index.js index fbd7b77fecc4ce..4686d6023ee6e6 100644 --- a/packages/compose/src/hooks/use-copy-to-clipboard/index.js +++ b/packages/compose/src/hooks/use-copy-to-clipboard/index.js @@ -21,6 +21,7 @@ import useRefEffect from '../use-ref-effect'; function useUpdatedRef( value ) { const ref = useRef( value ); useLayoutEffect( () => { + // eslint-disable-next-line react-compiler/react-compiler ref.current = value; }, [ value ] ); return ref; diff --git a/packages/rich-text/src/component/event-listeners/index.js b/packages/rich-text/src/component/event-listeners/index.js index d4f760abdc735a..fa88c1b556d7f0 100644 --- a/packages/rich-text/src/component/event-listeners/index.js +++ b/packages/rich-text/src/component/event-listeners/index.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { useMemo, useRef, useInsertionEffect } from '@wordpress/element'; +import { useMemo, useState, useInsertionEffect } from '@wordpress/element'; import { useRefEffect } from '@wordpress/compose'; /** @@ -26,13 +26,16 @@ const allEventListeners = [ ]; export function useEventListeners( props ) { - const propsRef = useRef( props ); + const [ state, setState ] = useState( props ); useInsertionEffect( () => { - propsRef.current = props; + setState( props ); } ); const refEffects = useMemo( - () => allEventListeners.map( ( refEffect ) => refEffect( propsRef ) ), - [ propsRef ] + () => + allEventListeners.map( ( refEffect ) => + refEffect( { current: state } ) + ), + [ state ] ); return useRefEffect(