From 2026354210f0a1c33482b1af4e5b946f6fb58e95 Mon Sep 17 00:00:00 2001 From: jlewins Date: Tue, 30 Jul 2024 10:12:30 +0100 Subject: [PATCH 1/4] fixed eslint errors --- .../mui-styles/src/StylesProvider/StylesProvider.js | 10 +++------- packages/mui-styles/src/makeStyles/makeStyles.js | 3 ++- .../mui-styles/src/makeStyles/makeStyles.spec.tsx | 12 ++++++------ packages/mui-styles/src/withStyles/withStyles.js | 1 + 4 files changed, 12 insertions(+), 14 deletions(-) diff --git a/packages/mui-styles/src/StylesProvider/StylesProvider.js b/packages/mui-styles/src/StylesProvider/StylesProvider.js index 4a9a5b01b3b28c..c4b46f6e6e92b5 100644 --- a/packages/mui-styles/src/StylesProvider/StylesProvider.js +++ b/packages/mui-styles/src/StylesProvider/StylesProvider.js @@ -33,8 +33,6 @@ if (process.env.NODE_ENV !== 'production') { StylesContext.displayName = 'StylesContext'; } -let injectFirstNode; - export default function StylesProvider(props) { const { children, injectFirst = false, disableGeneration = false, ...localOptions } = props; @@ -82,11 +80,9 @@ export default function StylesProvider(props) { } if (!context.jss.options.insertionPoint && injectFirst && typeof window !== 'undefined') { - if (!injectFirstNode) { - const head = document.head; - injectFirstNode = document.createComment('mui-inject-first'); - head.insertBefore(injectFirstNode, head.firstChild); - } + const head = document.head; + const injectFirstNode = document.createComment('mui-inject-first'); + head.insertBefore(injectFirstNode, head.firstChild); context.jss = create({ plugins: jssPreset().plugins, insertionPoint: injectFirstNode }); } diff --git a/packages/mui-styles/src/makeStyles/makeStyles.js b/packages/mui-styles/src/makeStyles/makeStyles.js index 7c5ed13b1d2587..b63593564873e4 100644 --- a/packages/mui-styles/src/makeStyles/makeStyles.js +++ b/packages/mui-styles/src/makeStyles/makeStyles.js @@ -164,7 +164,7 @@ function useSynchronousEffect(func, values) { let output; // Store "generation" key. Just returns a new object every time - const currentKey = React.useMemo(() => ({}), values); // eslint-disable-line react-hooks/exhaustive-deps + const currentKey = React.useMemo(() => ({}), [values]); // eslint-disable-line react-hooks/exhaustive-deps // "the first render", or "memo dropped the value" if (key.current !== currentKey) { @@ -238,6 +238,7 @@ export default function makeStyles(stylesOrCreator, options = {}) { const classes = getClasses(instance.current, props.classes, Component); if (process.env.NODE_ENV !== 'production') { + // eslint-disable-next-line react-compiler/react-compiler // eslint-disable-next-line react-hooks/rules-of-hooks React.useDebugValue(classes); } diff --git a/packages/mui-styles/src/makeStyles/makeStyles.spec.tsx b/packages/mui-styles/src/makeStyles/makeStyles.spec.tsx index 1e1765dec63af0..1097d8efdeddb8 100644 --- a/packages/mui-styles/src/makeStyles/makeStyles.spec.tsx +++ b/packages/mui-styles/src/makeStyles/makeStyles.spec.tsx @@ -120,15 +120,15 @@ import { createStyles, makeStyles } from '@mui/styles'; })); } +const useStyles = makeStyles((theme) => ({ + root: { + background: 'blue', + }, +})); + function PartialTypeInferenceTest() { // If any generic is provided, inference breaks. // If the proposal https://github.com/Microsoft/TypeScript/issues/26242 goes through, we can fix this. - const useStyles = makeStyles((theme) => ({ - root: { - background: 'blue', - }, - })); - const classes = useStyles(); // This doesn't fail, because inference is broken diff --git a/packages/mui-styles/src/withStyles/withStyles.js b/packages/mui-styles/src/withStyles/withStyles.js index c1ed00d29b4496..d0b7b5955773a5 100644 --- a/packages/mui-styles/src/withStyles/withStyles.js +++ b/packages/mui-styles/src/withStyles/withStyles.js @@ -57,6 +57,7 @@ const withStyles = if (typeof name === 'string' || withTheme) { // name and withTheme are invariant in the outer scope + // eslint-disable-next-line react-compiler/react-compiler // eslint-disable-next-line react-hooks/rules-of-hooks theme = useTheme() || defaultTheme; From c7ddcef5d82649eff5cb4c573a68cde4862cbca8 Mon Sep 17 00:00:00 2001 From: jlewins Date: Mon, 12 Aug 2024 12:04:41 +0100 Subject: [PATCH 2/4] reverted and silenced errors --- .../mui-styles/src/StylesProvider/StylesProvider.js | 13 ++++++++++--- packages/mui-styles/src/makeStyles/makeStyles.js | 4 +++- 2 files changed, 13 insertions(+), 4 deletions(-) diff --git a/packages/mui-styles/src/StylesProvider/StylesProvider.js b/packages/mui-styles/src/StylesProvider/StylesProvider.js index c4b46f6e6e92b5..1f2a9a770a0110 100644 --- a/packages/mui-styles/src/StylesProvider/StylesProvider.js +++ b/packages/mui-styles/src/StylesProvider/StylesProvider.js @@ -33,6 +33,8 @@ if (process.env.NODE_ENV !== 'production') { StylesContext.displayName = 'StylesContext'; } +let injectFirstNode; + export default function StylesProvider(props) { const { children, injectFirst = false, disableGeneration = false, ...localOptions } = props; @@ -80,9 +82,14 @@ export default function StylesProvider(props) { } if (!context.jss.options.insertionPoint && injectFirst && typeof window !== 'undefined') { - const head = document.head; - const injectFirstNode = document.createComment('mui-inject-first'); - head.insertBefore(injectFirstNode, head.firstChild); + if (!injectFirstNode) { + const head = document.head; + // TODO: uncomment once we enable eslint-plugin-react-compiler + // eslint-disable-next-line react-compiler/react-compiler -- injectFirstNode is called inside callback + // eslint-disable-next-line react-hooks/rules-of-hooks + injectFirstNode = document.createComment('mui-inject-first'); + head.insertBefore(injectFirstNode, head.firstChild); + } context.jss = create({ plugins: jssPreset().plugins, insertionPoint: injectFirstNode }); } diff --git a/packages/mui-styles/src/makeStyles/makeStyles.js b/packages/mui-styles/src/makeStyles/makeStyles.js index b63593564873e4..dd1b9180a1954e 100644 --- a/packages/mui-styles/src/makeStyles/makeStyles.js +++ b/packages/mui-styles/src/makeStyles/makeStyles.js @@ -164,7 +164,9 @@ function useSynchronousEffect(func, values) { let output; // Store "generation" key. Just returns a new object every time - const currentKey = React.useMemo(() => ({}), [values]); // eslint-disable-line react-hooks/exhaustive-deps + // TODO: uncomment once we enable eslint-plugin-react-compiler // + // eslint-disable-next-line react-compiler/react-compiler + const currentKey = React.useMemo(() => ({}), values); // eslint-disable-line react-hooks/exhaustive-deps // "the first render", or "memo dropped the value" if (key.current !== currentKey) { From 7a2c7614ffd6f264d9c82b33699c09beaa327728 Mon Sep 17 00:00:00 2001 From: jlewins <142214262+jlewins@users.noreply.github.com> Date: Mon, 5 Aug 2024 11:32:11 +0100 Subject: [PATCH 3/4] Apply suggestions from code review MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Aarón García Hervás Signed-off-by: jlewins <142214262+jlewins@users.noreply.github.com> --- packages/mui-styles/src/makeStyles/makeStyles.js | 4 ++-- packages/mui-styles/src/withStyles/withStyles.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/mui-styles/src/makeStyles/makeStyles.js b/packages/mui-styles/src/makeStyles/makeStyles.js index dd1b9180a1954e..0ce17c592b9f6f 100644 --- a/packages/mui-styles/src/makeStyles/makeStyles.js +++ b/packages/mui-styles/src/makeStyles/makeStyles.js @@ -240,8 +240,8 @@ export default function makeStyles(stylesOrCreator, options = {}) { const classes = getClasses(instance.current, props.classes, Component); if (process.env.NODE_ENV !== 'production') { - // eslint-disable-next-line react-compiler/react-compiler - // eslint-disable-next-line react-hooks/rules-of-hooks + // TODO: uncomment once we enable eslint-plugin-react-compiler // eslint-disable-next-line react-compiler/react-compiler + // eslint-disable-next-line react-hooks/rules-of-hooks -- process.env never changes React.useDebugValue(classes); } if (process.env.NODE_ENV !== 'production') { diff --git a/packages/mui-styles/src/withStyles/withStyles.js b/packages/mui-styles/src/withStyles/withStyles.js index d0b7b5955773a5..1facd867a20694 100644 --- a/packages/mui-styles/src/withStyles/withStyles.js +++ b/packages/mui-styles/src/withStyles/withStyles.js @@ -57,7 +57,7 @@ const withStyles = if (typeof name === 'string' || withTheme) { // name and withTheme are invariant in the outer scope - // eslint-disable-next-line react-compiler/react-compiler + // TODO: uncomment once we enable eslint-plugin-react-compiler // eslint-disable-next-line react-compiler/react-compiler // eslint-disable-next-line react-hooks/rules-of-hooks theme = useTheme() || defaultTheme; From 4210f194ee8b0911c3d129c24a608c3b1311205c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= Date: Wed, 14 Aug 2024 11:19:34 +0200 Subject: [PATCH 4/4] Final adjustments --- packages/mui-styles/src/StylesProvider/StylesProvider.js | 4 +--- packages/mui-styles/src/makeStyles/makeStyles.js | 3 +-- 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/packages/mui-styles/src/StylesProvider/StylesProvider.js b/packages/mui-styles/src/StylesProvider/StylesProvider.js index 1f2a9a770a0110..32306d2e2b6841 100644 --- a/packages/mui-styles/src/StylesProvider/StylesProvider.js +++ b/packages/mui-styles/src/StylesProvider/StylesProvider.js @@ -84,9 +84,7 @@ export default function StylesProvider(props) { if (!context.jss.options.insertionPoint && injectFirst && typeof window !== 'undefined') { if (!injectFirstNode) { const head = document.head; - // TODO: uncomment once we enable eslint-plugin-react-compiler - // eslint-disable-next-line react-compiler/react-compiler -- injectFirstNode is called inside callback - // eslint-disable-next-line react-hooks/rules-of-hooks + // TODO: uncomment once we enable eslint-plugin-react-compiler // eslint-disable-next-line react-compiler/react-compiler -- injectFirstNode is called inside callback injectFirstNode = document.createComment('mui-inject-first'); head.insertBefore(injectFirstNode, head.firstChild); } diff --git a/packages/mui-styles/src/makeStyles/makeStyles.js b/packages/mui-styles/src/makeStyles/makeStyles.js index 0ce17c592b9f6f..ceaa03778448e6 100644 --- a/packages/mui-styles/src/makeStyles/makeStyles.js +++ b/packages/mui-styles/src/makeStyles/makeStyles.js @@ -164,8 +164,7 @@ function useSynchronousEffect(func, values) { let output; // Store "generation" key. Just returns a new object every time - // TODO: uncomment once we enable eslint-plugin-react-compiler // - // eslint-disable-next-line react-compiler/react-compiler + // TODO: uncomment once we enable eslint-plugin-react-compiler // eslint-disable-next-line react-compiler/react-compiler const currentKey = React.useMemo(() => ({}), values); // eslint-disable-line react-hooks/exhaustive-deps // "the first render", or "memo dropped the value"