Skip to content

chore: add vNext storybook builders support and context awareness for migration generator#19484

Merged
Hotell merged 5 commits intomicrosoft:masterfrom
Hotell:hotell/build-system/update-sb-config-with-builders
Aug 25, 2021
Merged

chore: add vNext storybook builders support and context awareness for migration generator#19484
Hotell merged 5 commits intomicrosoft:masterfrom
Hotell:hotell/build-system/update-sb-config-with-builders

Conversation

@Hotell
Copy link
Contributor

@Hotell Hotell commented Aug 23, 2021

Pull request checklist

Description of changes

  • adds builders support to root config for vNext
  • adds builders support for package storybooks setup

Focus areas to test

(optional)

@Hotell Hotell changed the title Hotell/build system/update sb config with builders chore: add vNext storybook builders support Aug 23, 2021
@size-auditor
Copy link

size-auditor bot commented Aug 23, 2021

Asset size changes

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

Baseline commit: 00df799963bbb5e8bbfe8b2244ab2b69d0d86de1 (build)

@codesandbox-ci
Copy link

codesandbox-ci bot commented Aug 23, 2021

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 790141c:

Sandbox Source
Fluent UI React Starter Configuration

@fabricteam
Copy link
Collaborator

fabricteam commented Aug 23, 2021

📊 Bundle size report

Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-accordion
Accordion (including children components)
75.787 kB
22.366 kB
react-avatar
Avatar
56.558 kB
15.66 kB
react-badge
Badge
24.343 kB
7.165 kB
react-badge
CounterBadge
27.156 kB
7.851 kB
react-badge
PresenseBadge
237 B
177 B
react-button
Button
25.016 kB
8.035 kB
react-button
CompoundButton
30.308 kB
8.911 kB
react-button
MenuButton
26.603 kB
8.543 kB
react-button
ToggleButton
34.613 kB
8.671 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
177.666 kB
50.281 kB
react-components
react-components: FluentProvider & webLightTheme
36.288 kB
11.615 kB
react-divider
Divider
15.889 kB
5.747 kB
react-image
Image
10.642 kB
4.264 kB
react-label
Label
9.397 kB
3.839 kB
react-link
Link
14.715 kB
6.012 kB
react-make-styles
makeStaticStyles (runtime)
7.59 kB
3.321 kB
react-make-styles
makeStyles + mergeClasses (runtime)
22.135 kB
8.356 kB
react-make-styles
makeStyles + mergeClasses (build time)
2.557 kB
1.202 kB
react-menu
Menu (including children components)
115.15 kB
34.665 kB
react-menu
Menu (including selectable components)
117.88 kB
35.217 kB
react-popover
Popover
124.599 kB
36.198 kB
react-portal
Portal
7.78 kB
2.672 kB
react-positioning
usePopper
23.145 kB
7.942 kB
react-provider
FluentProvider
16.286 kB
5.991 kB
react-text
Text - Default
11.798 kB
4.452 kB
react-text
Text - Wrappers
15.414 kB
4.734 kB
react-theme
Teams: all themes
32.941 kB
6.674 kB
react-theme
Teams: Light theme
20.247 kB
5.662 kB
react-tooltip
Tooltip
46.054 kB
15.658 kB
react-utilities
SSRProvider
213 B
170 B
🤖 This report was generated against 00df799963bbb5e8bbfe8b2244ab2b69d0d86de1

@fabricteam
Copy link
Collaborator

