Skip to content

Conversation

@layershifter
Copy link
Member

@layershifter layershifter commented Apr 25, 2023

New Behavior

This PR adds test-ssr script to v9 packages.

Change files have "none" change type as artifacts will not be affected.

Related Issue(s)

Previous PRs: #27444, #27463

Next steps:

  • Update pipelines to run test-ssr
  • Add implementation to @fluentui/scripts-test-ssr
  • Drop testing logic from @fluentui/ssr-tests-v9

@codesandbox-ci
Copy link

codesandbox-ci bot commented Apr 25, 2023

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 4d2cc0c:

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

@size-auditor
Copy link

size-auditor bot commented Apr 25, 2023

Asset size changes

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

Baseline commit: 322ee9ad8bbd87f7721068f664bfb530baf56623 (build)

@fabricteam
Copy link
Collaborator

fabricteam commented Apr 25, 2023

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 826 808 5000
Button mount 450 449 5000
Field mount 1527 1487 5000
FluentProvider mount 1041 1143 5000
FluentProviderWithTheme mount 136 143 10
FluentProviderWithTheme virtual-rerender 111 120 10
FluentProviderWithTheme virtual-rerender-with-unmount 126 127 10
InfoButton mount 20 23 5000
MakeStyles mount 1350 1338 50000
Persona mount 2411 2357 5000
SpinButton mount 1932 1888 5000

@fabricteam
Copy link
Collaborator

fabricteam commented Apr 25, 2023

📊 Bundle size report

Unchanged fixtures
Package & Exports Size (minified/GZIP)
global-context
createContext
533 B
341 B
global-context
createContextSelector
560 B
352 B
priority-overflow
createOverflowManager
3.194 kB
1.315 kB
react-accordion
Accordion (including children components)
86.064 kB
26.1 kB
react-alert
Alert
93.534 kB
22.497 kB
react-avatar
Avatar
57.754 kB
15.041 kB
react-avatar
AvatarGroup
15.632 kB
6.258 kB
react-avatar
AvatarGroupItem
73.968 kB
19.552 kB
react-badge
Badge
23.512 kB
7.197 kB
react-badge
CounterBadge
24.416 kB
7.506 kB
react-badge
PresenceBadge
32.094 kB
8.367 kB
react-button
Button
36.724 kB
9.458 kB
react-button
CompoundButton
43.873 kB
10.939 kB
react-button
MenuButton
41.411 kB
10.791 kB
react-button
SplitButton
49.635 kB
12.364 kB
react-button
ToggleButton
54.866 kB
11.367 kB
react-card
Card - All
86.061 kB
24.345 kB
react-card
Card
80.997 kB
22.895 kB
react-card
CardFooter
9.158 kB
3.844 kB
react-card
CardHeader
11.048 kB
4.538 kB
react-card
CardPreview
9.963 kB
4.192 kB
react-checkbox
Checkbox
34.268 kB
10.793 kB
react-combobox
Combobox (including child components)
87.251 kB
28.1 kB
react-combobox
Dropdown (including child components)
85.635 kB
27.697 kB
react-components
react-components: Button, FluentProvider & webLightTheme
64.855 kB
17.852 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
203.937 kB
57.086 kB
react-components
react-components: FluentProvider & webLightTheme
36.086 kB
11.9 kB
react-datepicker-compat
DatePicker Compat
220.303 kB
58.486 kB
react-dialog
Dialog (including children components)
90.204 kB
26.857 kB
react-divider
Divider
17.399 kB
6.298 kB
react-field
Field
18.864 kB
7.004 kB
react-image
Image
11.479 kB
4.573 kB
react-infobutton
InfoButton
127.977 kB
39.012 kB
react-infobutton
InfoLabel
131.26 kB
40 kB
react-input
Input
24.024 kB
7.682 kB
react-label
Label
10.104 kB
4.185 kB
react-link
Link
12.304 kB
5.061 kB
react-menu
Menu (including children components)
128.254 kB
39.184 kB
react-menu
Menu (including selectable components)
131.238 kB
39.7 kB
react-overflow
hooks only
11.214 kB
4.271 kB
react-persona
Persona
64.675 kB
16.968 kB
react-popover
Popover
114.969 kB
35.392 kB
react-portal
Portal
11.649 kB
4.262 kB
react-portal-compat
PortalCompatProvider
6.446 kB
2.186 kB
react-positioning
usePositioning
24.008 kB
8.798 kB
react-progress
ProgressBar
13.856 kB
5.434 kB
react-provider
FluentProvider
18.033 kB
6.666 kB
react-radio
Radio
27.282 kB
8.661 kB
react-radio
RadioGroup
11.312 kB
4.71 kB
react-select
Select
25.357 kB
8.798 kB
react-slider
Slider
34.164 kB
11.024 kB
react-spinbutton
SpinButton
33.934 kB
10.328 kB
react-spinner
Spinner
20.882 kB
6.798 kB
react-switch
Switch
29.806 kB
9.274 kB
react-table
DataGrid
147.583 kB
40.523 kB
react-table
Table (Primitives only)
44.348 kB
12.347 kB
react-table
Table as DataGrid
130.142 kB
33.083 kB
react-table
Table (Selection only)
78.056 kB
19.084 kB
react-table
Table (Sort only)
77.386 kB
18.896 kB
react-tags
Tag
21.687 kB
7.868 kB
react-text
Text - Default
12.492 kB
4.92 kB
react-text
Text - Wrappers
15.624 kB
5.232 kB
react-textarea
Textarea
27.545 kB
9.064 kB
react-theme
Single theme token import
69 B
89 B
react-theme
Teams: all themes
31.33 kB
6.764 kB
react-theme
Teams: Light theme
17.895 kB
5.162 kB
react-tooltip
Tooltip
46.708 kB
16.376 kB
react-utilities
SSRProvider
180 B
159 B
🤖 This report was generated against 322ee9ad8bbd87f7721068f664bfb530baf56623

