feature(react-utilities): implements new slot methods (`slot` and `assertSlots`) #28373

bsunderhus · 2023-06-29T11:03:01Z

This PR implements the next steps on slot API as discussed on previous RFC's and issues on this topic.

Modifications

adds slot namespace that provides all methods to help create a slot
adds assertSlots method to ensure the state provided by a state hook is following proper new mechanisms
modifies @fluentui/react-jsx-runtime to properly support previous and new methods of slot creation accordingly
modifies resolveShorthand to do exactly the same thing as slot does

Related Issue(s)

Fixes [Feature]: Improve slot internal architecture #27376

fabricteam · 2023-06-29T11:16:51Z

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
`react-accordion` Accordion (including children components)	`88.574 kB` `26.835 kB`	`88.89 kB` `26.962 kB`	`316 B` `127 B`
`react-alert` Alert	`84.992 kB` `22.03 kB`	`85.295 kB` `22.133 kB`	`303 B` `103 B`
`react-avatar` Avatar	`47.739 kB` `14.521 kB`	`48.042 kB` `14.632 kB`	`303 B` `111 B`
`react-avatar` AvatarGroup	`15.695 kB` `6.314 kB`	`15.869 kB` `6.384 kB`	`174 B` `70 B`
`react-avatar` AvatarGroupItem	`63.915 kB` `19.001 kB`	`64.218 kB` `19.116 kB`	`303 B` `115 B`
`react-badge` Badge	`23.604 kB` `7.272 kB`	`23.915 kB` `7.383 kB`	`311 B` `111 B`
`react-badge` CounterBadge	`24.506 kB` `7.574 kB`	`24.816 kB` `7.686 kB`	`310 B` `112 B`
`react-badge` PresenceBadge	`22.253 kB` `7.891 kB`	`22.564 kB` `8 kB`	`311 B` `109 B`
`react-button` Button	`39.193 kB` `9.743 kB`	`39.503 kB` `9.864 kB`	`310 B` `121 B`
`react-button` CompoundButton	`46.661 kB` `11.257 kB`	`46.97 kB` `11.37 kB`	`309 B` `113 B`
`react-button` MenuButton	`43.553 kB` `10.979 kB`	`43.861 kB` `11.123 kB`	`308 B` `144 B`
`react-button` SplitButton	`51.758 kB` `12.571 kB`	`52.061 kB` `12.685 kB`	`303 B` `114 B`
`react-button` ToggleButton	`57.629 kB` `11.645 kB`	`57.931 kB` `11.766 kB`	`302 B` `121 B`
`react-card` Card - All	`89.673 kB` `25.378 kB`	`89.985 kB` `25.485 kB`	`312 B` `107 B`
`react-card` Card	`84.091 kB` `23.788 kB`	`84.403 kB` `23.89 kB`	`312 B` `102 B`
`react-card` CardFooter	`9.24 kB` `3.907 kB`	`9.543 kB` `4.011 kB`	`303 B` `104 B`
`react-card` CardHeader	`11.652 kB` `4.741 kB`	`11.962 kB` `4.849 kB`	`310 B` `108 B`
`react-card` CardPreview	`10.048 kB` `4.254 kB`	`10.358 kB` `4.363 kB`	`310 B` `109 B`
`react-checkbox` Checkbox	`33.194 kB` `10.708 kB`	`33.51 kB` `10.814 kB`	`316 B` `106 B`
`react-combobox` Combobox (including child components)	`88.007 kB` `28.369 kB`	`88.319 kB` `28.494 kB`	`312 B` `125 B`
`react-combobox` Dropdown (including child components)	`86.431 kB` `28 kB`	`86.745 kB` `28.111 kB`	`314 B` `111 B`
`react-components` react-components: Button, FluentProvider & webLightTheme	`68.696 kB` `18.504 kB`	`69 kB` `18.626 kB`	`304 B` `122 B`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`208.143 kB` `57.997 kB`	`208.449 kB` `58.124 kB`	`306 B` `127 B`
`react-components` react-components: FluentProvider & webLightTheme	`37.561 kB` `12.304 kB`	`37.737 kB` `12.383 kB`	`176 B` `79 B`
`react-datepicker-compat` DatePicker Compat	`218.19 kB` `58.196 kB`	`218.493 kB` `58.297 kB`	`303 B` `101 B`
`react-dialog` Dialog (including children components)	`87.355 kB` `26.401 kB`	`87.667 kB` `26.515 kB`	`312 B` `114 B`
`react-divider` Divider	`17.49 kB` `6.364 kB`	`17.794 kB` `6.475 kB`	`304 B` `111 B`
`react-field` Field	`18.163 kB` `6.945 kB`	`18.465 kB` `7.065 kB`	`302 B` `120 B`
`react-image` Image	`11.561 kB` `4.637 kB`	`11.728 kB` `4.717 kB`	`167 B` `80 B`
`react-infobutton` InfoButton	`126.802 kB` `39.356 kB`	`127.112 kB` `39.458 kB`	`310 B` `102 B`
`react-infobutton` InfoLabel	`130.392 kB` `40.474 kB`	`130.697 kB` `40.576 kB`	`305 B` `102 B`
`react-input` Input	`24.202 kB` `7.762 kB`	`24.515 kB` `7.865 kB`	`313 B` `103 B`
`react-label` Label	`10.186 kB` `4.253 kB`	`10.494 kB` `4.354 kB`	`308 B` `101 B`
`react-link` Link	`12.782 kB` `5.247 kB`	`12.949 kB` `5.319 kB`	`167 B` `72 B`
`react-menu` Menu (including children components)	`136.184 kB` `41.502 kB`	`136.49 kB` `41.618 kB`	`306 B` `116 B`
`react-menu` Menu (including selectable components)	`138.948 kB` `42.004 kB`	`139.254 kB` `42.117 kB`	`306 B` `113 B`
`react-persona` Persona	`55.293 kB` `16.535 kB`	`55.596 kB` `16.642 kB`	`303 B` `107 B`
`react-popover` Popover	`115.361 kB` `35.927 kB`	`115.537 kB` `35.988 kB`	`176 B` `61 B`
`react-progress` ProgressBar	`13.941 kB` `5.498 kB`	`14.244 kB` `5.604 kB`	`303 B` `106 B`
`react-provider` FluentProvider	`18.129 kB` `6.742 kB`	`18.305 kB` `6.824 kB`	`176 B` `82 B`
`react-radio` Radio	`27.017 kB` `8.638 kB`	`27.324 kB` `8.756 kB`	`307 B` `118 B`
`react-radio` RadioGroup	`11.352 kB` `4.749 kB`	`11.525 kB` `4.828 kB`	`173 B` `79 B`
`react-select` Select	`24.926 kB` `8.702 kB`	`25.238 kB` `8.805 kB`	`312 B` `103 B`
`react-slider` Slider	`34.846 kB` `11.153 kB`	`35.156 kB` `11.27 kB`	`310 B` `117 B`
`react-spinbutton` SpinButton	`33.723 kB` `10.337 kB`	`34.037 kB` `10.435 kB`	`314 B` `98 B`
`react-spinner` Spinner	`21.77 kB` `7.134 kB`	`22.083 kB` `7.235 kB`	`313 B` `101 B`
`react-switch` Switch	`29.472 kB` `9.219 kB`	`29.789 kB` `9.335 kB`	`317 B` `116 B`
`react-table` DataGrid	`158.497 kB` `42.459 kB`	`158.799 kB` `42.555 kB`	`302 B` `96 B`
`react-table` Table (Primitives only)	`43.95 kB` `12.263 kB`	`44.252 kB` `12.38 kB`	`302 B` `117 B`
`react-table` Table as DataGrid	`132.237 kB` `33.887 kB`	`132.544 kB` `34.012 kB`	`307 B` `125 B`
`react-table` Table (Selection only)	`77.612 kB` `19.179 kB`	`77.944 kB` `19.306 kB`	`332 B` `127 B`
`react-table` Table (Sort only)	`76.231 kB` `18.783 kB`	`76.563 kB` `18.908 kB`	`332 B` `125 B`
`react-tags-preview` InteractionTag	`34.418 kB` `9.254 kB`	`34.728 kB` `9.357 kB`	`310 B` `103 B`
`react-tags-preview` Tag	`25.962 kB` `8.49 kB`	`26.272 kB` `8.598 kB`	`310 B` `108 B`
`react-tags-preview` TagGroup	`69.398 kB` `20.364 kB`	`69.574 kB` `20.432 kB`	`176 B` `68 B`
`react-text` Text - Default	`12.574 kB` `4.982 kB`	`12.741 kB` `5.053 kB`	`167 B` `71 B`
`react-text` Text - Wrappers	`15.726 kB` `5.302 kB`	`15.907 kB` `5.369 kB`	`181 B` `67 B`
`react-textarea` Textarea	`27.677 kB` `9.115 kB`	`27.983 kB` `9.225 kB`	`306 B` `110 B`
`react-toast` Toast (including Toaster)	`88.356 kB` `26.092 kB`	`88.669 kB` `26.222 kB`	`313 B` `130 B`
`react-tooltip` Tooltip	`48.31 kB` `16.87 kB`	`48.622 kB` `16.981 kB`	`312 B` `111 B`
`react-tree` FlatTree	`131.726 kB` `37.293 kB`	`132.03 kB` `37.397 kB`	`304 B` `104 B`
`react-tree` PersonaFlatTree	`133.049 kB` `37.551 kB`	`133.355 kB` `37.659 kB`	`306 B` `108 B`
`react-tree` PersonaTree	`129.835 kB` `36.564 kB`	`130.141 kB` `36.676 kB`	`306 B` `112 B`
`react-tree` Tree	`128.51 kB` `36.303 kB`	`128.816 kB` `36.421 kB`	`306 B` `118 B`

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`global-context` createContext	`510 B` `330 B`
`global-context` createContextSelector	`537 B` `342 B`
`react-overflow` hooks only	`12.636 kB` `4.679 kB`
`react-portal` Portal	`11.935 kB` `4.421 kB`
`react-portal-compat` PortalCompatProvider	`6.48 kB` `2.203 kB`
`react-positioning` usePositioning	`25.111 kB` `9.1 kB`
`react-utilities` SSRProvider	`180 B` `159 B`

