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

feature(react-utilities/slots): merge refs and tabster attributes on slot declaration #33100

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

feature(react-utilities/slots): merge refs and tabster attributes on slot declaration #33100

wants to merge 3 commits into from

Conversation

bsunderhus
Copy link
Contributor

Previous Behavior

New Behavior

Related Issue(s)

  • Fixes #

@bsunderhus bsunderhus self-assigned this Oct 22, 2024
@fabricteam
Copy link
Collaborator

fabricteam commented Oct 22, 2024 •
edited
Loading

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-accordion
Accordion (including children components)		 106.678 kB
32.689 kB		 107.65 kB
33.044 kB		 972 B
355 B
react-avatar
Avatar		 49.303 kB
15.815 kB		 50.348 kB
16.209 kB		 1.045 kB
394 B
react-avatar
AvatarGroup		 20.106 kB
7.968 kB		 21.14 kB
8.372 kB		 1.034 kB
404 B
react-avatar
AvatarGroupItem		 63.447 kB
20.034 kB		 64.492 kB
20.437 kB		 1.045 kB
403 B
react-badge
Badge		 25.954 kB
8.595 kB		 26.984 kB
9.004 kB		 1.03 kB
409 B
react-badge
CounterBadge		 26.733 kB
8.872 kB		 27.762 kB
9.282 kB		 1.029 kB
410 B
react-badge
PresenceBadge		 25.719 kB
9.457 kB		 26.787 kB
9.869 kB		 1.068 kB
412 B
react-breadcrumb
@fluentui/react-breadcrumb - package		 114.221 kB
31.654 kB		 115.262 kB
32.032 kB		 1.041 kB
378 B
react-button
Button		 37.104 kB
10.766 kB		 38.147 kB
11.172 kB		 1.043 kB
406 B
react-button
CompoundButton		 43.518 kB
12.068 kB		 44.561 kB
12.479 kB		 1.043 kB
411 B
react-button
MenuButton		 41.919 kB
12.108 kB		 42.951 kB
12.526 kB		 1.032 kB
418 B
react-button
SplitButton		 49.936 kB
13.681 kB		 50.978 kB
14.092 kB		 1.042 kB
411 B
react-button
ToggleButton		 53.037 kB
12.528 kB		 54.079 kB
12.936 kB		 1.042 kB
408 B
react-card
Card - All		 101.77 kB
28.772 kB		 102.728 kB
29.1 kB		 958 B
328 B
react-card
Card		 94.544 kB
26.951 kB		 95.502 kB
27.276 kB		 958 B
325 B
react-card
CardFooter		 14.355 kB
5.79 kB		 15.386 kB
6.201 kB		 1.031 kB
411 B
react-card
CardHeader		 16.888 kB
6.669 kB		 17.919 kB
7.07 kB		 1.031 kB
401 B
react-card
CardPreview		 14.42 kB
5.922 kB		 15.364 kB
6.302 kB		 944 B
380 B
react-checkbox
Checkbox		 35.118 kB
12.077 kB		 36.063 kB
12.451 kB		 945 B
374 B
react-combobox
Combobox (including child components)		 104.398 kB
34.199 kB		 105.342 kB
34.543 kB		 944 B
344 B
react-combobox
Dropdown (including child components)		 105.011 kB
34.125 kB		 105.962 kB
34.477 kB		 951 B
352 B
react-components
react-components: Button, FluentProvider & webLightTheme		 69.14 kB
20.137 kB		 70.103 kB
20.512 kB		 963 B
375 B
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover		 220.469 kB
63.821 kB		 221.434 kB
64.173 kB		 965 B
352 B
react-components
react-components: FluentProvider & webLightTheme		 44.447 kB
14.59 kB		 45.396 kB
14.946 kB		 949 B
356 B
react-components
react-components: entire library		 1.159 MB
290.234 kB		 1.16 MB
290.643 kB		 945 B
409 B
react-datepicker-compat
DatePicker Compat		 224.165 kB
63.423 kB		 225.116 kB
63.888 kB		 951 B
465 B
react-dialog
Dialog (including children components)		 100.247 kB
30.042 kB		 101.202 kB
30.43 kB		 955 B
388 B
react-divider
Divider		 21.328 kB
7.953 kB		 22.364 kB
8.358 kB		 1.036 kB
405 B
react-field
Field		 23.384 kB
8.891 kB		 24.416 kB
9.303 kB		 1.032 kB
412 B
react-image
Image		 15.36 kB
6.236 kB		 16.396 kB
6.638 kB		 1.036 kB
402 B
react-input
Input		 28.014 kB
9.444 kB		 29.055 kB
9.844 kB		 1.041 kB
400 B
react-label
Label		 14.671 kB
5.99 kB		 15.702 kB
6.397 kB		 1.031 kB
407 B
react-link
Link		 17.326 kB
7.032 kB		 18.354 kB
7.449 kB		 1.028 kB
417 B
react-list-preview
List		 89.148 kB
26.597 kB		 90.185 kB
26.962 kB		 1.037 kB
365 B
react-list-preview
ListItem		 112.707 kB
33.428 kB		 113.656 kB
33.786 kB		 949 B
358 B
react-menu
Menu (including children components)		 152.534 kB
46.049 kB		 153.479 kB
46.492 kB		 945 B
443 B
react-menu
Menu (including selectable components)		 155.215 kB
46.53 kB		 156.16 kB
46.991 kB		 945 B
461 B
react-message-bar
MessageBar (all components)		 24.878 kB
9.264 kB		 25.821 kB
9.629 kB		 943 B
365 B
react-motion
@fluentui/react-motion - createMotionComponent()		 4.303 kB
1.899 kB		 4.327 kB
1.909 kB		 24 B
10 B
react-motion
@fluentui/react-motion - createPresenceComponent()		 5.038 kB
2.229 kB		 5.062 kB
2.237 kB		 24 B
8 B
react-persona
Persona		 56.194 kB
17.695 kB		 57.239 kB
18.096 kB		 1.045 kB
401 B
react-popover
Popover		 128.854 kB
40.286 kB		 129.799 kB
40.697 kB		 945 B
411 B
react-progress
ProgressBar		 17.084 kB
6.891 kB		 18.115 kB
7.304 kB		 1.031 kB
413 B
react-provider
FluentProvider		 24.623 kB
8.893 kB		 25.572 kB
9.247 kB		 949 B
354 B
react-radio
Radio		 32.672 kB
10.343 kB		 33.71 kB
10.739 kB		 1.038 kB
396 B
react-radio
RadioGroup		 15.762 kB
6.423 kB		 16.804 kB
6.828 kB		 1.042 kB
405 B
react-select
Select		 27.732 kB
10.124 kB		 28.767 kB
10.541 kB		 1.035 kB
417 B
react-slider
Slider		 37.169 kB
12.538 kB		 38.117 kB
12.91 kB		 948 B
372 B
react-spinbutton
SpinButton		 36.06 kB
11.815 kB		 37.1 kB
12.227 kB		 1.04 kB
412 B
react-spinner
Spinner		 25.245 kB
8.539 kB		 26.288 kB
8.946 kB		 1.043 kB
407 B
react-swatch-picker
@fluentui/react-swatch-picker - package		 104.258 kB
30.231 kB		 105.297 kB
30.592 kB		 1.039 kB
361 B
react-switch
Switch		 35.319 kB
11.314 kB		 36.371 kB
11.72 kB		 1.052 kB
406 B
react-table
DataGrid		 161.002 kB
45.684 kB		 161.988 kB
46.053 kB		 986 B
369 B
react-table
Table (Primitives only)		 42.643 kB
13.82 kB		 43.592 kB
14.204 kB		 949 B
384 B
react-table
Table as DataGrid		 131.837 kB
36.531 kB		 132.788 kB
36.947 kB		 951 B
416 B
react-table
Table (Selection only)		 70.504 kB
19.962 kB		 71.456 kB
20.341 kB		 952 B
379 B
react-table
Table (Sort only)		 69.147 kB
19.574 kB		 70.099 kB
19.962 kB		 952 B
388 B
react-tag-picker
@fluentui/react-tag-picker - package		 184.106 kB
55.428 kB		 185.062 kB
55.83 kB		 956 B
402 B
react-tags
InteractionTag		 15.199 kB
6.157 kB		 16.237 kB
6.552 kB		 1.038 kB
395 B
react-tags
Tag		 29.016 kB
9.524 kB		 30.048 kB
9.917 kB		 1.032 kB
393 B
react-tags
TagGroup		 82.719 kB
24.524 kB		 83.668 kB
24.884 kB		 949 B
360 B
react-text
Text - Default		 17.061 kB
6.723 kB		 18.091 kB
7.126 kB		 1.03 kB
403 B
react-text
Text - Wrappers		 20.242 kB
7.048 kB		 21.27 kB
7.459 kB		 1.028 kB
411 B
react-textarea
Textarea		 26.572 kB
9.755 kB		 27.614 kB
10.149 kB		 1.042 kB
394 B
react-timepicker-compat
TimePicker		 107.387 kB
35.758 kB		 108.332 kB
36.107 kB		 945 B
349 B
react-toast
Toast (including Toaster)		 98.338 kB
29.591 kB		 99.284 kB
29.94 kB		 946 B
349 B
react-tooltip
Tooltip		 55.517 kB
19.515 kB		 56.462 kB
19.919 kB		 945 B
404 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
global-context
createContext		 510 B
328 B
global-context
createContextSelector		 537 B
339 B
react-calendar-compat
Calendar Compat		 150.095 kB
40.026 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-motion
@fluentui/react-motion - PresenceGroup		 1.714 kB
819 B
react-overflow
hooks only		 12.808 kB
4.819 kB
react-portal
Portal		 14.563 kB
5.118 kB
react-portal-compat
PortalCompatProvider		 8.39 kB
2.64 kB
react-positioning
usePositioning		 27.057 kB
9.698 kB
react-utilities
SSRProvider		 180 B
160 B
🤖 This report was generated against ed7c93c5724087f9d2466ee2f4a01b0532d0036d

