Skip to content

feat(scripts-storybook): unify workspace addon loading for dev and prod builds#27006

Merged
Hotell merged 6 commits intomicrosoft:masterfrom
Hotell:hotell/build/storybook/workspace-addon-unification
Mar 1, 2023
Merged

feat(scripts-storybook): unify workspace addon loading for dev and prod builds#27006
Hotell merged 6 commits intomicrosoft:masterfrom
Hotell:hotell/build/storybook/workspace-addon-unification

Conversation

@Hotell
Copy link
Contributor

@Hotell Hotell commented Feb 28, 2023 •
edited
Loading

Previous Behavior

  • workspace storybook addons need to be manually build prior to execute build-storybook
  • this might have caused some issues as manager and preview was being build from 2 different sources (javascript / typescript)
  • building storybooks on CI is slower as manual addon builds needs to happen first

New Behavior

  • workpsace addon dont need to build manually
  • manager and preview uses same bundling and same code to execute
  • building storybook on CI doesn't need any pre-requirements thus fully leveraging swc + TS path aliases transpilation speed
  • building v0 VR storybook is no longer building whole v0 dep tree which reduces CI time by approx 9 minutes for v0 VR test execution
    • this results in 27% faster pipeline for VR tests
    • BEFORE: image
    • BEFORE: whole v0 vr pipeline image

Related Issue(s)

@Hotell Hotell changed the title Hotell/build/storybook/workspace addon unification feat(scripts-storybook): unify workspace addon loading for dev and prod builds Feb 28, 2023
@Hotell Hotell mentioned this pull request Feb 28, 2023
Merged
@size-auditor
Copy link

size-auditor bot commented Feb 28, 2023 •
edited
Loading

Asset size changes

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

Baseline commit: 8d78a7d04504659f3ab8251a72602c3eac385a79 (build)

@fabricteam
Copy link
Collaborator

fabricteam commented Feb 28, 2023 •
edited
Loading

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 1305 1348 5000
Button mount 946 926 5000
Field mount 2066 2024 5000
FluentProvider mount 1631 1631 5000
FluentProviderWithTheme mount 634 633 10
FluentProviderWithTheme virtual-rerender 582 588 10
FluentProviderWithTheme virtual-rerender-with-unmount 624 623 10
InfoButton mount 565 570 5000
MakeStyles mount 1904 1909 50000
Persona mount 3057 3042 5000
SpinButton mount 2478 2452 5000

@codesandbox-ci
Copy link

codesandbox-ci bot commented Feb 28, 2023 •
edited
Loading

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 13853d5:

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

@fabricteam
Copy link
Collaborator

fabricteam commented Feb 28, 2023

Perf Analysis (@fluentui/react-northstar)

⚠️ No perf measurements available

@fabricteam
Copy link
Collaborator

fabricteam commented Feb 28, 2023 •
edited
Loading