_{🤖 This report was generated against 192666b54cb365f4c958f46c3e097b597ebd94fc}

fabricteam · 2023-06-29T11:18:59Z

Perf Analysis (`@fluentui/react-components`)

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	597	638	5000	Possible regression
Field	mount	1042	1155	5000	Possible regression
SpinButton	mount	1356	1485	5000	Possible regression

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	597	638	5000	Possible regression
Button	mount	289	292	5000
Field	mount	1042	1155	5000	Possible regression
FluentProvider	mount	645	672	5000
FluentProviderWithTheme	mount	77	82	10
FluentProviderWithTheme	virtual-rerender	63	60	10
FluentProviderWithTheme	virtual-rerender-with-unmount	75	70	10
InfoButton	mount	11	11	5000
MakeStyles	mount	850	838	50000
Persona	mount	1643	1806	5000
SpinButton	mount	1356	1485	5000	Possible regression

codesandbox-ci · 2023-06-29T12:12:26Z

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.

Latest deployment of this branch, based on commit b3e7f76:

Sandbox	Source
@fluentui/react 8 starter	Configuration
@fluentui/react-components 9 starter	Configuration

size-auditor · 2023-06-29T12:12:48Z

Asset size changes

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

Baseline commit: 192666b54cb365f4c958f46c3e097b597ebd94fc (build)

