Skip to content

Add react-18-tests-v8 package to apps#24571

Merged
TristanWatanabe merged 24 commits intomicrosoft:masterfrom
TristanWatanabe:v8-react-18-test-app
Sep 1, 2022
Merged

Add react-18-tests-v8 package to apps#24571
TristanWatanabe merged 24 commits intomicrosoft:masterfrom
TristanWatanabe:v8-react-18-test-app

Conversation

@TristanWatanabe
Copy link
Member

This PR does two things:

  1. It creates a place to write tests that will run in React 18 (ContextualMenu Test Provided).
  2. It creates a simple dev environment to triage issues, and work on possible solutions

Fixes #24451

@codesandbox-ci
Copy link

codesandbox-ci bot commented Aug 29, 2022

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 9f5eb0d:

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

@size-auditor
Copy link

size-auditor bot commented Aug 29, 2022

Asset size changes

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

Baseline commit: 625f79c61c8a496a31d19c615a0b8e0d9a72e55b (build)

@fabricteam
Copy link
Collaborator

fabricteam commented Aug 29, 2022

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 1622 1659 5000
Button mount 1174 1135 5000
FluentProvider mount 1959 1921 5000
FluentProviderWithTheme mount 712 721 10
FluentProviderWithTheme virtual-rerender 658 695 10
FluentProviderWithTheme virtual-rerender-with-unmount 703 717 10
MakeStyles mount 2281 2262 50000
SpinButton mount 3192 3219 5000

// @ts-ignore typing error caused by monorepo being on @types/react version 17 and this app being on react 18.
// Seems to be caused by certain v8 components (like Button) still being class components.
// Error goes away when monorepo is migrated to react 18 types OR when @fluentui/react increases peer dependency
// range to include react 18.
Copy link
Member Author

Choose a reason for hiding this comment

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

  1. Button components show this typing error is caused by the the app using @types/react version 17 since the monorepo is on 17 thus causing a typing conflict since ReactFragment no longer has {} in its declaration which is used by ReactNode. From what I tried, this issue was only resolved when @types/react for the monorepo was upgraded to version 18 or when @fluentui/react's peer dependency range was expanded to include react 18 so decided to just add ts-ignore here since it's not really an issue with the component itself
