fluentui icon indicating copy to clipboard operation
fluentui copied to clipboard
verified publisher icon microsoft

feat(workspace-plugin): implement workspace inferred plugin

Open Hotell opened this issue 1 year ago • 6 comments

Pre-requirements

  • [x] https://github.com/microsoft/fluentui/pull/32393

Previous Behavior

New Behavior

Implements workspace-plugin that creates targets based on project context in whole monorepo

  • mitigates perf impact of plugin per task scenario ( see https://github.com/microsoft/fluentui/pull/33058)

Related Issue(s)

  • Follows https://github.com/microsoft/fluentui/pull/32393
  • Implements partially https://github.com/microsoft/fluentui/issues/30267

Hotell avatar Oct 11 '24 09:10 Hotell

📊 Bundle size report

✅ No changes found

fabricteam avatar Oct 11 '24 09:10 fabricteam

Perf Analysis (@fluentui/react-components)

Scenario Render type Master Ticks PR Ticks Iterations Status
FluentProviderWithTheme virtual-rerender-with-unmount 73 75 10 Possible regression
All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 644 653 5000
Button mount 304 295 5000
Field mount 1195 1152 5000
FluentProvider mount 704 710 5000
FluentProviderWithTheme mount 86 82 10
FluentProviderWithTheme virtual-rerender 29 35 10
FluentProviderWithTheme virtual-rerender-with-unmount 73 75 10 Possible regression
MakeStyles mount 863 849 50000
Persona mount 1749 1710 5000
SpinButton mount 1400 1401 5000
SwatchPicker mount 1627 1641 5000

fabricteam avatar Oct 11 '24 09:10 fabricteam

🕵 FluentUIV0 No visual regressions between this PR and main

fabricteam avatar Oct 11 '24 09:10 fabricteam

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
AvatarMinimalPerf.default 119 107 1.11:1
TextMinimalPerf.default 211 190 1.11:1
AttachmentMinimalPerf.default 88 80 1.1:1
GridMinimalPerf.default 204 185 1.1:1
ChatMinimalPerf.default 461 424 1.09:1
DividerMinimalPerf.default 215 200 1.08:1
VideoMinimalPerf.default 442 410 1.08:1
ProviderMinimalPerf.default 213 200 1.07:1
IconMinimalPerf.default 400 373 1.07:1
ButtonSlotsPerf.default 329 309 1.06:1
ListMinimalPerf.default 328 309 1.06:1
RadioGroupMinimalPerf.default 264 248 1.06:1
BoxMinimalPerf.default 199 190 1.05:1
ToolbarMinimalPerf.default 553 526 1.05:1
TreeWith60ListItems.default 91 87 1.05:1
AnimationMinimalPerf.default 304 291 1.04:1
AttachmentSlotsPerf.default 657 629 1.04:1
FlexMinimalPerf.default 163 157 1.04:1
ImageMinimalPerf.default 241 231 1.04:1
TableMinimalPerf.default 242 232 1.04:1
AlertMinimalPerf.default 160 156 1.03:1
LayoutMinimalPerf.default 202 196 1.03:1
StatusMinimalPerf.default 391 381 1.03:1
ButtonMinimalPerf.default 89 87 1.02:1
CarouselMinimalPerf.default 266 260 1.02:1
DialogMinimalPerf.default 450 441 1.02:1
DropdownManyItemsPerf.default 391 385 1.02:1
DropdownMinimalPerf.default 1475 1440 1.02:1
HeaderMinimalPerf.default 205 201 1.02:1
ItemLayoutMinimalPerf.default 719 703 1.02:1
MenuMinimalPerf.default 511 502 1.02:1
PortalMinimalPerf.default 89 87 1.02:1
DatepickerMinimalPerf.default 3587 3563 1.01:1
HeaderSlotsPerf.default 465 460 1.01:1
LabelMinimalPerf.default 220 217 1.01:1
ListCommonPerf.default 385 383 1.01:1
ListNestedPerf.default 317 314 1.01:1
RefMinimalPerf.default 113 112 1.01:1
SegmentMinimalPerf.default 198 197 1.01:1
ButtonOverridesMissPerf.default 643 643 1:1
ChatWithPopoverPerf.default 196 196 1:1
PopupMinimalPerf.default 354 354 1:1
ProviderMergeThemesPerf.default 657 657 1:1
ReactionMinimalPerf.default 206 207 1:1
SkeletonMinimalPerf.default 193 193 1:1
CustomToolbarPrototype.default 1467 1469 1:1
CardMinimalPerf.default 311 315 0.99:1
EmbedMinimalPerf.default 1842 1859 0.99:1
LoaderMinimalPerf.default 198 201 0.99:1
MenuButtonMinimalPerf.default 946 952 0.99:1
SliderMinimalPerf.default 733 742 0.99:1
TreeMinimalPerf.default 472 476 0.99:1
AccordionMinimalPerf.default 86 88 0.98:1
CheckboxMinimalPerf.default 1108 1125 0.98:1
InputMinimalPerf.default 543 552 0.98:1
RosterPerf.default 1583 1617 0.98:1
SplitButtonMinimalPerf.default 2255 2295 0.98:1
TableManyItemsPerf.default 1087 1107 0.98:1
TooltipMinimalPerf.default 1261 1282 0.98:1
ListWith60ListItems.default 356 367 0.97:1
TextAreaMinimalPerf.default 275 284 0.97:1
ChatDuplicateMessagesPerf.default 152 158 0.96:1
FormMinimalPerf.default 213 222 0.96:1

fabricteam avatar Oct 11 '24 09:10 fabricteam

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 632 632 5000
Breadcrumb mount 1673 1687 1000
Checkbox mount 1717 1703 5000
CheckboxBase mount 1484 1508 5000
ChoiceGroup mount 2990 3023 5000
ComboBox mount 691 678 1000
CommandBar mount 6591 6588 1000
ContextualMenu mount 13330 12836 1000
DefaultButton mount 795 801 5000
DetailsRow mount 2248 2249 5000
DetailsRowFast mount 2248 2253 5000
DetailsRowNoStyles mount 2104 2076 5000
Dialog mount 2868 2743 1000
DocumentCardTitle mount 233 258 1000
Dropdown mount 2042 2005 5000
FocusTrapZone mount 1154 1167 5000
FocusZone mount 1078 1053 5000
GroupedList mount 42373 42992 2
GroupedList virtual-rerender 20363 20468 2
GroupedList virtual-rerender-with-unmount 52141 52453 2
GroupedListV2 mount 232 224 2
GroupedListV2 virtual-rerender 220 215 2
GroupedListV2 virtual-rerender-with-unmount 228 230 2
IconButton mount 1172 1142 5000
Label mount 335 349 5000
Layer mount 2736 2745 5000
Link mount 410 400 5000
MenuButton mount 1004 996 5000
MessageBar mount 21095 21204 5000
Nav mount 2038 2097 1000
OverflowSet mount 807 791 5000
Panel mount 1808 1855 1000
Persona mount 761 777 1000
Pivot mount 900 937 1000
PrimaryButton mount 939 932 5000
Rating mount 4722 4784 5000
SearchBox mount 930 933 5000
Shimmer mount 1884 1923 5000
Slider mount 1356 1376 5000
SpinButton mount 2987 3009 5000
Spinner mount 389 389 5000
SplitButton mount 1902 1876 5000
Stack mount 432 423 5000
StackWithIntrinsicChildren mount 886 898 5000
StackWithTextChildren mount 2822 2782 5000
SwatchColorPicker mount 6415 6364 5000
TagPicker mount 1481 1470 5000
Text mount 394 391 5000
TextField mount 939 962 5000
ThemeProvider mount 874 860 5000
ThemeProvider virtual-rerender 583 582 5000
ThemeProvider virtual-rerender-with-unmount 1318 1312 5000
Toggle mount 615 620 5000
buttonNative mount 198 194 5000

fabricteam avatar Oct 11 '24 09:10 fabricteam

🕵 fluentui-web-components-v3 No visual regressions between this PR and main

fabricteam avatar Oct 16 '24 15:10 fabricteam

LGTM! One thing I'd suggest is to switch to fs fixtures from inline snapshots and to have more like end-to-end tests, but unsure if it's worth the extra effort.

so this is kinda (e2e) , but not really - it's an integration test within our workspace - we create physical files on tmp FS, on which we run createNode function.

Regarding assertion only thing we are interested in testing is the json configuration that it creates based on the existing tmp FS. with that moving that into physical file is not that different with file snapshots ( which I don't suggest to use for any kind of scenarious as they are decoupled and provide bad DX in terms of evaluating the test ).

proper e2e tests are necessary for plugins that we gonna ship to npm for other repos, which would slightly adjust the flow here and be more resource consuming:

  • bootstrap brand new workspace
  • bootstrap dummy projects
  • install and register the plugin
  • run cli nx show project <project> --json and capture it's output
  • assert previous ouput

Hotell avatar Oct 21 '24 09:10 Hotell