@fabricteam
Copy link
Collaborator

fabricteam commented Apr 25, 2023

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
IconMinimalPerf.default 497 455 1.09:1
AccordionMinimalPerf.default 107 100 1.07:1
ListNestedPerf.default 416 391 1.06:1
AvatarMinimalPerf.default 138 132 1.05:1
GridMinimalPerf.default 250 239 1.05:1
HeaderMinimalPerf.default 269 256 1.05:1
TextMinimalPerf.default 247 236 1.05:1
TreeWith60ListItems.default 106 101 1.05:1
AttachmentMinimalPerf.default 102 98 1.04:1
BoxMinimalPerf.default 252 243 1.04:1
ReactionMinimalPerf.default 273 262 1.04:1
RefMinimalPerf.default 140 135 1.04:1
TableMinimalPerf.default 299 287 1.04:1
ButtonMinimalPerf.default 112 109 1.03:1
ButtonOverridesMissPerf.default 843 820 1.03:1
CardMinimalPerf.default 382 372 1.03:1
LabelMinimalPerf.default 289 281 1.03:1
ListWith60ListItems.default 475 463 1.03:1
ProviderMinimalPerf.default 276 267 1.03:1
ChatMinimalPerf.default 541 532 1.02:1
DropdownMinimalPerf.default 1851 1807 1.02:1
FlexMinimalPerf.default 202 198 1.02:1
InputMinimalPerf.default 725 712 1.02:1
ListMinimalPerf.default 384 378 1.02:1
SkeletonMinimalPerf.default 260 254 1.02:1
TreeMinimalPerf.default 600 587 1.02:1
DatepickerMinimalPerf.default 4518 4470 1.01:1
HeaderSlotsPerf.default 582 577 1.01:1
MenuButtonMinimalPerf.default 1253 1245 1.01:1
PopupMinimalPerf.default 454 448 1.01:1
ProviderMergeThemesPerf.default 988 980 1.01:1
SplitButtonMinimalPerf.default 3023 2997 1.01:1
TableManyItemsPerf.default 1436 1422 1.01:1
TextAreaMinimalPerf.default 352 348 1.01:1
ToolbarMinimalPerf.default 671 666 1.01:1
AnimationMinimalPerf.default 366 365 1:1
AttachmentSlotsPerf.default 832 835 1:1
DialogMinimalPerf.default 574 572 1:1
DropdownManyItemsPerf.default 489 487 1:1
EmbedMinimalPerf.default 2374 2376 1:1
MenuMinimalPerf.default 621 623 1:1
RosterPerf.default 1821 1828 1:1
PortalMinimalPerf.default 119 119 1:1
TooltipMinimalPerf.default 1635 1639 1:1
CarouselMinimalPerf.default 347 349 0.99:1
CheckboxMinimalPerf.default 1554 1570 0.99:1
DividerMinimalPerf.default 260 263 0.99:1
ItemLayoutMinimalPerf.default 897 903 0.99:1
LoaderMinimalPerf.default 241 243 0.99:1
SliderMinimalPerf.default 911 916 0.99:1
CustomToolbarPrototype.default 1885 1898 0.99:1
AlertMinimalPerf.default 198 202 0.98:1
ChatDuplicateMessagesPerf.default 192 196 0.98:1
ImageMinimalPerf.default 273 278 0.98:1
VideoMinimalPerf.default 520 530 0.98:1
ButtonSlotsPerf.default 391 402 0.97:1
ChatWithPopoverPerf.default 238 245 0.97:1
LayoutMinimalPerf.default 256 264 0.97:1
ListCommonPerf.default 489 504 0.97:1
RadioGroupMinimalPerf.default 331 340 0.97:1
FormMinimalPerf.default 272 283 0.96:1
SegmentMinimalPerf.default 249 259 0.96:1
StatusMinimalPerf.default 494 515 0.96:1

