Improve hydration fixture, support older versions of React (#14118)
* Hydration Fixture: Only load ReactDOMServer if it exists Fixes an issue where the hydration fixture would try to load in ReactDOMServer below version 14. In version 13, string markup methods exist on the React namespace. * DOM Fixtures: Use class component for App.js This was breaking React 0.13.0. * Hydration Fixture: better findDOMNode compatibility This commit fixes an issue where the Hydration DOM fixture was unusable in React 0.13.0 or lower because of newer API usage. It fixes that by avoiding the use of refs to get the textarea reference in the code editor component, using various versions of findDOMNode as required. * Hydration Fixture: Do not show dropdown for single-line errors If an error showed for the hydration fixture, a detail element was used even if no additional lines could display. In that case, this commit changes the component such that it returns a div. * Deeper React version support for hydration fixture This commit adds support for versions 0.4.0 of React and higher for the hydration fixture. The DOM test fixtures themselves do not support down to React 0.4.0, which would be exhaustive. Instead, the Hydration fixture can pick a version to use for its own purposes. By default, this is the version of React used by the fixtures. In the process of doing this, I had to make some updates to the renderer.html document associated with the hydration fixture, and I've added some comments to better document the history of API changes.
Nathan Hunzaker committed
Mar 13, 2019 at 15:12 UTC
679402a66b09e129d06f415cd976d18727cc8590
9 files changed
+235
-72
fixtures/dom/public/renderer.js
+79
-19
@@ -13,6 +13,30 @@
13
var renders = 0;
14
var failed = false;
15
16
+ var needsReactDOM = getBooleanQueryParam('needsReactDOM');
17
+ var needsCreateElement = getBooleanQueryParam('needsCreateElement');
18
+
19
+ function unmountComponent(node) {
20
+ // ReactDOM was moved into a separate package in 0.14
21
+ if (needsReactDOM) {
22
+ ReactDOM.unmountComponentAtNode(node);
23
+ } else if (React.unmountComponentAtNode) {
24
+ React.unmountComponentAtNode(node);
25
+ } else {
26
+ // Unmounting for React 0.4 and lower
27
+ React.unmountAndReleaseReactRootNode(node);
28
+ }
29
+ }
30
+
31
+ function createElement(value) {
32
+ // React.createElement replaced function invocation in 0.12
33
+ if (needsCreateElement) {
34
+ return React.createElement(value);
35
+ } else {
36
+ return value();
37
+ }
38
+ }
39
+
40
function getQueryParam(key) {
41
var pattern = new RegExp(key + '=([^&]+)(&|$)');
42
var matches = window.location.search.match(pattern);
@@ -35,20 +59,56 @@
59
function prerender() {
60
setStatus('Generating markup');
61
38
- output.innerHTML = ReactDOMServer.renderToString(
39
- React.createElement(Fixture)
40
- );
62
+ return Promise.resolve()
63
+ .then(function() {
64
+ const element = createElement(Fixture);
65
+
66
+ // Server rendering moved to a separate package along with ReactDOM
67
+ // in 0.14.0
68
+ if (needsReactDOM) {
69
+ return ReactDOMServer.renderToString(element);
70
+ }
71
+
72
+ // React.renderComponentToString was renamed in 0.12
73
+ if (React.renderToString) {
74
+ return React.renderToString(element);
75
+ }
76
42
- setStatus('Markup only (No React)');
77
+ // React.renderComponentToString became synchronous in React 0.9.0
78
+ if (React.renderComponentToString.length === 1) {
79
+ return React.renderComponentToString(element);
80
+ }
81
+
82
+ // Finally, React 0.4 and lower emits markup in a callback
83
+ return new Promise(function(resolve) {
84
+ React.renderComponentToString(element, resolve);
85
+ });
86
+ })
87
+ .then(function(string) {
88
+ output.innerHTML = string;
89
+ setStatus('Markup only (No React)');
90
+ })
91
+ .catch(handleError);
92
}
93
94
function render() {
95
setStatus('Hydrating');
96
48
- if (ReactDOM.hydrate) {
49
- ReactDOM.hydrate(React.createElement(Fixture), output);
97
+ var element = createElement(Fixture);
98
+
99
+ // ReactDOM was split out into another package in 0.14
100
+ if (needsReactDOM) {
101
+ // Hydration changed to a separate method in React 16
102
+ if (ReactDOM.hydrate) {
103
+ ReactDOM.hydrate(element, output);
104
+ } else {
105
+ ReactDOM.render(element, output);
106
+ }
107
+ } else if (React.render) {
108
+ // React.renderComponent was renamed in 0.12
109
+ React.render(element, output);
110
} else {
51
- ReactDOM.render(React.createElement(Fixture), output);
111
+ React.renderComponent(element, output);
112
}
113
114
setStatus(renders > 0 ? 'Re-rendered (' + renders + 'x)' : 'Hydrated');
@@ -85,17 +145,17 @@
145
setStatus('Failed');
146
output.innerHTML = 'Please name your root component "Fixture"';
147
} else {
88
- prerender();
89
-
90
- if (getBooleanQueryParam('hydrate')) {
91
- render();
92
- }
148
+ prerender().then(function() {
149
+ if (getBooleanQueryParam('hydrate')) {
150
+ render();
151
+ }
152
+ });
153
}
154
}
155
156
function reloadFixture(code) {
157
renders = 0;
98
- ReactDOM.unmountComponentAtNode(output);
158
+ unmountComponent(output);
159
injectFixture(code);
160
}
161
@@ -109,12 +169,12 @@
169
170
loadScript(getQueryParam('reactPath'))
171
.then(function() {
112
- return getBooleanQueryParam('needsReactDOM')
113
- ? loadScript(getQueryParam('reactDOMPath'))
114
- : null;
115
- })
116
- .then(function() {
117
- return loadScript(getQueryParam('reactDOMServerPath'));
172
+ if (needsReactDOM) {
173
+ return Promise.all([
174
+ loadScript(getQueryParam('reactDOMPath')),
175
+ loadScript(getQueryParam('reactDOMServerPath')),
176
+ ]);
177
+ }
178
})
179
.then(function() {
180
if (failed) {
fixtures/dom/src/components/App.js
+9
-7
@@ -4,13 +4,15 @@ import '../style.css';
4
5
const React = window.React;
6
7
-function App() {
8
- return (
9
- <div>
10
- <Header />
11
- <Fixtures />
12
- </div>
13
- );
7
+class App extends React.Component {
8
+ render() {
9
+ return (
10
+ <div>
11
+ <Header />
12
+ <Fixtures />
13
+ </div>
14
+ );
15
+ }
16
}
17
18
export default App;
fixtures/dom/src/components/Header.js
+16
-21
@@ -1,5 +1,6 @@
1
import {parse, stringify} from 'query-string';
2
-import getVersionTags from '../tags';
2
+import VersionPicker from './VersionPicker';
3
+
4
const React = window.React;
5
6
class Header extends React.Component {
@@ -9,18 +10,12 @@ class Header extends React.Component {
10
const version = query.version || 'local';
11
const production = query.production || false;
12
const versions = [version];
13
+
14
this.state = {version, versions, production};
15
}
14
- componentWillMount() {
15
- getVersionTags().then(tags => {
16
- let versions = tags.map(tag => tag.name.slice(1));
17
- versions = [`local`, ...versions];
18
- this.setState({versions});
19
- });
20
- }
21
- handleVersionChange(event) {
16
+ handleVersionChange(version) {
17
const query = parse(window.location.search);
23
- query.version = event.target.value;
18
+ query.version = version;
19
if (query.version === 'local') {
20
delete query.version;
21
}
@@ -48,7 +43,10 @@ class Header extends React.Component {
43
width="20"
44
height="20"
45
/>
51
- <a href="/">DOM Test Fixtures (v{React.version})</a>
46
+ <a href="/">
47
+ DOM Test Fixtures (v
48
+ {React.version})
49
+ </a>
50
</span>
51
52
<div className="header-controls">
@@ -90,17 +88,14 @@ class Header extends React.Component {
88
<option value="/suspense">Suspense</option>
89
</select>
90
</label>
93
- <label htmlFor="react_version">
91
+ <label htmlFor="global_version">
92
<span className="sr-only">Select a version to test</span>
95
- <select
96
- value={this.state.version}
97
- onChange={this.handleVersionChange}>
98
- {this.state.versions.map(version => (
99
- <option key={version} value={version}>
100
- {version}
101
- </option>
102
- ))}
103
- </select>
93
+ <VersionPicker
94
+ id="global_version"
95
+ name="global_version"
96
+ version={this.state.version}
97
+ onChange={this.handleVersionChange}
98
+ />
99
</label>
100
</div>
101
</div>
fixtures/dom/src/components/VersionPicker.js
new
+41
@@ -0,0 +1,41 @@
1
+import getVersionTags from '../tags';
2
+
3
+const React = window.React;
4
+
5
+class VersionPicker extends React.Component {
6
+ constructor(props, context) {
7
+ super(props, context);
8
+ const version = props.version || 'local';
9
+ const versions = [version];
10
+ this.state = {versions};
11
+ }
12
+
13
+ componentWillMount() {
14
+ getVersionTags().then(tags => {
15
+ let versions = tags.map(tag => tag.name.slice(1));
16
+ versions = [`local`, ...versions];
17
+ this.setState({versions});
18
+ });
19
+ }
20
+
21
+ onChange = event => {
22
+ this.props.onChange(event.target.value);
23
+ };
24
+
25
+ render() {
26
+ const {version, id, name} = this.props;
27
+ const {versions} = this.state;
28
+
29
+ return (
30
+ <select id={id} name={name} value={version} onChange={this.onChange}>
31
+ {versions.map(version => (
32
+ <option key={version} value={version}>
33
+ {version}
34
+ </option>
35
+ ))}
36
+ </select>
37
+ );
38
+ }
39
+}
40
+
41
+export default VersionPicker;
fixtures/dom/src/components/fixtures/hydration/Code.js
+8
-1
@@ -1,3 +1,5 @@
1
+import {findDOMNode} from '../../../find-dom-node';
2
+
3
const React = window.React;
4
5
export class CodeEditor extends React.Component {
@@ -6,6 +8,8 @@ export class CodeEditor extends React.Component {
8
}
9
10
componentDidMount() {
11
+ this.textarea = findDOMNode(this);
12
+
13
// Important: CodeMirror incorrectly lays out the editor
14
// if it executes before CSS has loaded
15
// https://github.com/graphql/graphiql/issues/33#issuecomment-318188555
@@ -44,7 +48,6 @@ export class CodeEditor extends React.Component {
48
render() {
49
return (
50
<textarea
47
- ref={ref => (this.textarea = ref)}
51
defaultValue={this.props.code}
52
autoComplete="off"
53
hidden={true}
@@ -72,6 +75,10 @@ export class CodeError extends React.Component {
75
if (supportsDetails) {
76
const [summary, ...body] = error.message.split(/\n+/g);
77
78
+ if (body.length >= 0) {
79
+ return <div className={className}>{summary}</div>;
80
+ }
81
+
82
return (
83
<details className={className}>
84
<summary>{summary}</summary>
fixtures/dom/src/components/fixtures/hydration/hydration.css
+6
@@ -22,6 +22,7 @@
22
23
.hydration-options label {
24
font-size: 13px;
25
+ margin-right: 10px;
26
}
27
28
.hydration-options input[type=checkbox] {
@@ -30,6 +31,11 @@
31
vertical-align: middle;
32
}
33
34
+.hydration-options select {
35
+ margin-left: 10px;
36
+ max-width: 100px;
37
+}
38
+
39
.hydration .CodeMirror {
40
font-size: 13px;
41
padding-top: 8px;
fixtures/dom/src/components/fixtures/hydration/index.js
+23
-2
@@ -1,4 +1,5 @@
1
import './hydration.css';
2
+import VersionPicker from '../../VersionPicker';
3
import {SAMPLE_CODE} from './data';
4
import {CodeEditor, CodeError} from './Code';
5
import {compile} from './code-transformer';
@@ -6,12 +7,17 @@ import {reactPaths} from '../../../react-loader';
7
import qs from 'query-string';
8
9
const React = window.React;
10
+// The Hydration fixture can render at a different version than the parent
11
+// app. This allows rendering for versions of React older than the DOM
12
+// test fixtures can support.
13
+const initialVersion = qs.parse(window.location.search).version || 'local';
14
15
class Hydration extends React.Component {
16
state = {
17
error: null,
18
code: SAMPLE_CODE,
19
hydrate: true,
20
+ version: initialVersion,
21
};
22
23
ready = false;
@@ -72,9 +78,14 @@ class Hydration extends React.Component {
78
});
79
};
80
81
+ setVersion = version => {
82
+ this.setState({version});
83
+ };
84
+
85
render() {
76
- const {code, error, hydrate} = this.state;
77
- const src = '/renderer.html?' + qs.stringify({hydrate, ...reactPaths()});
86
+ const {code, error, hydrate, version} = this.state;
87
+ const src =
88
+ '/renderer.html?' + qs.stringify({hydrate, ...reactPaths(version)});
89
90
return (
91
<div className="hydration">
@@ -89,6 +100,16 @@ class Hydration extends React.Component {
100
/>
101
Auto-Hydrate
102
</label>
103
+
104
+ <label htmlFor="hydration_version">
105
+ Version:
106
+ <VersionPicker
107
+ id="hydration_version"
108
+ name="hyration_version"
109
+ version={version}
110
+ onChange={this.setVersion}
111
+ />
112
+ </label>
113
</header>
114
115
<CodeEditor code={code} onChange={this.setCode} />
fixtures/dom/src/find-dom-node.js
new
+20
@@ -0,0 +1,20 @@
1
+/**
2
+ * Provides a standard way to access a DOM node across all versions of
3
+ * React.
4
+ */
5
+
6
+import {reactPaths} from './react-loader';
7
+
8
+const React = window.React;
9
+const ReactDOM = window.ReactDOM;
10
+
11
+export function findDOMNode(target) {
12
+ const {needsReactDOM} = reactPaths();
13
+
14
+ if (needsReactDOM) {
15
+ return ReactDOM.findDOMNode(target);
16
+ } else {
17
+ // eslint-disable-next-line
18
+ return React.findDOMNode(target);
19
+ }
20
+}
fixtures/dom/src/react-loader.js
+33
-22
@@ -36,19 +36,29 @@ function loadScript(src) {
36
});
37
}
38
39
-export function reactPaths() {
39
+function getVersion() {
40
let query = parseQuery(window.location.search);
41
- let version = query.version || 'local';
42
- let isProduction = query.production === 'true';
41
+ return query.version || 'local';
42
+}
43
44
+export function reactPaths(version = getVersion()) {
45
+ let query = parseQuery(window.location.search);
46
+ let isProduction = query.production === 'true';
47
let environment = isProduction ? 'production.min' : 'development';
45
-
46
- let reactPath = 'react.' + environment + '.js';
47
- let reactDOMPath = 'react-dom.' + environment + '.js';
48
- let reactDOMServerPath = 'react-dom-server.browser.' + environment + '.js';
48
+ let reactPath = `react.${environment}.js`;
49
+ let reactDOMPath = `react-dom.${environment}.js`;
50
+ let reactDOMServerPath = `react-dom-server.browser.${environment}.js`;
51
+ let needsCreateElement = true;
52
+ let needsReactDOM = true;
53
54
if (version !== 'local') {
55
const {major, minor, prerelease} = semver(version);
56
+
57
+ if (major === 0) {
58
+ needsCreateElement = minor >= 12;
59
+ needsReactDOM = minor >= 14;
60
+ }
61
+
62
const [preReleaseStage] = prerelease;
63
// The file structure was updated in 16. This wasn't the case for alphas.
64
// Load the old module location for anything less than 16 RC
@@ -68,26 +78,27 @@ export function reactPaths() {
78
reactDOMServerPath =
79
'https://unpkg.com/react-dom@' +
80
version +
71
- '/umd/react-dom-server.browser.' +
72
- environment +
73
- '.js';
74
- } else {
75
- let suffix = isProduction ? '.min.js' : '.js';
76
-
77
- reactPath = 'https://unpkg.com/react@' + version + '/dist/react' + suffix;
81
+ '/umd/react-dom-server.browser' +
82
+ environment;
83
+ } else if (major > 0 || minor > 11) {
84
+ reactPath = 'https://unpkg.com/react@' + version + '/dist/react.js';
85
reactDOMPath =
79
- 'https://unpkg.com/react-dom@' + version + '/dist/react-dom' + suffix;
86
+ 'https://unpkg.com/react-dom@' + version + '/dist/react-dom.js';
87
reactDOMServerPath =
81
- 'https://unpkg.com/react-dom@' +
82
- version +
83
- '/dist/react-dom-server' +
84
- suffix;
88
+ 'https://unpkg.com/react-dom@' + version + '/dist/react-dom-server.js';
89
+ } else {
90
+ reactPath =
91
+ 'https://cdnjs.cloudflare.com/ajax/libs/react/' + version + '/react.js';
92
}
93
}
94
88
- const needsReactDOM = version === 'local' || parseFloat(version, 10) > 0.13;
89
-
90
- return {reactPath, reactDOMPath, reactDOMServerPath, needsReactDOM};
95
+ return {
96
+ reactPath,
97
+ reactDOMPath,
98
+ reactDOMServerPath,
99
+ needsCreateElement,
100
+ needsReactDOM,
101
+ };
102
}
103
104
export default function loadReact() {