chore: enable build-less DX for cross library storybooks and VR tests and improve build speeds #26559

Hotell · 2023-01-31T11:47:02Z

Previous Behavior

not all VR apps support build-less DX for their storybooks
migration packages storybook doesn't work without build needed for v0 and v8

New Behavior

all VR apps and package storybooks use same configuration and no build needed DX even in cross library environments
build times are significantly improved as well (especially in cross library envs)
fix: mangling is turned off for all v9 storybooks production builds (this was a reggresion introduced with swc minifier)

NOTE: mangle is turned off for storybook production build by default (via terser plugin

). Swc minifier was mangling by default which was introducing property mangling that will cause VR test act on stories without explicit storyName randomly. Thus mangling is explicitly turned off within our configs as well.

Related Issue(s)

Follows chore(public-docsite-v9): enable build-less DX for storybook #26476

size-auditor · 2023-01-31T11:59:00Z

Asset size changes

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

Baseline commit: c4718a202e11187bb379bb6235482e48ab161e4f (build)

fabricteam · 2023-01-31T12:00:56Z

📊 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.872 kB` `26.008 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.376 kB` `23.862 kB`
`react-card` Card	`78.145 kB` `22.401 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.255 kB` `27.351 kB`
`react-combobox` ComboboxField	`81.672 kB` `27.142 kB`
`react-combobox` Dropdown (including child components)	`83.942 kB` `27.105 kB`
`react-components` react-components: Button, FluentProvider & webLightTheme	`64.09 kB` `17.544 kB`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`201.941 kB` `56.241 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.151 kB` `38.718 kB`
`react-input` Input	`23.89 kB` `7.246 kB`
`react-input` InputField	`33.626 kB` `10.099 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.501 kB` `38.723 kB`
`react-menu` Menu (including selectable components)	`129.57 kB` `39.237 kB`
`react-overflow` hooks only	`11.214 kB` `4.271 kB`
`react-persona` Persona	`58.207 kB` `15.986 kB`
`react-popover` Popover	`114.224 kB` `35.164 kB`
`react-portal` Portal	`11.377 kB` `4.179 kB`
`react-portal-compat` PortalCompatProvider	`6.324 kB` `2.129 kB`
`react-positioning` usePositioning	`22.951 kB` `8.521 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	`44.079 kB` `12.356 kB`
`react-spinbutton` SpinButtonField	`53.015 kB` `14.806 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.529 kB` `39.134 kB`
`react-table` Table (Primitives only)	`43.776 kB` `12.063 kB`
`react-table` Table as DataGrid	`134.29 kB` `34.471 kB`
`react-table` Table (Selection only)	`82.208 kB` `20.536 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.061 kB` `16.131 kB`
`react-utilities` SSRProvider	`180 B` `159 B`

_{🤖 This report was generated against c4718a202e11187bb379bb6235482e48ab161e4f}

codesandbox-ci · 2023-01-31T12:01:43Z

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 57d6542:

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

fabricteam · 2023-01-31T12:01:59Z

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

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	1685	1724	5000
Button	mount	1222	1171	5000
Field	mount	2679	2724	5000
FluentProvider	mount	2120	2103	5000
FluentProviderWithTheme	mount	732	764	10
FluentProviderWithTheme	virtual-rerender	702	688	10
FluentProviderWithTheme	virtual-rerender-with-unmount	758	746	10
InfoButton	mount	692	654	5000
MakeStyles	mount	2365	2401	50000
Persona	mount	4194	4092	5000
SpinButton	mount	3350	3378	5000

fabricteam · 2023-01-31T12:07:47Z

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

⚠️ No perf measurements available

