chore: migrate babel-make-styles to new DX#18758
Conversation
Asset size changesSize Auditor did not detect a change in bundle size for any component! Baseline commit: c5019f09e666bac820addb36facaf0c133c0f7bc (build) |
Perf Analysis (
|
| Scenario | Render type | Master Ticks | PR Ticks | Iterations | Status |
|---|---|---|---|---|---|
| Avatar | mount | 800 | 822 | 5000 | |
| BaseButton | mount | 944 | 918 | 5000 | |
| Breadcrumb | mount | 2693 | 2709 | 1000 | |
| ButtonNext | mount | 529 | 539 | 5000 | |
| Checkbox | mount | 1493 | 1504 | 5000 | |
| CheckboxBase | mount | 1286 | 1292 | 5000 | |
| ChoiceGroup | mount | 4697 | 4699 | 5000 | |
| ComboBox | mount | 966 | 961 | 1000 | |
| CommandBar | mount | 10208 | 10305 | 1000 | |
| ContextualMenu | mount | 6344 | 6369 | 1000 | |
| DefaultButton | mount | 1151 | 1126 | 5000 | |
| DetailsRow | mount | 3776 | 3827 | 5000 | |
| DetailsRowFast | mount | 3694 | 3839 | 5000 | |
| DetailsRowNoStyles | mount | 3495 | 3567 | 5000 | |
| Dialog | mount | 2142 | 2192 | 1000 | |
| DocumentCardTitle | mount | 150 | 143 | 1000 | |
| Dropdown | mount | 3216 | 3266 | 5000 | |
| FocusTrapZone | mount | 1839 | 1820 | 5000 | |
| FocusZone | mount | 1800 | 1839 | 5000 | |
| IconButton | mount | 1718 | 1766 | 5000 | |
| Label | mount | 330 | 330 | 5000 | |
| Layer | mount | 1839 | 1801 | 5000 | |
| Link | mount | 471 | 456 | 5000 | |
| MakeStyles | mount | 1854 | 1846 | 50000 | |
| MenuButton | mount | 1467 | 1470 | 5000 | |
| MessageBar | mount | 2001 | 2036 | 5000 | |
| Nav | mount | 3263 | 3268 | 1000 | |
| OverflowSet | mount | 1068 | 1030 | 5000 | |
| Panel | mount | 2087 | 2083 | 1000 | |
| Persona | mount | 846 | 851 | 1000 | |
| Pivot | mount | 1402 | 1438 | 1000 | |
| PrimaryButton | mount | 1284 | 1302 | 5000 | |
| Rating | mount | 7625 | 7564 | 5000 | |
| SearchBox | mount | 1340 | 1334 | 5000 | |
| Shimmer | mount | 2539 | 2549 | 5000 | |
| Slider | mount | 1975 | 1951 | 5000 | |
| SpinButton | mount | 5044 | 4977 | 5000 | |
| Spinner | mount | 423 | 417 | 5000 | |
| SplitButton | mount | 3192 | 3208 | 5000 | |
| Stack | mount | 494 | 504 | 5000 | |
| StackWithIntrinsicChildren | mount | 1512 | 1495 | 5000 | |
| StackWithTextChildren | mount | 4498 | 4462 | 5000 | |
| SwatchColorPicker | mount | 11284 | 10264 | 5000 | |
| Tabs | mount | 1421 | 1425 | 1000 | |
| TagPicker | mount | 2440 | 2407 | 5000 | |
| TeachingBubble | mount | 11918 | 11940 | 5000 | |
| Text | mount | 434 | 410 | 5000 | |
| TextField | mount | 1412 | 1355 | 5000 | |
| ThemeProvider | mount | 1191 | 1198 | 5000 | |
| ThemeProvider | virtual-rerender | 598 | 596 | 5000 | |
| ThemeProviderNext | mount | 7207 | 7140 | 5000 | |
| Toggle | mount | 799 | 800 | 5000 | |
| buttonNative | mount | 116 | 117 | 5000 |
Perf Analysis (@fluentui/react-northstar)
Perf tests with no regressions
| Scenario | Current PR Ticks | Baseline Ticks | Ratio |
|---|---|---|---|
| ReactionMinimalPerf.default | 398 | 366 | 1.09:1 |
| AvatarMinimalPerf.default | 198 | 183 | 1.08:1 |
| FlexMinimalPerf.default | 296 | 274 | 1.08:1 |
| SegmentMinimalPerf.default | 358 | 333 | 1.08:1 |
| PortalMinimalPerf.default | 187 | 175 | 1.07:1 |
| ButtonMinimalPerf.default | 172 | 163 | 1.06:1 |
| ItemLayoutMinimalPerf.default | 1254 | 1186 | 1.06:1 |
| RadioGroupMinimalPerf.default | 464 | 438 | 1.06:1 |
| ListCommonPerf.default | 625 | 596 | 1.05:1 |
| AlertMinimalPerf.default | 279 | 269 | 1.04:1 |
| ButtonSlotsPerf.default | 561 | 539 | 1.04:1 |
| FormMinimalPerf.default | 401 | 385 | 1.04:1 |
| GridMinimalPerf.default | 345 | 331 | 1.04:1 |
| RefMinimalPerf.default | 241 | 231 | 1.04:1 |
| TextMinimalPerf.default | 353 | 339 | 1.04:1 |
| AttachmentSlotsPerf.default | 1070 | 1034 | 1.03:1 |
| CarouselMinimalPerf.default | 458 | 446 | 1.03:1 |
| ChatWithPopoverPerf.default | 360 | 349 | 1.03:1 |
| DividerMinimalPerf.default | 363 | 352 | 1.03:1 |
| ImageMinimalPerf.default | 359 | 348 | 1.03:1 |
| ListMinimalPerf.default | 529 | 512 | 1.03:1 |
| ProviderMinimalPerf.default | 965 | 936 | 1.03:1 |
| TooltipMinimalPerf.default | 981 | 956 | 1.03:1 |
| EmbedMinimalPerf.default | 4140 | 4070 | 1.02:1 |
| ListWith60ListItems.default | 653 | 642 | 1.02:1 |
| IconMinimalPerf.default | 606 | 595 | 1.02:1 |
| AnimationMinimalPerf.default | 412 | 407 | 1.01:1 |
| DialogMinimalPerf.default | 759 | 753 | 1.01:1 |
| DropdownMinimalPerf.default | 3120 | 3091 | 1.01:1 |
| HeaderMinimalPerf.default | 357 | 355 | 1.01:1 |
| LoaderMinimalPerf.default | 692 | 686 | 1.01:1 |
| SkeletonMinimalPerf.default | 351 | 349 | 1.01:1 |
| SliderMinimalPerf.default | 1538 | 1530 | 1.01:1 |
| TextAreaMinimalPerf.default | 486 | 482 | 1.01:1 |
| CustomToolbarPrototype.default | 3822 | 3773 | 1.01:1 |
| ButtonOverridesMissPerf.default | 1676 | 1673 | 1:1 |
| ChatDuplicateMessagesPerf.default | 294 | 293 | 1:1 |
| CheckboxMinimalPerf.default | 2768 | 2778 | 1:1 |
| DropdownManyItemsPerf.default | 674 | 672 | 1:1 |
| MenuMinimalPerf.default | 855 | 852 | 1:1 |
| MenuButtonMinimalPerf.default | 1577 | 1576 | 1:1 |
| SplitButtonMinimalPerf.default | 3706 | 3720 | 1:1 |
| ToolbarMinimalPerf.default | 942 | 939 | 1:1 |
| TreeMinimalPerf.default | 802 | 804 | 1:1 |
| AttachmentMinimalPerf.default | 150 | 151 | 0.99:1 |
| BoxMinimalPerf.default | 345 | 350 | 0.99:1 |
| CardMinimalPerf.default | 549 | 554 | 0.99:1 |
| DatepickerMinimalPerf.default | 5442 | 5482 | 0.99:1 |
| LayoutMinimalPerf.default | 362 | 366 | 0.99:1 |
| ListNestedPerf.default | 552 | 559 | 0.99:1 |
| StatusMinimalPerf.default | 676 | 683 | 0.99:1 |
| ChatMinimalPerf.default | 649 | 662 | 0.98:1 |
| HeaderSlotsPerf.default | 741 | 759 | 0.98:1 |
| PopupMinimalPerf.default | 570 | 584 | 0.98:1 |
| ProviderMergeThemesPerf.default | 1676 | 1705 | 0.98:1 |
| TableManyItemsPerf.default | 1880 | 1911 | 0.98:1 |
| TreeWith60ListItems.default | 166 | 169 | 0.98:1 |
| InputMinimalPerf.default | 1231 | 1272 | 0.97:1 |
| TableMinimalPerf.default | 397 | 408 | 0.97:1 |
| LabelMinimalPerf.default | 378 | 395 | 0.96:1 |
| RosterPerf.default | 1140 | 1189 | 0.96:1 |
| AccordionMinimalPerf.default | 143 | 151 | 0.95:1 |
| VideoMinimalPerf.default | 611 | 644 | 0.95:1 |
jest.preset.js
Outdated
| }, | ||
| testMatch: ['**/+(*.)+(spec|test).+(ts|js)?(x)'], | ||
| moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'], | ||
| moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json'], |
There was a problem hiding this comment.
hmm wondering if this will be really needed for all packages ? maybe I'd override it solely for babel-make-styles ? WDYT?
There was a problem hiding this comment.
Makes sense, applied it in packages/babel-make-styles/jest.config.js
| @@ -0,0 +1 @@ | |||
| require('@testing-library/jest-dom'); | |||
There was a problem hiding this comment.
this line was added by migration as well ? meaning -> do we need jest-dom for this package ? (I'd assume we don't as its a node package)
There was a problem hiding this comment.
Or bad copy-paste 🤓 Anyway, replaced it with a placeholder 👍
…hore/bms-dx � Conflicts: � packages/babel-make-styles/src/plugin.ts
|
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 b48a40d:
|
Pull request checklist
$ yarn changeDescription of changes
Migrates
@fluentui/babel-make-stylesto new DX.Changes that were made:
jest-preset.jsto includejson(migration(babel-make-styles): after migrating via nx generator, tests don't work #18757 (comment)).storybookand related commands frompackage.json#scriptstsconfig.jsonto match previous setupnx.jsonto set tags toplatform:node