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

chore(react-components): split react libraries in two (/library and /stories) - cxe-prg #31565

Merged
merged 4 commits into from
Jun 6, 2024

Conversation

Hotell
Copy link
Contributor

@Hotell Hotell commented Jun 4, 2024

Previous Behavior

New Behavior

Note

Based on RFC v9 react packages are split in two: #30514

Package/Scaffold changes:
package split changes within react-components. before and after.

  • this PR applies the migration for cxe-prg owned packages
    • fully automated via yarn nx g @fluentui/workspace-plugin:split-library-in-two --project @fluentui/react-<name>
  • api.md files needed to be re-generated ( only formatting changes - caused by inconsistent api-extractor parser )

Related Issue(s)

@fabricteam
Copy link
Collaborator

fabricteam commented Jun 4, 2024

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-breadcrumb
@fluentui/react-breadcrumb - package
114.486 kB
31.821 kB
114.488 kB
31.824 kB
2 B
3 B
react-card
Card - All
101.184 kB
29.049 kB
101.186 kB
29.052 kB
2 B
3 B
react-card
Card
94.218 kB
27.333 kB
94.22 kB
27.336 kB
2 B
3 B
react-card
CardFooter
14.354 kB
5.795 kB
14.356 kB
5.798 kB
2 B
3 B
react-card
CardHeader
16.618 kB
6.555 kB
16.62 kB
6.558 kB
2 B
3 B
react-card
CardPreview
14.418 kB
5.931 kB
14.42 kB
5.934 kB
2 B
3 B
react-image
Image
15.36 kB
6.245 kB
15.362 kB
6.248 kB
2 B
3 B
react-swatch-picker
@fluentui/react-swatch-picker - package
104.378 kB
30.355 kB
104.378 kB
30.357 kB