fabricteam · 2023-01-31T12:14:44Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
BaseButton	mount	1544	1549	5000
Breadcrumb	mount	3674	3572	1000
Checkbox	mount	3385	3392	5000
CheckboxBase	mount	3030	3034	5000
ChoiceGroup	mount	5885	5790	5000
ComboBox	mount	1554	1564	1000
CommandBar	mount	11931	11850	1000
ContextualMenu	mount	18464	18240	1000
DefaultButton	mount	1801	1841	5000
DetailsRow	mount	4379	4512	5000
DetailsRowFast	mount	4583	4542	5000
DetailsRowNoStyles	mount	4393	4296	5000
Dialog	mount	3937	3859	1000
DocumentCardTitle	mount	736	700	1000
Dropdown	mount	4191	4146	5000
FocusTrapZone	mount	2582	2488	5000
FocusZone	mount	2405	2451	5000
GroupedList	mount	2381	2727	2
GroupedList	virtual-rerender	1451	1428	2
GroupedList	virtual-rerender-with-unmount	2255	2097	2
GroupedListV2	mount	678	746	2
GroupedListV2	virtual-rerender	656	671	2
GroupedListV2	virtual-rerender-with-unmount	683	669	2
IconButton	mount	2472	2534	5000
Label	mount	882	914	5000
Layer	mount	5448	5488	5000
Link	mount	1047	1080	5000
MenuButton	mount	2167	2177	5000
MessageBar	mount	2905	2924	5000
Nav	mount	4223	4264	1000
OverflowSet	mount	1660	1726	5000
Panel	mount	3137	3167	1000
Persona	mount	1687	1696	1000
Pivot	mount	2048	2099	1000
PrimaryButton	mount	2000	2003	5000
Rating	mount	9219	9411	5000
SearchBox	mount	1991	1979	5000
Shimmer	mount	3659	3805	5000
Slider	mount	2617	2658	5000
SpinButton	mount	5842	5975	5000
Spinner	mount	1005	980	5000
SplitButton	mount	3989	4003	5000
Stack	mount	1067	1054	5000
StackWithIntrinsicChildren	mount	3155	3295	5000
StackWithTextChildren	mount	6408	6584	5000
SwatchColorPicker	mount	13447	13245	5000
TagPicker	mount	3417	3398	5000
TeachingBubble	mount	106761	106950	5000
Text	mount	984	983	5000
TextField	mount	2059	2066	5000
ThemeProvider	mount	1875	1864	5000
ThemeProvider	virtual-rerender	1313	1346	5000
ThemeProvider	virtual-rerender-with-unmount	2668	2697	5000
Toggle	mount	1431	1402	5000
buttonNative	mount	657	657	5000

apps/public-docsite-v9/package.json

fabricteam · 2023-02-06T17:38:29Z

🕵 fluentuiv9 No visual regressions between this PR and main

apps/vr-tests-react-components/.storybook/main.js

apps/vr-tests/.storybook/main.js

apps/stress-test/package.json

apps/vr-tests-react-components/package.json

packages/react-components/react-migration-v0-v9/package.json

packages/react-components/react-migration-v8-v9/.storybook/main.js

packages/react-components/react-migration-v0-v9/.storybook/main.js

packages/fluentui/docs/.storybook/main.js

apps/vr-tests-react-components/.storybook/main.js

fabricteam · 2023-02-15T18:13:54Z

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

…t of VR apps

…mprove build speed

fabricteam · 2023-02-17T13:52:48Z

🕵 fluentuiv8 No visual regressions between this PR and main

msft-fluent-ui-bot assigned layershifter Jan 31, 2023

Hotell changed the title ~~Hotell/build/ts/path aliases for all 2~~ chore: enable build-less DX for cross library storybooks and VR tests Jan 31, 2023

Hotell unassigned layershifter Jan 31, 2023

Hotell force-pushed the hotell/build/ts/path-aliases-for-all-2 branch from e8a7802 to 59443cc Compare February 1, 2023 15:48

Hotell changed the title ~~chore: enable build-less DX for cross library storybooks and VR tests~~ chore: enable build-less DX for cross library storybooks and VR tests and improve build speeds Feb 1, 2023

Hotell added Area: DevExp Storybook labels Feb 1, 2023

Hotell force-pushed the hotell/build/ts/path-aliases-for-all-2 branch from dd8e6e6 to e59de2a Compare February 2, 2023 08:32

Hotell mentioned this pull request Feb 2, 2023

chore: enable TS intellisense in cross library projects for better/consistent DX #26605

Merged

Hotell force-pushed the hotell/build/ts/path-aliases-for-all-2 branch 4 times, most recently from 6a8e0cf to 5ba941a Compare February 6, 2023 17:07

Hotell commented Feb 6, 2023

View reviewed changes

apps/public-docsite-v9/package.json Show resolved Hide resolved

