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.

Sign up for GitHub

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

Jump to bottom

fix(merge-styles): introduce DeepPartialV2 type to avoid infinite type instantiation and make unions declaration more performant #31703

Merged
merged 6 commits into from
Jun 14, 2024
Merged

fix(merge-styles): introduce DeepPartialV2 type to avoid infinite type instantiation and make unions declaration more performant #31703

merged 6 commits into from
Jun 14, 2024

Conversation

Hotell
Copy link
Contributor

@Hotell Hotell commented Jun 13, 2024 •
edited
Loading

Previous Behavior

New Behavior

This PR mitigates TS2589: Type instantiation is excessively deep and possibly infinite. Error that our users started to run into after adding opt in ShadowDom functionality into v8 styling system (#30689)

  • new DeepPartialV2 is used within codebase instead of problematic DeepPartial
    • DeepPartial is marked @deprecated as we cannot remove it because it's exposed as part of public API
  • complex repetitive union types across function overloads are aggregated to shared type for reuse and performance (Preserve type aliases for union and intersection types TypeScript#42149)
  • renames internally custom Omit to _Omit to be explicit about it's not from ts.lib
  • some internal logic types have been fixed as well
  • isShadowConfig type predicate internals have been improved for more robust runtime check (that's causing tiny bundle size bump )

Summary:

  • tested against users large codebase that was facing this TS issue
    • TS issue mitigated
    • TS type-check performance is 6% FASTER 🚅

Related Issue(s)

@github-actions github-actions bot added this to the April Project Cycle Q1 2024 milestone Jun 13, 2024
@Hotell Hotell changed the title Fix/v8/improve infinite type issues fix(merge-styles): introduce safe DeepPartialV2 type, simplify union creation, mitigate recursion references Jun 13, 2024
@fabricteam
Copy link
Collaborator

fabricteam commented Jun 13, 2024 •
edited
Loading

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react
ActivityItem		 71.019 kB
23.288 kB		 71.094 kB
23.309 kB		 75 B
21 B
react
Announced		 38.291 kB
13.239 kB		 38.366 kB
13.259 kB		 75 B
20 B
react
Breadcrumb		 201.877 kB
60.317 kB		 201.952 kB
60.34 kB		 75 B
23 B
react
Button		 195.341 kB
56.521 kB		 195.42 kB
56.534 kB		 79 B
13 B
react
ButtonGrid		 180.288 kB
54.565 kB		 180.363 kB
54.589 kB		 75 B
24 B
react
Calendar		 121.542 kB
36.943 kB		 121.617 kB
36.963 kB		 75 B
20 B
react
Callout		 84.108 kB
27.552 kB		 84.183 kB
27.574 kB		 75 B
22 B
react
Check		 52.963 kB
17.773 kB		 53.038 kB
17.798 kB		 75 B
25 B
react
Checkbox		 59.751 kB
19.806 kB		 59.826 kB
19.83 kB		 75 B
24 B
react
ChoiceGroup		 65.276 kB
21.438 kB		 65.351 kB
21.457 kB		 75 B
19 B
react
ChoiceGroupOption		 58.531 kB
19.309 kB		 58.606 kB
19.332 kB		 75 B
23 B
react
Coachmark		 92.937 kB
29.356 kB		 93.012 kB
29.377 kB		 75 B
21 B
react
ColorPicker		 132.985 kB
41.502 kB		 133.06 kB
41.521 kB		 75 B
19 B
react
ComboBox		 251.642 kB
72.135 kB		 251.721 kB
72.161 kB		 79 B
26 B
react
CommandBar		 202.91 kB
60.025 kB		 202.989 kB
60.048 kB		 79 B
23 B
react
ContextualMenu		 154.87 kB
48.119 kB		 154.945 kB
48.139 kB		 75 B
20 B
react
DatePicker		 183.939 kB
56.079 kB		 184.014 kB
56.1 kB		 75 B
21 B
react
DetailsList		 229.317 kB
65.63 kB		 229.392 kB
65.655 kB		 75 B
25 B
react
Dialog		 211.201 kB
63.036 kB		 211.276 kB
63.066 kB		 75 B
30 B
react
Divider		 19.399 kB
6.798 kB		 19.478 kB
6.825 kB		 79 B
27 B
react
DocumentCard		 216.886 kB
64.32 kB		 216.961 kB
64.34 kB		 75 B
20 B
react
DraggableZone		 34.109 kB
11.448 kB		 34.188 kB
11.472 kB		 79 B
24 B
react
Dropdown		 233.807 kB
68.507 kB		 233.882 kB
68.535 kB		 75 B
28 B
react
ExtendedPicker		 96.565 kB
27.809 kB		 96.64 kB
27.827 kB		 75 B
18 B
react
Fabric		 41.537 kB
14.283 kB		 41.612 kB
14.306 kB		 75 B
23 B
react
Facepile		 210.458 kB
63.087 kB		 210.537 kB
63.11 kB		 79 B
23 B
react
FloatingPicker		 241.932 kB
68.878 kB		 242.007 kB
68.903 kB		 75 B
25 B
react
FocusTrapZone		 16.975 kB
5.917 kB		 16.979 kB
5.921 kB		 4 B
4 B
react
FocusZone		 54.844 kB
17.402 kB		 54.919 kB
17.421 kB		 75 B
19 B
react
Grid		 180.288 kB
54.565 kB		 180.363 kB
54.589 kB		 75 B
24 B
react
GroupedList		 134.634 kB
40.596 kB		 134.709 kB
40.617 kB		 75 B
21 B
react
GroupedListV2		 122.251 kB
37.703 kB		 122.326 kB
37.724 kB		 75 B
21 B
react
HoverCard		 96.969 kB
30.741 kB		 97.044 kB
30.76 kB		 75 B
19 B
react
Icon		 51.644 kB
17.197 kB		 51.719 kB
17.219 kB		 75 B
22 B
react
Icons		 66.305 kB
24.379 kB		 66.309 kB
24.381 kB		 4 B
2 B
react
Image		 46.701 kB
15.646 kB		 46.776 kB
15.668 kB		 75 B
22 B
react
Keytip		 81.482 kB
26.712 kB		 81.557 kB
26.731 kB		 75 B
19 B
react
KeytipData		 13.969 kB
4.57 kB		 13.973 kB
4.573 kB		 4 B
3 B
react
KeytipLayer		 103.278 kB
31.961 kB		 103.353 kB
31.983 kB		 75 B
22 B
react
Keytips		 106.046 kB
32.966 kB		 106.121 kB
32.986 kB		 75 B
20 B
react
Label		 38.134 kB
13.207 kB		 38.213 kB
13.226 kB		 79 B
19 B
react
Layer		 47.887 kB
16.295 kB		 47.962 kB
16.316 kB		 75 B
21 B
react
Link		 39.488 kB
13.614 kB		 39.563 kB
13.637 kB		 75 B
23 B
react
List		 39.176 kB
12.384 kB		 39.251 kB
12.405 kB		 75 B
21 B
react
MarqueeSelection		 74.321 kB
22.385 kB		 74.396 kB
22.41 kB		 75 B
25 B
react
MessageBar		 190.392 kB
56.991 kB		 190.467 kB
57.013 kB		 75 B
22 B
react
Modal		 93.44 kB
30.18 kB		 93.515 kB
30.201 kB		 75 B
21 B
react
Nav		 187.87 kB
56.43 kB		 187.945 kB
56.45 kB		 75 B
20 B
react
OverflowSet		 33.191 kB
11.252 kB		 33.266 kB
11.28 kB		 75 B
28 B
react
Overlay		 40.694 kB
14.023 kB		 40.769 kB
14.046 kB		 75 B
23 B
react
Panel		 200.912 kB
59.92 kB		 200.987 kB
59.938 kB		 75 B
18 B
react
Persona		 114.617 kB
36.442 kB		 114.692 kB
36.466 kB		 75 B
24 B
react
PersonaCoin		 114.617 kB
36.442 kB		 114.692 kB
36.466 kB		 75 B
24 B
react
PersonaPresence		 57.833 kB
19.303 kB		 57.908 kB
19.327 kB		 75 B
24 B
react
Pickers		 293.618 kB
82.223 kB		 293.697 kB
82.241 kB		 79 B
18 B
react
Pivot		 188.784 kB
57.162 kB		 188.859 kB
57.186 kB		 75 B
24 B
react
Positioning		 22.608 kB
7.63 kB		 22.683 kB
7.651 kB		 75 B
21 B
react
PositioningContainer		 73.643 kB
23.706 kB		 73.722 kB
23.735 kB		 79 B
29 B
react
ProgressIndicator		 39.286 kB
13.482 kB		 39.361 kB
13.505 kB		 75 B
23 B
react
Rating		 81.762 kB
26.057 kB		 81.837 kB
26.078 kB		 75 B
21 B
react
Fluent UI React (entire library)		 1.013 MB
281.343 kB		 1.013 MB
281.366 kB		 75 B
23 B
react
ScrollablePane		 55.325 kB
17.669 kB		 55.404 kB
17.693 kB		 79 B
24 B
react
SearchBox		 188.667 kB
56.595 kB		 188.742 kB
56.617 kB		 75 B
22 B
react
SelectedItemsList		 232.427 kB
67.829 kB		 232.506 kB
67.852 kB		 79 B
23 B
react
Selection		 42.252 kB
12.203 kB		 42.327 kB
12.227 kB		 75 B
24 B
react
Separator		 35.183 kB
12.088 kB		 35.262 kB
12.117 kB		 79 B
29 B
react
Shimmer		 49.049 kB
16.206 kB		 49.124 kB
16.228 kB		 75 B
22 B
react
ShimmeredDetailsList		 240.092 kB
68.397 kB		 240.167 kB
68.421 kB		 75 B
24 B
react
Slider		 57.449 kB
19.143 kB		 57.524 kB
19.164 kB		 75 B
21 B
react
SpinButton		 192.395 kB
57.716 kB		 192.47 kB
57.735 kB		 75 B
19 B
react
Spinner		 41.481 kB
14.412 kB		 41.556 kB
14.431 kB		 75 B
19 B
react
Stack		 41.547 kB
14.233 kB		 41.622 kB
14.253 kB		 75 B
20 B
react
Styling		 45.853 kB
15.082 kB		 45.928 kB
15.103 kB		 75 B
21 B
react
SwatchColorPicker		 190.614 kB
58.051 kB		 190.689 kB
58.074 kB		 75 B
23 B
react
TeachingBubble		 205.667 kB
60.945 kB		 205.742 kB
60.967 kB		 75 B
22 B
react
Text		 36.723 kB
12.763 kB		 36.798 kB
12.785 kB		 75 B
22 B
react
TextField		 80.555 kB
25.262 kB		 80.63 kB
25.28 kB		 75 B
18 B
react
Theme		 43.321 kB
14.129 kB		 43.396 kB
14.154 kB		 75 B
25 B
react
TimePicker		 241.446 kB
69.904 kB		 241.525 kB
69.93 kB		 79 B
26 B
react
Toggle		 46.02 kB
15.903 kB		 46.095 kB
15.926 kB		 75 B
23 B
react
Tooltip		 87.136 kB
28.164 kB		 87.211 kB
28.189 kB		 75 B
25 B
react
Utilities		 82.495 kB
25.047 kB		 82.57 kB
25.068 kB		 75 B
21 B
react
Viewport		 23.703 kB
7.589 kB		 23.778 kB
7.614 kB		 75 B
25 B
react
WeeklyDayPicker		 101.682 kB
31.738 kB		 101.761 kB
31.775 kB		 79 B
37 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react
Autofill		 15.365 kB
4.743 kB
react
Color		 7.737 kB
3.106 kB
react
DateTimeUtilities		 5.244 kB
1.849 kB
react
DragDrop		 8.343 kB
2.724 kB
react
Popup		 12.242 kB
4.181 kB
react
ResizeGroup		 13.286 kB
4.365 kB
react
ResponsiveMode		 8.078 kB
2.95 kB
react
SelectableOption		 724 B
413 B
react
Sticky		 32.541 kB
10.49 kB
react
ThemeGenerator		 12.34 kB
4.106 kB
react
WindowProvider		 1.059 kB
541 B
🤖 This report was generated against 57cd63405508ee26266cf105008f5da9683812b9

@fabricteam
Copy link
Collaborator

fabricteam commented Jun 13, 2024 •
edited
Loading

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 612 628 5000
Breadcrumb mount 1664 1655 1000
Checkbox mount 1690 1705 5000
CheckboxBase mount 1489 1491 5000
ChoiceGroup mount 2972 2903 5000
ComboBox mount 689 704 1000
CommandBar mount 6454 6553 1000
ContextualMenu mount 13200 13433 1000
DefaultButton mount 782 788 5000
DetailsRow mount 2202 2247 5000
DetailsRowFast mount 2235 2220 5000
DetailsRowNoStyles mount 2038 2030 5000
Dialog mount 2724 2778 1000
DocumentCardTitle mount 232 237 1000
Dropdown mount 1951 1990 5000
FocusTrapZone mount 1141 1109 5000
FocusZone mount 1065 1084 5000
GroupedList mount 37803 42205 2
GroupedList virtual-rerender 18001 20096 2
GroupedList virtual-rerender-with-unmount 51734 51117 2
GroupedListV2 mount 230 220 2
GroupedListV2 virtual-rerender 205 216 2
GroupedListV2 virtual-rerender-with-unmount 234 229 2
IconButton mount 1117 1164 5000
Label mount 345 350 5000
Layer mount 2747 2744 5000
Link mount 393 399 5000
MenuButton mount 985 990 5000
MessageBar mount 21145 21208 5000
Nav mount 1980 1998 1000
OverflowSet mount 798 781 5000
Panel mount 1802 1782 1000
Persona mount 755 758 1000
Pivot mount 891 886 1000
PrimaryButton mount 922 930 5000
Rating mount 4598 4691 5000
SearchBox mount 904 921 5000
Shimmer mount 1897 1900 5000
Slider mount 1320 1349 5000
SpinButton mount 2993 2925 5000
Spinner mount 384 390 5000
SplitButton mount 1886 1850 5000
Stack mount 409 411 5000
StackWithIntrinsicChildren mount 852 889 5000
StackWithTextChildren mount 2685 2713 5000
SwatchColorPicker mount 6236 6384 5000
TagPicker mount 1484 1479 5000
Text mount 378 379 5000
TextField mount 961 969 5000
ThemeProvider mount 838 856 5000
ThemeProvider virtual-rerender 586 581 5000
ThemeProvider virtual-rerender-with-unmount 1288 1262 5000
Toggle mount 617 621 5000
buttonNative mount 196 200 5000

@Hotell Hotell changed the title fix(merge-styles): introduce safe DeepPartialV2 type, simplify union creation, mitigate recursion references fix(merge-styles): introduce DeepPartialV2 type to avoid infinite type instantiation, simplify unions creation, mitigate recursion references Jun 14, 2024
@Hotell Hotell changed the title fix(merge-styles): introduce DeepPartialV2 type to avoid infinite type instantiation, simplify unions creation, mitigate recursion references fix(merge-styles): introduce DeepPartialV2 type to avoid infinite type instantiation, simplify unions creation, mitigate circular type references Jun 14, 2024
@Hotell Hotell force-pushed the fix/v8/improve-infinite-type-issues branch from 4f60035 to a30d326 Compare June 14, 2024 10:06
@Hotell Hotell changed the title fix(merge-styles): introduce DeepPartialV2 type to avoid infinite type instantiation, simplify unions creation, mitigate circular type references fix(merge-styles): introduce DeepPartialV2 type to avoid infinite type instantiation and simplify unions creation Jun 14, 2024
@Hotell Hotell changed the title fix(merge-styles): introduce DeepPartialV2 type to avoid infinite type instantiation and simplify unions creation fix(merge-styles): introduce DeepPartialV2 type to avoid infinite type instantiation and make unions declaration more performant Jun 14, 2024
@Hotell Hotell marked this pull request as ready for review June 14, 2024 12:59
@Hotell Hotell requested review from dzearing and a team as code owners June 14, 2024 12:59
@Hotell Hotell requested a review from spmonahan June 14, 2024 12:59
@Hotell Hotell enabled auto-merge (squash) June 14, 2024 13:14
@Hotell Hotell merged commit 53c54d4 into microsoft:master Jun 14, 2024
19 checks passed
@Hotell Hotell deleted the fix/v8/improve-infinite-type-issues branch June 14, 2024 14:13
miroslavstastny pushed a commit to miroslavstastny/fluentui that referenced this pull request Jun 14, 2024
@Hotell @miroslavstastny
fix(merge-styles): introduce DeepPartialV2 type to avoid infinite t…
44a26d5 
…ype instantiation and make unions declaration more performant (microsoft#31703)
@dotnetjunky dotnetjunky mentioned this pull request Jun 19, 2024
Closed
2 tasks
@Hotell Hotell mentioned this pull request Jun 28, 2024
Draft
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@fabricteam fabricteam fabricteam left review comments

@spmonahan spmonahan spmonahan approved these changes

@dzearing dzearing Awaiting requested review from dzearing dzearing is a code owner

Assignees
No one assigned
Labels
Area: Typescript Fluent UI react (v8) Issues about @fluentui/react (v8) Package: merge-styles
Projects
None yet
Milestone
April Project Cycle Q1 2024
Development

Successfully merging this pull request may close these issues.
3 participants
@Hotell @fabricteam @spmonahan