Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

MUI: Compat with React 19 types #619

Closed
wants to merge 4 commits into from
Closed

MUI: Compat with React 19 types #619

wants to merge 4 commits into from

Conversation

eps1lon
Copy link
Owner

@eps1lon eps1lon commented Mar 18, 2024

Will include necessary changes to be compatible with 19. Type-checking may still fail due to 3rd party libraries not being compatible.

Closes eps1lon/DefinitelyTyped#19

Changes

Mostly ReactElement -> ReactElement<any> changes. We have so many here, since MUI heavily relies on element introspection so the amount of breaking changes is expected. I'll write an opt-in codemod that would cover most of it.

There was one with regards to useReducer which is also intended. In this case the new typing required isn't stricly better though.

Unresolved Issues

  • @react-spring/web uses the removed, global JSX namespace so it doesn't know about built-in components anymore. This lead to issues with e.g. <animated.div children={null} /> erroring because property 'children' does not exist on type ....
    Fixed by migration @react-spring/web to no longer use deprecated namespaces.
  • @emotion/react@11.11.4 references deprecated global JSX namespace
  • next@13.x references deprecated global JSX namespace

Typechecking performance

No significant change as far as I can tell.

React 19 types coldstart: `pnpm tsc -p tsconfig.json --extendedDiagnostics`
$ pnpm tsc -p tsconfig.json --extendedDiagnostics
Files:                         5960
Lines of Library:             37748
Lines of Definitions:        277358
Lines of TypeScript:         239045
Lines of JavaScript:          39468
Lines of JSON:                32185
Lines of Other:                   0
Identifiers:                 585756
Symbols:                    1977458
Types:                       676667
Instantiations:             2995126
Memory used:               1802116K
Assignability cache size:    448032
Identity cache size:         100671
Subtype cache size:          141045
Strict subtype cache size:    55382
I/O Read time:                0.33s
Parse time:                   0.73s
ResolveTypeReference time:    0.01s
ResolveModule time:           0.46s
ResolveLibrary time:          0.01s
Program time:                 1.80s
Bind time:                    0.49s
Check time:                  19.55s
I/O Write time:               0.00s
printTime time:               0.06s
Emit time:                    0.06s
Total time:                  21.90s

$ hyperfine --prepare 'rm tsconfig.tsbuildinfo' --runs 10 'pnpm tsc -p tsconfig.json --extendedDiagnostics'
Benchmark 1: pnpm tsc -p tsconfig.json --extendedDiagnostics
  Time (mean ± σ):     22.601 s ±  0.599 s    [User: 31.785 s, System: 1.088 s]
  Range (min … max):   21.817 s … 23.843 s    10 runs
React 18 types coldstart: `pnpm tsc -p tsconfig.json --extendedDiagnostics`
# coldstart
$ pnpm tsc -p tsconfig.json --extendedDiagnostics
Files:                         5961
Lines of Library:             37748
Lines of Definitions:        278013
Lines of TypeScript:         238949
Lines of JavaScript:          39468
Lines of JSON:                32185
Lines of Other:                   0
Identifiers:                 587610
Symbols:                    2036098
Types:                       689926
Instantiations:             3256312
Memory used:               1825582K
Assignability cache size:    460888
Identity cache size:         101990
Subtype cache size:          141685
Strict subtype cache size:    55305
I/O Read time:                0.39s
Parse time:                   0.73s
ResolveTypeReference time:    0.02s
ResolveModule time:           0.61s
ResolveLibrary time:          0.00s
Program time:                 2.01s
Bind time:                    0.49s
Check time:                  19.09s
I/O Write time:               0.00s
printTime time:               0.05s
Emit time:                    0.05s
Total time:                  21.64s

$ hyperfine --prepare 'rm tsconfig.tsbuildinfo' --runs 10 'pnpm tsc -p tsconfig.json --extendedDiagnostics
Benchmark 1: pnpm tsc -p tsconfig.json --extendedDiagnostics
  Time (mean ± σ):     23.012 s ±  0.849 s    [User: 32.046 s, System: 1.092 s]
  Range (min … max):   22.027 s … 24.411 s    10 runs

Copy link

vercel bot commented Mar 18, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
material-ui ❌ Failed (Inspect) Mar 19, 2024 11:33pm

@@ -41,13 +41,13 @@ describe('utils/getDisplayName.js', () => {
));
NamedForwardRefComponent.displayName = 'Div';

const AnonymousMemoComponent = React.memo((props, ref) => <div {...props} ref={ref} />);
const AnonymousMemoComponent = React.memo((props) => <div {...props} />);
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Was not caught previously because types assumed the ref argument is actually the legacy context. Now that we removed legacy context, this bug is surface.

@@ -1001,13 +1001,17 @@ function GlobalVariantForm({
onRemove: (token: string) => void;
}) {
const [selectedVariant, setSelectedVariant] = React.useState<VariantProp>('solid');
const [states, setStates] = React.useReducer<
StateReducer<{ hover: boolean; active: boolean; disabled: boolean }>
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

One less utility type 👍🏻

@eps1lon
Copy link
Owner Author

eps1lon commented Mar 19, 2024

Emotion is informed, Next 13 no longer maintained, @react-spring/web will be added to eps1lon/DefinitelyTyped#25

@eps1lon eps1lon closed this Mar 19, 2024
@eps1lon eps1lon changed the title Compat with React 19 types MUI: Compat with React 19 types Mar 21, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: Done
Development

Successfully merging this pull request may close these issues.

React 19 and MUI
1 participant