Skip to content

Conversation

@Hotell
Copy link
Contributor

@Hotell Hotell commented Dec 29, 2023

Previous Behavior

after migration to lerna 7, our infra was refactored to use lerna/utils apis which are only another abstraction over pure nx.
this introduced some amount of churn like maintaining custom types, or loading quite big amount of JS when loading those lerna apis , which were not good for performance.

New Behavior

Related Issue(s)

@Hotell Hotell changed the title Lerna/remove lerna utils feat(scripts-monorepo): replace lerna/utils with pure nx apis Dec 29, 2023
@fabricteam
Copy link
Collaborator

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 643 664 5000
Button mount 310 302 5000
Field mount 1115 1122 5000
FluentProvider mount 717 699 5000
FluentProviderWithTheme mount 77 85 10
FluentProviderWithTheme virtual-rerender 62 59 10
FluentProviderWithTheme virtual-rerender-with-unmount 77 76 10
MakeStyles mount 855 849 50000
Persona mount 1752 1718 5000
SpinButton mount 1402 1393 5000

@codesandbox-ci
Copy link

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 39c3be4:

Sandbox Source
@fluentui/react 8 starter Configuration
@fluentui/react-components 9 starter Configuration

@fabricteam
Copy link
Collaborator

🕵 fluentuiv8 No visual regressions between this PR and main

@fabricteam
Copy link
Collaborator

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
PortalMinimalPerf.default 91 80 1.14:1
LabelMinimalPerf.default 230 207 1.11:1
LoaderMinimalPerf.default 190 175 1.09:1
CarouselMinimalPerf.default 273 254 1.07:1
FlexMinimalPerf.default 164 155 1.06:1
MenuMinimalPerf.default 510 482 1.06:1
RefMinimalPerf.default 116 109 1.06:1
BoxMinimalPerf.default 200 191 1.05:1
ButtonOverridesMissPerf.default 657 623 1.05:1
HeaderSlotsPerf.default 472 450 1.05:1
SkeletonMinimalPerf.default 201 192 1.05:1
ChatDuplicateMessagesPerf.default 153 147 1.04:1
ChatMinimalPerf.default 427 410 1.04:1
ChatWithPopoverPerf.default 191 183 1.04:1
ImageMinimalPerf.default 228 220 1.04:1
AlertMinimalPerf.default 155 150 1.03:1
CheckboxMinimalPerf.default 1132 1097 1.03:1
DropdownMinimalPerf.default 1446 1407 1.03:1
ListMinimalPerf.default 309 301 1.03:1
ListWith60ListItems.default 366 356 1.03:1
AnimationMinimalPerf.default 301 294 1.02:1
ButtonMinimalPerf.default 84 82 1.02:1
InputMinimalPerf.default 538 530 1.02:1
MenuButtonMinimalPerf.default 965 947 1.02:1
SplitButtonMinimalPerf.default 2284 2240 1.02:1
StatusMinimalPerf.default 390 381 1.02:1
TextMinimalPerf.default 190 187 1.02:1
ToolbarMinimalPerf.default 528 518 1.02:1
TreeMinimalPerf.default 472 464 1.02:1
AvatarMinimalPerf.default 106 105 1.01:1
CardMinimalPerf.default 302 300 1.01:1
DatepickerMinimalPerf.default 3547 3515 1.01:1
DividerMinimalPerf.default 204 202 1.01:1
DropdownManyItemsPerf.default 389 387 1.01:1
ProviderMergeThemesPerf.default 656 649 1.01:1
ProviderMinimalPerf.default 197 196 1.01:1
EmbedMinimalPerf.default 1876 1873 1:1
HeaderMinimalPerf.default 210 210 1:1
RosterPerf.default 1552 1549 1:1
AttachmentSlotsPerf.default 633 642 0.99:1
DialogMinimalPerf.default 432 435 0.99:1
PopupMinimalPerf.default 345 350 0.99:1
SegmentMinimalPerf.default 198 200 0.99:1
SliderMinimalPerf.default 760 769 0.99:1
TableMinimalPerf.default 229 231 0.99:1
AccordionMinimalPerf.default 78 80 0.98:1
ItemLayoutMinimalPerf.default 711 724 0.98:1
ListCommonPerf.default 382 391 0.98:1
RadioGroupMinimalPerf.default 257 261 0.98:1
IconMinimalPerf.default 377 383 0.98:1
TextAreaMinimalPerf.default 289 294 0.98:1
CustomToolbarPrototype.default 1447 1473 0.98:1
VideoMinimalPerf.default 426 436 0.98:1
GridMinimalPerf.default 181 186 0.97:1
ListNestedPerf.default 313 323 0.97:1
TableManyItemsPerf.default 1091 1124 0.97:1
TooltipMinimalPerf.default 1222 1260 0.97:1
LayoutMinimalPerf.default 186 194 0.96:1
ReactionMinimalPerf.default 200 208 0.96:1
AttachmentMinimalPerf.default 76 80 0.95:1
FormMinimalPerf.default 203 216 0.94:1
ButtonSlotsPerf.default 308 337 0.91:1
TreeWith60ListItems.default 76 87 0.87:1