fabricteam commented Aug 23, 2021

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 936 920 5000
BaseButton mount 1079 1093 5000
Breadcrumb mount 2662 2645 1000
ButtonNext mount 445 453 5000
Checkbox mount 1607 1644 5000
CheckboxBase mount 1396 1434 5000
ChoiceGroup mount 5282 5223 5000
ComboBox mount 1093 1010 1000
CommandBar mount 10685 10857 1000
ContextualMenu mount 6339 6382 1000
DefaultButton mount 1268 1222 5000
DetailsRow mount 3875 4012 5000
DetailsRowFast mount 3907 3908 5000
DetailsRowNoStyles mount 3802 3799 5000
Dialog mount 2162 2233 1000
DocumentCardTitle mount 151 155 1000
Dropdown mount 3458 3469 5000
FluentProviderNext mount 7222 7181 5000
FocusTrapZone mount 1841 1834 5000
FocusZone mount 1847 1824 5000
IconButton mount 1896 1939 5000
Label mount 346 333 5000
Layer mount 1940 1901 5000
Link mount 514 501 5000
MakeStyles mount 1840 1892 50000
MenuButton mount 1544 1589 5000
MessageBar mount 2093 2012 5000
Nav mount 3414 3438 1000
OverflowSet mount 1185 1131 5000
Panel mount 2172 2224 1000
Persona mount 873 905 1000
Pivot mount 1513 1484 1000
PrimaryButton mount 1336 1364 5000
Rating mount 8466 8249 5000
SearchBox mount 1486 1471 5000
Shimmer mount 2848 2836 5000
Slider mount 2142 2140 5000
SpinButton mount 5412 5436 5000
Spinner mount 449 458 5000
SplitButton mount 3507 3512 5000
Stack mount 545 543 5000
StackWithIntrinsicChildren mount 1743 1781 5000
StackWithTextChildren mount 4919 4972 5000
SwatchColorPicker mount err 10840 5000
Tabs mount 1452 1467 1000
TagPicker mount 2747 2986 5000
TeachingBubble mount 12263 12166 5000
Text mount 454 515 5000
TextField mount 1463 1508 5000
ThemeProvider mount 1189 1207 5000
ThemeProvider virtual-rerender 594 583 5000
Toggle mount 861 837 5000
buttonNative mount 118 121 5000

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
ChatDuplicateMessagesPerf.default 337 310 1.09:1
LabelMinimalPerf.default 432 397 1.09:1
VideoMinimalPerf.default 709 659 1.08:1
SegmentMinimalPerf.default 385 361 1.07:1
TableMinimalPerf.default 498 466 1.07:1
ButtonMinimalPerf.default 199 187 1.06:1
DropdownManyItemsPerf.default 794 750 1.06:1
ListNestedPerf.default 635 601 1.06:1
AttachmentSlotsPerf.default 1202 1145 1.05:1
FlexMinimalPerf.default 299 284 1.05:1
GridMinimalPerf.default 385 367 1.05:1
ButtonSlotsPerf.default 600 577 1.04:1
CarouselMinimalPerf.default 542 523 1.04:1
ChatWithPopoverPerf.default 411 397 1.04:1
HeaderSlotsPerf.default 838 805 1.04:1
ItemLayoutMinimalPerf.default 1320 1270 1.04:1
ListCommonPerf.default 715 689 1.04:1
TextAreaMinimalPerf.default 598 575 1.04:1
LayoutMinimalPerf.default 394 381 1.03:1
MenuMinimalPerf.default 939 912 1.03:1
SkeletonMinimalPerf.default 390 380 1.03:1
TableManyItemsPerf.default 2290 2229 1.03:1
AttachmentMinimalPerf.default 187 184 1.02:1
BoxMinimalPerf.default 381 373 1.02:1
ButtonOverridesMissPerf.default 1836 1798 1.02:1
EmbedMinimalPerf.default 4440 4341 1.02:1
HeaderMinimalPerf.default 396 388 1.02:1
LoaderMinimalPerf.default 736 721 1.02:1
RadioGroupMinimalPerf.default 488 478 1.02:1
SplitButtonMinimalPerf.default 4152 4088 1.02:1
IconMinimalPerf.default 724 713 1.02:1
CustomToolbarPrototype.default 4037 3966 1.02:1
ChatMinimalPerf.default 731 721 1.01:1
DialogMinimalPerf.default 849 842 1.01:1
DropdownMinimalPerf.default 3282 3254 1.01:1
MenuButtonMinimalPerf.default 1799 1782 1.01:1
PopupMinimalPerf.default 610 606 1.01:1
ReactionMinimalPerf.default 414 408 1.01:1
AvatarMinimalPerf.default 224 225 1:1
DatepickerMinimalPerf.default 5807 5810 1:1
DividerMinimalPerf.default 418 417 1:1
ListWith60ListItems.default 717 717 1:1
RefMinimalPerf.default 225 226 1:1
SliderMinimalPerf.default 1613 1616 1:1
AccordionMinimalPerf.default 170 171 0.99:1
FormMinimalPerf.default 452 458 0.99:1
StatusMinimalPerf.default 791 795 0.99:1
TextMinimalPerf.default 390 393 0.99:1
ToolbarMinimalPerf.default 1005 1016 0.99:1
TooltipMinimalPerf.default 1062 1078 0.99:1
TreeMinimalPerf.default 856 862 0.99:1
TreeWith60ListItems.default 189 191 0.99:1
AnimationMinimalPerf.default 444 452 0.98:1
CheckboxMinimalPerf.default 2888 2936 0.98:1
CardMinimalPerf.default 611 633 0.97:1
ImageMinimalPerf.default 415 430 0.97:1
RosterPerf.default 1280 1317 0.97:1
PortalMinimalPerf.default 172 177 0.97:1
ProviderMergeThemesPerf.default 1656 1701 0.97:1
ProviderMinimalPerf.default 1022 1050 0.97:1
AlertMinimalPerf.default 292 304 0.96:1
ListMinimalPerf.default 549 574 0.96:1
InputMinimalPerf.default 1315 1426 0.92:1

@Hotell Hotell changed the title chore: add vNext storybook builders support chore: add vNext storybook builders support and context awareness for migration generator Aug 23, 2021
* typescript: StorybookTsConfig;
* babel: (options:Record<string,unknown>)=>Promise<Record<string,unknown>>;
* webpackFinal: StorybookWebpackConfig;
* core: {builder:'webpack5'};
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

added core

updateApiExtractorForLocalBuilds(tree, options);

// setup storybook
setupStorybook(tree, options);
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

re-ordered task execution so sb comes after all requirements have been setup


module.exports = /** @type {Pick<import('../../../.storybook/main').StorybookConfig,'addons'|'stories'|'webpackFinal'>} */ ({
module.exports = /** @type {Omit<import('../../../.storybook/main'), 'typescript'|'babel'>} */ ({
...rootMain,
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

now every local sb will use root setup ( this will turn on webpack5 mode as well )

@Hotell Hotell marked this pull request as ready for review August 23, 2021 19:01
@Hotell Hotell requested a review from a team as a code owner August 23, 2021 19:01
@Hotell Hotell added this to the August Project Cycle Q3 2021 milestone Aug 23, 2021
@Hotell Hotell merged commit dd0e01e into microsoft:master Aug 25, 2021
@Hotell Hotell deleted the hotell/build-system/update-sb-config-with-builders branch August 25, 2021 09:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

tools(migrate-converged-pkg): add/setup storybook config only when needed

5 participants