Improve type checking for mergeProps by behowell · Pull Request #17508 · microsoft/fluentui

behowell · 2021-03-20T01:31:23Z

Pull request checklist

Implements changes discussed in RFC RFC: Improved type checking for component props #17232
Include a change request file using $ yarn change

Description of changes

Add ComponentState helper type that defines the State type from the Props type, for converged components
Improve type checking for mergeProps:
- The first parameter must be a valid State object, and must provide values for every prop that should have a default
- All other parameters must be partial State objects
Make minor type fixes to some components, caught by the updated type checking
Add makeMergePropsCompat function that maintains the more permissive type checking for components that require more involved fixes

…ompat for existing uses that need to be updated

codesandbox-ci · 2021-03-20T01:41:57Z

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.

Latest deployment of this branch, based on commit 6250191:

Sandbox	Source
Fluent UI Button	Configuration
codesandbox-react-template	Configuration
codesandbox-react-northstar-template	Configuration

size-auditor · 2021-03-20T02:00:35Z

Asset size changes

Project	Bundle	Baseline Size	New Size	Difference
office-ui-fabric-react	fluentui-react-components-Button	38.024 kB	38.023 kB	-1 bytes
office-ui-fabric-react	fluentui-react-components-Divider	32.977 kB	32.973 kB	-4 bytes
office-ui-fabric-react	fluentui-react-components-Link	32.928 kB	32.916 kB	-12 bytes
office-ui-fabric-react	fluentui-react-components-Image	32.733 kB	32.721 kB	-12 bytes
office-ui-fabric-react	fluentui-react-components-Avatar	45.638 kB	45.351 kB	-287 bytes

Over Tolerance (1024 B) Over Baseline Below Baseline New Removed 1 kB = 1000 B

Baseline commit: 7d60d28fb73b3cb48acd943f8fd4f4f91916e4dc (build)

fabricteam · 2021-03-20T02:07:47Z

Perf Analysis

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
buttonNative	mount	113	115	5000	Possible regression

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	945	919	5000
BaseButton	mount	909	893	5000
Breadcrumb	mount	43942	44020	5000
ButtonNext	mount	570	562	5000
Checkbox	mount	1553	1512	5000
CheckboxBase	mount	1355	1283	5000
ChoiceGroup	mount	4657	4621	5000
ComboBox	mount	989	993	1000
CommandBar	mount	10173	10092	1000
ContextualMenu	mount	6256	6154	1000
DefaultButton	mount	1104	1125	5000
DetailsRow	mount	3536	3634	5000
DetailsRowFast	mount	3612	3624	5000
DetailsRowNoStyles	mount	3456	3475	5000
Dialog	mount	1452	1435	1000
DocumentCardTitle	mount	1854	1859	1000
Dropdown	mount	3309	3268	5000
FocusTrapZone	mount	1741	1747	5000
FocusZone	mount	1830	1793	5000
IconButton	mount	1716	1702	5000
Label	mount	345	332	5000
Layer	mount	1756	1785	5000
Link	mount	471	461	5000
MakeStyles	mount	1824	1841	50000
MenuButton	mount	1440	1432	5000
MessageBar	mount	2034	2018	5000
Nav	mount	3228	3251	1000
OverflowSet	mount	1044	1026	5000
Panel	mount	1446	1421	1000
Persona	mount	810	833	1000
Pivot	mount	1407	1401	1000
PrimaryButton	mount	1270	1267	5000
Rating	mount	7524	7684	5000
SearchBox	mount	1346	1295	5000
Shimmer	mount	2505	2535	5000
Slider	mount	1934	1944	5000
SpinButton	mount	4964	4880	5000
Spinner	mount	424	418	5000
SplitButton	mount	3153	3144	5000
Stack	mount	504	494	5000
StackWithIntrinsicChildren	mount	1544	1558	5000
StackWithTextChildren	mount	4469	4466	5000
SwatchColorPicker	mount	10118	10117	5000
Tabs	mount	1422	1405	1000
TagPicker	mount	2823	2832	5000
TeachingBubble	mount	11558	11534	5000
Text	mount	413	422	5000
TextField	mount	1363	1344	5000
ThemeProvider	mount	1176	1182	5000
ThemeProvider	virtual-rerender	600	622	5000
ThemeProviderNext	mount	15880	15883	5000
Toggle	mount	805	785	5000
buttonNative	mount	113	115	5000	Possible regression

Perf Analysis (Fluent)

Perf comparison

