diff --git a/.travis.yml b/.travis.yml index b08d2bf6b25..0ca362c23c3 100644 --- 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 index 62f877da1d0..3a77c54b298 100644 --- 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 index c3dd6404b5e..5758c6263af 100644 --- 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 index 4a1b7901dc4..594f811549e 100755 --- 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 index 0679552a29a..6918cda52e0 100644 --- 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 index ab9a2728752..f25e473787d 100644 --- 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 index e1ea29c8869..a6f7226efa3 100644 --- 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 index d2f87f51cf3..ec8b442928f 100644 --- 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 index b6effe718e5..b0508dc4d23 100644 --- 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 index ba4676c4a77..11ee8589447 100644 --- 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 index 92f1de4295c..0954288130a 100644 --- 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[], +|}; + +type State = {| + collapsed: boolean, +|}; + +class Collapsible extends Component { state = { collapsed: true, }; diff --git a/packages/react-error-overlay/src/components/Overlay.js b/packages/react-error-overlay/src/components/ErrorOverlay.js similarity index 83% rename from packages/react-error-overlay/src/components/Overlay.js rename to packages/react-error-overlay/src/components/ErrorOverlay.js index 4fe530b6fee..2f706f2424b 100644 --- a/packages/react-error-overlay/src/components/Overlay.js +++ b/packages/react-error-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 { 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 index a2f40973d00..22716234332 100644 --- 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 ( -
- {props.headerText} -
- ); + return
{props.headerText}
; } export default Header; diff --git a/packages/react-error-overlay/src/containers/CompileErrorContainer.js b/packages/react-error-overlay/src/containers/CompileErrorContainer.js index bd193eb50b4..9eb8c029b32 100644 --- 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 { render() { const { error } = this.props; return ( - +

To get started, edit src/App.js and save to reload.