chore(web-components): Switch Storybook framework from html-webpack5 to html-vite #33298

radium-v · 2024-11-19T17:24:32Z

Previous Behavior

The web-components project uses the html-webpack5 framework for Storybook. This requires a lot of extra configuration overrides to behave how we want it.

New Behavior

The web-components project uses the html-vite framework. This is much faster to build and run, since it enables the use of esbuild for TypeScript transpilation. It also provides a smoother upgrade path once the repo updates to Storybook 8.

fabricteam · 2024-11-19T17:34:13Z

🕵 fluentui-web-components-v3 No visual regressions between this PR and main

change/@fluentui-web-components-2dd018e1-9fde-44ea-b302-5473eb582511.json

github-actions · 2024-11-19T17:36:14Z

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
`react` ExtendedPicker	`96.873 kB` `27.893 kB`	`96.873 kB` `27.892 kB`	`-1 B`
`react` FloatingPicker	`242.366 kB` `69.001 kB`	`242.366 kB` `69.002 kB`	`1 B`
`react` Pickers	`298.98 kB` `83.625 kB`	`298.98 kB` `83.626 kB`	`1 B`
`react` Fluent UI React (entire library)	`1.018 MB` `282.923 kB`	`1.018 MB` `282.925 kB`	`2 B`
`react` SelectedItemsList	`232.878 kB` `67.891 kB`	`232.878 kB` `67.893 kB`	`2 B`

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`global-context` createContext	`510 B` `328 B`
`global-context` createContextSelector	`537 B` `339 B`
`keyboard-key` keyboard-key package	`3.746 kB` `1.928 kB`
`keyboard-keys` Multiple keyCodes	`50 B` `70 B`
`keyboard-keys` Multiple keys	`87 B` `94 B`
`keyboard-keys` Single key	`44 B` `64 B`
`keyboard-keys` Single keyCode	`39 B` `59 B`
`priority-overflow` createOverflowManager	`4.457 kB` `1.856 kB`
`react` ActivityItem	`71.236 kB` `23.357 kB`
`react` Announced	`38.489 kB` `13.296 kB`
`react` Autofill	`15.42 kB` `4.766 kB`
`react` Breadcrumb	`202.318 kB` `60.388 kB`
`react` Button	`195.791 kB` `56.627 kB`
`react` ButtonGrid	`180.722 kB` `54.627 kB`
`react` Calendar	`121.875 kB` `37.024 kB`
`react` Callout	`84.323 kB` `27.64 kB`
`react` Check	`53.204 kB` `17.848 kB`
`react` Checkbox	`59.985 kB` `19.903 kB`
`react` ChoiceGroup	`65.494 kB` `21.489 kB`
`react` ChoiceGroupOption	`58.767 kB` `19.362 kB`
`react` Coachmark	`93.144 kB` `29.42 kB`
`react` Color	`7.789 kB` `3.127 kB`
`react` ColorPicker	`135.292 kB` `42.21 kB`
`react` ComboBox	`252.24 kB` `72.304 kB`
`react` CommandBar	`203.359 kB` `60.141 kB`
`react` ContextualMenu	`155.243 kB` `48.202 kB`
`react` DatePicker	`184.295 kB` `56.15 kB`
`react` DateTimeUtilities	`5.244 kB` `1.849 kB`
`react` DetailsList	`229.909 kB` `65.781 kB`
`react` Dialog	`211.717 kB` `63.165 kB`
`react` Divider	`19.603 kB` `6.845 kB`
`react` DocumentCard	`217.336 kB` `64.44 kB`
`react` DragDrop	`8.343 kB` `2.724 kB`
`react` DraggableZone	`34.303 kB` `11.511 kB`
`react` Dropdown	`234.695 kB` `68.743 kB`
`react` Fabric	`41.745 kB` `14.366 kB`
`react` Facepile	`210.893 kB` `63.167 kB`
`react` FocusTrapZone	`17.023 kB` `5.911 kB`
`react` FocusZone	`55.159 kB` `17.492 kB`
`react` Grid	`180.722 kB` `54.627 kB`
`react` GroupedList	`135.07 kB` `40.7 kB`
`react` GroupedListV2	`122.687 kB` `37.788 kB`
`react` HoverCard	`97.16 kB` `30.787 kB`
`react` Icon	`51.885 kB` `17.272 kB`
`react` Icons	`66.361 kB` `24.397 kB`
`react` Image	`46.904 kB` `15.707 kB`
`react` Keytip	`81.693 kB` `26.766 kB`
`react` KeytipData	`14.032 kB` `4.582 kB`
`react` KeytipLayer	`103.474 kB` `32.015 kB`
`react` Keytips	`106.238 kB` `33.013 kB`
`react` Label	`38.347 kB` `13.257 kB`
`react` Layer	`48.099 kB` `16.367 kB`
`react` Link	`39.682 kB` `13.67 kB`
`react` List	`39.371 kB` `12.463 kB`
`react` MarqueeSelection	`74.517 kB` `22.433 kB`
`react` MessageBar	`190.869 kB` `57.103 kB`
`react` Modal	`93.738 kB` `30.271 kB`
`react` Nav	`188.306 kB` `56.485 kB`
`react` OverflowSet	`33.385 kB` `11.314 kB`
`react` Overlay	`40.902 kB` `14.095 kB`
`react` Panel	`201.808 kB` `60.106 kB`
`react` Persona	`114.948 kB` `36.532 kB`
`react` PersonaCoin	`114.948 kB` `36.532 kB`
`react` PersonaPresence	`58.074 kB` `19.384 kB`
`react` Pivot	`189.226 kB` `57.267 kB`
`react` Popup	`12.294 kB` `4.195 kB`
`react` Positioning	`22.807 kB` `7.701 kB`
`react` PositioningContainer	`73.85 kB` `23.765 kB`
`react` ProgressIndicator	`39.494 kB` `13.55 kB`
`react` Rating	`82.12 kB` `26.127 kB`
`react` ResizeGroup	`13.338 kB` `4.377 kB`
`react` ResponsiveMode	`8.13 kB` `2.966 kB`
`react` ScrollablePane	`55.557 kB` `17.728 kB`
`react` SearchBox	`189.118 kB` `56.68 kB`
`react` SelectableOption	`724 B` `413 B`
`react` Selection	`42.444 kB` `12.278 kB`
`react` Separator	`35.384 kB` `12.146 kB`
`react` Shimmer	`49.259 kB` `16.268 kB`
`react` ShimmeredDetailsList	`240.691 kB` `68.532 kB`
`react` Slider	`57.651 kB` `19.217 kB`
`react` SpinButton	`192.821 kB` `57.775 kB`
`react` Spinner	`41.775 kB` `14.48 kB`
`react` Stack	`42.074 kB` `14.405 kB`
`react` Sticky	`32.599 kB` `10.504 kB`
`react` Styling	`46.033 kB` `15.135 kB`
`react` SwatchColorPicker	`191.136 kB` `58.151 kB`
`react` TeachingBubble	`206.139 kB` `61.063 kB`
`react` Text	`36.908 kB` `12.822 kB`
`react` TextField	`80.79 kB` `25.315 kB`
`react` Theme	`43.493 kB` `14.173 kB`
`react` ThemeGenerator	`12.392 kB` `4.126 kB`
`react` TimePicker	`242.051 kB` `70.061 kB`
`react` Toggle	`46.225 kB` `15.986 kB`
`react` Tooltip	`87.437 kB` `28.26 kB`
`react` Utilities	`82.931 kB` `25.148 kB`
`react` Viewport	`23.888 kB` `7.656 kB`
`react` WeeklyDayPicker	`102.017 kB` `31.834 kB`
`react` WindowProvider	`1.059 kB` `541 B`
`react-accordion` Accordion (including children components)	`107.08 kB` `32.786 kB`
`react-aria` ARIA - Default	`237 B` `181 B`
`react-avatar` Avatar	`49.303 kB` `15.815 kB`
`react-avatar` AvatarGroup	`20.106 kB` `7.968 kB`
`react-avatar` AvatarGroupItem	`63.447 kB` `20.034 kB`
`react-badge` Badge	`25.954 kB` `8.595 kB`
`react-badge` CounterBadge	`26.733 kB` `8.872 kB`
`react-badge` PresenceBadge	`25.719 kB` `9.457 kB`
`react-breadcrumb` @fluentui/react-breadcrumb - package	`114.291 kB` `31.695 kB`
`react-button` Button	`37.174 kB` `10.803 kB`
`react-button` CompoundButton	`43.588 kB` `12.101 kB`
`react-button` MenuButton	`41.989 kB` `12.144 kB`
`react-button` SplitButton	`50.006 kB` `13.716 kB`
`react-button` ToggleButton	`53.107 kB` `12.561 kB`
`react-calendar-compat` Calendar Compat	`150.095 kB` `40.026 kB`
`react-card` Card - All	`101.77 kB` `28.772 kB`
`react-card` Card	`94.544 kB` `26.951 kB`
`react-card` CardFooter	`14.355 kB` `5.79 kB`
`react-card` CardHeader	`16.888 kB` `6.669 kB`
`react-card` CardPreview	`14.42 kB` `5.922 kB`
`react-checkbox` Checkbox	`35.118 kB` `12.077 kB`
`react-color-picker-preview` ColorArea	`50.263 kB` `17.553 kB`
`react-color-picker-preview` ColorPicker	`32.22 kB` `11.925 kB`
`react-color-picker-preview` ColorSlider	`41.577 kB` `15.42 kB`
`react-combobox` Combobox (including child components)	`105.536 kB` `34.512 kB`
`react-combobox` Dropdown (including child components)	`106.16 kB` `34.454 kB`
`react-components` react-components: Button, FluentProvider & webLightTheme	`69.21 kB` `20.174 kB`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`222.703 kB` `64.42 kB`
`react-components` react-components: FluentProvider & webLightTheme	`44.447 kB` `14.59 kB`
`react-components` react-components: entire library	`1.164 MB` `291.232 kB`
`react-datepicker-compat` DatePicker Compat	`225.318 kB` `63.786 kB`
`react-dialog` Dialog (including children components)	`100.417 kB` `30.097 kB`
`react-divider` Divider	`21.328 kB` `7.953 kB`
`react-field` Field	`23.399 kB` `8.898 kB`
`react-image` Image	`15.36 kB` `6.236 kB`
`react-input` Input	`28.014 kB` `9.444 kB`
`react-jsx-runtime` Classic Pragma	`1.057 kB` `530 B`
`react-jsx-runtime` JSX Dev Runtime	`3.771 kB` `1.643 kB`
`react-jsx-runtime` JSX Runtime	`4.367 kB` `1.874 kB`
`react-label` Label	`14.671 kB` `5.99 kB`
`react-link` Link	`17.326 kB` `7.032 kB`
`react-list` List	`89.164 kB` `26.599 kB`
`react-list` ListItem	`112.731 kB` `33.432 kB`
`react-menu` Menu (including children components)	`154.048 kB` `46.506 kB`
`react-menu` Menu (including selectable components)	`156.729 kB` `46.992 kB`
`react-message-bar` MessageBar (all components)	`24.825 kB` `9.267 kB`
`react-motion` @fluentui/react-motion - createMotionComponent()	`4.434 kB` `1.935 kB`
`react-motion` @fluentui/react-motion - createPresenceComponent()	`5.165 kB` `2.263 kB`
`react-motion` @fluentui/react-motion - PresenceGroup	`1.714 kB` `819 B`
`react-northstar` Accordion	`85.38 kB` `26.519 kB`
`react-northstar` Alert	`87.435 kB` `26.905 kB`
`react-northstar` Animation	`55.331 kB` `17.83 kB`
`react-northstar` Attachment	`86.829 kB` `26.7 kB`
`react-northstar` Avatar	`80.264 kB` `24.633 kB`
`react-northstar` Box	`75.233 kB` `23.813 kB`
`react-northstar` Breadcrumb	`79.908 kB` `24.717 kB`
`react-northstar` Button	`83.145 kB` `25.952 kB`
`react-northstar` Card	`82.693 kB` `25.037 kB`
`react-northstar` Carousel	`105.17 kB` `31.873 kB`
`react-northstar` Chat	`154.072 kB` `46.878 kB`
`react-northstar` Checkbox	`79.792 kB` `25.08 kB`
`react-northstar` Datepicker	`186.639 kB` `56.99 kB`
`react-northstar` Debug	`8.801 kB` `3.594 kB`
`react-northstar` Design	`36.589 kB` `12.067 kB`
`react-northstar` Dialog	`112.046 kB` `33.622 kB`
`react-northstar` Divider	`76.604 kB` `24.135 kB`
`react-northstar` Dropdown	`198.196 kB` `60.223 kB`
`react-northstar` Embed	`81.465 kB` `25.425 kB`
`react-northstar` Flex	`47.716 kB` `15.443 kB`
`react-northstar` Form	`92.515 kB` `28.888 kB`
`react-northstar` Grid	`70.569 kB` `22.283 kB`
`react-northstar` Header	`74.741 kB` `23.465 kB`
`react-northstar` Image	`73.576 kB` `23.333 kB`
`react-northstar` Input	`88.334 kB` `27.781 kB`
`react-northstar` ItemLayout	`78.213 kB` `24.457 kB`
`react-northstar` Label	`77.905 kB` `24.414 kB`
`react-northstar` Layout	`75.378 kB` `23.803 kB`
`react-northstar` List	`88.475 kB` `27.555 kB`
`react-northstar` Loader	`78.601 kB` `24.733 kB`
`react-northstar` Menu	`128.587 kB` `40.738 kB`
`react-northstar` MenuButton	`162.993 kB` `49.614 kB`
`react-northstar` Pill	`83.707 kB` `26.069 kB`
`react-northstar` Popup	`135.304 kB` `42.259 kB`
`react-northstar` Portal	`58.326 kB` `18.851 kB`
`react-northstar` Provider	`93.129 kB` `29.627 kB`
`react-northstar` RadioGroup	`83.27 kB` `26.053 kB`
`react-northstar` Reaction	`77.265 kB` `24.128 kB`
`react-northstar` Segment	`76.194 kB` `23.896 kB`
`react-northstar` Skeleton	`77.75 kB` `24.205 kB`
`react-northstar` Slider	`84.258 kB` `26.757 kB`
`react-northstar` SplitButton	`178.231 kB` `53.438 kB`
`react-northstar` Status	`76.257 kB` `24.054 kB`
`react-northstar` SvgIcon	`36.811 kB` `11.746 kB`
`react-northstar` Table	`80.784 kB` `25.157 kB`
`react-northstar` Text	`74.099 kB` `23.511 kB`
`react-northstar` TextArea	`74.233 kB` `23.496 kB`
`react-northstar` Toolbar	`175.042 kB` `52.844 kB`
`react-northstar` Tooltip	`109.961 kB` `35.238 kB`
`react-northstar` Tree	`87.84 kB` `27.223 kB`
`react-northstar` Video	`75.399 kB` `23.796 kB`
`react-overflow` hooks only	`12.808 kB` `4.819 kB`
`react-persona` Persona	`56.194 kB` `17.695 kB`
`react-popover` Popover	`130.294 kB` `40.69 kB`
`react-portal` Portal	`14.563 kB` `5.118 kB`
`react-portal-compat` PortalCompatProvider	`8.39 kB` `2.64 kB`
`react-positioning` usePositioning	`28.144 kB` `10.046 kB`
`react-progress` ProgressBar	`17.084 kB` `6.891 kB`
`react-provider` FluentProvider	`24.623 kB` `8.893 kB`
`react-radio` Radio	`32.672 kB` `10.343 kB`
`react-radio` RadioGroup	`15.762 kB` `6.423 kB`
`react-select` Select	`27.732 kB` `10.124 kB`
`react-slider` Slider	`37.52 kB` `12.621 kB`
`react-spinbutton` SpinButton	`34.839 kB` `11.63 kB`
`react-spinner` Spinner	`25.245 kB` `8.539 kB`
`react-swatch-picker` @fluentui/react-swatch-picker - package	`105.086 kB` `30.516 kB`
`react-switch` Switch	`35.319 kB` `11.314 kB`
`react-table` DataGrid	`161.034 kB` `45.71 kB`
`react-table` Table (Primitives only)	`42.666 kB` `13.854 kB`
`react-table` Table as DataGrid	`131.869 kB` `36.57 kB`
`react-table` Table (Selection only)	`70.536 kB` `19.999 kB`
`react-table` Table (Sort only)	`69.179 kB` `19.61 kB`
`react-tag-picker` @fluentui/react-tag-picker - package	`185.227 kB` `55.684 kB`
`react-tags` InteractionTag	`15.199 kB` `6.157 kB`
`react-tags` Tag	`29.072 kB` `9.55 kB`
`react-tags` TagGroup	`82.719 kB` `24.524 kB`
`react-teaching-popover` TeachingPopover	`91.711 kB` `27.921 kB`
`react-text` Text - Default	`17.061 kB` `6.723 kB`
`react-text` Text - Wrappers	`20.242 kB` `7.048 kB`
`react-textarea` Textarea	`26.572 kB` `9.755 kB`
`react-theme` Single theme token import	`69 B` `89 B`
`react-theme` Teams: all themes	`35.835 kB` `7.512 kB`
`react-theme` Teams: Light theme	`19.794 kB` `5.602 kB`
`react-timepicker-compat` TimePicker	`108.525 kB` `36.087 kB`
`react-toast` Toast (including Toaster)	`101.371 kB` `30.477 kB`
`react-tooltip` Tooltip	`57.131 kB` `19.949 kB`
`react-tree` FlatTree	`145.462 kB` `41.771 kB`
`react-tree` PersonaFlatTree	`146.15 kB` `41.881 kB`
`react-tree` PersonaTree	`142.381 kB` `40.703 kB`
`react-tree` Tree	`141.693 kB` `40.602 kB`
`react-utilities` SSRProvider	`180 B` `160 B`

