From 0f72be8fb0e426c7edf34cf95e3b72f0662ada90 Mon Sep 17 00:00:00 2001
From: Jan Poeschko <jan@poeschko.com>
Date: Tue, 11 Sep 2018 03:02:54 +0200
Subject: [PATCH 1/3] Add a checkbox to fixtures UI to choose React production
 build

---
 fixtures/dom/.gitignore               |  3 +++
 fixtures/dom/package.json             |  2 +-
 fixtures/dom/src/components/Header.js | 20 ++++++++++++++-
 fixtures/dom/src/react-loader.js      | 36 +++++++++++++++++++--------
 fixtures/dom/src/style.css            |  5 ++++
 5 files changed, 54 insertions(+), 12 deletions(-)

diff --git a/fixtures/dom/.gitignore b/fixtures/dom/.gitignore
index bffad9e24b6de..9f05c1cc2b73d 100644
--- 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
index 0f2959684a65b..90cb22479c124 100644
--- 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
index 9671d2c1d9af7..8276900bc0807 100644
--- 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,15 @@ class Header extends React.Component {
           </span>
 
           <div className="header-controls">
+            <input
+              id="react_production"
+              type="checkbox"
+              checked={this.state.production}
+              onChange={this.handleProductionChange}
+            />
+            <label htmlFor="react_production">
+              <span className="header__label">Production</span>
+            </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
index b3290bff7306b..43a3d7a18b3eb 100644
--- 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
index 6d401295c8c09..dbe22485e864e 100644
--- a/fixtures/dom/src/style.css
+++ b/fixtures/dom/src/style.css
@@ -126,6 +126,11 @@ textarea {
   width: 100%;
 }
 
+.header__label {
+  font-size: 12px;
+  color: #ccc;
+}
+
 .sr-only {
   clip: rect(0, 0, 0, 0);
   height: 0;

From ccc5849366e04a17d3ceb4db1c022026e73ff693 Mon Sep 17 00:00:00 2001
From: Jan Poeschko <jan@poeschko.com>
Date: Thu, 15 Nov 2018 00:02:07 +0100
Subject: [PATCH 2/3] Assign header__label class name to label directly,
 instead of using a separate span

---
 fixtures/dom/src/components/Header.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/fixtures/dom/src/components/Header.js b/fixtures/dom/src/components/Header.js
index 8276900bc0807..5c72d764ec565 100644
--- a/fixtures/dom/src/components/Header.js
+++ b/fixtures/dom/src/components/Header.js
@@ -58,8 +58,8 @@ class Header extends React.Component {
               checked={this.state.production}
               onChange={this.handleProductionChange}
             />
-            <label htmlFor="react_production">
-              <span className="header__label">Production</span>
+            <label htmlFor="react_production" className="header__label">
+              Production
             </label>
             <label htmlFor="example">
               <span className="sr-only">Select an example</span>

From 8d0db37210ca4e0c12d326391d2c20f47b93420c Mon Sep 17 00:00:00 2001
From: Jan Poeschko <jan@poeschko.com>
Date: Thu, 15 Nov 2018 00:02:38 +0100
Subject: [PATCH 3/3] center the production checkbox vertically

---
 fixtures/dom/src/components/Header.js | 1 +
 fixtures/dom/src/style.css            | 4 ++++
 2 files changed, 5 insertions(+)

diff --git a/fixtures/dom/src/components/Header.js b/fixtures/dom/src/components/Header.js
index 5c72d764ec565..17401e7938100 100644
--- a/fixtures/dom/src/components/Header.js
+++ b/fixtures/dom/src/components/Header.js
@@ -54,6 +54,7 @@ class Header extends React.Component {
           <div className="header-controls">
             <input
               id="react_production"
+              className="header__checkbox"
               type="checkbox"
               checked={this.state.production}
               onChange={this.handleProductionChange}
diff --git a/fixtures/dom/src/style.css b/fixtures/dom/src/style.css
index dbe22485e864e..d53477b41c4ce 100644
--- a/fixtures/dom/src/style.css
+++ b/fixtures/dom/src/style.css
@@ -126,6 +126,10 @@ textarea {
   width: 100%;
 }
 
+.header__checkbox {
+  vertical-align: middle;
+}
+
 .header__label {
   font-size: 12px;
   color: #ccc;