Skip to content

chore: cleanup dependencies for converged components#17197

Merged
layershifter merged 12 commits intomasterfrom
chore/cleanup-deps
Mar 1, 2021
Merged

chore: cleanup dependencies for converged components#17197
layershifter merged 12 commits intomasterfrom
chore/cleanup-deps

Conversation

@layershifter
Copy link
Member

@layershifter layershifter commented Feb 26, 2021

Pull request checklist

- [ ] Addresses an existing issue: Fixes #0000

  • Include a change request file using $ yarn change

Dependency graph for this PR

A dependency graph for @fluentui/react-components

@fluentui/react-avatar

Dependency on @fluentui/utilities was removed:

  • nullRender is reused from @fluentui/react-utilities (it have been already there)
  • useFocusRects() (according to the spec, it's not focusable via keyboard)
  • getInitials() was copied as an util to @fluentui/react-avatar as it's a single component that uses it in convergence

@fluentui/react-button

@fluentui/react-icons-mdl2 & @fluentui/react-shared-contexts were removed as they are not used at all.

@fluentui/react-link

@fluentui/utilities were used only config/tests.js for functionality that is not required, usages and a dependency were removed.

@fluentui/react-theme

Had a dependency on merge() in mergeThemes(), merge() is temporary copied as there is no clear decision about theme shape yet.

@fluentui/react-utilities

  • getNativeProps(), omit() and *properties were copied from from @fluentui/utilities as they are used in converged utils
  • useId() hook now temporary uses simplified getId() version, we anyway should reimplement it to be compatible with SSR and scenarios with different globals (document, window)
  • css() were temporary copied to makeMergeProps() , we should use ax() there, but it's not possible now due circular possible dependencies between @fluentui/react-make-styles and @fluentui/react-utilities (via @fluentui/react-provider)
  • /makeClasses directory was removed as we don't have anymore components that are using .scss

@codesandbox-ci
Copy link

codesandbox-ci bot commented Feb 26, 2021

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 c74b092:

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

@size-auditor
Copy link

size-auditor bot commented Feb 26, 2021

Asset size changes

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

Baseline commit: e81ec9a409a5c16f1ba6c0333a9df41f6375f92f (build)

"@fluentui/keyboard-key": "^0.2.14",
"@fluentui/react-icons-mdl2": "^1.0.1",
"@fluentui/react-make-styles": "^9.0.0-alpha.4",
"@fluentui/react-shared-contexts": "^1.0.0-beta.10",
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These deps were simply not used at all 😮

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

FYI, this happened because a bunch of things were deleted in #17060. Once some of them come back we might want to find out how to deal with this.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we're removing this, should react-shared-contexts be released as 1.0 now? Or entirely removed for the time being (and remove usage from v8 as well)?

@layershifter layershifter marked this pull request as ready for review February 26, 2021 14:49
@layershifter layershifter requested a review from Hotell February 26, 2021 15:01
@fabricteam
Copy link
Collaborator

Perf Analysis

Scenario Render type Master Ticks PR Ticks Iterations Status
buttonNative mount 119 132 5000 Possible regression
All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 1272 1209 5000
BaseButton mount 1036 1004 5000
Breadcrumb mount 45405 46671 5000
ButtonNext mount 1406 1319 5000
Checkbox mount 1650 1661 5000
CheckboxBase mount 1423 1454 5000
ChoiceGroup mount 5306 5380 5000
ComboBox mount 1040 1044 1000
CommandBar mount 10835 10720 1000
ContextualMenu mount 6653 6602 1000
DefaultButton mount 1242 1228 5000
DetailsRow mount 3985 4024 5000
DetailsRowFast mount 3944 4022 5000
DetailsRowNoStyles mount 3873 3798 5000
Dialog mount 1657 1631 1000
DocumentCardTitle mount 1908 1885 1000
Dropdown mount 3638 3618 5000
FocusTrapZone mount 1918 1937 5000
FocusZone mount 1945 1932 5000
IconButton mount 1926 1943 5000
Label mount 373 339 5000
Layer mount 1927 1983 5000
Link mount 512 514 5000
MakeStyles mount 2117 2074 50000
MenuButton mount 1663 1626 5000
MessageBar mount 2142 2109 5000
Nav mount 3570 3592 1000
OverflowSet mount 1108 1105 5000
Panel mount 1511 1582 1000
Persona mount 887 929 1000
Pivot mount 1493 1517 1000
PrimaryButton mount 1392 1375 5000
Rating mount 8414 8399 5000
SearchBox mount 1437 1516 5000
Shimmer mount 2788 2809 5000
Slider mount 2187 2184 5000
SpinButton mount 5478 5422 5000
Spinner mount 450 454 5000
SplitButton mount 3443 3480 5000
Stack mount 553 532 5000
StackWithIntrinsicChildren mount 1704 1735 5000
StackWithTextChildren mount 5020 5037 5000
SwatchColorPicker mount 10976 11172 5000
Tabs mount 1546 1501 1000
TagPicker mount 3042 3254 5000
TeachingBubble mount 12272 12388 5000
Text mount 453 447 5000
TextField mount 1480 1508 5000
ThemeProvider mount 1274 1260 5000
ThemeProvider virtual-rerender 649 641 5000
ThemeProviderNext mount 16376 16305 5000
Toggle mount 868 895 5000
buttonNative mount 119 132 5000 Possible regression

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🦄 Avatar.Fluent 0.2 0.53 0.38:1 2000 394
🦄 Button.Fluent 0.14 0.23 0.61:1 5000 684
🔧 Checkbox.Fluent 0.74 0.41 1.8:1 1000 735
🎯 Dialog.Fluent 0.18 0.24 0.75:1 5000 923
🔧 Dropdown.Fluent 3.35 0.48 6.98:1 1000 3347
🔧 Icon.Fluent 0.16 0.07 2.29:1 5000 814
🎯 Image.Fluent 0.1 0.14 0.71:1 5000 483
🔧 Slider.Fluent 1.76 0.52 3.38:1 1000 1759
🔧 Text.Fluent 0.1 0.04 2.5:1 5000 480
🦄 Tooltip.Fluent 0.13 0.96 0.14:1 5000 656

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
GridMinimalPerf.default 456 412 1.11:1
Text.Fluent 480 433 1.11:1
HeaderMinimalPerf.default 485 452 1.07:1
CarouselMinimalPerf.default 578 543 1.06:1
RefMinimalPerf.default 282 266 1.06:1
AnimationMinimalPerf.default 475 451 1.05:1
ButtonUseCssPerf.default 997 950 1.05:1
DividerMinimalPerf.default 483 459 1.05:1
DropdownManyItemsPerf.default 896 854 1.05:1
FormMinimalPerf.default 554 527 1.05:1
ReactionMinimalPerf.default 519 496 1.05:1
SkeletonMinimalPerf.default 467 446 1.05:1
IconMinimalPerf.default 816 777 1.05:1
BoxMinimalPerf.default 471 453 1.04:1
LabelMinimalPerf.default 537 516 1.04:1
StatusMinimalPerf.default 883 851 1.04:1
Icon.Fluent 814 784 1.04:1
Tooltip.Fluent 656 628 1.04:1
ButtonMinimalPerf.default 226 220 1.03:1
ButtonSlotsPerf.default 688 669 1.03:1
ChatWithPopoverPerf.default 527 513 1.03:1
ItemLayoutMinimalPerf.default 1468 1430 1.03:1
TableMinimalPerf.default 509 493 1.03:1
Checkbox.Fluent 735 717 1.03:1
Dialog.Fluent 923 898 1.03:1
AvatarMinimalPerf.default 244 239 1.02:1
InputMinimalPerf.default 1452 1423 1.02:1
LoaderMinimalPerf.default 827 808 1.02:1
PopupMinimalPerf.default 803 789 1.02:1
CustomToolbarPrototype.default 4161 4093 1.02:1
Avatar.Fluent 394 387 1.02:1
Image.Fluent 483 474 1.02:1
AccordionMinimalPerf.default 200 199 1.01:1
ButtonUseCssNestingPerf.default 1246 1238 1.01:1
DialogMinimalPerf.default 920 914 1.01:1
EmbedMinimalPerf.default 4783 4735 1.01:1
HeaderSlotsPerf.default 960 954 1.01:1
ImageMinimalPerf.default 494 489 1.01:1
ListWith60ListItems.default 765 754 1.01:1
MenuButtonMinimalPerf.default 1856 1845 1.01:1
PortalMinimalPerf.default 195 193 1.01:1
SplitButtonMinimalPerf.default 4309 4254 1.01:1
ToolbarMinimalPerf.default 1156 1146 1.01:1
ButtonOverridesMissPerf.default 1899 1906 1:1
CheckboxMinimalPerf.default 3145 3155 1:1
DatepickerMinimalPerf.default 55558 55386 1:1
MenuMinimalPerf.default 1045 1047 1:1
ProviderMergeThemesPerf.default 1737 1739 1:1
TextAreaMinimalPerf.default 600 601 1:1
TooltipMinimalPerf.default 916 912 1:1
TreeMinimalPerf.default 962 963 1:1
Dropdown.Fluent 3347 3354 1:1
LayoutMinimalPerf.default 494 500 0.99:1
ListCommonPerf.default 803 809 0.99:1
ListMinimalPerf.default 615 621 0.99:1
RadioGroupMinimalPerf.default 554 558 0.99:1
Button.Fluent 684 689 0.99:1
Slider.Fluent 1759 1777 0.99:1
ChatMinimalPerf.default 741 754 0.98:1
DropdownMinimalPerf.default 3298 3357 0.98:1
ListNestedPerf.default 689 702 0.98:1
ProviderMinimalPerf.default 1030 1048 0.98:1
SliderMinimalPerf.default 1696 1736 0.98:1
AttachmentMinimalPerf.default 195 202 0.97:1
ChatDuplicateMessagesPerf.default 420 432 0.97:1
TextMinimalPerf.default 442 458 0.97:1
TreeWith60ListItems.default 211 217 0.97:1
AlertMinimalPerf.default 365 380 0.96:1
CardMinimalPerf.default 659 688 0.96:1
FlexMinimalPerf.default 364 381 0.96:1
TableManyItemsPerf.default 2426 2522 0.96:1
AttachmentSlotsPerf.default 1385 1451 0.95:1
SegmentMinimalPerf.default 432 457 0.95:1
VideoMinimalPerf.default 727 764 0.95:1
RosterPerf.default 1290 1385 0.93:1

@ling1726
Copy link
Contributor

ling1726 commented Mar 1, 2021

Great job, thanks for following up on this so quickly 🚀

@layershifter layershifter merged commit 529d344 into master Mar 1, 2021
@layershifter layershifter deleted the chore/cleanup-deps branch March 1, 2021 09:59
@msft-fluent-ui-bot
Copy link
Collaborator

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

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

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

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

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

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

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

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

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

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

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

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

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

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

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

Handy links:

joshualamusga1 pushed a commit to joshualamusga1/fluentui that referenced this pull request Mar 25, 2021
* chore: cleanup dependencies for converged components

* fix exports

* fix lint error

* update API, move css() util

* remove cruft file

* Change files

* fix lint errors

* fix lint errors

* Update packages/react-utilities/src/hooks/useId.ts

* Update packages/react-theme/src/utils/mergeThemes.ts

* Update packages/react-utilities/src/compose/makeMergeProps.ts

* fix fmt
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

8 participants