Skip to content

Updated to use single hook selector#27491

Merged
GeoffCoxMSFT merged 7 commits intomicrosoft:masterfrom
GeoffCoxMSFT:custom-style-hooks-selector
Apr 24, 2023
Merged

Updated to use single hook selector#27491
GeoffCoxMSFT merged 7 commits intomicrosoft:masterfrom
GeoffCoxMSFT:custom-style-hooks-selector

Conversation

@GeoffCoxMSFT
Copy link
Member

@GeoffCoxMSFT GeoffCoxMSFT commented Apr 7, 2023

Problem

The large number of no-op implementation for the default value of the custom hooks is preventing bundling minification.

This is an alternative approach to #27404

Changes

  • removed the useCustomStyleHooks that returns every hook
  • added useCustomStyleHook that returns a single hook
  • updated to have default be an empty object
  • updated context type to be a partial
  • updated shallow merge to handle partial
  • updated every call to useCustomStyleHooks with useCustomStyleHook('hookname')

Issues

Fixes #27139

@github-actions github-actions bot added this to the April Project Cycle Q2 2023 milestone Apr 7, 2023
@GeoffCoxMSFT GeoffCoxMSFT requested review from a team and miroslavstastny and removed request for a team April 7, 2023 20:44
@fabricteam
Copy link
Collaborator