fabricteam · 2023-06-29T12:20:55Z

🕵 fluentuiv9 No visual regressions between this PR and main

change/@fluentui-react-jsx-runtime-d2a505fc-6ffc-4679-aa63-5b29dcc83f7b.json

change/@fluentui-react-utilities-18c147c2-15a4-428f-89a7-049632ab27fe.json

packages/react-components/react-utilities/src/compose/getSlotsNext.test.tsx

packages/react-components/react-utilities/etc/react-utilities.api.md

packages/react-components/react-utilities/src/compose/slot.ts

packages/react-components/react-jsx-runtime/src/createElement.ts

packages/react-components/react-utilities/src/compose/slot.test.tsx

packages/react-components/react-utilities/src/compose/isSlot.test.tsx

behowell

Looks good! I had a few comments that might require bigger code changes to address. I apologize my review took so long, but I hope it's possible to make these changes in this PR, since this is a core API that will be difficult to change later.

packages/react-components/react-utilities/src/compose/slot.ts

packages/react-components/react-jsx-runtime/src/createElement.ts

packages/react-components/react-utilities/src/compose/types.ts

change/@fluentui-react-jsx-runtime-d2a505fc-6ffc-4679-aa63-5b29dcc83f7b.json

fabricteam · 2023-07-20T11:37:05Z

