[docs-infra] Fix React Compiler ESLint issues in website components#42566
Conversation
aarongarciah
added
the
scope: docs-infra
Netlify deploy previewhttps://deploy-preview-42566--material-ui.netlify.app/ Bundle size report |
| 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".
|
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
| 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( |
aarongarciah
force-pushed
the
website-fix-eslint-react-compiler-issues
branch
from
7d56792 to
e861ac6
Compare
aarongarciah
requested review from
DiegoAndai and
mnajdova
and removed request for
brijeshb42 and
mnajdova
| '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.
| } | ||
|
|
||
| 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.
4 participants
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.