_{🤖 This report was generated against 6473e08086509d7dab294243777a2066c75b62aa}

fabricteam · 2024-11-19T17:38:13Z

🕵 FluentUIV0 No visual regressions between this PR and main

github-actions · 2024-11-19T17:40:51Z

Pull request demo site: URL

change/@fluentui-web-components-2dd018e1-9fde-44ea-b302-5473eb582511.json

radium-v · 2025-01-15T17:35:24Z

This is blocked by #33660 unless @fluentui/chart-web-components is also migrated to html-vite.

fabricteam reviewed Nov 19, 2024

View reviewed changes

change/@fluentui-web-components-2dd018e1-9fde-44ea-b302-5473eb582511.json Show resolved Hide resolved

radium-v force-pushed the users/radium-v/storybook-vite branch from 27ddad7 to 3fc8bfe Compare November 19, 2024 17:40

fabricteam reviewed Nov 19, 2024

View reviewed changes

change/@fluentui-web-components-2dd018e1-9fde-44ea-b302-5473eb582511.json Show resolved Hide resolved

radium-v force-pushed the users/radium-v/storybook-vite branch from ce60694 to 391f38b Compare December 2, 2024 19:02

davatron5000 added the web-components label Dec 4, 2024

radium-v force-pushed the users/radium-v/storybook-vite branch 2 times, most recently from eddc9cb to 48bdd9e Compare December 20, 2024 20:47

