Skip to content

chore: migrate .shorthands() [teams-prg]#31432

Merged
layershifter merged 1 commit intomicrosoft:masterfrom
layershifter:chore/migrate-shorthands-prg
May 22, 2024
Merged

chore: migrate .shorthands() [teams-prg]#31432
layershifter merged 1 commit intomicrosoft:masterfrom
layershifter:chore/migrate-shorthands-prg

Conversation

@layershifter
Copy link
Member

@layershifter layershifter commented May 21, 2024 •
edited
Loading

Previous Behavior

Components owned by teams-prg use shorthands.*().

New Behavior

Components owned by teams-prg do use shorthands.*(), bundle size is decreased 👍

Related Issue(s)

Fixes #31318.

@github-actions github-actions bot added this to the April Project Cycle Q1 2024 milestone May 21, 2024
@layershifter layershifter force-pushed the chore/migrate-shorthands-prg branch from 67e5617 to ee98a69 Compare May 21, 2024 11:04
@fabricteam
Copy link
Collaborator

fabricteam commented May 21, 2024 •
edited
Loading

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-accordion
Accordion (including children components)		 101.807 kB
30.826 kB		 100.535 kB
30.658 kB		 -1.272 kB
-168 B
react-calendar-compat
Calendar Compat		 154.865 kB
40.333 kB		 153.535 kB
40.125 kB		 -1.33 kB
-208 B
react-card
Card - All		 104.861 kB
29.591 kB		 101.99 kB
29.217 kB		 -2.871 kB
-374 B
react-card
Card		 97.874 kB
27.843 kB		 95.003 kB
27.494 kB		 -2.871 kB
-349 B
react-checkbox
Checkbox		 36.506 kB
12.305 kB		 35.545 kB
12.207 kB		 -961 B
-98 B
react-combobox
Combobox (including child components)		 106.032 kB
34.071 kB		 100.367 kB
33.145 kB		 -5.665 kB
-926 B
react-combobox
Dropdown (including child components)		 107.447 kB
34.045 kB		 100.903 kB
33.051 kB		 -6.544 kB
-994 B
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover		 222.204 kB
62.75 kB		 216.69 kB
61.916 kB		 -5.514 kB
-834 B
react-components
react-components: entire library		 1.166 MB
280.368 kB		 1.128 MB
276.451 kB		 -37.691 kB
-3.917 kB
react-datepicker-compat
DatePicker Compat		 228.897 kB
63.71 kB		 227.567 kB
63.512 kB		 -1.33 kB
-198 B
react-dialog
Dialog (including children components)		 100.613 kB
30.059 kB		 99.638 kB
29.951 kB		 -975 B
-108 B
react-menu
Menu (including children components)		 154.762 kB
46.333 kB		 151.944 kB
45.952 kB		 -2.818 kB
-381 B
react-menu
Menu (including selectable components)		 157.448 kB
46.895 kB		 154.63 kB
46.45 kB		 -2.818 kB
-445 B
react-popover
Popover		 129.09 kB
40.444 kB		 127.666 kB
40.091 kB		 -1.424 kB
-353 B
react-radio
Radio		 33.802 kB
10.485 kB		 32.841 kB
10.384 kB		 -961 B
-101 B
react-slider
Slider		 40.8 kB
13.201 kB		 39.379 kB
13.027 kB		 -1.421 kB
-174 B
react-switch
Switch		 36.444 kB
11.48 kB		 35.469 kB
11.37 kB		 -975 B
-110 B
react-table
DataGrid		 169.697 kB
47.073 kB		 163.433 kB
46.446 kB		 -6.264 kB
-627 B
react-table
Table (Primitives only)		 46.175 kB
14.35 kB		 42.48 kB
13.866 kB		 -3.695 kB
-484 B
react-table
Table as DataGrid		 138.781 kB
37.418 kB		 132.546 kB
36.793 kB		 -6.235 kB
-625 B
react-table
Table (Selection only)		 77.181 kB
20.767 kB		 70.946 kB
20.143 kB		 -6.235 kB
-624 B
react-table
Table (Sort only)		 75.824 kB
20.369 kB		 69.589 kB
19.745 kB		 -6.235 kB
-624 B
react-tag-picker
@fluentui/react-tag-picker - package		 189.095 kB
55.95 kB		 180.836 kB
54.497 kB		 -8.259 kB
-1.453 kB
react-tags
InteractionTag		 15.703 kB
6.253 kB		 15.165 kB
6.134 kB		 -538 B
-119 B
react-tags
Tag		 29.408 kB
9.593 kB		 28.994 kB
9.518 kB		 -414 B
-75 B
react-timepicker-compat
TimePicker		 108.051 kB
35.451 kB		 103.165 kB
34.513 kB		 -4.886 kB
-938 B
react-toast
Toast (including Toaster)		 99.534 kB
30.008 kB		 99.527 kB
30.005 kB		 -7 B
-3 B
react-tooltip
Tooltip		 55.606 kB
19.444 kB		 55.434 kB
19.433 kB		 -172 B
-11 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
global-context
createContext		 510 B
328 B
global-context
createContextSelector		 537 B
339 B
react-alert
Alert		 84.099 kB
23.645 kB
react-avatar
Avatar		 50.537 kB
16.11 kB
react-avatar
AvatarGroup		 20.107 kB
7.973 kB
react-avatar
AvatarGroupItem		 65.191 kB
20.441 kB
react-badge
Badge		 27.31 kB
8.901 kB
react-badge
CounterBadge		 28.214 kB
9.202 kB
react-badge
PresenceBadge		 25.717 kB
9.483 kB
react-breadcrumb
@fluentui/react-breadcrumb - package		 117.684 kB
32.424 kB
react-button
Button		 39.917 kB
11.339 kB
react-button
CompoundButton		 47.278 kB
12.834 kB
react-button
MenuButton		 44.698 kB
12.729 kB
react-button
SplitButton		 52.71 kB
14.313 kB
react-button
ToggleButton		 56.963 kB
13.243 kB
react-card
CardFooter		 14.375 kB
5.796 kB
react-card
CardHeader		 16.618 kB
6.555 kB
react-card
CardPreview		 14.418 kB
5.931 kB
react-components
react-components: Button, FluentProvider & webLightTheme		 71.955 kB
20.772 kB
react-components
react-components: FluentProvider & webLightTheme		 44.442 kB
14.607 kB
react-divider
Divider		 21.326 kB
7.963 kB
react-field
Field		 23.382 kB
8.901 kB
react-image
Image		 16.15 kB
6.407 kB
react-input
Input		 28.444 kB
9.526 kB
react-jsx-runtime
Classic Pragma		 1.057 kB
530 B
react-jsx-runtime
JSX Dev Runtime		 3.781 kB
1.646 kB
react-jsx-runtime
JSX Runtime		 4.377 kB
1.881 kB
react-label
Label		 14.67 kB
6 kB
react-link
Link		 17.466 kB
7.079 kB
react-message-bar
MessageBar (all components)		 24.608 kB
9.155 kB
react-overflow
hooks only		 12.87 kB
4.83 kB
react-persona
Persona		 57.428 kB
17.99 kB
react-portal
Portal		 14.563 kB
5.118 kB
react-portal-compat
PortalCompatProvider		 8.39 kB
2.64 kB
react-positioning
usePositioning		 26.489 kB
9.552 kB
react-progress
ProgressBar		 17.833 kB
7.074 kB
react-provider
FluentProvider		 24.616 kB
8.903 kB
react-radio
RadioGroup		 15.758 kB
6.431 kB
react-select
Select		 28.997 kB
10.374 kB
react-spinbutton
SpinButton		 37.101 kB
11.955 kB
react-spinner
Spinner		 25.134 kB
8.521 kB
react-swatch-picker
@fluentui/react-swatch-picker - package		 110.063 kB
30.747 kB
react-tags
TagGroup		 82.911 kB
24.642 kB
react-text
Text - Default		 17.11 kB
6.744 kB
react-text
Text - Wrappers		 20.282 kB
7.074 kB
react-textarea
Textarea		 31.351 kB
10.651 kB
react-theme
Single theme token import		 69 B
89 B
react-theme
Teams: all themes		 35.666 kB
7.453 kB
react-theme
Teams: Light theme		 19.642 kB
5.549 kB
react-utilities
SSRProvider		 180 B
160 B
🤖 This report was generated against 706505836d90349f5002b64d459c4f17d52be27a

