Shadow DOM: prune bundle size impact by spmonahan · Pull Request #30709 · microsoft/fluentui

spmonahan · 2024-03-04T18:21:58Z

Previous Behavior

The Shadow DOM feature in Fluent v8 introduces a large bundle size hit for users who are not using the shadow DOM feature.

New Behavior

There is still a bundle size hit but it has be reduced a fair bit. There is more work to do here I think but this is a good start and ready to be merged into shadow-dom.

This refactor focuses on two things:

Minimizing the bundle size increase due to @fluentui/merge-styles. This is accomplished by refactoring Stylesheet to have less code and moving optional functions out of Stylesheet so they become pay-to-play.
Refactoring the Shadow DOM React contexts to become dependency injection containers. In this refactored implementation the various shadow DOM features become no-ops (and therefore much smaller in terms of bundle size) but we can still easily inject the actual shadow DOM behavior for users who opt in.

spmonahan · 2024-03-04T18:27:56Z

/azp run Fluent UI React - Bundle-Size

azure-pipelines · 2024-03-04T18:28:03Z

Azure Pipelines could not run because the pipeline triggers exclude this branch/path.

codesandbox-ci · 2024-03-07T23:26:12Z

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.

fabricteam · 2024-03-07T23:33:46Z

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
`react` ActivityItem	`77 kB` `24.934 kB`	`71.031 kB` `23.292 kB`	`-5.969 kB` `-1.642 kB`
`react` Announced	`44.214 kB` `14.779 kB`	`38.303 kB` `13.25 kB`	`-5.911 kB` `-1.529 kB`
`react` Breadcrumb	`206.043 kB` `61.464 kB`	`200.486 kB` `60.022 kB`	`-5.557 kB` `-1.442 kB`
`react` Button	`200.057 kB` `57.676 kB`	`194.485 kB` `56.266 kB`	`-5.572 kB` `-1.41 kB`
`react` ButtonGrid	`185.82 kB` `55.916 kB`	`180.264 kB` `54.479 kB`	`-5.556 kB` `-1.437 kB`
`react` Calendar	`127.472 kB` `38.501 kB`	`121.555 kB` `36.96 kB`	`-5.917 kB` `-1.541 kB`
`react` Callout	`89.783 kB` `29.022 kB`	`84.041 kB` `27.541 kB`	`-5.742 kB` `-1.481 kB`
`react` Check	`58.895 kB` `19.307 kB`	`52.982 kB` `17.787 kB`	`-5.913 kB` `-1.52 kB`
`react` Checkbox	`65.671 kB` `21.357 kB`	`59.768 kB` `19.815 kB`	`-5.903 kB` `-1.542 kB`
`react` ChoiceGroup	`71.139 kB` `23.023 kB`	`65.29 kB` `21.438 kB`	`-5.849 kB` `-1.585 kB`
`react` ChoiceGroupOption	`64.46 kB` `20.884 kB`	`58.557 kB` `19.318 kB`	`-5.903 kB` `-1.566 kB`
`react` Coachmark	`98.6 kB` `30.804 kB`	`92.856 kB` `29.339 kB`	`-5.744 kB` `-1.465 kB`
`react` ColorPicker	`138.638 kB` `43 kB`	`132.856 kB` `41.466 kB`	`-5.782 kB` `-1.534 kB`
`react` ComboBox	`255.601 kB` `73.316 kB`	`250.068 kB` `71.788 kB`	`-5.533 kB` `-1.528 kB`
`react` CommandBar	`207.284 kB` `61.224 kB`	`201.712 kB` `59.786 kB`	`-5.572 kB` `-1.438 kB`
`react` ContextualMenu	`160.486 kB` `49.562 kB`	`154.714 kB` `48.048 kB`	`-5.772 kB` `-1.514 kB`
`react` DatePicker	`189.591 kB` `57.587 kB`	`183.858 kB` `56.052 kB`	`-5.733 kB` `-1.535 kB`
`react` DetailsList	`234.963 kB` `67.114 kB`	`229.149 kB` `65.588 kB`	`-5.814 kB` `-1.526 kB`
`react` Dialog	`215.44 kB` `64.161 kB`	`209.858 kB` `62.775 kB`	`-5.582 kB` `-1.386 kB`
`react` Divider	`25.314 kB` `8.366 kB`	`19.411 kB` `6.804 kB`	`-5.903 kB` `-1.562 kB`
`react` DocumentCard	`221.117 kB` `65.493 kB`	`215.543 kB` `64.069 kB`	`-5.574 kB` `-1.424 kB`
`react` DraggableZone	`38.654 kB` `12.542 kB`	`34.109 kB` `11.448 kB`	`-4.545 kB` `-1.094 kB`
`react` Dropdown	`238.006 kB` `69.681 kB`	`232.426 kB` `68.237 kB`	`-5.58 kB` `-1.444 kB`
`react` ExtendedPicker	`101.12 kB` `28.941 kB`	`96.565 kB` `27.809 kB`	`-4.555 kB` `-1.132 kB`
`react` Fabric	`47.465 kB` `15.81 kB`	`41.554 kB` `14.29 kB`	`-5.911 kB` `-1.52 kB`
`react` Facepile	`215.914 kB` `64.366 kB`	`210.344 kB` `62.995 kB`	`-5.57 kB` `-1.371 kB`
`react` FloatingPicker	`246.139 kB` `70.049 kB`	`240.578 kB` `68.626 kB`	`-5.561 kB` `-1.423 kB`
`react` FocusTrapZone	`21.616 kB` `7.045 kB`	`16.975 kB` `5.917 kB`	`-4.641 kB` `-1.128 kB`
`react` FocusZone	`59.39 kB` `18.483 kB`	`54.844 kB` `17.402 kB`	`-4.546 kB` `-1.081 kB`
`react` Grid	`185.82 kB` `55.916 kB`	`180.264 kB` `54.479 kB`	`-5.556 kB` `-1.437 kB`
`react` GroupedList	`140.356 kB` `41.978 kB`	`134.544 kB` `40.548 kB`	`-5.812 kB` `-1.43 kB`
`react` GroupedListV2	`128.044 kB` `39.133 kB`	`122.232 kB` `37.703 kB`	`-5.812 kB` `-1.43 kB`
`react` HoverCard	`102.629 kB` `32.207 kB`	`96.888 kB` `30.711 kB`	`-5.741 kB` `-1.496 kB`
`react` Icon	`57.573 kB` `18.755 kB`	`51.67 kB` `17.198 kB`	`-5.903 kB` `-1.557 kB`
`react` Icons	`70.867 kB` `25.469 kB`	`66.305 kB` `24.379 kB`	`-4.562 kB` `-1.09 kB`
`react` Image	`52.627 kB` `17.203 kB`	`46.719 kB` `15.646 kB`	`-5.908 kB` `-1.557 kB`
`react` Keytip	`87.2 kB` `28.19 kB`	`81.414 kB` `26.677 kB`	`-5.786 kB` `-1.513 kB`
`react` KeytipData	`18.579 kB` `5.7 kB`	`13.969 kB` `4.57 kB`	`-4.61 kB` `-1.13 kB`
`react` KeytipLayer	`108.988 kB` `33.466 kB`	`103.197 kB` `31.929 kB`	`-5.791 kB` `-1.537 kB`
`react` Keytips	`111.75 kB` `34.446 kB`	`105.958 kB` `32.936 kB`	`-5.792 kB` `-1.51 kB`
`react` Label	`44.049 kB` `14.779 kB`	`38.146 kB` `13.215 kB`	`-5.903 kB` `-1.564 kB`
`react` Layer	`53.709 kB` `17.792 kB`	`47.806 kB` `16.262 kB`	`-5.903 kB` `-1.53 kB`
`react` Link	`45.413 kB` `15.101 kB`	`39.502 kB` `13.621 kB`	`-5.911 kB` `-1.48 kB`
`react` List	`43.682 kB` `13.451 kB`	`39.138 kB` `12.373 kB`	`-4.544 kB` `-1.078 kB`
`react` MarqueeSelection	`80.176 kB` `23.886 kB`	`74.333 kB` `22.393 kB`	`-5.843 kB` `-1.493 kB`
`react` MessageBar	`194.609 kB` `58.143 kB`	`189.049 kB` `56.753 kB`	`-5.56 kB` `-1.39 kB`
`react` Modal	`99.104 kB` `31.625 kB`	`93.366 kB` `30.151 kB`	`-5.738 kB` `-1.474 kB`
`react` Nav	`193.431 kB` `57.756 kB`	`187.844 kB` `56.355 kB`	`-5.587 kB` `-1.401 kB`
`react` OverflowSet	`39.049 kB` `12.769 kB`	`33.209 kB` `11.253 kB`	`-5.84 kB` `-1.516 kB`
`react` Overlay	`46.622 kB` `15.553 kB`	`40.711 kB` `14.032 kB`	`-5.911 kB` `-1.521 kB`
`react` Panel	`205.172 kB` `61.112 kB`	`199.567 kB` `59.679 kB`	`-5.605 kB` `-1.433 kB`
`react` Persona	`120.271 kB` `37.957 kB`	`114.488 kB` `36.41 kB`	`-5.783 kB` `-1.547 kB`
`react` PersonaCoin	`120.271 kB` `37.957 kB`	`114.488 kB` `36.41 kB`	`-5.783 kB` `-1.547 kB`
`react` PersonaPresence	`63.761 kB` `20.874 kB`	`57.852 kB` `19.307 kB`	`-5.909 kB` `-1.567 kB`
`react` Pickers	`297.608 kB` `83.321 kB`	`292.047 kB` `81.905 kB`	`-5.561 kB` `-1.416 kB`
`react` Pivot	`194.336 kB` `58.458 kB`	`188.759 kB` `57.076 kB`	`-5.577 kB` `-1.382 kB`
`react` Positioning	`27.166 kB` `8.718 kB`	`22.608 kB` `7.63 kB`	`-4.558 kB` `-1.088 kB`
`react` PositioningContainer	`79.346 kB` `25.251 kB`	`73.555 kB` `23.675 kB`	`-5.791 kB` `-1.576 kB`
`react` ProgressIndicator	`45.214 kB` `15.005 kB`	`39.303 kB` `13.489 kB`	`-5.911 kB` `-1.516 kB`
`react` Rating	`87.667 kB` `27.555 kB`	`81.788 kB` `26.059 kB`	`-5.879 kB` `-1.496 kB`
`react` ScrollablePane	`61.178 kB` `19.338 kB`	`55.337 kB` `17.674 kB`	`-5.841 kB` `-1.664 kB`
`react` SearchBox	`192.884 kB` `57.722 kB`	`187.324 kB` `56.347 kB`	`-5.56 kB` `-1.375 kB`
`react` SelectedItemsList	`236.614 kB` `68.983 kB`	`231.033 kB` `67.576 kB`	`-5.581 kB` `-1.407 kB`
`react` Selection	`46.807 kB` `13.295 kB`	`42.252 kB` `12.203 kB`	`-4.555 kB` `-1.092 kB`
`react` Separator	`41.097 kB` `13.648 kB`	`35.195 kB` `12.1 kB`	`-5.902 kB` `-1.548 kB`
`react` Shimmer	`54.978 kB` `17.78 kB`	`49.07 kB` `16.218 kB`	`-5.908 kB` `-1.562 kB`
`react` ShimmeredDetailsList	`245.734 kB` `69.809 kB`	`239.931 kB` `68.365 kB`	`-5.803 kB` `-1.444 kB`
`react` Slider	`63.24 kB` `20.668 kB`	`57.462 kB` `19.155 kB`	`-5.778 kB` `-1.513 kB`
`react` SpinButton	`196.642 kB` `58.881 kB`	`191.05 kB` `57.473 kB`	`-5.592 kB` `-1.408 kB`
`react` Spinner	`47.406 kB` `15.945 kB`	`41.495 kB` `14.421 kB`	`-5.911 kB` `-1.524 kB`
`react` Stack	`46.093 kB` `15.331 kB`	`41.547 kB` `14.233 kB`	`-4.546 kB` `-1.098 kB`
`react` Sticky	`37.086 kB` `11.603 kB`	`32.541 kB` `10.49 kB`	`-4.545 kB` `-1.113 kB`
`react` Styling	`50.41 kB` `16.17 kB`	`45.853 kB` `15.082 kB`	`-4.557 kB` `-1.088 kB`
`react` SwatchColorPicker	`196.147 kB` `59.404 kB`	`190.59 kB` `57.955 kB`	`-5.557 kB` `-1.449 kB`
`react` TeachingBubble	`210.185 kB` `62.123 kB`	`204.6 kB` `60.669 kB`	`-5.585 kB` `-1.454 kB`
`react` Text	`41.267 kB` `13.915 kB`	`36.723 kB` `12.763 kB`	`-4.544 kB` `-1.152 kB`
`react` TextField	`86.485 kB` `26.83 kB`	`80.569 kB` `25.27 kB`	`-5.916 kB` `-1.56 kB`
`react` Theme	`47.882 kB` `15.221 kB`	`43.321 kB` `14.129 kB`	`-4.561 kB` `-1.092 kB`
`react` TimePicker	`245.443 kB` `71.054 kB`	`239.91 kB` `69.553 kB`	`-5.533 kB` `-1.501 kB`
`react` Toggle	`51.936 kB` `17.454 kB`	`46.032 kB` `15.908 kB`	`-5.904 kB` `-1.546 kB`
`react` Tooltip	`92.796 kB` `29.576 kB`	`87.002 kB` `28.125 kB`	`-5.794 kB` `-1.451 kB`
`react` Utilities	`82.232 kB` `24.831 kB`	`82.484 kB` `25.012 kB`	`252 B` `181 B`
`react` Viewport	`28.247 kB` `8.665 kB`	`23.703 kB` `7.589 kB`	`-4.544 kB` `-1.076 kB`
`react` WeeklyDayPicker	`107.567 kB` `33.347 kB`	`101.694 kB` `31.739 kB`	`-5.873 kB` `-1.608 kB`

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`
`priority-overflow` createOverflowManager	`4.447 kB` `1.853 kB`
`react` Autofill	`15.365 kB` `4.743 kB`
`react` Color	`7.737 kB` `3.106 kB`
`react` DateTimeUtilities	`5.244 kB` `1.849 kB`
`react` DragDrop	`8.343 kB` `2.724 kB`
`react` Popup	`12.242 kB` `4.181 kB`
`react` ResizeGroup	`13.286 kB` `4.365 kB`
`react` ResponsiveMode	`8.078 kB` `2.95 kB`
`react` SelectableOption	`724 B` `413 B`
`react` ThemeGenerator	`12.34 kB` `4.106 kB`
`react` WindowProvider	`1.059 kB` `541 B`
`react-accordion` Accordion (including children components)	`100.125 kB` `30.423 kB`
`react-alert` Alert	`83.737 kB` `23.475 kB`
`react-avatar` Avatar	`50.175 kB` `15.944 kB`
`react-avatar` AvatarGroup	`19.702 kB` `7.794 kB`
`react-avatar` AvatarGroupItem	`64.829 kB` `20.272 kB`
`react-badge` Badge	`26.905 kB` `8.73 kB`
`react-badge` CounterBadge	`27.806 kB` `9.025 kB`
`react-badge` PresenceBadge	`25.311 kB` `9.307 kB`
`react-breadcrumb` @fluentui/react-breadcrumb - package	`115.48 kB` `31.843 kB`
`react-button` Button	`39.513 kB` `11.17 kB`
`react-button` CompoundButton	`46.874 kB` `12.662 kB`
`react-button` MenuButton	`44.292 kB` `12.544 kB`
`react-button` SplitButton	`52.306 kB` `14.135 kB`
`react-button` ToggleButton	`56.559 kB` `13.068 kB`
`react-calendar-compat` Calendar Compat	`152.073 kB` `39.83 kB`
`react-card` Card - All	`101.557 kB` `28.932 kB`
`react-card` Card	`96.382 kB` `27.401 kB`
`react-card` CardFooter	`13.064 kB` `5.386 kB`
`react-card` CardHeader	`15.307 kB` `6.144 kB`
`react-card` CardPreview	`14.015 kB` `5.752 kB`
`react-checkbox` Checkbox	`35.656 kB` `12.07 kB`
`react-combobox` Combobox (including child components)	`102.686 kB` `33.174 kB`
`react-combobox` Dropdown (including child components)	`104.06 kB` `33.101 kB`
`react-components` react-components: Button, FluentProvider & webLightTheme	`71.098 kB` `20.515 kB`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`217.205 kB` `61.941 kB`
`react-components` react-components: FluentProvider & webLightTheme	`43.585 kB` `14.352 kB`
`react-datepicker-compat` DatePicker Compat	`224.523 kB` `62.94 kB`
`react-dialog` Dialog (including children components)	`100.928 kB` `29.921 kB`
`react-divider` Divider	`20.922 kB` `7.791 kB`
`react-field` Field	`22.542 kB` `8.609 kB`
`react-image` Image	`15.745 kB` `6.231 kB`
`react-infobutton` InfoButton	`138.694 kB` `43.395 kB`
`react-infobutton` InfoLabel	`142.495 kB` `44.625 kB`
`react-input` Input	`26.891 kB` `9.12 kB`
`react-jsx-runtime` Classic Pragma	`1.057 kB` `530 B`
`react-jsx-runtime` JSX Dev Runtime	`3.781 kB` `1.646 kB`
`react-jsx-runtime` JSX Runtime	`4.377 kB` `1.881 kB`
`react-label` Label	`14.266 kB` `5.829 kB`
`react-link` Link	`17.082 kB` `6.911 kB`
`react-menu` Menu (including children components)	`149.426 kB` `45.505 kB`
`react-menu` Menu (including selectable components)	`152.112 kB` `46.018 kB`
`react-message-bar` MessageBar (all components)	`25.566 kB` `9.13 kB`
`react-northstar` Accordion	`85.386 kB` `26.508 kB`
`react-northstar` Alert	`87.45 kB` `26.902 kB`
`react-northstar` Animation	`55.329 kB` `17.82 kB`
`react-northstar` Attachment	`86.844 kB` `26.692 kB`
`react-northstar` Avatar	`80.279 kB` `24.629 kB`
`react-northstar` Box	`75.248 kB` `23.806 kB`
`react-northstar` Breadcrumb	`79.914 kB` `24.701 kB`
`react-northstar` Button	`83.16 kB` `25.947 kB`
`react-northstar` Card	`82.699 kB` `25.017 kB`
`react-northstar` Carousel	`105.176 kB` `31.87 kB`
`react-northstar` Chat	`152.354 kB` `45.951 kB`
`react-northstar` Checkbox	`79.807 kB` `25.078 kB`
`react-northstar` Datepicker	`184.921 kB` `56.165 kB`
`react-northstar` Debug	`8.801 kB` `3.594 kB`
`react-northstar` Design	`36.589 kB` `12.067 kB`
`react-northstar` Dialog	`112.052 kB` `33.62 kB`
`react-northstar` Divider	`76.619 kB` `24.129 kB`
`react-northstar` Dropdown	`196.469 kB` `59.434 kB`
`react-northstar` Embed	`81.471 kB` `25.411 kB`
`react-northstar` Flex	`47.728 kB` `15.438 kB`
`react-northstar` Form	`92.521 kB` `28.871 kB`
`react-northstar` Grid	`70.584 kB` `22.278 kB`
`react-northstar` Header	`74.756 kB` `23.461 kB`
`react-northstar` Image	`73.591 kB` `23.329 kB`
`react-northstar` Input	`88.339 kB` `27.778 kB`
`react-northstar` ItemLayout	`78.231 kB` `24.454 kB`
`react-northstar` Label	`77.92 kB` `24.41 kB`
`react-northstar` Layout	`75.393 kB` `23.798 kB`
`react-northstar` List	`88.493 kB` `27.547 kB`
`react-northstar` Loader	`78.616 kB` `24.729 kB`
`react-northstar` Menu	`126.878 kB` `39.855 kB`
`react-northstar` MenuButton	`161.283 kB` `48.867 kB`
`react-northstar` Pill	`83.722 kB` `26.069 kB`
`react-northstar` Popup	`133.592 kB` `41.476 kB`
`react-northstar` Portal	`58.321 kB` `18.842 kB`
`react-northstar` Provider	`93.126 kB` `29.621 kB`
`react-northstar` RadioGroup	`83.276 kB` `26.049 kB`
`react-northstar` Reaction	`77.28 kB` `24.122 kB`
`react-northstar` Segment	`76.209 kB` `23.892 kB`
`react-northstar` Skeleton	`77.765 kB` `24.2 kB`
`react-northstar` Slider	`84.264 kB` `26.733 kB`
`react-northstar` SplitButton	`176.516 kB` `52.616 kB`
`react-northstar` Status	`76.272 kB` `24.05 kB`
`react-northstar` SvgIcon	`36.823 kB` `11.743 kB`
`react-northstar` Table	`80.79 kB` `25.149 kB`
`react-northstar` Text	`74.114 kB` `23.507 kB`
`react-northstar` TextArea	`74.248 kB` `23.492 kB`
`react-northstar` Toolbar	`173.327 kB` `52.071 kB`
`react-northstar` Tooltip	`108.255 kB` `34.484 kB`
`react-northstar` Tree	`87.855 kB` `27.217 kB`
`react-northstar` Video	`75.404 kB` `23.787 kB`
`react-overflow` hooks only	`12.86 kB` `4.825 kB`
`react-persona` Persona	`57.066 kB` `17.821 kB`
`react-popover` Popover	`126.884 kB` `39.803 kB`
`react-portal` Portal	`13.633 kB` `4.869 kB`
`react-portal-compat` PortalCompatProvider	`7.944 kB` `2.588 kB`
`react-positioning` usePositioning	`26.398 kB` `9.539 kB`
`react-progress` ProgressBar	`17.428 kB` `6.899 kB`
`react-provider` FluentProvider	`23.759 kB` `8.657 kB`
`react-radio` Radio	`32.95 kB` `10.252 kB`
`react-radio` RadioGroup	`15.354 kB` `6.265 kB`
`react-select` Select	`28.609 kB` `10.204 kB`
`react-slider` Slider	`39.949 kB` `12.968 kB`
`react-spinbutton` SpinButton	`36.774 kB` `11.789 kB`
`react-spinner` Spinner	`24.696 kB` `8.342 kB`
`react-switch` Switch	`35.14 kB` `11.199 kB`
`react-table` DataGrid	`165.189 kB` `45.907 kB`
`react-table` Table (Primitives only)	`45.324 kB` `14.116 kB`
`react-table` Table as DataGrid	`136.573 kB` `36.817 kB`
`react-table` Table (Selection only)	`76.334 kB` `20.553 kB`
`react-table` Table (Sort only)	`74.977 kB` `20.155 kB`
`react-tags` InteractionTag	`15.259 kB` `6.056 kB`
`react-tags` Tag	`29.982 kB` `9.441 kB`
`react-tags` TagGroup	`80.556 kB` `24.027 kB`
`react-text` Text - Default	`16.705 kB` `6.57 kB`
`react-text` Text - Wrappers	`19.878 kB` `6.897 kB`
`react-textarea` Textarea	`30.947 kB` `10.477 kB`
`react-theme` Single theme token import	`69 B` `89 B`
`react-theme` Teams: all themes	`35.666 kB` `7.453 kB`
`react-theme` Teams: Light theme	`19.642 kB` `5.549 kB`
`react-timepicker-compat` TimePicker	`104.707 kB` `34.558 kB`
`react-toast` Toast (including Toaster)	`100.198 kB` `29.761 kB`
`react-tooltip` Tooltip	`54.58 kB` `19.188 kB`
`react-utilities` SSRProvider	`180 B` `160 B`

_{🤖 This report was generated against 7386d73cac6885fd3e620c9a937a525b5953c881}

* fix: improve focus rects support in shadow DOM Moves the FocusRectsProvider to be outside of the shadow DOM, removing a <div> inside the shadow root. Now the FocusRects class name is applied to the shadow root host element and the focus visibility styles are applied by using the `:host()` selector on the shadow root. * update snapshots * link: supports focus rects in shadow dom * checkbox: supports focus rects in shadow dom * update styles to support focus rects in shadow dom * update snapshots * update snapshots * Updating snapshots. --------- Co-authored-by: KHMakoto <Humberto.Morimoto@microsoft.com>

This commit works to minimize the bundle size impact of the v8 shadow DOM feature for users who have NOT opted in to using shadow DOM. In other words, this commit makes shadow DOM as pay-to-play as possible. Or at least starts to. The biggest change is to make MergeStylesRootProvider's context into a dependency injection container. All the hooks necessary for the shadow DOM feature are injected into this container with noop defaults being provided for non-shadow DOM users. This helps minimize the additional code for all components as the actual shadow DOM implementation is only injected for users that opt in to it. Additionally, Stylesheet has been refactored, pulling out optional code like style projection and minimizing other code in the class. Stylesheet still accounts for the bulk of the increased bundle size so there is future bundle reductions will likely come from here.

spmonahan · 2024-03-08T23:47:16Z

/azp run Fluent UI React - Bundle-Size

azure-pipelines · 2024-03-08T23:47:28Z

Azure Pipelines successfully started running 1 pipeline(s).

spmonahan · 2024-03-11T21:54:24Z

packages/style-utilities/src/index.ts

-export * from './interfaces/index';
-export * from './MergeStyles';
-export * from './cdn';
+export { AnimationClassNames, FontClassNames, ColorClassNames } from './classNames/index';


This exports the same API. The change just addresses a lint warning to be specific about exports (i.e., no export * ...)

packages/react-examples/package.json

packages/merge-styles/src/Stylesheet.ts

packages/utilities/src/shadowDom/contexts/MergeStylesShadowRootContext.tsx

This encapsulates all the functionality for the `styled` HOC into a single hook, making the bundle size impact smaller.

There are some edge case bugs and this is a net new feature (non-shadow DOM mergeStyles lacks this feature) so it's being removed from now to avoid further delaying this feature.

This class extends Stylesheet, augmenting it with shadow DOM support. Refactoring the implementation this way allows us to avoid a large bundle size hit for non-shadow DOM users.

Co-authored-by: KHMakoto <Humberto.Morimoto@microsoft.com>

github-actions bot added this to the March Project Cycle Q1 2024 milestone Mar 4, 2024

spmonahan force-pushed the merge-styles/bundle-size branch from c8b4d67 to f301069 Compare March 7, 2024 23:13

spmonahan force-pushed the shadow-dom branch from 6d48e20 to 7386d73 Compare March 8, 2024 19:28

spmonahan and others added 2 commits March 8, 2024 19:39

spmonahan force-pushed the merge-styles/bundle-size branch from f301069 to acc275b Compare March 8, 2024 19:51

spmonahan added 3 commits March 9, 2024 00:45

fix deps

5e1cdaf

update test snaps

2cd61c5

fix lint error

9295ebc

spmonahan changed the title ~~wip: start pruning the bundle size impact~~ Shadow DOM: start pruning the bundle size impact Mar 11, 2024

spmonahan commented Mar 11, 2024

View reviewed changes

spmonahan marked this pull request as ready for review March 11, 2024 21:54

spmonahan requested review from a team, dzearing and khmakoto as code owners March 11, 2024 21:54

khmakoto reviewed Mar 13, 2024

View reviewed changes

packages/react-examples/package.json Outdated Show resolved Hide resolved

packages/merge-styles/src/Stylesheet.ts Show resolved Hide resolved

packages/utilities/src/shadowDom/contexts/MergeStylesShadowRootContext.tsx Show resolved Hide resolved

spmonahan added 5 commits March 13, 2024 11:02

alphabetize deps

e1fc090

update style projection insertion rules

0019efa

wip: refactor

e8c048d

fix issues with stylesheet projection

7451321

correctly bucket styles into constructed stylesheets

cfb787e

spmonahan requested a review from khmakoto March 13, 2024 23:38

spmonahan added 3 commits March 14, 2024 09:52

add SSR guard

74b0756

add 'useStyled()' hook to implement 'styled()' behavior for shadow DOM

f67bee3

This encapsulates all the functionality for the `styled` HOC into a single hook, making the bundle size impact smaller.

trim a few more bytes

34e98e8

spmonahan force-pushed the merge-styles/bundle-size branch from 747189a to 34e98e8 Compare March 14, 2024 19:38

tudorpopams requested a review from Hotell March 19, 2024 13:07

spmonahan added 4 commits March 19, 2024 09:28

remove "projectStylesToWindow"

764acba

There are some edge case bugs and this is a net new feature (non-shadow DOM mergeStyles lacks this feature) so it's being removed from now to avoid further delaying this feature.

add ShadowDomStylesheet class

dc82b1e

This class extends Stylesheet, augmenting it with shadow DOM support. Refactoring the implementation this way allows us to avoid a large bundle size hit for non-shadow DOM users.

update API snapshot

949d54d

more bundle size refactoring

6ff94de

spmonahan changed the title ~~Shadow DOM: start pruning the bundle size impact~~ Shadow DOM: prune bundle size impact Mar 20, 2024

spmonahan merged commit 83888be into microsoft:shadow-dom Mar 22, 2024

spmonahan added a commit that referenced this pull request Mar 23, 2024

Shadow DOM: prune bundle size impact (#30709)

be2a1a4

Co-authored-by: KHMakoto <Humberto.Morimoto@microsoft.com>

spmonahan added a commit that referenced this pull request Mar 26, 2024

Shadow DOM: prune bundle size impact (#30709)

476be11

Co-authored-by: KHMakoto <Humberto.Morimoto@microsoft.com>

spmonahan added a commit that referenced this pull request Mar 28, 2024

Shadow DOM: prune bundle size impact (#30709)

4a19f62

Co-authored-by: KHMakoto <Humberto.Morimoto@microsoft.com>

spmonahan added a commit to spmonahan/fluentui that referenced this pull request Mar 29, 2024

Shadow DOM: prune bundle size impact (microsoft#30709)

d94e8fb

Co-authored-by: KHMakoto <Humberto.Morimoto@microsoft.com>

spmonahan added a commit that referenced this pull request Apr 4, 2024

Shadow DOM: prune bundle size impact (#30709)

9781752

Co-authored-by: KHMakoto <Humberto.Morimoto@microsoft.com>

spmonahan added a commit that referenced this pull request Apr 15, 2024

Shadow DOM: prune bundle size impact (#30709)

ba81cf9

Co-authored-by: KHMakoto <Humberto.Morimoto@microsoft.com>

spmonahan added a commit that referenced this pull request Apr 18, 2024

Shadow DOM: prune bundle size impact (#30709)

5623c50

Co-authored-by: KHMakoto <Humberto.Morimoto@microsoft.com>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Shadow DOM: prune bundle size impact#30709

Shadow DOM: prune bundle size impact#30709
spmonahan merged 17 commits intomicrosoft:shadow-domfrom
spmonahan:merge-styles/bundle-size

spmonahan commented Mar 4, 2024 •

edited by khmakoto

Loading

Uh oh!

spmonahan commented Mar 4, 2024

Uh oh!

azure-pipelines bot commented Mar 4, 2024

Uh oh!

codesandbox-ci bot commented Mar 7, 2024 •

edited

Loading

Uh oh!

fabricteam commented Mar 7, 2024 •

edited

Loading

Uh oh!

spmonahan commented Mar 8, 2024

Uh oh!

azure-pipelines bot commented Mar 8, 2024

Uh oh!

spmonahan Mar 11, 2024

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

spmonahan commented Mar 4, 2024 • edited by khmakoto Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Previous Behavior

New Behavior

Uh oh!

spmonahan commented Mar 4, 2024

Uh oh!

azure-pipelines bot commented Mar 4, 2024

Uh oh!

codesandbox-ci bot commented Mar 7, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

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

Uh oh!

📊 Bundle size report

Uh oh!

spmonahan commented Mar 8, 2024

Uh oh!

azure-pipelines bot commented Mar 8, 2024

Uh oh!

spmonahan Mar 11, 2024

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

spmonahan commented Mar 4, 2024 •

edited by khmakoto

Loading

codesandbox-ci bot commented Mar 7, 2024 •

edited

Loading

fabricteam commented Mar 7, 2024 •

edited

Loading