'DefaultButton' cannot be used as a JSX component.
  Its instance type 'DefaultButton' is not a valid JSX element.
    Types of property 'refs' are incompatible.
      Type '{ [key: string]: import("/home/tristanwatanabe/Documents/FluentUI/v8-buildwork/node_modules/@types/react/index").ReactInstance; }' is not assignable to type '{ [key: string]: React.ReactInstance; }'.
        'string' index signatures are incompatible.
          Type 'import("/home/tristanwatanabe/Documents/FluentUI/v8-buildwork/node_modules/@types/react/index").ReactInstance' is not assignable to type 'React.ReactInstance'.
            Type 'Component<any, {}, any>' is not assignable to type 'ReactInstance'.
              Type 'import("/home/tristanwatanabe/Documents/FluentUI/v8-buildwork/node_modules/@types/react/index").Component<any, {}, any>' is not assignable to type 'React.Component<any, {}, any>'.
                The types returned by 'render()' are incompatible between these types.
                  Type 'import("/home/tristanwatanabe/Documents/FluentUI/v8-buildwork/node_modules/@types/react/index").ReactNode' is not assignable to type 'React.ReactNode'.
                    Type '{}' is not assignable to type 'ReactNode'.ts(2786)```

@fabricteam
Copy link
Collaborator

fabricteam commented Aug 29, 2022

Perf Analysis (@fluentui/react-northstar)

⚠️ 1 potential perf regressions detected

Potential regressions comparing to master

Scenario Current PR Ticks Baseline Ticks Ratio Regression Analysis
ChatDuplicateMessagesPerf.default 233 231 1.01:1 analysis
Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
GridMinimalPerf.default 275 241 1.14:1
RadioGroupMinimalPerf.default 367 321 1.14:1
AnimationMinimalPerf.default 445 412 1.08:1
ButtonMinimalPerf.default 143 132 1.08:1
TextMinimalPerf.default 293 271 1.08:1
ButtonOverridesMissPerf.default 1254 1167 1.07:1
FlexMinimalPerf.default 223 209 1.07:1
TreeWith60ListItems.default 138 129 1.07:1
TooltipMinimalPerf.default 1999 1893 1.06:1
AccordionMinimalPerf.default 113 108 1.05:1
AvatarMinimalPerf.default 154 147 1.05:1
LayoutMinimalPerf.default 295 282 1.05:1
RefMinimalPerf.default 182 173 1.05:1
ChatMinimalPerf.default 603 581 1.04:1
DialogMinimalPerf.default 645 618 1.04:1
HeaderSlotsPerf.default 611 585 1.04:1
ListMinimalPerf.default 429 412 1.04:1
TextAreaMinimalPerf.default 383 368 1.04:1
AttachmentSlotsPerf.default 969 939 1.03:1
DatepickerMinimalPerf.default 4839 4706 1.03:1
BoxMinimalPerf.default 283 277 1.02:1
ButtonSlotsPerf.default 461 453 1.02:1
CardMinimalPerf.default 439 430 1.02:1
DividerMinimalPerf.default 294 289 1.02:1
DropdownManyItemsPerf.default 567 556 1.02:1
ImageMinimalPerf.default 319 314 1.02:1
InputMinimalPerf.default 1086 1069 1.02:1
StatusMinimalPerf.default 562 550 1.02:1
ChatWithPopoverPerf.default 308 305 1.01:1
DropdownMinimalPerf.default 2643 2626 1.01:1
ListCommonPerf.default 510 505 1.01:1
MenuMinimalPerf.default 696 686 1.01:1
ProviderMergeThemesPerf.default 1064 1058 1.01:1
SplitButtonMinimalPerf.default 3568 3547 1.01:1
CarouselMinimalPerf.default 385 385 1:1
CheckboxMinimalPerf.default 2230 2225 1:1
EmbedMinimalPerf.default 3422 3419 1:1
MenuButtonMinimalPerf.default 1409 1407 1:1
SliderMinimalPerf.default 1399 1400 1:1
TableMinimalPerf.default 326 325 1:1
CustomToolbarPrototype.default 2422 2431 1:1
ToolbarMinimalPerf.default 760 759 1:1
TreeMinimalPerf.default 667 664 1:1
PortalMinimalPerf.default 141 142 0.99:1
VideoMinimalPerf.default 588 592 0.99:1
ItemLayoutMinimalPerf.default 978 994 0.98:1
ListNestedPerf.default 449 458 0.98:1
PopupMinimalPerf.default 515 528 0.98:1
AlertMinimalPerf.default 217 223 0.97:1
FormMinimalPerf.default 307 317 0.97:1
RosterPerf.default 1725 1771 0.97:1
TableManyItemsPerf.default 1524 1575 0.97:1
ListWith60ListItems.default 492 510 0.96:1
SkeletonMinimalPerf.default 264 276 0.96:1
ProviderMinimalPerf.default 315 336 0.94:1
LoaderMinimalPerf.default 529 570 0.93:1
ReactionMinimalPerf.default 287 307 0.93:1
LabelMinimalPerf.default 286 310 0.92:1
IconMinimalPerf.default 525 568 0.92:1
SegmentMinimalPerf.default 252 276 0.91:1
AttachmentMinimalPerf.default 106 119 0.89:1
HeaderMinimalPerf.default 258 293 0.88:1

@fabricteam
Copy link
Collaborator

fabricteam commented Aug 29, 2022

📊 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.788 kB
20.843 kB
react-avatar
Avatar
48.281 kB
13.647 kB
react-avatar
AvatarGroup
14.85 kB
5.942 kB
react-avatar
AvatarGroupItem
68.249 kB
18.99 kB
react-badge
Badge
22.5 kB
7.158 kB
react-badge
CounterBadge
23.403 kB
7.45 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)
73.757 kB
23.969 kB
react-combobox
Dropdown (including child components)
73.344 kB
23.876 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
188.816 kB
51.903 kB
react-components
react-components: FluentProvider & webLightTheme
33.259 kB
10.952 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.498 kB
7.617 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.835 kB
31.498 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.843 kB
12.336 kB
react-spinner
Spinner
19.853 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.548 kB
6.434 kB
react-theme
Teams: Light theme
17.452 kB
5.054 kB
react-tooltip
Tooltip
41.502 kB
14.623 kB
react-utilities
SSRProvider
180 B
159 B
🤖 This report was generated against 625f79c61c8a496a31d19c615a0b8e0d9a72e55b

@fabricteam
Copy link
Collaborator

fabricteam commented Aug 29, 2022

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 773 804 5000
Breadcrumb mount 2336 2347 1000
Checkbox mount 2224 2225 5000
CheckboxBase mount 1956 1938 5000
ChoiceGroup mount 3882 3893 5000
ComboBox mount 741 761 1000
CommandBar mount 8805 8778 1000
ContextualMenu mount 9745 9541 1000
DefaultButton mount 951 975 5000
DetailsRow mount 3003 2981 5000
DetailsRowFast mount 2994 3038 5000
DetailsRowNoStyles mount 2849 2859 5000
Dialog mount 2517 2522 1000
DocumentCardTitle mount 145 145 1000
Dropdown mount 2764 2775 5000
FocusTrapZone mount 1487 1531 5000
FocusZone mount 1506 1477 5000
IconButton mount 1380 1378 5000
Label mount 325 330 5000
Layer mount 3700 3719 5000
Link mount 432 427 5000
MenuButton mount 1192 1159 5000
MessageBar mount 1900 1927 5000
Nav mount 2649 2906 1000
OverflowSet mount 993 981 5000
Panel mount 2121 2096 1000
Persona mount 816 828 1000
Pivot mount 1120 1103 1000
PrimaryButton mount 1075 1065 5000
Rating mount 6578 6555 5000
SearchBox mount 1074 1054 5000
Shimmer mount 2507 2458 5000
Slider mount 1647 1657 5000
SpinButton mount 3825 3840 5000
Spinner mount 404 404 5000
SplitButton mount 2399 2436 5000
Stack mount 467 452 5000
StackWithIntrinsicChildren mount 1864 1831 5000
StackWithTextChildren mount 4525 4526 5000
SwatchColorPicker mount 9112 9151 5000
TagPicker mount 1916 1937 5000
TeachingBubble mount 75252 73932 5000
Text mount 399 387 5000
TextField mount 1110 1149 5000
ThemeProvider mount 1018 1021 5000
ThemeProvider virtual-rerender 708 710 5000
ThemeProvider virtual-rerender-with-unmount 1587 1577 5000
Toggle mount 694 721 5000
buttonNative mount 95 113 5000

@TristanWatanabe TristanWatanabe marked this pull request as ready for review August 29, 2022 21:41
@TristanWatanabe TristanWatanabe requested a review from a team as a code owner August 29, 2022 21:41
@TristanWatanabe TristanWatanabe merged commit 67ebada into microsoft:master Sep 1, 2022
@TristanWatanabe TristanWatanabe deleted the v8-react-18-test-app branch September 1, 2022 15:14
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Create React 18 test project for v8 inside of repo

3 participants