@fabricteam
Copy link
Collaborator

fabricteam commented May 21, 2024 •
edited
Loading

Perf Analysis (@fluentui/react-components)

Scenario Render type Master Ticks PR Ticks Iterations Status
FluentProviderWithTheme virtual-rerender 28 36 10 Possible regression
All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 644 609 5000
Button mount 307 312 5000
Field mount 1133 1144 5000
FluentProvider mount 711 711 5000
FluentProviderWithTheme mount 91 90 10
FluentProviderWithTheme virtual-rerender 28 36 10 Possible regression
FluentProviderWithTheme virtual-rerender-with-unmount 84 76 10
MakeStyles mount 849 856 50000
Persona mount 1776 1720 5000
SpinButton mount 1391 1396 5000
SwatchPicker mount 1585 1587 5000

@layershifter layershifter force-pushed the chore/migrate-shorthands-prg branch 7 times, most recently from 322a629 to 14a0e46 Compare May 21, 2024 14:04
@codesandbox-ci
Copy link

codesandbox-ci bot commented May 21, 2024 •
edited
Loading

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.

@layershifter layershifter force-pushed the chore/migrate-shorthands-prg branch 4 times, most recently from 6b5b666 to d00c916 Compare May 22, 2024 13:15
@layershifter layershifter marked this pull request as ready for review May 22, 2024 14:32
@layershifter layershifter force-pushed the chore/migrate-shorthands-prg branch from d00c916 to d7d7cf5 Compare May 22, 2024 15:18
@layershifter layershifter removed the request for review from a team May 22, 2024 15:18
@layershifter layershifter removed the request for review from marcosmoura May 22, 2024 15:18
@layershifter layershifter enabled auto-merge (squash) May 22, 2024 16:00
@layershifter layershifter merged commit 3baaca9 into microsoft:master May 22, 2024
@layershifter layershifter deleted the chore/migrate-shorthands-prg branch May 22, 2024 16:00
miroslavstastny pushed a commit to miroslavstastny/fluentui that referenced this pull request Jun 14, 2024
@layershifter @miroslavstastny
chore: migrate .shorthands() [teams-prg] (microsoft#31432)
2b0e4d4
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@fabricteam fabricteam fabricteam left review comments

@chpalac chpalac Awaiting requested review from chpalac

@smhigley smhigley Awaiting requested review from smhigley

+1 more reviewer

@ling1726 ling1726 ling1726 approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

April Project Cycle Q1 2024

Development

Successfully merging this pull request may close these issues.

Run Griffel codemod to remove usage of shorthands.*()

3 participants

@layershifter @fabricteam @ling1726