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: upgrade typescript to 5.5.2 #33498

Draft
wants to merge 10 commits into
base: master
Choose a base branch
from

Conversation

mainframev
Copy link
Contributor

@mainframev mainframev commented Dec 20, 2024

  • Updates ts to 5.5.2
  • Bumped api-extractor and api-extractor model to the latest (most changes caused by this)
  • Added new @import JSDoc tags.

Release notes

https://www.typescriptlang.org/docs/handbook/release-notes/typescript-5-4.html
https://www.typescriptlang.org/docs/handbook/release-notes/typescript-5-5.html

Related to configDir template var: the initial assumption, that it will help to get rid of explicit typeRoots for tsconfig.cy.json files appeared to be wrong. It works for scenarios, where derived config (packages//tsconfig.json) has to have paths related to final directory, before it was needed to re-specify the config property for derived config.

Previous Behavior

5.3.3

New Behavior

5.5.2

Related Issue(s)

Before (5.3.3) After (5.5.2)
12m 20s 12m 37s / 𝚫 2.3% 🐢 SLOWER

(nx run-many -t build type-check --skip-nx-cache)

@@ -69,8 +69,8 @@
"@griffel/webpack-loader": "2.2.10",
Copy link
Collaborator

@fabricteam fabricteam Dec 20, 2024

Choose a reason for hiding this comment

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

🕵🏾‍♀️ visual regressions to review in the fluentuiv9 Visual Regression Report

Avatar Converged 2 screenshots
Image Name Diff(in Pixels) Image Type
Avatar Converged.badgeMask.chromium.png 8 Changed
Avatar Converged.Badge Mask RTL.chromium.png 3 Changed
Drawer 2 screenshots
Image Name Diff(in Pixels) Image Type
Drawer.Full Overlay Dark Mode.chromium.png 2825 Changed
Drawer.Full Overlay RTL.chromium.png 3278 Changed

@fabricteam
Copy link
Collaborator

fabricteam commented Dec 20, 2024

🕵 FluentUIV0 No visual regressions between this PR and main

@@ -85,7 +91,9 @@ export function classNamesFunction<TStyleProps extends {}, TStyleSet extends ISt
typeof styleFunctionOrObject === 'function' &&
(styleFunctionOrObject as StyleFunction<TStyleProps, TStyleSet>).__noStyleOverride__
) {
return styleFunctionOrObject(styleProps) as IProcessedStyleSet<TStyleSet>;
return (styleFunctionOrObject as IStyleFunction<TStyleProps, TStyleSet>)(
Copy link
Contributor Author

@mainframev mainframev Dec 20, 2024

Choose a reason for hiding this comment

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

had to add additional casting, throwing after upgrade with this TS2349:

Screenshot 2024-12-20 at 17 08 41

state.components?.[slotName] === undefined || typeof state.components[slotName] === 'string'
? asProp || state.components?.[slotName] || 'div'
: state.components[slotName]
) as React.ElementType<R[K]>;
: state.components[slotName];
Copy link
Contributor Author

Choose a reason for hiding this comment

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

after upgrade throws TS2590: Expression produces a union type that is too complex to represent

@mainframev mainframev force-pushed the chore/ts-update-5-5 branch 2 times, most recently from 29cadea to ea576b0 Compare December 20, 2024 17:12
@@ -31,6 +31,7 @@
"tslib": "^2.1.0",
"react": "17.0.2",
"ts-morph": "^10.0.1",
"typescript": "5.3.3",
Copy link
Contributor Author

@mainframev mainframev Dec 20, 2024

Choose a reason for hiding this comment

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

had to lock ts to 5.3.3 for this package, as ts-morph has issue with 5.4: dsherret/ts-morph#1513. Fixed in v22, current is 10 😢

@@ -0,0 +1,7 @@
{
Copy link
Collaborator

@fabricteam fabricteam Dec 20, 2024

Choose a reason for hiding this comment

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

🕵🏾‍♀️ visual regressions to review in the fluentuiv8 Visual Regression Report

Callout 5 screenshots
Image Name Diff(in Pixels) Image Type
Callout.Left top edge.chromium.png 1949 Changed
Callout.Bottom auto edge.chromium.png 2309 Changed
Callout.Bottom Right Edge RTL.chromium.png 1593 Changed
Callout.Bottom Left Edge RTL.chromium.png 2178 Changed
Callout.No beak.chromium.png 2306 Changed

Copy link

Pull request demo site: URL

Copy link

github-actions bot commented Dec 20, 2024

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react
ActivityItem
71.236 kB
23.357 kB
71.246 kB
23.361 kB
10 B
4 B
react
Announced
38.489 kB
13.296 kB
38.499 kB
13.3 kB
10 B
4 B
react
Breadcrumb
202.318 kB
60.388 kB
202.328 kB
60.391 kB
10 B
3 B
react
Button
195.791 kB
56.627 kB
195.801 kB
56.628 kB
10 B
1 B
react
ButtonGrid
180.722 kB
54.627 kB
180.732 kB
54.63 kB
10 B
3 B
react
Calendar
121.875 kB
37.024 kB
121.885 kB
37.026 kB
10 B
2 B
react
Callout
84.323 kB
27.64 kB
84.333 kB
27.643 kB
10 B
3 B
react
Check
53.204 kB
17.848 kB
53.214 kB
17.853 kB
10 B
5 B
react
Checkbox
59.985 kB
19.903 kB
59.995 kB
19.904 kB
10 B
1 B
react
ChoiceGroup
65.494 kB
21.489 kB
65.504 kB
21.492 kB
10 B
3 B
react
ChoiceGroupOption
58.767 kB
19.362 kB
58.777 kB
19.364 kB
10 B
2 B
react
Coachmark
93.144 kB
29.42 kB
93.154 kB
29.425 kB
10 B
5 B
react
ColorPicker
135.292 kB
42.21 kB
135.302 kB
42.211 kB
10 B
1 B
react
ComboBox
252.203 kB
72.291 kB
252.213 kB
72.295 kB
10 B
4 B
react
CommandBar
203.359 kB
60.141 kB
203.369 kB
60.143 kB
10 B
2 B
react
ContextualMenu
155.243 kB
48.202 kB
155.253 kB
48.205 kB
10 B
3 B
react
DatePicker
184.295 kB
56.15 kB
184.305 kB
56.151 kB
10 B
1 B
react
DetailsList
229.909 kB
65.781 kB
229.919 kB
65.787 kB
10 B
6 B
react
Dialog
211.717 kB
63.165 kB
211.727 kB
63.168 kB
10 B
3 B
react
Divider
19.603 kB
6.845 kB
19.613 kB
6.848 kB
10 B
3 B
react
DocumentCard
217.336 kB
64.44 kB
217.346 kB
64.442 kB
10 B
2 B
react
Dropdown
234.251 kB
68.619 kB
234.261 kB
68.623 kB
10 B
4 B
react
ExtendedPicker
96.873 kB
27.893 kB
96.873 kB
27.892 kB

-1 B
react
Fabric
41.745 kB
14.366 kB
41.755 kB
14.369 kB
10 B
3 B
react
Facepile
210.893 kB
63.167 kB
210.903 kB
63.169 kB
10 B
2 B
react
FloatingPicker
242.366 kB
69.001 kB
242.376 kB
69.005 kB
10 B
4 B
react
Grid
180.722 kB
54.627 kB
180.732 kB
54.63 kB
10 B
3 B
react
GroupedList
135.07 kB
40.7 kB
135.08 kB
40.705 kB
10 B
5 B
react
GroupedListV2
122.687 kB
37.788 kB
122.697 kB
37.793 kB
10 B
5 B
react
HoverCard
97.16 kB
30.787 kB
97.17 kB
30.792 kB
10 B
5 B
react
Icon
51.885 kB
17.272 kB
51.895 kB
17.273 kB
10 B
1 B
react
Image
46.904 kB
15.707 kB
46.914 kB
15.711 kB
10 B
4 B
react
Keytip
81.693 kB
26.766 kB
81.703 kB
26.771 kB
10 B
5 B
react
KeytipLayer
103.474 kB
32.015 kB
103.484 kB
32.02 kB
10 B
5 B
react
Keytips
106.238 kB
33.013 kB
106.248 kB
33.017 kB
10 B
4 B
react
Label
38.347 kB
13.257 kB
38.357 kB
13.261 kB
10 B
4 B
react
Layer
48.099 kB
16.367 kB
48.109 kB
16.369 kB
10 B
2 B
react
Link
39.682 kB
13.67 kB
39.692 kB
13.673 kB
10 B
3 B
react
MarqueeSelection
74.517 kB
22.433 kB
74.527 kB
22.439 kB
10 B
6 B
react
MessageBar
190.869 kB
57.103 kB
190.879 kB
57.105 kB
10 B
2 B
react
Modal
93.738 kB
30.271 kB
93.748 kB
30.273 kB
10 B
2 B
react
Nav
188.306 kB
56.485 kB
188.316 kB
56.49 kB
10 B
5 B
react
OverflowSet
33.385 kB
11.314 kB
33.395 kB
11.318 kB
10 B
4 B
react
Overlay
40.902 kB
14.095 kB
40.912 kB
14.098 kB
10 B
3 B
react
Panel
201.364 kB
59.98 kB
201.374 kB
59.985 kB
10 B
5 B
react
Persona
114.948 kB
36.532 kB
114.958 kB
36.534 kB
10 B
2 B
react
PersonaCoin
114.948 kB
36.532 kB
114.958 kB
36.534 kB
10 B
2 B
react
PersonaPresence
58.074 kB
19.384 kB
58.084 kB
19.386 kB
10 B
2 B
react
Pickers
298.98 kB
83.625 kB
298.99 kB
83.631 kB
10 B
6 B
react
Pivot
189.226 kB
57.267 kB
189.236 kB
57.269 kB
10 B
2 B
react
PositioningContainer
73.85 kB
23.765 kB
73.86 kB
23.771 kB
10 B
6 B
react
ProgressIndicator
39.494 kB
13.55 kB
39.504 kB
13.554 kB
10 B
4 B
react
Rating
82.12 kB
26.127 kB
82.13 kB
26.132 kB
10 B
5 B
react
Fluent UI React (entire library)
1.018 MB
282.766 kB
1.018 MB
282.771 kB
10 B
5 B
react
ScrollablePane
55.557 kB
17.728 kB
55.567 kB
17.732 kB
10 B
4 B
react
SearchBox
189.118 kB
56.68 kB
189.128 kB
56.683 kB
10 B
3 B
react
SelectedItemsList
232.878 kB
67.891 kB
232.888 kB
67.897 kB
10 B
6 B
react
Separator
35.384 kB
12.146 kB
35.394 kB
12.15 kB
10 B
4 B
react
Shimmer
49.259 kB
16.268 kB
49.269 kB
16.271 kB
10 B
3 B
react
ShimmeredDetailsList
240.691 kB
68.532 kB
240.701 kB
68.536 kB
10 B
4 B
react
Slider
57.651 kB
19.217 kB
57.661 kB
19.221 kB
10 B
4 B
react
SpinButton
192.821 kB
57.775 kB
192.831 kB
57.78 kB
10 B
5 B
react
Spinner
41.775 kB
14.48 kB
41.785 kB
14.483 kB
10 B
3 B
react
Styling
46.033 kB
15.135 kB
46.043 kB
15.14 kB
10 B
5 B
react
SwatchColorPicker
191.136 kB
58.151 kB
191.146 kB
58.154 kB
10 B
3 B
react
TeachingBubble
206.116 kB
61.054 kB
206.126 kB
61.055 kB
10 B
1 B
react
TextField
80.79 kB
25.315 kB
80.8 kB
25.32 kB
10 B
5 B
react
TimePicker
242.014 kB
70.049 kB
242.024 kB
70.053 kB
10 B
4 B
react
Toggle
46.225 kB
15.986 kB
46.235 kB
15.987 kB
10 B
1 B
react
Tooltip
87.437 kB
28.26 kB
87.447 kB
28.262 kB
10 B
2 B
react
Utilities
82.931 kB
25.148 kB
82.941 kB
25.15 kB
10 B
2 B
react
WeeklyDayPicker
102.017 kB
31.834 kB
102.027 kB
31.838 kB
10 B
4 B
react-components
react-components: entire library
1.158 MB
289.328 kB
1.158 MB
289.331 kB
4 B
3 B
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
keyboard-keys
Multiple keyCodes
50 B
70 B
keyboard-keys
Multiple keys
87 B
94 B
keyboard-keys
Single key
44 B
64 B
keyboard-keys
Single keyCode
39 B
59 B
priority-overflow
createOverflowManager
4.457 kB
1.856 kB
react
Autofill
15.42 kB
4.766 kB
react
Color
7.789 kB
3.127 kB
react
DateTimeUtilities
5.244 kB
1.849 kB
react
DragDrop
8.343 kB
2.724 kB
react
DraggableZone
34.303 kB
11.511 kB
react
FocusTrapZone
17.023 kB
5.911 kB
react
FocusZone
55.159 kB
17.492 kB
react
Icons
66.361 kB
24.397 kB
react
KeytipData
14.032 kB
4.582 kB
react
List
39.371 kB
12.463 kB
react
Popup
12.294 kB
4.195 kB
react
Positioning
22.807 kB
7.701 kB
react
ResizeGroup
13.338 kB
4.377 kB
react
ResponsiveMode
8.13 kB
2.966 kB
react
SelectableOption
724 B
413 B
react
Selection
42.444 kB
12.278 kB
react
Stack
41.734 kB
14.268 kB
react
Sticky
32.599 kB
10.504 kB
react
Text
36.908 kB
12.822 kB
react
Theme
43.493 kB
14.173 kB
react
ThemeGenerator
12.392 kB
4.126 kB
react
Viewport
23.888 kB
7.656 kB
react
WindowProvider
1.059 kB
541 B
react-accordion
Accordion (including children components)
107.08 kB
32.786 kB
react-aria
ARIA - Default
237 B
181 B
react-avatar
Avatar
49.303 kB
15.815 kB
react-avatar
AvatarGroup
20.106 kB
7.968 kB
react-avatar
AvatarGroupItem
63.447 kB
20.034 kB
react-badge
Badge
25.954 kB
8.595 kB
react-badge
CounterBadge
26.733 kB
8.872 kB
react-badge
PresenceBadge
25.719 kB
9.457 kB
react-breadcrumb
@fluentui/react-breadcrumb - package
114.291 kB
31.695 kB
react-button
Button
37.174 kB
10.803 kB
react-button
CompoundButton
43.588 kB
12.101 kB
react-button
MenuButton
41.989 kB
12.144 kB
react-button
SplitButton
50.006 kB
13.716 kB
react-button
ToggleButton
53.107 kB
12.561 kB
react-calendar-compat
Calendar Compat
150.095 kB
40.026 kB
react-card
Card - All
101.77 kB
28.772 kB
react-card
Card
94.544 kB
26.951 kB
react-card
CardFooter
14.355 kB
5.79 kB
react-card
CardHeader
16.888 kB
6.669 kB
react-card
CardPreview
14.42 kB
5.922 kB
react-checkbox
Checkbox
35.118 kB
12.077 kB
react-color-picker-preview
ColorArea
50.253 kB
17.547 kB
react-color-picker-preview
ColorPicker
32.22 kB
11.925 kB
react-color-picker-preview
ColorSlider
41.493 kB
15.381 kB
react-combobox
Combobox (including child components)
104.524 kB
34.238 kB
react-combobox
Dropdown (including child components)
105.148 kB
34.167 kB
react-components
react-components: Button, FluentProvider & webLightTheme
69.21 kB
20.174 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
221.695 kB
64.135 kB
react-components
react-components: FluentProvider & webLightTheme
44.447 kB
14.59 kB
react-datepicker-compat
DatePicker Compat
224.31 kB
63.471 kB
react-dialog
Dialog (including children components)
100.417 kB
30.097 kB
react-divider
Divider
21.328 kB
7.953 kB
react-field
Field
23.399 kB
8.898 kB
react-image
Image
15.36 kB
6.236 kB
react-input
Input
28.014 kB
9.444 kB
react-jsx-runtime
Classic Pragma
1.057 kB
530 B
react-jsx-runtime
JSX Dev Runtime
3.771 kB
1.643 kB
react-jsx-runtime
JSX Runtime
4.367 kB
1.874 kB
react-label
Label
14.671 kB
5.99 kB
react-link
Link
17.326 kB
7.032 kB
react-list-preview
List
89.164 kB
26.599 kB
react-list-preview
ListItem
112.731 kB
33.432 kB
react-menu
Menu (including children components)
153.096 kB
46.21 kB
react-menu
Menu (including selectable components)
155.777 kB
46.693 kB
react-message-bar
MessageBar (all components)
24.825 kB
9.267 kB
react-motion
@fluentui/react-motion - createMotionComponent()
4.434 kB
1.935 kB
react-motion
@fluentui/react-motion - createPresenceComponent()
5.165 kB
2.263 kB
react-motion
@fluentui/react-motion - PresenceGroup
1.714 kB
819 B
react-northstar
Accordion
85.38 kB
26.519 kB
react-northstar
Alert
87.435 kB
26.905 kB
react-northstar
Animation
55.331 kB
17.83 kB
react-northstar
Attachment
86.829 kB
26.7 kB
react-northstar
Avatar
80.264 kB
24.633 kB
react-northstar
Box
75.233 kB
23.813 kB
react-northstar
Breadcrumb
79.908 kB
24.717 kB
react-northstar
Button
83.145 kB
25.952 kB
react-northstar
Card
82.693 kB
25.037 kB
react-northstar
Carousel
105.17 kB
31.873 kB
react-northstar
Chat
154.072 kB
46.878 kB
react-northstar
Checkbox
79.792 kB
25.08 kB
react-northstar
Datepicker
186.639 kB
56.99 kB
react-northstar
Debug
8.801 kB
3.594 kB
react-northstar
Design
36.589 kB
12.067 kB
react-northstar
Dialog
112.046 kB
33.622 kB
react-northstar
Divider
76.604 kB
24.135 kB
react-northstar
Dropdown
198.196 kB
60.223 kB
react-northstar
Embed
81.465 kB
25.425 kB
react-northstar
Flex
47.716 kB
15.443 kB
react-northstar
Form
92.515 kB
28.888 kB
react-northstar
Grid
70.569 kB
22.283 kB
react-northstar
Header
74.741 kB
23.465 kB
react-northstar
Image
73.576 kB
23.333 kB
react-northstar
Input
88.334 kB
27.781 kB
react-northstar
ItemLayout
78.213 kB
24.457 kB
react-northstar
Label
77.905 kB
24.414 kB
react-northstar
Layout
75.378 kB
23.803 kB
react-northstar
List
88.475 kB
27.555 kB
react-northstar
Loader
78.601 kB
24.733 kB
react-northstar
Menu
128.587 kB
40.738 kB
react-northstar
MenuButton
162.993 kB
49.614 kB
react-northstar
Pill
83.707 kB
26.069 kB
react-northstar
Popup
135.304 kB
42.259 kB
react-northstar
Portal
58.326 kB
18.851 kB
react-northstar
Provider
93.129 kB
29.627 kB
react-northstar
RadioGroup
83.27 kB
26.053 kB
react-northstar
Reaction
77.265 kB
24.128 kB
react-northstar
Segment
76.194 kB
23.896 kB
react-northstar
Skeleton
77.75 kB
24.205 kB
react-northstar
Slider
84.258 kB
26.757 kB
react-northstar
SplitButton
178.231 kB
53.438 kB
react-northstar
Status
76.257 kB
24.054 kB
react-northstar
SvgIcon
36.811 kB
11.746 kB
react-northstar
Table
80.784 kB
25.157 kB
react-northstar
Text
74.099 kB
23.511 kB
react-northstar
TextArea
74.233 kB
23.496 kB
react-northstar
Toolbar
175.042 kB
52.844 kB
react-northstar
Tooltip
109.961 kB
35.238 kB
react-northstar
Tree
87.84 kB
27.223 kB
react-northstar
Video
75.399 kB
23.796 kB
react-overflow
hooks only
12.808 kB
4.819 kB
react-persona
Persona
56.194 kB
17.695 kB
react-popover
Popover
129.339 kB
40.412 kB
react-portal
Portal
14.563 kB
5.118 kB
react-portal-compat
PortalCompatProvider
8.39 kB
2.64 kB
react-positioning
usePositioning
27.201 kB
9.746 kB
react-progress
ProgressBar
17.084 kB
6.891 kB
react-provider
FluentProvider
24.623 kB
8.893 kB
react-radio
Radio
32.672 kB
10.343 kB
react-radio
RadioGroup
15.762 kB
6.423 kB
react-select
Select
27.732 kB
10.124 kB
react-slider
Slider
37.52 kB
12.621 kB
react-spinbutton
SpinButton
34.839 kB
11.63 kB
react-spinner
Spinner
25.245 kB
8.539 kB
react-swatch-picker
@fluentui/react-swatch-picker - package
105.086 kB
30.516 kB
react-switch
Switch
35.319 kB
11.314 kB
react-table
DataGrid
161.034 kB
45.71 kB
react-table
Table (Primitives only)
42.666 kB
13.854 kB
react-table
Table as DataGrid
131.869 kB
36.57 kB
react-table
Table (Selection only)
70.536 kB
19.999 kB
react-table
Table (Sort only)
69.179 kB
19.61 kB
react-tag-picker
@fluentui/react-tag-picker - package
184.228 kB
55.462 kB
react-tags
InteractionTag
15.199 kB
6.157 kB
react-tags
Tag
29.072 kB
9.55 kB
react-tags
TagGroup
82.719 kB
24.524 kB
react-teaching-popover
TeachingPopover
90.755 kB
27.64 kB
react-text
Text - Default
17.061 kB
6.723 kB
react-text
Text - Wrappers
20.242 kB
7.048 kB
react-textarea
Textarea
26.572 kB
9.755 kB
react-theme
Single theme token import
69 B
89 B
react-theme
Teams: all themes
35.835 kB
7.512 kB
react-theme
Teams: Light theme
19.794 kB
5.602 kB
react-timepicker-compat
TimePicker
107.513 kB
35.791 kB
react-toast
Toast (including Toaster)
101.23 kB
30.429 kB
react-tooltip
Tooltip
56.196 kB
19.706 kB
react-tree
FlatTree
145.462 kB
41.771 kB
react-tree
PersonaFlatTree
146.15 kB
41.881 kB
react-tree
PersonaTree
142.381 kB
40.703 kB
react-tree
Tree
141.693 kB
40.602 kB
react-utilities
SSRProvider
180 B
160 B
🤖 This report was generated against e09d638cf76f55d4c6b16ba9ee6ea40e457869ec

@@ -0,0 +1,7 @@
{
Copy link
Collaborator

@fabricteam fabricteam Dec 23, 2024

Choose a reason for hiding this comment

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

🕵🏾‍♀️ visual regressions to review in the fluentui-web-components-v3 Visual Regression Report

Avatar 1 screenshots
Image Name Diff(in Pixels) Image Type
Avatar.Image.chromium.png 248 Changed

@github-actions github-actions bot added the CI label Dec 23, 2024
@mainframev mainframev force-pushed the chore/ts-update-5-5 branch 2 times, most recently from dbda8d7 to 9f52366 Compare December 23, 2024 22:23
@github-actions github-actions bot removed the CI label Dec 23, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants