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: prerequisite changes before migrating v9 packages to SWC based transpilation #26965

Conversation

TristanWatanabe
Copy link
Member

@TristanWatanabe TristanWatanabe commented Feb 24, 2023

Changes:

  • Changes made in this PR are necessary to address issues found during testing that occur for v9 with VR and Perf testing after v9 packages are transpiled with swc.
    • withFluentProvider decorator is explicitly applied in @fluentui/vr-tests-react-components storybook config to address an issue where VR tests written in CSF were not applying the decorator when built with storybook's build-storybook command. No longer necessary, feat(scripts-storybook): unify workspace addon loading for dev and prod builds #27006 fixes the root of the issue.
    • puppeteer is now pinned to version 19 to address a hang that occurs with perf testing in v9 presumably caused by a super old version (v1) of puppeteer used by our perf testing tool flamegrill. After this change, everything works as expected besides v8's TeachingBubble perf test which freezes during testing and has now been temporarily disabled.
    • rollup version used for @fluentui/projects-test is bumped to version 2.68.0 to resolve issue related to usage of the rollup commonjs package in the rollup config.

Related Issue(s)

@size-auditor
Copy link

size-auditor bot commented Feb 24, 2023

Asset size changes

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

Baseline commit: 32e934b7443ca457be0e760c6380ec20f03976c3 (build)

@fabricteam
Copy link
Collaborator

fabricteam commented Feb 24, 2023

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 766 789 5000
Button mount 525 484 5000
Field mount 1526 1412 5000
FluentProvider mount 1089 1093 5000
FluentProviderWithTheme mount 252 254 10
FluentProviderWithTheme virtual-rerender 217 191 10
FluentProviderWithTheme virtual-rerender-with-unmount 281 272 10
InfoButton mount 168 188 5000
MakeStyles mount 1310 1315 50000
Persona mount 2108 2199 5000
SpinButton mount 1907 1928 5000

@codesandbox-ci
Copy link

codesandbox-ci bot commented Feb 24, 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 0fe8a72:

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

@fabricteam
Copy link
Collaborator

fabricteam commented Feb 24, 2023

📊 Bundle size report

Unchanged fixtures
Package & Exports Size (minified/GZIP)
global-context
createContext
533 B
341 B
global-context
createContextSelector
554 B
348 B
priority-overflow
createOverflowManager
3.194 kB
1.314 kB
react-accordion
Accordion (including children components)
88.789 kB
26.532 kB
react-alert
Alert
90.467 kB
22.106 kB
react-avatar
Avatar
54.149 kB
14.571 kB
react-avatar
AvatarGroup
18.064 kB
6.664 kB
react-avatar
AvatarGroupItem
70.425 kB
19.075 kB
react-badge
Badge
25.746 kB
7.568 kB
react-badge
CounterBadge
26.725 kB
7.874 kB
react-badge
PresenceBadge
28.318 kB
7.779 kB
react-button
Button
39.613 kB
9.935 kB
react-button
CompoundButton
46.795 kB
11.405 kB
react-button
MenuButton
44.296 kB
11.255 kB
react-button
SplitButton
52.846 kB
12.866 kB
react-button
ToggleButton
57.982 kB
11.853 kB
react-card
Card - All
83.548 kB
23.894 kB
react-card
Card
78.317 kB
22.433 kB
react-card
CardFooter
9.045 kB
3.806 kB
react-card
CardHeader
10.984 kB
4.509 kB
react-card
CardPreview
9.852 kB
4.159 kB
react-checkbox
Checkbox
35.895 kB
10.82 kB
react-checkbox
CheckboxField
42.8 kB
12.714 kB
react-combobox
Combobox (including child components)
88.7 kB
28.099 kB
react-combobox
ComboboxField
85.066 kB
27.838 kB
react-combobox
Dropdown (including child components)
87.387 kB
27.842 kB
react-components
react-components: Button, FluentProvider & webLightTheme
67.03 kB
18.099 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
206.317 kB
57.147 kB
react-components
react-components: FluentProvider & webLightTheme
37.861 kB
12.034 kB
react-dialog
Dialog (including children components)
92.72 kB
27.216 kB
react-divider
Divider
19.754 kB
6.68 kB
react-field
Field
20.397 kB
7.053 kB
react-image
Image
13.897 kB
4.974 kB
react-infobutton
InfoButton
130.438 kB
39.407 kB
react-input
Input
25.664 kB
7.695 kB
react-input
InputField
35.613 kB
10.592 kB
react-label
Label
12.461 kB
4.57 kB
react-link
Link
12.306 kB
5.073 kB
react-menu
Menu (including children components)
130.333 kB
39.499 kB
react-menu
Menu (including selectable components)
133.509 kB
40.037 kB
react-overflow
hooks only
11.214 kB
4.271 kB
react-persona
Persona
61.21 kB
16.521 kB
react-popover
Popover
117.51 kB
35.799 kB
react-portal
Portal
11.715 kB
4.265 kB
react-portal-compat
PortalCompatProvider
6.324 kB
2.129 kB
react-positioning
usePositioning
24.01 kB
8.793 kB
react-progress
ProgressBar
15.965 kB
5.701 kB
react-progress
ProgressField
26.415 kB
8.872 kB
react-provider
FluentProvider
19.928 kB
6.832 kB
react-radio
Radio
35.392 kB
11.117 kB
react-radio
RadioGroup
17.872 kB
6.523 kB
react-radio
RadioGroupField
28.023 kB
9.681 kB
react-select
Select
26.87 kB
8.761 kB
react-select
SelectField
36.179 kB
11.28 kB
react-slider
Slider
35.816 kB
11.043 kB
react-slider
SliderField
45.717 kB
13.975 kB
react-spinbutton
SpinButton
35.559 kB
10.351 kB
react-spinbutton
SpinButtonField
44.565 kB
12.765 kB
react-spinner
Spinner
23.336 kB
7.18 kB
react-switch
Switch
30.943 kB
9.25 kB
react-switch
SwitchField
37.805 kB
11.148 kB
react-table
DataGrid
149.792 kB
40.502 kB
react-table
Table (Primitives only)
46.798 kB
12.557 kB
react-table
Table as DataGrid
137.684 kB
35.154 kB
react-table
Table (Selection only)
85.511 kB
21.173 kB
react-table
Table (Sort only)
84.832 kB
20.982 kB
react-text
Text - Default
14.898 kB
5.31 kB
react-text
Text - Wrappers
15.571 kB
5.23 kB
react-textarea
Textarea
28.981 kB
9.071 kB
react-textarea
TextareaField
39.334 kB
12.008 kB
react-theme
Single theme token import
69 B
89 B
react-theme
Teams: all themes
30.908 kB
6.714 kB
react-theme
Teams: Light theme
17.776 kB
5.141 kB
react-tooltip
Tooltip
49.351 kB
16.799 kB
react-utilities
SSRProvider
180 B
159 B
🤖 This report was generated against 32e934b7443ca457be0e760c6380ec20f03976c3

