Add react-18-tests-v9 package to apps by micahgodbolt · Pull Request #23807 · microsoft/fluentui

micahgodbolt · 2022-07-05T19:26:25Z

This PR does two things

It creates a place to write tests that will run in React 18 (with one test already written)
I also creates a simple dev environment to triage issues, and work on possible solutions

fabricteam · 2022-07-05T19:32:20Z

📊 Bundle size report

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`global-context` createContext	`533 B` `341 B`
`global-context` createContextSelector	`554 B` `348 B`
`priority-overflow` createOverflowManager	`2.936 kB` `1.212 kB`
`react-accordion` Accordion (including children components)	`79.349 kB` `24.053 kB`
`react-alert` Alert	`83.79 kB` `20.841 kB`
`react-avatar` Avatar	`48.283 kB` `13.644 kB`
`react-avatar` AvatarGroup	`14.859 kB` `5.939 kB`
`react-avatar` AvatarGroupItem	`68.251 kB` `18.987 kB`
`react-badge` Badge	`22.503 kB` `7.153 kB`
`react-badge` CounterBadge	`23.406 kB` `7.449 kB`
`react-badge` PresenceBadge	`23.947 kB` `7.022 kB`
`react-button` Button	`36.396 kB` `9.579 kB`
`react-button` CompoundButton	`43.469 kB` `10.812 kB`
`react-button` MenuButton	`39.014 kB` `10.456 kB`
`react-button` SplitButton	`46.544 kB` `11.84 kB`
`react-button` ToggleButton	`51.91 kB` `11.003 kB`
`react-card` Card - All	`67.458 kB` `19.264 kB`
`react-card` Card	`63.14 kB` `18.176 kB`
`react-card` CardFooter	`8.461 kB` `3.555 kB`
`react-card` CardHeader	`9.504 kB` `3.896 kB`
`react-card` CardPreview	`8.562 kB` `3.61 kB`
`react-combobox` Combobox (including child components)	`72.549 kB` `23.686 kB`
`react-combobox` Dropdown (including child components)	`70.813 kB` `23.222 kB`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`188.818 kB` `51.901 kB`
`react-components` react-components: FluentProvider & webLightTheme	`32.895 kB` `10.778 kB`
`react-dialog` Dialog (including children components)	`85.361 kB` `25.458 kB`
`react-divider` Divider	`16.359 kB` `5.853 kB`
`react-image` Image	`10.68 kB` `4.215 kB`
`react-input` Input	`23.554 kB` `7.644 kB`
`react-label` Label	`9.238 kB` `3.815 kB`
`react-link` Link	`12.231 kB` `4.925 kB`
`react-menu` Menu (including children components)	`115.697 kB` `35.316 kB`
`react-menu` Menu (including selectable components)	`118.896 kB` `35.806 kB`
`react-overflow` hooks only	`10.685 kB` `4.104 kB`
`react-popover` Popover	`102.837 kB` `31.496 kB`
`react-portal` Portal	`10.576 kB` `3.875 kB`
`react-positioning` usePositioning	`19.7 kB` `7.404 kB`
`react-provider` FluentProvider	`15.655 kB` `5.835 kB`
`react-radio` Radio	`36.025 kB` `11.914 kB`
`react-radio` RadioGroup	`14.148 kB` `5.654 kB`
`react-select` Select	`20.746 kB` `7.299 kB`
`react-slider` Slider	`32.07 kB` `10.033 kB`
`react-spinbutton` SpinButton	`43.899 kB` `12.362 kB`
`react-spinner` Spinner	`19.848 kB` `6.384 kB`
`react-switch` Switch	`32.562 kB` `10.253 kB`
`react-text` Text - Default	`11.682 kB` `4.561 kB`
`react-text` Text - Wrappers	`14.992 kB` `4.995 kB`
`react-textarea` Textarea	`23.674 kB` `7.83 kB`
`react-theme` Single theme token import	`69 B` `89 B`
`react-theme` Teams: all themes	`29.224 kB` `6.255 kB`
`react-theme` Teams: Light theme	`17.088 kB` `4.89 kB`
`react-tooltip` Tooltip	`41.504 kB` `14.622 kB`
`react-utilities` SSRProvider	`180 B` `159 B`

_{🤖 This report was generated against c8f9d1ef1983bffe9917da81b097f503f587faa9}

codesandbox-ci · 2022-07-05T19:33:34Z

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 02c8710:

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

