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.

Sign up for GitHub

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

Jump to bottom

chore: migrate .shorthands() [cxe-red] #31449

Merged
merged 9 commits into from
May 22, 2024
Merged

chore: migrate .shorthands() [cxe-red] #31449

merged 9 commits into from
May 22, 2024

Conversation

layershifter
Copy link
Member

@layershifter layershifter commented May 22, 2024 •
edited by spmonahan

Previous Behavior

Components owned by cxe-red use shorthands.*().

New Behavior

Components owned by cxe-red do not use shorthands.*(), bundle size is decreased 👍

Related Issue(s)

Related to #31318.

@layershifter layershifter marked this pull request as draft May 22, 2024 10:22
@github-actions github-actions bot added this to the April Project Cycle Q1 2024 milestone May 22, 2024
@fabricteam
Copy link
Collaborator

fabricteam commented May 22, 2024 •
edited

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-accordion
Accordion (including children components)		 100.535 kB
30.658 kB		 100.003 kB
30.524 kB		 -532 B
-134 B
react-alert
Alert		 84.099 kB
23.645 kB		 80.047 kB
22.89 kB		 -4.052 kB
-755 B
react-avatar
Avatar		 50.537 kB
16.11 kB		 49.299 kB
15.837 kB		 -1.238 kB
-273 B
react-avatar
AvatarGroupItem		 65.191 kB
20.441 kB		 63.316 kB
20.017 kB		 -1.875 kB
-424 B
react-badge
Badge		 27.31 kB
8.901 kB		 25.95 kB
8.612 kB		 -1.36 kB
-289 B
react-badge
CounterBadge		 28.214 kB
9.202 kB		 26.729 kB
8.886 kB		 -1.485 kB
-316 B
react-breadcrumb
@fluentui/react-breadcrumb - package		 117.684 kB
32.424 kB		 114.486 kB
31.821 kB		 -3.198 kB
-603 B
react-button
Button		 39.917 kB
11.339 kB		 37.103 kB
10.784 kB		 -2.814 kB
-555 B
react-button
CompoundButton		 47.278 kB
12.834 kB		 43.514 kB
12.074 kB		 -3.764 kB
-760 B
react-button
MenuButton		 44.698 kB
12.729 kB		 41.884 kB
12.132 kB		 -2.814 kB
-597 B
react-button
SplitButton		 52.71 kB
14.313 kB		 49.896 kB
13.724 kB		 -2.814 kB
-589 B
react-button
ToggleButton		 56.963 kB
13.243 kB		 53.03 kB
12.543 kB		 -3.933 kB
-700 B
react-calendar-compat
Calendar Compat		 153.535 kB
40.125 kB		 146.465 kB
39.03 kB		 -7.07 kB
-1.095 kB
react-card
Card - All		 101.99 kB
29.217 kB		 101.184 kB
29.049 kB		 -806 B
-168 B
react-card
Card		 95.003 kB
27.494 kB		 94.218 kB
27.333 kB		 -785 B
-161 B
react-card
CardFooter		 14.375 kB
5.796 kB		 14.354 kB
5.795 kB		 -21 B
-1 B
react-checkbox
Checkbox		 35.545 kB
12.207 kB		 35.103 kB
12.11 kB		 -442 B
-97 B
react-components
react-components: Button, FluentProvider & webLightTheme		 71.955 kB
20.772 kB		 69.141 kB
20.157 kB		 -2.814 kB
-615 B
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover		 216.69 kB
61.916 kB		 212.554 kB
61.198 kB		 -4.136 kB
-718 B
react-components
react-components: entire library		 1.128 MB
276.456 kB		 1.094 MB
269.65 kB		 -34.672 kB
-6.806 kB
react-datepicker-compat
DatePicker Compat		 227.567 kB
63.512 kB		 220.038 kB
62.373 kB		 -7.529 kB
-1.139 kB
react-input
Input		 28.444 kB
9.526 kB		 27.985 kB
9.444 kB		 -459 B
-82 B
react-link
Link		 17.466 kB
7.079 kB		 17.191 kB
6.991 kB		 -275 B
-88 B
react-persona
Persona		 57.428 kB
17.99 kB		 56.19 kB
17.726 kB		 -1.238 kB
-264 B
react-progress
ProgressBar		 17.833 kB
7.074 kB		 17.084 kB
6.904 kB		 -749 B
-170 B
react-radio
Radio		 32.841 kB
10.384 kB		 32.671 kB
10.348 kB		 -170 B
-36 B
react-select
Select		 28.997 kB
10.374 kB		 27.636 kB
10.106 kB		 -1.361 kB
-268 B
react-slider
Slider		 39.379 kB
13.027 kB		 37.195 kB
12.559 kB		 -2.184 kB
-468 B
react-spinbutton
SpinButton		 37.101 kB
11.955 kB		 35.78 kB
11.735 kB		 -1.321 kB
-220 B
react-switch
Switch		 35.469 kB
11.37 kB		 35.299 kB
11.345 kB		 -170 B
-25 B
react-table
DataGrid		 163.433 kB
46.446 kB		 162.821 kB
46.323 kB		 -612 B
-123 B
react-table
Table as DataGrid		 132.546 kB
36.793 kB		 131.934 kB
36.682 kB		 -612 B
-111 B
react-table
Table (Selection only)		 70.946 kB
20.143 kB		 70.334 kB
20.026 kB		 -612 B
-117 B
react-table
Table (Sort only)		 69.589 kB
19.745 kB		 68.977 kB
19.63 kB		 -612 B
-115 B
react-textarea
Textarea		 31.351 kB
10.651 kB		 26.519 kB
9.739 kB		 -4.832 kB
-912 B
react-tooltip
Tooltip		 55.434 kB
19.433 kB		 54.459 kB
19.185 kB		 -975 B
-248 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-avatar
AvatarGroup		 20.107 kB
7.973 kB
react-badge
PresenceBadge		 25.717 kB
9.483 kB
react-card
CardHeader		 16.618 kB
6.555 kB
react-card
CardPreview		 14.418 kB
5.931 kB
react-components
react-components: FluentProvider & webLightTheme		 44.442 kB
14.607 kB
react-dialog
Dialog (including children components)		 99.638 kB
29.951 kB
react-message-bar
MessageBar (all components)		 24.608 kB
9.155 kB
react-portal-compat
PortalCompatProvider		 8.39 kB
2.64 kB
react-radio
RadioGroup		 15.758 kB
6.431 kB
react-spinner
Spinner		 25.134 kB
8.521 kB
react-table
Table (Primitives only)		 42.48 kB
13.866 kB
react-tag-picker
@fluentui/react-tag-picker - package		 180.836 kB
54.497 kB
react-tags
InteractionTag		 15.165 kB
6.134 kB
react-tags
Tag		 28.994 kB
9.518 kB
react-tags
TagGroup		 82.911 kB
24.642 kB
🤖 This report was generated against 051db5e7f6699ef23072c23adf644ebcf547cff7