@fabricteam
Copy link
Collaborator

Perf Analysis (@fluentui/react-northstar)

⚠️ No perf measurements available

@fabricteam
Copy link
Collaborator

fabricteam commented Feb 24, 2023

🕵 fluentuiv9 No visual regressions between this PR and main

@fabricteam
Copy link
Collaborator

fabricteam commented Feb 24, 2023

Perf Analysis (@fluentui/react)

Scenario Render type Master Ticks PR Ticks Iterations Status
GroupedList mount 42487 52910 2 Possible regression
All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 963 959 5000
Breadcrumb mount 2215 2238 1000
Checkbox mount 2181 2208 5000
CheckboxBase mount 1946 1960 5000
ChoiceGroup mount 3668 3674 5000
ComboBox mount 950 1009 1000
CommandBar mount 8065 8041 1000
ContextualMenu mount 14950 14476 1000
DefaultButton mount 1089 1109 5000
DetailsRow mount 2809 2830 5000
DetailsRowFast mount 2762 2777 5000
DetailsRowNoStyles mount 2566 2575 5000
Dialog mount 3123 3120 1000
DocumentCardTitle mount 421 415 1000
Dropdown mount 2633 2637 5000
FocusTrapZone mount 1569 1541 5000
FocusZone mount 1485 1492 5000
GroupedList mount 42487 52910 2 Possible regression
GroupedList virtual-rerender 22454 22688 2
GroupedList virtual-rerender-with-unmount 63883 63903 2
GroupedListV2 mount 417 408 2
GroupedListV2 virtual-rerender 398 401 2
GroupedListV2 virtual-rerender-with-unmount 416 414 2
IconButton mount 1567 1484 5000
Label mount 580 573 5000
Layer mount 3527 3504 5000
Link mount 650 656 5000
MenuButton mount 1314 1313 5000
MessageBar mount 26372 26313 5000
Nav mount 2542 2549 1000
OverflowSet mount 1134 1133 5000
Panel mount 2060 2094 1000
Persona mount 1029 1071 1000
Pivot mount 1239 1227 1000
PrimaryButton mount 1181 1189 5000
Rating mount 5899 5821 5000
SearchBox mount 1223 1223 5000
Shimmer mount 2470 2471 5000
Slider mount 1777 1770 5000
SpinButton mount 3590 3571 5000
Spinner mount 622 637 5000
SplitButton mount 2382 2412 5000
Stack mount 672 676 5000
StackWithIntrinsicChildren mount 1218 1234 5000
StackWithTextChildren mount 3584 3556 5000
SwatchColorPicker mount 7585 7626 5000
TagPicker mount 1879 1877 5000
Text mount 627 627 5000
TextField mount 1284 1290 5000
ThemeProvider mount 1124 1137 5000
ThemeProvider virtual-rerender 918 911 5000
ThemeProvider virtual-rerender-with-unmount 1682 1649 5000
Toggle mount 907 912 5000
buttonNative mount 390 370 5000