fabricteam · 2022-07-05T19:39:11Z

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

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	1555	1641	5000
Button	mount	1087	1099	5000
FluentProvider	mount	1820	1827	5000
FluentProviderWithTheme	mount	693	671	10
FluentProviderWithTheme	virtual-rerender	638	623	10
FluentProviderWithTheme	virtual-rerender-with-unmount	685	673	10
MakeStyles	mount	2211	2181	50000
SpinButton	mount	3076	3178	5000

fabricteam · 2022-07-05T19:45:51Z

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

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
PortalMinimalPerf.default	173	156	1.11:1
DividerMinimalPerf.default	390	354	1.1:1
TextAreaMinimalPerf.default	567	520	1.09:1
HeaderMinimalPerf.default	384	355	1.08:1
AnimationMinimalPerf.default	568	533	1.07:1
ListWith60ListItems.default	674	628	1.07:1
RefMinimalPerf.default	235	219	1.07:1
AvatarMinimalPerf.default	195	184	1.06:1
LabelMinimalPerf.default	406	383	1.06:1
LayoutMinimalPerf.default	367	345	1.06:1
ReactionMinimalPerf.default	425	402	1.06:1
TableMinimalPerf.default	452	427	1.06:1
ButtonSlotsPerf.default	580	552	1.05:1
CarouselMinimalPerf.default	494	472	1.05:1
DropdownManyItemsPerf.default	740	708	1.05:1
ItemLayoutMinimalPerf.default	1329	1263	1.05:1
AttachmentSlotsPerf.default	1150	1108	1.04:1
TextMinimalPerf.default	389	374	1.04:1
TooltipMinimalPerf.default	2564	2461	1.04:1
BoxMinimalPerf.default	357	348	1.03:1
CardMinimalPerf.default	577	559	1.03:1
FlexMinimalPerf.default	308	299	1.03:1
GridMinimalPerf.default	359	350	1.03:1
ListCommonPerf.default	684	664	1.03:1
PopupMinimalPerf.default	642	621	1.03:1
RadioGroupMinimalPerf.default	476	463	1.03:1
ButtonMinimalPerf.default	181	177	1.02:1
ChatMinimalPerf.default	763	749	1.02:1
CheckboxMinimalPerf.default	2769	2723	1.02:1
LoaderMinimalPerf.default	695	682	1.02:1
MenuMinimalPerf.default	877	861	1.02:1
SliderMinimalPerf.default	1824	1780	1.02:1
SplitButtonMinimalPerf.default	4685	4588	1.02:1
StatusMinimalPerf.default	746	729	1.02:1
AccordionMinimalPerf.default	149	147	1.01:1
DropdownMinimalPerf.default	3166	3150	1.01:1
ListNestedPerf.default	596	588	1.01:1
ToolbarMinimalPerf.default	1033	1022	1.01:1
TreeMinimalPerf.default	829	818	1.01:1
ChatDuplicateMessagesPerf.default	298	297	1:1
ChatWithPopoverPerf.default	404	402	1:1
DatepickerMinimalPerf.default	5899	5927	1:1
InputMinimalPerf.default	1335	1338	1:1
ListMinimalPerf.default	523	523	1:1
MenuButtonMinimalPerf.default	1800	1802	1:1
RosterPerf.default	2301	2302	1:1
ProviderMergeThemesPerf.default	1222	1222	1:1
ProviderMinimalPerf.default	407	405	1:1
IconMinimalPerf.default	678	676	1:1
CustomToolbarPrototype.default	3078	3078	1:1
ButtonOverridesMissPerf.default	1535	1554	0.99:1
EmbedMinimalPerf.default	4332	4354	0.99:1
FormMinimalPerf.default	406	409	0.99:1
VideoMinimalPerf.default	761	771	0.99:1
DialogMinimalPerf.default	792	807	0.98:1
HeaderSlotsPerf.default	810	824	0.98:1
ImageMinimalPerf.default	411	420	0.98:1
SegmentMinimalPerf.default	356	364	0.98:1
TableManyItemsPerf.default	2026	2057	0.98:1
TreeWith60ListItems.default	165	168	0.98:1
AlertMinimalPerf.default	265	276	0.96:1
AttachmentMinimalPerf.default	156	164	0.95:1
SkeletonMinimalPerf.default	362	382	0.95:1

size-auditor · 2022-07-05T19:56:27Z

Asset size changes

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

Baseline commit: c8f9d1ef1983bffe9917da81b097f503f587faa9 (build)