Hotell commented Feb 6, 2023

View reviewed changes

apps/public-docsite-v9/package.json Show resolved Hide resolved

Hotell force-pushed the hotell/build/ts/path-aliases-for-all-2 branch from 5ba941a to 6e5d0d6 Compare February 7, 2023 11:53

Hotell marked this pull request as ready for review February 7, 2023 12:53

Hotell requested review from a team, GeoffCoxMSFT, micahgodbolt and spmonahan as code owners February 7, 2023 12:53

Hotell requested review from a team as code owners February 7, 2023 12:53

tudorpopams self-requested a review February 7, 2023 13:15

ling1726 reviewed Feb 7, 2023

View reviewed changes

apps/vr-tests-react-components/.storybook/main.js Show resolved Hide resolved

ling1726 reviewed Feb 7, 2023

View reviewed changes

apps/vr-tests/.storybook/main.js Show resolved Hide resolved

ling1726 approved these changes Feb 7, 2023

View reviewed changes

tudorpopams approved these changes Feb 8, 2023

View reviewed changes

Hotell force-pushed the hotell/build/ts/path-aliases-for-all-2 branch from 115317a to ea91fe4 Compare February 9, 2023 08:10

micahgodbolt approved these changes Feb 9, 2023

View reviewed changes

khmakoto approved these changes Feb 9, 2023

View reviewed changes

spmonahan approved these changes Feb 9, 2023

View reviewed changes

Hotell force-pushed the hotell/build/ts/path-aliases-for-all-2 branch 2 times, most recently from 37e15b8 to 1f75aef Compare February 15, 2023 17:40

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

Hotell added 9 commits February 17, 2023 14:24

chore(fluentui/docs): enable build-less setup for VR tests

38577e6

chore(apps/vr-tests-react-components): unify storybook setup with res…

f780c36

…t of VR apps

chore(apps/stress-test): enable build-less setup (except web-components)

3c47e89

chore(react-migration-v8-v9): enable build-less DX for storybook

8015f0c

chore(react-migration-v0-v9): enable build-less DX for storybook

a58aa8c

perf(apps/vr-tests): unify storybook setup with rest of VR apps and i…

909211e

…mprove build speed

generate change files

5e6985d

chore: fix missing path aliases in v0,v8 tsconfigs

4896097

chore(public-docsite-v9): normalize dependencies in package.json

57d6542

Hotell force-pushed the hotell/build/ts/path-aliases-for-all-2 branch from 1f75aef to 57d6542 Compare February 17, 2023 13:30

Hotell merged commit 9075162 into microsoft:master Feb 17, 2023

Hotell deleted the hotell/build/ts/path-aliases-for-all-2 branch February 17, 2023 14:28

Hotell mentioned this pull request Feb 17, 2023

perf: use path aliases and swc for test:perf tasks to improve build speeds #26893

Merged

chore: enable build-less DX for cross library storybooks and VR tests and improve build speeds #26559

chore: enable build-less DX for cross library storybooks and VR tests and improve build speeds #26559

Uh oh!

Conversation

Hotell commented Jan 31, 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 Jan 31, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Asset size changes

Uh oh!

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

Uh oh!

📊 Bundle size report

Uh oh!

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

Uh oh!

Uh oh!

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

Uh oh!

Perf Analysis (@fluentui/react-components)

Uh oh!

fabricteam commented Jan 31, 2023

Perf Analysis (@fluentui/react-northstar)

Uh oh!

fabricteam commented Jan 31, 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 6, 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!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

fabricteam commented Feb 15, 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!

fabricteam commented Feb 17, 2023

🕵 fluentuiv8 No visual regressions between this PR and main

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

9 participants

Hotell commented Jan 31, 2023 •

edited

Loading

size-auditor bot commented Jan 31, 2023 •

edited

Loading

fabricteam commented Jan 31, 2023 •

edited

Loading

codesandbox-ci bot commented Jan 31, 2023 •

edited

Loading

fabricteam commented Jan 31, 2023 •

edited

Loading

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

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

fabricteam commented Jan 31, 2023 •

edited

Loading

Perf Analysis (`@fluentui/react`)

fabricteam commented Feb 6, 2023 •

edited

Loading

fabricteam commented Feb 15, 2023 •

edited

Loading