fabricteam commented Apr 7, 2023 •
edited
Loading

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-accordion
Accordion (including children components)		 88.891 kB
26.6 kB		 86.172 kB
26.143 kB		 -2.719 kB
-457 B
react-alert
Alert		 95.74 kB
23.13 kB		 93.032 kB
22.65 kB		 -2.708 kB
-480 B
react-avatar
Avatar		 59.494 kB
15.587 kB		 56.797 kB
15.118 kB		 -2.697 kB
-469 B
react-avatar
AvatarGroup		 18.223 kB
6.7 kB		 15.632 kB
6.258 kB		 -2.591 kB
-442 B
react-avatar
AvatarGroupItem		 75.719 kB
20.079 kB		 73.011 kB
19.616 kB		 -2.708 kB
-463 B
react-badge
Badge		 26.099 kB
7.632 kB		 23.512 kB
7.197 kB		 -2.587 kB
-435 B
react-badge
CounterBadge		 27.084 kB
7.943 kB		 24.416 kB
7.506 kB		 -2.668 kB
-437 B
react-badge
PresenceBadge		 34.573 kB
8.739 kB		 31.904 kB
8.296 kB		 -2.669 kB
-443 B
react-button
Button		 39.864 kB
9.996 kB		 37.179 kB
9.534 kB		 -2.685 kB
-462 B
react-button
CompoundButton		 47.012 kB
11.471 kB		 44.328 kB
11.016 kB		 -2.684 kB
-455 B
react-button
MenuButton		 44.55 kB
11.357 kB		 41.866 kB
10.861 kB		 -2.684 kB
-496 B
react-button
SplitButton		 52.961 kB
12.932 kB		 50.254 kB
12.441 kB		 -2.707 kB
-491 B
react-button
ToggleButton		 58.243 kB
11.927 kB		 55.559 kB
11.479 kB		 -2.684 kB
-448 B
react-checkbox
Checkbox		 37.083 kB
11.285 kB		 34.379 kB
10.833 kB		 -2.704 kB
-452 B
react-combobox
Combobox (including child components)		 89.775 kB
28.537 kB		 87.056 kB
28.011 kB		 -2.719 kB
-526 B
react-combobox
Dropdown (including child components)		 88.459 kB
28.262 kB		 85.74 kB
27.747 kB		 -2.719 kB
-515 B
react-components
react-components: Button, FluentProvider & webLightTheme		 67.986 kB
18.429 kB		 65.31 kB
17.931 kB		 -2.676 kB
-498 B
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover		 207.27 kB
57.634 kB		 204.5 kB
57.183 kB		 -2.77 kB
-451 B
react-components
react-components: FluentProvider & webLightTheme		 38.773 kB
12.375 kB		 36.086 kB
11.9 kB		 -2.687 kB
-475 B
react-datepicker-compat
DatePicker Compat		 223.13 kB
58.944 kB		 220.457 kB
58.521 kB		 -2.673 kB
-423 B
react-dialog
Dialog (including children components)		 93.747 kB
27.527 kB		 91.028 kB
27.083 kB		 -2.719 kB
-444 B
react-divider
Divider		 20.072 kB
6.742 kB		 17.399 kB
6.298 kB		 -2.673 kB
-444 B
react-field
Field		 21.537 kB
7.454 kB		 18.864 kB
7.004 kB		 -2.673 kB
-450 B
react-image
Image		 14.067 kB
5.012 kB		 11.479 kB
4.573 kB		 -2.588 kB
-439 B
react-infobutton
InfoButton		 130.761 kB
39.509 kB		 128.088 kB
39.045 kB		 -2.673 kB
-464 B
react-infobutton
InfoLabel		 133.987 kB
40.517 kB		 131.371 kB
40.039 kB		 -2.616 kB
-478 B
react-input
Input		 26.806 kB
8.151 kB		 24.133 kB
7.723 kB		 -2.673 kB
-428 B
react-label
Label		 12.693 kB
4.626 kB		 10.104 kB
4.185 kB		 -2.589 kB
-441 B
react-menu
Menu (including children components)		 131.068 kB
39.705 kB		 128.361 kB
39.234 kB		 -2.707 kB
-471 B
react-menu
Menu (including selectable components)		 134.074 kB
40.243 kB		 131.345 kB
39.749 kB		 -2.729 kB
-494 B
react-persona
Persona		 66.426 kB
17.533 kB		 63.718 kB
17.048 kB		 -2.708 kB
-485 B
react-popover
Popover		 117.744 kB
35.886 kB		 115.071 kB
35.448 kB		 -2.673 kB
-438 B
react-progress
ProgressBar		 16.445 kB
5.865 kB		 13.856 kB
5.434 kB		 -2.589 kB
-431 B
react-provider
FluentProvider		 20.72 kB
7.14 kB		 18.033 kB
6.666 kB		 -2.687 kB
-474 B
react-radio
Radio		 29.897 kB
9.112 kB		 27.282 kB
8.661 kB		 -2.615 kB
-451 B
react-radio
RadioGroup		 13.984 kB
5.154 kB		 11.312 kB
4.71 kB		 -2.672 kB
-444 B
react-select
Select		 28.03 kB
9.235 kB		 25.357 kB
8.798 kB		 -2.673 kB
-437 B
react-slider
Slider		 36.947 kB
11.506 kB		 34.274 kB
11.069 kB		 -2.673 kB
-437 B
react-spinbutton
SpinButton		 36.718 kB
10.802 kB		 34.045 kB
10.376 kB		 -2.673 kB
-426 B
react-spinner
Spinner		 23.498 kB
7.244 kB		 20.882 kB
6.798 kB		 -2.616 kB
-446 B
react-switch
Switch		 32.503 kB
9.732 kB		 29.806 kB
9.274 kB		 -2.697 kB
-458 B
react-table
DataGrid		 150.617 kB
41.075 kB		 147.821 kB
40.593 kB		 -2.796 kB
-482 B
react-table
Table (Primitives only)		 47.03 kB
12.784 kB		 44.348 kB
12.347 kB		 -2.682 kB
-437 B
react-table
Table as DataGrid		 133.181 kB
33.644 kB		 130.378 kB
33.193 kB		 -2.803 kB
-451 B
react-table
Table (Selection only)		 81.092 kB
19.641 kB		 78.289 kB
19.194 kB		 -2.803 kB
-447 B
react-table
Table (Sort only)		 80.422 kB
19.453 kB		 77.619 kB
19.004 kB		 -2.803 kB
-449 B
react-text
Text - Default		 15.08 kB
5.353 kB		 12.492 kB
4.92 kB		 -2.588 kB
-433 B
react-textarea
Textarea		 30.235 kB
9.521 kB		 27.562 kB
9.087 kB		 -2.673 kB
-434 B
react-tooltip
Tooltip		 49.492 kB
16.862 kB		 46.819 kB
16.412 kB		 -2.673 kB
-450 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-card
Card - All		 86.061 kB
24.345 kB
react-card
Card		 80.997 kB
22.895 kB
react-card
CardFooter		 9.158 kB
3.844 kB
react-card
CardHeader		 11.048 kB
4.538 kB
react-card
CardPreview		 9.963 kB
4.192 kB
react-link
Link		 12.357 kB
5.091 kB
react-portal
Portal		 11.649 kB
4.263 kB
react-portal-compat
PortalCompatProvider		 6.446 kB
2.185 kB
react-positioning
usePositioning		 24.008 kB
8.798 kB
react-text
Text - Wrappers		 15.63 kB
5.25 kB
🤖 This report was generated against c16f83e22aadf7756bf50d7f72d1ffa4b991dd11