@fabricteam
Copy link
Collaborator

fabricteam commented Apr 25, 2023

🕵 fluentuiv8 No visual regressions between this PR and main

@fabricteam
Copy link
Collaborator

fabricteam commented Apr 25, 2023

🕵 FluentUI-v0 No visual regressions between this PR and main

@fabricteam
Copy link
Collaborator

fabricteam commented Apr 25, 2023

🕵 fluentuiv9 No visual regressions between this PR and main

@fabricteam
Copy link
Collaborator

fabricteam commented Apr 25, 2023

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 808 821 5000
Breadcrumb mount 2264 2288 1000
Checkbox mount 2171 2192 5000
CheckboxBase mount 1911 1948 5000
ChoiceGroup mount 3727 3782 5000
ComboBox mount 892 900 1000
CommandBar mount 8294 8336 1000
ContextualMenu mount 20320 20852 1000
DefaultButton mount 985 993 5000
DetailsRow mount 2939 2918 5000
DetailsRowFast mount 2914 2967 5000
DetailsRowNoStyles mount 2708 2690 5000
Dialog mount 3469 3458 1000
DocumentCardTitle mount 315 324 1000
Dropdown mount 2571 2554 5000
FocusTrapZone mount 1491 1506 5000
FocusZone mount 1468 1437 5000
GroupedList mount 50804 59163 2
GroupedList virtual-rerender 24431 24448 2
GroupedList virtual-rerender-with-unmount 76058 75418 2
GroupedListV2 mount 316 324 2
GroupedListV2 virtual-rerender 314 313 2
GroupedListV2 virtual-rerender-with-unmount 320 329 2
IconButton mount 1423 1425 5000
Label mount 454 462 5000
Layer mount 3580 3594 5000
Link mount 545 530 5000
MenuButton mount 1246 1233 5000
MessageBar mount 29103 28871 5000
Nav mount 2544 2524 1000
OverflowSet mount 1013 1011 5000
Panel mount 2325 2266 1000
Persona mount 996 978 1000
Pivot mount 1167 1192 1000
PrimaryButton mount 1098 1103 5000
Rating mount 5869 5835 5000
SearchBox mount 1159 1150 5000
Shimmer mount 2403 2343 5000
Slider mount 1730 1731 5000
SpinButton mount 3700 3753 5000
Spinner mount 514 517 5000
SplitButton mount 2446 2427 5000
Stack mount 537 540 5000
StackWithIntrinsicChildren mount 1140 1131 5000
StackWithTextChildren mount 3235 3245 5000
SwatchColorPicker mount 8193 8123 5000
TagPicker mount 1976 2023 5000
Text mount 498 504 5000
TextField mount 1208 1219 5000
ThemeProvider mount 1142 1140 5000
ThemeProvider virtual-rerender 788 778 5000
ThemeProvider virtual-rerender-with-unmount 1735 1740 5000
Toggle mount 803 802 5000
buttonNative mount 281 285 5000

