Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: migrate to TS 4.7 #28067

Merged
merged 16 commits into from
Jun 16, 2023
Merged

chore: migrate to TS 4.7 #28067

merged 16 commits into from
Jun 16, 2023

Conversation

Hotell
Copy link
Contributor

@Hotell Hotell commented May 31, 2023

New Behavior

Release notes: https://devblogs.microsoft.com/typescript/announcing-typescript-4-7

Announced breaking changes affecting our codebase:

Not announced breaking changes affecting our codebase:

1.Optional parameter does not include undefined

NOTE: while "Breaking change" from API extractor POV, it's both backwards and forwards compatible. You can check that it works the same in any TS version in this demo.

microsoft/TypeScript#48605

function greet(who:string, greeting?: string): string {...} 

↓ TS declaration emit ↓

- declare function greet(who:string, greeting?: string | undefined): string
+ declare function greet(who:string, greeting?: string ): string

2. Better always true detection

https://github.com/microsoft/fluentui/pull/28067/files#diff-1f1acc68e7fa526941cdfaccf49201186c1dba65daf2b490ea2729aa7b6624ddL281-R282

Related Issue(s)

@fabricteam
Copy link
Collaborator

fabricteam commented May 31, 2023

📊 Bundle size report

Unchanged fixtures
Package & Exports Size (minified/GZIP)
global-context
createContext
510 B
330 B
global-context
createContextSelector
537 B
342 B
priority-overflow
createOverflowManager
3.194 kB
1.315 kB
react-accordion
Accordion (including children components)
88.064 kB
26.659 kB
react-alert
Alert
82.552 kB
21.771 kB
react-avatar
Avatar
47.7 kB
14.504 kB
react-avatar
AvatarGroup
15.682 kB
6.306 kB
react-avatar
AvatarGroupItem
63.876 kB
18.984 kB
react-badge
Badge
23.591 kB
7.264 kB
react-badge
CounterBadge
24.493 kB
7.565 kB
react-badge
PresenceBadge
22.213 kB
7.872 kB
react-button
Button
36.778 kB
9.51 kB
react-button
CompoundButton
43.932 kB
10.99 kB
react-button
MenuButton
40.965 kB
10.705 kB
react-button
SplitButton
49.197 kB
12.27 kB
react-button
ToggleButton
55.06 kB
11.446 kB
react-card
Card - All
88.752 kB
25.122 kB
react-card
Card
83.687 kB
23.666 kB
react-card
CardFooter
9.229 kB
3.9 kB
react-card
CardHeader
11.125 kB
4.596 kB
react-card
CardPreview
10.034 kB
4.248 kB
react-checkbox
Checkbox
33.164 kB
10.699 kB
react-combobox
Combobox (including child components)
86.98 kB
28.084 kB
react-combobox
Dropdown (including child components)
85.321 kB
27.675 kB
react-components
react-components: Button, FluentProvider & webLightTheme
65.162 kB
17.952 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
210.103 kB
58.624 kB
react-components
react-components: FluentProvider & webLightTheme
36.395 kB
11.996 kB
react-datepicker-compat
DatePicker Compat
221.601 kB
59.012 kB
react-dialog
Dialog (including children components)
91.673 kB
27.385 kB
react-divider
Divider
17.477 kB
6.357 kB
react-field
Field
18.003 kB
6.931 kB
react-image
Image
11.55 kB
4.627 kB
react-infobutton
InfoButton
131.018 kB
40.224 kB
react-infobutton
InfoLabel
134.483 kB
41.291 kB
react-input
Input
24.219 kB
7.781 kB
react-label
Label
10.175 kB
4.243 kB
react-link
Link
12.375 kB
5.113 kB
react-menu
Menu (including children components)
132.175 kB
40.453 kB
react-menu
Menu (including selectable components)
134.939 kB
40.948 kB
react-overflow
hooks only
11.206 kB
4.266 kB
react-persona
Persona
54.621 kB
16.435 kB
react-popover
Popover
119.608 kB
36.799 kB
react-portal
Portal
11.82 kB
4.391 kB
react-portal-compat
PortalCompatProvider
6.473 kB
2.196 kB
react-positioning
usePositioning
24.249 kB
8.856 kB
react-progress
ProgressBar
13.927 kB
5.488 kB
react-provider
FluentProvider
18.115 kB
6.719 kB
react-radio
Radio
26.952 kB
8.608 kB
react-radio
RadioGroup
11.362 kB
4.753 kB
react-select
Select
24.915 kB
8.708 kB
react-slider
Slider
34.358 kB
11.107 kB
react-spinbutton
SpinButton
33.452 kB
10.296 kB
react-spinner
Spinner
21.363 kB
7.021 kB
react-switch
Switch
29.472 kB
9.226 kB
react-table
DataGrid
156.086 kB
42.712 kB
react-table
Table (Primitives only)
44.615 kB
12.472 kB
react-table
Table as DataGrid
131.742 kB
33.728 kB
react-table
Table (Selection only)
77.524 kB
19.166 kB
react-table
Table (Sort only)
76.854 kB
18.976 kB
react-tags
Tag
21.343 kB
7.822 kB
react-text
Text - Default
12.563 kB
4.972 kB
react-text
Text - Wrappers
15.713 kB
5.293 kB
react-textarea
Textarea
27.69 kB
9.125 kB
react-theme
Single theme token import
69 B
89 B
react-theme
Teams: all themes
31.987 kB
6.85 kB
react-theme
Teams: Light theme
18.121 kB
5.194 kB
react-tooltip
Tooltip
47.263 kB
16.585 kB
react-utilities
SSRProvider
180 B
159 B
🤖 This report was generated against 402599eb2172bf1cd13c003f5050e4d172ed9742