@fabricteam
Copy link
Collaborator

fabricteam commented Apr 7, 2023 •
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 699 705 5000
Button mount 380 387 5000
Field mount 1273 1292 5000
FluentProvider mount 930 902 5000
FluentProviderWithTheme mount 120 118 10
FluentProviderWithTheme virtual-rerender 96 99 10
FluentProviderWithTheme virtual-rerender-with-unmount 112 111 10
InfoButton mount 14 19 5000
MakeStyles mount 1134 1134 50000
Persona mount 2026 1928 5000
SpinButton mount 1565 1599 5000

@size-auditor
Copy link

size-auditor bot commented Apr 7, 2023 •
edited
Loading

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: c16f83e22aadf7756bf50d7f72d1ffa4b991dd11 (build)

@fabricteam
Copy link
Collaborator

fabricteam commented Apr 7, 2023 •
edited
Loading

🕵 fluentuiv9 No visual regressions between this PR and main

@GeoffCoxMSFT GeoffCoxMSFT marked this pull request as ready for review April 19, 2023 18:03
@GeoffCoxMSFT GeoffCoxMSFT force-pushed the custom-style-hooks-selector branch from 8293954 to 358db07 Compare April 20, 2023 19:41
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Apr 25, 2023
@marcosmoura
Merge branch 'master' into feat/drawer-components
e98fc9e 
* master:
  applying package updates
  microsoft#25730: TimePicker Default Value Fix, Controllable Usage, Example Updates (microsoft#26482)
  docs(react-datepicker-compat): Add description to README.md (microsoft#27677)
  Updated to use single hook selector (microsoft#27491)
  fix: Make border around Avatar's badge transparent using a mask (microsoft#27527)
  Disable focus on non-interactive elements (microsoft#27580)
  feat(react-drawer): implement "prevent close on click outside" feature (microsoft#27551)
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Apr 25, 2023
@marcosmoura
Merge branch 'feat/drawer-components' into feat/drawer-header
c1151a3 
* feat/drawer-components: (81 commits)
  docs: remove TODO marks
  fix: remove conflict code leftover
  applying package updates
  microsoft#25730: TimePicker Default Value Fix, Controllable Usage, Example Updates (microsoft#26482)
  docs(react-datepicker-compat): Add description to README.md (microsoft#27677)
  Updated to use single hook selector (microsoft#27491)
  fix: Make border around Avatar's badge transparent using a mask (microsoft#27527)
  Disable focus on non-interactive elements (microsoft#27580)
  feat(react-drawer): implement "prevent close on click outside" feature (microsoft#27551)
  fix(react-datepicker-compat): Make onValidationError onValidationResult so the error is updated when there's no longer an error (microsoft#27655)
  Fix `@fluentui/react-portal-compat`: to be compatible with React 18 (microsoft#27577)
  chore: fix versions of @fluentui/react-datepicker-compat (microsoft#27666)
  applying package updates
  applying package updates
  Make line chart screen reader accessible (microsoft#27632)
  fix(react-examples): Improve keyboard navigation in ContextualMenu.CustomMenuList (microsoft#25172)
  docs(react-textarea): Update examples to use Field (microsoft#27644)
  bugfix(react-dialog): `DialogTitle` root as `h2` by default (microsoft#27555)
  applying package updates
  chore: restructure stories, add separate category for flat tree (microsoft#27586)
  ...
@msft-fluent-ui-bot
Copy link
Collaborator

msft-fluent-ui-bot commented May 15, 2023

🎉@fluentui/react-combobox@v9.3.0 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

msft-fluent-ui-bot commented May 15, 2023

🎉@fluentui/react-badge@v9.1.11 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

msft-fluent-ui-bot commented May 15, 2023

🎉@fluentui/react-accordion@v9.1.11 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

msft-fluent-ui-bot commented May 15, 2023

🎉@fluentui/react-avatar@v9.5.0 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot msft-fluent-ui-bot mentioned this pull request May 15, 2023
Closed
@msft-fluent-ui-bot
Copy link
Collaborator

msft-fluent-ui-bot commented May 15, 2023

🎉@fluentui/react-progress@v9.1.12 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

msft-fluent-ui-bot commented May 15, 2023

🎉@fluentui/react-provider@v9.6.0 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

msft-fluent-ui-bot commented May 15, 2023

🎉@fluentui/react-button@v9.3.11 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

msft-fluent-ui-bot commented May 15, 2023

🎉@fluentui/react-checkbox@v9.1.12 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

msft-fluent-ui-bot commented May 15, 2023

🎉@fluentui/react-slider@v9.1.12 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

msft-fluent-ui-bot commented May 15, 2023

🎉@fluentui/react-shared-contexts@v9.4.0 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

msft-fluent-ui-bot commented May 15, 2023

🎉@fluentui/react-switch@v9.1.12 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

msft-fluent-ui-bot commented May 15, 2023

🎉@fluentui/react-tooltip@v9.2.11 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

msft-fluent-ui-bot commented May 15, 2023

🎉@fluentui/react-divider@v9.2.11 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

msft-fluent-ui-bot commented May 15, 2023

🎉@fluentui/react-select@v9.1.12 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

msft-fluent-ui-bot commented May 15, 2023

🎉@fluentui/react-toolbar@v9.1.12 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

msft-fluent-ui-bot commented May 15, 2023

🎉@fluentui/react-image@v9.1.8 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

msft-fluent-ui-bot commented May 15, 2023

🎉@fluentui/react-spinner@v9.1.11 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

msft-fluent-ui-bot commented May 15, 2023

🎉@fluentui/react-dialog@v9.5.4 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

msft-fluent-ui-bot commented May 15, 2023

🎉@fluentui/react-radio@v9.1.12 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

msft-fluent-ui-bot commented May 15, 2023

🎉@fluentui/react-spinbutton@v9.2.12 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

msft-fluent-ui-bot commented May 15, 2023

🎉@fluentui/react-text@v9.3.8 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

msft-fluent-ui-bot commented May 15, 2023

🎉@fluentui/react-persona@v9.2.10 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

msft-fluent-ui-bot commented May 15, 2023

🎉@fluentui/react-tabs@v9.3.12 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

msft-fluent-ui-bot commented May 15, 2023

🎉@fluentui/react-textarea@v9.3.12 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

msft-fluent-ui-bot commented May 15, 2023

🎉@fluentui/react-label@v9.1.11 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

msft-fluent-ui-bot commented May 15, 2023

🎉@fluentui/react-input@v9.4.12 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

msft-fluent-ui-bot commented May 15, 2023

🎉@fluentui/react-popover@v9.5.11 has been released which incorporates this pull request.:tada:

Handy links:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@miroslavstastny miroslavstastny miroslavstastny left review comments

@micahgodbolt micahgodbolt micahgodbolt approved these changes

@smhigley smhigley smhigley approved these changes

@sopranopillow sopranopillow sopranopillow approved these changes

@layershifter layershifter layershifter approved these changes

@spmonahan spmonahan spmonahan approved these changes

@chpalac chpalac Awaiting requested review from chpalac

@khmakoto khmakoto Awaiting requested review from khmakoto

+4 more reviewers

@marcosmoura marcosmoura marcosmoura approved these changes

@ling1726 ling1726 ling1726 approved these changes

@behowell behowell behowell approved these changes

@tomi-msft tomi-msft tomi-msft approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

@GeoffCoxMSFT GeoffCoxMSFT

Labels

None yet

Projects

None yet

Milestone

April Project Cycle Q2 2023

Development

Successfully merging this pull request may close these issues.

Custom style hooks adds object with properties that can't be minified by Terser