Status	Scenario	Fluent TPI	Fabric TPI	Ratio	Iterations	Ticks
🦄	Avatar.Fluent	0.16	0.47	0.34:1	2000	329
🦄	Button.Fluent	0.11	0.2	0.55:1	5000	538
🔧	Checkbox.Fluent	0.63	0.35	1.8:1	1000	627
🎯	Dialog.Fluent	0.15	0.21	0.71:1	5000	744
🔧	Dropdown.Fluent	3.1	0.4	7.75:1	1000	3100
🔧	Icon.Fluent	0.13	0.06	2.17:1	5000	633
🦄	Image.Fluent	0.08	0.13	0.62:1	5000	388
🔧	Slider.Fluent	1.59	0.46	3.46:1	1000	1592
🔧	Text.Fluent	0.07	0.03	2.33:1	5000	350
🦄	Tooltip.Fluent	0.14	0.89	0.16:1	5000	712

🔧 Needs work 🎯 On target 🦄 Amazing

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
AccordionMinimalPerf.default	163	151	1.08:1
VideoMinimalPerf.default	656	609	1.08:1
ButtonMinimalPerf.default	191	179	1.07:1
ChatDuplicateMessagesPerf.default	308	291	1.06:1
FormMinimalPerf.default	420	398	1.06:1
HeaderMinimalPerf.default	387	365	1.06:1
AttachmentMinimalPerf.default	174	165	1.05:1
PortalMinimalPerf.default	177	168	1.05:1
SegmentMinimalPerf.default	361	344	1.05:1
Image.Fluent	388	370	1.05:1
TableMinimalPerf.default	431	415	1.04:1
TextMinimalPerf.default	377	362	1.04:1
Icon.Fluent	633	609	1.04:1
CardMinimalPerf.default	560	546	1.03:1
ImageMinimalPerf.default	395	385	1.03:1
RefMinimalPerf.default	257	250	1.03:1
SkeletonMinimalPerf.default	374	364	1.03:1
TextAreaMinimalPerf.default	493	478	1.03:1
AttachmentSlotsPerf.default	1186	1162	1.02:1
DialogMinimalPerf.default	744	729	1.02:1
DropdownManyItemsPerf.default	694	678	1.02:1
GridMinimalPerf.default	349	343	1.02:1
ListMinimalPerf.default	514	502	1.02:1
MenuMinimalPerf.default	896	879	1.02:1
PopupMinimalPerf.default	723	711	1.02:1
ReactionMinimalPerf.default	392	384	1.02:1
IconMinimalPerf.default	639	626	1.02:1
ButtonSlotsPerf.default	563	560	1.01:1
ChatMinimalPerf.default	625	621	1.01:1
CheckboxMinimalPerf.default	2748	2730	1.01:1
LabelMinimalPerf.default	409	406	1.01:1
ListCommonPerf.default	627	623	1.01:1
ListNestedPerf.default	585	581	1.01:1
ListWith60ListItems.default	660	651	1.01:1
MenuButtonMinimalPerf.default	1554	1535	1.01:1
StatusMinimalPerf.default	683	677	1.01:1
Checkbox.Fluent	627	623	1.01:1
Tooltip.Fluent	712	702	1.01:1
ButtonUseCssPerf.default	804	805	1:1
ButtonUseCssNestingPerf.default	1068	1065	1:1
DatepickerMinimalPerf.default	45424	45531	1:1
DividerMinimalPerf.default	376	376	1:1
EmbedMinimalPerf.default	4152	4140	1:1
HeaderSlotsPerf.default	760	760	1:1
LoaderMinimalPerf.default	712	711	1:1
ProviderMergeThemesPerf.default	1683	1689	1:1
RadioGroupMinimalPerf.default	445	443	1:1
SliderMinimalPerf.default	1597	1598	1:1
SplitButtonMinimalPerf.default	3711	3724	1:1
ToolbarMinimalPerf.default	959	960	1:1
Dialog.Fluent	744	743	1:1
AvatarMinimalPerf.default	202	204	0.99:1
BoxMinimalPerf.default	356	359	0.99:1
ButtonOverridesMissPerf.default	1679	1697	0.99:1
DropdownMinimalPerf.default	3093	3111	0.99:1
InputMinimalPerf.default	1267	1275	0.99:1
ProviderMinimalPerf.default	1005	1014	0.99:1
TableManyItemsPerf.default	1879	1901	0.99:1
CustomToolbarPrototype.default	3855	3895	0.99:1
Dropdown.Fluent	3100	3122	0.99:1
Slider.Fluent	1592	1604	0.99:1
AnimationMinimalPerf.default	413	421	0.98:1
CarouselMinimalPerf.default	469	477	0.98:1
FlexMinimalPerf.default	291	298	0.98:1
ItemLayoutMinimalPerf.default	1239	1267	0.98:1
TooltipMinimalPerf.default	984	999	0.98:1
TreeMinimalPerf.default	789	804	0.98:1
TreeWith60ListItems.default	179	183	0.98:1
Button.Fluent	538	547	0.98:1
Text.Fluent	350	356	0.98:1
LayoutMinimalPerf.default	376	386	0.97:1
RosterPerf.default	1143	1179	0.97:1
Avatar.Fluent	329	340	0.97:1
AlertMinimalPerf.default	272	292	0.93:1
ChatWithPopoverPerf.default	369	397	0.93:1