radium-v marked this pull request as ready for review December 20, 2024 21:54

radium-v requested review from a team as code owners December 20, 2024 21:54

eljefe223 previously approved these changes Dec 20, 2024

View reviewed changes

chrisdholt previously approved these changes Dec 20, 2024

View reviewed changes

marchbox previously approved these changes Dec 20, 2024

View reviewed changes

Hotell self-requested a review December 31, 2024 13:02

Hotell previously approved these changes Jan 2, 2025

View reviewed changes

radium-v force-pushed the users/radium-v/storybook-vite branch 2 times, most recently from 01b328d to 55a2c99 Compare January 8, 2025 20:35

radium-v enabled auto-merge (squash) January 8, 2025 20:45

radium-v force-pushed the users/radium-v/storybook-vite branch from 55a2c99 to e88b316 Compare January 9, 2025 05:05

radium-v disabled auto-merge January 9, 2025 05:18

radium-v added 5 commits January 9, 2025 08:21

switch from html-webpack5 to html-vite

b0d1468

update storybook config files

3313868

fix define imports in preview module

9ad4d86

add changefile

0ddda59

update lockfile

08af0b1

radium-v force-pushed the users/radium-v/storybook-vite branch from d115db3 to 08af0b1 Compare January 9, 2025 16:32