2 B
react-text
Text - Default
17.061 kB
6.731 kB
17.063 kB
6.733 kB
2 B
2 B
react-text
Text - Wrappers
20.233 kB
7.061 kB
20.235 kB
7.064 kB
2 B
3 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
global-context
createContext
510 B
328 B
global-context
createContextSelector
537 B
339 B
keyboard-key
keyboard-key package
3.746 kB
1.928 kB
priority-overflow
createOverflowManager
4.457 kB
1.856 kB
react
ActivityItem
71.019 kB
23.288 kB
react
Announced
38.291 kB
13.239 kB
react
Autofill
15.365 kB
4.743 kB
react
Breadcrumb
201.877 kB
60.317 kB
react
Button
195.341 kB
56.521 kB
react
ButtonGrid
180.288 kB
54.565 kB
react
Calendar
121.542 kB
36.943 kB
react
Callout
84.108 kB
27.552 kB
react
Check
52.963 kB
17.773 kB
react
Checkbox
59.751 kB
19.806 kB
react
ChoiceGroup
65.276 kB
21.438 kB
react
ChoiceGroupOption
58.531 kB
19.309 kB
react
Coachmark
92.937 kB
29.356 kB
react
Color
7.737 kB
3.106 kB
react
ColorPicker
132.985 kB
41.502 kB
react
ComboBox
251.642 kB
72.135 kB
react
CommandBar
202.91 kB
60.025 kB
react
ContextualMenu
154.87 kB
48.119 kB
react
DatePicker
183.939 kB
56.079 kB
react
DateTimeUtilities
5.244 kB
1.849 kB
react
DetailsList
229.317 kB
65.63 kB
react
Dialog
211.201 kB
63.036 kB
react
Divider
19.399 kB
6.798 kB
react
DocumentCard
216.886 kB
64.32 kB
react
DragDrop
8.343 kB
2.724 kB
react
DraggableZone
34.109 kB
11.448 kB
react
Dropdown
233.807 kB
68.507 kB
react
ExtendedPicker
96.565 kB
27.809 kB
react
Fabric
41.537 kB
14.283 kB
react
Facepile
210.458 kB
63.087 kB
react
FloatingPicker
241.932 kB
68.878 kB
react
FocusTrapZone
16.975 kB
5.917 kB
react
FocusZone
54.844 kB
17.402 kB
react
Grid
180.288 kB
54.565 kB
react
GroupedList
134.634 kB
40.596 kB
react
GroupedListV2
122.251 kB
37.703 kB
react
HoverCard
96.969 kB
30.741 kB
react
Icon
51.644 kB
17.197 kB
react
Icons
66.305 kB
24.379 kB
react
Image
46.701 kB
15.646 kB
react
Keytip
81.482 kB
26.712 kB
react
KeytipData
13.969 kB
4.57 kB
react
KeytipLayer
103.278 kB
31.961 kB
react
Keytips
106.046 kB
32.966 kB
react
Label
38.134 kB
13.207 kB
react
Layer
47.887 kB
16.295 kB
react
Link
39.488 kB
13.614 kB
react
List
39.176 kB
12.384 kB
react
MarqueeSelection
74.321 kB
22.385 kB
react
MessageBar
190.392 kB
56.991 kB
react
Modal
93.44 kB
30.18 kB
react
Nav
187.87 kB
56.43 kB
react
OverflowSet
33.191 kB
11.252 kB
react
Overlay
40.694 kB
14.023 kB
react
Panel
200.912 kB
59.92 kB
react
Persona
114.617 kB
36.442 kB
react
PersonaCoin
114.617 kB
36.442 kB
react
PersonaPresence
57.833 kB
19.303 kB
react
Pickers
293.618 kB
82.223 kB
react
Pivot
188.784 kB
57.162 kB
react
Popup
12.242 kB
4.181 kB
react
Positioning
22.608 kB
7.63 kB
react
PositioningContainer
73.643 kB
23.706 kB
react
ProgressIndicator
39.286 kB
13.482 kB
react
Rating
81.762 kB
26.057 kB
react
Fluent UI React (entire library)
1.013 MB
281.343 kB
react
ResizeGroup
13.286 kB
4.365 kB
react
ResponsiveMode
8.078 kB
2.95 kB
react
ScrollablePane
55.325 kB
17.669 kB
react
SearchBox
188.667 kB
56.595 kB
react
SelectableOption
724 B
413 B
react
SelectedItemsList
232.427 kB
67.829 kB
react
Selection
42.252 kB
12.203 kB
react
Separator
35.183 kB
12.088 kB
react
Shimmer
49.049 kB
16.206 kB
react
ShimmeredDetailsList
240.092 kB
68.397 kB
react
Slider
57.449 kB
19.143 kB
react
SpinButton
192.395 kB
57.716 kB
react
Spinner
41.481 kB
14.412 kB
react
Stack
41.547 kB
14.233 kB
react
Sticky
32.541 kB
10.49 kB
react
Styling
45.853 kB
15.082 kB
react
SwatchColorPicker
190.614 kB
58.051 kB
react
TeachingBubble
205.667 kB
60.945 kB
react
Text
36.723 kB
12.763 kB
react
TextField
80.555 kB
25.262 kB
react
Theme
43.321 kB
14.129 kB
react
ThemeGenerator
12.34 kB
4.106 kB
react
TimePicker
241.446 kB
69.904 kB
react
Toggle
46.02 kB
15.903 kB
react
Tooltip
87.136 kB
28.164 kB
react
Utilities
82.495 kB
25.047 kB
react
Viewport
23.703 kB
7.589 kB
react
WeeklyDayPicker
101.682 kB
31.738 kB
react
WindowProvider
1.059 kB
541 B
react-accordion
Accordion (including children components)
100.008 kB
30.527 kB
react-alert
Alert
78.817 kB
22.543 kB
react-avatar
Avatar
49.299 kB
15.837 kB
react-avatar
AvatarGroup
20.107 kB
7.973 kB
react-avatar
AvatarGroupItem
63.316 kB
20.017 kB
react-badge
Badge
25.95 kB
8.612 kB
react-badge
CounterBadge
26.729 kB
8.886 kB
react-badge
PresenceBadge
25.717 kB
9.483 kB
react-button
Button
37.103 kB
10.784 kB
react-button
CompoundButton
43.514 kB
12.074 kB
react-button
MenuButton
41.884 kB
12.132 kB
react-button
SplitButton
49.896 kB
13.724 kB
react-button
ToggleButton
53.03 kB
12.543 kB
react-calendar-compat
Calendar Compat
150.314 kB
40.099 kB
react-checkbox
Checkbox
35.103 kB
12.11 kB
react-combobox
Combobox (including child components)
100.496 kB
33.156 kB
react-combobox
Dropdown (including child components)
101.129 kB
33.096 kB
react-components
react-components: Button, FluentProvider & webLightTheme
69.141 kB
20.157 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
212.636 kB
61.23 kB
react-components
react-components: FluentProvider & webLightTheme
44.442 kB
14.607 kB
react-components
react-components: entire library
1.092 MB
269.585 kB
react-datepicker-compat
DatePicker Compat
223.895 kB
63.417 kB
react-dialog
Dialog (including children components)
99.313 kB
29.997 kB
react-divider
Divider
21.326 kB
7.963 kB
react-field
Field
23.382 kB
8.901 kB
react-input
Input
27.985 kB
9.444 kB
react-jsx-runtime
Classic Pragma
1.057 kB
530 B
react-jsx-runtime
JSX Dev Runtime
3.781 kB
1.646 kB
react-jsx-runtime
JSX Runtime
4.377 kB
1.881 kB
react-label
Label
14.67 kB
6 kB
react-link
Link
17.191 kB
6.991 kB
react-menu
Menu (including children components)
152.023 kB
45.98 kB
react-menu
Menu (including selectable components)
154.709 kB
46.477 kB
react-message-bar
MessageBar (all components)
24.411 kB
9.114 kB
react-northstar
Accordion
85.392 kB
26.518 kB
react-northstar
Alert
87.45 kB
26.902 kB
react-northstar
Animation
55.34 kB
17.829 kB
react-northstar
Attachment
86.844 kB
26.692 kB
react-northstar
Avatar
80.279 kB
24.629 kB
react-northstar
Box
75.248 kB
23.806 kB
react-northstar
Breadcrumb
79.92 kB
24.709 kB
react-northstar
Button
83.16 kB
25.947 kB
react-northstar
Card
82.705 kB
25.023 kB
react-northstar
Carousel
105.182 kB
31.871 kB
react-northstar
Chat
154.09 kB
46.847 kB
react-northstar
Checkbox
79.807 kB
25.078 kB
react-northstar
Datepicker
186.651 kB
56.973 kB
react-northstar
Debug
8.801 kB
3.594 kB
react-northstar
Design
36.589 kB
12.067 kB
react-northstar
Dialog
112.058 kB
33.615 kB
react-northstar
Divider
76.619 kB
24.129 kB
react-northstar
Dropdown
198.211 kB
60.214 kB
react-northstar
Embed
81.477 kB
25.417 kB
react-northstar
Flex
47.728 kB
15.438 kB
react-northstar
Form
92.527 kB
28.879 kB
react-northstar
Grid
70.584 kB
22.278 kB
react-northstar
Header
74.756 kB
23.461 kB
react-northstar
Image
73.591 kB
23.329 kB
react-northstar
Input
88.346 kB
27.78 kB
react-northstar
ItemLayout
78.231 kB
24.454 kB
react-northstar
Label
77.92 kB
24.41 kB
react-northstar
Layout
75.393 kB
23.798 kB
react-northstar
List
88.493 kB
27.547 kB
react-northstar
Loader
78.616 kB
24.729 kB
react-northstar
Menu
128.602 kB
40.717 kB
react-northstar
MenuButton
163.008 kB
49.606 kB
react-northstar
Pill
83.722 kB
26.069 kB
react-northstar
Popup
135.316 kB
42.242 kB
react-northstar
Portal
58.338 kB
18.852 kB
react-northstar
Provider
93.138 kB
29.63 kB
react-northstar
RadioGroup
83.282 kB
26.053 kB
react-northstar
Reaction
77.28 kB
24.122 kB
react-northstar
Segment
76.209 kB
23.892 kB
react-northstar
Skeleton
77.765 kB
24.2 kB
react-northstar
Slider
84.27 kB
26.737 kB
react-northstar
SplitButton
178.246 kB
53.42 kB
react-northstar
Status
76.272 kB
24.05 kB
react-northstar
SvgIcon
36.823 kB
11.743 kB
react-northstar
Table
80.796 kB
25.154 kB
react-northstar
Text
74.114 kB
23.507 kB
react-northstar
TextArea
74.248 kB
23.492 kB
react-northstar
Toolbar
175.057 kB
52.832 kB
react-northstar
Tooltip
109.973 kB
35.227 kB
react-northstar
Tree
87.855 kB
27.217 kB
react-northstar
Video
75.411 kB
23.799 kB
react-overflow
hooks only
12.87 kB
4.83 kB
react-persona
Persona
56.19 kB
17.726 kB
react-popover
Popover
127.766 kB
40.096 kB
react-portal
Portal
14.563 kB
5.118 kB
react-portal-compat
PortalCompatProvider
8.39 kB
2.64 kB
react-positioning
usePositioning
26.489 kB
9.552 kB
react-progress
ProgressBar
17.084 kB
6.904 kB
react-provider
FluentProvider
24.616 kB
8.903 kB
react-radio
Radio
32.671 kB
10.348 kB
react-radio
RadioGroup
15.758 kB
6.431 kB
react-select
Select
27.636 kB
10.106 kB
react-slider
Slider
37.168 kB
12.543 kB
react-spinbutton
SpinButton
36.047 kB
11.833 kB
react-spinner
Spinner
25.244 kB
8.552 kB
react-switch
Switch
35.299 kB
11.345 kB
react-table
DataGrid
162.843 kB
46.317 kB
react-table
Table (Primitives only)
42.48 kB
13.866 kB
react-table
Table as DataGrid
131.934 kB
36.682 kB
react-table
Table (Selection only)
70.334 kB
20.026 kB
react-table
Table (Sort only)
68.977 kB
19.63 kB
react-tag-picker
@fluentui/react-tag-picker - package
181.063 kB
54.547 kB
react-tags
InteractionTag
15.165 kB
6.134 kB
react-tags
Tag
28.994 kB
9.518 kB
react-tags
TagGroup
82.911 kB
24.642 kB
react-textarea
Textarea
26.519 kB
9.739 kB
react-theme
Single theme token import
69 B
89 B
react-theme
Teams: all themes
35.666 kB
7.453 kB
react-theme
Teams: Light theme
19.642 kB
5.549 kB
react-timepicker-compat
TimePicker
103.487 kB
34.632 kB
react-toast
Toast (including Toaster)
97.868 kB
29.513 kB
react-tooltip
Tooltip
54.556 kB
19.226 kB
react-utilities
SSRProvider
180 B
160 B
🤖 This report was generated against f0fd89b619b2e8bb520b08f1face7aaad9adfdb2

