From 2766bbd1ffacd9a587f6c362438f0ff4ceda991f Mon Sep 17 00:00:00 2001 From: Konstantin Tarkus Date: Wed, 9 Aug 2017 04:35:26 +0300 Subject: [PATCH 0001/1619] 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 0002/1619] 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 0003/1619] 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 0004/1619] 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 0005/1619] 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 0006/1619] 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 0007/1619] 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 0008/1619] 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 0009/1619] 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 0010/1619] 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 0011/1619] 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 0012/1619] 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 0013/1619] 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 0014/1619] 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 0015/1619] 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 0016/1619] 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 ( + +
+ +