Merge branch 'master' of https://github.com/facebookincubator/create-…

…react-app * 'master' of https://github.com/facebookincubator/create-react-app: Resolved issue facebook#2971 (facebook#2989) Revert "run npm 5.4.0 in CI (facebook#3026)" (facebook#3107) Updated react-error-overlay to latest Flow (0.54.0) (facebook#3065) Auto-detect running editor on Linux for error overlay (facebook#3077) Clean target directory before compiling overlay (facebook#3102) Rerun prettier and pin version (facebook#3058) Reload the page when an error has occurred (facebook#3098) run npm 5.4.0 in CI (facebook#3026) Unmapper Windows compatibility (facebook#3079) Update eslint-config npm install command (facebook#3072) Set travis config to use 'precise' ci environment Publish Changelog for 1.0.13 Add missing slash Make error overlay filename configurable (facebook#3028) provide empty mock for child_process so importing libraries with it works (facebook#3033) Rename Overlay to ErrorOvelay (facebook#3051) Strip hash from chunk file name (facebook#3049) Fix error overlay 'Object.assign' issue in IE by including polyfills before webpack client (facebook#3046)
matart15 · Sep 13, 2017 · 8a152ae · 8a152ae
2 parents bdc1366 + 206f9e8
commit 8a152ae
Show file tree

Hide file tree

Showing 55 changed files with 315 additions and 189 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -1,4 +1,9 @@
 ---
