From f28f154fa42b6f3902e6742512d8722a0e08ab3b Mon Sep 17 00:00:00 2001 From: yash49 <49yash@gmail.com> Date: Sun, 18 Aug 2024 17:51:31 +0530 Subject: [PATCH 1/6] fix: make imports statically unanalysable --- packages/mui-system/src/useMediaQuery/useMediaQuery.ts | 5 +++-- packages/mui-utils/src/useId/useId.ts | 5 +++-- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/mui-system/src/useMediaQuery/useMediaQuery.ts b/packages/mui-system/src/useMediaQuery/useMediaQuery.ts index 17f0015e0dc433..a81e15b03036ca 100644 --- a/packages/mui-system/src/useMediaQuery/useMediaQuery.ts +++ b/packages/mui-system/src/useMediaQuery/useMediaQuery.ts @@ -71,8 +71,9 @@ function useMediaQueryOld( return match; } -// eslint-disable-next-line no-useless-concat -- Workaround for https://github.com/webpack/webpack/issues/14814 -const maybeReactUseSyncExternalStore: undefined | any = (React as any)['useSyncExternalStore' + '']; +// eslint-disable-next-line no-underscore-dangle, @typescript-eslint/naming-convention -- Workaround for https://github.com/webpack/webpack/issues/14814 +const _React = { ...React }; +const maybeReactUseSyncExternalStore: undefined | any = _React.useSyncExternalStore; function useMediaQueryNew( query: string, diff --git a/packages/mui-utils/src/useId/useId.ts b/packages/mui-utils/src/useId/useId.ts index 6f60170a8a72f4..47c8cd3fcec044 100644 --- a/packages/mui-utils/src/useId/useId.ts +++ b/packages/mui-utils/src/useId/useId.ts @@ -18,8 +18,9 @@ function useGlobalId(idOverride?: string): string | undefined { return id; } -// downstream bundlers may remove unnecessary concatenation, but won't remove toString call -- Workaround for https://github.com/webpack/webpack/issues/14814 -const maybeReactUseId: undefined | (() => string) = (React as any)['useId'.toString()]; +// eslint-disable-next-line no-underscore-dangle, @typescript-eslint/naming-convention -- Workaround for https://github.com/webpack/webpack/issues/14814 +const _React = { ...React }; +const maybeReactUseId: undefined | (() => string) = _React.useId; /** * * @example
From 3583ab2ab1a607fd42a98d51a7eae31f013c11f7 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sat, 14 Sep 2024 22:36:44 +0200 Subject: [PATCH 2/6] cleanup --- packages/mui-utils/src/useId/useId.test.js | 2 +- packages/mui-utils/src/useId/useId.ts | 3 +++ 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/mui-utils/src/useId/useId.test.js b/packages/mui-utils/src/useId/useId.test.js index 7a545ac2d5fac7..3042083d28d921 100644 --- a/packages/mui-utils/src/useId/useId.test.js +++ b/packages/mui-utils/src/useId/useId.test.js @@ -1,7 +1,7 @@ import * as React from 'react'; import { expect } from 'chai'; import { createRenderer, screen } from '@mui/internal-test-utils'; -import useId from './useId'; +import useId from '@mui/utils/useId'; describe('useId', () => { const { render, renderToString } = createRenderer(); diff --git a/packages/mui-utils/src/useId/useId.ts b/packages/mui-utils/src/useId/useId.ts index 47c8cd3fcec044..dbff048e26cfca 100644 --- a/packages/mui-utils/src/useId/useId.ts +++ b/packages/mui-utils/src/useId/useId.ts @@ -21,6 +21,7 @@ function useGlobalId(idOverride?: string): string | undefined { // eslint-disable-next-line no-underscore-dangle, @typescript-eslint/naming-convention -- Workaround for https://github.com/webpack/webpack/issues/14814 const _React = { ...React }; const maybeReactUseId: undefined | (() => string) = _React.useId; + /** * * @example
@@ -28,10 +29,12 @@ const maybeReactUseId: undefined | (() => string) = _React.useId; * @returns {string} */ export default function useId(idOverride?: string): string | undefined { + // React.useId() is only available from React 17.0.0. if (maybeReactUseId !== undefined) { const reactId = maybeReactUseId(); return idOverride ?? reactId; } + // 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 -- `React.useId` is invariant at runtime. return useGlobalId(idOverride); From b6560cf8c39fc1f79f0f19446fb1277231648fec Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sat, 14 Sep 2024 22:40:25 +0200 Subject: [PATCH 3/6] leave todos --- packages/mui-system/src/useMediaQuery/useMediaQuery.ts | 2 +- packages/mui-utils/src/useId/useId.ts | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/mui-system/src/useMediaQuery/useMediaQuery.ts b/packages/mui-system/src/useMediaQuery/useMediaQuery.ts index a81e15b03036ca..ec9de6519af56c 100644 --- a/packages/mui-system/src/useMediaQuery/useMediaQuery.ts +++ b/packages/mui-system/src/useMediaQuery/useMediaQuery.ts @@ -30,6 +30,7 @@ export interface UseMediaQueryOptions { ssrMatchMedia?: (query: string) => { matches: boolean }; } +// TODO React 17: Remove `useMediaQueryOld` once React 17 support is removed function useMediaQueryOld( query: string, defaultMatches: boolean, @@ -149,7 +150,6 @@ export default function useMediaQuery( let query = typeof queryInput === 'function' ? queryInput(theme) : queryInput; query = query.replace(/^@media( ?)/m, ''); - // TODO: Drop `useMediaQueryOld` and use `use-sync-external-store` shim in `useMediaQueryNew` once the package is stable const useMediaQueryImplementation = maybeReactUseSyncExternalStore !== undefined ? useMediaQueryNew : useMediaQueryOld; const match = useMediaQueryImplementation( diff --git a/packages/mui-utils/src/useId/useId.ts b/packages/mui-utils/src/useId/useId.ts index dbff048e26cfca..c4e89fe58f1420 100644 --- a/packages/mui-utils/src/useId/useId.ts +++ b/packages/mui-utils/src/useId/useId.ts @@ -2,6 +2,8 @@ import * as React from 'react'; let globalId = 0; + +// TODO React 17: Remove `useGlobalId` once React 17 support is removed function useGlobalId(idOverride?: string): string | undefined { const [defaultId, setDefaultId] = React.useState(idOverride); const id = idOverride || defaultId; From c438480e7062922c6dbbabac8891e9992ab19a97 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sat, 14 Sep 2024 22:48:40 +0200 Subject: [PATCH 4/6] use floating ui variable name, it's clearer --- packages/mui-system/src/useMediaQuery/useMediaQuery.ts | 4 ++-- packages/mui-utils/src/useId/useId.ts | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/mui-system/src/useMediaQuery/useMediaQuery.ts b/packages/mui-system/src/useMediaQuery/useMediaQuery.ts index ec9de6519af56c..a65625e6da6c28 100644 --- a/packages/mui-system/src/useMediaQuery/useMediaQuery.ts +++ b/packages/mui-system/src/useMediaQuery/useMediaQuery.ts @@ -73,8 +73,8 @@ function useMediaQueryOld( } // eslint-disable-next-line no-underscore-dangle, @typescript-eslint/naming-convention -- Workaround for https://github.com/webpack/webpack/issues/14814 -const _React = { ...React }; -const maybeReactUseSyncExternalStore: undefined | any = _React.useSyncExternalStore; +const safeReact = { ...React }; +const maybeReactUseSyncExternalStore: undefined | any = safeReact.useSyncExternalStore; function useMediaQueryNew( query: string, diff --git a/packages/mui-utils/src/useId/useId.ts b/packages/mui-utils/src/useId/useId.ts index c4e89fe58f1420..1752f24611d567 100644 --- a/packages/mui-utils/src/useId/useId.ts +++ b/packages/mui-utils/src/useId/useId.ts @@ -21,8 +21,8 @@ function useGlobalId(idOverride?: string): string | undefined { } // eslint-disable-next-line no-underscore-dangle, @typescript-eslint/naming-convention -- Workaround for https://github.com/webpack/webpack/issues/14814 -const _React = { ...React }; -const maybeReactUseId: undefined | (() => string) = _React.useId; +const safeReact = { ...React }; +const maybeReactUseId: undefined | (() => string) = safeReact.useId; /** * From 6818b1a833f9a035b731e2fddae928a10defb732 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sat, 14 Sep 2024 22:50:03 +0200 Subject: [PATCH 5/6] provide more context to the next developer --- packages/mui-system/src/useMediaQuery/useMediaQuery.ts | 3 ++- packages/mui-utils/src/useId/useId.ts | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/mui-system/src/useMediaQuery/useMediaQuery.ts b/packages/mui-system/src/useMediaQuery/useMediaQuery.ts index a65625e6da6c28..62b6ff119a3b02 100644 --- a/packages/mui-system/src/useMediaQuery/useMediaQuery.ts +++ b/packages/mui-system/src/useMediaQuery/useMediaQuery.ts @@ -72,7 +72,8 @@ function useMediaQueryOld( return match; } -// eslint-disable-next-line no-underscore-dangle, @typescript-eslint/naming-convention -- Workaround for https://github.com/webpack/webpack/issues/14814 +// See https://github.com/mui/material-ui/issues/41190#issuecomment-2040873379 for why +// eslint-disable-next-line no-underscore-dangle, @typescript-eslint/naming-convention const safeReact = { ...React }; const maybeReactUseSyncExternalStore: undefined | any = safeReact.useSyncExternalStore; diff --git a/packages/mui-utils/src/useId/useId.ts b/packages/mui-utils/src/useId/useId.ts index 1752f24611d567..20c9f2431dbe0a 100644 --- a/packages/mui-utils/src/useId/useId.ts +++ b/packages/mui-utils/src/useId/useId.ts @@ -20,7 +20,8 @@ function useGlobalId(idOverride?: string): string | undefined { return id; } -// eslint-disable-next-line no-underscore-dangle, @typescript-eslint/naming-convention -- Workaround for https://github.com/webpack/webpack/issues/14814 +// See https://github.com/mui/material-ui/issues/41190#issuecomment-2040873379 for why +// eslint-disable-next-line no-underscore-dangle, @typescript-eslint/naming-convention const safeReact = { ...React }; const maybeReactUseId: undefined | (() => string) = safeReact.useId; From b3840af957896c700b810412dc715f94b5f026c5 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 15 Sep 2024 01:32:28 +0200 Subject: [PATCH 6/6] Fix CI --- packages/mui-system/src/useMediaQuery/useMediaQuery.ts | 1 - packages/mui-utils/src/useId/useId.ts | 1 - 2 files changed, 2 deletions(-) diff --git a/packages/mui-system/src/useMediaQuery/useMediaQuery.ts b/packages/mui-system/src/useMediaQuery/useMediaQuery.ts index 62b6ff119a3b02..0c4bf8c9e5e4e1 100644 --- a/packages/mui-system/src/useMediaQuery/useMediaQuery.ts +++ b/packages/mui-system/src/useMediaQuery/useMediaQuery.ts @@ -73,7 +73,6 @@ function useMediaQueryOld( } // See https://github.com/mui/material-ui/issues/41190#issuecomment-2040873379 for why -// eslint-disable-next-line no-underscore-dangle, @typescript-eslint/naming-convention const safeReact = { ...React }; const maybeReactUseSyncExternalStore: undefined | any = safeReact.useSyncExternalStore; diff --git a/packages/mui-utils/src/useId/useId.ts b/packages/mui-utils/src/useId/useId.ts index 20c9f2431dbe0a..2769752229cb8f 100644 --- a/packages/mui-utils/src/useId/useId.ts +++ b/packages/mui-utils/src/useId/useId.ts @@ -21,7 +21,6 @@ function useGlobalId(idOverride?: string): string | undefined { } // See https://github.com/mui/material-ui/issues/41190#issuecomment-2040873379 for why -// eslint-disable-next-line no-underscore-dangle, @typescript-eslint/naming-convention const safeReact = { ...React }; const maybeReactUseId: undefined | (() => string) = safeReact.useId;