@fabricteam
Copy link
Collaborator

🕵 FluentUIV0 No visual regressions between this PR and main

@fabricteam
Copy link
Collaborator

📊 Bundle size report

Unchanged fixtures
Package & Exports Size (minified/GZIP)
global-context
createContext
510 B
328 B
global-context
createContextSelector
537 B
339 B
priority-overflow
createOverflowManager
4.447 kB
1.853 kB
react-accordion
Accordion (including children components)
93.88 kB
28.673 kB
react-alert
Alert
83.729 kB
23.458 kB
react-avatar
Avatar
50.167 kB
15.945 kB
react-avatar
AvatarGroup
19.696 kB
7.795 kB
react-avatar
AvatarGroupItem
64.823 kB
20.274 kB
react-badge
Badge
26.897 kB
8.729 kB
react-badge
CounterBadge
27.798 kB
9.024 kB
react-badge
PresenceBadge
25.303 kB
9.307 kB
react-button
Button
39.505 kB
11.17 kB
react-button
CompoundButton
46.866 kB
12.662 kB
react-button
MenuButton
44.284 kB
12.544 kB
react-button
SplitButton
52.298 kB
14.134 kB
react-button
ToggleButton
56.551 kB
13.068 kB
react-calendar-compat
Calendar Compat
142.045 kB
37.104 kB
react-card
Card - All
94.677 kB
27.247 kB
react-card
Card
89.501 kB
25.733 kB
react-card
CardFooter
13.056 kB
5.386 kB
react-card
CardHeader
15.299 kB
6.143 kB
react-card
CardPreview
14.007 kB
5.752 kB
react-checkbox
Checkbox
34.738 kB
11.903 kB
react-combobox
Combobox (including child components)
94.95 kB
30.641 kB
react-combobox
Dropdown (including child components)
93.541 kB
30.319 kB
react-components
react-components: Button, FluentProvider & webLightTheme
69.893 kB
20.261 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
209.769 kB
59.924 kB
react-components
react-components: FluentProvider & webLightTheme
42.38 kB
14.104 kB
react-datepicker-compat
DatePicker Compat
213.412 kB
59.838 kB
react-dialog
Dialog (including children components)
95.444 kB
28.457 kB
react-divider
Divider
20.812 kB
7.763 kB
react-field
Field
22.419 kB
8.573 kB
react-image
Image
15.728 kB
6.229 kB
react-infobutton
InfoButton
132.639 kB
41.721 kB
react-infobutton
InfoLabel
136.326 kB
42.862 kB
react-input
Input
26.879 kB
9.118 kB
react-jsx-runtime
Classic Pragma
1.049 kB
528 B
react-jsx-runtime
JSX Dev Runtime
3.775 kB
1.648 kB
react-jsx-runtime
JSX Runtime
4.369 kB
1.881 kB
react-label
Label
14.141 kB
5.759 kB
react-link
Link
17.074 kB
6.911 kB
react-menu
Menu (including children components)
141.96 kB
43.516 kB
react-menu
Menu (including selectable components)
144.646 kB
44.025 kB
react-message-bar
MessageBar (all components)
25.173 kB
9.039 kB
react-overflow
hooks only
12.837 kB
4.818 kB
react-persona
Persona
57.058 kB
17.822 kB
react-popover
Popover
120.804 kB
38.11 kB
react-portal
Portal
12.788 kB
4.67 kB
react-portal-compat
PortalCompatProvider
7.099 kB
2.385 kB
react-positioning
usePositioning
25.767 kB
9.308 kB
react-progress
ProgressBar
17.42 kB
6.897 kB
react-provider
FluentProvider
22.92 kB
8.472 kB
react-radio
Radio
31.738 kB
10.365 kB
react-radio
RadioGroup
15.337 kB
6.263 kB
react-select
Select
28.601 kB
10.206 kB
react-slider
Slider
39.142 kB
12.77 kB
react-spinbutton
SpinButton
36.766 kB
11.789 kB
react-spinner
Spinner
23.394 kB
8.467 kB
react-switch
Switch
34.222 kB
10.995 kB
react-table
DataGrid
154.888 kB
43.533 kB
react-table
Table (Primitives only)
43.891 kB
13.782 kB
react-table
Table as DataGrid
128.109 kB
34.792 kB
react-table
Table (Selection only)
73.288 kB
20.017 kB
react-table
Table (Sort only)
71.895 kB
19.617 kB
react-tags
InteractionTag
15.251 kB
6.058 kB
react-tags
Tag
29.974 kB
9.44 kB
react-tags
TagGroup
74.323 kB
22.28 kB
react-text
Text - Default
16.697 kB
6.569 kB
react-text
Text - Wrappers
19.87 kB
6.896 kB
react-textarea
Textarea
30.939 kB
10.476 kB
react-theme
Single theme token import
69 B
89 B
react-theme
Teams: all themes
34.616 kB
7.317 kB
react-theme
Teams: Light theme
19.287 kB
5.498 kB
react-timepicker-compat-preview
TimePicker
96.788 kB
32.078 kB
react-toast
Toast (including Toaster)
93.195 kB
28.026 kB
react-tooltip
Tooltip
53.244 kB
18.807 kB
react-utilities
SSRProvider
180 B
160 B
🤖 This report was generated against 167cccee21a690dd231dd3b4d4d5159cfd8169e2