@fabricteam
Copy link
Collaborator

fabricteam commented Jun 4, 2024

Perf Analysis (@fluentui/react-components)

Scenario Render type Master Ticks PR Ticks Iterations Status
FluentProviderWithTheme virtual-rerender 29 36 10 Possible regression
All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 626 618 5000
Button mount 311 295 5000
Field mount 1125 1136 5000
FluentProvider mount 707 697 5000
FluentProviderWithTheme mount 83 82 10
FluentProviderWithTheme virtual-rerender 29 36 10 Possible regression
FluentProviderWithTheme virtual-rerender-with-unmount 76 75 10
MakeStyles mount 871 834 50000
Persona mount 1775 1689 5000
SpinButton mount 1385 1410 5000
SwatchPicker mount 1544 1536 5000

@fabricteam
Copy link
Collaborator

fabricteam commented Jun 4, 2024

Perf Analysis (@fluentui/react-northstar)

⚠️ 1 potential perf regressions detected

Potential regressions comparing to master

Scenario Current PR Ticks Baseline Ticks Ratio Regression Analysis
ButtonMinimalPerf.default 85 84 1.01:1 analysis
Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
AvatarMinimalPerf.default 117 101 1.16:1
CardMinimalPerf.default 330 294 1.12:1
PortalMinimalPerf.default 92 82 1.12:1
TreeWith60ListItems.default 98 90 1.09:1
GridMinimalPerf.default 189 175 1.08:1
LoaderMinimalPerf.default 197 182 1.08:1
RefMinimalPerf.default 117 109 1.07:1
BoxMinimalPerf.default 203 191 1.06:1
AlertMinimalPerf.default 165 157 1.05:1
AttachmentSlotsPerf.default 677 642 1.05:1
ChatWithPopoverPerf.default 192 183 1.05:1
CheckboxMinimalPerf.default 1149 1099 1.05:1
HeaderMinimalPerf.default 213 203 1.05:1
ItemLayoutMinimalPerf.default 734 700 1.05:1
ProviderMinimalPerf.default 206 197 1.05:1
SegmentMinimalPerf.default 199 190 1.05:1
AttachmentMinimalPerf.default 84 81 1.04:1
ButtonOverridesMissPerf.default 668 642 1.04:1
ButtonSlotsPerf.default 321 308 1.04:1
FlexMinimalPerf.default 158 152 1.04:1
InputMinimalPerf.default 553 534 1.04:1
AnimationMinimalPerf.default 301 291 1.03:1
ChatDuplicateMessagesPerf.default 151 147 1.03:1
DialogMinimalPerf.default 449 436 1.03:1
ListNestedPerf.default 330 319 1.03:1
StatusMinimalPerf.default 401 389 1.03:1
CarouselMinimalPerf.default 261 257 1.02:1
ListCommonPerf.default 400 394 1.02:1
MenuMinimalPerf.default 500 492 1.02:1
MenuButtonMinimalPerf.default 961 938 1.02:1
RadioGroupMinimalPerf.default 257 253 1.02:1
SplitButtonMinimalPerf.default 2299 2254 1.02:1
TextAreaMinimalPerf.default 297 291 1.02:1
TreeMinimalPerf.default 478 470 1.02:1
AccordionMinimalPerf.default 84 83 1.01:1
DropdownMinimalPerf.default 1429 1411 1.01:1
FormMinimalPerf.default 220 217 1.01:1
ListWith60ListItems.default 370 366 1.01:1
SkeletonMinimalPerf.default 200 198 1.01:1
TableManyItemsPerf.default 1133 1126 1.01:1
ToolbarMinimalPerf.default 545 540 1.01:1
TooltipMinimalPerf.default 1286 1271 1.01:1
VideoMinimalPerf.default 448 443 1.01:1
DatepickerMinimalPerf.default 3603 3617 1:1
DividerMinimalPerf.default 203 202 1:1
EmbedMinimalPerf.default 1862 1861 1:1
LabelMinimalPerf.default 215 215 1:1
ProviderMergeThemesPerf.default 654 654 1:1
TableMinimalPerf.default 235 234 1:1
CustomToolbarPrototype.default 1454 1461 1:1
DropdownManyItemsPerf.default 397 401 0.99:1
HeaderSlotsPerf.default 452 457 0.99:1
PopupMinimalPerf.default 345 349 0.99:1
TextMinimalPerf.default 194 196 0.99:1
ChatMinimalPerf.default 422 430 0.98:1
ImageMinimalPerf.default 221 226 0.98:1
RosterPerf.default 1525 1562 0.98:1
ReactionMinimalPerf.default 211 216 0.98:1
SliderMinimalPerf.default 714 732 0.98:1
IconMinimalPerf.default 392 398 0.98:1
ListMinimalPerf.default 301 315 0.96:1
LayoutMinimalPerf.default 188 205 0.92:1

