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

Hotell · 2023-02-28T10:35:49Z

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:
- BEFORE: whole v0 vr pipeline

Related Issue(s)

Fixes Storybook build needs addons to be built first #26925

size-auditor · 2023-02-28T10:59:38Z

Asset size changes

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

Baseline commit: 8d78a7d04504659f3ab8251a72602c3eac385a79 (build)

fabricteam · 2023-02-28T11:02:08Z

Perf Analysis (`@fluentui/react-components`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
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 · 2023-02-28T11:02:39Z

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 · 2023-02-28T11:06:56Z

Perf Analysis (`@fluentui/react-northstar`)

⚠️ No perf measurements available

fabricteam · 2023-02-28T11:08:40Z

📊 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 · 2023-02-28T11:10:30Z

🕵 fluentuiv9 No visual regressions between this PR and main

fabricteam · 2023-02-28T11:32:15Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
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

azure-pipelines.vrt-baseline.yml

packages/fluentui/docs/package.json

fabricteam · 2023-02-28T15:38:32Z

🕵 fluentuiv8 No visual regressions between this PR and main

fabricteam · 2023-02-28T16:00:11Z

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

packages/react-components/react-components/package.json

packages/fluentui/docs/package.json

…od builds

…book for v9 tests

…ests

…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

msft-fluent-ui-bot assigned Hotell Feb 28, 2023

github-actions bot added this to the February Project Cycle Q1 2023 milestone Feb 28, 2023

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 mentioned this pull request Feb 28, 2023

chore: prerequisite changes before migrating v9 packages to SWC based transpilation #26965

Merged

Hotell commented Feb 28, 2023

View reviewed changes

azure-pipelines.vrt-baseline.yml Show resolved Hide resolved

Hotell commented Feb 28, 2023

View reviewed changes

packages/fluentui/docs/package.json Outdated Show resolved Hide resolved

Hotell marked this pull request as ready for review February 28, 2023 17:29

Hotell requested review from a team as code owners February 28, 2023 17:29

TristanWatanabe mentioned this pull request Feb 28, 2023

Remove shouldBuildstorybookaddon from template for VR Tests pipeline #27010

Closed

msft-fluent-ui-bot added the Area: Build System label Feb 28, 2023

Hotell mentioned this pull request Feb 28, 2023

Storybook build needs addons to be built first #26925

Closed

Hotell commented Feb 28, 2023

View reviewed changes

packages/react-components/react-components/package.json Show resolved Hide resolved

Hotell commented Feb 28, 2023

View reviewed changes

packages/fluentui/docs/package.json Show resolved Hide resolved

Hotell enabled auto-merge (squash) February 28, 2023 17:53

TristanWatanabe approved these changes Feb 28, 2023

View reviewed changes

packages/fluentui/docs/package.json Show resolved Hide resolved

Hotell added 4 commits March 1, 2023 11:20

chore: disable manager chache on vr storybook production builds

e1090b4

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

b1e6077

feat(scripts-storybook): unify workspace addon loading for dev and pr…

017bba7

…od builds

ci(vr): don't manually build workspace addon prior to run build-story…

d781ca2

…book for v9 tests

Hotell added 2 commits March 1, 2023 11:20

generate changefile

a17deb8

ci(vr): don't manually build v0 prior to run build-storybook for v0 t…

13853d5

…ests

Hotell force-pushed the hotell/build/storybook/workspace-addon-unification branch from beb5180 to 13853d5 Compare March 1, 2023 10:20

ling1726 approved these changes Mar 1, 2023

View reviewed changes

Hotell merged commit 6c124eb into microsoft:master Mar 1, 2023

TristanWatanabe mentioned this pull request Mar 1, 2023

setup v9 transpilation to be based on browser support minbar #26170

Open

8 tasks

TristanWatanabe mentioned this pull request Mar 2, 2023

chore(VRT Pipelines): remove unneeded variables from yml files #27040

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

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

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

Uh oh!

Hotell commented Feb 28, 2023 •

edited

Loading

Uh oh!

size-auditor bot commented Feb 28, 2023 •

edited

Loading

Uh oh!

fabricteam commented Feb 28, 2023 •

edited

Loading

Uh oh!

codesandbox-ci bot commented Feb 28, 2023 •

edited

Loading

Uh oh!

fabricteam commented Feb 28, 2023

Uh oh!

fabricteam commented Feb 28, 2023 •

edited

Loading

Uh oh!

fabricteam commented Feb 28, 2023 •

edited

Loading

Uh oh!

fabricteam commented Feb 28, 2023 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

fabricteam commented Feb 28, 2023 •

edited

Loading

Uh oh!

fabricteam commented Feb 28, 2023 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

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

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

Uh oh!

Conversation

Hotell commented Feb 28, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Previous Behavior

New Behavior

Related Issue(s)

Uh oh!

size-auditor bot commented Feb 28, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Asset size changes

Uh oh!

fabricteam commented Feb 28, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Perf Analysis (@fluentui/react-components)

Uh oh!

codesandbox-ci bot commented Feb 28, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

fabricteam commented Feb 28, 2023

Perf Analysis (@fluentui/react-northstar)

Uh oh!

fabricteam commented Feb 28, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Bundle size report

Uh oh!

fabricteam commented Feb 28, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🕵 fluentuiv9 No visual regressions between this PR and main

Uh oh!

fabricteam commented Feb 28, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Perf Analysis (@fluentui/react)

Uh oh!

Uh oh!

Uh oh!

fabricteam commented Feb 28, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🕵 fluentuiv8 No visual regressions between this PR and main

Uh oh!

fabricteam commented Feb 28, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

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

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Hotell commented Feb 28, 2023 •

edited

Loading

size-auditor bot commented Feb 28, 2023 •

edited

Loading

fabricteam commented Feb 28, 2023 •

edited

Loading

Perf Analysis (`@fluentui/react-components`)

codesandbox-ci bot commented Feb 28, 2023 •

edited

Loading

Perf Analysis (`@fluentui/react-northstar`)

fabricteam commented Feb 28, 2023 •

edited

Loading

fabricteam commented Feb 28, 2023 •

edited

Loading

fabricteam commented Feb 28, 2023 •

edited

Loading

Perf Analysis (`@fluentui/react`)

fabricteam commented Feb 28, 2023 •

edited

Loading

fabricteam commented Feb 28, 2023 •

edited

Loading