chore(react-utilities): slot API react v17/18 support #31548
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Collaborator
Perf Analysis (
|
| Scenario | Render type | Master Ticks | PR Ticks | Iterations | Status |
|---|---|---|---|---|---|
| FluentProviderWithTheme | virtual-rerender | 32 | 38 | 10 | Possible regression |
All results
| Scenario | Render type | Master Ticks | PR Ticks | Iterations | Status |
|---|---|---|---|---|---|
| Avatar | mount | 630 | 622 | 5000 | |
| Button | mount | 303 | 309 | 5000 | |
| Field | mount | 1158 | 1128 | 5000 | |
| FluentProvider | mount | 683 | 704 | 5000 | |
| FluentProviderWithTheme | mount | 84 | 85 | 10 | |
| FluentProviderWithTheme | virtual-rerender | 32 | 38 | 10 | Possible regression |
| FluentProviderWithTheme | virtual-rerender-with-unmount | 81 | 77 | 10 | |
| MakeStyles | mount | 865 | 871 | 50000 | |
| Persona | mount | 1786 | 1737 | 5000 | |
| SpinButton | mount | 1369 | 1421 | 5000 | |
| SwatchPicker | mount | 1663 | 1640 | 5000 |
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. |
Collaborator
📊 Bundle size report
Unchanged fixtures
|
bsunderhus
force-pushed
the
react-utilities/chore--slot-API-react-v17/18-support
branch
6 times, most recently
from
3421071 to
9a444bd
Compare
bsunderhus
requested review from
a team,
GeoffCoxMSFT,
chpalac,
khmakoto,
ling1726 and
sopranopillow
as code owners
bsunderhus
force-pushed
the
react-utilities/chore--slot-API-react-v17/18-support
branch
from
3279340 to
a54bb34
Compare
bsunderhus
force-pushed
the
react-utilities/chore--slot-API-react-v17/18-support
branch
3 times, most recently
from
c906ba8 to
fcc5a3b
Compare
bsunderhus
force-pushed
the
react-utilities/chore--slot-API-react-v17/18-support
branch
5 times, most recently
from
b7ee301 to
b2e0476
Compare
bsunderhus
force-pushed
the
react-utilities/chore--slot-API-react-v17/18-support
branch
3 times, most recently
from
ce2cfbb to
4b3bba1
Compare
1 task
mainframev
force-pushed
the
react-utilities/chore--slot-API-react-v17/18-support
branch
from
4b3bba1 to
c25417c
Compare
github-actions
bot
modified the milestones:
August Project Cycle Q3 2024,
February Project Cycle Q1 2025
|
Pull request demo site: URL |
📊 Bundle size report
Unchanged fixtures
|
mainframev
force-pushed
the
react-utilities/chore--slot-API-react-v17/18-support
branch
from
1e8b5f4 to
dd89673
Compare
github-actions
bot
modified the milestones:
February Project Cycle Q1 2025,
March Project Cycle Q1 2025
mainframev
force-pushed
the
react-utilities/chore--slot-API-react-v17/18-support
branch
from
dd89673 to
393bfec
Compare
fabricteam
reviewed
Mar 18, 2025
| @@ -0,0 +1,7 @@ | |||
| { | |||
Collaborator
There was a problem hiding this comment.
🕵🏾♀️ visual regressions to review in the fluentuiv9 Visual Regression Report
Avatar Converged 1 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| Avatar Converged.badgeMask - RTL.normal.chromium.png | 2 | Changed |
Hotell
reviewed
Mar 19, 2025
| */ | ||
| export function getSlots<R extends SlotPropsRecord>( | ||
| state: ComponentState<R>, | ||
| state: unknown, |
Contributor
There was a problem hiding this comment.
fyi: all of these functions have bad design as they use misused generics. would be great to address this in this PR as we are introducing breaking changes on type already.
see https://typescript-eslint.io/rules/no-unnecessary-type-parameters/ and https://typescript-eslint.io/rules/no-unnecessary-type-constraint/
Hotell
reviewed
Mar 19, 2025
| @@ -1,9 +1,10 @@ | |||
| import * as React from 'react'; | |||
| import { SlotComponentType, UnknownSlotProps } from '@fluentui/react-utilities'; | |||
| import { SlotComponentType } from '@fluentui/react-utilities'; | |||
Contributor
There was a problem hiding this comment.
Suggested change
| import { SlotComponentType } from '@fluentui/react-utilities'; | |
| import type { SlotComponentType } from '@fluentui/react-utilities'; |
Hotell
reviewed
Mar 19, 2025
| // eslint-disable-next-line @typescript-eslint/no-deprecated | ||
| export const useARIAButtonShorthand: ResolveShorthandFunction<ARIAButtonSlotProps> = (value, options) => { | ||
| // eslint-disable-next-line @typescript-eslint/no-deprecated, @typescript-eslint/no-explicit-any | ||
| export const useARIAButtonShorthand: ResolveShorthandFunction<any> = ((value, options) => { |
Contributor
There was a problem hiding this comment.
- why are we using
anyas generic ? - you can remove the explicit annotation as you are using assertion already
Suggested change
| export const useARIAButtonShorthand: ResolveShorthandFunction<any> = ((value, options) => { | |
| export const useARIAButtonShorthand = ((value, options) => { |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Previous Behavior
Slots API breaks on v18! 💣
ReactNode
The
ReactNodetype became more specific (there was a type leak onReactFragmenttype where{}was a valid type, and{}in typescript allows any of the primitive types butnullorundefinedmore info about this, here's a playground), and due to that specificity our declaration of what a slot is starts breaking on@types/react@18Here's a playground showcasing the error
RefAttributes
React.RefAttributesis therefproperty. In react v17 that would be equivalent to:Now in react v18 it became:
LegacyRefincludes the support to usestringas a valid reference value. This will break into our API 💣💣New Behavior
SlotPropsDataTypein favor ofUnknownSlotPropshttps://github.com/microsoft/fluentui/pull/31548/files#diff-06ee7aed2b4bc7589d4c744c7c6649fbee2ff0129915f344768e361a6cfb4dcdR5-R10UnknownSlotProps- its type is not equivalent to the actual signature of a slot. We do not have any restriction thatchildrenshould beReactNode | undefined,childrencan be any value. The only verification we have is if children is a function than its considered a render function, but we do not limit the children type in any way, in fact some of our components modifychildrensignature to be more specific like:fluentui/packages/react-components/react-field/src/components/Field/Field.types.ts
Line 63 in 5a8d7a2
fluentui/packages/react-components/react-utilities/src/trigger/types.ts
Line 28 in ee9ca8f
fluentui/packages/react-components/react-message-bar/src/components/MessageBarGroup/MessageBarGroup.types.ts
Line 12 in 40e6a37
fluentui/packages/react-components/react-popover/src/components/Popover/Popover.types.ts
Line 28 in 4cfa006
SlotShorthandValueto supportIterable<ReactNode>instead ofReactNode[](v18 modification)WithSlotRenderFunctionto properly include render function method (Fixes Can't use children render function in slots without Typescript errors #27090)WithoutSlotRenderFunctionSlotPropsDataTypedoes not have the requirement ofchildren?: ReactNodethe render function signature will leak, and this is a mistake in two scenarios:ComponentPropsshould not have a render functionSlotComponentTypeproperties should not have a render functionVoidFunctionComponentfromSlotgeneric signature (it is deprecated and redundant type, ComponentType covers the same use case)cloneTriggerTreeupdates signature to properly assume the possibility of more than justReactNodefromchildrenvalue.ForwardRefComponentandgetIntrinsicElementPropsupdates to stop usingReact.RefAttributes(in the v18 upgrade this type now supportLegacyRef, which we do not support)What are the Breaking Changes here?
UnknownSlotPropsand now depends onSlotPropsDataTypebecame less strictComponentPropsnow explicitly removes render function signatures from primary slot (this was already supposed to be like that, it's a bugfix IMO)ComponentStateexplicitly removes render function signatures to ensure things were as they we beforeTechnically, if the client is using
Slot,ComponentProps,ComponentState, anslot.*there'll be no breaking changes (as we are just moving verifications from one type to another) but if that is not the case then we could have some false positives due to the wider signature ofSlotPropsDataTypeRelated Issue(s)