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
facebook · Nov 14, 2018 · 5f06576 · 5f06576
1 parent 8feeed1
commit 5f06576
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 12 deletions.
diff --git a/fixtures/dom/.gitignore b/fixtures/dom/.gitignore
@@ -9,8 +9,11 @@ coverage
 # production
 build
 public/react.development.js
+public/react.production.min.js
 public/react-dom.development.js
+public/react-dom.production.min.js
 public/react-dom-server.browser.development.js
+public/react-dom-server.browser.production.min.js
 
 # misc
 .DS_Store

diff --git a/fixtures/dom/package.json b/fixtures/dom/package.json
@@ -18,7 +18,7 @@
   },
   "scripts": {
     "start": "react-scripts start",
-    "prestart": "cp ../../build/dist/react.development.js ../../build/dist/react-dom.development.js ../../build/dist/react-dom-server.browser.development.js public/",
+    "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/",
     "build": "react-scripts build && cp build/index.html build/200.html",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"

diff --git a/fixtures/dom/src/components/Header.js b/fixtures/dom/src/components/Header.js
@@ -7,8 +7,9 @@ class Header extends React.Component {
     super(props, context);
     const query = parse(window.location.search);
     const version = query.version || 'local';
+    const production = query.production || false;
     const versions = [version];
-    this.state = {version, versions};
+    this.state = {version, versions, production};
   }
   componentWillMount() {
     getVersionTags().then(tags => {
@@ -25,6 +26,14 @@ class Header extends React.Component {
     }
     window.location.search = stringify(query);
   }
+  handleProductionChange(event) {
+    const query = parse(window.location.search);
+    query.production = event.target.checked;
+    if (!query.production) {
+      delete query.production;
+    }
+    window.location.search = stringify(query);
+  }
   handleFixtureChange(event) {
     window.location.pathname = event.target.value;
   }
@@ -43,6 +52,16 @@ class Header extends React.Component {
           </span>
 
           <div className="header-controls">
+            <input
+              id="react_production"
+              className="header__checkbox"
+              type="checkbox"
+              checked={this.state.production}
+              onChange={this.handleProductionChange}
+            />
+            <label htmlFor="react_production" className="header__label">
+              Production
+            </label>
             <label htmlFor="example">
               <span className="sr-only">Select an example</span>
               <select

diff --git a/fixtures/dom/src/react-loader.js b/fixtures/dom/src/react-loader.js
@@ -37,12 +37,15 @@ function loadScript(src) {
 }
 
 export function reactPaths() {
-  let reactPath = 'react.development.js';
-  let reactDOMPath = 'react-dom.development.js';
-  let reactDOMServerPath = 'react-dom-server.browser.development.js';
-
   let query = parseQuery(window.location.search);
   let version = query.version || 'local';
+  let isProduction = query.production === 'true';
+
+  let environment = isProduction ? 'production.min' : 'development';
+
+  let reactPath = 'react.' + environment + '.js';
+  let reactDOMPath = 'react-dom.' + environment + '.js';
+  let reactDOMServerPath = 'react-dom-server.browser.' + environment + '.js';
 
   if (version !== 'local') {
     const {major, minor, prerelease} = semver(version);
@@ -51,21 +54,34 @@ export function reactPaths() {
     // Load the old module location for anything less than 16 RC
     if (major >= 16 && !(minor === 0 && preReleaseStage === 'alpha')) {
       reactPath =
-        'https://unpkg.com/react@' + version + '/umd/react.development.js';
+        'https://unpkg.com/react@' +
+        version +
+        '/umd/react.' +
+        environment +
+        '.js';
       reactDOMPath =
         'https://unpkg.com/react-dom@' +
         version +
-        '/umd/react-dom.development.js';
+        '/umd/react-dom.' +
+        environment +
+        '.js';
       reactDOMServerPath =
         'https://unpkg.com/react-dom@' +
         version +
-        '/umd/react-dom-server.browser.development';
+        '/umd/react-dom-server.browser.' +
+        environment +
+        '.js';
     } else {
-      reactPath = 'https://unpkg.com/react@' + version + '/dist/react.js';
+      let suffix = isProduction ? '.min.js' : '.js';
+
+      reactPath = 'https://unpkg.com/react@' + version + '/dist/react' + suffix;
       reactDOMPath =
-        'https://unpkg.com/react-dom@' + version + '/dist/react-dom.js';
+        'https://unpkg.com/react-dom@' + version + '/dist/react-dom' + suffix;
       reactDOMServerPath =
-        'https://unpkg.com/react-dom@' + version + '/dist/react-dom-server.js';
+        'https://unpkg.com/react-dom@' +
+        version +
+        '/dist/react-dom-server' +
+        suffix;
     }
   }
 

diff --git a/fixtures/dom/src/style.css b/fixtures/dom/src/style.css
@@ -126,6 +126,15 @@ textarea {
   width: 100%;
 }
 
+.header__checkbox {
+  vertical-align: middle;
+}
+
+.header__label {
+  font-size: 12px;
+  color: #ccc;
+}
+
 .sr-only {
   clip: rect(0, 0, 0, 0);
   height: 0;