+# Use Ubuntu Precise instead of new default Trusty which cause build fail
+# with pre installed yarn v0.17.8
+# https://github.com/facebookincubator/create-react-app/issues/3054
+# TODO: remove after Trusty environment is updated with a lastet version of yarn
+dist: precise
 language: node_js
 node_js:
   - 6

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,52 @@
+## 1.0.13 (September 2, 2017)
+
+#### :bug: Bug Fix
+
+* `react-error-overlay`
+
+  * [#3051](https://github.com/facebookincubator/create-react-app/pull/3051) Fix case-sensitivity issue with upgrading the package version. ([@tharakawj](https://github.com/tharakawj))
+
+* `react-dev-utils`
+
+  * [#3049](https://github.com/facebookincubator/create-react-app/pull/3049) Print filesize difference for chunks. ([@esturcke](https://github.com/esturcke))
+
+* `react-scripts`
+
+  * [#3046](https://github.com/facebookincubator/create-react-app/pull/3046) Fix crash in development mode on IE11. ([@tharakawj](https://github.com/tharakawj))
+
+#### :nail_care: Enhancement
+
+* `react-scripts`
+
+  * [#3033](https://github.com/facebookincubator/create-react-app/pull/3033) Add an empty mock for `child_process` to let some libraries compile. ([@McFlurriez](https://github.com/McFlurriez))
+
+#### :house: Internal
+
+* `react-dev-utils`, `react-error-overlay`
+
+  * [#3028](https://github.com/facebookincubator/create-react-app/pull/3028) Make error overlay filename configurable. ([@jaredpalmer](https://github.com/jaredpalmer))
+
+#### Committers: 4
+
+- Anthony ([McFlurriez](https://github.com/McFlurriez))
+- Erik J. Sturcke ([esturcke](https://github.com/esturcke))
+- Jared Palmer ([jaredpalmer](https://github.com/jaredpalmer))
+- Tharaka Wijebandara ([tharakawj](https://github.com/tharakawj))
+
+### Migrating from 1.0.12 to 1.0.13
+
+Inside any created project that has not been ejected, run:
+
+```
+npm install --save --save-exact react-scripts@1.0.13
+```
+
+or
+
+```
+yarn add --exact react-scripts@1.0.13
+```
+
 ## 1.0.12 (August 28, 2017)
 
 #### :bug: Bug Fix
@@ -62,6 +111,8 @@ or
 yarn add --exact react-scripts@1.0.12
 ```
 
+**Note:** there’s a [known issue](https://github.com/facebookincubator/create-react-app/issues/3041) that might cause the project to not compile after upgrading. In this case, migrate straight to `1.0.13` which doesn’t have this issue.
+
 ## 1.0.11 (August 9, 2017)
 
 #### :bug: Bug Fix

diff --git a/package.json b/package.json
@@ -19,7 +19,7 @@
     "lerna": "^2.0.0",
     "lerna-changelog": "^0.6.0",
     "lint-staged": "^3.3.1",
-    "prettier": "^1.5.2"
+    "prettier": "1.6.1"
   },
   "lint-staged": {
     "*.js": [

diff --git a/packages/create-react-app/createReactApp.js b/packages/create-react-app/createReactApp.js
@@ -455,7 +455,9 @@ function checkNpmVersion() {
   let hasMinNpm = false;
   let npmVersion = null;
   try {
-    npmVersion = execSync('npm --version').toString().trim();
+    npmVersion = execSync('npm --version')
+      .toString()
+      .trim();
     hasMinNpm = semver.gte(npmVersion, '3.0.0');
   } catch (err) {
     // ignore

diff --git a/packages/eslint-config-react-app/README.md b/packages/eslint-config-react-app/README.md
@@ -19,7 +19,7 @@ If you want to use this ESLint configuration in a project not built with Create
 First, install this package, ESLint and the necessary plugins.
 
   ```sh
-  npm install --save-dev eslint-config-react-app babel-eslint@7.2.3 eslint@3.19.0 eslint-plugin-flowtype@2.33.0 eslint-plugin-import@2.2.0 eslint-plugin-jsx-a11y@5.0.1 eslint-plugin-react@7.0.1
+  npm install --save-dev eslint-config-react-app babel-eslint@^7.2.3 eslint@^4.1.1 eslint-plugin-flowtype@^2.34.1 eslint-plugin-import@^2.6.0 eslint-plugin-jsx-a11y@^5.1.1 eslint-plugin-react@^7.1.0
   ```
 
 Then create a file named `.eslintrc` with following contents in the root folder of your project:

diff --git a/packages/react-dev-utils/FileSizeReporter.js b/packages/react-dev-utils/FileSizeReporter.js
@@ -92,7 +92,10 @@ function printFileSizesAfterBuild(
 function removeFileNameHash(buildFolder, fileName) {
   return fileName
     .replace(buildFolder, '')
-    .replace(/\/?(.*)(\.\w+)(\.js|\.css)/, (match, p1, p2, p3) => p1 + p3);
+    .replace(
+      /\/?(.*)(\.[0-9a-f]+)(\.chunk)?(\.js|\.css)/,
+      (match, p1, p2, p3, p4) => p1 + p4
+    );
 }
 
 // Input: 1024, 2048

diff --git a/packages/react-dev-utils/launchEditor.js b/packages/react-dev-utils/launchEditor.js
@@ -43,7 +43,7 @@ const COMMON_EDITORS_OSX = {
   '/Applications/CLion.app/Contents/MacOS/clion':
     '/Applications/CLion.app/Contents/MacOS/clion',
   '/Applications/IntelliJ IDEA.app/Contents/MacOS/idea':
-      '/Applications/IntelliJ IDEA.app/Contents/MacOS/idea',
+    '/Applications/IntelliJ IDEA.app/Contents/MacOS/idea',
   '/Applications/PhpStorm.app/Contents/MacOS/phpstorm':
     '/Applications/PhpStorm.app/Contents/MacOS/phpstorm',
   '/Applications/PyCharm.app/Contents/MacOS/pycharm':
@@ -53,7 +53,21 @@ const COMMON_EDITORS_OSX = {
   '/Applications/RubyMine.app/Contents/MacOS/rubymine':
     '/Applications/RubyMine.app/Contents/MacOS/rubymine',
   '/Applications/WebStorm.app/Contents/MacOS/webstorm':
-      '/Applications/WebStorm.app/Contents/MacOS/webstorm',
+    '/Applications/WebStorm.app/Contents/MacOS/webstorm',
+};
+
+const COMMON_EDITORS_LINUX = {
+  atom: 'atom',
+  Brackets: 'brackets',
+  code: 'code',
+  emacs: 'emacs',
+  'idea.sh': 'idea',
+  'phpstorm.sh': 'phpstorm',
+  'pycharm.sh': 'pycharm',
+  'rubymine.sh': 'rubymine',
+  sublime_text: 'sublime_text',
+  vim: 'vim',
+  'webstorm.sh': 'webstorm',
 };
 
 const COMMON_EDITORS_WIN = [
@@ -144,8 +158,9 @@ function guessEditor() {
     return shellQuote.parse(process.env.REACT_EDITOR);
   }
 
-  // Using `ps x` on OSX or `Get-Process` on Windows we can find out which editor is currently running.
-  // Potentially we could use similar technique for Linux
+  // We can find out which editor is currently running by:
+  // `ps x` on macOS and Linux
+  // `Get-Process` on Windows
   try {
     if (process.platform === 'darwin') {
       const output = child_process.execSync('ps x').toString();
@@ -176,6 +191,20 @@ function guessEditor() {
           return [fullProcessPath];
         }
       }
+    } else if (process.platform === 'linux') {
+      // --no-heading No header line
+      // x List all processes owned by you
+      // -o comm Need only names column
+      const output = child_process
+        .execSync('ps x --no-heading -o comm --sort=comm')
+        .toString();
+      const processNames = Object.keys(COMMON_EDITORS_LINUX);
+      for (let i = 0; i < processNames.length; i++) {
+        const processName = processNames[i];
+        if (output.indexOf(processName) !== -1) {
+          return [COMMON_EDITORS_LINUX[processName]];
+        }
+      }
     }
   } catch (error) {
     // Ignore...

diff --git a/packages/react-dev-utils/package.json b/packages/react-dev-utils/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dev-utils",
-  "version": "4.0.0",
+  "version": "4.0.1",
   "description": "Webpack utilities used by Create React App",
   "repository": "facebookincubator/create-react-app",
   "license": "BSD-3-Clause",
@@ -47,7 +47,7 @@
     "inquirer": "3.2.1",
     "is-root": "1.0.0",
     "opn": "5.1.0",
-    "react-error-overlay": "^2.0.0",
+    "react-error-overlay": "^2.0.1",
     "recursive-readdir": "2.2.1",
     "shell-quote": "1.6.1",
     "sockjs-client": "1.1.4",

diff --git a/packages/react-dev-utils/webpackHotDevClient.js b/packages/react-dev-utils/webpackHotDevClient.js
@@ -25,14 +25,19 @@ var launchEditorEndpoint = require('./launchEditorEndpoint');
 var formatWebpackMessages = require('./formatWebpackMessages');
 var ErrorOverlay = require('react-error-overlay');
 
+// We need to keep track of if there has been a runtime error.
+// Essentially, we cannot guarantee application state was not corrupted by the
+// runtime error. To prevent confusing behavior, we forcibly reload the entire
+// application. This is handled below when we are notified of a compile (code
+// change).
+// See https://github.com/facebookincubator/create-react-app/issues/3096
+var hadRuntimeError = false;
 ErrorOverlay.startReportingRuntimeErrors({
   launchEditorEndpoint: launchEditorEndpoint,
   onError: function() {
-    // TODO: why do we need this?
-    if (module.hot && typeof module.hot.decline === 'function') {
-      module.hot.decline();
-    }
+    hadRuntimeError = true;
   },
+  filename: '/static/js/bundle.js',
 });
 
 if (module.hot && typeof module.hot.dispose === 'function') {
@@ -226,7 +231,7 @@ function tryApplyUpdates(onHotUpdateSuccess) {
   }
 
   function handleApplyUpdates(err, updatedModules) {
-    if (err || !updatedModules) {
+    if (err || !updatedModules || hadRuntimeError) {
       window.location.reload();
       return;
     }

diff --git a/packages/react-error-overlay/package.json b/packages/react-error-overlay/package.json
@@ -1,14 +1,14 @@
 {
   "name": "react-error-overlay",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "An overlay for displaying stack frames.",
   "main": "lib/index.js",
   "scripts": {
     "prepublishOnly": "npm run build:prod && npm test",
-    "start": "cross-env NODE_ENV=development npm run build -- --watch",
+    "start": "rimraf lib/ && cross-env NODE_ENV=development npm run build -- --watch",
     "test": "flow && jest",
-    "build": "babel src/ -d lib/",
-    "build:prod": "cross-env NODE_ENV=production babel src/ -d lib/"
+    "build": "rimraf lib/ && babel src/ -d lib/",
+    "build:prod": "rimraf lib/ && cross-env NODE_ENV=production babel src/ -d lib/"
   },
   "repository": "facebookincubator/create-react-app",
   "license": "BSD-3-Clause",
@@ -51,9 +51,10 @@
     "eslint-plugin-import": "2.7.0",
     "eslint-plugin-jsx-a11y": "5.1.1",
     "eslint-plugin-react": "7.1.0",
-    "flow-bin": "0.52.0",
+    "flow-bin": "^0.54.0",
     "jest": "20.0.4",
-    "jest-fetch-mock": "1.2.1"
+    "jest-fetch-mock": "1.2.1",
+    "rimraf": "^2.6.1"
   },
   "jest": {
     "setupFiles": [

diff --git a/packages/react-error-overlay/src/components/Collapsible.js b/packages/react-error-overlay/src/components/Collapsible.js
@@ -11,6 +11,8 @@
 import React, { Component } from 'react';
 import { black } from '../styles';
 
+import type { Element as ReactElement } from 'react';
+
 const _collapsibleStyle = {
   color: black,
   cursor: 'pointer',
@@ -35,7 +37,15 @@ const collapsibleExpandedStyle = {
   marginBottom: '0.6em',
 };
 
-class Collapsible extends Component {
+type Props = {|
+  children: ReactElement<any>[],
+|};
+
+type State = {|
+  collapsed: boolean,
+|};
+
+class Collapsible extends Component<Props, State> {
   state = {
     collapsed: true,
   };

diff --git a/...t-error-overlay/src/components/Overlay.js → ...or-overlay/src/components/ErrorOverlay.js b/...t-error-overlay/src/components/Overlay.js → ...or-overlay/src/components/ErrorOverlay.js
@@ -11,6 +11,8 @@
 import React, { Component } from 'react';
 import { black } from '../styles';
 
+import type { Node as ReactNode } from 'react';
+
 const overlayStyle = {
   position: 'relative',
   display: 'inline-flex',
@@ -31,10 +33,19 @@ const overlayStyle = {
   color: black,
 };
 
-class Overlay extends Component {
+type Props = {|
+  children: ReactNode,
+  shortcutHandler?: (eventKey: string) => void,
+|};
+
+type State = {|
+  collapsed: boolean,
+|};
+
+class ErrorOverlay extends Component<Props, State> {
   iframeWindow: window = null;
 
-  getIframeWindow = (element: HTMLDivElement) => {
+  getIframeWindow = (element: ?HTMLDivElement) => {
     if (element) {
       const document = element.ownerDocument;
       this.iframeWindow = document.defaultView;
@@ -71,4 +82,4 @@ class Overlay extends Component {
   }
 }
 
-export default Overlay;
+export default ErrorOverlay;
diff --git a/packages/react-error-overlay/src/components/Header.js b/packages/react-error-overlay/src/components/Header.js
@@ -29,11 +29,7 @@ type HeaderPropType = {|
 |};
 
 function Header(props: HeaderPropType) {
-  return (
-    <div style={headerStyle}>
-      {props.headerText}
-    </div>
-  );
+  return <div style={headerStyle}>{props.headerText}</div>;
 }
 
 export default Header;
diff --git a/packages/react-error-overlay/src/containers/CompileErrorContainer.js b/packages/react-error-overlay/src/containers/CompileErrorContainer.js
@@ -9,21 +9,25 @@
 
 /* @flow */
 import React, { PureComponent } from 'react';
-import Overlay from '../components/Overlay';
+import ErrorOverlay from '../components/ErrorOverlay';
 import Footer from '../components/Footer';
 import Header from '../components/Header';
 import CodeBlock from '../components/CodeBlock';
 import generateAnsiHTML from '../utils/generateAnsiHTML';
 
-class CompileErrorContainer extends PureComponent {
+type Props = {|
+  error: string,
+|};
+
+class CompileErrorContainer extends PureComponent<Props, void> {
   render() {
     const { error } = this.props;
     return (
-      <Overlay>
+      <ErrorOverlay>
         <Header headerText="Failed to compile" />
         <CodeBlock main={true} codeHTML={generateAnsiHTML(error)} />
         <Footer line1="This error occurred during the build time and cannot be dismissed." />
-      </Overlay>
+      </ErrorOverlay>
     );
   }
 }

diff --git a/packages/react-error-overlay/src/containers/RuntimeError.js b/packages/react-error-overlay/src/containers/RuntimeError.js
@@ -11,14 +11,15 @@
 import React from 'react';
 import Header from '../components/Header';
 import StackTrace from './StackTrace';
+
 import type { StackFrame } from '../utils/stack-frame';
 
 const wrapperStyle = {
   display: 'flex',
   flexDirection: 'column',
 };
 
-type ErrorRecord = {|
+export type ErrorRecord = {|
   error: Error,
   unhandledRejection: boolean,
   contextSize: number,