@fabricteam
Copy link
Collaborator

fabricteam commented Feb 24, 2023

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

@TristanWatanabe TristanWatanabe changed the title chore: prereq changes before migrating v9 packages to SWC based transpilation chore: prerequisite changes before migrating v9 packages to SWC based transpilation Feb 24, 2023
@TristanWatanabe TristanWatanabe marked this pull request as ready for review February 24, 2023 22:14
@TristanWatanabe TristanWatanabe requested review from a team as code owners February 24, 2023 22:14
@TristanWatanabe TristanWatanabe requested a review from a team as a code owner March 1, 2023 14:08
@github-actions github-actions bot removed this from the February Project Cycle Q1 2023 milestone Mar 1, 2023
@github-actions github-actions bot added this to the March Project Cycle Q1 2023 milestone Mar 1, 2023
@TristanWatanabe TristanWatanabe removed the request for review from a team March 1, 2023 14:20
@TristanWatanabe TristanWatanabe changed the title chore: prerequisite changes before migrating v9 packages to SWC based transpilation chore: pin puppeteer to version 19 to keep perf test tool functional after swc based transpilation migration Mar 1, 2023
@TristanWatanabe TristanWatanabe requested a review from a team as a code owner March 9, 2023 17:58
@TristanWatanabe TristanWatanabe changed the title chore: pin puppeteer to version 19 to keep perf test tool functional after swc based transpilation migration chore: prerequisite changes before migrating v9 packages to SWC based transpilation Mar 9, 2023
@fabricteam
Copy link
Collaborator

fabricteam commented Mar 9, 2023

🕵 fluentuiv8 No visual regressions between this PR and main

@TristanWatanabe TristanWatanabe merged commit 189ef97 into microsoft:master Mar 15, 2023
@TristanWatanabe TristanWatanabe deleted the prereq-changes-before-swc-transpilation branch March 15, 2023 20:50
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Mar 15, 2023
* master: (141 commits)
  chore: prerequisite changes before migrating v9 packages to SWC based transpilation (microsoft#26965)
  feat: Add InfoLabel component (microsoft#27118)
  fix(tools): update migrate-converged generator to add node field to package.json exports map (microsoft#27152)
  applying package updates
  fix: Embed play/pause indicator should render correctly in high contrast mode (microsoft#27213)
  feat(tokens): Add colorNeutralBackgroundAlpha and colorNeutralStrokeAlpha tokens (microsoft#27034)
  chore: Prepare release 0.66.4 (microsoft#27163)
  fix(react-datepicker-compat): Fix text entry issues with input (microsoft#27204)
  fix: Smooth out animation of indeterminate progress bar (microsoft#27201)
  Add cxe-red as a codeowner of react-file-type-icons (microsoft#27147)
  Added documentation about custom style hooks (microsoft#27087)
  Custom style react-text (microsoft#27078)
  Custom style react-image (microsoft#27066)
  Add JSDoc for tabster focus indicator selector (microsoft#27041)
  Theme designer: Move colors to local files (microsoft#27191)
  docs(react-card): move card out of preview (microsoft#27185)
  Include values in typography table (microsoft#27189)
  feat: accept a className in `mountNode` in `Portal` (microsoft#27008)
  RFC: Extend `mountNode` prop in `Portal` (microsoft#27009)
  applying package updates
  ...
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Mar 15, 2023
* master: (141 commits)
  chore: prerequisite changes before migrating v9 packages to SWC based transpilation (microsoft#26965)
  feat: Add InfoLabel component (microsoft#27118)
  fix(tools): update migrate-converged generator to add node field to package.json exports map (microsoft#27152)
  applying package updates
  fix: Embed play/pause indicator should render correctly in high contrast mode (microsoft#27213)
  feat(tokens): Add colorNeutralBackgroundAlpha and colorNeutralStrokeAlpha tokens (microsoft#27034)
  chore: Prepare release 0.66.4 (microsoft#27163)
  fix(react-datepicker-compat): Fix text entry issues with input (microsoft#27204)
  fix: Smooth out animation of indeterminate progress bar (microsoft#27201)
  Add cxe-red as a codeowner of react-file-type-icons (microsoft#27147)
  Added documentation about custom style hooks (microsoft#27087)
  Custom style react-text (microsoft#27078)
  Custom style react-image (microsoft#27066)
  Add JSDoc for tabster focus indicator selector (microsoft#27041)
  Theme designer: Move colors to local files (microsoft#27191)
  docs(react-card): move card out of preview (microsoft#27185)
  Include values in typography table (microsoft#27189)
  feat: accept a className in `mountNode` in `Portal` (microsoft#27008)
  RFC: Extend `mountNode` prop in `Portal` (microsoft#27009)
  applying package updates
  ...
@Hotell Hotell mentioned this pull request Apr 6, 2023
28 tasks
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