@size-auditor
Copy link

size-auditor bot commented Dec 29, 2023

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: 167cccee21a690dd231dd3b4d4d5159cfd8169e2 (build)

@fabricteam
Copy link
Collaborator

🕵 fluentuiv9 No visual regressions between this PR and main

@fabricteam
Copy link
Collaborator

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 607 627 5000
Breadcrumb mount 1707 1658 1000
Checkbox mount 1661 1675 5000
CheckboxBase mount 1477 1482 5000
ChoiceGroup mount 2973 2922 5000
ComboBox mount 667 644 1000
CommandBar mount 6174 6202 1000
ContextualMenu mount 11638 11583 1000
DefaultButton mount 748 747 5000
DetailsRow mount 2206 2185 5000
DetailsRowFast mount 2239 2183 5000
DetailsRowNoStyles mount 2037 2024 5000
Dialog mount 2757 2793 1000
DocumentCardTitle mount 236 232 1000
Dropdown mount 1952 1955 5000
FocusTrapZone mount 1131 1145 5000
FocusZone mount 1107 1066 5000
GroupedList mount 41184 41587 2
GroupedList virtual-rerender 19845 19724 2
GroupedList virtual-rerender-with-unmount 57300 57174 2
GroupedListV2 mount 225 219 2
GroupedListV2 virtual-rerender 218 205 2
GroupedListV2 virtual-rerender-with-unmount 227 237 2
IconButton mount 1102 1089 5000
Label mount 334 322 5000
Layer mount 2707 2725 5000
Link mount 393 397 5000
MenuButton mount 947 929 5000
MessageBar mount 21273 21317 5000
Nav mount 1975 1903 1000
OverflowSet mount 774 776 5000
Panel mount 2091 1794 1000
Persona mount 734 751 1000
Pivot mount 846 869 1000
PrimaryButton mount 850 842 5000
Rating mount 4680 4708 5000
SearchBox mount 904 892 5000
Shimmer mount 1819 1887 5000
Slider mount 1337 1299 5000
SpinButton mount 2866 2884 5000
Spinner mount 384 383 5000
SplitButton mount 1830 1826 5000
Stack mount 411 403 5000
StackWithIntrinsicChildren mount 860 866 5000
StackWithTextChildren mount 2590 2620 5000
SwatchColorPicker mount 6112 6017 5000
TagPicker mount 1442 1489 5000
Text mount 373 377 5000
TextField mount 916 937 5000
ThemeProvider mount 826 836 5000
ThemeProvider virtual-rerender 592 575 5000
ThemeProvider virtual-rerender-with-unmount 1267 1266 5000
Toggle mount 606 597 5000
buttonNative mount 196 202 5000

@Hotell Hotell marked this pull request as ready for review December 29, 2023 14:11
@Hotell Hotell requested a review from a team as a code owner December 29, 2023 14:11
@Hotell Hotell added the NX: core label Jan 2, 2024
@tudorpopams tudorpopams self-requested a review January 9, 2024 13:19
@Hotell Hotell merged commit 702a258 into microsoft:master Jan 9, 2024
@Hotell Hotell deleted the lerna/remove-lerna-utils branch January 9, 2024 15:29
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Jan 10, 2024
* master: (166 commits)
  Remove v0 dependency from v0 compat package (microsoft#30276)
  applying package updates
  Disallow `window` and `document` access for `@fluentui/react` and related packages. (microsoft#30063)
  Update Rating api and stories (microsoft#30092)
  TeachingPopover: Minor style changes (microsoft#30270)
  feat(scripts-gulp): replace lerna with nx (microsoft#30266)
  ci: remove canary and nightly functionality from northstar (microsoft#30264)
  List: Re-initialize on mount in React 18. (microsoft#29881)
  feat(scripts-monorepo): replace lerna/utils with pure nx apis (microsoft#30178)
  chore: remove react-timepicker-compat-preview (microsoft#30263)
  applying package updates
  feat(TimePicker-compat): stable release  (microsoft#30217)
  feat: Implement onPositioningEnd callback (microsoft#30177)
  applying package updates
  v8 registerIcons compat (microsoft#30003)
  Adding Planner, ToDoItem and updated Project filetype icons. Updating FabricCDN url to latest datecode. (microsoft#30079)
  Scaffolds more Nav components (microsoft#30227)
  chore: migrate to nx 17.2 (microsoft#30187)
  applying package updates
  feat: Update position when target or container dimensions change (microsoft#30179)
  ...
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.

3 participants