@fabricteam
Copy link
Collaborator

fabricteam commented Jun 4, 2024

🕵 FluentUIV0 No visual regressions between this PR and main

@fabricteam
Copy link
Collaborator

fabricteam commented Jun 4, 2024

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 619 631 5000
Breadcrumb mount 1687 1670 1000
Checkbox mount 1675 1710 5000
CheckboxBase mount 1463 1486 5000
ChoiceGroup mount 3025 2977 5000
ComboBox mount 694 709 1000
CommandBar mount 6442 6442 1000
ContextualMenu mount 11925 11451 1000
DefaultButton mount 801 790 5000
DetailsRow mount 2257 2229 5000
DetailsRowFast mount 2261 2268 5000
DetailsRowNoStyles mount 2035 2071 5000
Dialog mount 2823 2685 1000
DocumentCardTitle mount 229 240 1000
Dropdown mount 2024 1985 5000
FocusTrapZone mount 1128 1162 5000
FocusZone mount 1100 1118 5000
GroupedList mount 41939 42010 2
GroupedList virtual-rerender 17960 20111 2
GroupedList virtual-rerender-with-unmount 51088 51280 2
GroupedListV2 mount 228 225 2
GroupedListV2 virtual-rerender 210 208 2
GroupedListV2 virtual-rerender-with-unmount 230 234 2
IconButton mount 1146 1151 5000
Label mount 337 349 5000
Layer mount 2801 2739 5000
Link mount 390 410 5000
MenuButton mount 965 982 5000
MessageBar mount 21432 21433 5000
Nav mount 2026 1993 1000
OverflowSet mount 801 763 5000
Panel mount 1867 1835 1000
Persona mount 778 773 1000
Pivot mount 889 915 1000
PrimaryButton mount 918 936 5000
Rating mount 4705 4684 5000
SearchBox mount 954 927 5000
Shimmer mount 1905 1906 5000
Slider mount 1331 1336 5000
SpinButton mount 3011 2967 5000
Spinner mount 389 369 5000
SplitButton mount 1876 1863 5000
Stack mount 411 408 5000
StackWithIntrinsicChildren mount 853 854 5000
StackWithTextChildren mount 2634 2627 5000
SwatchColorPicker mount 6368 6359 5000
TagPicker mount 1473 1488 5000
Text mount 367 379 5000
TextField mount 940 951 5000
ThemeProvider mount 854 848 5000
ThemeProvider virtual-rerender 585 584 5000
ThemeProvider virtual-rerender-with-unmount 1291 1283 5000
Toggle mount 606 621 5000
buttonNative mount 198 199 5000

Copy link

codesandbox-ci bot commented Jun 4, 2024

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.

@Hotell
Copy link
Contributor Author

Hotell commented Jun 4, 2024

no idea why this failed
image

anyways the plan is to remove this from our PR pipelines completely

@Hotell Hotell marked this pull request as ready for review June 4, 2024 16:49
@Hotell Hotell force-pushed the type-checking-perf/apply/cxe-prg branch from 62c0358 to 05b6848 Compare June 5, 2024 10:15
Copy link

codesandbox-ci bot commented Jun 5, 2024

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.

@fabricteam
Copy link
Collaborator

🕵 fluentuiv9 No visual regressions between this PR and main

@Hotell Hotell requested a review from ValentinaKozlova June 5, 2024 12:04
@Hotell Hotell requested a review from mainframev June 5, 2024 12:04
@Hotell Hotell merged commit e76aee1 into microsoft:master Jun 6, 2024
21 of 22 checks passed
@Hotell Hotell deleted the type-checking-perf/apply/cxe-prg branch June 6, 2024 11:07
@omeid
Copy link

omeid commented Jun 11, 2024

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants