Add a checkbox to fixtures UI to choose React production build (#13786)
* Add a checkbox to fixtures UI to choose React production build * Assign header__label class name to label directly, instead of using a separate span * center the production checkbox vertically
Jan Pöschko committed
Nov 15, 2018 at 00:34 UTC
5f06576f51ece88d846d01abd2ddd575827c6127
5 files changed
+59
-12
fixtures/dom/.gitignore
+3
@@ -9,8 +9,11 @@ coverage
9
# production
10
build
11
public/react.development.js
12
+public/react.production.min.js
13
public/react-dom.development.js
14
+public/react-dom.production.min.js
15
public/react-dom-server.browser.development.js
16
+public/react-dom-server.browser.production.min.js
17
18
# misc
19
.DS_Store
fixtures/dom/package.json
+1
-1
@@ -18,7 +18,7 @@
18
},
19
"scripts": {
20
"start": "react-scripts start",
21
- "prestart": "cp ../../build/dist/react.development.js ../../build/dist/react-dom.development.js ../../build/dist/react-dom-server.browser.development.js public/",
21
+ "prestart": "cp ../../build/dist/react.development.js ../../build/dist/react-dom.development.js ../../build/dist/react.production.min.js ../../build/dist/react-dom.production.min.js ../../build/dist/react-dom-server.browser.development.js ../../build/dist/react-dom-server.browser.production.min.js public/",
22
"build": "react-scripts build && cp build/index.html build/200.html",
23
"test": "react-scripts test --env=jsdom",
24
"eject": "react-scripts eject"
fixtures/dom/src/components/Header.js
+20
-1
@@ -7,8 +7,9 @@ class Header extends React.Component {
7
super(props, context);
8
const query = parse(window.location.search);
9
const version = query.version || 'local';
10
+ const production = query.production || false;
11
const versions = [version];
11
- this.state = {version, versions};
12
+ this.state = {version, versions, production};
13
}
14
componentWillMount() {
15
getVersionTags().then(tags => {
@@ -25,6 +26,14 @@ class Header extends React.Component {
26
}
27
window.location.search = stringify(query);
28
}
29
+ handleProductionChange(event) {
30
+ const query = parse(window.location.search);
31
+ query.production = event.target.checked;
32
+ if (!query.production) {
33
+ delete query.production;
34
+ }
35
+ window.location.search = stringify(query);
36
+ }
37
handleFixtureChange(event) {
38
window.location.pathname = event.target.value;
39
}
@@ -43,6 +52,16 @@ class Header extends React.Component {
52
</span>
53
54
<div className="header-controls">
55
+ <input
56
+ id="react_production"
57
+ className="header__checkbox"
58
+ type="checkbox"
59
+ checked={this.state.production}
60
+ onChange={this.handleProductionChange}
61
+ />
62
+ <label htmlFor="react_production" className="header__label">
63
+ Production
64
+ </label>
65
<label htmlFor="example">
66
<span className="sr-only">Select an example</span>
67
<select
fixtures/dom/src/react-loader.js
+26
-10
@@ -37,12 +37,15 @@ function loadScript(src) {
37
}
38
39
export function reactPaths() {
40
- let reactPath = 'react.development.js';
41
- let reactDOMPath = 'react-dom.development.js';
42
- let reactDOMServerPath = 'react-dom-server.browser.development.js';
43
-
40
let query = parseQuery(window.location.search);
41
let version = query.version || 'local';
42
+ let isProduction = query.production === 'true';
43
+
44
+ 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';
49
50
if (version !== 'local') {
51
const {major, minor, prerelease} = semver(version);
@@ -51,21 +54,34 @@ export function reactPaths() {
54
// Load the old module location for anything less than 16 RC
55
if (major >= 16 && !(minor === 0 && preReleaseStage === 'alpha')) {
56
reactPath =
54
- 'https://unpkg.com/react@' + version + '/umd/react.development.js';
57
+ 'https://unpkg.com/react@' +
58
+ version +
59
+ '/umd/react.' +
60
+ environment +
61
+ '.js';
62
reactDOMPath =
63
'https://unpkg.com/react-dom@' +
64
version +
58
- '/umd/react-dom.development.js';
65
+ '/umd/react-dom.' +
66
+ environment +
67
+ '.js';
68
reactDOMServerPath =
69
'https://unpkg.com/react-dom@' +
70
version +
62
- '/umd/react-dom-server.browser.development';
71
+ '/umd/react-dom-server.browser.' +
72
+ environment +
73
+ '.js';
74
} else {
64
- reactPath = 'https://unpkg.com/react@' + version + '/dist/react.js';
75
+ let suffix = isProduction ? '.min.js' : '.js';
76
+
77
+ reactPath = 'https://unpkg.com/react@' + version + '/dist/react' + suffix;
78
reactDOMPath =
66
- 'https://unpkg.com/react-dom@' + version + '/dist/react-dom.js';
79
+ 'https://unpkg.com/react-dom@' + version + '/dist/react-dom' + suffix;
80
reactDOMServerPath =
68
- 'https://unpkg.com/react-dom@' + version + '/dist/react-dom-server.js';
81
+ 'https://unpkg.com/react-dom@' +
82
+ version +
83
+ '/dist/react-dom-server' +
84
+ suffix;
85
}
86
}
87
fixtures/dom/src/style.css
+9
@@ -126,6 +126,15 @@ textarea {
126
width: 100%;
127
}
128
129
+.header__checkbox {
130
+ vertical-align: middle;
131
+}
132
+
133
+.header__label {
134
+ font-size: 12px;
135
+ color: #ccc;
136
+}
137
+
138
.sr-only {
139
clip: rect(0, 0, 0, 0);
140
height: 0;