packages/react-utilities/src/compose/types.ts

layershifter · 2021-03-22T10:00:01Z

Add makeMergePropsCompat function that maintains the more permissive type checking for components that require more involved fixes

Can we you please create an issue to track removal of makeMergePropsCompat()?

packages/react-utilities/src/compose/types.ts

behowell · 2021-03-24T18:28:02Z

Add makeMergePropsCompat function that maintains the more permissive type checking for components that require more involved fixes

Can we you please create an issue to track removal of makeMergePropsCompat()?

I logged issues for each package that needs to be updated: #17553, #17554, #17555, #17556, #17557

…onverged-component-state

…ll/fluentui into converged-component-state

…onverged-component-state

msft-fluent-ui-bot · 2021-03-30T18:07:48Z

Hello @behowell!

Because this pull request has the AutoMerge label, I will be glad to assist with helping to merge this pull request once all check-in policies pass.

p.s. you can customize the way I help with merging this pull request, such as holding this pull request until a specific person approves. Simply @mention me (`@msft-fluent-ui-bot`) and give me an instruction to get started! Learn more here.

msft-fluent-ui-bot · 2021-03-31T07:33:37Z

🎉@fluentui/react-utilities@v9.0.0-alpha.14 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-03-31T07:33:42Z

🎉@fluentui/react-theme-provider@v9.0.0-alpha.17 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-03-31T07:33:57Z

🎉@fluentui/react-provider@v9.0.0-alpha.17 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-03-31T07:34:03Z

🎉@fluentui/react-link@v9.0.0-alpha.18 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-03-31T07:34:13Z

🎉@fluentui/react-image@v9.0.0-alpha.18 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-03-31T07:34:27Z

🎉@fluentui/react-focus-management@v9.0.0-alpha.13 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-03-31T07:34:33Z

🎉@fluentui/react-flex@v9.0.0-alpha.10 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-03-31T07:34:45Z

🎉@fluentui/react-text@v0.2.7 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-03-31T07:35:06Z

🎉@fluentui/react-divider@v9.0.0-alpha.7 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-03-31T07:35:24Z

🎉@fluentui/react-cards@v1.0.0-beta.77 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-03-31T07:35:36Z

🎉@fluentui/react-badge@v9.0.0-alpha.20 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-03-31T07:35:39Z

🎉@fluentui/react-button@v9.0.0-alpha.18 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-03-31T07:35:45Z

🎉@fluentui/react-avatar@v9.0.0-alpha.18 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-03-31T07:37:01Z

🎉@fluentui/react-examples@v8.11.0 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-03-31T07:37:03Z

🎉@fluentui/react-accordion@v9.0.0-alpha.8 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-03-31T07:37:06Z

🎉@fluentui/react-menu@v0.13.0 has been released which incorporates this pull request.:tada:

Handy links:

#### Pull request checklist - [x] Implements changes discussed in RFC microsoft#17232 - [x] Include a change request file using `$ yarn change` #### Description of changes * Add `ComponentState` helper type that defines the State type from the Props type, for converged components * Improve type checking for `mergeProps`: * The first parameter must be a valid State object, and must provide values for every prop that should have a default * All other parameters must be partial State objects * Make minor type fixes to some components, caught by the updated type checking * Add `makeMergePropsCompat` function that maintains the more permissive type checking for components that require more involved fixes

behowell added 8 commits March 19, 2021 16:53

Add ComponentState helper type

bac5629

Add type checking to makeMergeProps, and add fallback makeMergePropsC…

2ce4999

…ompat for existing uses that need to be updated

Update ObjectShorthandProps to always include ComponentProps

3febb42

Simplify makeMergePropsCompat and mark deprecated

75649d2

Update Avatar to use ComponentState

0f263fb

Minor edits to fix build breaks in some projects

74321b4

Convert some projects to makeMergePropsCompat

741bde0

Change files

356c394