@fabricteam
Copy link
Collaborator

fabricteam commented May 22, 2024 •
edited

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 667 662 5000
Button mount 297 304 5000
Field mount 1091 1132 5000
FluentProvider mount 699 706 5000
FluentProviderWithTheme mount 81 86 10
FluentProviderWithTheme virtual-rerender 35 31 10
FluentProviderWithTheme virtual-rerender-with-unmount 78 71 10
MakeStyles mount 868 869 50000
Persona mount 1789 1710 5000
SpinButton mount 1417 1404 5000
SwatchPicker mount 1541 1573 5000

@codesandbox-ci CodeSandbox CI
Copy link

codesandbox-ci bot commented May 22, 2024 •
edited

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-cxe branch 8 times, most recently from 77a4fce to 2d01d27 Compare May 22, 2024 13:16
@layershifter layershifter marked this pull request as ready for review May 22, 2024 14:52
@layershifter layershifter marked this pull request as draft May 22, 2024 14:52
@layershifter layershifter marked this pull request as ready for review May 22, 2024 15:13
@layershifter layershifter marked this pull request as draft May 22, 2024 15:14
@layershifter layershifter marked this pull request as ready for review May 22, 2024 15:59
layershifter and others added 6 commits May 22, 2024 19:00
@layershifter @spmonahan
Update packages/react-components/react-input/src/components/Input/use…
3159c42 
…InputStyles.styles.ts

Co-authored-by: Sean Monahan <seanmonahan@microsoft.com>
@layershifter @spmonahan
Update packages/react-components/react-tooltip/src/components/Tooltip…
b91a8af 
…/useTooltipStyles.styles.ts

Co-authored-by: Sean Monahan <seanmonahan@microsoft.com>
@layershifter @spmonahan
Update packages/react-components/react-tooltip/src/components/Tooltip…
7894e25 
…/useTooltipStyles.styles.ts

Co-authored-by: Sean Monahan <seanmonahan@microsoft.com>
@layershifter @spmonahan
Update packages/react-components/react-input/src/components/Input/use…
f21827c 
…InputStyles.styles.ts

Co-authored-by: Sean Monahan <seanmonahan@microsoft.com>
@layershifter @spmonahan
Update packages/react-components/react-input/src/components/Input/use…
e794acb 
…InputStyles.styles.ts

Co-authored-by: Sean Monahan <seanmonahan@microsoft.com>
@layershifter
fix fmt
185a9f5
@layershifter layershifter reopened this May 22, 2024
@layershifter layershifter merged commit 78e136d into microsoft:master May 22, 2024
20 checks passed
@layershifter layershifter deleted the chore/migrate-shorthands-cxe branch May 22, 2024 19:55
miroslavstastny pushed a commit to miroslavstastny/fluentui that referenced this pull request Jun 14, 2024
@layershifter @spmonahan @miroslavstastny
chore: migrate .shorthands() [cxe-red] (microsoft#31449)
9455bcc 
Co-authored-by: Sean Monahan <seanmonahan@microsoft.com>
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

@spmonahan spmonahan spmonahan approved these changes

@sopranopillow sopranopillow Awaiting requested review from sopranopillow sopranopillow is a code owner

@tomi-msft tomi-msft Awaiting requested review from tomi-msft tomi-msft is a code owner

@smhigley smhigley Awaiting requested review from smhigley smhigley is a code owner

@GeoffCoxMSFT GeoffCoxMSFT Awaiting requested review from GeoffCoxMSFT GeoffCoxMSFT is a code owner

@ms-acalzaretto ms-acalzaretto Awaiting requested review from ms-acalzaretto ms-acalzaretto is a code owner

@behowell behowell Awaiting requested review from behowell behowell is a code owner

@khmakoto khmakoto Awaiting requested review from khmakoto khmakoto is a code owner

@micahgodbolt micahgodbolt Awaiting requested review from micahgodbolt micahgodbolt is a code owner

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.

None yet
3 participants
@layershifter @fabricteam @spmonahan