@fabricteam
Copy link
Collaborator

fabricteam commented Oct 22, 2024 •
edited
Loading

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 626 645 5000
Button mount 312 318 5000
Field mount 1154 1157 5000
FluentProvider mount 726 770 5000
FluentProviderWithTheme mount 92 94 10
FluentProviderWithTheme virtual-rerender 41 41 10
FluentProviderWithTheme virtual-rerender-with-unmount 89 70 10
MakeStyles mount 870 852 50000
Persona mount 1794 1788 5000
SpinButton mount 1418 1356 5000
SwatchPicker mount 1657 1686 5000

fabricteam
fabricteam reviewed Oct 22, 2024
View reviewed changes
change/@fluentui-react-utilities-d6aa8438-f9c3-4a81-82c3-792a8d11b180.json
@@ -0,0 +1,7 @@
{
Copy link
Collaborator

@fabricteam fabricteam Oct 22, 2024 •
edited
Loading

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 1 screenshots
Image Name Diff(in Pixels) Image Type
Avatar Converged.badgeMask.chromium.png 4 Changed
Drawer 2 screenshots
Image Name Diff(in Pixels) Image Type
Drawer.Full Overlay High Contrast.chromium.png 2215 Changed
Drawer.overlay drawer full.chromium.png 1150 Changed

bsunderhus
bsunderhus commented Oct 22, 2024
View reviewed changes
packages/react-components/react-utilities/src/compose/memoize.ts
*
* @returns Current react fiber being rendered
*/
const getCurrentOwner = (): ReactFiberNode | null => {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Using same mechanism used by use-disposable for getting the fiber node

https://github.com/microsoft/use-disposable/blob/93c64ebf84131e4608ac1efc4cb261f5814c4ad1/src/useIsStrictMode.ts#L6

@bsunderhus bsunderhus force-pushed the react-utilities/feature(slots)--merge-refs-and-tabster-attributes branch from 46e2844 to 767c9f9 Compare October 22, 2024 11:45
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

At least 1 approving review is required to merge this pull request.

Assignees

@bsunderhus bsunderhus

Labels
None yet
Projects
None yet
Milestone
October Project Cycle Q4 2024
Development

Successfully merging this pull request may close these issues.
2 participants
@bsunderhus @fabricteam