@fabricteam
Copy link
Collaborator

fabricteam commented May 31, 2023

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 631 597 5000
Button mount 297 303 5000
Field mount 1091 1036 5000
FluentProvider mount 633 657 5000
FluentProviderWithTheme mount 76 75 10
FluentProviderWithTheme virtual-rerender 62 65 10
FluentProviderWithTheme virtual-rerender-with-unmount 70 69 10
InfoButton mount 14 17 5000
MakeStyles mount 859 862 50000
Persona mount 1647 1560 5000
SpinButton mount 1316 1282 5000

@fabricteam
Copy link
Collaborator

fabricteam commented May 31, 2023

🕵 fluentuiv8 No visual regressions between this PR and main

@fabricteam
Copy link
Collaborator

fabricteam commented May 31, 2023

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
AccordionMinimalPerf.default 90 78 1.15:1
ListMinimalPerf.default 310 291 1.07:1
LoaderMinimalPerf.default 189 177 1.07:1
ReactionMinimalPerf.default 218 205 1.06:1
ButtonMinimalPerf.default 87 83 1.05:1
DropdownManyItemsPerf.default 392 374 1.05:1
GridMinimalPerf.default 199 190 1.05:1
InputMinimalPerf.default 548 523 1.05:1
SegmentMinimalPerf.default 204 194 1.05:1
IconMinimalPerf.default 388 369 1.05:1
AttachmentMinimalPerf.default 83 80 1.04:1
ChatDuplicateMessagesPerf.default 158 152 1.04:1
ImageMinimalPerf.default 226 218 1.04:1
TableMinimalPerf.default 234 226 1.04:1
TreeWith60ListItems.default 88 85 1.04:1
AlertMinimalPerf.default 158 153 1.03:1
FormMinimalPerf.default 222 215 1.03:1
SkeletonMinimalPerf.default 199 193 1.03:1
AttachmentSlotsPerf.default 641 629 1.02:1
CarouselMinimalPerf.default 252 247 1.02:1
EmbedMinimalPerf.default 1874 1839 1.02:1
ItemLayoutMinimalPerf.default 706 690 1.02:1
MenuButtonMinimalPerf.default 946 926 1.02:1
PopupMinimalPerf.default 356 349 1.02:1
ProviderMinimalPerf.default 201 197 1.02:1
RefMinimalPerf.default 106 104 1.02:1
StatusMinimalPerf.default 404 396 1.02:1
TableManyItemsPerf.default 1145 1118 1.02:1
TextAreaMinimalPerf.default 290 283 1.02:1
CustomToolbarPrototype.default 1483 1455 1.02:1
ButtonSlotsPerf.default 310 306 1.01:1
DatepickerMinimalPerf.default 3536 3501 1.01:1
HeaderMinimalPerf.default 207 204 1.01:1
ListWith60ListItems.default 368 366 1.01:1
RosterPerf.default 1533 1521 1.01:1
ProviderMergeThemesPerf.default 677 667 1.01:1
RadioGroupMinimalPerf.default 258 256 1.01:1
SplitButtonMinimalPerf.default 2286 2257 1.01:1
CardMinimalPerf.default 307 308 1:1
CheckboxMinimalPerf.default 1118 1120 1:1
LabelMinimalPerf.default 223 223 1:1
PortalMinimalPerf.default 86 86 1:1
TooltipMinimalPerf.default 1239 1238 1:1
TreeMinimalPerf.default 471 473 1:1
ButtonOverridesMissPerf.default 624 633 0.99:1
DropdownMinimalPerf.default 1436 1454 0.99:1
VideoMinimalPerf.default 426 432 0.99:1
AnimationMinimalPerf.default 287 294 0.98:1
DialogMinimalPerf.default 437 446 0.98:1
HeaderSlotsPerf.default 453 463 0.98:1
MenuMinimalPerf.default 495 504 0.98:1
SliderMinimalPerf.default 734 747 0.98:1
ToolbarMinimalPerf.default 520 533 0.98:1
ChatWithPopoverPerf.default 187 192 0.97:1
DividerMinimalPerf.default 208 214 0.97:1
ListNestedPerf.default 310 318 0.97:1
TextMinimalPerf.default 187 192 0.97:1
ChatMinimalPerf.default 414 430 0.96:1
FlexMinimalPerf.default 149 156 0.96:1
LayoutMinimalPerf.default 195 203 0.96:1
ListCommonPerf.default 366 381 0.96:1
BoxMinimalPerf.default 185 195 0.95:1
AvatarMinimalPerf.default 101 110 0.92:1