📊 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)		 85.876 kB
26.019 kB
react-alert
Alert		 87.465 kB
21.569 kB
react-avatar
Avatar		 51.192 kB
14.043 kB
react-avatar
AvatarGroup		 15.42 kB
6.167 kB
react-avatar
AvatarGroupItem		 67.414 kB
18.551 kB
react-badge
Badge		 23.113 kB
7.069 kB
react-badge
CounterBadge		 24.002 kB
7.374 kB
react-badge
PresenceBadge		 25.438 kB
7.254 kB
react-button
Button		 36.888 kB
9.412 kB
react-button
CompoundButton		 44.063 kB
10.885 kB
react-button
MenuButton		 41.568 kB
10.742 kB
react-button
SplitButton		 49.997 kB
12.321 kB
react-button
ToggleButton		 55.252 kB
11.331 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		 33.091 kB
10.319 kB
react-checkbox
CheckboxField		 39.996 kB
12.206 kB
react-combobox
Combobox (including child components)		 85.509 kB
27.437 kB
react-combobox
ComboboxField		 81.926 kB
27.213 kB
react-combobox
Dropdown (including child components)		 84.196 kB
27.191 kB
react-components
react-components: Button, FluentProvider & webLightTheme		 64.09 kB
17.544 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover		 202.311 kB
56.366 kB
react-components
react-components: FluentProvider & webLightTheme		 35.049 kB
11.533 kB
react-dialog
Dialog (including children components)		 89.719 kB
26.685 kB
react-divider
Divider		 17.11 kB
6.18 kB
react-field
Field		 17.673 kB
6.543 kB
react-image
Image		 11.259 kB
4.473 kB
react-infobutton
InfoButton		 127.413 kB
38.821 kB
react-input
Input		 22.94 kB
7.214 kB
react-input
InputField		 32.819 kB
10.111 kB
react-label
Label		 9.822 kB
4.066 kB
react-link
Link		 12.306 kB
5.073 kB
react-menu
Menu (including children components)		 126.86 kB
38.831 kB
react-menu
Menu (including selectable components)		 129.929 kB
39.345 kB
react-overflow
hooks only		 11.214 kB
4.271 kB
react-persona
Persona		 58.207 kB
15.986 kB
react-popover
Popover		 114.485 kB
35.245 kB
react-portal
Portal		 11.377 kB
4.179 kB
react-portal-compat
PortalCompatProvider		 6.324 kB
2.129 kB
react-positioning
usePositioning		 23.791 kB
8.73 kB
react-progress
ProgressBar		 13.59 kB
5.24 kB
react-progress
ProgressField		 23.885 kB
8.385 kB
react-provider
FluentProvider		 17.116 kB
6.332 kB
react-radio
Radio		 32.676 kB
10.616 kB
react-radio
RadioGroup		 14.885 kB
5.933 kB
react-radio
RadioGroupField		 24.963 kB
9.07 kB
react-select
Select		 24.145 kB
8.271 kB
react-select
SelectField		 33.384 kB
10.779 kB
react-slider
Slider		 33.091 kB
10.555 kB
react-slider
SliderField		 42.922 kB
13.465 kB
react-spinbutton
SpinButton		 32.83 kB
9.864 kB
react-spinbutton
SpinButtonField		 41.766 kB
12.254 kB
react-spinner
Spinner		 20.62 kB
6.682 kB
react-switch
Switch		 28.225 kB
8.755 kB
react-switch
SwitchField		 35.01 kB
10.655 kB
react-table
DataGrid		 143.646 kB
39.157 kB
react-table
Table (Primitives only)		 43.776 kB
12.063 kB
react-table
Table as DataGrid		 134.4 kB
34.514 kB
react-table
Table (Selection only)		 82.316 kB
20.576 kB
react-table
Table (Sort only)		 81.637 kB
20.386 kB
react-text
Text - Default		 12.261 kB
4.819 kB
react-text
Text - Wrappers		 15.571 kB
5.23 kB
react-textarea
Textarea		 26.336 kB
8.585 kB
react-textarea
TextareaField		 36.537 kB
11.504 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		 46.328 kB
16.212 kB
react-utilities
SSRProvider		 180 B
159 B
🤖 This report was generated against 8d78a7d04504659f3ab8251a72602c3eac385a79

@fabricteam
Copy link
Collaborator

fabricteam commented Feb 28, 2023 •
edited
Loading

🕵 fluentuiv9 No visual regressions between this PR and main

@fabricteam
Copy link
Collaborator