fabricteam · 2022-07-05T19:58:35Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
BaseButton	mount	730	739	5000
Breadcrumb	mount	2456	2394	1000
Checkbox	mount	2127	2145	5000
CheckboxBase	mount	1813	1874	5000
ChoiceGroup	mount	3883	3970	5000
ComboBox	mount	798	766	1000
CommandBar	mount	8810	9014	1000
ContextualMenu	mount	11040	10525	1000
DefaultButton	mount	928	865	5000
DetailsRow	mount	3125	3181	5000
DetailsRowFast	mount	3125	3047	5000
DetailsRowNoStyles	mount	3042	2962	5000
Dialog	mount	2411	2504	1000
DocumentCardTitle	mount	133	151	1000
Dropdown	mount	2667	2727	5000
FocusTrapZone	mount	1569	1573	5000
FocusZone	mount	1527	1418	5000
IconButton	mount	1368	1520	5000
Label	mount	301	266	5000
Layer	mount	3702	3701	5000
Link	mount	401	402	5000
MenuButton	mount	1271	1241	5000
MessageBar	mount	1777	1879	5000
Nav	mount	2728	2836	1000
OverflowSet	mount	842	856	5000
Panel	mount	1989	2036	1000
Persona	mount	834	838	1000
Pivot	mount	1179	1137	1000
PrimaryButton	mount	1079	1011	5000
Rating	mount	6065	6427	5000
SearchBox	mount	1067	1090	5000
Shimmer	mount	2324	2492	5000
Slider	mount	1683	1626	5000
SpinButton	mount	4104	4128	5000
Spinner	mount	374	377	5000
SplitButton	mount	2643	2667	5000
Stack	mount	373	380	5000
StackWithIntrinsicChildren	mount	1740	1939	5000
StackWithTextChildren	mount	4312	4196	5000
SwatchColorPicker	mount	9709	9619	5000
TagPicker	mount	2133	2117	5000
TeachingBubble	mount	84452	89878	5000
Text	mount	363	353	5000
TextField	mount	1167	1136	5000
ThemeProvider	mount	1044	1026	5000
ThemeProvider	virtual-rerender	588	655	5000
ThemeProvider	virtual-rerender-with-unmount	1683	1609	5000
Toggle	mount	689	667	5000
buttonNative	mount	121	95	5000

layershifter · 2022-07-13T07:40:37Z

Can you please clarify the goal of that PR? Will it be used for manual or automated testing?

micahgodbolt · 2022-07-13T21:52:34Z

Can you please clarify the goal of that PR? Will it be used for manual or automated testing?

Updated

Hotell · 2022-07-14T13:37:36Z

Can you please clarify the goal of that PR? Will it be used for manual or automated testing?

@micahgodbolt

the roadmap and plan behind this PR is still not clear to me.