@layershifter layershifter marked this pull request as ready for review April 25, 2023 16:08
@tudorpopams tudorpopams requested a review from Hotell April 26, 2023 12:12
@layershifter layershifter force-pushed the chore/add-test-ssr-script branch from d436f08 to 4d2cc0c Compare May 16, 2023 12:13
@layershifter
Copy link
Member Author

layershifter commented May 16, 2023

CI is passing ✅ Force merged as it does not affect published packages and I have enough approvals from the team.

@layershifter layershifter merged commit 06cd515 into microsoft:master May 16, 2023
@layershifter layershifter deleted the chore/add-test-ssr-script branch May 16, 2023 13:11
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request May 18, 2023
* master: (24 commits)
  chore(react-tabster): upgrade tabster to v4.4.2 (microsoft#27540)
  feat(react-tags): Add TagGroup with context (microsoft#27886)
  applying package updates
  fix(react-infobutton): Add aria-owns to InfoLabel (microsoft#27834)
  fix(recipes-react-components): Add a FluentProvider to the local storybook (microsoft#27746)
  chore: update RFC template (microsoft#27880)
  applying package updates
  feat: implement Toaster offset (microsoft#27854)
  feat(react-drawer): create DrawerFooter component (microsoft#27583)
  Make getKey and selection props mutually exclusive (microsoft#24048)
  Added MIGRATION.md to the Breadcrumb (microsoft#27846)
  update Github CODEOWNERS file (microsoft#27849)
  feat(react-tags): make basic Tag a button instead of div (microsoft#27858)
  chore: add test-ssr script to v9 packages (microsoft#27690)
  chore(react-tree): exports TreeItemAside unstable (microsoft#27856)
  bugfix(react-dialog): removes unnecessary grid gaps (microsoft#27845)
  applying package updates
  fix(react-textarea): Don't remove outline when filled and disabled and apply correct disabled color to text (microsoft#27837)
  feat: Implement limit for toast stacking (microsoft#27848)
  Update README.md for fluent 2 theme to include import instructions (microsoft#27847)
  ...
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request May 18, 2023
* feat/drawer-header: (24 commits)
  chore(react-tabster): upgrade tabster to v4.4.2 (microsoft#27540)
  feat(react-tags): Add TagGroup with context (microsoft#27886)
  applying package updates
  fix(react-infobutton): Add aria-owns to InfoLabel (microsoft#27834)
  fix(recipes-react-components): Add a FluentProvider to the local storybook (microsoft#27746)
  chore: update RFC template (microsoft#27880)
  applying package updates
  feat: implement Toaster offset (microsoft#27854)
  feat(react-drawer): create DrawerFooter component (microsoft#27583)
  Make getKey and selection props mutually exclusive (microsoft#24048)
  fix: move style override to outside the component
  Added MIGRATION.md to the Breadcrumb (microsoft#27846)
  update Github CODEOWNERS file (microsoft#27849)
  feat(react-tags): make basic Tag a button instead of div (microsoft#27858)
  chore: add test-ssr script to v9 packages (microsoft#27690)
  chore(react-tree): exports TreeItemAside unstable (microsoft#27856)
  bugfix(react-dialog): removes unnecessary grid gaps (microsoft#27845)
  applying package updates
  fix(react-textarea): Don't remove outline when filled and disabled and apply correct disabled color to text (microsoft#27837)
  feat: Implement limit for toast stacking (microsoft#27848)
  ...
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.

5 participants