fabricteam commented Feb 28, 2023 •
edited
Loading

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 1187 1188 5000
Breadcrumb mount 2974 2976 1000
Checkbox mount 2642 2649 5000
CheckboxBase mount 2338 2359 5000
ChoiceGroup mount 4438 4394 5000
ComboBox mount 1235 1246 1000
CommandBar mount 9598 9604 1000
ContextualMenu mount 15385 14161 1000
DefaultButton mount 1358 1393 5000
DetailsRow mount 3463 3456 5000
DetailsRowFast mount 3459 3440 5000
DetailsRowNoStyles mount 3332 3314 5000
Dialog mount 3063 3103 1000
DocumentCardTitle mount 570 578 1000
Dropdown mount 3214 3220 5000
FocusTrapZone mount 2013 2008 5000
FocusZone mount 1973 1968 5000
GroupedList mount 52072 57625 2
GroupedList virtual-rerender 23778 23911 2
GroupedList virtual-rerender-with-unmount 92381 92353 2
GroupedListV2 mount 554 558 2
GroupedListV2 virtual-rerender 544 548 2
GroupedListV2 virtual-rerender-with-unmount 571 553 2
IconButton mount 1889 1909 5000
Label mount 730 735 5000
Layer mount 4302 4254 5000
Link mount 823 836 5000
MenuButton mount 1650 1680 5000
MessageBar mount 2270 2318 5000
Nav mount 3281 3276 1000
OverflowSet mount 1385 1375 5000
Panel mount 2535 2556 1000
Persona mount 1316 1327 1000
Pivot mount 1654 1655 1000
PrimaryButton mount 1505 1514 5000
Rating mount 6928 6927 5000
SearchBox mount 1490 1499 5000
Shimmer mount 2840 2859 5000
Slider mount 2051 2076 5000
SpinButton mount 4677 4630 5000
Spinner mount 804 805 5000
SplitButton mount 3098 3131 5000
Stack mount 824 831 5000
StackWithIntrinsicChildren mount 2290 2294 5000
StackWithTextChildren mount 4758 4758 5000
SwatchColorPicker mount 10396 10422 5000
TagPicker mount 2648 2611 5000
TeachingBubble mount 87147 87898 5000
Text mount 797 783 5000
TextField mount 1569 1585 5000
ThemeProvider mount 1515 1524 5000
ThemeProvider virtual-rerender 1080 1095 5000
ThemeProvider virtual-rerender-with-unmount 2163 2146 5000
Toggle mount 1109 1087 5000
buttonNative mount 537 533 5000

Hotell
Hotell commented Feb 28, 2023
View reviewed changes
Hotell
Hotell commented Feb 28, 2023
View reviewed changes
@fabricteam
Copy link
Collaborator

fabricteam commented Feb 28, 2023 •
edited
Loading

🕵 fluentuiv8 No visual regressions between this PR and main

@fabricteam
Copy link
Collaborator

fabricteam commented Feb 28, 2023 •
edited
Loading

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

@Hotell Hotell marked this pull request as ready for review February 28, 2023 17:29
@Hotell Hotell requested review from a team as code owners February 28, 2023 17:29
@TristanWatanabe TristanWatanabe mentioned this pull request Feb 28, 2023
Closed
@Hotell Hotell mentioned this pull request Feb 28, 2023
Closed
Hotell
Hotell commented Feb 28, 2023
View reviewed changes
Hotell
Hotell commented Feb 28, 2023
View reviewed changes
@Hotell Hotell enabled auto-merge (squash) February 28, 2023 17:53
TristanWatanabe
TristanWatanabe approved these changes Feb 28, 2023
View reviewed changes
@Hotell Hotell force-pushed the hotell/build/storybook/workspace-addon-unification branch from beb5180 to 13853d5 Compare March 1, 2023 10:20
@Hotell Hotell merged commit 6c124eb into microsoft:master Mar 1, 2023
@TristanWatanabe TristanWatanabe mentioned this pull request Mar 1, 2023
Open
8 tasks
GeoffCoxMSFT pushed a commit to GeoffCoxMSFT/fluentui that referenced this pull request Mar 1, 2023
@Hotell @GeoffCoxMSFT
feat(scripts-storybook): unify workspace addon loading for dev and pr…
b008c12 
…od builds (microsoft#27006)

* chore: disable manager chache on vr storybook production builds

* chore(react-components): remove unnecessary devDeps on workspace addon

* feat(scripts-storybook): unify workspace addon loading for dev and prod builds

* ci(vr): don't manually build workspace addon prior to run build-storybook for v9 tests

* generate changefile

* ci(vr): don't manually build v0 prior to run build-storybook for v0 tests
@TristanWatanabe TristanWatanabe mentioned this pull request Mar 2, 2023
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@TristanWatanabe TristanWatanabe TristanWatanabe approved these changes

+1 more reviewer

@ling1726 ling1726 ling1726 approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

@Hotell Hotell

Labels

Area: Build System

Projects

None yet

Milestone

February Project Cycle Q1 2023

Development

Successfully merging this pull request may close these issues.

Storybook build needs addons to be built first

5 participants

@Hotell @fabricteam @TristanWatanabe @ling1726 @msft-fluent-ui-bot