Moving a few packages to use type imports/exports #19416
Conversation
dzearing
requested review from
behowell,
ecraig12345,
Jahnp,
khmakoto,
leddie24,
lorejoh12,
Markionium,
mtennoe,
phkuo,
ThomasMichon,
Vitalius1,
yiminwu and
a team
as code owners
|
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 4f09773:
|
📊 Bundle size report🤖 This report was generated against 74edc9eef50ee89471beee2ef8fb724f470854fc |
Asset size changes
Baseline commit: 74edc9eef50ee89471beee2ef8fb724f470854fc (build) |
Perf Analysis (
|
| Scenario | Render type | Master Ticks | PR Ticks | Iterations | Status |
|---|---|---|---|---|---|
| Avatar | mount | 882 | 896 | 5000 | |
| BaseButton | mount | 905 | 884 | 5000 | |
| Breadcrumb | mount | 2617 | 2611 | 1000 | |
| ButtonNext | mount | 434 | 420 | 5000 | |
| Checkbox | mount | 1504 | 1512 | 5000 | |
| CheckboxBase | mount | 1244 | 1246 | 5000 | |
| ChoiceGroup | mount | 4665 | 4634 | 5000 | |
| ComboBox | mount | 970 | 980 | 1000 | |
| CommandBar | mount | 10207 | 10133 | 1000 | |
| ContextualMenu | mount | 6131 | 6226 | 1000 | |
| DefaultButton | mount | 1131 | 1107 | 5000 | |
| DetailsRow | mount | 3684 | 3727 | 5000 | |
| DetailsRowFast | mount | 3694 | 3711 | 5000 | |
| DetailsRowNoStyles | mount | 3486 | 3428 | 5000 | |
| Dialog | mount | 2120 | 2130 | 1000 | |
| DocumentCardTitle | mount | 132 | 138 | 1000 | |
| Dropdown | mount | 3181 | 3186 | 5000 | |
| FluentProviderNext | mount | 7460 | 7493 | 5000 | |
| FocusTrapZone | mount | 1761 | 1782 | 5000 | |
| FocusZone | mount | 1742 | 1814 | 5000 | |
| IconButton | mount | 1718 | 1700 | 5000 | |
| Label | mount | 348 | 334 | 5000 | |
| Layer | mount | 1741 | 1733 | 5000 | |
| Link | mount | 448 | 463 | 5000 | |
| MakeStyles | mount | 1801 | 1830 | 50000 | |
| MenuButton | mount | 1447 | 1442 | 5000 | |
| MessageBar | mount | 1985 | 2037 | 5000 | |
| Nav | mount | 3233 | 3194 | 1000 | |
| OverflowSet | mount | 1052 | 1103 | 5000 | |
| Panel | mount | 2045 | 2071 | 1000 | |
| Persona | mount | 832 | 827 | 1000 | |
| Pivot | mount | 1502 | 1407 | 1000 | |
| PrimaryButton | mount | 1283 | 1278 | 5000 | |
| Rating | mount | 7588 | 7505 | 5000 | |
| SearchBox | mount | 1281 | 1297 | 5000 | |
| Shimmer | mount | 2469 | 2491 | 5000 | |
| Slider | mount | 1942 | 1938 | 5000 | |
| SpinButton | mount | 4891 | 4901 | 5000 | |
| Spinner | mount | 420 | 407 | 5000 | |
| SplitButton | mount | 3136 | 3108 | 5000 | |
| Stack | mount | 495 | 510 | 5000 | |
| StackWithIntrinsicChildren | mount | 1499 | 1507 | 5000 | |
| StackWithTextChildren | mount | 4517 | 4457 | 5000 | |
| SwatchColorPicker | mount | 10161 | 10172 | 5000 | |
| Tabs | mount | 1392 | 1396 | 1000 | |
| TagPicker | mount | 2510 | 2590 | 5000 | |
| TeachingBubble | mount | 11705 | 11788 | 5000 | |
| Text | mount | 406 | 404 | 5000 | |
| TextField | mount | 1343 | 1339 | 5000 | |
| ThemeProvider | mount | 1167 | 1157 | 5000 | |
| ThemeProvider | virtual-rerender | 593 | 596 | 5000 | |
| Toggle | mount | 821 | 781 | 5000 | |
| buttonNative | mount | 116 | 114 | 5000 |
Perf Analysis (@fluentui/react-northstar)
Perf tests with no regressions
| Scenario | Current PR Ticks | Baseline Ticks | Ratio |
|---|---|---|---|
| AccordionMinimalPerf.default | 147 | 132 | 1.11:1 |
| AttachmentMinimalPerf.default | 166 | 150 | 1.11:1 |
| GridMinimalPerf.default | 348 | 318 | 1.09:1 |
| FormMinimalPerf.default | 410 | 382 | 1.07:1 |
| ChatWithPopoverPerf.default | 365 | 343 | 1.06:1 |
| FlexMinimalPerf.default | 287 | 272 | 1.06:1 |
| AvatarMinimalPerf.default | 192 | 182 | 1.05:1 |
| ButtonMinimalPerf.default | 174 | 166 | 1.05:1 |
| LabelMinimalPerf.default | 385 | 368 | 1.05:1 |
| AnimationMinimalPerf.default | 419 | 403 | 1.04:1 |
| ChatMinimalPerf.default | 667 | 643 | 1.04:1 |
| VideoMinimalPerf.default | 640 | 617 | 1.04:1 |
| ChatDuplicateMessagesPerf.default | 289 | 280 | 1.03:1 |
| HeaderSlotsPerf.default | 767 | 747 | 1.03:1 |
| ItemLayoutMinimalPerf.default | 1241 | 1205 | 1.03:1 |
| LayoutMinimalPerf.default | 368 | 357 | 1.03:1 |
| PopupMinimalPerf.default | 600 | 580 | 1.03:1 |
| TreeMinimalPerf.default | 778 | 758 | 1.03:1 |
| ButtonOverridesMissPerf.default | 1710 | 1672 | 1.02:1 |
| ImageMinimalPerf.default | 373 | 367 | 1.02:1 |
| ListNestedPerf.default | 546 | 533 | 1.02:1 |
| PortalMinimalPerf.default | 177 | 173 | 1.02:1 |
| RadioGroupMinimalPerf.default | 437 | 429 | 1.02:1 |
| StatusMinimalPerf.default | 682 | 668 | 1.02:1 |
| IconMinimalPerf.default | 606 | 592 | 1.02:1 |
| TextMinimalPerf.default | 343 | 335 | 1.02:1 |
| TextAreaMinimalPerf.default | 488 | 479 | 1.02:1 |
| TreeWith60ListItems.default | 171 | 168 | 1.02:1 |
| AttachmentSlotsPerf.default | 1056 | 1044 | 1.01:1 |
| CardMinimalPerf.default | 549 | 543 | 1.01:1 |
| CheckboxMinimalPerf.default | 2780 | 2750 | 1.01:1 |
| DialogMinimalPerf.default | 770 | 765 | 1.01:1 |
| DropdownMinimalPerf.default | 3111 | 3093 | 1.01:1 |
| ListMinimalPerf.default | 511 | 506 | 1.01:1 |
| LoaderMinimalPerf.default | 693 | 683 | 1.01:1 |
| MenuMinimalPerf.default | 845 | 837 | 1.01:1 |
| ProviderMergeThemesPerf.default | 1689 | 1674 | 1.01:1 |
| ProviderMinimalPerf.default | 1005 | 993 | 1.01:1 |
| SegmentMinimalPerf.default | 339 | 336 | 1.01:1 |
| SkeletonMinimalPerf.default | 352 | 347 | 1.01:1 |
| TableManyItemsPerf.default | 1868 | 1852 | 1.01:1 |
| TableMinimalPerf.default | 396 | 391 | 1.01:1 |
| ToolbarMinimalPerf.default | 915 | 902 | 1.01:1 |
| AlertMinimalPerf.default | 265 | 265 | 1:1 |
| DatepickerMinimalPerf.default | 5362 | 5346 | 1:1 |
| DropdownManyItemsPerf.default | 667 | 666 | 1:1 |
| InputMinimalPerf.default | 1275 | 1274 | 1:1 |
| CustomToolbarPrototype.default | 3886 | 3877 | 1:1 |
| TooltipMinimalPerf.default | 985 | 983 | 1:1 |
| ButtonSlotsPerf.default | 516 | 522 | 0.99:1 |
| CarouselMinimalPerf.default | 453 | 459 | 0.99:1 |
| DividerMinimalPerf.default | 359 | 361 | 0.99:1 |
| EmbedMinimalPerf.default | 4085 | 4129 | 0.99:1 |
| SliderMinimalPerf.default | 1567 | 1584 | 0.99:1 |
| SplitButtonMinimalPerf.default | 3765 | 3790 | 0.99:1 |
| BoxMinimalPerf.default | 349 | 355 | 0.98:1 |
| ListCommonPerf.default | 616 | 628 | 0.98:1 |
| MenuButtonMinimalPerf.default | 1606 | 1631 | 0.98:1 |
| ReactionMinimalPerf.default | 362 | 369 | 0.98:1 |
| RefMinimalPerf.default | 223 | 229 | 0.97:1 |
| RosterPerf.default | 1116 | 1158 | 0.96:1 |
| HeaderMinimalPerf.default | 350 | 371 | 0.94:1 |
| ListWith60ListItems.default | 608 | 661 | 0.92:1 |
packages/react/src/components/MarqueeSelection/MarqueeSelection.base.tsx
Outdated
Show resolved
Hide resolved
Co-authored-by: Elizabeth Craig <ecraig12345@gmail.com>
… into fix/type-imports
|
🎉 Handy links: |
|
🎉 Handy links: |
|
🎉 Handy links: |
|
🎉 Handy links: |
|
🎉 Handy links: |
|
🎉 Handy links: |
|
🎉 Handy links: |
|
🎉 Handy links: |
|
🎉 Handy links: |
|
🎉 Handy links: |
|
🎉 Handy links: |
|
🎉 Handy links: |
|
🎉 Handy links: |
|
🎉 Handy links: |
|
🎉 Handy links: |
|
🎉 Handy links: |
|
🎉 Handy links: |
|
🎉 Handy links: |
|
🎉 Handy links: |
|
🎉 Handy links: |
|
🎉 Handy links: |
|
🎉 Handy links: |
|
🎉 Handy links: |
|
🎉 Handy links: |
Description of changes
When transpilers like esbuild or babel are used to transform TypeScript into JavaScript, they have little to no visibility on the full AST and in many cases can't know whether something should be dropped or not. Take for example this statement:
Most of the time, interface imports can be dropped because when all of the references are gone, the import is inferred to be unused. Exports like the above on the other hand are impossible to drop without knowing if
IButtonPropsis a javascript export or a TypeScript export.TypeScript 3.8 and above fortunately solves this through the syntax "import type" and "export type", implying the things being exported are types. With these annotations the transpilers have a better time knowing what to drop, thus enabling features like "bundling the package to be consumed by the browser while externalizing dependencies."
This PR updates the following packages to use this syntax:
@fluentui/react@fluentui/utilities@fluentui/styling-utilitiesAdditionally, I've enabled
isolatedModulesin thetsconfig.jsonfor these packages. This ensures that no types are exported without usingexport type.Focus areas to test
No logic is changed, no APIs are dropped here. This should be 0 impact on partners, assuming that they're on 3.8 or above, which I believe is below the min-bar requirement, definitely below what's checked in and being tested.
I plan to have a followup PR that corrects the remaining packages. I wrote a codemod to upgrade packages, which is what I used here. I will be saving that to a separate repo and package.