From 152ef623ade77de80e94f25f95c3d78b6e4206b5 Mon Sep 17 00:00:00 2001
From: Prashant Andani <prashant.andani@ymedialabs.com>
Date: Sat, 29 Dec 2018 19:25:51 +0530
Subject: [PATCH 1/2] Typo fixes

---
 packages/create-react-app/createReactApp.js                | 2 +-
 packages/react-dev-utils/WebpackDevServerUtils.js          | 4 ++--
 packages/react-error-overlay/src/components/Collapsible.js | 6 +++---
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/create-react-app/createReactApp.js b/packages/create-react-app/createReactApp.js
index fbf0f3c8160..208bb96f48f 100755
--- a/packages/create-react-app/createReactApp.js
+++ b/packages/create-react-app/createReactApp.js
@@ -232,7 +232,7 @@ function createApp(name, verbose, version, useNpm, template) {
           chalk.yellow(
             `You are using npm ${
               npmInfo.npmVersion
-            } so the project will be boostrapped with an old unsupported version of tools.\n\n` +
+            } so the project will be bootstrapped with an old unsupported version of tools.\n\n` +
               `Please update to npm 3 or higher for a better, fully supported experience.\n`
           )
         );
diff --git a/packages/react-dev-utils/WebpackDevServerUtils.js b/packages/react-dev-utils/WebpackDevServerUtils.js
index bc0378459c5..ad9b62624d3 100644
--- a/packages/react-dev-utils/WebpackDevServerUtils.js
+++ b/packages/react-dev-utils/WebpackDevServerUtils.js
@@ -333,7 +333,7 @@ function prepareProxy(proxy, appPublicFolder) {
           );
         },
         onProxyReq: proxyReq => {
-          // Browers may send Origin headers even with same-origin
+          // Browsers may send Origin headers even with same-origin
           // requests. To prevent CORS issues, we have to change
           // the Origin to match the target URL.
           if (proxyReq.getHeader('origin')) {
@@ -371,7 +371,7 @@ function prepareProxy(proxy, appPublicFolder) {
         return mayProxy(pathname) && pathname.match(context);
       },
       onProxyReq: proxyReq => {
-        // Browers may send Origin headers even with same-origin
+        // Browsers may send Origin headers even with same-origin
         // requests. To prevent CORS issues, we have to change
         // the Origin to match the target URL.
         if (proxyReq.getHeader('origin')) {
diff --git a/packages/react-error-overlay/src/components/Collapsible.js b/packages/react-error-overlay/src/components/Collapsible.js
index 016f3c7a708..34cfd09c2a1 100644
--- a/packages/react-error-overlay/src/components/Collapsible.js
+++ b/packages/react-error-overlay/src/components/Collapsible.js
@@ -48,7 +48,7 @@ class Collapsible extends Component<Props, State> {
     collapsed: true,
   };
 
-  toggleCollaped = () => {
+  toggleCollapsed = () => {
     this.setState(state => ({
       collapsed: !state.collapsed,
     }));
@@ -60,7 +60,7 @@ class Collapsible extends Component<Props, State> {
     return (
       <div>
         <button
-          onClick={this.toggleCollaped}
+          onClick={this.toggleCollapsed}
           style={
             collapsed ? collapsibleCollapsedStyle : collapsibleExpandedStyle
           }
@@ -72,7 +72,7 @@ class Collapsible extends Component<Props, State> {
         <div style={{ display: collapsed ? 'none' : 'block' }}>
           {this.props.children}
           <button
-            onClick={this.toggleCollaped}
+            onClick={this.toggleCollapsed}
             style={collapsibleExpandedStyle}
           >
             {`▲ ${count} stack frames were expanded.`}

From a195eea1949d9b32197a88a544d05423d7fb7485 Mon Sep 17 00:00:00 2001
From: Prashant Andani <prashant.andani@ymedialabs.com>
Date: Sun, 30 Dec 2018 11:51:11 +0530
Subject: [PATCH 2/2] Reverting WebpackDevServerUtils.js

---
 .../react-dev-utils/WebpackDevServerUtils.js  | 137 +++++++-----------
 1 file changed, 49 insertions(+), 88 deletions(-)

diff --git a/packages/react-dev-utils/WebpackDevServerUtils.js b/packages/react-dev-utils/WebpackDevServerUtils.js
index ad9b62624d3..67a1a45e3a6 100644
--- a/packages/react-dev-utils/WebpackDevServerUtils.js
+++ b/packages/react-dev-utils/WebpackDevServerUtils.js
@@ -150,7 +150,11 @@ function createCompiler(webpack, config, appName, urls, useYarn) {
     // We have switched off the default Webpack output in WebpackDevServer
     // options so we are going to "massage" the warnings and errors and present
     // them in a readable focused way.
-    const messages = formatWebpackMessages(stats.toJson({}, true));
+    // We only construct the warnings and errors for speed:
+    // https://github.com/facebook/create-react-app/issues/4492#issuecomment-421959548
+    const messages = formatWebpackMessages(
+      stats.toJson({ all: false, warnings: true, errors: true })
+    );
     const isSuccessful = !messages.errors.length && !messages.warnings.length;
     if (isSuccessful) {
       console.log(chalk.green('Compiled successfully!'));
@@ -265,110 +269,64 @@ function onProxyError(proxy) {
 
 function prepareProxy(proxy, appPublicFolder) {
   // `proxy` lets you specify alternate servers for specific requests.
-  // It can either be a string or an object conforming to the Webpack dev server proxy configuration
-  // https://webpack.github.io/docs/webpack-dev-server.html
   if (!proxy) {
     return undefined;
   }
-  if (typeof proxy !== 'object' && typeof proxy !== 'string') {
+  if (typeof proxy !== 'string') {
     console.log(
-      chalk.red(
-        'When specified, "proxy" in package.json must be a string or an object.'
-      )
+      chalk.red('When specified, "proxy" in package.json must be a string.')
     );
     console.log(
       chalk.red('Instead, the type of "proxy" was "' + typeof proxy + '".')
     );
     console.log(
-      chalk.red(
-        'Either remove "proxy" from package.json, or make it an object.'
-      )
+      chalk.red('Either remove "proxy" from package.json, or make it a string.')
     );
     process.exit(1);
   }
 
-  // Otherwise, if proxy is specified, we will let it handle any request except for files in the public folder.
+  // If proxy is specified, let it handle any request except for files in the public folder.
   function mayProxy(pathname) {
     const maybePublicPath = path.resolve(appPublicFolder, pathname.slice(1));
     return !fs.existsSync(maybePublicPath);
   }
 
-  // Support proxy as a string for those who are using the simple proxy option
-  if (typeof proxy === 'string') {
-    if (!/^http(s)?:\/\//.test(proxy)) {
-      console.log(
-        chalk.red(
-          'When "proxy" is specified in package.json it must start with either http:// or https://'
-        )
-      );
-      process.exit(1);
-    }
-
-    let target;
-    if (process.platform === 'win32') {
-      target = resolveLoopback(proxy);
-    } else {
-      target = proxy;
-    }
-    return [
-      {
-        target,
-        logLevel: 'silent',
-        // For single page apps, we generally want to fallback to /index.html.
-        // However we also want to respect `proxy` for API calls.
-        // So if `proxy` is specified as a string, we need to decide which fallback to use.
-        // We use a heuristic: We want to proxy all the requests that are not meant
-        // for static assets and as all the requests for static assets will be using
-        // `GET` method, we can proxy all non-`GET` requests.
-        // For `GET` requests, if request `accept`s text/html, we pick /index.html.
-        // Modern browsers include text/html into `accept` header when navigating.
-        // However API calls like `fetch()` won’t generally accept text/html.
-        // If this heuristic doesn’t work well for you, use a custom `proxy` object.
-        context: function(pathname, req) {
-          return (
-            req.method !== 'GET' ||
-            (mayProxy(pathname) &&
-              req.headers.accept &&
-              req.headers.accept.indexOf('text/html') === -1)
-          );
-        },
-        onProxyReq: proxyReq => {
-          // Browsers may send Origin headers even with same-origin
-          // requests. To prevent CORS issues, we have to change
-          // the Origin to match the target URL.
-          if (proxyReq.getHeader('origin')) {
-            proxyReq.setHeader('origin', target);
-          }
-        },
-        onError: onProxyError(target),
-        secure: false,
-        changeOrigin: true,
-        ws: true,
-        xfwd: true,
-      },
-    ];
+  if (!/^http(s)?:\/\//.test(proxy)) {
+    console.log(
+      chalk.red(
+        'When "proxy" is specified in package.json it must start with either http:// or https://'
+      )
+    );
+    process.exit(1);
   }
 
-  // Otherwise, proxy is an object so create an array of proxies to pass to webpackDevServer
-  return Object.keys(proxy).map(function(context) {
-    if (!proxy[context].hasOwnProperty('target')) {
-      console.log(
-        chalk.red(
-          'When `proxy` in package.json is as an object, each `context` object must have a ' +
-            '`target` property specified as a url string'
-        )
-      );
-      process.exit(1);
-    }
-    let target;
-    if (process.platform === 'win32') {
-      target = resolveLoopback(proxy[context].target);
-    } else {
-      target = proxy[context].target;
-    }
-    return Object.assign({}, proxy[context], {
-      context: function(pathname) {
-        return mayProxy(pathname) && pathname.match(context);
+  let target;
+  if (process.platform === 'win32') {
+    target = resolveLoopback(proxy);
+  } else {
+    target = proxy;
+  }
+  return [
+    {
+      target,
+      logLevel: 'silent',
+      // For single page apps, we generally want to fallback to /index.html.
+      // However we also want to respect `proxy` for API calls.
+      // So if `proxy` is specified as a string, we need to decide which fallback to use.
+      // We use a heuristic: We want to proxy all the requests that are not meant
+      // for static assets and as all the requests for static assets will be using
+      // `GET` method, we can proxy all non-`GET` requests.
+      // For `GET` requests, if request `accept`s text/html, we pick /index.html.
+      // Modern browsers include text/html into `accept` header when navigating.
+      // However API calls like `fetch()` won’t generally accept text/html.
+      // If this heuristic doesn’t work well for you, use `src/setupProxy.js`.
+      context: function(pathname, req) {
+        return (
+          req.method !== 'GET' ||
+          (mayProxy(pathname) &&
+            req.headers.accept &&
+            req.headers.accept.indexOf('text/html') === -1)
+        );
       },
       onProxyReq: proxyReq => {
         // Browsers may send Origin headers even with same-origin
@@ -378,10 +336,13 @@ function prepareProxy(proxy, appPublicFolder) {
           proxyReq.setHeader('origin', target);
         }
       },
-      target,
       onError: onProxyError(target),
-    });
-  });
+      secure: false,
+      changeOrigin: true,
+      ws: true,
+      xfwd: true,
+    },
+  ];
 }
 
 function choosePort(host, defaultPort) {