Skip to content

Commit a89854b

Browse files
author
Brian Vaughn
authored
Fix Suspense-wrapping heuristic (and bump version numbers) (#19373)
* Fixed suspense wrapping heuristic * Bump package numbers 16.13.1 -> 17.0.0-alpha.0 to fix DevTools Suspense heuristic
1 parent 4961833 commit a89854b

File tree

22 files changed

+165
-33
lines changed

22 files changed

+165
-33
lines changed

‎packages/create-subscription/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "create-subscription",
33
"description": "utility for subscribing to external data sources inside React components",
4-
"version": "16.13.1",
4+
"version": "17.0.0-alpha.0",
55
"repository": {
66
"type": "git",
77
"url": "https://github.com/facebook/react.git",
@@ -15,7 +15,7 @@
1515
"cjs/"
1616
],
1717
"peerDependencies": {
18-
"react": "^16.3.0"
18+
"react": "^17.0.0-alpha"
1919
},
2020
"devDependencies": {
2121
"rxjs": "^5.5.6"

‎packages/jest-react/package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "jest-react",
3-
"version": "0.11.1",
3+
"version": "0.12.0-alpha.0",
44
"description": "Jest matchers and utilities for testing React components.",
55
"main": "index.js",
66
"repository": {
@@ -20,8 +20,8 @@
2020
"homepage": "https://reactjs.org/",
2121
"peerDependencies": {
2222
"jest": "^23.0.1 || ^24.0.0 || ^25.1.0",
23-
"react": "^16.0.0",
24-
"react-test-renderer": "^16.0.0"
23+
"react": "^17.0.0-alpha",
24+
"react-test-renderer": "^17.0.0-alpha"
2525
},
2626
"dependencies": {
2727
"object-assign": "^4.1.1"

‎packages/react-art/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "react-art",
33
"description": "React ART is a JavaScript library for drawing vector graphics using React. It provides declarative and reactive bindings to the ART library. Using the same declarative API you can render the output to either Canvas, SVG or VML (IE8).",
4-
"version": "16.13.1",
4+
"version": "17.0.0-alpha.0",
55
"main": "index.js",
66
"repository": {
77
"type": "git",
@@ -29,7 +29,7 @@
2929
"scheduler": "^0.19.0"
3030
},
3131
"peerDependencies": {
32-
"react": "^16.13.0"
32+
"react": "^17.0.0-alpha"
3333
},
3434
"files": [
3535
"LICENSE",

‎packages/react-cache/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,6 @@
1717
"umd/"
1818
],
1919
"peerDependencies": {
20-
"react": "^16.3.0-alpha.1"
20+
"react": "^17.0.0-alpha"
2121
}
2222
}

‎packages/react-client/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
"node": ">=0.10.0"
2525
},
2626
"peerDependencies": {
27-
"react": "^16.0.0"
27+
"react": "^17.0.0-alpha"
2828
},
2929
"dependencies": {
3030
"loose-envify": "^1.1.0",

‎packages/react-debug-tools/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
"node": ">=0.10.0"
2727
},
2828
"peerDependencies": {
29-
"react": "^16.0.0"
29+
"react": "^17.0.0-alpha"
3030
},
3131
"dependencies": {
3232
"error-stack-parser": "^2.0.2",

‎packages/react-devtools-shared/src/__tests__/profilingCache-test.js

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -716,4 +716,93 @@ describe('ProfilingCache', () => {
716716
TestRenderer.create(<Validator commitIndex={0} rootID={rootID} />);
717717
});
718718
});
719+
720+
// See https://github.com/facebook/react/issues/18831
721+
it('should not crash during route transitions with Suspense', () => {
722+
const RouterContext = React.createContext();
723+
724+
function App() {
725+
return (
726+
<Router>
727+
<Switch>
728+
<Route path="/">
729+
<Home />
730+
</Route>
731+
<Route path="/about">
732+
<About />
733+
</Route>
734+
</Switch>
735+
</Router>
736+
);
737+
}
738+
739+
const Home = () => {
740+
return (
741+
<React.Suspense>
742+
<Link path="/about">Home</Link>
743+
</React.Suspense>
744+
);
745+
};
746+
747+
const About = () => <div>About</div>;
748+
749+
// Mimics https://github.com/ReactTraining/react-router/blob/master/packages/react-router/modules/Router.js
750+
function Router({children}) {
751+
const [path, setPath] = React.useState('/');
752+
return (
753+
<RouterContext.Provider value={{path, setPath}}>
754+
{children}
755+
</RouterContext.Provider>
756+
);
757+
}
758+
759+
// Mimics https://github.com/ReactTraining/react-router/blob/master/packages/react-router/modules/Switch.js
760+
function Switch({children}) {
761+
return (
762+
<RouterContext.Consumer>
763+
{context => {
764+
let element = null;
765+
React.Children.forEach(children, child => {
766+
if (context.path === child.props.path) {
767+
element = child.props.children;
768+
}
769+
});
770+
return element ? React.cloneElement(element) : null;
771+
}}
772+
</RouterContext.Consumer>
773+
);
774+
}
775+
776+
// Mimics https://github.com/ReactTraining/react-router/blob/master/packages/react-router/modules/Route.js
777+
function Route({children, path}) {
778+
return null;
779+
}
780+
781+
const linkRef = React.createRef();
782+
783+
// Mimics https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/modules/Link.js
784+
function Link({children, path}) {
785+
return (
786+
<RouterContext.Consumer>
787+
{context => {
788+
return (
789+
<button ref={linkRef} onClick={() => context.setPath(path)}>
790+
{children}
791+
</button>
792+
);
793+
}}
794+
</RouterContext.Consumer>
795+
);
796+
}
797+
798+
const {Simulate} = require('react-dom/test-utils');
799+
800+
const container = document.createElement('div');
801+
utils.act(() => ReactDOM.render(<App />, container));
802+
expect(container.textContent).toBe('Home');
803+
utils.act(() => store.profilerStore.startProfiling());
804+
utils.act(() => Simulate.click(linkRef.current));
805+
utils.act(() => store.profilerStore.stopProfiling());
806+
expect(container.textContent).toBe('About');
807+
});
719808
});