radium-v dismissed stale reviews from marchbox, Hotell, chrisdholt, and eljefe223 via 08af0b1 April 1, 2025 04:28

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

chore(web-components): Switch Storybook framework from html-webpack5 to html-vite #33298

chore(web-components): Switch Storybook framework from html-webpack5 to html-vite #33298

Uh oh!

radium-v commented Nov 19, 2024

Uh oh!

fabricteam commented Nov 19, 2024 •

edited

Loading

Uh oh!

Uh oh!

github-actions bot commented Nov 19, 2024 •

edited

Loading

Uh oh!

fabricteam commented Nov 19, 2024 •

edited

Loading

Uh oh!

github-actions bot commented Nov 19, 2024

Uh oh!

Uh oh!

radium-v commented Jan 15, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

chore(web-components): Switch Storybook framework from html-webpack5 to html-vite #33298

Are you sure you want to change the base?

chore(web-components): Switch Storybook framework from html-webpack5 to html-vite #33298

Uh oh!

Conversation

radium-v commented Nov 19, 2024

Previous Behavior

New Behavior

Uh oh!

fabricteam commented Nov 19, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🕵 fluentui-web-components-v3 No visual regressions between this PR and main

Uh oh!

Uh oh!

github-actions bot commented Nov 19, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Bundle size report

Uh oh!

fabricteam commented Nov 19, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🕵 FluentUIV0 No visual regressions between this PR and main

Uh oh!

github-actions bot commented Nov 19, 2024

Uh oh!

Uh oh!

radium-v commented Jan 15, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

fabricteam commented Nov 19, 2024 •

edited

Loading

github-actions bot commented Nov 19, 2024 •

edited

Loading

fabricteam commented Nov 19, 2024 •

edited

Loading