we should resolve following topics first (at this stage I'm not comfortable bringing this in):

current implementation (this PR) is not very robust
how is this gonna be tested in automated way ?
who will be the maintainer/owner of this application ?
what is the roadmap of this initiative ?

thanks

Hotell

reasoning provided as separate comment

micahgodbolt · 2022-07-14T15:39:25Z

reasoning provided as separate comment

updated the PR description. This is a case where I don't have a clear long term plan for this package. It needs to serve a purpose right now, and if the package no longer becomes necessary, we can remove it.

micahgodbolt · 2022-08-03T20:49:00Z

@Hotell reworked the PR to focus on v9 and provide a testing setup for react 18 related bugs that we find.

Hotell · 2022-08-18T17:21:09Z

can we remove that empty apps/react-18-tests-v9/tsconfig.stories.json ?

behowell

Thanks for adding these tests!

Hotell

added suggestions/questions.

can we also add README.md so it's obvious what is the purpose of this and how can one use it ?

ty

apps/react-18-tests-v9/tsconfig.json

apps/react-18-tests-v9/.eslintrc.json

apps/react-18-tests-v9/config/tests.js

package.json

apps/react-18-tests-v9/webpack.config.js

package.json

apps/react-18-tests-v9/webpack.serve.config.js

add react 18 test app

3d7873c

msft-fluent-ui-bot assigned bsunderhus Jul 5, 2022

github-actions bot added this to the July Project Cycle Q3 2022 milestone Jul 5, 2022

exclude test from syncpack

a953dc6

cleanup

28aef9d

micahgodbolt added 2 commits July 5, 2022 16:01

attempting to get badge and griffel to work

25a7457

Merge branch 'master' into react-18-test

a9538a8

add webpack aliases

7cfab6c

micahgodbolt marked this pull request as ready for review July 13, 2022 21:33

micahgodbolt requested a review from a team as a code owner July 13, 2022 21:33

remove unneded resolutions

98eee3a

micahgodbolt added 2 commits July 13, 2022 14:55

add all components and add some test stories

e70d4d0

remove bundle script

2c16ad0

Hotell requested changes Jul 14, 2022

View reviewed changes

msft-fluent-ui-bot added Needs: Author Feedback and removed Needs: Author Feedback labels Jul 14, 2022

micahgodbolt requested a review from Hotell July 14, 2022 15:58

bsunderhus removed their assignment Jul 21, 2022

micahgodbolt marked this pull request as draft July 22, 2022 16:01

Merge branch 'master' into react-18-test

6018a46

micahgodbolt added 8 commits July 27, 2022 12:45

add fluent ui 8 dep

5bc9002

Merge branch 'master' into react-18-test

5971a8a

Merge branch 'master' into react-18-test

8e99fb4

Merge branch 'master' into react-18-test

3c4aa4b

rename to v9 tests

bb3c5b6

Merge branch 'master' into react-18-test

db388c8

rename test file

3ba6bf3

naming

e9b953b

micahgodbolt force-pushed the react-18-test branch from 10645cd to e9b953b Compare August 3, 2022 20:44

micahgodbolt changed the title ~~add react 18 test app~~ Add react-18-tests-v9 package to apps Aug 3, 2022

micahgodbolt marked this pull request as ready for review August 3, 2022 20:47

micahgodbolt added 2 commits August 11, 2022 15:42

Merge branch 'master' into react-18-test

2129095

update tsconfigs

e5155a4

micahgodbolt self-assigned this Aug 12, 2022

Merge branch 'master' into react-18-test

d7a4f81

behowell approved these changes Aug 18, 2022

View reviewed changes

Hotell reviewed Aug 18, 2022

View reviewed changes

cleanup thanks to PR feedback

a752466

micahgodbolt requested a review from Hotell August 19, 2022 16:02

micahgodbolt added 2 commits August 19, 2022 11:07

fix type check, reduce scope of import

0f522fa

fix versions

53927b3

Hotell approved these changes Aug 22, 2022

View reviewed changes

micahgodbolt added 2 commits August 22, 2022 10:52

added readme

a4a007a

conflicts

02c8710

TristanWatanabe mentioned this pull request Aug 22, 2022

Create React 18 test project for v8 inside of repo #24451

Closed

micahgodbolt merged commit 0b4893e into microsoft:master Aug 22, 2022

micahgodbolt deleted the react-18-test branch August 22, 2022 20:35

sopranopillow mentioned this pull request Aug 23, 2023

[Bug]: @fluentui/react-conformance and @fluentui/react-conformance-griffel use ReactDOM.render that is not supported in React 18 #28702

Closed

2 tasks

Conversation

micahgodbolt commented Jul 5, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

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

Uh oh!

📊 Bundle size report

Uh oh!

codesandbox-ci bot commented Jul 5, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

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

Uh oh!

Perf Analysis (@fluentui/react-components)

Uh oh!

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

Uh oh!

Perf Analysis (@fluentui/react-northstar)

Uh oh!

size-auditor bot commented Jul 5, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Asset size changes

Uh oh!

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

Uh oh!

Perf Analysis (@fluentui/react)

Uh oh!

layershifter commented Jul 13, 2022

Uh oh!

micahgodbolt commented Jul 13, 2022

Uh oh!

Hotell commented Jul 14, 2022

Uh oh!

Hotell left a comment

Choose a reason for hiding this comment

Uh oh!

micahgodbolt commented Jul 14, 2022

Uh oh!

micahgodbolt commented Aug 3, 2022

Uh oh!

Hotell commented Aug 18, 2022

Uh oh!

behowell left a comment

Choose a reason for hiding this comment

Uh oh!

Hotell left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

micahgodbolt commented Jul 5, 2022 •

edited

Loading

fabricteam commented Jul 5, 2022 •

edited

Loading

codesandbox-ci bot commented Jul 5, 2022 •

edited

Loading

fabricteam commented Jul 5, 2022 •

edited

Loading

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

fabricteam commented Jul 5, 2022 •

edited

Loading

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

size-auditor bot commented Jul 5, 2022 •

edited

Loading

fabricteam commented Jul 5, 2022 •

edited

Loading

Perf Analysis (`@fluentui/react`)