‎packages/react-devtools-shared/src/backend/renderer.js

Lines changed: 44 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -153,7 +153,8 @@ export function getInternalReactConstants(
153153
// **********************************************************
154154
// The section below is copied from files in React repo.
155155
// Keep it in sync, and add version guards if it changes.
156-
if (gte(version, '16.6.0-beta.0')) {
156+
if (gte(version, '17.0.0-alpha')) {
157+
// TODO (Offscreen) Update the version number above to reflect the first Offscreen alpha/beta release.
157158
ReactTypeOfWork = {
158159
Block: 22,
159160
ClassComponent: 1,
@@ -181,6 +182,34 @@ export function getInternalReactConstants(
181182
SuspenseListComponent: 19, // Experimental
182183
YieldComponent: -1, // Removed
183184
};
185+
} else if (gte(version, '16.6.0-beta.0')) {
186+
ReactTypeOfWork = {
187+
Block: 22,
188+
ClassComponent: 1,
189+
ContextConsumer: 9,
190+
ContextProvider: 10,
191+
CoroutineComponent: -1, // Removed
192+
CoroutineHandlerPhase: -1, // Removed
193+
DehydratedSuspenseComponent: 18, // Behind a flag
194+
ForwardRef: 11,
195+
Fragment: 7,
196+
FunctionComponent: 0,
197+
HostComponent: 5,
198+
HostPortal: 4,
199+
HostRoot: 3,
200+
HostText: 6,
201+
IncompleteClassComponent: 17,
202+
IndeterminateComponent: 2,
203+
LazyComponent: 16,
204+
MemoComponent: 14,
205+
Mode: 8,
206+
OffscreenComponent: -1, // Experimental
207+
Profiler: 12,
208+
SimpleMemoComponent: 15,
209+
SuspenseComponent: 13,
210+
SuspenseListComponent: 19, // Experimental
211+
YieldComponent: -1, // Removed
212+
};
184213
} else if (gte(version, '16.4.3-alpha')) {
185214
ReactTypeOfWork = {
186215
Block: -1, // Doesn't exist yet
@@ -452,14 +481,16 @@ export function attach(
452481
const debug = (name: string, fiber: Fiber, parentFiber: ?Fiber): void => {
453482
if (__DEBUG__) {
454483
const displayName = getDisplayNameForFiber(fiber) || 'null';
484+
const id = getFiberID(fiber);
455485
const parentDisplayName =
456486
(parentFiber != null && getDisplayNameForFiber(parentFiber)) || 'null';
487+
const parentID = parentFiber ? getFiberID(parentFiber) : '';
457488
// NOTE: calling getFiberID or getPrimaryFiber is unsafe here
458489
// because it will put them in the map. For now, we'll omit them.
459490
// TODO: better debugging story for this.
460491
console.log(
461-
`[renderer] %c${name} %c${displayName} %c${
462-
parentFiber ? parentDisplayName : ''
492+
`[renderer] %c${name} %c${displayName} (${id}) %c${
493+
parentFiber ? `${parentDisplayName} (${parentID})` : ''
463494
}`,
464495
'color: red; font-weight: bold;',
465496
'color: blue;',
@@ -1076,6 +1107,10 @@ export function attach(
10761107
}
10771108

10781109
function recordMount(fiber: Fiber, parentFiber: Fiber | null) {
1110+
if (__DEBUG__) {
1111+
debug('recordMount()', fiber, parentFiber);
1112+
}
1113+
10791114
const isRoot = fiber.tag === HostRoot;
10801115
const id = getFiberID(getPrimaryFiber(fiber));
10811116

@@ -1130,6 +1165,10 @@ export function attach(
11301165
}
11311166

11321167
function recordUnmount(fiber: Fiber, isSimulated: boolean) {
1168+
if (__DEBUG__) {
1169+
debug('recordUnmount()', fiber);
1170+
}
1171+
11331172
if (trackedPathMatchFiber !== null) {
11341173
// We're in the process of trying to restore previous selection.
11351174
// If this fiber matched but is being unmounted, there's no use trying.
@@ -1215,7 +1254,8 @@ export function attach(
12151254
// because we don't want to highlight every host node inside of a newly mounted subtree.
12161255
}
12171256

1218-
if (fiber.tag === ReactTypeOfWork.SuspenseComponent) {
1257+
const isSuspense = fiber.tag === ReactTypeOfWork.SuspenseComponent;
1258+
if (isSuspense) {
12191259
const isTimedOut = fiber.memoizedState !== null;
12201260
if (isTimedOut) {
12211261
// Special case: if Suspense mounts in a timed-out state,

‎packages/react-dom/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-dom",
3-
"version": "16.13.1",
3+
"version": "17.0.0-alpha.0",
44
"description": "React package for working with the DOM.",
55
"main": "index.js",
66
"repository": {
@@ -22,7 +22,7 @@
2222
"scheduler": "^0.19.0"
2323
},
2424
"peerDependencies": {
25-
"react": "^16.13.0"
25+
"react": "^17.0.0-alpha"
2626
},
2727
"files": [
2828
"LICENSE",

‎packages/react-fetch/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
"cjs/"
1919
],
2020
"peerDependencies": {
21-
"react": "^16.13.1"
21+
"react": "^17.0.0-alpha"
2222
},
2323
"browser": {
2424
"./index.js": "./index.browser.js"

‎packages/react-interactions/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
"loose-envify": "^1.1.0"
3939
},
4040
"peerDependencies": {
41-
"react": "^16.0.0"
41+
"react": "^17.0.0-alpha"
4242
},
4343
"browserify": {
4444
"transform": [

‎packages/react-is/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-is",
3-
"version": "16.13.1",
3+
"version": "17.0.0-alpha.0",
44
"description": "Brand checking of React Elements.",
55
"main": "index.js",
66
"repository": {

‎packages/react-native-renderer/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,6 @@
1212
"scheduler": "^0.11.0"
1313
},
1414
"peerDependencies": {
15-
"react": "^16.0.0"
15+
"react": "^17.0.0-alpha"
1616
}
1717
}

‎packages/react-noop-renderer/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
"react-server": "*"
1818
},
1919
"peerDependencies": {
20-
"react": "^16.13.0"
20+
"react": "^17.0.0-alpha"
2121
},
2222
"files": [
2323
"LICENSE",

‎packages/react-reconciler/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
"node": ">=0.10.0"
2727
},
2828
"peerDependencies": {
29-
"react": "^16.13.0"
29+
"react": "^17.0.0-alpha"
3030
},
3131
"dependencies": {
3232
"loose-envify": "^1.1.0",

‎packages/react-server/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
"node": ">=0.10.0"
2828
},
2929
"peerDependencies": {
30-
"react": "^16.0.0"
30+
"react": "^17.0.0-alpha"
3131
},
3232
"dependencies": {
3333
"loose-envify": "^1.1.0",

‎packages/react-test-renderer/package.json

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-test-renderer",
3-
"version": "16.13.1",
3+
"version": "17.0.0-alpha.0",
44
"description": "React package for snapshot testing.",
55
"main": "index.js",
66
"repository": {
@@ -20,12 +20,15 @@
2020
"homepage": "https://reactjs.org/",
2121
"dependencies": {
2222
"object-assign": "^4.1.1",
23-
"react-is": "^16.8.6",
23+
"react-is": "^17.0.0-alpha",
2424
"react-shallow-renderer": "^16.13.1",
2525
"scheduler": "^0.19.0"
2626
},
2727
"peerDependencies": {
28-
"react": "^16.13.0"
28+
"react": "^17.0.0-alpha"
29+
},
30+
"resolutions": {
31+
"react-shallow-renderer/react-is": "^17.0.0-alpha"
2932
},
3033
"files": [
3134
"LICENSE",

‎packages/react-transport-dom-relay/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
"scheduler": "^0.11.0"
1313
},
1414
"peerDependencies": {
15-
"react": "^16.0.0",
16-
"react-dom": "^16.0.0"
15+
"react": "^17.0.0-alpha",
16+
"react-dom": "^17.0.0-alpha"
1717
}
1818
}

‎packages/react-transport-dom-webpack/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,8 @@
3434
"node": ">=0.10.0"
3535
},
3636
"peerDependencies": {
37-
"react": "^16.0.0",
38-
"react-dom": "^16.0.0",
37+
"react": "^17.0.0-alpha",
38+
"react-dom": "^17.0.0-alpha",
3939
"webpack": "^4.43.0"
4040
},
4141
"dependencies": {

0 commit comments

Comments
 (0)