Skip to content
This repository was archived by the owner on Jun 26, 2020. It is now read-only.

Commit f2eee8e

Browse files
bvaughnbvaughn
authored
Fix Context.Consumer displayName for v16.6+ (#1261)
* Fixed displayName handling for ContextConsumer v16.6+ * Added 16.7 final release and @next to regression test harness * Clarified comment
1 parent 93b7e27 commit f2eee8e

File tree

5 files changed

+78
-22
lines changed

5 files changed

+78
-22
lines changed

‎backend/attachRendererFiber.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -358,9 +358,14 @@ function attachRendererFiber(hook: Hook, rid: string, renderer: ReactRenderer):
358358
case CONTEXT_CONSUMER_SYMBOL_STRING:
359359
nodeType = 'Special';
360360
props = fiber.memoizedProps;
361+
362+
// 16.3-16.5 read from "type" because the Consumer is the actual context object.
363+
// 16.6+ should read from "type._context" because Consumer can be different (in DEV).
364+
const resolvedContext = fiber.type._context || fiber.type;
365+
361366
// NOTE: TraceUpdatesBackendManager depends on the name ending in '.Consumer'
362367
// If you change the name, figure out a more resilient way to detect it.
363-
name = `${fiber.type.displayName || 'Context'}.Consumer`;
368+
name = `${resolvedContext.displayName || 'Context'}.Consumer`;
364369
children = [];
365370
break;
366371
case STRICT_MODE_NUMBER:

‎test/regression/16.7.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,11 @@
1111
__REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
1212
</script>
1313

14-
<script src="https://unpkg.com/scheduler@next/umd/scheduler.development.js"></script>
15-
<script src="https://unpkg.com/scheduler@next/umd/scheduler-tracing.development.js"></script>
16-
<script src="https://unpkg.com/react@next/umd/react.development.js"></script>
17-
<script src="https://unpkg.com/react-dom@next/umd/react-dom.development.js"></script>
18-
<script src="https://unpkg.com/react-cache@next/umd/react-cache.development.js"></script>
14+
<script src="https://unpkg.com/scheduler@0.12.0/umd/scheduler.development.js"></script>
15+
<script src="https://unpkg.com/scheduler@0.12.0/umd/scheduler-tracing.development.js"></script>
16+
<script src="https://unpkg.com/react@16.7/umd/react.development.js"></script>
17+
<script src="https://unpkg.com/react-dom@16.7/umd/react-dom.development.js"></script>
18+
<script src="https://unpkg.com/react-cache@2.0.0-alpha.1/umd/react-cache.development.js"></script>
1919

2020
<!-- Don't use this in production: -->
2121
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

‎test/regression/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
</head>
88
<body>
99
<iframe src="canary.html"></iframe>
10+
<iframe src="next.html"></iframe>
1011
<iframe src="16.7.html"></iframe>
1112
<iframe src="16.6.html"></iframe>
1213
<iframe src="16.5.html"></iframe>

‎test/regression/next.html‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>React next</title>
6+
<link rel="stylesheet" href="styles.css" />
7+
8+
<script type="text/javascript">
9+
// Enable DevTools to inspect React inside of an <iframe>
10+
// This must run before React is loaded
11+
__REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
12+
</script>
13+
14+
<script src="https://unpkg.com/scheduler@next/umd/scheduler.development.js"></script>
15+
<script src="https://unpkg.com/scheduler@next/umd/scheduler-tracing.development.js"></script>
16+
<script src="https://unpkg.com/react@next/umd/react.development.js"></script>
17+
<script src="https://unpkg.com/react-dom@next/umd/react-dom.development.js"></script>
18+
<script src="https://unpkg.com/react-cache@next/umd/react-cache.development.js"></script>
19+
20+
<!-- Don't use this in production: -->
21+
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
22+
</head>
23+
<body>
24+
<div id="root">
25+
If you are seeing this message, you are likely viewing this file using the <code>file</code> protocol which does not support cross origin requests.
26+
<br/><br/>
27+
Use a web server like <code>serve</code> instead:
28+
<br/><br/>
29+
<code>npm install -g pushstate-server</code><br/>
30+
<code>pushstate-server .</code><br/>
31+
<code>open <a href="http://localhost:9000/test/regression/next.html">http://localhost:9000/test/regression/next.html</a></code>
32+
</div>
33+
34+
<script src="shared.js" type="text/babel"></script>
35+
36+
<!--
37+
This is a great way to try React but it's not suitable for production.
38+
It slowly compiles JSX with Babel in the browser and uses a large development build of React.
39+
Learn more at https://reactjs.org/docs/getting-started.html
40+
-->
41+
</body>
42+
</html>

‎test/regression/shared.js‎

Lines changed: 24 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -35,24 +35,26 @@ switch (major) {
3535
case 16:
3636
switch (minor) {
3737
case 7:
38-
// Hooks
39-
function Hooks() {
40-
const [count, setCount] = React.useState(0);
41-
const incrementCount = React.useCallback(
42-
() => setCount(count + 1),
43-
[count]
44-
);
45-
return (
46-
<div>
47-
count: {count} <button onClick={incrementCount}>increment</button>
48-
</div>
38+
if (typeof React.useState === 'function') {
39+
// Hooks
40+
function Hooks() {
41+
const [count, setCount] = React.useState(0);
42+
const incrementCount = React.useCallback(
43+
() => setCount(count + 1),
44+
[count]
45+
);
46+
return (
47+
<div>
48+
count: {count} <button onClick={incrementCount}>increment</button>
49+
</div>
50+
);
51+
}
52+
apps.push(
53+
<Feature key="Hooks" label="Hooks" version="16.7+">
54+
<Hooks />
55+
</Feature>
4956
);
5057
}
51-
apps.push(
52-
<Feature key="Hooks" label="Hooks" version="16.7+">
53-
<Hooks />
54-
</Feature>
55-
);
5658
case 6:
5759
// memo
5860
function LabelComponent({label}) {
@@ -279,6 +281,12 @@ function TopLevelWrapperForDevTools({ version }) {
279281
React canary <a href={`https://github.com/facebook/react/commit/${commitSha}`}>{commitSha}</a>
280282
</h1>
281283
);
284+
} else if (version.includes('alpha')) {
285+
header = (
286+
<h1>
287+
React next
288+
</h1>
289+
);
282290
}
283291

284292
return (

0 commit comments

Comments
 (0)