behowell requested review from Hotell, khmakoto, layershifter and ling1726 March 20, 2021 01:31

behowell requested review from assuncaocharles and dzearing as code owners March 20, 2021 01:31

msft-fluent-ui-bot assigned khmakoto Mar 20, 2021

behowell changed the title ~~Converged component state~~ Improve type checking for mergeProps Mar 20, 2021

layershifter reviewed Mar 22, 2021

View reviewed changes

packages/react-utilities/src/compose/types.ts Show resolved Hide resolved

layershifter reviewed Mar 22, 2021

View reviewed changes

packages/react-utilities/src/compose/types.ts Outdated Show resolved Hide resolved

behowell added 2 commits March 24, 2021 11:30

Update ShorthandProps to reference ObjectShorthandProps

bdd88bc

Merge branch 'master' of https://github.com/microsoft/fluentui into c…

70ce1a7

…onverged-component-state

ling1726 approved these changes Mar 30, 2021

View reviewed changes

dzearing approved these changes Mar 30, 2021

View reviewed changes

behowell mentioned this pull request Mar 30, 2021

RFC: Improved type checking for component props #17232

Merged

khmakoto approved these changes Mar 30, 2021

View reviewed changes

behowell added 4 commits March 30, 2021 10:24

Merge branch 'master' of https://github.com/microsoft/fluentui into c…

c8eeac1

…onverged-component-state

Merge branch 'converged-component-state' of https://github.com/behowe…

8387623

…ll/fluentui into converged-component-state

Merge branch 'master' of https://github.com/microsoft/fluentui into c…

c9ef304

…onverged-component-state

Merge branch 'master' of https://github.com/microsoft/fluentui into c…

6250191

…onverged-component-state

behowell added the AutoMerge label Mar 30, 2021

msft-fluent-ui-bot merged commit e45eeab into microsoft:master Mar 30, 2021

behowell deleted the converged-component-state branch March 30, 2021 19:06

behowell mentioned this pull request Apr 3, 2021

Update makeMergePropsCompat to makeMergeProps in react-provider, react-theme-provider, react-tabster #17693

Closed

2 tasks

Conversation

behowell commented Mar 20, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Pull request checklist

Description of changes

Uh oh!

codesandbox-ci bot commented Mar 20, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

size-auditor bot commented Mar 20, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Asset size changes

Uh oh!

fabricteam commented Mar 20, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Perf Analysis

Perf Analysis (Fluent)

Uh oh!

Uh oh!

layershifter commented Mar 22, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

behowell commented Mar 24, 2021

Uh oh!

msft-fluent-ui-bot commented Mar 30, 2021

p.s. you can customize the way I help with merging this pull request, such as holding this pull request until a specific person approves. Simply @mention me (@msft-fluent-ui-bot) and give me an instruction to get started! Learn more here.

Uh oh!

msft-fluent-ui-bot commented Mar 31, 2021

Uh oh!

msft-fluent-ui-bot commented Mar 31, 2021

Uh oh!

msft-fluent-ui-bot commented Mar 31, 2021

Uh oh!

msft-fluent-ui-bot commented Mar 31, 2021

Uh oh!

msft-fluent-ui-bot commented Mar 31, 2021

Uh oh!

msft-fluent-ui-bot commented Mar 31, 2021

Uh oh!

msft-fluent-ui-bot commented Mar 31, 2021

Uh oh!

msft-fluent-ui-bot commented Mar 31, 2021

Uh oh!

msft-fluent-ui-bot commented Mar 31, 2021

Uh oh!

msft-fluent-ui-bot commented Mar 31, 2021

Uh oh!

msft-fluent-ui-bot commented Mar 31, 2021

Uh oh!

msft-fluent-ui-bot commented Mar 31, 2021

Uh oh!

msft-fluent-ui-bot commented Mar 31, 2021

Uh oh!

msft-fluent-ui-bot commented Mar 31, 2021

Uh oh!

msft-fluent-ui-bot commented Mar 31, 2021

Uh oh!

msft-fluent-ui-bot commented Mar 31, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

behowell commented Mar 20, 2021 •

edited

Loading

codesandbox-ci bot commented Mar 20, 2021 •

edited

Loading

size-auditor bot commented Mar 20, 2021 •

edited

Loading

fabricteam commented Mar 20, 2021 •

edited

Loading

layershifter commented Mar 22, 2021 •

edited

Loading

p.s. you can customize the way I help with merging this pull request, such as holding this pull request until a specific person approves. Simply @mention me (`@msft-fluent-ui-bot`) and give me an instruction to get started! Learn more here.