From d679843d050e53764e1a02f597c36d1052ba25e0 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Wed, 19 Jul 2017 18:19:18 +0100 Subject: [PATCH 01/36] Add explicit "Opting Out of Caching" header (#2822) --- packages/react-scripts/template/README.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 82642ca3a8e..55960e2b905 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -68,6 +68,7 @@ You can find the most recent version of this guide [here](https://github.com/fac - [Getting Started with Storybook](#getting-started-with-storybook) - [Getting Started with Styleguidist](#getting-started-with-styleguidist) - [Making a Progressive Web App](#making-a-progressive-web-app) + - [Opting Out of Caching](#opting-out-of-caching) - [Offline-First Considerations](#offline-first-considerations) - [Progressive Web App Metadata](#progressive-web-app-metadata) - [Analyzing the Bundle Size](#analyzing-the-bundle-size) @@ -1562,6 +1563,8 @@ The service worker will use a [cache-first strategy](https://developers.google.c for handling all requests for local assets, including the initial HTML, ensuring that your web app is reliably fast, even on a slow or unreliable network. +### Opting Out of Caching + If you would prefer not to enable service workers prior to your initial production deployment, then remove the call to `serviceWorkerRegistration.register()` from [`src/index.js`](src/index.js). @@ -1571,7 +1574,8 @@ have decided that you would like to disable them for all your existing users, you can swap out the call to `serviceWorkerRegistration.register()` in [`src/index.js`](src/index.js) with a call to `serviceWorkerRegistration.unregister()`. After the user visits a page that has `serviceWorkerRegistration.unregister()`, -the service worker will be uninstalled. +the service worker will be uninstalled. Note that depending on how `/service-worker.js` is served, +it make take up to 24 hours for the cache to be invalidated. ### Offline-First Considerations From bc82755aff3bb31e4cf3b4a89de06e587f69bdde Mon Sep 17 00:00:00 2001 From: themre Date: Tue, 25 Jul 2017 21:28:45 +0200 Subject: [PATCH 02/36] Feature/webpack3 (#2574) * Add source-map-loader to support source maps of dependencies * merge with latest develop * add ModuleConcatenationPlugin * revert source-map-loader * bump to 3.1 and update dev-server * rebase to master * rebase again * bump webpack * remove ModuleConcatenationPlugin, downgraded react packages, bump etwp * ETWP rc1 only for testing * bump ETWP and webpack 3 * bump WP3 * revert to 3.2.0 * bump sw-precache-webpack-plugin * bump back to 3.3.0 * bump dev-server and manifest --- packages/react-scripts/package.json | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 6ea3873c7b6..ce7b10ebd71 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -39,7 +39,7 @@ "eslint-plugin-import": "2.7.0", "eslint-plugin-jsx-a11y": "5.1.1", "eslint-plugin-react": "7.1.0", - "extract-text-webpack-plugin": "2.1.2", + "extract-text-webpack-plugin": "3.0.0", "file-loader": "0.11.2", "fs-extra": "3.0.1", "html-webpack-plugin": "2.29.0", @@ -47,15 +47,15 @@ "object-assign": "4.1.1", "postcss-flexbugs-fixes": "3.0.0", "postcss-loader": "2.0.6", - "promise": "7.1.1", + "promise": "8.0.1", "react-dev-utils": "^3.0.2", "react-error-overlay": "^1.0.9", "style-loader": "0.18.2", - "sw-precache-webpack-plugin": "0.11.3", + "sw-precache-webpack-plugin": "0.11.4", "url-loader": "0.5.9", - "webpack": "2.6.1", - "webpack-dev-server": "2.5.1", - "webpack-manifest-plugin": "1.1.0", + "webpack": "3.3.0", + "webpack-dev-server": "2.6.1", + "webpack-manifest-plugin": "1.2.1", "whatwg-fetch": "2.0.3" }, "devDependencies": { From b1c12241e455572db4440de77d20ed9a53202b56 Mon Sep 17 00:00:00 2001 From: themre Date: Wed, 26 Jul 2017 10:58:42 +0200 Subject: [PATCH 03/36] Bump Webpack 3.4 (#2850) * bump wp3 * try bump babel-loader --- packages/react-scripts/package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index ce7b10ebd71..e618bf0a094 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -25,7 +25,7 @@ "babel-core": "6.25.0", "babel-eslint": "7.2.3", "babel-jest": "20.0.3", - "babel-loader": "7.0.0", + "babel-loader": "7.1.1", "babel-preset-react-app": "^3.0.1", "babel-runtime": "6.23.0", "case-sensitive-paths-webpack-plugin": "2.1.1", @@ -53,7 +53,7 @@ "style-loader": "0.18.2", "sw-precache-webpack-plugin": "0.11.4", "url-loader": "0.5.9", - "webpack": "3.3.0", + "webpack": "3.4.0", "webpack-dev-server": "2.6.1", "webpack-manifest-plugin": "1.2.1", "whatwg-fetch": "2.0.3" From ea9427bdfe742f353aa32938ade22c1c0bede93d Mon Sep 17 00:00:00 2001 From: Wiley Bennett Date: Tue, 1 Aug 2017 17:10:55 -0700 Subject: [PATCH 04/36] Allow use of scoped packages with a pinned version (#2853) Fixes #2883 --- packages/create-react-app/createReactApp.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/create-react-app/createReactApp.js b/packages/create-react-app/createReactApp.js index 07b083a5f62..6fd6c75aca3 100755 --- a/packages/create-react-app/createReactApp.js +++ b/packages/create-react-app/createReactApp.js @@ -441,7 +441,7 @@ function getPackageName(installPackage) { // git+https://github.com/mycompany/react-scripts.git // git+ssh://github.com/mycompany/react-scripts.git#v1.2.3 return Promise.resolve(installPackage.match(/([^\/]+)\.git(#.*)?$/)[1]); - } else if (installPackage.indexOf('@') > 0) { + } else if (installPackage.match(/.+@/)) { // Do not match @scope/ when stripping off @version or @tag return Promise.resolve( installPackage.charAt(0) + installPackage.substr(1).split('@')[0] From a73252f06f4fce747e94e60e2d5ce5282a62ef73 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kiho=20=C2=B7=20Cham?= Date: Wed, 2 Aug 2017 09:04:25 +0800 Subject: [PATCH 05/36] Use modern syntax feature (#2873) The create-react-app need node >= 6, and node version 6 support a lot of ES6, and let's switch using '+' to concat string with template string. --- packages/react-scripts/bin/react-scripts.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/bin/react-scripts.js b/packages/react-scripts/bin/react-scripts.js index cb52fe71b09..abb2741f854 100755 --- a/packages/react-scripts/bin/react-scripts.js +++ b/packages/react-scripts/bin/react-scripts.js @@ -21,7 +21,7 @@ switch (script) { case 'test': { const result = spawn.sync( 'node', - [require.resolve('../scripts/' + script)].concat(args), + [require.resolve(`../scripts/${script}`)].concat(args), { stdio: 'inherit' } ); if (result.signal) { From 13c73603ce24e13a8c04092e8b535905e4a2b230 Mon Sep 17 00:00:00 2001 From: Forbes Lindesay Date: Wed, 2 Aug 2017 02:19:40 +0100 Subject: [PATCH 06/36] Update webpack version note (#2798) * Remove note about webpackHotDevClient being webpack 1.0 only It must work in webpack 2 since create-react-app is still using it and is using webpack 2 now. It would be great if you could add some kind of note about how it differs from the default webpack hot reloaders. * Update README.md * Update README.md --- packages/react-dev-utils/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-dev-utils/README.md b/packages/react-dev-utils/README.md index 166e1bfaea3..54033874734 100644 --- a/packages/react-dev-utils/README.md +++ b/packages/react-dev-utils/README.md @@ -295,7 +295,7 @@ Returns an object with local and remote URLs for the development server. Pass th This is an alternative client for [WebpackDevServer](https://github.com/webpack/webpack-dev-server) that shows a syntax error overlay. -It currently supports only Webpack 1.x. +It currently supports only Webpack 3.x. ```js // Webpack development config From cff167f068f98a3bf453dee263282eacc6838c70 Mon Sep 17 00:00:00 2001 From: 864907600cc Date: Wed, 2 Aug 2017 09:21:07 +0800 Subject: [PATCH 07/36] Fix parsing HTML/JSX tags to real elements (#2796) * Fix parsing HTML/JSX tags to real elements * Use `html-entities` to escape instead of pure `replace()` * Remove unnecessary HTML entity replacing --- packages/react-dev-utils/ansiHTML.js | 4 +++- packages/react-dev-utils/webpackHotDevClient.js | 4 +--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/react-dev-utils/ansiHTML.js b/packages/react-dev-utils/ansiHTML.js index 9f53cea67a3..90bf70374ee 100644 --- a/packages/react-dev-utils/ansiHTML.js +++ b/packages/react-dev-utils/ansiHTML.js @@ -10,6 +10,8 @@ 'use strict'; var Anser = require('anser'); +var Entities = require('html-entities').AllHtmlEntities; +var entities = new Entities(); // Color scheme inspired by https://chriskempson.github.io/base16/css/base16-github.css // var base00 = 'ffffff'; // Default Background @@ -61,7 +63,7 @@ var anserMap = { }; function ansiHTML(txt) { - var arr = new Anser().ansiToJson(txt, { + var arr = new Anser().ansiToJson(entities.encode(txt), { use_classes: true, }); diff --git a/packages/react-dev-utils/webpackHotDevClient.js b/packages/react-dev-utils/webpackHotDevClient.js index 78002b28efb..f2f206a5cd2 100644 --- a/packages/react-dev-utils/webpackHotDevClient.js +++ b/packages/react-dev-utils/webpackHotDevClient.js @@ -22,9 +22,7 @@ var SockJS = require('sockjs-client'); var stripAnsi = require('strip-ansi'); var url = require('url'); var formatWebpackMessages = require('./formatWebpackMessages'); -var Entities = require('html-entities').AllHtmlEntities; var ansiHTML = require('./ansiHTML'); -var entities = new Entities(); function createOverlayIframe(onIframeLoad) { var iframe = document.createElement('iframe'); @@ -138,7 +136,7 @@ function showErrorOverlay(message) { 'margin-bottom: 0.5em; overflow-x: auto; white-space: pre-wrap; ' + 'border-radius: 0.25rem; background-color: rgba(206, 17, 38, 0.05)">' + '' + - ansiHTML(entities.encode(message)) + + ansiHTML(message) + '' + '
Date: Wed, 2 Aug 2017 08:57:50 +0700 Subject: [PATCH 12/36] Format UglifyJs error (#2650) * format UglifyJs error * move formatBuildError to react-dev-utils * fix readme * use regex for plucking the path from stack * make path human readable and fallback to show error if regex not matched * rename to printBuildError and add link to the docs * fix link indentation * improve readibility + shorten link --- packages/react-dev-utils/README.md | 14 ++++++ packages/react-dev-utils/package.json | 3 +- packages/react-dev-utils/printBuildError.js | 50 +++++++++++++++++++++ packages/react-scripts/scripts/build.js | 3 +- packages/react-scripts/template/README.md | 11 +++++ 5 files changed, 79 insertions(+), 2 deletions(-) create mode 100644 packages/react-dev-utils/printBuildError.js diff --git a/packages/react-dev-utils/README.md b/packages/react-dev-utils/README.md index 54033874734..9206f3e8c9f 100644 --- a/packages/react-dev-utils/README.md +++ b/packages/react-dev-utils/README.md @@ -220,6 +220,20 @@ compiler.plugin('done', function(stats) { }); ``` +#### `printBuildError(error: Object): void` + +Prettify some known build errors. +Pass an Error object to log a prettified error message in the console. + +``` + const printBuildError = require('react-dev-utils/printBuildError') + try { + build() + } catch(e) { + printBuildError(e) // logs prettified message + } +``` + #### `getProcessForPort(port: number): string` Finds the currently running process on `port`. diff --git a/packages/react-dev-utils/package.json b/packages/react-dev-utils/package.json index e09e990d0b7..77d5156090c 100644 --- a/packages/react-dev-utils/package.json +++ b/packages/react-dev-utils/package.json @@ -18,13 +18,14 @@ "crossSpawn.js", "eslintFormatter.js", "FileSizeReporter.js", + "printBuildError.js", "formatWebpackMessages.js", "getProcessForPort.js", "inquirer.js", "InterpolateHtmlPlugin.js", "launchEditor.js", - "noopServiceWorkerMiddleware.js", "ModuleScopePlugin.js", + "noopServiceWorkerMiddleware.js", "openBrowser.js", "openChrome.applescript", "printHostingInstructions.js", diff --git a/packages/react-dev-utils/printBuildError.js b/packages/react-dev-utils/printBuildError.js new file mode 100644 index 00000000000..5efbaa97d43 --- /dev/null +++ b/packages/react-dev-utils/printBuildError.js @@ -0,0 +1,50 @@ +/** + * Copyright (c) 2015-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + */ + +'use strict'; + +const get = require('lodash/get'); +const chalk = require('chalk'); + +module.exports = function printBuildError(err) { + const message = get(err, 'message'); + const stack = get(err, 'stack'); + + // Add more helpful message for UglifyJs error + if ( + stack && + typeof message === 'string' && + message.indexOf('from UglifyJs') !== -1 + ) { + try { + const matched = /Unexpected token:(.+)\[(.+)\:(.+)\,(.+)\]\[.+\]/.exec( + stack + ); + if (!matched) { + throw new Error( + "The regex pattern is not matched. Maybe UglifyJs changed it's message?" + ); + } + const problemPath = matched[2]; + const line = matched[3]; + const column = matched[4]; + console.log( + 'Failed to minify the code from this file: \n\n', + chalk.yellow(`${problemPath} line ${line}:${column}`), + '\n' + ); + } catch (ignored) { + console.log('Failed to minify the code.', err); + } + console.log('Read more here: http://bit.ly/2tRViJ9'); + } else { + console.log((message || err) + '\n'); + } + console.log(); +}; diff --git a/packages/react-scripts/scripts/build.js b/packages/react-scripts/scripts/build.js index b9b65f5313d..5ad12ab12b6 100644 --- a/packages/react-scripts/scripts/build.js +++ b/packages/react-scripts/scripts/build.js @@ -34,6 +34,7 @@ const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles'); const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages'); const printHostingInstructions = require('react-dev-utils/printHostingInstructions'); const FileSizeReporter = require('react-dev-utils/FileSizeReporter'); +const printBuildError = require('react-dev-utils/printBuildError'); const measureFileSizesBeforeBuild = FileSizeReporter.measureFileSizesBeforeBuild; @@ -104,7 +105,7 @@ measureFileSizesBeforeBuild(paths.appBuild) }, err => { console.log(chalk.red('Failed to compile.\n')); - console.log((err.message || err) + '\n'); + printBuildError(err); process.exit(1); } ); diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index cba7691f589..bdfb9189d2d 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -92,6 +92,7 @@ You can find the most recent version of this guide [here](https://github.com/fac - [`npm test` hangs on macOS Sierra](#npm-test-hangs-on-macos-sierra) - [`npm run build` exits too early](#npm-run-build-exits-too-early) - [`npm run build` fails on Heroku](#npm-run-build-fails-on-heroku) + - [`npm run build` fails to minify](#npm-run-build-fails-to-minify) - [Moment.js locales are missing](#momentjs-locales-are-missing) - [Something Missing?](#something-missing) @@ -2137,6 +2138,16 @@ moment.locale('fr'); This will only work for locales that have been explicitly imported before. +### `npm run build` fails to minify + +You may occasionally find a package you depend on needs compiled or ships code for a non-browser environment.
+This is considered poor practice in the ecosystem and does not have an escape hatch in Create React App.
+
+To resolve this: +1. Open an issue on the dependency's issue tracker and ask that the package be published pre-compiled (retaining ES6 Modules). +2. Fork the package and publish a corrected version yourself. +3. If the dependency is small enough, copy it to your `src/` folder and treat it as application code. + ## Something Missing? If you have ideas for more “How To” recipes that should be on this page, [let us know](https://github.com/facebookincubator/create-react-app/issues) or [contribute some!](https://github.com/facebookincubator/create-react-app/edit/master/packages/react-scripts/template/README.md) From 664b7651ae6f4b003ffb0f7e43074c86533584e1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oskar=20K=C3=B6=C3=B6k?= Date: Wed, 2 Aug 2017 05:35:06 +0300 Subject: [PATCH 13/36] Re-enable flowtype warning (#2718) * Re-enable flowtype warning * Update eslint-plugin-flowtype dependency --- packages/eslint-config-react-app/index.js | 3 +-- packages/eslint-config-react-app/package.json | 2 +- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/eslint-config-react-app/index.js b/packages/eslint-config-react-app/index.js index a8b900f940d..4e94e650c38 100644 --- a/packages/eslint-config-react-app/index.js +++ b/packages/eslint-config-react-app/index.js @@ -291,8 +291,7 @@ module.exports = { // https://github.com/gajus/eslint-plugin-flowtype 'flowtype/define-flow-type': 'warn', - // TODO: Reenable once https://github.com/gajus/eslint-plugin-flowtype/issues/165 is fixed - //'flowtype/require-valid-file-annotation': 'warn', + 'flowtype/require-valid-file-annotation': 'warn', 'flowtype/use-flow-type': 'warn', }, }; diff --git a/packages/eslint-config-react-app/package.json b/packages/eslint-config-react-app/package.json index 559e78b256b..33395bc8604 100644 --- a/packages/eslint-config-react-app/package.json +++ b/packages/eslint-config-react-app/package.json @@ -13,7 +13,7 @@ "peerDependencies": { "babel-eslint": "^7.2.3", "eslint": "^4.1.1", - "eslint-plugin-flowtype": "^2.33.0", + "eslint-plugin-flowtype": "^2.34.1", "eslint-plugin-import": "^2.2.0", "eslint-plugin-jsx-a11y": "^5.0.3", "eslint-plugin-react": "^7.0.1" From 24b18aedd9befc603bd024225ae2429347b293f1 Mon Sep 17 00:00:00 2001 From: iamdoron Date: Wed, 2 Aug 2017 05:50:58 +0300 Subject: [PATCH 14/36] Allow importing package.json (#2468) * Allow importing package.json * Remove package.json import from App.js template * fix importing package.json * Rename variable to reflect path is relative to root * Check for both package & package.json in ModuleScopePlugin * Use regex to check relative path to package.json * Strictly enforce package.json extension on scope plugin * Add allowedPaths to ModuleScopePlugin ctor and use it to allow app package.json * Remove package.json import from App.js template * Add package.json to react-scripts/template, show package version and name in the template * Remove import package.json from template * Remove template/package.json and its references in code * Update ModuleScopePlugin.js * Update README.md --- packages/react-dev-utils/ModuleScopePlugin.js | 18 ++++++++++-------- packages/react-dev-utils/README.md | 4 ++-- .../react-scripts/config/webpack.config.dev.js | 2 +- .../config/webpack.config.prod.js | 2 +- 4 files changed, 14 insertions(+), 12 deletions(-) diff --git a/packages/react-dev-utils/ModuleScopePlugin.js b/packages/react-dev-utils/ModuleScopePlugin.js index f630a0279f5..3a10904d36b 100644 --- a/packages/react-dev-utils/ModuleScopePlugin.js +++ b/packages/react-dev-utils/ModuleScopePlugin.js @@ -13,8 +13,9 @@ const chalk = require('chalk'); const path = require('path'); class ModuleScopePlugin { - constructor(appSrc) { + constructor(appSrc, allowedFiles = []) { this.appSrc = appSrc; + this.allowedFiles = new Set(allowedFiles); } apply(resolver) { @@ -40,15 +41,16 @@ class ModuleScopePlugin { if (relative.startsWith('../') || relative.startsWith('..\\')) { return callback(); } - // Find path from src to the requested file - const requestRelative = path.relative( - appSrc, - path.resolve( - path.dirname(request.context.issuer), - request.__innerRequest_request - ) + const requestFullPath = path.resolve( + path.dirname(request.context.issuer), + request.__innerRequest_request ); + if (this.allowedFiles.has(requestFullPath)) { + return callback(); + } + // Find path from src to the requested file // Error if in a parent directory of src/ + const requestRelative = path.relative(appSrc, requestFullPath); if ( requestRelative.startsWith('../') || requestRelative.startsWith('..\\') diff --git a/packages/react-dev-utils/README.md b/packages/react-dev-utils/README.md index 9206f3e8c9f..e23f0a294aa 100644 --- a/packages/react-dev-utils/README.md +++ b/packages/react-dev-utils/README.md @@ -57,7 +57,7 @@ module.exports = { ``` -#### `new ModuleScopePlugin(appSrc: string)` +#### `new ModuleScopePlugin(appSrc: string, allowedFiles?: string[])` This Webpack plugin ensures that relative imports from app's source directory don't reach outside of it. @@ -71,7 +71,7 @@ module.exports = { resolve: { // ... plugins: [ - new ModuleScopePlugin(paths.appSrc), + new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]), // ... ], // ... diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index 253bc34f062..e9f985909da 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -117,7 +117,7 @@ module.exports = { // To fix this, we prevent you from importing files out of src/ -- if you'd like to, // please link the files into your node_modules/ and let module-resolution kick in. // Make sure your source files are compiled, as they will not be processed in any way. - new ModuleScopePlugin(paths.appSrc), + new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]), ], }, module: { diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index 0077c34a3f6..4c541e804b6 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -117,7 +117,7 @@ module.exports = { // To fix this, we prevent you from importing files out of src/ -- if you'd like to, // please link the files into your node_modules/ and let module-resolution kick in. // Make sure your source files are compiled, as they will not be processed in any way. - new ModuleScopePlugin(paths.appSrc), + new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]), ], }, module: { From e12d053c273037c5ec75971ddcd117b3e9858cdf Mon Sep 17 00:00:00 2001 From: themre Date: Wed, 2 Aug 2017 11:33:13 +0200 Subject: [PATCH 15/36] Feature/webpack 3 4 (#2875) * bump wp3 * try bump babel-loader * bump 3.4.1 --- packages/react-scripts/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index e618bf0a094..805555889aa 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -53,7 +53,7 @@ "style-loader": "0.18.2", "sw-precache-webpack-plugin": "0.11.4", "url-loader": "0.5.9", - "webpack": "3.4.0", + "webpack": "3.4.1", "webpack-dev-server": "2.6.1", "webpack-manifest-plugin": "1.2.1", "whatwg-fetch": "2.0.3" From 2766bbd1ffacd9a587f6c362438f0ff4ceda991f Mon Sep 17 00:00:00 2001 From: Konstantin Tarkus Date: Wed, 9 Aug 2017 04:35:26 +0300 Subject: [PATCH 16/36] Fix the order of arguments in spawned child proc (#2913) * Fix the order of arguments in spawned child proc * Update react-scripts.js * Remove a comma * Update react-scripts.js --- packages/react-scripts/bin/react-scripts.js | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/packages/react-scripts/bin/react-scripts.js b/packages/react-scripts/bin/react-scripts.js index abb2741f854..1261de6be19 100755 --- a/packages/react-scripts/bin/react-scripts.js +++ b/packages/react-scripts/bin/react-scripts.js @@ -11,8 +11,12 @@ 'use strict'; const spawn = require('react-dev-utils/crossSpawn'); -const script = process.argv[2]; -const args = process.argv.slice(3); +const args = process.argv.slice(2); + +const scriptIndex = args.findIndex(x => + x === 'build' || x === 'eject' || x === 'start' || x === 'test'); +const script = scriptIndex === -1 ? args[0] : args[scriptIndex]; +const nodeArgs = scriptIndex > 0 ? args.slice(0, scriptIndex) : []; switch (script) { case 'build': @@ -21,7 +25,9 @@ switch (script) { case 'test': { const result = spawn.sync( 'node', - [require.resolve(`../scripts/${script}`)].concat(args), + nodeArgs + .concat(require.resolve('../scripts/' + script)) + .concat(args.slice(scriptIndex + 1)), { stdio: 'inherit' } ); if (result.signal) { From d009a9909453380a5d39bb5e0c5d4cbb02f1f7d0 Mon Sep 17 00:00:00 2001 From: Ben Sykes Date: Tue, 8 Aug 2017 18:36:32 -0700 Subject: [PATCH 17/36] Adjust the `checkIfOnline` check if in a corporate proxy environment (#2884) * Adjust the `checkIfOnline` check if in a corporate proxy environment If the environment variable `https_proxy` is set, test that the proxy name is resolveable rather than 'registry.yarnpkg.com'. This fixes #2832. * Adjust to check yarnpkg.com first, then check the proxy address only if that failed --- packages/create-react-app/createReactApp.js | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/packages/create-react-app/createReactApp.js b/packages/create-react-app/createReactApp.js index 6fd6c75aca3..9fa0f077146 100755 --- a/packages/create-react-app/createReactApp.js +++ b/packages/create-react-app/createReactApp.js @@ -47,6 +47,7 @@ const semver = require('semver'); const dns = require('dns'); const tmp = require('tmp'); const unpack = require('tar-pack').unpack; +const url = require('url'); const hyperquest = require('hyperquest'); const packageJson = require('./package.json'); @@ -614,7 +615,15 @@ function checkIfOnline(useYarn) { return new Promise(resolve => { dns.lookup('registry.yarnpkg.com', err => { - resolve(err === null); + if (err != null && process.env.https_proxy) { + // If a proxy is defined, we likely can't resolve external hostnames. + // Try to resolve the proxy name as an indication of a connection. + dns.lookup(url.parse(process.env.https_proxy).hostname, proxyErr => { + resolve(proxyErr == null); + }); + } else { + resolve(err == null); + } }); }); } From badfc2a8d9a697731f67a472a291bb52fe8ee776 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?St=C3=A9phane=20Goetz?= Date: Wed, 9 Aug 2017 03:37:04 +0200 Subject: [PATCH 18/36] Make formatWebpackMessages return all messages (#2834) * Move the reduction of the messages to a single place in the place it is used. * Fix variable name --- packages/react-dev-utils/WebpackDevServerUtils.js | 5 +++++ packages/react-dev-utils/formatWebpackMessages.js | 5 ----- packages/react-scripts/scripts/build.js | 5 +++++ 3 files changed, 10 insertions(+), 5 deletions(-) diff --git a/packages/react-dev-utils/WebpackDevServerUtils.js b/packages/react-dev-utils/WebpackDevServerUtils.js index 8a66b15ec0c..1cd060592f9 100644 --- a/packages/react-dev-utils/WebpackDevServerUtils.js +++ b/packages/react-dev-utils/WebpackDevServerUtils.js @@ -164,6 +164,11 @@ function createCompiler(webpack, config, appName, urls, useYarn) { // If errors exist, only show errors. if (messages.errors.length) { + // Only keep the first error. Others are often indicative + // of the same problem, but confuse the reader with noise. + if (messages.errors.length > 1) { + messages.errors.length = 1; + } console.log(chalk.red('Failed to compile.\n')); console.log(messages.errors.join('\n\n')); return; diff --git a/packages/react-dev-utils/formatWebpackMessages.js b/packages/react-dev-utils/formatWebpackMessages.js index 5dfd099c65c..a5176b92049 100644 --- a/packages/react-dev-utils/formatWebpackMessages.js +++ b/packages/react-dev-utils/formatWebpackMessages.js @@ -121,11 +121,6 @@ function formatWebpackMessages(json) { // preceding a much more useful Babel syntax error. result.errors = result.errors.filter(isLikelyASyntaxError); } - // Only keep the first error. Others are often indicative - // of the same problem, but confuse the reader with noise. - if (result.errors.length > 1) { - result.errors.length = 1; - } return result; } diff --git a/packages/react-scripts/scripts/build.js b/packages/react-scripts/scripts/build.js index 5ad12ab12b6..7691bfd5282 100644 --- a/packages/react-scripts/scripts/build.js +++ b/packages/react-scripts/scripts/build.js @@ -122,6 +122,11 @@ function build(previousFileSizes) { } const messages = formatWebpackMessages(stats.toJson({}, true)); if (messages.errors.length) { + // Only keep the first error. Others are often indicative + // of the same problem, but confuse the reader with noise. + if (messages.errors.length > 1) { + messages.errors.length = 1; + } return reject(new Error(messages.errors.join('\n\n'))); } if ( From 1e3a64fa43e9df90310d57f6a05b5d923c0deef1 Mon Sep 17 00:00:00 2001 From: Ade Viankakrisna Fadlil Date: Wed, 9 Aug 2017 08:53:37 +0700 Subject: [PATCH 19/36] Use env variable to disable source maps (#2818) * use env variable to disable source maps * Rename to use SOURCE_MAP with explicit value * Update webpack.config.prod.js --- packages/react-scripts/config/webpack.config.prod.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index 4c541e804b6..44964346107 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -29,6 +29,8 @@ const publicPath = paths.servedPath; // Some apps do not use client-side routing with pushState. // For these, "homepage" can be set to "." to enable relative asset paths. const shouldUseRelativeAssetPaths = publicPath === './'; +// Source maps are resource heavy and can cause out of memory issue for large source files. +const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false'; // `publicUrl` is just like `publicPath`, but we will provide it to our app // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript. // Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz. @@ -62,7 +64,7 @@ module.exports = { bail: true, // We generate sourcemaps in production. This is slow but gives good results. // You can exclude the *.map files from the build during deployment. - devtool: 'source-map', + devtool: shouldUseSourceMap ? 'source-map' : false, // In production, we only want to load the polyfills and the app code. entry: [require.resolve('./polyfills'), paths.appIndexJs], output: { @@ -204,7 +206,7 @@ module.exports = { options: { importLoaders: 1, minimize: true, - sourceMap: true, + sourceMap: shouldUseSourceMap, }, }, { @@ -300,7 +302,7 @@ module.exports = { // https://github.com/facebookincubator/create-react-app/issues/2488 ascii_only: true, }, - sourceMap: true, + sourceMap: shouldUseSourceMap, }), // Note: this won't work without ExtractTextPlugin.extract(..) in `loaders`. new ExtractTextPlugin({ From 4cdd5ac427f11b203192bdcdc4386df820ac065d Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Tue, 8 Aug 2017 21:55:13 -0400 Subject: [PATCH 20/36] Update README.md --- packages/react-scripts/template/README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index bdfb9189d2d..36496641ff4 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -2058,6 +2058,7 @@ PUBLIC_URL | :x: | :white_check_mark: | Create React App assumes your applicatio CI | :large_orange_diamond: | :white_check_mark: | When set to `true`, Create React App treats warnings as failures in the build. It also makes the test runner non-watching. Most CIs set this flag by default. REACT_EDITOR | :white_check_mark: | :x: | When an app crashes in development, you will see an error overlay with clickable stack trace. When you click on it, Create React App will try to determine the editor you are using based on currently running processes, and open the relevant source file. You can [send a pull request to detect your editor of choice](https://github.com/facebookincubator/create-react-app/issues/2636). Setting this environment variable overrides the automatic detection. If you do it, make sure your systems [PATH](https://en.wikipedia.org/wiki/PATH_(variable)) environment variable points to your editor’s bin folder. CHOKIDAR_USEPOLLING | :white_check_mark: | :x: | When set to `true`, the watcher runs in polling mode, as necessary inside a VM. Use this option if `npm start` isn't detecting changes. +GENERATE_SOURCEMAP | :x: | :white_check_mark: | When set to `false`, source maps are not generated for a production build. This solves OOM issues on some smaller machines. ## Troubleshooting From 9b23be825a4f2ef1f3b5e9d7a2b5dcec49d38af2 Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Tue, 8 Aug 2017 23:15:34 -0400 Subject: [PATCH 21/36] Update dev deps (#2923) * Bump deps * Fix linter errors * Whoops * Try to bump webpack * Update peer deps to min for eslint 4.x --- lerna.json | 2 +- package.json | 6 +++--- packages/create-react-app/createReactApp.js | 2 +- packages/eslint-config-react-app/package.json | 6 +++--- .../react-dev-utils/formatWebpackMessages.js | 2 +- packages/react-dev-utils/package.json | 6 +++--- packages/react-dev-utils/printBuildError.js | 2 +- packages/react-error-overlay/package.json | 20 +++++++++---------- packages/react-scripts/package.json | 12 +++++------ 9 files changed, 29 insertions(+), 29 deletions(-) diff --git a/lerna.json b/lerna.json index 7ca916a8569..1673f8a3187 100644 --- a/lerna.json +++ b/lerna.json @@ -1,5 +1,5 @@ { - "lerna": "2.0.0-rc.5", + "lerna": "2.0.0", "version": "independent", "changelog": { "repo": "facebookincubator/create-react-app", diff --git a/package.json b/package.json index 1c343bdc03f..c3dd6404b5e 100644 --- a/package.json +++ b/package.json @@ -14,10 +14,10 @@ "precommit": "lint-staged" }, "devDependencies": { - "eslint": "3.19.0", + "eslint": "^4.4.1", "husky": "^0.13.2", - "lerna": "2.0.0-rc.5", - "lerna-changelog": "^0.2.3", + "lerna": "^2.0.0", + "lerna-changelog": "^0.6.0", "lint-staged": "^3.3.1", "prettier": "^1.5.2" }, diff --git a/packages/create-react-app/createReactApp.js b/packages/create-react-app/createReactApp.js index 9fa0f077146..4a1b7901dc4 100755 --- a/packages/create-react-app/createReactApp.js +++ b/packages/create-react-app/createReactApp.js @@ -441,7 +441,7 @@ function getPackageName(installPackage) { // Pull package name out of git urls e.g: // git+https://github.com/mycompany/react-scripts.git // git+ssh://github.com/mycompany/react-scripts.git#v1.2.3 - return Promise.resolve(installPackage.match(/([^\/]+)\.git(#.*)?$/)[1]); + return Promise.resolve(installPackage.match(/([^/]+)\.git(#.*)?$/)[1]); } else if (installPackage.match(/.+@/)) { // Do not match @scope/ when stripping off @version or @tag return Promise.resolve( diff --git a/packages/eslint-config-react-app/package.json b/packages/eslint-config-react-app/package.json index 33395bc8604..5f80b9d77d4 100644 --- a/packages/eslint-config-react-app/package.json +++ b/packages/eslint-config-react-app/package.json @@ -14,8 +14,8 @@ "babel-eslint": "^7.2.3", "eslint": "^4.1.1", "eslint-plugin-flowtype": "^2.34.1", - "eslint-plugin-import": "^2.2.0", - "eslint-plugin-jsx-a11y": "^5.0.3", - "eslint-plugin-react": "^7.0.1" + "eslint-plugin-import": "^2.6.0", + "eslint-plugin-jsx-a11y": "^5.1.1", + "eslint-plugin-react": "^7.1.0" } } diff --git a/packages/react-dev-utils/formatWebpackMessages.js b/packages/react-dev-utils/formatWebpackMessages.js index a5176b92049..1f22a0059a5 100644 --- a/packages/react-dev-utils/formatWebpackMessages.js +++ b/packages/react-dev-utils/formatWebpackMessages.js @@ -97,7 +97,7 @@ function formatMessage(message, isError) { // from user code generated by WebPack. For more information see // https://github.com/facebookincubator/create-react-app/pull/1050 message = message.replace( - /^\s*at\s((?!webpack:).)*:\d+:\d+[\s\)]*(\n|$)/gm, + /^\s*at\s((?!webpack:).)*:\d+:\d+[\s)]*(\n|$)/gm, '' ); // at ... ...:x:y diff --git a/packages/react-dev-utils/package.json b/packages/react-dev-utils/package.json index 77d5156090c..bb3ebb50b8b 100644 --- a/packages/react-dev-utils/package.json +++ b/packages/react-dev-utils/package.json @@ -38,14 +38,14 @@ "anser": "1.4.1", "babel-code-frame": "6.22.0", "chalk": "1.1.3", - "cross-spawn": "4.0.2", + "cross-spawn": "5.1.0", "detect-port-alt": "1.1.3", "escape-string-regexp": "1.0.5", - "filesize": "3.3.0", + "filesize": "3.5.10", "global-modules": "1.0.0", "gzip-size": "3.0.0", "html-entities": "1.2.1", - "inquirer": "3.1.1", + "inquirer": "3.2.1", "is-root": "1.0.0", "opn": "5.1.0", "recursive-readdir": "2.2.1", diff --git a/packages/react-dev-utils/printBuildError.js b/packages/react-dev-utils/printBuildError.js index 5efbaa97d43..208c708e11a 100644 --- a/packages/react-dev-utils/printBuildError.js +++ b/packages/react-dev-utils/printBuildError.js @@ -23,7 +23,7 @@ module.exports = function printBuildError(err) { message.indexOf('from UglifyJs') !== -1 ) { try { - const matched = /Unexpected token:(.+)\[(.+)\:(.+)\,(.+)\]\[.+\]/.exec( + const matched = /Unexpected token:(.+)\[(.+):(.+),(.+)\]\[.+\]/.exec( stack ); if (!matched) { diff --git a/packages/react-error-overlay/package.json b/packages/react-error-overlay/package.json index 15bf9e484b4..db55d559df6 100644 --- a/packages/react-error-overlay/package.json +++ b/packages/react-error-overlay/package.json @@ -31,7 +31,7 @@ "middleware.js" ], "dependencies": { - "anser": "1.2.5", + "anser": "1.4.1", "babel-code-frame": "6.22.0", "babel-runtime": "6.23.0", "react-dev-utils": "^3.0.2", @@ -42,16 +42,16 @@ "babel-cli": "6.24.1", "babel-eslint": "7.2.3", "babel-preset-react-app": "^3.0.1", - "cross-env": "5.0.0", - "eslint": "3.19.0", + "cross-env": "5.0.5", + "eslint": "4.4.1", "eslint-config-react-app": "^1.0.5", - "eslint-plugin-flowtype": "2.33.0", - "eslint-plugin-import": "2.2.0", - "eslint-plugin-jsx-a11y": "5.0.3", - "eslint-plugin-react": "7.0.1", - "flow-bin": "0.49.1", - "jest": "20.0.1", - "jest-fetch-mock": "1.1.1" + "eslint-plugin-flowtype": "2.35.0", + "eslint-plugin-import": "2.7.0", + "eslint-plugin-jsx-a11y": "5.1.1", + "eslint-plugin-react": "7.1.0", + "flow-bin": "0.52.0", + "jest": "20.0.4", + "jest-fetch-mock": "1.2.1" }, "jest": { "setupFiles": [ diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 805555889aa..f0224442470 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -21,7 +21,7 @@ "react-scripts": "./bin/react-scripts.js" }, "dependencies": { - "autoprefixer": "7.1.1", + "autoprefixer": "7.1.2", "babel-core": "6.25.0", "babel-eslint": "7.2.3", "babel-jest": "20.0.3", @@ -32,10 +32,10 @@ "chalk": "1.1.3", "css-loader": "0.28.4", "dotenv": "4.0.0", - "eslint": "4.1.1", + "eslint": "4.4.1", "eslint-config-react-app": "^1.0.5", "eslint-loader": "1.9.0", - "eslint-plugin-flowtype": "2.34.0", + "eslint-plugin-flowtype": "2.35.0", "eslint-plugin-import": "2.7.0", "eslint-plugin-jsx-a11y": "5.1.1", "eslint-plugin-react": "7.1.0", @@ -45,7 +45,7 @@ "html-webpack-plugin": "2.29.0", "jest": "20.0.4", "object-assign": "4.1.1", - "postcss-flexbugs-fixes": "3.0.0", + "postcss-flexbugs-fixes": "3.2.0", "postcss-loader": "2.0.6", "promise": "8.0.1", "react-dev-utils": "^3.0.2", @@ -53,8 +53,8 @@ "style-loader": "0.18.2", "sw-precache-webpack-plugin": "0.11.4", "url-loader": "0.5.9", - "webpack": "3.4.1", - "webpack-dev-server": "2.6.1", + "webpack": "3.5.1", + "webpack-dev-server": "2.7.1", "webpack-manifest-plugin": "1.2.1", "whatwg-fetch": "2.0.3" }, From 77265f31b14cea2835b799f586bc7de8bd9d5934 Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Tue, 8 Aug 2017 23:37:21 -0400 Subject: [PATCH 22/36] Prepare for 1.0.11 release (#2924) * Prepare for release * Make sure there's a break --- CHANGELOG.md | 119 +++++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 115 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0e2c349eb22..b8230403216 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,114 @@ +## 1.0.11 (2017-08-09) + +#### :bug: Bug Fix +* `create-react-app` + * [#2884](https://github.com/facebookincubator/create-react-app/pull/2884) Improve offline heuristic for proxied environments. ([@bsyk](https://github.com/bsyk)) + + When a Yarn proxy is set, we will check its connectivity if we cannot reach Yarn's registry. This is often the case when DNS lookups must be made through the proxy. + + * [#2853](https://github.com/facebookincubator/create-react-app/pull/2853) Allow use of scoped packages with a pinned version. ([@wileybenet](https://github.com/wileybenet)) +* `react-dev-utils` + * [#2796](https://github.com/facebookincubator/create-react-app/pull/2796) Properly escape HTML tags in error overlay. ([@ccloli](https://github.com/ccloli)) + + Elements printed in their entirety would sometimes render as HTML. This should no longer happen and should properly render as text. + +* `react-dev-utils`, `react-scripts` + * [#2834](https://github.com/facebookincubator/create-react-app/pull/2834) Make `formatWebpackMessages` return all messages ([@onigoetz](https://github.com/onigoetz)) +* `react-scripts` + * [#2806](https://github.com/facebookincubator/create-react-app/pull/2806) Fix SockJS version compatibility. ([@christianbundy](https://github.com/christianbundy)) + * [#2738](https://github.com/facebookincubator/create-react-app/pull/2738) Fix Jest `node` file resolution. ([@mostafah](https://github.com/mostafah)) + +#### :nail_care: Enhancement +* `react-scripts` + * [#2818](https://github.com/facebookincubator/create-react-app/pull/2818) Allow sourcemaps to be disabled. ([@viankakrisna](https://github.com/viankakrisna)) + + As applications grow more complex, it is possible webpack may run out of memory while generating source maps. They may now be disabled by setting `GENERATE_SOURCEMAP=false`. + + * [#2913](https://github.com/facebookincubator/create-react-app/pull/2913) Allow flags to be passed to node when running `react-scripts`. ([@koistya](https://github.com/koistya)) + * [#2574](https://github.com/facebookincubator/create-react-app/pull/2574) Upgrade to `webpack@3`. ([@themre](https://github.com/themre)) + * [#2747](https://github.com/facebookincubator/create-react-app/pull/2747) Simplify webpack configuration using `Rule.oneOf`. ([@Furizaa](https://github.com/Furizaa)) +* `react-dev-utils`, `react-scripts` + * [#2468](https://github.com/facebookincubator/create-react-app/pull/2468) Allow importing `package.json`. ([@iamdoron](https://github.com/iamdoron)) + * [#2650](https://github.com/facebookincubator/create-react-app/pull/2650) Make UglifyJS error friendlier. ([@viankakrisna](https://github.com/viankakrisna)) +* `create-react-app` + * [#2785](https://github.com/facebookincubator/create-react-app/pull/2785) Change error wording and list conflicting files when initializing app. ([@OwenFlood](https://github.com/OwenFlood)) +* `react-dev-utils` + * [#2761](https://github.com/facebookincubator/create-react-app/pull/2761) Don't prompt to install serve if already installed. ([@OwenFlood](https://github.com/OwenFlood)) + * [#2754](https://github.com/facebookincubator/create-react-app/pull/2754) Auto-detect JetBrains IDEs. ([@danrr](https://github.com/danrr)) + * [#2740](https://github.com/facebookincubator/create-react-app/pull/2740) Support PyCharm in `launchEditor`. ([@danrr](https://github.com/danrr)) + * [#2723](https://github.com/facebookincubator/create-react-app/pull/2723) Reorder vim arguments in `launchEditor` so `--remote` works. ([@trygveaa](https://github.com/trygveaa)) +* `eslint-config-react-app`, `react-scripts` + * [#2735](https://github.com/facebookincubator/create-react-app/pull/2735) Upgrade to `eslint@4`. ([@trungdq88](https://github.com/trungdq88)) +* `eslint-config-react-app` + * [#2701](https://github.com/facebookincubator/create-react-app/pull/2701) Set `allowTaggedTemplates` to true (eslint). ([@denkristoffer](https://github.com/denkristoffer)) + +#### :memo: Documentation +* Other + * [#2728](https://github.com/facebookincubator/create-react-app/pull/2728) Add Electrode to alternatives. ([@animesh10](https://github.com/animesh10)) + * [#2788](https://github.com/facebookincubator/create-react-app/pull/2788) Update link for motion. ([@viankakrisna](https://github.com/viankakrisna)) + * [#2697](https://github.com/facebookincubator/create-react-app/pull/2697) Fix env list ordering. ([@alexeyraspopov](https://github.com/alexeyraspopov)) +* `react-dev-utils` + * [#2798](https://github.com/facebookincubator/create-react-app/pull/2798) Update note about `webpackHotDevClient` support. ([@ForbesLindesay](https://github.com/ForbesLindesay)) +* `react-scripts` + * [#2822](https://github.com/facebookincubator/create-react-app/pull/2822) Add explicit "Opting Out of Caching" header. ([@gaearon](https://github.com/gaearon)) + * [#2725](https://github.com/facebookincubator/create-react-app/pull/2725) Fixed typo. ([@zeel](https://github.com/zeel)) + * [#2668](https://github.com/facebookincubator/create-react-app/pull/2668) Document `basename` feature in `react-router`. ([@viankakrisna](https://github.com/viankakrisna)) + * [#2719](https://github.com/facebookincubator/create-react-app/pull/2719) Remove Windows note for `source-map-explorer`. ([@hodanny](https://github.com/hodanny)) +* `babel-preset-react-app` + * [#2732](https://github.com/facebookincubator/create-react-app/pull/2732) Update link to issue blocking JSX hoisting. ([@ForbesLindesay](https://github.com/ForbesLindesay)) + +#### :house: Internal +* `create-react-app`, `eslint-config-react-app`, `react-dev-utils`, `react-error-overlay`, `react-scripts` + * [#2923](https://github.com/facebookincubator/create-react-app/pull/2923) Update deps. ([@Timer](https://github.com/Timer)) +* `eslint-config-react-app` + * [#2718](https://github.com/facebookincubator/create-react-app/pull/2718) Re-enable flowtype warning. ([@oskarkook](https://github.com/oskarkook)) +* Other + * [#2700](https://github.com/facebookincubator/create-react-app/pull/2700) Unstage `yarn.lock` pre-commit. ([@jdcrensh](https://github.com/jdcrensh)) +* `react-scripts` + * [#2873](https://github.com/facebookincubator/create-react-app/pull/2873) Use template strings. ([@monkindey](https://github.com/monkindey)) + +#### Committers: 26 +- 864907600cc ([ccloli](https://github.com/ccloli)) +- Ade Viankakrisna Fadlil ([viankakrisna](https://github.com/viankakrisna)) +- Alexey Raspopov ([alexeyraspopov](https://github.com/alexeyraspopov)) +- Andreas Hoffmann ([Furizaa](https://github.com/Furizaa)) +- Animesh Dutta ([animesh10](https://github.com/animesh10)) +- Ben Sykes ([bsyk](https://github.com/bsyk)) +- Christian Bundy ([christianbundy](https://github.com/christianbundy)) +- Dan Abramov ([gaearon](https://github.com/gaearon)) +- Dan Ristea ([danrr](https://github.com/danrr)) +- Danny Ho ([hodanny](https://github.com/hodanny)) +- Forbes Lindesay ([ForbesLindesay](https://github.com/ForbesLindesay)) +- Joe Haddad ([Timer](https://github.com/Timer)) +- Jon Crenshaw ([jdcrensh](https://github.com/jdcrensh)) +- Kiho · Cham ([monkindey](https://github.com/monkindey)) +- Konstantin Tarkus ([koistya](https://github.com/koistya)) +- Kristoffer ([denkristoffer](https://github.com/denkristoffer)) +- Mostafa Hajizadeh ([mostafah](https://github.com/mostafah)) +- Oskar Köök ([oskarkook](https://github.com/oskarkook)) +- Owen Flood ([OwenFlood](https://github.com/OwenFlood)) +- Stéphane Goetz ([onigoetz](https://github.com/onigoetz)) +- Trygve Aaberge ([trygveaa](https://github.com/trygveaa)) +- Wiley Bennett ([wileybenet](https://github.com/wileybenet)) +- [iamdoron](https://github.com/iamdoron) +- [themre](https://github.com/themre) +- zeel ([zeel](https://github.com/zeel)) +- Đinh Quang Trung ([trungdq88](https://github.com/trungdq88)) + +### Migrating from 1.0.10 to 1.0.11 + +Inside any created project that has not been ejected, run: + +``` +npm install --save --save-exact react-scripts@1.0.11 +``` + +or + +``` +yarn add --exact react-scripts@1.0.11 +``` + ## 1.0.10 (June 29, 2017) #### :bug: Bug Fix @@ -110,7 +221,7 @@ yarn add --exact react-scripts@1.0.9 * [#2600](https://github.com/facebookincubator/create-react-app/pull/2600) Add empty mock for `dgram` Node module. ([@micopiira](https://github.com/micopiira)) * [#2458](https://github.com/facebookincubator/create-react-app/pull/2458) Add names to module factories in development. ([@Zaccc123](https://github.com/Zaccc123)) * [#2551](https://github.com/facebookincubator/create-react-app/pull/2551) In new projects, unregister service worker and force reload if `service-worker.js` is not found. ([@ro-savage](https://github.com/ro-savage)) - + * `babel-preset-react-app`, `react-dev-utils`, `react-scripts` * [#2658](https://github.com/facebookincubator/create-react-app/pull/2658) Bump dependencies. ([@gaearon](https://github.com/gaearon)) @@ -119,7 +230,7 @@ yarn add --exact react-scripts@1.0.9 * [#2657](https://github.com/facebookincubator/create-react-app/pull/2657) Put `react-scripts` in `dependencies`, not `devDependencies`. ([@gaearon](https://github.com/gaearon)) * [#2635](https://github.com/facebookincubator/create-react-app/pull/2635) Silence unhelpful npm warnings. ([@gaearon](https://github.com/gaearon)) - + * `react-dev-utils` * [#2637](https://github.com/facebookincubator/create-react-app/pull/2637) Auto-detect Brackets editor from error overlay. ([@petetnt](https://github.com/petetnt)) @@ -176,7 +287,7 @@ yarn add --exact react-scripts@1.0.9 * [#2397](https://github.com/facebookincubator/create-react-app/pull/2397) Fix command in e2e-kitchensink.sh cleanup. ([@ro-savage](https://github.com/ro-savage)) * [#2388](https://github.com/facebookincubator/create-react-app/pull/2388) Fix wrong path expansion in end-to-end test. ([@gaearon](https://github.com/gaearon)) * [#2387](https://github.com/facebookincubator/create-react-app/pull/2387) Catch "No tests found" during CI. ([@EnoahNetzach](https://github.com/EnoahNetzach)) - + * `react-scripts` * [#2408](https://github.com/facebookincubator/create-react-app/pull/2408) E2E testing enhancements. ([@EnoahNetzach](https://github.com/EnoahNetzach)) @@ -573,7 +684,7 @@ yarn add --dev --exact react-scripts@1.0.1 We’ve been working on this release for the past few months, and there are many big impovements, from migrating to webpack 2 to a brand new runtime error overlay and built-in support for Progressive Web Apps. -So instead of just enumerating them here, we decided to write a blog post about all the new features. +So instead of just enumerating them here, we decided to write a blog post about all the new features.
Check it out: **[What’s New in Create React App](https://facebook.github.io/react/blog/2017/05/18/whats-new-in-create-react-app.html)**. Have you read it? Now let's see how to update your app to the latest version. From bfaee410c502a95076a6bd89721c76ca08e15f7b Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Tue, 8 Aug 2017 23:39:58 -0400 Subject: [PATCH 23/36] Publish - babel-preset-react-app@3.0.2 - create-react-app@1.4.0 - eslint-config-react-app@2.0.0 - react-dev-utils@3.1.0 - react-error-overlay@1.0.10 - react-scripts@1.0.11 --- packages/babel-preset-react-app/package.json | 2 +- packages/create-react-app/package.json | 2 +- packages/eslint-config-react-app/package.json | 2 +- packages/react-dev-utils/package.json | 2 +- packages/react-error-overlay/package.json | 8 ++++---- packages/react-scripts/package.json | 10 +++++----- 6 files changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/babel-preset-react-app/package.json b/packages/babel-preset-react-app/package.json index d10188fda02..dce6742985f 100644 --- a/packages/babel-preset-react-app/package.json +++ b/packages/babel-preset-react-app/package.json @@ -1,6 +1,6 @@ { "name": "babel-preset-react-app", - "version": "3.0.1", + "version": "3.0.2", "description": "Babel preset used by Create React App", "repository": "facebookincubator/create-react-app", "license": "BSD-3-Clause", diff --git a/packages/create-react-app/package.json b/packages/create-react-app/package.json index 28502ca077a..42ee3497ea5 100644 --- a/packages/create-react-app/package.json +++ b/packages/create-react-app/package.json @@ -1,6 +1,6 @@ { "name": "create-react-app", - "version": "1.3.3", + "version": "1.4.0", "keywords": [ "react" ], diff --git a/packages/eslint-config-react-app/package.json b/packages/eslint-config-react-app/package.json index 5f80b9d77d4..375c9f54b87 100644 --- a/packages/eslint-config-react-app/package.json +++ b/packages/eslint-config-react-app/package.json @@ -1,6 +1,6 @@ { "name": "eslint-config-react-app", - "version": "1.0.5", + "version": "2.0.0", "description": "ESLint configuration used by Create React App", "repository": "facebookincubator/create-react-app", "license": "BSD-3-Clause", diff --git a/packages/react-dev-utils/package.json b/packages/react-dev-utils/package.json index bb3ebb50b8b..0e4e135f89f 100644 --- a/packages/react-dev-utils/package.json +++ b/packages/react-dev-utils/package.json @@ -1,6 +1,6 @@ { "name": "react-dev-utils", - "version": "3.0.2", + "version": "3.1.0", "description": "Webpack utilities used by Create React App", "repository": "facebookincubator/create-react-app", "license": "BSD-3-Clause", diff --git a/packages/react-error-overlay/package.json b/packages/react-error-overlay/package.json index db55d559df6..5a9e864c50f 100644 --- a/packages/react-error-overlay/package.json +++ b/packages/react-error-overlay/package.json @@ -1,6 +1,6 @@ { "name": "react-error-overlay", - "version": "1.0.9", + "version": "1.0.10", "description": "An overlay for displaying stack frames.", "main": "lib/index.js", "scripts": { @@ -34,17 +34,17 @@ "anser": "1.4.1", "babel-code-frame": "6.22.0", "babel-runtime": "6.23.0", - "react-dev-utils": "^3.0.2", + "react-dev-utils": "^3.1.0", "settle-promise": "1.0.0", "source-map": "0.5.6" }, "devDependencies": { "babel-cli": "6.24.1", "babel-eslint": "7.2.3", - "babel-preset-react-app": "^3.0.1", + "babel-preset-react-app": "^3.0.2", "cross-env": "5.0.5", "eslint": "4.4.1", - "eslint-config-react-app": "^1.0.5", + "eslint-config-react-app": "^2.0.0", "eslint-plugin-flowtype": "2.35.0", "eslint-plugin-import": "2.7.0", "eslint-plugin-jsx-a11y": "5.1.1", diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index f0224442470..bf6c6be48f2 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -1,6 +1,6 @@ { "name": "react-scripts", - "version": "1.0.10", + "version": "1.0.11", "description": "Configuration and scripts for Create React App.", "repository": "facebookincubator/create-react-app", "license": "BSD-3-Clause", @@ -26,14 +26,14 @@ "babel-eslint": "7.2.3", "babel-jest": "20.0.3", "babel-loader": "7.1.1", - "babel-preset-react-app": "^3.0.1", + "babel-preset-react-app": "^3.0.2", "babel-runtime": "6.23.0", "case-sensitive-paths-webpack-plugin": "2.1.1", "chalk": "1.1.3", "css-loader": "0.28.4", "dotenv": "4.0.0", "eslint": "4.4.1", - "eslint-config-react-app": "^1.0.5", + "eslint-config-react-app": "^2.0.0", "eslint-loader": "1.9.0", "eslint-plugin-flowtype": "2.35.0", "eslint-plugin-import": "2.7.0", @@ -48,8 +48,8 @@ "postcss-flexbugs-fixes": "3.2.0", "postcss-loader": "2.0.6", "promise": "8.0.1", - "react-dev-utils": "^3.0.2", - "react-error-overlay": "^1.0.9", + "react-dev-utils": "^3.1.0", + "react-error-overlay": "^1.0.10", "style-loader": "0.18.2", "sw-precache-webpack-plugin": "0.11.4", "url-loader": "0.5.9", From 10c1f577da211d65bcc278f94198ef75f00f0277 Mon Sep 17 00:00:00 2001 From: Thomas Bassetto Date: Wed, 9 Aug 2017 14:57:37 +0200 Subject: [PATCH 24/36] Update README.md (#2927) Fixing a small typo. --- packages/react-scripts/template/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 36496641ff4..3f0dff1171a 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -1576,7 +1576,7 @@ you can swap out the call to `serviceWorkerRegistration.register()` in [`src/index.js`](src/index.js) with a call to `serviceWorkerRegistration.unregister()`. After the user visits a page that has `serviceWorkerRegistration.unregister()`, the service worker will be uninstalled. Note that depending on how `/service-worker.js` is served, -it make take up to 24 hours for the cache to be invalidated. +it may take up to 24 hours for the cache to be invalidated. ### Offline-First Considerations From 93029f8368f346bc97a12a3d2d9b0b13d8c5a713 Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Thu, 10 Aug 2017 16:18:13 -0700 Subject: [PATCH 25/36] Remove superfluous lodash usage (#2938) --- packages/react-dev-utils/printBuildError.js | 19 ++++++++----------- 1 file changed, 8 insertions(+), 11 deletions(-) diff --git a/packages/react-dev-utils/printBuildError.js b/packages/react-dev-utils/printBuildError.js index 208c708e11a..eadfff471b9 100644 --- a/packages/react-dev-utils/printBuildError.js +++ b/packages/react-dev-utils/printBuildError.js @@ -9,12 +9,11 @@ 'use strict'; -const get = require('lodash/get'); const chalk = require('chalk'); module.exports = function printBuildError(err) { - const message = get(err, 'message'); - const stack = get(err, 'stack'); + const message = err != null && err.message; + const stack = err != null && err.stack; // Add more helpful message for UglifyJs error if ( @@ -23,24 +22,22 @@ module.exports = function printBuildError(err) { message.indexOf('from UglifyJs') !== -1 ) { try { - const matched = /Unexpected token:(.+)\[(.+):(.+),(.+)\]\[.+\]/.exec( - stack - ); + const matched = /(.+)\[(.+):(.+),(.+)\]\[.+\]/.exec(stack); if (!matched) { - throw new Error( - "The regex pattern is not matched. Maybe UglifyJs changed it's message?" - ); + throw new Error('Using errors for control flow is bad.'); } const problemPath = matched[2]; const line = matched[3]; const column = matched[4]; console.log( 'Failed to minify the code from this file: \n\n', - chalk.yellow(`${problemPath} line ${line}:${column}`), + chalk.yellow( + `\t${problemPath}:${line}${column !== '0' ? ':' + column : ''}` + ), '\n' ); } catch (ignored) { - console.log('Failed to minify the code.', err); + console.log('Failed to minify the bundle.', err); } console.log('Read more here: http://bit.ly/2tRViJ9'); } else { From 6efab2e12dcd242377364f471c902119b9e9d2bd Mon Sep 17 00:00:00 2001 From: Pier-Luc Gendreau Date: Mon, 14 Aug 2017 05:51:38 -0400 Subject: [PATCH 26/36] Remove Modulus from user guide (#2948) The service was rebranded to xervo.io and was completely shut down in April 2017 --- packages/react-scripts/template/README.md | 5 ----- 1 file changed, 5 deletions(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 3f0dff1171a..71d6b25d360 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -81,7 +81,6 @@ You can find the most recent version of this guide [here](https://github.com/fac - [Firebase](#firebase) - [GitHub Pages](#github-pages) - [Heroku](#heroku) - - [Modulus](#modulus) - [Netlify](#netlify) - [Now](#now) - [S3 and CloudFront](#s3-and-cloudfront) @@ -1975,10 +1974,6 @@ remote: npm ERR! argv "/tmp/build_a2875fc163b209225122d68916f1d4df/.heroku/node/ In this case, ensure that the file is there with the proper lettercase and that’s not ignored on your local `.gitignore` or `~/.gitignore_global`. -### Modulus - -See the [Modulus blog post](http://blog.modulus.io/deploying-react-apps-on-modulus) on how to deploy your react app to Modulus. - ### Netlify **To do a manual deploy to Netlify’s CDN:** From e8a3e4b2995f4c6e49c0a7ed653a1646a7b5e515 Mon Sep 17 00:00:00 2001 From: Yann Pringault Date: Wed, 16 Aug 2017 02:17:37 +0200 Subject: [PATCH 27/36] Fix docs for `printFileSizesAfterBuild` (#2942) * Fix docs for `printFileSizesAfterBuild` * Add optionals parameters for `printFileSizesAfterBuild` --- packages/react-dev-utils/README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react-dev-utils/README.md b/packages/react-dev-utils/README.md index e23f0a294aa..034790c2288 100644 --- a/packages/react-dev-utils/README.md +++ b/packages/react-dev-utils/README.md @@ -170,9 +170,9 @@ module: { Captures JS and CSS asset sizes inside the passed `buildFolder`. Save the result value to compare it after the build. -##### `printFileSizesAfterBuild(webpackStats: WebpackStats, previousFileSizes: OpaqueFileSizes)` +##### `printFileSizesAfterBuild(webpackStats: WebpackStats, previousFileSizes: OpaqueFileSizes, buildFolder: string, maxBundleGzipSize?: number, maxChunkGzipSize?: number)` -Prints the JS and CSS asset sizes after the build, and includes a size comparison with `previousFileSizes` that were captured earlier using `measureFileSizesBeforeBuild()`. +Prints the JS and CSS asset sizes after the build, and includes a size comparison with `previousFileSizes` that were captured earlier using `measureFileSizesBeforeBuild()`. `maxBundleGzipSize` and `maxChunkGzipSizemay` may optionally be specified to display a warning when the main bundle or a chunk exceeds the specified size (in bytes). ```js var { @@ -182,7 +182,7 @@ var { measureFileSizesBeforeBuild(buildFolder).then(previousFileSizes => { return cleanAndRebuild().then(webpackStats => { - printFileSizesAfterBuild(webpackStats, previousFileSizes); + printFileSizesAfterBuild(webpackStats, previousFileSizes, buildFolder); }); }); ``` From 5ea6de91c2f291376578392e453c575785c5b67f Mon Sep 17 00:00:00 2001 From: Ekaterina Prigara Date: Mon, 21 Aug 2017 17:40:52 +0200 Subject: [PATCH 28/36] Docs: debugging in WebStorm (#2986) * Debugging in WebStorm * Fixed formatting for shortcuts * Added note about default URL --- packages/react-scripts/template/README.md | 19 +++++++++++++++++-- 1 file changed, 17 insertions(+), 2 deletions(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 71d6b25d360..c55ccdf949f 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -243,9 +243,11 @@ If you want to enforce a coding style for your project, consider using [Prettier ## Debugging in the Editor -**This feature is currently only supported by [Visual Studio Code](https://code.visualstudio.com) editor.** +**This feature is currently only supported by [Visual Studio Code](https://code.visualstudio.com) and [WebStorm](https://www.jetbrains.com/webstorm/).** -Visual Studio Code supports debugging out of the box with Create React App. This enables you as a developer to write and debug your React code without leaving the editor, and most importantly it enables you to have a continuous development workflow, where context switching is minimal, as you don’t have to switch between tools. +Visual Studio Code and WebStorm support debugging out of the box with Create React App. This enables you as a developer to write and debug your React code without leaving the editor, and most importantly it enables you to have a continuous development workflow, where context switching is minimal, as you don’t have to switch between tools. + +### Visual Studio Code You would need to have the latest version of [VS Code](https://code.visualstudio.com) and VS Code [Chrome Debugger Extension](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome) installed. @@ -267,9 +269,22 @@ Then add the block below to your `launch.json` file and put it inside the `.vsco }] } ``` +>Note: the URL may be different if you've made adjustments via the [HOST or PORT environment variables](#advanced-configuration). Start your app by running `npm start`, and start debugging in VS Code by pressing `F5` or by clicking the green debug icon. You can now write code, set breakpoints, make changes to the code, and debug your newly modified code—all from your editor. +### WebStorm + +You would need to have [WebStorm](https://www.jetbrains.com/webstorm/) and [JetBrains IDE Support](https://chrome.google.com/webstore/detail/jetbrains-ide-support/hmhgeddbohgjknpmjagkdomcpobmllji) Chrome extension installed. + +In the WebStorm menu `Run` select `Edit Configurations...`. Then click `+` and select `JavaScript Debug`. Paste `http://localhost:3000` into the URL field and save the configuration. + +>Note: the URL may be different if you've made adjustments via the [HOST or PORT environment variables](#advanced-configuration). + +Start your app by running `npm start`, then press `^D` on macOS or `F9` on Windows and Linux or click the green debug icon to start debugging in WebStorm. + +The same way you can debug your application in IntelliJ IDEA Ultimate, PhpStorm, PyCharm Pro, and RubyMine. + ## Formatting Code Automatically Prettier is an opinionated code formatter with support for JavaScript, CSS and JSON. With Prettier you can format the code you write automatically to ensure a code style within your project. See the [Prettier's GitHub page](https://github.com/prettier/prettier) for more information, and look at this [page to see it in action](https://prettier.github.io/prettier/). From 5c010e0335db4098f97b39f61bd143112bfa6990 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Sat, 26 Aug 2017 17:35:25 -0600 Subject: [PATCH 29/36] Fix module function name in error overlay (#3012) --- packages/react-error-overlay/src/components/frame.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/react-error-overlay/src/components/frame.js b/packages/react-error-overlay/src/components/frame.js index 43d0d4043a3..4087f4d9c9d 100644 --- a/packages/react-error-overlay/src/components/frame.js +++ b/packages/react-error-overlay/src/components/frame.js @@ -101,13 +101,13 @@ function frameDiv( const frame = document.createElement('div'); const frameFunctionName = document.createElement('div'); - let cleanedFunctionName; - if (!functionName || functionName === 'Object.') { - cleanedFunctionName = '(anonymous function)'; - } else { - cleanedFunctionName = functionName; + if (functionName && functionName.indexOf('Object.') === 0) { + functionName = functionName.slice('Object.'.length); } - + if (functionName === '') { + functionName = null; + } + const cleanedFunctionName = functionName || '(anonymous function)'; const cleanedUrl = url.replace('webpack://', '.'); if (internalUrl) { From 3b9174821ebed4c9892ad416f19768df27b7c6d2 Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Thu, 10 Aug 2017 16:20:03 -0700 Subject: [PATCH 30/36] Bump react-dev-utils --- packages/react-dev-utils/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-dev-utils/package.json b/packages/react-dev-utils/package.json index 0e4e135f89f..8816e4009a6 100644 --- a/packages/react-dev-utils/package.json +++ b/packages/react-dev-utils/package.json @@ -1,6 +1,6 @@ { "name": "react-dev-utils", - "version": "3.1.0", + "version": "3.1.1", "description": "Webpack utilities used by Create React App", "repository": "facebookincubator/create-react-app", "license": "BSD-3-Clause", From ecd1f0544b6f8a05a4061712932cd0055d6e34c9 Mon Sep 17 00:00:00 2001 From: Tharaka Wijebandara Date: Mon, 28 Aug 2017 01:45:55 +0000 Subject: [PATCH 31/36] Convert react-error-overlay to React (#2515) * Convert react-error-overlay to React * Update compile-time error overlay to use react-error-overlay components * Refactor react-error-overlay components to container and presentational components. * Make the compile-time error overlay a part of react-error-overlay package. * Use react-error-overlay as dependency in react-dev-utils to show compile-time errors. * Run Prettier * Move the function name fix into StackFrame itself * Fix clicking on source code snippet to open the code in editor * Use exact objects + minor style tweak * Don't linkify frames that don't exist on the disk * Fix lint * Consolidate iframe rendering logic * Remove circular dependency between react-dev-utils and react-error-overlay * Fix lint * Fix decoupling of react-dev-utils and react-error-overlay by moving middleware * Deduplicate identical errors --- .../errorOverlayMiddleware.js} | 6 +- .../launchEditorEndpoint.js} | 12 +- packages/react-dev-utils/package.json | 6 +- .../react-dev-utils/webpackHotDevClient.js | 158 ++------ packages/react-error-overlay/.flowconfig | 1 + .../react-error-overlay/fixtures/bundle.json | 28 +- packages/react-error-overlay/package.json | 4 +- .../src/__tests__/stack-frame.js | 4 +- .../src/components/CloseButton.js | 38 ++ .../src/components/CodeBlock.js | 54 +++ .../src/components/Collapsible.js | 78 ++++ .../src/components/Footer.js | 36 ++ .../src/components/Header.js | 39 ++ .../src/components/NavigationBar.js | 70 ++++ .../src/components/Overlay.js | 74 ++++ .../src/components/additional.js | 72 ---- .../src/components/close.js | 35 -- .../src/components/footer.js | 31 -- .../src/components/frame.js | 355 ------------------ .../src/components/frames.js | 132 ------- .../src/components/overlay.js | 95 ----- .../src/containers/CompileErrorContainer.js | 31 ++ .../src/containers/RuntimeError.js | 68 ++++ .../src/containers/RuntimeErrorContainer.js | 77 ++++ .../src/containers/StackFrame.js | 188 ++++++++++ .../StackFrameCodeBlock.js} | 50 +-- .../src/containers/StackTrace.js | 95 +++++ .../src/effects/shortcuts.js | 53 --- packages/react-error-overlay/src/index.js | 157 +++++++- .../src/listenToRuntimeErrors.js | 83 ++++ packages/react-error-overlay/src/overlay.js | 235 ------------ packages/react-error-overlay/src/styles.js | 180 +-------- .../src/utils/dom/enableTabClick.js | 24 -- .../src/utils/generateAnsiHTML.js} | 11 +- .../src/utils/getLinesAround.js | 2 +- .../src/utils/getPrettyURL.js | 49 +++ .../src/utils/getSourceMap.js | 2 +- .../{errorRegister.js => getStackFrames.js} | 40 +- .../src/utils/isBultinErrorName.js | 27 ++ .../react-error-overlay/src/utils/mapper.js | 2 +- .../react-error-overlay/src/utils/parser.js | 2 +- .../src/utils/stack-frame.js | 28 +- .../react-error-overlay/src/utils/unmapper.js | 2 +- .../react-error-overlay/src/utils/warnings.js | 2 +- packages/react-scripts/bin/react-scripts.js | 5 +- .../config/webpack.config.dev.js | 2 - .../config/webpackDevServer.config.js | 2 +- packages/react-scripts/package.json | 1 - 48 files changed, 1273 insertions(+), 1473 deletions(-) rename packages/{react-error-overlay/middleware.js => react-dev-utils/errorOverlayMiddleware.js} (76%) rename packages/{react-error-overlay/src/utils/dom/consumeEvent.js => react-dev-utils/launchEditorEndpoint.js} (65%) create mode 100644 packages/react-error-overlay/src/components/CloseButton.js create mode 100644 packages/react-error-overlay/src/components/CodeBlock.js create mode 100644 packages/react-error-overlay/src/components/Collapsible.js create mode 100644 packages/react-error-overlay/src/components/Footer.js create mode 100644 packages/react-error-overlay/src/components/Header.js create mode 100644 packages/react-error-overlay/src/components/NavigationBar.js create mode 100644 packages/react-error-overlay/src/components/Overlay.js delete mode 100644 packages/react-error-overlay/src/components/additional.js delete mode 100644 packages/react-error-overlay/src/components/close.js delete mode 100644 packages/react-error-overlay/src/components/footer.js delete mode 100644 packages/react-error-overlay/src/components/frame.js delete mode 100644 packages/react-error-overlay/src/components/frames.js delete mode 100644 packages/react-error-overlay/src/components/overlay.js create mode 100644 packages/react-error-overlay/src/containers/CompileErrorContainer.js create mode 100644 packages/react-error-overlay/src/containers/RuntimeError.js create mode 100644 packages/react-error-overlay/src/containers/RuntimeErrorContainer.js create mode 100644 packages/react-error-overlay/src/containers/StackFrame.js rename packages/react-error-overlay/src/{components/code.js => containers/StackFrameCodeBlock.js} (71%) create mode 100644 packages/react-error-overlay/src/containers/StackTrace.js delete mode 100644 packages/react-error-overlay/src/effects/shortcuts.js create mode 100644 packages/react-error-overlay/src/listenToRuntimeErrors.js delete mode 100644 packages/react-error-overlay/src/overlay.js delete mode 100644 packages/react-error-overlay/src/utils/dom/enableTabClick.js rename packages/{react-dev-utils/ansiHTML.js => react-error-overlay/src/utils/generateAnsiHTML.js} (95%) create mode 100644 packages/react-error-overlay/src/utils/getPrettyURL.js rename packages/react-error-overlay/src/utils/{errorRegister.js => getStackFrames.js} (59%) create mode 100644 packages/react-error-overlay/src/utils/isBultinErrorName.js diff --git a/packages/react-error-overlay/middleware.js b/packages/react-dev-utils/errorOverlayMiddleware.js similarity index 76% rename from packages/react-error-overlay/middleware.js rename to packages/react-dev-utils/errorOverlayMiddleware.js index d4fd0d399f1..b2a857d6e37 100644 --- a/packages/react-error-overlay/middleware.js +++ b/packages/react-dev-utils/errorOverlayMiddleware.js @@ -8,12 +8,12 @@ */ 'use strict'; -const launchEditor = require('react-dev-utils/launchEditor'); +const launchEditor = require('./launchEditor'); +const launchEditorEndpoint = require('./launchEditorEndpoint'); module.exports = function createLaunchEditorMiddleware() { return function launchEditorMiddleware(req, res, next) { - // Keep this in sync with react-error-overlay - if (req.url.startsWith('/__open-stack-frame-in-editor')) { + if (req.url.startsWith(launchEditorEndpoint)) { launchEditor(req.query.fileName, req.query.lineNumber); res.end(); } else { diff --git a/packages/react-error-overlay/src/utils/dom/consumeEvent.js b/packages/react-dev-utils/launchEditorEndpoint.js similarity index 65% rename from packages/react-error-overlay/src/utils/dom/consumeEvent.js rename to packages/react-dev-utils/launchEditorEndpoint.js index 90bb9d1e815..e21870be9c4 100644 --- a/packages/react-error-overlay/src/utils/dom/consumeEvent.js +++ b/packages/react-dev-utils/launchEditorEndpoint.js @@ -6,13 +6,7 @@ * LICENSE file in the root directory of this source tree. An additional grant * of patent rights can be found in the PATENTS file in the same directory. */ +'use strict'; -/* @flow */ -function consumeEvent(e: Event) { - e.preventDefault(); - if (typeof e.target.blur === 'function') { - e.target.blur(); - } -} - -export { consumeEvent }; +// TODO: we might want to make this injectable to support DEV-time non-root URLs. +module.exports = '/__open-stack-frame-in-editor'; diff --git a/packages/react-dev-utils/package.json b/packages/react-dev-utils/package.json index 8816e4009a6..ccc22bf6332 100644 --- a/packages/react-dev-utils/package.json +++ b/packages/react-dev-utils/package.json @@ -11,12 +11,12 @@ "node": ">=6" }, "files": [ - "ansiHTML.js", "checkRequiredFiles.js", "clearConsole.js", "crashOverlay.js", "crossSpawn.js", "eslintFormatter.js", + "errorOverlayMiddleware.js", "FileSizeReporter.js", "printBuildError.js", "formatWebpackMessages.js", @@ -24,6 +24,7 @@ "inquirer.js", "InterpolateHtmlPlugin.js", "launchEditor.js", + "launchEditorEndpoint.js", "ModuleScopePlugin.js", "noopServiceWorkerMiddleware.js", "openBrowser.js", @@ -35,7 +36,6 @@ ], "dependencies": { "address": "1.0.2", - "anser": "1.4.1", "babel-code-frame": "6.22.0", "chalk": "1.1.3", "cross-spawn": "5.1.0", @@ -44,10 +44,10 @@ "filesize": "3.5.10", "global-modules": "1.0.0", "gzip-size": "3.0.0", - "html-entities": "1.2.1", "inquirer": "3.2.1", "is-root": "1.0.0", "opn": "5.1.0", + "react-error-overlay": "^1.0.9", "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 f2f206a5cd2..b6effe718e5 100644 --- a/packages/react-dev-utils/webpackHotDevClient.js +++ b/packages/react-dev-utils/webpackHotDevClient.js @@ -21,143 +21,27 @@ var SockJS = require('sockjs-client'); var stripAnsi = require('strip-ansi'); var url = require('url'); +var launchEditorEndpoint = require('./launchEditorEndpoint'); var formatWebpackMessages = require('./formatWebpackMessages'); -var ansiHTML = require('./ansiHTML'); - -function createOverlayIframe(onIframeLoad) { - var iframe = document.createElement('iframe'); - iframe.id = 'react-dev-utils-webpack-hot-dev-client-overlay'; - iframe.src = 'about:blank'; - iframe.style.position = 'fixed'; - iframe.style.left = 0; - iframe.style.top = 0; - iframe.style.right = 0; - iframe.style.bottom = 0; - iframe.style.width = '100vw'; - iframe.style.height = '100vh'; - iframe.style.border = 'none'; - iframe.style.zIndex = 2147483647; - iframe.onload = onIframeLoad; - return iframe; -} - -function addOverlayDivTo(iframe) { - // TODO: unify these styles with react-error-overlay - iframe.contentDocument.body.style.margin = 0; - iframe.contentDocument.body.style.maxWidth = '100vw'; - - var outerDiv = iframe.contentDocument.createElement('div'); - outerDiv.id = 'react-dev-utils-webpack-hot-dev-client-overlay-div'; - outerDiv.style.width = '100%'; - outerDiv.style.height = '100%'; - outerDiv.style.boxSizing = 'border-box'; - outerDiv.style.textAlign = 'center'; - outerDiv.style.backgroundColor = 'rgb(255, 255, 255)'; - - var div = iframe.contentDocument.createElement('div'); - div.style.position = 'relative'; - div.style.display = 'inline-flex'; - div.style.flexDirection = 'column'; - div.style.height = '100%'; - div.style.width = '1024px'; - div.style.maxWidth = '100%'; - div.style.overflowX = 'hidden'; - div.style.overflowY = 'auto'; - div.style.padding = '0.5rem'; - div.style.boxSizing = 'border-box'; - div.style.textAlign = 'left'; - div.style.fontFamily = 'Consolas, Menlo, monospace'; - div.style.fontSize = '11px'; - div.style.whiteSpace = 'pre-wrap'; - div.style.wordBreak = 'break-word'; - div.style.lineHeight = '1.5'; - div.style.color = 'rgb(41, 50, 56)'; - - outerDiv.appendChild(div); - iframe.contentDocument.body.appendChild(outerDiv); - return div; -} - -function overlayHeaderStyle() { - return ( - 'font-size: 2em;' + - 'font-family: sans-serif;' + - 'color: rgb(206, 17, 38);' + - 'white-space: pre-wrap;' + - 'margin: 0 2rem 0.75rem 0px;' + - 'flex: 0 0 auto;' + - 'max-height: 35%;' + - 'overflow: auto;' - ); -} - -var overlayIframe = null; -var overlayDiv = null; -var lastOnOverlayDivReady = null; - -function ensureOverlayDivExists(onOverlayDivReady) { - if (overlayDiv) { - // Everything is ready, call the callback right away. - onOverlayDivReady(overlayDiv); - return; - } - - // Creating an iframe may be asynchronous so we'll schedule the callback. - // In case of multiple calls, last callback wins. - lastOnOverlayDivReady = onOverlayDivReady; - - if (overlayIframe) { - // We're already creating it. - return; - } - - // Create iframe and, when it is ready, a div inside it. - overlayIframe = createOverlayIframe(function onIframeLoad() { - overlayDiv = addOverlayDivTo(overlayIframe); - // Now we can talk! - lastOnOverlayDivReady(overlayDiv); - }); - - // Zalgo alert: onIframeLoad() will be called either synchronously - // or asynchronously depending on the browser. - // We delay adding it so `overlayIframe` is set when `onIframeLoad` fires. - document.body.appendChild(overlayIframe); -} +var ErrorOverlay = require('react-error-overlay'); + +ErrorOverlay.startReportingRuntimeErrors({ + launchEditorEndpoint: launchEditorEndpoint, + onError: function() { + // TODO: why do we need this? + if (module.hot && typeof module.hot.decline === 'function') { + module.hot.decline(); + } + }, +}); -function showErrorOverlay(message) { - ensureOverlayDivExists(function onOverlayDivReady(overlayDiv) { - // TODO: unify this with our runtime overlay - overlayDiv.innerHTML = - '
Failed to compile
' + - '
' +
-      '' +
-      ansiHTML(message) +
-      '
' + - '
' + - 'This error occurred during the build time and cannot be dismissed.
'; +if (module.hot && typeof module.hot.dispose === 'function') { + module.hot.dispose(function() { + // TODO: why do we need this? + ErrorOverlay.stopReportingRuntimeErrors(); }); } -function destroyErrorOverlay() { - if (!overlayDiv) { - // It is not there in the first place. - return; - } - - // Clean up and reset internal state. - document.body.removeChild(overlayIframe); - overlayDiv = null; - overlayIframe = null; - lastOnOverlayDivReady = null; -} - // Connect to WebpackDevServer via a socket. var connection = new SockJS( url.format({ @@ -205,9 +89,9 @@ function handleSuccess() { // Attempt to apply hot updates or reload. if (isHotUpdate) { tryApplyUpdates(function onHotUpdateSuccess() { - // Only destroy it when we're sure it's a hot update. + // Only dismiss it when we're sure it's a hot update. // Otherwise it would flicker right before the reload. - destroyErrorOverlay(); + ErrorOverlay.dismissBuildError(); }); } } @@ -247,9 +131,9 @@ function handleWarnings(warnings) { // Only print warnings if we aren't refreshing the page. // Otherwise they'll disappear right away anyway. printWarnings(); - // Only destroy it when we're sure it's a hot update. + // Only dismiss it when we're sure it's a hot update. // Otherwise it would flicker right before the reload. - destroyErrorOverlay(); + ErrorOverlay.dismissBuildError(); }); } else { // Print initial warnings immediately. @@ -271,7 +155,7 @@ function handleErrors(errors) { }); // Only show the first error. - showErrorOverlay(formatted.errors[0]); + ErrorOverlay.reportBuildError(formatted.errors[0]); // Also log them to the console. if (typeof console !== 'undefined' && typeof console.error === 'function') { diff --git a/packages/react-error-overlay/.flowconfig b/packages/react-error-overlay/.flowconfig index 261b8646fc3..8d7de784e29 100644 --- a/packages/react-error-overlay/.flowconfig +++ b/packages/react-error-overlay/.flowconfig @@ -1,4 +1,5 @@ [ignore] +.*/node_modules/eslint-plugin-jsx-a11y/.* [include] src/**/*.js diff --git a/packages/react-error-overlay/fixtures/bundle.json b/packages/react-error-overlay/fixtures/bundle.json index 7dfd31f5863..16670f6231f 100644 --- a/packages/react-error-overlay/fixtures/bundle.json +++ b/packages/react-error-overlay/fixtures/bundle.json @@ -240,11 +240,11 @@ ] }, { - "functionName": "Object.batchedUpdates", + "functionName": "batchedUpdates", "fileName": "http://localhost:3000/static/js/bundle.js", "lineNumber": 33900, "columnNumber": 26, - "_originalFunctionName": "Object.batchedUpdates", + "_originalFunctionName": "batchedUpdates", "_originalFileName": "webpack:///packages/react-scripts/~/react-dom/lib/ReactDefaultBatchingStrategy.js", "_originalLineNumber": 62, "_originalColumnNumber": 0, @@ -264,11 +264,11 @@ ] }, { - "functionName": "Object.batchedUpdates", + "functionName": "batchedUpdates", "fileName": "http://localhost:3000/static/js/bundle.js", "lineNumber": 2181, "columnNumber": 27, - "_originalFunctionName": "Object.batchedUpdates", + "_originalFunctionName": "batchedUpdates", "_originalFileName": "webpack:///packages/react-scripts/~/react-dom/lib/ReactUpdates.js", "_originalLineNumber": 97, "_originalColumnNumber": 0, @@ -288,11 +288,11 @@ ] }, { - "functionName": "Object._renderNewRootComponent", + "functionName": "_renderNewRootComponent", "fileName": "http://localhost:3000/static/js/bundle.js", "lineNumber": 14398, "columnNumber": 18, - "_originalFunctionName": "Object._renderNewRootComponent", + "_originalFunctionName": "_renderNewRootComponent", "_originalFileName": "webpack:///packages/react-scripts/~/react-dom/lib/ReactMount.js", "_originalLineNumber": 320, "_originalColumnNumber": 0, @@ -312,11 +312,11 @@ ] }, { - "functionName": "Object._renderSubtreeIntoContainer", + "functionName": "_renderSubtreeIntoContainer", "fileName": "http://localhost:3000/static/js/bundle.js", "lineNumber": 14479, "columnNumber": 32, - "_originalFunctionName": "Object._renderSubtreeIntoContainer", + "_originalFunctionName": "_renderSubtreeIntoContainer", "_originalFileName": "webpack:///packages/react-scripts/~/react-dom/lib/ReactMount.js", "_originalLineNumber": 401, "_originalColumnNumber": 0, @@ -336,11 +336,11 @@ ] }, { - "functionName": "Object.render", + "functionName": "render", "fileName": "http://localhost:3000/static/js/bundle.js", "lineNumber": 14500, "columnNumber": 23, - "_originalFunctionName": "Object.render", + "_originalFunctionName": "render", "_originalFileName": "webpack:///packages/react-scripts/~/react-dom/lib/ReactMount.js", "_originalLineNumber": 422, "_originalColumnNumber": 0, @@ -360,11 +360,11 @@ ] }, { - "functionName": "Object.friendlySyntaxErrorLabel", + "functionName": null, "fileName": "http://localhost:3000/static/js/bundle.js", "lineNumber": 17287, "columnNumber": 20, - "_originalFunctionName": "Object.friendlySyntaxErrorLabel", + "_originalFunctionName": null, "_originalFileName": "webpack:///packages/react-scripts/template/src/index.js", "_originalLineNumber": 6, "_originalColumnNumber": 0, @@ -432,11 +432,11 @@ ] }, { - "functionName": "Object.", + "functionName": null, "fileName": "http://localhost:3000/static/js/bundle.js", "lineNumber": 41219, "columnNumber": 18, - "_originalFunctionName": "Object.", + "_originalFunctionName": null, "_originalFileName": null, "_originalLineNumber": null, "_originalColumnNumber": null, diff --git a/packages/react-error-overlay/package.json b/packages/react-error-overlay/package.json index 5a9e864c50f..65c9b5efa0a 100644 --- a/packages/react-error-overlay/package.json +++ b/packages/react-error-overlay/package.json @@ -34,7 +34,9 @@ "anser": "1.4.1", "babel-code-frame": "6.22.0", "babel-runtime": "6.23.0", - "react-dev-utils": "^3.1.0", + "html-entities": "1.2.1", + "react": "^15.5.4", + "react-dom": "^15.5.4", "settle-promise": "1.0.0", "source-map": "0.5.6" }, diff --git a/packages/react-error-overlay/src/__tests__/stack-frame.js b/packages/react-error-overlay/src/__tests__/stack-frame.js index dc6a01b4a06..5a015260ab2 100644 --- a/packages/react-error-overlay/src/__tests__/stack-frame.js +++ b/packages/react-error-overlay/src/__tests__/stack-frame.js @@ -13,9 +13,9 @@ test('proper empty shape', () => { const empty = new StackFrame(); expect(empty).toMatchSnapshot(); - expect(empty.getFunctionName()).toBe(null); + expect(empty.getFunctionName()).toBe('(anonymous function)'); expect(empty.getSource()).toBe(''); - expect(empty.toString()).toBe(''); + expect(empty.toString()).toBe('(anonymous function)'); }); test('proper full shape', () => { diff --git a/packages/react-error-overlay/src/components/CloseButton.js b/packages/react-error-overlay/src/components/CloseButton.js new file mode 100644 index 00000000000..503b1198c3f --- /dev/null +++ b/packages/react-error-overlay/src/components/CloseButton.js @@ -0,0 +1,38 @@ +/** + * Copyright (c) 2015-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + */ + +/* @flow */ +import React from 'react'; +import { black } from '../styles'; + +const closeButtonStyle = { + color: black, + lineHeight: '1rem', + fontSize: '1.5rem', + padding: '1rem', + cursor: 'pointer', + position: 'absolute', + right: 0, + top: 0, +}; + +type CloseCallback = () => void; +function CloseButton({ close }: {| close: CloseCallback |}) { + return ( + + × + + ); +} + +export default CloseButton; diff --git a/packages/react-error-overlay/src/components/CodeBlock.js b/packages/react-error-overlay/src/components/CodeBlock.js new file mode 100644 index 00000000000..478f0111b9b --- /dev/null +++ b/packages/react-error-overlay/src/components/CodeBlock.js @@ -0,0 +1,54 @@ +/** + * Copyright (c) 2015-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + */ + +/* @flow */ +import React from 'react'; +import { redTransparent, yellowTransparent } from '../styles'; + +const _preStyle = { + display: 'block', + padding: '0.5em', + marginTop: '0.5em', + marginBottom: '0.5em', + overflowX: 'auto', + whiteSpace: 'pre-wrap', + borderRadius: '0.25rem', +}; + +const primaryPreStyle = { + ..._preStyle, + backgroundColor: redTransparent, +}; + +const secondaryPreStyle = { + ..._preStyle, + backgroundColor: yellowTransparent, +}; + +const codeStyle = { + fontFamily: 'Consolas, Menlo, monospace', +}; + +type CodeBlockPropsType = {| + main: boolean, + codeHTML: string, +|}; + +function CodeBlock(props: CodeBlockPropsType) { + const preStyle = props.main ? primaryPreStyle : secondaryPreStyle; + const codeBlock = { __html: props.codeHTML }; + + return ( + 
+      
+
+ ); +} + +export default CodeBlock; diff --git a/packages/react-error-overlay/src/components/Collapsible.js b/packages/react-error-overlay/src/components/Collapsible.js new file mode 100644 index 00000000000..92f1de4295c --- /dev/null +++ b/packages/react-error-overlay/src/components/Collapsible.js @@ -0,0 +1,78 @@ +/** + * Copyright (c) 2015-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + */ + +/* @flow */ +import React, { Component } from 'react'; +import { black } from '../styles'; + +const _collapsibleStyle = { + color: black, + cursor: 'pointer', + border: 'none', + display: 'block', + width: '100%', + textAlign: 'left', + background: '#fff', + fontFamily: 'Consolas, Menlo, monospace', + fontSize: '1em', + padding: '0px', + lineHeight: '1.5', +}; + +const collapsibleCollapsedStyle = { + ..._collapsibleStyle, + marginBottom: '1.5em', +}; + +const collapsibleExpandedStyle = { + ..._collapsibleStyle, + marginBottom: '0.6em', +}; + +class Collapsible extends Component { + state = { + collapsed: true, + }; + + toggleCollaped = () => { + this.setState(state => ({ + collapsed: !state.collapsed, + })); + }; + + render() { + const count = this.props.children.length; + const collapsed = this.state.collapsed; + return ( +
+ +
+ {this.props.children} + +
+
+ ); + } +} + +export default Collapsible; diff --git a/packages/react-error-overlay/src/components/Footer.js b/packages/react-error-overlay/src/components/Footer.js new file mode 100644 index 00000000000..68eb8465674 --- /dev/null +++ b/packages/react-error-overlay/src/components/Footer.js @@ -0,0 +1,36 @@ +/** + * Copyright (c) 2015-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + */ + +/* @flow */ +import React from 'react'; +import { darkGray } from '../styles'; + +const footerStyle = { + fontFamily: 'sans-serif', + color: darkGray, + marginTop: '0.5rem', + flex: '0 0 auto', +}; + +type FooterPropsType = {| + line1: string, + line2?: string, +|}; + +function Footer(props: FooterPropsType) { + return ( +
+ {props.line1} +
+ {props.line2} +
+ ); +} + +export default Footer; diff --git a/packages/react-error-overlay/src/components/Header.js b/packages/react-error-overlay/src/components/Header.js new file mode 100644 index 00000000000..a2f40973d00 --- /dev/null +++ b/packages/react-error-overlay/src/components/Header.js @@ -0,0 +1,39 @@ +/** + * Copyright (c) 2015-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + */ + +/* @flow */ +import React from 'react'; +import { red } from '../styles'; + +const headerStyle = { + fontSize: '2em', + fontFamily: 'sans-serif', + color: red, + whiteSpace: 'pre-wrap', + // Top bottom margin spaces header + // Right margin revents overlap with close button + margin: '0 2rem 0.75rem 0', + flex: '0 0 auto', + maxHeight: '50%', + overflow: 'auto', +}; + +type HeaderPropType = {| + headerText: string, +|}; + +function Header(props: HeaderPropType) { + return ( +
+ {props.headerText} +
+ ); +} + +export default Header; diff --git a/packages/react-error-overlay/src/components/NavigationBar.js b/packages/react-error-overlay/src/components/NavigationBar.js new file mode 100644 index 00000000000..4eba743cef7 --- /dev/null +++ b/packages/react-error-overlay/src/components/NavigationBar.js @@ -0,0 +1,70 @@ +/** + * Copyright (c) 2015-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + */ + +/* @flow */ +import React from 'react'; +import { red, redTransparent } from '../styles'; + +const navigationBarStyle = { + marginBottom: '0.5rem', +}; + +const buttonContainerStyle = { + marginRight: '1em', +}; + +const _navButtonStyle = { + backgroundColor: redTransparent, + color: red, + border: 'none', + borderRadius: '4px', + padding: '3px 6px', + cursor: 'pointer', +}; + +const leftButtonStyle = { + ..._navButtonStyle, + borderTopRightRadius: '0px', + borderBottomRightRadius: '0px', + marginRight: '1px', +}; + +const rightButtonStyle = { + ..._navButtonStyle, + borderTopLeftRadius: '0px', + borderBottomLeftRadius: '0px', +}; + +type Callback = () => void; + +type NavigationBarPropsType = {| + currentError: number, + totalErrors: number, + previous: Callback, + next: Callback, +|}; + +function NavigationBar(props: NavigationBarPropsType) { + const { currentError, totalErrors, previous, next } = props; + return ( +
+ + + + + {`${currentError} of ${totalErrors} errors on the page`} +
+ ); +} + +export default NavigationBar; diff --git a/packages/react-error-overlay/src/components/Overlay.js b/packages/react-error-overlay/src/components/Overlay.js new file mode 100644 index 00000000000..4fe530b6fee --- /dev/null +++ b/packages/react-error-overlay/src/components/Overlay.js @@ -0,0 +1,74 @@ +/** + * Copyright (c) 2015-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + */ + +/* @flow */ +import React, { Component } from 'react'; +import { black } from '../styles'; + +const overlayStyle = { + position: 'relative', + display: 'inline-flex', + flexDirection: 'column', + height: '100%', + width: '1024px', + maxWidth: '100%', + overflowX: 'hidden', + overflowY: 'auto', + padding: '0.5rem', + boxSizing: 'border-box', + textAlign: 'left', + fontFamily: 'Consolas, Menlo, monospace', + fontSize: '11px', + whiteSpace: 'pre-wrap', + wordBreak: 'break-word', + lineHeight: 1.5, + color: black, +}; + +class Overlay extends Component { + iframeWindow: window = null; + + getIframeWindow = (element: HTMLDivElement) => { + if (element) { + const document = element.ownerDocument; + this.iframeWindow = document.defaultView; + } + }; + + onKeyDown = (e: KeyboardEvent) => { + const { shortcutHandler } = this.props; + if (shortcutHandler) { + shortcutHandler(e.key); + } + }; + + componentDidMount() { + window.addEventListener('keydown', this.onKeyDown); + if (this.iframeWindow) { + this.iframeWindow.addEventListener('keydown', this.onKeyDown); + } + } + + componentWillUnmount() { + window.removeEventListener('keydown', this.onKeyDown); + if (this.iframeWindow) { + this.iframeWindow.removeEventListener('keydown', this.onKeyDown); + } + } + + render() { + return ( +
+ {this.props.children} +
+ ); + } +} + +export default Overlay; diff --git a/packages/react-error-overlay/src/components/additional.js b/packages/react-error-overlay/src/components/additional.js deleted file mode 100644 index b573c740634..00000000000 --- a/packages/react-error-overlay/src/components/additional.js +++ /dev/null @@ -1,72 +0,0 @@ -/** - * Copyright (c) 2015-present, Facebook, Inc. - * All rights reserved. - * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. - */ - -/* @flow */ -import { applyStyles } from '../utils/dom/css'; -import { - additionalChildStyle, - groupStyle, - groupElemLeft, - groupElemRight, -} from '../styles'; -import { consumeEvent } from '../utils/dom/consumeEvent'; -import { enableTabClick } from '../utils/dom/enableTabClick'; - -type SwitchCallback = (offset: number) => void; -function updateAdditional( - document: Document, - additionalReference: HTMLDivElement, - currentError: number, - totalErrors: number, - switchCallback: SwitchCallback -) { - if (additionalReference.lastChild) { - additionalReference.removeChild(additionalReference.lastChild); - } - - if (totalErrors <= 1) { - return; - } - - const div = document.createElement('div'); - applyStyles(div, additionalChildStyle); - - const group = document.createElement('span'); - applyStyles(group, groupStyle); - - const left = document.createElement('button'); - applyStyles(left, groupElemLeft); - left.addEventListener('click', function(e: MouseEvent) { - consumeEvent(e); - switchCallback(-1); - }); - left.appendChild(document.createTextNode('←')); - enableTabClick(left); - - const right = document.createElement('button'); - applyStyles(right, groupElemRight); - right.addEventListener('click', function(e: MouseEvent) { - consumeEvent(e); - switchCallback(1); - }); - right.appendChild(document.createTextNode('→')); - enableTabClick(right); - - group.appendChild(left); - group.appendChild(right); - div.appendChild(group); - - const text = `${currentError} of ${totalErrors} errors on the page`; - div.appendChild(document.createTextNode(text)); - - additionalReference.appendChild(div); -} - -export type { SwitchCallback }; -export { updateAdditional }; diff --git a/packages/react-error-overlay/src/components/close.js b/packages/react-error-overlay/src/components/close.js deleted file mode 100644 index 2ced8d0ce92..00000000000 --- a/packages/react-error-overlay/src/components/close.js +++ /dev/null @@ -1,35 +0,0 @@ -/** - * Copyright (c) 2015-present, Facebook, Inc. - * All rights reserved. - * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. - */ - -/* @flow */ -import { applyStyles } from '../utils/dom/css'; -import { hintsStyle, hintStyle, closeButtonStyle } from '../styles'; - -function createHint(document: Document, hint: string, title: string) { - const span = document.createElement('span'); - span.appendChild(document.createTextNode(hint)); - span.setAttribute('title', title); - applyStyles(span, hintStyle); - return span; -} - -type CloseCallback = () => void; -function createClose(document: Document, callback: CloseCallback) { - const hints = document.createElement('div'); - applyStyles(hints, hintsStyle); - - const close = createHint(document, '×', 'Click or press Escape to dismiss.'); - close.addEventListener('click', () => callback()); - applyStyles(close, closeButtonStyle); - hints.appendChild(close); - return hints; -} - -export type { CloseCallback }; -export { createClose }; diff --git a/packages/react-error-overlay/src/components/footer.js b/packages/react-error-overlay/src/components/footer.js deleted file mode 100644 index 4586a04ff2b..00000000000 --- a/packages/react-error-overlay/src/components/footer.js +++ /dev/null @@ -1,31 +0,0 @@ -/** - * Copyright (c) 2015-present, Facebook, Inc. - * All rights reserved. - * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. - */ - -/* @flow */ -import { applyStyles } from '../utils/dom/css'; -import { footerStyle } from '../styles'; - -function createFooter(document: Document) { - const div = document.createElement('div'); - applyStyles(div, footerStyle); - div.appendChild( - document.createTextNode( - 'This screen is visible only in development. It will not appear if the app crashes in production.' - ) - ); - div.appendChild(document.createElement('br')); - div.appendChild( - document.createTextNode( - 'Open your browser’s developer console to further inspect this error.' - ) - ); - return div; -} - -export { createFooter }; diff --git a/packages/react-error-overlay/src/components/frame.js b/packages/react-error-overlay/src/components/frame.js deleted file mode 100644 index 4087f4d9c9d..00000000000 --- a/packages/react-error-overlay/src/components/frame.js +++ /dev/null @@ -1,355 +0,0 @@ -/** - * Copyright (c) 2015-present, Facebook, Inc. - * All rights reserved. - * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. - */ - -/* @flow */ -import { enableTabClick } from '../utils/dom/enableTabClick'; -import { createCode } from './code'; -import { isInternalFile } from '../utils/isInternalFile'; -import type { StackFrame } from '../utils/stack-frame'; -import type { FrameSetting, OmitsObject } from './frames'; -import { applyStyles } from '../utils/dom/css'; -import { - omittedFramesExpandedStyle, - omittedFramesCollapsedStyle, - functionNameStyle, - depStyle, - linkStyle, - anchorStyle, - hiddenStyle, -} from '../styles'; - -function getGroupToggle( - document: Document, - omitsCount: number, - omitBundle: number -) { - const omittedFrames = document.createElement('div'); - enableTabClick(omittedFrames); - const text1 = document.createTextNode( - '\u25B6 ' + omitsCount + ' stack frames were collapsed.' - ); - omittedFrames.appendChild(text1); - omittedFrames.addEventListener('click', function() { - const hide = text1.textContent.match(/▲/); - const list = document.getElementsByName('bundle-' + omitBundle); - for (let index = 0; index < list.length; ++index) { - const n = list[index]; - if (hide) { - n.style.display = 'none'; - } else { - n.style.display = ''; - } - } - if (hide) { - text1.textContent = text1.textContent.replace(/▲/, '▶'); - text1.textContent = text1.textContent.replace(/expanded/, 'collapsed'); - applyStyles(omittedFrames, omittedFramesCollapsedStyle); - } else { - text1.textContent = text1.textContent.replace(/▶/, '▲'); - text1.textContent = text1.textContent.replace(/collapsed/, 'expanded'); - applyStyles(omittedFrames, omittedFramesExpandedStyle); - } - }); - applyStyles(omittedFrames, omittedFramesCollapsedStyle); - return omittedFrames; -} - -function insertBeforeBundle( - document: Document, - parent: Node, - omitsCount: number, - omitBundle: number, - actionElement -) { - const children = document.getElementsByName('bundle-' + omitBundle); - if (children.length < 1) { - return; - } - let first: ?Node = children[0]; - while (first != null && first.parentNode !== parent) { - first = first.parentNode; - } - const div = document.createElement('div'); - enableTabClick(div); - div.setAttribute('name', 'bundle-' + omitBundle); - const text = document.createTextNode( - '\u25BC ' + omitsCount + ' stack frames were expanded.' - ); - div.appendChild(text); - div.addEventListener('click', function() { - return actionElement.click(); - }); - applyStyles(div, omittedFramesExpandedStyle); - div.style.display = 'none'; - - parent.insertBefore(div, first); -} - -function frameDiv( - document: Document, - functionName, - url, - internalUrl, - onSourceClick: ?Function -) { - const frame = document.createElement('div'); - const frameFunctionName = document.createElement('div'); - - if (functionName && functionName.indexOf('Object.') === 0) { - functionName = functionName.slice('Object.'.length); - } - if (functionName === '') { - functionName = null; - } - const cleanedFunctionName = functionName || '(anonymous function)'; - const cleanedUrl = url.replace('webpack://', '.'); - - if (internalUrl) { - applyStyles( - frameFunctionName, - Object.assign({}, functionNameStyle, depStyle) - ); - } else { - applyStyles(frameFunctionName, functionNameStyle); - } - - frameFunctionName.appendChild(document.createTextNode(cleanedFunctionName)); - frame.appendChild(frameFunctionName); - - const frameLink = document.createElement('div'); - applyStyles(frameLink, linkStyle); - const frameAnchor = document.createElement('a'); - applyStyles(frameAnchor, anchorStyle); - frameAnchor.appendChild(document.createTextNode(cleanedUrl)); - frameLink.appendChild(frameAnchor); - frame.appendChild(frameLink); - - if (typeof onSourceClick === 'function') { - let handler = onSourceClick; - enableTabClick(frameAnchor); - frameAnchor.style.cursor = 'pointer'; - frameAnchor.addEventListener('click', function() { - handler(); - }); - } - - return frame; -} - -function isBultinErrorName(errorName: ?string) { - switch (errorName) { - case 'EvalError': - case 'InternalError': - case 'RangeError': - case 'ReferenceError': - case 'SyntaxError': - case 'TypeError': - case 'URIError': - return true; - default: - return false; - } -} - -function getPrettyURL( - sourceFileName: ?string, - sourceLineNumber: ?number, - sourceColumnNumber: ?number, - fileName: ?string, - lineNumber: ?number, - columnNumber: ?number, - compiled: boolean -): string { - let prettyURL; - if (!compiled && sourceFileName && typeof sourceLineNumber === 'number') { - // Remove everything up to the first /src/ or /node_modules/ - const trimMatch = /^[/|\\].*?[/|\\]((src|node_modules)[/|\\].*)/.exec( - sourceFileName - ); - if (trimMatch && trimMatch[1]) { - prettyURL = trimMatch[1]; - } else { - prettyURL = sourceFileName; - } - prettyURL += ':' + sourceLineNumber; - // Note: we intentionally skip 0's because they're produced by cheap Webpack maps - if (sourceColumnNumber) { - prettyURL += ':' + sourceColumnNumber; - } - } else if (fileName && typeof lineNumber === 'number') { - prettyURL = fileName + ':' + lineNumber; - // Note: we intentionally skip 0's because they're produced by cheap Webpack maps - if (columnNumber) { - prettyURL += ':' + columnNumber; - } - } else { - prettyURL = 'unknown'; - } - return prettyURL; -} - -function createFrame( - document: Document, - frameSetting: FrameSetting, - frame: StackFrame, - contextSize: number, - critical: boolean, - omits: OmitsObject, - omitBundle: number, - parentContainer: HTMLDivElement, - lastElement: boolean, - errorName: ?string -) { - const { compiled } = frameSetting; - let { functionName, _originalFileName: sourceFileName } = frame; - const { - fileName, - lineNumber, - columnNumber, - _scriptCode: scriptLines, - _originalLineNumber: sourceLineNumber, - _originalColumnNumber: sourceColumnNumber, - _originalScriptCode: sourceLines, - } = frame; - - // TODO: find a better place for this. - // Chrome has a bug with inferring function.name: - // https://github.com/facebookincubator/create-react-app/issues/2097 - // Let's ignore a meaningless name we get for top-level modules. - if ( - functionName === 'Object.friendlySyntaxErrorLabel' || - functionName === 'Object.exports.__esModule' - ) { - functionName = '(anonymous function)'; - } - - const prettyURL = getPrettyURL( - sourceFileName, - sourceLineNumber, - sourceColumnNumber, - fileName, - lineNumber, - columnNumber, - compiled - ); - - let needsHidden = false; - const isInternalUrl = isInternalFile(sourceFileName, fileName); - const isThrownIntentionally = !isBultinErrorName(errorName); - const shouldCollapse = - isInternalUrl && (isThrownIntentionally || omits.hasReachedAppCode); - - if (!isInternalUrl) { - omits.hasReachedAppCode = true; - } - - if (shouldCollapse) { - ++omits.value; - needsHidden = true; - } - - let collapseElement = null; - if (!shouldCollapse || lastElement) { - if (omits.value > 0) { - const capV = omits.value; - const omittedFrames = getGroupToggle(document, capV, omitBundle); - window.requestAnimationFrame(() => { - insertBeforeBundle( - document, - parentContainer, - capV, - omitBundle, - omittedFrames - ); - }); - if (lastElement && shouldCollapse) { - collapseElement = omittedFrames; - } else { - parentContainer.appendChild(omittedFrames); - } - ++omits.bundle; - } - omits.value = 0; - } - - let onSourceClick = null; - if (sourceFileName) { - // e.g. "/path-to-my-app/webpack/bootstrap eaddeb46b67d75e4dfc1" - const isInternalWebpackBootstrapCode = - sourceFileName.trim().indexOf(' ') !== -1; - if (!isInternalWebpackBootstrapCode) { - onSourceClick = () => { - // Keep this in sync with react-error-overlay/middleware.js - fetch( - '/__open-stack-frame-in-editor?fileName=' + - window.encodeURIComponent(sourceFileName) + - '&lineNumber=' + - window.encodeURIComponent(sourceLineNumber || 1) - ).then(() => {}, () => {}); - }; - } - } - - const elem = frameDiv( - document, - functionName, - prettyURL, - shouldCollapse, - onSourceClick - ); - if (needsHidden) { - applyStyles(elem, hiddenStyle); - elem.setAttribute('name', 'bundle-' + omitBundle); - } - - let hasSource = false; - if (!shouldCollapse) { - if ( - compiled && - scriptLines && - scriptLines.length !== 0 && - lineNumber != null - ) { - elem.appendChild( - createCode( - document, - scriptLines, - lineNumber, - columnNumber, - contextSize, - critical, - onSourceClick - ) - ); - hasSource = true; - } else if ( - !compiled && - sourceLines && - sourceLines.length !== 0 && - sourceLineNumber != null - ) { - elem.appendChild( - createCode( - document, - sourceLines, - sourceLineNumber, - sourceColumnNumber, - contextSize, - critical, - onSourceClick - ) - ); - hasSource = true; - } - } - - return { elem: elem, hasSource: hasSource, collapseElement: collapseElement }; -} - -export { createFrame }; diff --git a/packages/react-error-overlay/src/components/frames.js b/packages/react-error-overlay/src/components/frames.js deleted file mode 100644 index 8bd50509295..00000000000 --- a/packages/react-error-overlay/src/components/frames.js +++ /dev/null @@ -1,132 +0,0 @@ -/** - * Copyright (c) 2015-present, Facebook, Inc. - * All rights reserved. - * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. - */ - -/* @flow */ -import type { StackFrame } from '../utils/stack-frame'; -import { applyStyles } from '../utils/dom/css'; -import { traceStyle, toggleStyle } from '../styles'; -import { enableTabClick } from '../utils/dom/enableTabClick'; -import { createFrame } from './frame'; - -type OmitsObject = { - value: number, - bundle: number, - hasReachedAppCode: boolean, -}; -type FrameSetting = { compiled: boolean }; -export type { OmitsObject, FrameSetting }; - -function createFrameWrapper( - document: Document, - parent: HTMLDivElement, - factory, - lIndex: number, - frameSettings: FrameSetting[], - contextSize: number -) { - const fac = factory(); - if (fac == null) { - return; - } - const { hasSource, elem, collapseElement } = fac; - - const elemWrapper = document.createElement('div'); - elemWrapper.appendChild(elem); - - if (hasSource) { - const compiledDiv = document.createElement('div'); - enableTabClick(compiledDiv); - applyStyles(compiledDiv, toggleStyle); - - const o = frameSettings[lIndex]; - const compiledText = document.createTextNode( - 'View ' + (o && o.compiled ? 'source' : 'compiled') - ); - compiledDiv.addEventListener('click', function() { - if (o) { - o.compiled = !o.compiled; - } - - const next = createFrameWrapper( - document, - parent, - factory, - lIndex, - frameSettings, - contextSize - ); - if (next != null) { - parent.insertBefore(next, elemWrapper); - parent.removeChild(elemWrapper); - } - }); - compiledDiv.appendChild(compiledText); - elemWrapper.appendChild(compiledDiv); - } - - if (collapseElement != null) { - elemWrapper.appendChild(collapseElement); - } - - return elemWrapper; -} - -function createFrames( - document: Document, - resolvedFrames: StackFrame[], - frameSettings: FrameSetting[], - contextSize: number, - errorName: ?string -) { - if (resolvedFrames.length !== frameSettings.length) { - throw new Error( - 'You must give a frame settings array of identical length to resolved frames.' - ); - } - const trace = document.createElement('div'); - applyStyles(trace, traceStyle); - - let index = 0; - let critical = true; - const omits: OmitsObject = { value: 0, bundle: 1, hasReachedAppCode: false }; - resolvedFrames.forEach(function(frame) { - const lIndex = index++; - const elem = createFrameWrapper( - document, - trace, - createFrame.bind( - undefined, - document, - frameSettings[lIndex], - frame, - contextSize, - critical, - omits, - omits.bundle, - trace, - index === resolvedFrames.length, - errorName - ), - lIndex, - frameSettings, - contextSize - ); - if (elem == null) { - return; - } - critical = false; - trace.appendChild(elem); - }); - //TODO: fix this - omits.value = 0; - - return trace; -} - -export { createFrames }; diff --git a/packages/react-error-overlay/src/components/overlay.js b/packages/react-error-overlay/src/components/overlay.js deleted file mode 100644 index 69acf9ad43f..00000000000 --- a/packages/react-error-overlay/src/components/overlay.js +++ /dev/null @@ -1,95 +0,0 @@ -/** - * Copyright (c) 2015-present, Facebook, Inc. - * All rights reserved. - * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. - */ - -/* @flow */ -import { applyStyles } from '../utils/dom/css'; -import { containerStyle, overlayStyle, headerStyle } from '../styles'; -import { createClose } from './close'; -import { createFrames } from './frames'; -import { createFooter } from './footer'; -import type { CloseCallback } from './close'; -import type { StackFrame } from '../utils/stack-frame'; -import { updateAdditional } from './additional'; -import type { FrameSetting } from './frames'; -import type { SwitchCallback } from './additional'; - -function createOverlay( - document: Document, - name: ?string, - message: string, - frames: StackFrame[], - contextSize: number, - currentError: number, - totalErrors: number, - switchCallback: SwitchCallback, - closeCallback: CloseCallback -): { - overlay: HTMLDivElement, - additional: HTMLDivElement, -} { - const frameSettings: FrameSetting[] = frames.map(() => ({ compiled: false })); - // Create overlay - const overlay = document.createElement('div'); - applyStyles(overlay, overlayStyle); - - // Create container - const container = document.createElement('div'); - applyStyles(container, containerStyle); - overlay.appendChild(container); - container.appendChild(createClose(document, closeCallback)); - - // Create "Errors X of Y" in case of multiple errors - const additional = document.createElement('div'); - updateAdditional( - document, - additional, - currentError, - totalErrors, - switchCallback - ); - container.appendChild(additional); - - // Create header - const header = document.createElement('div'); - applyStyles(header, headerStyle); - - // Make message prettier - let finalMessage = - message.match(/^\w*:/) || !name ? message : name + ': ' + message; - - finalMessage = finalMessage - // TODO: maybe remove this prefix from fbjs? - // It's just scaring people - .replace(/^Invariant Violation:\s*/, '') - // This is not helpful either: - .replace(/^Warning:\s*/, '') - // Break the actionable part to the next line. - // AFAIK React 16+ should already do this. - .replace(' Check the render method', '\n\nCheck the render method') - .replace(' Check your code at', '\n\nCheck your code at'); - - // Put it in the DOM - header.appendChild(document.createTextNode(finalMessage)); - container.appendChild(header); - - // Create trace - container.appendChild( - createFrames(document, frames, frameSettings, contextSize, name) - ); - - // Show message - container.appendChild(createFooter(document)); - - return { - overlay, - additional, - }; -} - -export { createOverlay }; diff --git a/packages/react-error-overlay/src/containers/CompileErrorContainer.js b/packages/react-error-overlay/src/containers/CompileErrorContainer.js new file mode 100644 index 00000000000..bd193eb50b4 --- /dev/null +++ b/packages/react-error-overlay/src/containers/CompileErrorContainer.js @@ -0,0 +1,31 @@ +/** + * Copyright (c) 2015-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + */ + +/* @flow */ +import React, { PureComponent } from 'react'; +import Overlay from '../components/Overlay'; +import Footer from '../components/Footer'; +import Header from '../components/Header'; +import CodeBlock from '../components/CodeBlock'; +import generateAnsiHTML from '../utils/generateAnsiHTML'; + +class CompileErrorContainer extends PureComponent { + render() { + const { error } = this.props; + return ( + +
+ +