fluentui
fluentui copied to clipboard
microsoft
chore: migrate to ts 5.2.2
Release notes:
- 5.1: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-5-1.html
- 5.2: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-5-2.html
What's addressed:
- Explicit type roots. Type roots are no longer making upward walking.
- Module and ModuleResolution since 5.2 should match recent node settigns
Previous Behavior
New Behavior
Related Issue(s)
- Implements #32402
🕵 fluentui-web-components-v3 No visual regressions between this PR and main
Perf Analysis (@fluentui/react-components)
No significant results to display.
All results
| Scenario | Render type | Master Ticks | PR Ticks | Iterations | Status |
|---|---|---|---|---|---|
| Avatar | mount | 625 | 636 | 5000 | |
| Button | mount | 313 | 301 | 5000 | |
| Field | mount | 1122 | 1135 | 5000 | |
| FluentProvider | mount | 710 | 706 | 5000 | |
| FluentProviderWithTheme | mount | 83 | 91 | 10 | |
| FluentProviderWithTheme | virtual-rerender | 37 | 35 | 10 | |
| FluentProviderWithTheme | virtual-rerender-with-unmount | 84 | 86 | 10 | |
| MakeStyles | mount | 887 | 874 | 50000 | |
| Persona | mount | 1798 | 1713 | 5000 | |
| SpinButton | mount | 1344 | 1442 | 5000 | |
| SwatchPicker | mount | 1698 | 1665 | 5000 |
📊 Bundle size report
| Package & Exports | Baseline (minified/GZIP) | PR | Change |
|---|---|---|---|
| react Announced |
38.493 kB13.297 kB |
38.489 kB13.296 kB |
-4 B -1 B |
| react Autofill |
15.428 kB4.768 kB |
15.42 kB4.766 kB |
-8 B -2 B |
| react Breadcrumb |
202.406 kB60.482 kB |
202.308 kB60.391 kB |
-98 B -91 B |
| react Button |
195.858 kB56.697 kB |
195.781 kB56.634 kB |
-77 B -63 B |
| react ButtonGrid |
180.792 kB54.683 kB |
180.729 kB54.641 kB |
-63 B -42 B |
| react Calendar |
121.905 kB37.046 kB |
121.882 kB37.032 kB |
-23 B -14 B |
| react ColorPicker |
135.359 kB42.257 kB |
135.292 kB42.21 kB |
-67 B -47 B |
| react ComboBox |
252.295 kB72.392 kB |
252.193 kB72.294 kB |
-102 B -98 B |
| react CommandBar |
203.447 kB60.224 kB |
203.349 kB60.142 kB |
-98 B -82 B |
| react ContextualMenu |
155.273 kB48.228 kB |
155.25 kB48.215 kB |
-23 B -13 B |
| react DatePicker |
184.333 kB56.194 kB |
184.284 kB56.154 kB |
-49 B -40 B |
| react DetailsList |
230.107 kB65.952 kB |
229.913 kB65.787 kB |
-194 B -165 B |
| react Dialog |
211.784 kB63.237 kB |
211.707 kB63.166 kB |
-77 B -71 B |
| react DocumentCard |
217.399 kB64.512 kB |
217.326 kB64.436 kB |
-73 B -76 B |
| react DraggableZone |
34.305 kB11.509 kB |
34.303 kB11.511 kB |
-2 B 2 B |
| react Dropdown |
234.345 kB68.729 kB |
234.241 kB68.617 kB |
-104 B -112 B |
| react ExtendedPicker |
96.924 kB27.92 kB |
96.873 kB27.893 kB |
-51 B -27 B |
| react Facepile |
210.998 kB63.254 kB |
210.9 kB63.183 kB |
-98 B -71 B |
| react FloatingPicker |
242.44 kB69.088 kB |
242.356 kB69.005 kB |
-84 B -83 B |
| react FocusZone |
55.182 kB17.503 kB |
55.159 kB17.492 kB |
-23 B -11 B |
| react Grid |
180.792 kB54.683 kB |
180.729 kB54.641 kB |
-63 B -42 B |
| react GroupedList |
135.178 kB40.798 kB |
135.074 kB40.705 kB |
-104 B -93 B |
| react GroupedListV2 |
122.767 kB37.881 kB |
122.691 kB37.794 kB |
-76 B -87 B |
| react HoverCard |
97.179 kB30.82 kB |
97.167 kB30.794 kB |
-12 B -26 B |
| react KeytipLayer |
103.478 kB32.017 kB |
103.474 kB32.015 kB |
-4 B -2 B |
| react Keytips |
106.25 kB33.023 kB |
106.246 kB33.023 kB |
-4 B |
| react List |
39.4 kB12.481 kB |
39.371 kB12.463 kB |
-29 B -18 B |
| react MarqueeSelection |
74.541 kB22.44 kB |
74.517 kB22.433 kB |
-24 B -7 B |
| react MessageBar |
190.922 kB57.155 kB |
190.859 kB57.107 kB |
-63 B -48 B |
| react Modal |
93.747 kB30.278 kB |
93.745 kB30.279 kB |
-2 B 1 B |
| react Nav |
188.398 kB56.575 kB |
188.313 kB56.502 kB |
-85 B -73 B |
| react Panel |
201.456 kB60.076 kB |
201.354 kB59.981 kB |
-102 B -95 B |
| react Persona |
114.967 kB36.546 kB |
114.948 kB36.532 kB |
-19 B -14 B |
| react PersonaCoin |
114.967 kB36.546 kB |
114.948 kB36.532 kB |
-19 B -14 B |
| react Pickers |
294.462 kB82.501 kB |
294.328 kB82.365 kB |
-134 B -136 B |
| react Pivot |
189.29 kB57.329 kB |
189.227 kB57.281 kB |
-63 B -48 B |
| react ProgressIndicator |
39.504 kB13.554 kB |
39.494 kB13.55 kB |
-10 B -4 B |
| react Rating |
82.143 kB26.144 kB |
82.12 kB26.127 kB |
-23 B -17 B |
| react Fluent UI React (entire library) |
1.015 MB282.181 kB |
1.014 MB281.695 kB |
-542 B -486 B |
| react ScrollablePane |
55.563 kB17.734 kB |
55.557 kB17.728 kB |
-6 B -6 B |
| react SearchBox |
189.171 kB56.737 kB |
189.108 kB56.682 kB |
-63 B -55 B |
| react SelectedItemsList |
232.95 kB67.977 kB |
232.868 kB67.895 kB |
-82 B -82 B |
| react Selection |
42.464 kB12.301 kB |
42.444 kB12.278 kB |
-20 B -23 B |
| react ShimmeredDetailsList |
240.889 kB68.7 kB |
240.695 kB68.536 kB |
-194 B -164 B |
| react SpinButton |
192.874 kB57.835 kB |
192.811 kB57.779 kB |
-63 B -56 B |
| react Spinner |
41.777 kB14.478 kB |
41.775 kB14.48 kB |
-2 B 2 B |
| react Sticky |
32.613 kB10.509 kB |
32.599 kB10.504 kB |
-14 B -5 B |
| react SwatchColorPicker |
191.177 kB58.196 kB |
191.114 kB58.149 kB |
-63 B -47 B |
| react TeachingBubble |
206.173 kB61.106 kB |
206.106 kB61.06 kB |
-67 B -46 B |
| react TextField |
80.816 kB25.332 kB |
80.79 kB25.315 kB |
-26 B -17 B |
| react TimePicker |
242.077 kB70.14 kB |
242.004 kB70.053 kB |
-73 B -87 B |
| react Tooltip |
87.456 kB28.268 kB |
87.437 kB28.26 kB |
-19 B -8 B |
| react WeeklyDayPicker |
102.058 kB31.861 kB |
102.025 kB31.846 kB |
-33 B -15 B |
Unchanged fixtures
| Package & Exports | Size (minified/GZIP) |
|---|---|
| global-context createContext |
510 B328 B |
| global-context createContextSelector |
537 B339 B |
| keyboard-key keyboard-key package |
3.746 kB1.928 kB |
| priority-overflow createOverflowManager |
4.457 kB1.856 kB |
| react ActivityItem |
71.236 kB23.357 kB |
| react Callout |
84.33 kB27.648 kB |
| react Check |
53.204 kB17.848 kB |
| react Checkbox |
59.985 kB19.903 kB |
| react ChoiceGroup |
65.494 kB21.489 kB |
| react ChoiceGroupOption |
58.767 kB19.362 kB |
| react Coachmark |
93.151 kB29.428 kB |
| react Color |
7.789 kB3.127 kB |
| react DateTimeUtilities |
5.244 kB1.849 kB |
| react Divider |
19.603 kB6.845 kB |
| react DragDrop |
8.343 kB2.724 kB |
| react Fabric |
41.745 kB14.366 kB |
| react FocusTrapZone |
17.03 kB5.924 kB |
| react Icon |
51.885 kB17.272 kB |
| react Icons |
66.361 kB24.397 kB |
| react Image |
46.904 kB15.707 kB |
| react Keytip |
81.693 kB26.766 kB |
| react KeytipData |
14.039 kB4.588 kB |
| react Label |
38.347 kB13.257 kB |
| react Layer |
48.099 kB16.367 kB |
| react Link |
39.682 kB13.67 kB |
| react OverflowSet |
33.393 kB11.329 kB |
| react Overlay |
40.902 kB14.095 kB |
| react PersonaPresence |
58.074 kB19.384 kB |
| react Popup |
12.294 kB4.195 kB |
| react Positioning |
22.807 kB7.701 kB |
| react PositioningContainer |
73.85 kB23.765 kB |
| react ResizeGroup |
13.338 kB4.377 kB |
| react ResponsiveMode |
8.13 kB2.966 kB |
| react SelectableOption |
724 B413 B |
| react Separator |
35.384 kB12.146 kB |
| react Shimmer |
49.259 kB16.268 kB |
| react Slider |
57.651 kB19.217 kB |
| react Stack |
41.734 kB14.268 kB |
| react Styling |
46.033 kB15.135 kB |
| react Text |
36.908 kB12.822 kB |
| react Theme |
43.501 kB14.183 kB |
| react ThemeGenerator |
12.392 kB4.126 kB |
| react Toggle |
46.225 kB15.986 kB |
| react Utilities |
82.931 kB25.148 kB |
| react Viewport |
23.888 kB7.656 kB |
| react WindowProvider |
1.059 kB541 B |
| react-accordion Accordion (including children components) |
106.728 kB32.718 kB |
| react-avatar Avatar |
49.303 kB15.815 kB |
| react-avatar AvatarGroup |
20.106 kB7.968 kB |
| react-avatar AvatarGroupItem |
63.447 kB20.034 kB |
| react-badge Badge |
25.954 kB8.595 kB |
| react-badge CounterBadge |
26.733 kB8.872 kB |
| react-badge PresenceBadge |
25.719 kB9.457 kB |
| react-breadcrumb @fluentui/react-breadcrumb - package |
114.291 kB31.695 kB |
| react-button Button |
37.174 kB10.803 kB |
| react-button CompoundButton |
43.588 kB12.101 kB |
| react-button MenuButton |
41.989 kB12.144 kB |
| react-button SplitButton |
50.006 kB13.716 kB |
| react-button ToggleButton |
53.107 kB12.561 kB |
| react-calendar-compat Calendar Compat |
150.095 kB40.026 kB |
| react-card Card - All |
101.77 kB28.772 kB |
| react-card Card |
94.544 kB26.951 kB |
| react-card CardFooter |
14.355 kB5.79 kB |
| react-card CardHeader |
16.888 kB6.669 kB |
| react-card CardPreview |
14.42 kB5.922 kB |
| react-checkbox Checkbox |
35.118 kB12.077 kB |
| react-combobox Combobox (including child components) |
104.383 kB34.197 kB |
| react-combobox Dropdown (including child components) |
104.996 kB34.122 kB |
| react-components react-components: Button, FluentProvider & webLightTheme |
69.21 kB20.174 kB |
| react-components react-components: Accordion, Button, FluentProvider, Image, Menu, Popover |
220.616 kB63.902 kB |
| react-components react-components: FluentProvider & webLightTheme |
44.447 kB14.59 kB |
| react-components react-components: entire library |
1.16 MB290.619 kB |
| react-datepicker-compat DatePicker Compat |
224.165 kB63.423 kB |
| react-dialog Dialog (including children components) |
100.297 kB30.076 kB |
| react-divider Divider |
21.328 kB7.953 kB |
| react-field Field |
23.399 kB8.898 kB |
| react-image Image |
15.36 kB6.236 kB |
| react-input Input |
28.014 kB9.444 kB |
| react-jsx-runtime Classic Pragma |
1.057 kB530 B |
| react-jsx-runtime JSX Dev Runtime |
3.771 kB1.643 kB |
| react-jsx-runtime JSX Runtime |
4.367 kB1.874 kB |
| react-label Label |
14.671 kB5.99 kB |
| react-link Link |
17.326 kB7.032 kB |
| react-list-preview List |
89.148 kB26.597 kB |
| react-list-preview ListItem |
112.707 kB33.428 kB |
| react-menu Menu (including children components) |
152.661 kB46.116 kB |
| react-menu Menu (including selectable components) |
155.342 kB46.598 kB |
| react-message-bar MessageBar (all components) |
24.878 kB9.264 kB |
| react-motion @fluentui/react-motion - createMotionComponent() |
4.303 kB1.899 kB |
| react-motion @fluentui/react-motion - createPresenceComponent() |
5.038 kB2.229 kB |
| react-motion @fluentui/react-motion - PresenceGroup |
1.714 kB819 B |
| react-northstar Accordion |
85.38 kB26.519 kB |
| react-northstar Alert |
87.435 kB26.905 kB |
| react-northstar Animation |
55.331 kB17.83 kB |
| react-northstar Attachment |
86.829 kB26.7 kB |
| react-northstar Avatar |
80.264 kB24.633 kB |
| react-northstar Box |
75.233 kB23.813 kB |
| react-northstar Breadcrumb |
79.908 kB24.717 kB |
| react-northstar Button |
83.145 kB25.952 kB |
| react-northstar Card |
82.693 kB25.037 kB |
| react-northstar Carousel |
105.17 kB31.873 kB |
| react-northstar Chat |
154.072 kB46.878 kB |
| react-northstar Checkbox |
79.792 kB25.08 kB |
| react-northstar Datepicker |
186.639 kB56.99 kB |
| react-northstar Debug |
8.801 kB3.594 kB |
| react-northstar Design |
36.589 kB12.067 kB |
| react-northstar Dialog |
112.046 kB33.622 kB |
| react-northstar Divider |
76.604 kB24.135 kB |
| react-northstar Dropdown |
198.196 kB60.223 kB |
| react-northstar Embed |
81.465 kB25.425 kB |
| react-northstar Flex |
47.716 kB15.443 kB |
| react-northstar Form |
92.515 kB28.888 kB |
| react-northstar Grid |
70.569 kB22.283 kB |
| react-northstar Header |
74.741 kB23.465 kB |
| react-northstar Image |
73.576 kB23.333 kB |
| react-northstar Input |
88.334 kB27.781 kB |
| react-northstar ItemLayout |
78.213 kB24.457 kB |
| react-northstar Label |
77.905 kB24.414 kB |
| react-northstar Layout |
75.378 kB23.803 kB |
| react-northstar List |
88.475 kB27.555 kB |
| react-northstar Loader |
78.601 kB24.733 kB |
| react-northstar Menu |
128.587 kB40.738 kB |
| react-northstar MenuButton |
162.993 kB49.614 kB |
| react-northstar Pill |
83.707 kB26.069 kB |
| react-northstar Popup |
135.304 kB42.259 kB |
| react-northstar Portal |
58.326 kB18.851 kB |
| react-northstar Provider |
93.129 kB29.627 kB |
| react-northstar RadioGroup |
83.27 kB26.053 kB |
| react-northstar Reaction |
77.265 kB24.128 kB |
| react-northstar Segment |
76.194 kB23.896 kB |
| react-northstar Skeleton |
77.75 kB24.205 kB |
| react-northstar Slider |
84.258 kB26.757 kB |
| react-northstar SplitButton |
178.231 kB53.438 kB |
| react-northstar Status |
76.257 kB24.054 kB |
| react-northstar SvgIcon |
36.811 kB11.746 kB |
| react-northstar Table |
80.784 kB25.157 kB |
| react-northstar Text |
74.099 kB23.511 kB |
| react-northstar TextArea |
74.233 kB23.496 kB |
| react-northstar Toolbar |
175.042 kB52.844 kB |
| react-northstar Tooltip |
109.961 kB35.238 kB |
| react-northstar Tree |
87.84 kB27.223 kB |
| react-northstar Video |
75.399 kB23.796 kB |
| react-overflow hooks only |
12.808 kB4.819 kB |
| react-persona Persona |
56.194 kB17.695 kB |
| react-popover Popover |
128.904 kB40.314 kB |
| react-portal Portal |
14.563 kB5.118 kB |
| react-portal-compat PortalCompatProvider |
8.39 kB2.64 kB |
| react-positioning usePositioning |
27.057 kB9.698 kB |
| react-progress ProgressBar |
17.084 kB6.891 kB |
| react-provider FluentProvider |
24.623 kB8.893 kB |
| react-radio Radio |
32.672 kB10.343 kB |
| react-radio RadioGroup |
15.762 kB6.423 kB |
| react-select Select |
27.732 kB10.124 kB |
| react-slider Slider |
37.169 kB12.538 kB |
| react-spinbutton SpinButton |
36.06 kB11.815 kB |
| react-spinner Spinner |
25.245 kB8.539 kB |
| react-swatch-picker @fluentui/react-swatch-picker - package |
104.258 kB30.231 kB |
| react-switch Switch |
35.319 kB11.314 kB |
| react-table DataGrid |
161.034 kB45.71 kB |
| react-table Table (Primitives only) |
42.666 kB13.854 kB |
| react-table Table as DataGrid |
131.869 kB36.57 kB |
| react-table Table (Selection only) |
70.536 kB19.999 kB |
| react-table Table (Sort only) |
69.179 kB19.61 kB |
| react-tag-picker @fluentui/react-tag-picker - package |
184.091 kB55.425 kB |
| react-tags InteractionTag |
15.199 kB6.157 kB |
| react-tags Tag |
29.016 kB9.524 kB |
| react-tags TagGroup |
82.719 kB24.524 kB |
| react-text Text - Default |
17.061 kB6.723 kB |
| react-text Text - Wrappers |
20.242 kB7.048 kB |
| react-textarea Textarea |
26.572 kB9.755 kB |
| react-theme Single theme token import |
69 B89 B |
| react-theme Teams: all themes |
35.666 kB7.453 kB |
| react-theme Teams: Light theme |
19.642 kB5.549 kB |
| react-timepicker-compat TimePicker |
107.372 kB35.755 kB |
| react-toast Toast (including Toaster) |
98.338 kB29.591 kB |
| react-tooltip Tooltip |
55.517 kB19.515 kB |
| react-utilities SSRProvider |
180 B160 B |
Perf Analysis (@fluentui/react-northstar)
Perf tests with no regressions
| Scenario | Current PR Ticks | Baseline Ticks | Ratio |
|---|---|---|---|
| PortalMinimalPerf.default | 102 | 83 | 1.23:1 |
| AttachmentMinimalPerf.default | 99 | 82 | 1.21:1 |
| AvatarMinimalPerf.default | 119 | 106 | 1.12:1 |
| ButtonSlotsPerf.default | 325 | 291 | 1.12:1 |
| TreeWith60ListItems.default | 96 | 87 | 1.1:1 |
| LoaderMinimalPerf.default | 202 | 185 | 1.09:1 |
| ImageMinimalPerf.default | 241 | 224 | 1.08:1 |
| ProviderMinimalPerf.default | 214 | 199 | 1.08:1 |
| AnimationMinimalPerf.default | 317 | 296 | 1.07:1 |
| HeaderMinimalPerf.default | 220 | 205 | 1.07:1 |
| IconMinimalPerf.default | 406 | 381 | 1.07:1 |
| TreeMinimalPerf.default | 508 | 476 | 1.07:1 |
| VideoMinimalPerf.default | 469 | 438 | 1.07:1 |
| AccordionMinimalPerf.default | 93 | 88 | 1.06:1 |
| CardMinimalPerf.default | 319 | 300 | 1.06:1 |
| RefMinimalPerf.default | 119 | 112 | 1.06:1 |
| TableMinimalPerf.default | 249 | 234 | 1.06:1 |
| AttachmentSlotsPerf.default | 654 | 620 | 1.05:1 |
| RadioGroupMinimalPerf.default | 274 | 262 | 1.05:1 |
| SkeletonMinimalPerf.default | 206 | 197 | 1.05:1 |
| BoxMinimalPerf.default | 207 | 199 | 1.04:1 |
| ReactionMinimalPerf.default | 216 | 208 | 1.04:1 |
| CarouselMinimalPerf.default | 267 | 259 | 1.03:1 |
| FormMinimalPerf.default | 228 | 222 | 1.03:1 |
| InputMinimalPerf.default | 554 | 539 | 1.03:1 |
| ListNestedPerf.default | 337 | 326 | 1.03:1 |
| CustomToolbarPrototype.default | 1515 | 1467 | 1.03:1 |
| CheckboxMinimalPerf.default | 1177 | 1159 | 1.02:1 |
| LabelMinimalPerf.default | 225 | 220 | 1.02:1 |
| ListCommonPerf.default | 407 | 398 | 1.02:1 |
| MenuMinimalPerf.default | 521 | 509 | 1.02:1 |
| PopupMinimalPerf.default | 351 | 345 | 1.02:1 |
| ProviderMergeThemesPerf.default | 665 | 655 | 1.02:1 |
| SliderMinimalPerf.default | 746 | 730 | 1.02:1 |
| TextMinimalPerf.default | 206 | 202 | 1.02:1 |
| ChatMinimalPerf.default | 437 | 434 | 1.01:1 |
| DividerMinimalPerf.default | 212 | 210 | 1.01:1 |
| DropdownManyItemsPerf.default | 400 | 398 | 1.01:1 |
| GridMinimalPerf.default | 192 | 190 | 1.01:1 |
| HeaderSlotsPerf.default | 474 | 470 | 1.01:1 |
| ListMinimalPerf.default | 314 | 310 | 1.01:1 |
| ToolbarMinimalPerf.default | 539 | 533 | 1.01:1 |
| AlertMinimalPerf.default | 167 | 167 | 1:1 |
| DatepickerMinimalPerf.default | 3719 | 3704 | 1:1 |
| FlexMinimalPerf.default | 153 | 153 | 1:1 |
| LayoutMinimalPerf.default | 203 | 204 | 1:1 |
| RosterPerf.default | 1554 | 1555 | 1:1 |
| TableManyItemsPerf.default | 1139 | 1136 | 1:1 |
| TooltipMinimalPerf.default | 1281 | 1277 | 1:1 |
| DropdownMinimalPerf.default | 1429 | 1450 | 0.99:1 |
| EmbedMinimalPerf.default | 1863 | 1890 | 0.99:1 |
| ItemLayoutMinimalPerf.default | 708 | 716 | 0.99:1 |
| SplitButtonMinimalPerf.default | 2265 | 2298 | 0.99:1 |
| TextAreaMinimalPerf.default | 289 | 291 | 0.99:1 |
| ButtonMinimalPerf.default | 88 | 90 | 0.98:1 |
| DialogMinimalPerf.default | 439 | 447 | 0.98:1 |
| StatusMinimalPerf.default | 402 | 412 | 0.98:1 |
| ChatDuplicateMessagesPerf.default | 149 | 154 | 0.97:1 |
| ListWith60ListItems.default | 368 | 380 | 0.97:1 |
| ButtonOverridesMissPerf.default | 640 | 669 | 0.96:1 |
| MenuButtonMinimalPerf.default | 957 | 1012 | 0.95:1 |
| SegmentMinimalPerf.default | 197 | 207 | 0.95:1 |
| ChatWithPopoverPerf.default | 197 | 210 | 0.94:1 |
Perf Analysis (@fluentui/react)
No significant results to display.
All results
| Scenario | Render type | Master Ticks | PR Ticks | Iterations | Status |
|---|---|---|---|---|---|
| BaseButton | mount | 615 | 638 | 5000 | |
| Breadcrumb | mount | 1692 | 1654 | 1000 | |
| Checkbox | mount | 1676 | 1691 | 5000 | |
| CheckboxBase | mount | 1456 | 1482 | 5000 | |
| ChoiceGroup | mount | 2969 | 2999 | 5000 | |
| ComboBox | mount | 686 | 659 | 1000 | |
| CommandBar | mount | 6505 | 6521 | 1000 | |
| ContextualMenu | mount | 11699 | 12129 | 1000 | |
| DefaultButton | mount | 796 | 793 | 5000 | |
| DetailsRow | mount | 2150 | 2184 | 5000 | |
| DetailsRowFast | mount | 2243 | 2213 | 5000 | |
| DetailsRowNoStyles | mount | 2021 | 2041 | 5000 | |
| Dialog | mount | 2779 | 2806 | 1000 | |
| DocumentCardTitle | mount | 239 | 239 | 1000 | |
| Dropdown | mount | 2026 | 2004 | 5000 | |
| FocusTrapZone | mount | 1159 | 1154 | 5000 | |
| FocusZone | mount | 1115 | 1052 | 5000 | |
| GroupedList | mount | 42537 | 42307 | 2 | |
| GroupedList | virtual-rerender | 20259 | 20239 | 2 | |
| GroupedList | virtual-rerender-with-unmount | 51713 | 52021 | 2 | |
| GroupedListV2 | mount | 243 | 228 | 2 | |
| GroupedListV2 | virtual-rerender | 217 | 223 | 2 | |
| GroupedListV2 | virtual-rerender-with-unmount | 235 | 227 | 2 | |
| IconButton | mount | 1146 | 1130 | 5000 | |
| Label | mount | 349 | 348 | 5000 | |
| Layer | mount | 2746 | 2724 | 5000 | |
| Link | mount | 387 | 384 | 5000 | |
| MenuButton | mount | 990 | 983 | 5000 | |
| MessageBar | mount | 21357 | 21302 | 5000 | |
| Nav | mount | 2053 | 2013 | 1000 | |
| OverflowSet | mount | 796 | 777 | 5000 | |
| Panel | mount | 1778 | 1853 | 1000 | |
| Persona | mount | 730 | 763 | 1000 | |
| Pivot | mount | 921 | 888 | 1000 | |
| PrimaryButton | mount | 927 | 933 | 5000 | |
| Rating | mount | 4606 | 4717 | 5000 | |
| SearchBox | mount | 928 | 914 | 5000 | |
| Shimmer | mount | 1923 | 1891 | 5000 | |
| Slider | mount | 1325 | 1357 | 5000 | |
| SpinButton | mount | 2965 | 2990 | 5000 | |
| Spinner | mount | 388 | 399 | 5000 | |
| SplitButton | mount | 1851 | 1844 | 5000 | |
| Stack | mount | 425 | 424 | 5000 | |
| StackWithIntrinsicChildren | mount | 868 | 874 | 5000 | |
| StackWithTextChildren | mount | 2745 | 2767 | 5000 | |
| SwatchColorPicker | mount | 6414 | 6355 | 5000 | |
| TagPicker | mount | 1477 | 1473 | 5000 | |
| Text | mount | 395 | 397 | 5000 | |
| TextField | mount | 911 | 951 | 5000 | |
| ThemeProvider | mount | 860 | 860 | 5000 | |
| ThemeProvider | virtual-rerender | 584 | 579 | 5000 | |
| ThemeProvider | virtual-rerender-with-unmount | 1290 | 1323 | 5000 | |
| Toggle | mount | 596 | 614 | 5000 | |
| buttonNative | mount | 193 | 197 | 5000 |
I don't think we want to set module to NodeNext for the tsconfigs related to the web-components package (except for tsconfig.spec.json, since Playwright tests run in a Node environment). We'll probably want to change the moduleResolution to Bundler instead. We may need to fix some type-only imports/exports for Storybook (its babel transpiler gets confused when types are imported as values) - I'll investigate and see if we can preemptively fix those issues.
I don't think we want to set
moduletoNodeNextfor the tsconfigs related to theweb-componentspackage (except fortsconfig.spec.json, since Playwright tests run in a Node environment). We'll probably want to change themoduleResolutiontoBundlerinstead. We may need to fix some type-only imports/exports for Storybook (its babel transpiler gets confused when types are imported as values) - I'll investigate and see if we can preemptively fix those issues.
@radium-v I updated wc configs, can you check please? Feel free to suggest any changes or contribute to this PR 😉
@radium-v
We may need to fix some type-only imports/exports for Storybook (its babel transpiler gets confused when types are imported as values)
wondering if you could switch to swc as the rest of the repo ? using babel is discouraged within this monorepo for anything in active development
We'll probably want to change the moduleResolution to Bundler instead
I don't recommend to do this. AFAIR it will no longer force you to explicitly provide .js extensions within import/export statements for production code == invalid ESM
can we get perf bench delta ( ts 5 vs ts 5.2 ) for type-checking target ? @mainframev
can we get perf bench delta ( ts 5 vs ts 5.2 ) for type-checking target ? @mainframev
Sure, will add 👍🏻
@radium-v
We may need to fix some type-only imports/exports for Storybook (its babel transpiler gets confused when types are imported as values)
wondering if you could switch to swc as the rest of the repo ? using babel is discouraged within this monorepo for anything in active development
We'll probably want to change the moduleResolution to Bundler instead
I don't recommend to do this. AFAIR it will no longer force you to explicitly provide
.jsextensions within import/export statements for production code == invalid ESM
gentle ping @radium-v
@Hotell addressing your concerns:
wondering if you could switch to swc as the rest of the repo ? using babel is discouraged within this monorepo for anything in active development
Babel is just an underlying dependency for the web components Storybook instance - we don't use it directly in any of our processes.
We'd have to redo the web components Storybook configuration in order to not use Babel. I mentioned before I'd prefer to switch our Storybook instance to use Vite, but that would have to be done as part of the migration to Storybook 8.
We'll probably want to change the moduleResolution to Bundler instead
I don't recommend to do this. AFAIR it will no longer force you to explicitly provide .js extensions within import/export statements for production code == invalid ESM
In order to use ESNext as the module, we have no choice but to use Bundler. NodeNext is not acceptable as module setting, since we're compiling for browser targets, not Node targets. NodeNext also allows require() calls, which we don't want. require() is already disallowed with an ESLint rule, and adding a rule to enforce file extensions can easily be added.
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}