@fabricteam
Copy link
Collaborator

fabricteam commented May 31, 2023

🕵 FluentUI-v0 No visual regressions between this PR and main

@fabricteam
Copy link
Collaborator

fabricteam commented May 31, 2023

🕵 fluentuiv9 No visual regressions between this PR and main

@fabricteam
Copy link
Collaborator

fabricteam commented May 31, 2023

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 619 623 5000
Breadcrumb mount 1672 1662 1000
Checkbox mount 1666 1677 5000
CheckboxBase mount 1452 1466 5000
ChoiceGroup mount 2924 2847 5000
ComboBox mount 650 650 1000
CommandBar mount 6268 6229 1000
ContextualMenu mount 12207 12010 1000
DefaultButton mount 744 727 5000
DetailsRow mount 2230 2138 5000
DetailsRowFast mount 2195 2201 5000
DetailsRowNoStyles mount 2048 2048 5000
Dialog mount 2643 2620 1000
DocumentCardTitle mount 225 236 1000
Dropdown mount 1975 1946 5000
FocusTrapZone mount 1114 1122 5000
FocusZone mount 1047 1033 5000
GroupedList mount 41594 41668 2
GroupedList virtual-rerender 19895 19872 2
GroupedList virtual-rerender-with-unmount 50573 50615 2
GroupedListV2 mount 228 229 2
GroupedListV2 virtual-rerender 214 219 2
GroupedListV2 virtual-rerender-with-unmount 237 230 2
IconButton mount 1072 1089 5000
Label mount 329 338 5000
Layer mount 2751 2729 5000
Link mount 421 388 5000
MenuButton mount 947 947 5000
MessageBar mount 21507 21501 5000
Nav mount 1913 1941 1000
OverflowSet mount 774 748 5000
Panel mount 1771 1784 1000
Persona mount 746 760 1000
Pivot mount 888 858 1000
PrimaryButton mount 861 854 5000
Rating mount 4559 4648 5000
SearchBox mount 885 915 5000
Shimmer mount 1896 1878 5000
Slider mount 1315 1331 5000
SpinButton mount 2808 2897 5000
Spinner mount 396 399 5000
SplitButton mount 1843 1844 5000
Stack mount 420 397 5000
StackWithIntrinsicChildren mount 863 837 5000
StackWithTextChildren mount 2636 2626 5000
SwatchColorPicker mount 5987 6071 5000
TagPicker mount 1443 1450 5000
Text mount 380 378 5000
TextField mount 942 908 5000
ThemeProvider mount 824 836 5000
ThemeProvider virtual-rerender 593 586 5000
ThemeProvider virtual-rerender-with-unmount 1277 1272 5000
Toggle mount 600 601 5000
buttonNative mount 192 190 5000

@codesandbox-ci
Copy link

codesandbox-ci bot commented Jun 2, 2023

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 c8aa1e4:

Sandbox Source
@fluentui/react 8 starter Configuration
@fluentui/react-components 9 starter Configuration

@Hotell Hotell force-pushed the hotell/build/ts-4-7 branch 3 times, most recently from 6a82e97 to d6d6c60 Compare June 5, 2023 13:30
@size-auditor
Copy link

size-auditor bot commented Jun 5, 2023

Asset size changes

Project Bundle Baseline Size New Size Difference
office-ui-fabric-react fluentui-react-northstar-Dialog 117.07 kB 117.074 kB ExceedsBaseline     4 bytes
office-ui-fabric-react fluentui-react-northstar-Portal 59.825 kB 59.829 kB ExceedsBaseline     4 bytes
office-ui-fabric-react fluentui-react-northstar-Dropdown 203.794 kB 203.798 kB ExceedsBaseline     4 bytes

ExceedsTolerance Over Tolerance (1024 B) ExceedsBaseline Over Baseline BelowBaseline Below Baseline New New Deleted  Removed 1 kB = 1000 B

Baseline commit: 402599eb2172bf1cd13c003f5050e4d172ed9742 (build)

@Hotell Hotell force-pushed the hotell/build/ts-4-7 branch from f117e8e to a1d570c Compare June 7, 2023 11:19
@Hotell Hotell marked this pull request as ready for review June 7, 2023 12:10
@Hotell Hotell requested review from a team and GeoffCoxMSFT as code owners June 7, 2023 12:10
Hotell added 14 commits June 16, 2023 11:07
… fixing issues on how to generate optional/undefined
…ined API signatures introduce in ts 4.4 but api-extractor was not properly reflecting it
…/undefined API signatures introduce in ts 4.4 but api-extractor was not properly reflecting it
…ional/undefined API signatures introduce in ts 4.4 but api-extractor was not properly reflecting it
…ause TS 4.7 breaking change in declaration emit api - Optional parameter does not on include undefined
@Hotell Hotell force-pushed the hotell/build/ts-4-7 branch from d202ff5 to c8aa1e4 Compare June 16, 2023 09:07
@Hotell Hotell merged commit cf6b94b into microsoft:master Jun 16, 2023
@Hotell Hotell deleted the hotell/build/ts-4-7 branch June 16, 2023 10:49
@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Jun 20, 2023
* master: (32 commits)
  applying package updates
  feat(react-tags): add styles for size (microsoft#28229)
  docs(react-dialog): update DialogTriggerOutsideDialog to include focus behavior (microsoft#28176)
  bugfix: Ensures dialog actions stretches on breakpoints (microsoft#28258)
  applying package updates
  fix: TableHeaderCell should not render button when not sortable (microsoft#28097)
  fix(react-file-type-icons): Map mhtml extension to html icon (microsoft#28112)
  Fix overlapping axis labels on smaller viewports (microsoft#28239)
  useArrowNavigationGroup grid-linear axis (microsoft#28253)
  applying package updates
  fix: Alert example missing aria-label for icon (microsoft#28234)
  Overflow divider fix (microsoft#28011)
  feat(tools): implement `cypress-component-configuration` generator (microsoft#28115)
  chore: migrate to TS 4.7 (microsoft#28067)
  fix(scripts-tasks): make generate-api work in deterministic way (microsoft#28215)
  feat(react-tags): add overflow story (microsoft#28012)
  Structure and slots for SearchBox, using Input as a slot (microsoft#28090)
  feat(tokens): Add/update theme tokens (microsoft#27791)
  feat(react-tags): add a11y role and best practices guide (microsoft#28075)
  fix: Toast intent should always be present in the context (microsoft#28226)
  ...
@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

@Hotell Hotell mentioned this pull request Jun 23, 2023
28 tasks
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.

9 participants