TESTING ONLY - update to React 17 #22326
Closed
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
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 5d7c747:
|
Non-approved dependencies are detected.The following package version constraints are missing an approved candidate:
|
Asset size changes
Baseline commit: 126d1921f2a886bbb96fd1e94d542255024c91b7 (build) |
Perf Analysis (
|
| Scenario | Render type | Master Ticks | PR Ticks | Iterations | Status |
|---|---|---|---|---|---|
| Avatar | mount | 1069 | 1130 | 5000 | |
| Button | mount | 640 | 620 | 5000 | |
| FluentProvider | mount | 2110 | 2094 | 5000 | |
| FluentProviderWithTheme | mount | 317 | 321 | 10 | |
| FluentProviderWithTheme | virtual-rerender | 257 | 251 | 10 | |
| FluentProviderWithTheme | virtual-rerender-with-unmount | 344 | 341 | 10 | |
| MakeStyles | mount | 1903 | 1796 | 50000 |
Perf Analysis (
|
| Scenario | Current PR Ticks | Baseline Ticks | Ratio |
|---|---|---|---|
| TooltipMinimalPerf.default | 2419 | 1183 | 2.04:1 |
| RosterPerf.default | 2340 | 1232 | 1.9:1 |
| IconMinimalPerf.default | 701 | 622 | 1.13:1 |
| TreeWith60ListItems.default | 188 | 167 | 1.13:1 |
| VideoMinimalPerf.default | 803 | 718 | 1.12:1 |
| ButtonMinimalPerf.default | 192 | 173 | 1.11:1 |
| RefMinimalPerf.default | 239 | 221 | 1.08:1 |
| AlertMinimalPerf.default | 306 | 285 | 1.07:1 |
| AttachmentSlotsPerf.default | 1216 | 1148 | 1.06:1 |
| AvatarMinimalPerf.default | 204 | 193 | 1.06:1 |
| SkeletonMinimalPerf.default | 375 | 355 | 1.06:1 |
| CustomToolbarPrototype.default | 2977 | 2818 | 1.06:1 |
| LoaderMinimalPerf.default | 737 | 703 | 1.05:1 |
| PortalMinimalPerf.default | 170 | 162 | 1.05:1 |
| AttachmentMinimalPerf.default | 169 | 162 | 1.04:1 |
| ButtonSlotsPerf.default | 607 | 586 | 1.04:1 |
| ChatDuplicateMessagesPerf.default | 316 | 305 | 1.04:1 |
| DropdownManyItemsPerf.default | 751 | 730 | 1.03:1 |
| HeaderMinimalPerf.default | 381 | 371 | 1.03:1 |
| LayoutMinimalPerf.default | 380 | 369 | 1.03:1 |
| PopupMinimalPerf.default | 643 | 624 | 1.03:1 |
| ReactionMinimalPerf.default | 405 | 393 | 1.03:1 |
| SegmentMinimalPerf.default | 367 | 358 | 1.03:1 |
| SplitButtonMinimalPerf.default | 4821 | 4703 | 1.03:1 |
| BoxMinimalPerf.default | 359 | 351 | 1.02:1 |
| ChatWithPopoverPerf.default | 402 | 393 | 1.02:1 |
| MenuMinimalPerf.default | 910 | 890 | 1.02:1 |
| StatusMinimalPerf.default | 737 | 723 | 1.02:1 |
| DropdownMinimalPerf.default | 3118 | 3097 | 1.01:1 |
| GridMinimalPerf.default | 367 | 362 | 1.01:1 |
| HeaderSlotsPerf.default | 822 | 816 | 1.01:1 |
| ImageMinimalPerf.default | 424 | 419 | 1.01:1 |
| ItemLayoutMinimalPerf.default | 1301 | 1290 | 1.01:1 |
| ProviderMergeThemesPerf.default | 1271 | 1261 | 1.01:1 |
| RadioGroupMinimalPerf.default | 485 | 481 | 1.01:1 |
| TableManyItemsPerf.default | 2115 | 2103 | 1.01:1 |
| ButtonOverridesMissPerf.default | 1569 | 1575 | 1:1 |
| DatepickerMinimalPerf.default | 5995 | 6021 | 1:1 |
| DialogMinimalPerf.default | 807 | 809 | 1:1 |
| FlexMinimalPerf.default | 293 | 293 | 1:1 |
| InputMinimalPerf.default | 1386 | 1391 | 1:1 |
| ListMinimalPerf.default | 534 | 533 | 1:1 |
| ListNestedPerf.default | 594 | 594 | 1:1 |
| ListWith60ListItems.default | 698 | 695 | 1:1 |
| MenuButtonMinimalPerf.default | 1829 | 1828 | 1:1 |
| ProviderMinimalPerf.default | 399 | 398 | 1:1 |
| CarouselMinimalPerf.default | 478 | 484 | 0.99:1 |
| CheckboxMinimalPerf.default | 2796 | 2823 | 0.99:1 |
| AnimationMinimalPerf.default | 550 | 559 | 0.98:1 |
| CardMinimalPerf.default | 608 | 618 | 0.98:1 |
| ChatMinimalPerf.default | 806 | 826 | 0.98:1 |
| DividerMinimalPerf.default | 372 | 380 | 0.98:1 |
| EmbedMinimalPerf.default | 4354 | 4436 | 0.98:1 |
| TableMinimalPerf.default | 426 | 434 | 0.98:1 |
| ToolbarMinimalPerf.default | 996 | 1020 | 0.98:1 |
| TreeMinimalPerf.default | 846 | 866 | 0.98:1 |
| TextMinimalPerf.default | 356 | 368 | 0.97:1 |
| TextAreaMinimalPerf.default | 548 | 564 | 0.97:1 |
| ListCommonPerf.default | 667 | 692 | 0.96:1 |
| SliderMinimalPerf.default | 1738 | 1811 | 0.96:1 |
| LabelMinimalPerf.default | 396 | 416 | 0.95:1 |
| AccordionMinimalPerf.default | 150 | 161 | 0.93:1 |
| FormMinimalPerf.default | 407 | 466 | 0.87:1 |
📊 Bundle size report
Unchanged fixtures
|
Perf Analysis (
|
| Scenario | Render type | Master Ticks | PR Ticks | Iterations | Status |
|---|---|---|---|---|---|
| Layer | mount | 3070 | 4226 | 5000 | Possible regression |
All results
| Scenario | Render type | Master Ticks | PR Ticks | Iterations | Status |
|---|---|---|---|---|---|
| BaseButton | mount | 919 | 940 | 5000 | |
| Breadcrumb | mount | 2892 | 2902 | 1000 | |
| Checkbox | mount | 1568 | 1656 | 5000 | |
| CheckboxBase | mount | 1336 | 1290 | 5000 | |
| ChoiceGroup | mount | 4854 | 4794 | 5000 | |
| ComboBox | mount | 994 | 1003 | 1000 | |
| CommandBar | mount | 10829 | 11049 | 1000 | |
| ContextualMenu | mount | 12034 | 12396 | 1000 | |
| DefaultButton | mount | 1230 | 1105 | 5000 | |
| DetailsRow | mount | 3954 | 4018 | 5000 | |
| DetailsRowFast | mount | 3877 | 3951 | 5000 | |
| DetailsRowNoStyles | mount | 3888 | 3740 | 5000 | |
| Dialog | mount | 2316 | 2505 | 1000 | |
| DocumentCardTitle | mount | 175 | 160 | 1000 | |
| Dropdown | mount | 3357 | 3313 | 5000 | |
| FocusTrapZone | mount | 1994 | 1781 | 5000 | |
| FocusZone | mount | 1991 | 1904 | 5000 | |
| IconButton | mount | 1797 | 1845 | 5000 | |
| Label | mount | 372 | 334 | 5000 | |
| Layer | mount | 3070 | 4226 | 5000 | Possible regression |
| Link | mount | 473 | 511 | 5000 | |
| MenuButton | mount | 1542 | 1492 | 5000 | |
| MessageBar | mount | 2300 | 2182 | 5000 | |
| Nav | mount | 3397 | 3391 | 1000 | |
| OverflowSet | mount | 1125 | 1171 | 5000 | |
| Panel | mount | 2244 | 2571 | 1000 | |
| Persona | mount | 1047 | 1013 | 1000 | |
| Pivot | mount | 1539 | 1449 | 1000 | |
| PrimaryButton | mount | 1315 | 1359 | 5000 | |
| Rating | mount | 8019 | 7775 | 5000 | |
| SearchBox | mount | 1315 | 1273 | 5000 | |
| Shimmer | mount | 2624 | 2966 | 5000 | |
| Slider | mount | 2019 | 2035 | 5000 | |
| SpinButton | mount | 5192 | 5089 | 5000 | |
| Spinner | mount | 471 | 458 | 5000 | |
| SplitButton | mount | 3596 | 3406 | 5000 | |
| Stack | mount | 526 | 546 | 5000 | |
| StackWithIntrinsicChildren | mount | 2356 | 2421 | 5000 | |
| StackWithTextChildren | mount | 5539 | 5350 | 5000 | |
| SwatchColorPicker | mount | 11910 | 12203 | 5000 | |
| TagPicker | mount | 2802 | 2761 | 5000 | |
| TeachingBubble | mount | 96904 | 102926 | 5000 | |
| Text | mount | 489 | 429 | 5000 | |
| TextField | mount | 1480 | 1457 | 5000 | |
| ThemeProvider | mount | 1241 | 1202 | 5000 | |
| ThemeProvider | virtual-rerender | 690 | 677 | 5000 | |
| ThemeProvider | virtual-rerender-with-unmount | 1957 | 2040 | 5000 | |
| Toggle | mount | 832 | 789 | 5000 | |
| buttonNative | mount | 140 | 136 | 5000 |
ecraig12345
force-pushed
the
react-17
branch
2 times, most recently
from
f236b47
to
ce44315
Compare
ecraig12345
commented
Apr 7, 2022
Comment on lines
+247
to
+250
| // this gives an error: | ||
| // NotFoundError: The node to be removed is not a child of this node. | ||
| // ReactDOM.unmountComponentAtNode(attachTo); | ||
| // document.body.removeChild(attachTo); |
There was a problem hiding this comment.
This may be a real issue, not sure
ecraig12345
commented
Apr 7, 2022
| - script: | | ||
| yarn check:installed-dependencies-versions | ||
| displayName: 'check packages: installed dependencies versions' | ||
| # - script: | |
There was a problem hiding this comment.
Updates to this file won't be part of the real change, just making the build pass
ecraig12345
force-pushed
the
react-17
branch
3 times, most recently
from
fd22aa3
to
5d7c747
Compare
|
I'm "officially" dropping this now. After updating the types (which I hadn't done before), some additional issues show up that will be tricky to deal with. The immediate one is that the latest Also note that after doing the update properly (not with resolutions), there are still a few things that pull in React 16:
And a bunch of things pull in |
ecraig12345
force-pushed
the
react-17
branch
3 times, most recently
from
a34516b
to
1002d46
Compare
This was referenced Apr 8, 2022
ecraig12345
commented
Apr 8, 2022
| "sass": "1.49.11", | ||
| "sass-loader": "12.4.0", | ||
| "satisfied": "^1.1.1", | ||
| "scheduler": "0.19.1", | ||
| "scheduler": "0.20.2", |
There was a problem hiding this comment.
scheduler 0.20.2 is used in react-dom 17
| @@ -23,8 +23,8 @@ | |||
| "module": "dist/es/index.js", | |||
| "peerDependencies": { | |||
| "@fluentui/react-northstar": "0.54.0", | |||
| "react": "^16.8.0", | |||
| "react-dom": "^16.8.0" | |||
| "react": "^16.8.0 || ^17", | |||
There was a problem hiding this comment.
This was already in some of the northstar packages, but I added it to the rest of them that specify react deps as peers
| @@ -36,6 +35,7 @@ | |||
| "peerDependencies": { | |||
| "react": "^16.8.0 || ^17", | |||
| "react-dom": "^16.8.0 || ^17", | |||
| "react-is": "^16 || ^17", | |||
There was a problem hiding this comment.
I'm not 100% sure what the correct/desirable approach is here, but since it appears that react-is corresponds to a particular react version, it should probably be allowed as either 16 or 17? But I'm not sure if that would cause unexpected breaks for partners who don't already have it installed as a peer.
| @@ -16,11 +16,8 @@ | |||
| "immer": "^9.0.12", | |||
| "lodash": "^4.17.15", | |||
| "lz-string": "^1.4.4", | |||
| "react": "16.14.0", | |||
There was a problem hiding this comment.
Moved to peers to match other packages
| @@ -36,6 +34,7 @@ | |||
| "jest": "^26.0.0", | |||
| "react": ">=16.8.0 <18.0.0", | |||
| "react-dom": ">=16.8.0 <18.0.0", | |||
| "react-is": ">=16.0.0 <18.0.0", | |||
There was a problem hiding this comment.
Same question as a couple northstar packages about whether react-is ought to be a peer in the interest of supporting either 16 or 17
ecraig12345
commented
Apr 12, 2022
| @@ -33,7 +33,9 @@ export const resolveShorthand: ResolveShorthandFunction = (value, options) => { | |||
| if (typeof value === 'string' || typeof value === 'number' || Array.isArray(value) || isValidElement(value)) { | |||
| resolvedShorthand.children = value; | |||
| } else if (typeof value === 'object') { | |||
| resolvedShorthand = value; | |||
| // TODO: "Type 'readonly ReactNode[]' has no properties in common with type 'UnknownSlotProps'." | |||
There was a problem hiding this comment.
I'm not sure what happened here, but someone more familiar with these types should probably look into it and fix properly
|
Failed build: https://github.com/microsoft/fluentui/runs/5984865378 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Draft of updating to React 17 with community enzyme adapter.
Status as of Monday April 11
I'm "officially" dropping this now (probably). This PR currently contains the changes in #22438 + the actual upgrade.
After updating the types (which I hadn't done before), some additional issues show up that will be tricky to deal with. The immediate one is that the latest
@types/react@17referencesIterable, which is only ines2015.iterableand up and therefore won't work in v8 packages that only usees5.See the PR comments for info about other notable changes you may want to want to include in the final version.
Also note that after doing the update properly (not with resolutions), there are still a few things that pull in React 16:
@fluentui/web-components => @storybook/html => react, react-dom(shouldn't matter)@fluentui/vr-tests => screener-storybook => react, react-dom(might matter, needs investigation)And a bunch of things pull in
react-is16, but that may be less of an issue.Related issue
#20145