🕵 fluentuiv9 No visual regressions between this PR and main

…9dcc83f7b.json Co-authored-by: Oleksandr Fediashov <[email protected]>

…2ab27fe.json Co-authored-by: Oleksandr Fediashov <[email protected]>

+ removes re-declaring a slot as an option for slot method

packages/react-components/react-utilities/src/compose/slot.ts

* master: chore(cxe-prg): migrate to new slot API (microsoft#28752) chore(teams-prg): migrate to new slot API (microsoft#28751) chore: re-export slot and assertSlots methods (microsoft#28755) Docs(react-tree): Improve docs and stories (microsoft#28741) feat: implements nested tree selection (microsoft#28668) applying package updates applying package updates feature(react-utilities): implements new slot methods (`slot` and `assertSlots`) (microsoft#28373) fix(TimePicker): Selection now works in locales that don't use "am"/"pm" in their time format (microsoft#28469) bugfix: ensures controlled state works properly + (microsoft#28665) feat(tokens): Add status color tokens (microsoft#28006) feat(tokens): Add colorBrandStroke2Contrast and colorNeutralStrokeAlpha2 (microsoft#28638) Made BreadcrumbButton consistent with Item and Link (microsoft#28672)

* master: chore(cxe-prg): migrate to new slot API (microsoft#28752) chore(teams-prg): migrate to new slot API (microsoft#28751) chore: re-export slot and assertSlots methods (microsoft#28755) Docs(react-tree): Improve docs and stories (microsoft#28741) feat: implements nested tree selection (microsoft#28668) applying package updates applying package updates feature(react-utilities): implements new slot methods (`slot` and `assertSlots`) (microsoft#28373) fix(TimePicker): Selection now works in locales that don't use "am"/"pm" in their time format (microsoft#28469) bugfix: ensures controlled state works properly + (microsoft#28665) feat(tokens): Add status color tokens (microsoft#28006) feat(tokens): Add colorBrandStroke2Contrast and colorNeutralStrokeAlpha2 (microsoft#28638) Made BreadcrumbButton consistent with Item and Link (microsoft#28672) fix(EventListener): do not use `defaultProps` (microsoft#28725)

bsunderhus added Package: utilities Fluent UI react-components (v9) labels Jun 29, 2023

bsunderhus self-assigned this Jun 29, 2023

github-actions bot added this to the June Project Cycle Q2 2023 milestone Jun 29, 2023

bsunderhus force-pushed the react-utilities/feature--implements-slot-method branch 4 times, most recently from 2758bd0 to 0d16b36 Compare June 29, 2023 11:59

bsunderhus force-pushed the react-utilities/feature--implements-slot-method branch from 0d16b36 to 5ed7da9 Compare June 29, 2023 13:14

bsunderhus requested review from behowell and layershifter June 29, 2023 14:16

bsunderhus changed the title ~~feature(react-utilities): implements new slot methods (slot and assertSlots)~~ feature(react-utilities): implements new slot methods (slot and assertSlots) Jun 29, 2023

bsunderhus marked this pull request as ready for review June 30, 2023 06:22

bsunderhus requested a review from a team as a code owner June 30, 2023 06:22

layershifter reviewed Jul 4, 2023

View reviewed changes

github-actions bot modified the milestones: June Project Cycle Q2 2023, July Project Cycle Q3 2023 Jul 4, 2023

bsunderhus mentioned this pull request Jul 5, 2023

feat: Implement DataGrid virtualized by react-window microsoft/fluentui-contrib#18

Merged

bsunderhus force-pushed the react-utilities/feature--implements-slot-method branch 3 times, most recently from ca99c36 to cbd2133 Compare July 5, 2023 12:31

layershifter reviewed Jul 7, 2023

View reviewed changes

packages/react-components/react-utilities/src/compose/slot.test.tsx Show resolved Hide resolved

layershifter reviewed Jul 7, 2023

View reviewed changes

packages/react-components/react-utilities/src/compose/isSlot.test.tsx Outdated Show resolved Hide resolved

layershifter approved these changes Jul 7, 2023

View reviewed changes

behowell reviewed Jul 12, 2023

View reviewed changes

behowell mentioned this pull request Jul 12, 2023

Split metadata into separate elementType and renderFunction props bsunderhus/fluentui#1

Closed

bsunderhus force-pushed the react-utilities/feature--implements-slot-method branch 2 times, most recently from 4221735 to 2e51245 Compare July 17, 2023 13:22

fabricteam reviewed Jul 20, 2023

View reviewed changes

change/@fluentui-react-jsx-runtime-d2a505fc-6ffc-4679-aa63-5b29dcc83f7b.json Show resolved Hide resolved

bsunderhus force-pushed the react-utilities/feature--implements-slot-method branch 2 times, most recently from a0ba9f6 to b1aab1b Compare July 20, 2023 11:32

bsunderhus force-pushed the react-utilities/feature--implements-slot-method branch from b1aab1b to 67c0066 Compare July 20, 2023 12:11

bsunderhus and others added 8 commits August 3, 2023 10:14

feature: implements new slot methods (slot and assertSlots)

95c371d

Update change/@fluentui-react-jsx-runtime-d2a505fc-6ffc-4679-aa63-5b2…

b313bab

…9dcc83f7b.json Co-authored-by: Oleksandr Fediashov <[email protected]>

Update change/@fluentui-react-utilities-18c147c2-15a4-428f-89a7-04963…

7e6ae24

…2ab27fe.json Co-authored-by: Oleksandr Fediashov <[email protected]>

chore: adds tests to slot, isSlot and assertSlots

78e1884

chore: updates tests & ensures it doesn't throw in production

e8f9e58

chore: removes metadata symbol

8c1cdb7

chore: renames SlotComponent to SlotComponentType

dfcc54b

+ removes re-declaring a slot as an option for slot method

chore: renames required to renderByDefault

a3aa2ea

bsunderhus force-pushed the react-utilities/feature--implements-slot-method branch from 67c0066 to e9196d5 Compare August 3, 2023 10:46

github-actions bot modified the milestones: July Project Cycle Q3 2023, August Project Cycle Q4 2023 Aug 3, 2023

bsunderhus force-pushed the react-utilities/feature--implements-slot-method branch from e9196d5 to 5727097 Compare August 3, 2023 11:04

layershifter reviewed Aug 3, 2023

View reviewed changes

packages/react-components/react-utilities/src/compose/slot.ts Outdated Show resolved Hide resolved

bsunderhus force-pushed the react-utilities/feature--implements-slot-method branch from 5727097 to c08574f Compare August 3, 2023 19:47

chore: converts slot to a namespace

b3e7f76

bsunderhus force-pushed the react-utilities/feature--implements-slot-method branch from c08574f to b3e7f76 Compare August 3, 2023 19:47

bsunderhus merged commit 6a8afe2 into microsoft:master Aug 4, 2023

feature(react-utilities): implements new slot methods (slot and assertSlots) #28373

feature(react-utilities): implements new slot methods (slot and assertSlots) #28373

Uh oh!

Conversation

bsunderhus commented Jun 29, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Modifications

Related Issue(s)

Uh oh!

fabricteam commented Jun 29, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Bundle size report

Uh oh!

fabricteam commented Jun 29, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Perf Analysis (@fluentui/react-components)

Uh oh!

codesandbox-ci bot commented Jun 29, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

size-auditor bot commented Jun 29, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Asset size changes

Uh oh!

fabricteam commented Jun 29, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🕵 fluentuiv9 No visual regressions between this PR and main

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

behowell left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

fabricteam commented Jul 20, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🕵 fluentuiv9 No visual regressions between this PR and main

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

feature(react-utilities): implements new slot methods (`slot` and `assertSlots`) #28373

feature(react-utilities): implements new slot methods (`slot` and `assertSlots`) #28373

bsunderhus commented Jun 29, 2023 •

edited

Loading

fabricteam commented Jun 29, 2023 •

edited

Loading

fabricteam commented Jun 29, 2023 •

edited

Loading

Perf Analysis (`@fluentui/react-components`)

codesandbox-ci bot commented Jun 29, 2023 •

edited

Loading

size-auditor bot commented Jun 29, 2023 •

edited

Loading

fabricteam commented Jun 29, 2023 •

edited

Loading

fabricteam commented Jul 20, 2023 •

edited

Loading