[docs-infra] Fix React Compiler ESLint issues in website components #42566
Conversation
Netlify deploy previewhttps://deploy-preview-42566--material-ui.netlify.app/ Bundle size report |
| @@ -101,7 +101,10 @@ export const useResizeHandle = ( | |||
| if (target.current && dragging && clientX) { | |||
| const objectRect = target.current.getBoundingClientRect(); | |||
| const newWidth = clientX - objectRect.left + dragOffset; | |||
| target.current.style.width = `clamp(${minWidth}, ${Math.floor(newWidth)}px, ${maxWidth})`; | |||
| target.current.style.setProperty( | |||
There was a problem hiding this comment.
Using style.setProperty so there's no "mutation".
There was a problem hiding this comment.
This feels strange: facebook/react#29832.
|
Looking into the reported ESLint errors:
We use the |
|
I've pushed a change commenting the ESLint disable comments for the - // eslint-disable-next-line react-compiler/react-compiler -- useEnhancedEffect uses useEffect under the hood
+ // TODO: uncomment once we enable eslint-plugin-react-compiler // eslint-disable-next-line react-compiler/react-compiler -- useEnhancedEffect uses useEffect under the hoodWe can't have disabled rules that are not configured because we use the --report-unused-disable-directives ESLint flag. |
aarongarciah
added
website
| @@ -101,7 +101,10 @@ export const useResizeHandle = ( | |||
| if (target.current && dragging && clientX) { | |||
| const objectRect = target.current.getBoundingClientRect(); | |||
| const newWidth = clientX - objectRect.left + dragOffset; | |||
| target.current.style.width = `clamp(${minWidth}, ${Math.floor(newWidth)}px, ${maxWidth})`; | |||
| target.current.style.setProperty( | |||
There was a problem hiding this comment.
This feels strange: facebook/react#29832.
aarongarciah
force-pushed
the
website-fix-eslint-react-compiler-issues
branch
from
7d56792
to
e861ac6
Compare
aarongarciah
requested review from
mnajdova and
DiegoAndai
and removed request for
brijeshb42 and
mnajdova
| @@ -475,7 +475,7 @@ module.exports = { | |||
| rules: { | |||
| 'import/no-default-export': 'error', | |||
| 'import/prefer-default-export': 'off', | |||
| ...(ENABLE_REACT_COMPILER_PLUGIN ? { 'react-compiler/react-compiler': 'off' } : {}), | |||
| 'react-compiler/react-compiler': 'off', | |||
There was a problem hiding this comment.
Is ENABLE_REACT_COMPILER_PLUGIN no longer useful?
There was a problem hiding this comment.
For now we leave it always off for Base UI.
| @@ -166,6 +166,7 @@ function PersistScroll(props) { | |||
| } | |||
|
|
|||
| return () => { | |||
| // TODO: uncomment once we enable eslint-plugin-react-compiler // eslint-disable-next-line react-compiler/react-compiler -- useEnhancedEffect uses useEffect under the hood | |||
There was a problem hiding this comment.
What's the plan with these comments? To fix it in the future or to keep the disable?
There was a problem hiding this comment.
The plan is to keep the disable but remove the comment/TODO once we enable the corresponding ESLint plugin.
Part of #42564
Fixes or silences errors reported by
eslint-plugin-react-compilerin the website components.The silenced occurrences are prepended with a comment because we use the --report-unused-disable-directives and we can't silence rules that are not configured, like the ones coming from
eslint-plugin-react-compiler, which is disabled by default as of today.// TODO: uncomment once we enable eslint-plugin-react-compiler // eslint-disable-next-line react-compiler/react-compiler -- useEnhancedEffect uses useEffect under the hoodApart from that, add a missing React key.
How to test
Make sure the parts of the docs that are affected by the changes work as expected. Half of the changes are just silencing the corresponding ESLint rule.