diff --git a/CHANGELOG.md b/CHANGELOG.md index 21f50c8e5f6..3974893e303 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,150 @@ +## 1.0.16 (October 31, 2017) 🎃 + +#### :bug: Bug Fix + +* `react-scripts` + + * [#3374](https://github.com/facebookincubator/create-react-app/pull/3374) Set correct image type and sizes in `manifest.json`. ([@piotr-cz](https://github.com/piotr-cz)) + +* `react-dev-utils` + + * [#3368](https://github.com/facebookincubator/create-react-app/pull/3368) Fix a crash in development mode in older browsers. ([@felthy](https://github.com/felthy)) + +#### Committers: 2 + +- Dan Abramov ([gaearon](https://github.com/gaearon)) +- Piotr ([piotr-cz](https://github.com/piotr-cz)) + +### Migrating from 1.0.15 to 1.0.16 + +Inside any created project that has not been ejected, run: + +``` +npm install --save --save-exact react-scripts@1.0.16 +``` + +or + +``` +yarn add --exact react-scripts@1.0.16 +``` + +## 1.0.15 (October 30, 2017) + +#### :bug: Bug Fix + +* `react-scripts` + + * [#3287](https://github.com/facebookincubator/create-react-app/pull/3287) Fix favicon sizes value in the project manifest. ([@ryansully](https://github.com/ryansully)) + +* `react-dev-utils`, `react-scripts` + + * [#3230](https://github.com/facebookincubator/create-react-app/pull/3230) Fix watching for changes in `src/node_modules`. ([@xjlim](https://github.com/xjlim)) + +#### :nail_care: Enhancement + +* `react-scripts` + + * [#3239](https://github.com/facebookincubator/create-react-app/pull/3239) Allow importing `.mjs` files. ([@Timer](https://github.com/Timer)) + * [#3340](https://github.com/facebookincubator/create-react-app/pull/3340) Polyfill `requestAnimationFrame` in test environment. ([@gaearon](https://github.com/gaearon)) + +* `babel-preset-react-app`, `react-dev-utils`, `react-error-overlay`, `react-scripts` + + * [#3342](https://github.com/facebookincubator/create-react-app/pull/3342) Bump dependencies. ([@gaearon](https://github.com/gaearon)) + +* `react-dev-utils`, `react-error-overlay` + + * [#3100](https://github.com/facebookincubator/create-react-app/pull/3100) Add click-to-open support for build errors. ([@tharakawj](https://github.com/tharakawj)) + +* `create-react-app` + + * [#3355](https://github.com/facebookincubator/create-react-app/pull/3355) Add preflight CWD check for npm to detect bad Windows setups. ([@gaearon](https://github.com/gaearon)) + +#### :memo: Documentation + +* User Guide + + * [#2957](https://github.com/facebookincubator/create-react-app/pull/2957) Use `npm-run-all` to build Sass and JS. ([@shime](https://github.com/shime)) + * [#3108](https://github.com/facebookincubator/create-react-app/pull/3108) Update the Service Worker opt-out documentation. ([@captDaylight](https://github.com/captDaylight)) + * [#3286](https://github.com/facebookincubator/create-react-app/pull/3286) Add documentation for Enzyme 3 integration. ([@ryansully](https://github.com/ryansully)) + * [#3328](https://github.com/facebookincubator/create-react-app/pull/3328) Recommend react-snap as an alternative to react-snapshot. ([@aaronshaf](https://github.com/aaronshaf)) + * [#3279](https://github.com/facebookincubator/create-react-app/pull/3279) Add jest coverage configuration docs. ([@mattphillips](https://github.com/mattphillips)) + * [#3303](https://github.com/facebookincubator/create-react-app/pull/3303) Update link to Jest Expect docs. ([@jbranchaud](https://github.com/jbranchaud)) + * [#3289](https://github.com/facebookincubator/create-react-app/pull/3289) Fix dead link to Jest "expect" docs. ([@alexkrolick](https://github.com/alexkrolick)) + * [#3265](https://github.com/facebookincubator/create-react-app/pull/3265) Add external links to deployment services. ([@aericson](https://github.com/aericson)) + * [#3075](https://github.com/facebookincubator/create-react-app/pull/3075) Minor docs change to highlight dev proxy behaviour. ([@davidjb](https://github.com/davidjb)) + * [#3185](https://github.com/facebookincubator/create-react-app/pull/3185) Correct manual proxy documentation. ([@robertpanzer](https://github.com/robertpanzer)) + +* README + + * [#3227](https://github.com/facebookincubator/create-react-app/pull/3227) Fix package management link in README for issue #3218. ([@nishina555](https://github.com/nishina555)) + * [#3211](https://github.com/facebookincubator/create-react-app/pull/3211) Improve grammar in README. ([@Mohamed3on](https://github.com/Mohamed3on)) + +#### :house: Internal + +* Other + + * [#3345](https://github.com/facebookincubator/create-react-app/pull/3345) Stop using `npm link` in tests. ([@Timer](https://github.com/Timer)) + +* `react-error-overlay` + + * [#3122](https://github.com/facebookincubator/create-react-app/pull/3122) Fix for add .gitattributes file #3080. ([@ijajmulani](https://github.com/ijajmulani)) + * [#3267](https://github.com/facebookincubator/create-react-app/pull/3267) Use production React version for bundled overlay. ([@Timer](https://github.com/Timer)) + * [#3264](https://github.com/facebookincubator/create-react-app/pull/3264) Add warning when using `react-error-overlay` in production. ([@Timer](https://github.com/Timer)) + * [#3263](https://github.com/facebookincubator/create-react-app/pull/3263) `react-error-overlay` has no dependencies now (it's bundled). ([@Timer](https://github.com/Timer)) + * [#3142](https://github.com/facebookincubator/create-react-app/pull/3142) Make error overlay run in the context of the iframe. ([@tharakawj](https://github.com/tharakawj)) + +* `react-scripts` + + * [#3150](https://github.com/facebookincubator/create-react-app/pull/3150) Remove an useless negation in `registerServiceWorker.js`. ([@dunglas](https://github.com/dunglas)) + * [#3158](https://github.com/facebookincubator/create-react-app/pull/3158) Remove `output.path` from dev webpack config. ([@nikolas](https://github.com/nikolas)) + * [#3281](https://github.com/facebookincubator/create-react-app/pull/3281) Add a workaround for Uglify incompatiblity with Safari 10.0 in the future. ([@satyavh](https://github.com/satyavh)) + * [#3146](https://github.com/facebookincubator/create-react-app/pull/3146) Fix `reason-react` support. ([@lpalmes](https://github.com/lpalmes)) + * [#3236](https://github.com/facebookincubator/create-react-app/pull/3236) Update `style-loader` and disable inclusion of its HMR code in builds. ([@insin](https://github.com/insin)) + * [#3246](https://github.com/facebookincubator/create-react-app/pull/3246) Update `url-loader` to 0.6.2 for mime ReDoS vulnerability. ([@d3viant0ne](https://github.com/d3viant0ne)) + * [#2914](https://github.com/facebookincubator/create-react-app/pull/2914) `` -> ``. ([@Hurtak](https://github.com/Hurtak)) + +#### Committers: 24 + +- Aaron Shafovaloff ([aaronshaf](https://github.com/aaronshaf)) +- Alex ([alexkrolick](https://github.com/alexkrolick)) +- AndrĂ© Ericson ([aericson](https://github.com/aericson)) +- Dan Abramov ([gaearon](https://github.com/gaearon)) +- David Beitey ([davidjb](https://github.com/davidjb)) +- Hrvoje Ć imić ([shime](https://github.com/shime)) +- IJAJ MULANI ([ijajmulani](https://github.com/ijajmulani)) +- Joe Haddad ([Timer](https://github.com/Timer)) +- Joe Lim ([xjlim](https://github.com/xjlim)) +- Jonny Buchanan ([insin](https://github.com/insin)) +- Josh Branchaud ([jbranchaud](https://github.com/jbranchaud)) +- Joshua Wiens ([d3viant0ne](https://github.com/d3viant0ne)) +- KĂ©vin Dunglas ([dunglas](https://github.com/dunglas)) +- Lorenzo Palmes ([lpalmes](https://github.com/lpalmes)) +- Matt Phillips ([mattphillips](https://github.com/mattphillips)) +- Mohamed Oun ([Mohamed3on](https://github.com/Mohamed3on)) +- Nik Nyby ([nikolas](https://github.com/nikolas)) +- Petr HuƙƄåk ([Hurtak](https://github.com/Hurtak)) +- Robert Panzer ([robertpanzer](https://github.com/robertpanzer)) +- Ryan Sullivan ([ryansully](https://github.com/ryansully)) +- Satya van Heummen ([satyavh](https://github.com/satyavh)) +- Tharaka Wijebandara ([tharakawj](https://github.com/tharakawj)) +- Toshiharu Nishina ([nishina555](https://github.com/nishina555)) +- [captDaylight](https://github.com/captDaylight) + +### Migrating from 1.0.14 to 1.0.15 + +Inside any created project that has not been ejected, run: + +``` +npm install --save --save-exact react-scripts@1.0.15 +``` + +or + +``` +yarn add --exact react-scripts@1.0.15 +``` + ## 1.0.14 (September 26, 2017) #### :bug: Bug Fix diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 68a9c4e09cc..86b392f2f44 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -108,9 +108,9 @@ More detailed information are in the dedicated [README](/packages/react-scripts/ * Add a four-space indented paragraph after each non-trivial list item, explaining what changed and why. For each breaking change also write who it affects and instructions for migrating existing code. * Maybe add some newlines here and there. Preview the result on GitHub to get a feel for it. Changelog generator output is a bit too terse for my taste, so try to make it visually pleasing and well grouped. 6. Make sure to include “Migrating from ...” instructions for the previous release. Often you can copy and paste them. -7. After merging the changelog update, create a GitHub Release with the same text. See previous Releases for inspiration. -8. **Do not run `npm publish`. Instead, run `npm run publish`.** -9. Wait for a long time, and it will get published. Don’t worry that it’s stuck. In the end the publish script will prompt for versions before publishing the packages. +7. **Do not run `npm publish`. Instead, run `npm run publish`.** +8. Wait for a long time, and it will get published. Don’t worry that it’s stuck. In the end the publish script will prompt for versions before publishing the packages. +9. After publishing, create a GitHub Release with the same text as the changelog entry. See previous Releases for inspiration. Make sure to test the released version! If you want to be extra careful, you can publish a prerelease by running `npm run publish -- --tag next` instead of `npm run publish`. diff --git a/appveyor.cleanup-cache.txt b/appveyor.cleanup-cache.txt index 19d0b989b62..ea6d1b9c010 100644 --- a/appveyor.cleanup-cache.txt +++ b/appveyor.cleanup-cache.txt @@ -3,3 +3,4 @@ http://help.appveyor.com/discussions/questions/1310-delete-cache ---- Just testing if this works. +lalala. diff --git a/appveyor.yml b/appveyor.yml index e00da39436c..ffe48fc8585 100644 --- a/appveyor.yml +++ b/appveyor.yml @@ -2,11 +2,11 @@ image: Visual Studio 2017 environment: matrix: - - nodejs_version: 7 + - nodejs_version: 8 test_suite: "simple" - - nodejs_version: 7 + - nodejs_version: 8 test_suite: "installs" - - nodejs_version: 7 + - nodejs_version: 8 test_suite: "kitchensink" - nodejs_version: 6 test_suite: "simple" diff --git a/packages/babel-preset-react-app/package.json b/packages/babel-preset-react-app/package.json index 058d1a4af9c..f020f99e0b8 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.3", + "version": "3.1.0", "description": "Babel preset used by Create React App", "repository": "facebookincubator/create-react-app", "license": "MIT", @@ -11,17 +11,17 @@ "index.js" ], "dependencies": { - "babel-plugin-dynamic-import-node": "1.0.2", + "babel-plugin-dynamic-import-node": "1.1.0", "babel-plugin-syntax-dynamic-import": "6.18.0", "babel-plugin-transform-class-properties": "6.24.1", - "babel-plugin-transform-object-rest-spread": "6.23.0", + "babel-plugin-transform-object-rest-spread": "6.26.0", "babel-plugin-transform-react-constant-elements": "6.23.0", "babel-plugin-transform-react-jsx": "6.24.1", "babel-plugin-transform-react-jsx-self": "6.22.0", "babel-plugin-transform-react-jsx-source": "6.22.0", - "babel-plugin-transform-regenerator": "6.24.1", + "babel-plugin-transform-regenerator": "6.26.0", "babel-plugin-transform-runtime": "6.23.0", - "babel-preset-env": "1.5.2", + "babel-preset-env": "1.6.1", "babel-preset-react": "6.24.1" }, "peerDependencies": { diff --git a/packages/create-react-app/createReactApp.js b/packages/create-react-app/createReactApp.js index 161beab50e8..9ff7c08cf9e 100755 --- a/packages/create-react-app/createReactApp.js +++ b/packages/create-react-app/createReactApp.js @@ -158,8 +158,13 @@ function createApp(name, verbose, version, template) { path.join(root, 'package.json'), JSON.stringify(packageJson, null, 2) ); + + const useYarn = shouldUseYarn(); const originalDirectory = process.cwd(); process.chdir(root); + if (!useYarn && !checkThatNpmCanReadCwd()) { + process.exit(1); + } if (!semver.satisfies(process.version, '>=6.0.0')) { console.log( @@ -172,7 +177,6 @@ function createApp(name, verbose, version, template) { version = 'react-scripts@0.9.x'; } - const useYarn = shouldUseYarn(); if (!useYarn) { const npmInfo = checkNpmVersion(); if (!npmInfo.hasMinNpm) { @@ -200,7 +204,7 @@ function shouldUseYarn() { } } -function install(useYarn, dependencies, verbose, isOnline) { +function install(root, useYarn, dependencies, verbose, isOnline) { return new Promise((resolve, reject) => { let command; let args; @@ -212,6 +216,14 @@ function install(useYarn, dependencies, verbose, isOnline) { } [].push.apply(args, dependencies); + // Explicitly set cwd() to work around issues like + // https://github.com/facebookincubator/create-react-app/issues/3326. + // Unfortunately we can only do this for Yarn because npm support for + // equivalent --prefix flag doesn't help with this issue. + // This is why for npm, we run checkThatNpmCanReadCwd() early instead. + args.push('--cwd'); + args.push(root); + if (!isOnline) { console.log(chalk.yellow('You appear to be offline.')); console.log(chalk.yellow('Falling back to the local Yarn cache.')); @@ -275,7 +287,7 @@ function run( ); console.log(); - return install(useYarn, allDependencies, verbose, isOnline).then( + return install(root, useYarn, allDependencies, verbose, isOnline).then( () => packageName ); }) @@ -606,6 +618,67 @@ function isSafeToCreateProjectIn(root, name) { return false; } +function checkThatNpmCanReadCwd() { + const cwd = process.cwd(); + let childOutput = null; + try { + // Note: intentionally using spawn over exec since + // the problem doesn't reproduce otherwise. + // `npm config list` is the only reliable way I could find + // to reproduce the wrong path. Just printing process.cwd() + // in a Node process was not enough. + childOutput = spawn.sync('npm', ['config', 'list']).output.join(''); + } catch (err) { + // Something went wrong spawning node. + // Not great, but it means we can't do this check. + // We might fail later on, but let's continue. + return true; + } + if (typeof childOutput !== 'string') { + return true; + } + const lines = childOutput.split('\n'); + // `npm config list` output includes the following line: + // "; cwd = C:\path\to\current\dir" (unquoted) + // I couldn't find an easier way to get it. + const prefix = '; cwd = '; + const line = lines.find(line => line.indexOf(prefix) === 0); + if (typeof line !== 'string') { + // Fail gracefully. They could remove it. + return true; + } + const npmCWD = line.substring(prefix.length); + if (npmCWD === cwd) { + return true; + } + console.error( + chalk.red( + `Could not start an npm process in the right directory.\n\n` + + `The current directory is: ${chalk.bold(cwd)}\n` + + `However, a newly started npm process runs in: ${chalk.bold( + npmCWD + )}\n\n` + + `This is probably caused by a misconfigured system terminal shell.` + ) + ); + if (process.platform === 'win32') { + console.error( + chalk.red(`On Windows, this can usually be fixed by running:\n\n`) + + ` ${chalk.cyan( + 'reg' + )} delete "HKCU\\Software\\Microsoft\\Command Processor" /v AutoRun /f\n` + + ` ${chalk.cyan( + 'reg' + )} delete "HKLM\\Software\\Microsoft\\Command Processor" /v AutoRun /f\n\n` + + chalk.red(`Try to run the above two lines in the terminal.\n`) + + chalk.red( + `To learn more about this problem, read: https://blogs.msdn.microsoft.com/oldnewthing/20071121-00/?p=24433/` + ) + ); + } + return false; +} + function checkIfOnline(useYarn) { if (!useYarn) { // Don't ping the Yarn registry. diff --git a/packages/create-react-app/package.json b/packages/create-react-app/package.json index 73400bb0339..569985f5c07 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.4.1", + "version": "1.4.3", "keywords": [ "react" ], diff --git a/packages/react-dev-utils/package.json b/packages/react-dev-utils/package.json index 48e1dc49d6a..db7114a261a 100644 --- a/packages/react-dev-utils/package.json +++ b/packages/react-dev-utils/package.json @@ -1,6 +1,6 @@ { "name": "react-dev-utils", - "version": "4.1.0", + "version": "4.2.1", "description": "Webpack utilities used by Create React App", "repository": "facebookincubator/create-react-app", "license": "MIT", @@ -35,19 +35,19 @@ "webpackHotDevClient.js" ], "dependencies": { - "address": "1.0.2", - "babel-code-frame": "6.22.0", + "address": "1.0.3", + "babel-code-frame": "6.26.0", "chalk": "1.1.3", "cross-spawn": "5.1.0", "detect-port-alt": "1.1.3", "escape-string-regexp": "1.0.5", - "filesize": "3.5.10", + "filesize": "3.5.11", "global-modules": "1.0.0", "gzip-size": "3.0.0", - "inquirer": "3.2.1", + "inquirer": "3.3.0", "is-root": "1.0.0", "opn": "5.1.0", - "react-error-overlay": "^2.0.2", + "react-error-overlay": "^3.0.0", "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 e375c3fab8d..296e380467d 100644 --- a/packages/react-dev-utils/webpackHotDevClient.js +++ b/packages/react-dev-utils/webpackHotDevClient.js @@ -26,7 +26,8 @@ var ErrorOverlay = require('react-error-overlay'); ErrorOverlay.setEditorHandler(function editorHandler(errorLocation) { // Keep this sync with errorOverlayMiddleware.js fetch( - `${launchEditorEndpoint}?fileName=` + + launchEditorEndpoint + + '?fileName=' + window.encodeURIComponent(errorLocation.fileName) + '&lineNumber=' + window.encodeURIComponent(errorLocation.lineNumber || 1) diff --git a/packages/react-error-overlay/.gitattributes b/packages/react-error-overlay/.gitattributes new file mode 100644 index 00000000000..cbdcbbc258e --- /dev/null +++ b/packages/react-error-overlay/.gitattributes @@ -0,0 +1 @@ +*.js text eol=lf diff --git a/packages/react-error-overlay/package.json b/packages/react-error-overlay/package.json index 9e36bf7e885..d4e528ea6c6 100644 --- a/packages/react-error-overlay/package.json +++ b/packages/react-error-overlay/package.json @@ -1,6 +1,6 @@ { "name": "react-error-overlay", - "version": "2.0.2", + "version": "3.0.0", "description": "An overlay for displaying stack frames.", "main": "lib/index.js", "scripts": { @@ -30,12 +30,12 @@ "lib/index.js" ], "devDependencies": { - "anser": "1.4.1", - "babel-code-frame": "6.22.0", + "anser": "1.4.4", + "babel-code-frame": "6.26.0", "babel-core": "^6.26.0", "babel-eslint": "7.2.3", "babel-loader": "^7.1.2", - "babel-preset-react-app": "^3.0.3", + "babel-preset-react-app": "^3.1.0", "babel-runtime": "6.26.0", "chalk": "^2.1.0", "chokidar": "^1.7.0", diff --git a/packages/react-error-overlay/webpack.config.iframe.js b/packages/react-error-overlay/webpack.config.iframe.js index 031762e5937..c80b15afa14 100644 --- a/packages/react-error-overlay/webpack.config.iframe.js +++ b/packages/react-error-overlay/webpack.config.iframe.js @@ -30,8 +30,7 @@ module.exports = { // in production mode. 'process.env': { NODE_ENV: '"production"' }, // This prevents our bundled React from accidentally hijacking devtools. - __REACT_DEVTOOLS_GLOBAL_HOOK__: - '__REACT_ERROR_OVERLAY_GLOBAL_HOOK_NOOP__', + __REACT_DEVTOOLS_GLOBAL_HOOK__: '({})', }), // This code is embedded as a string, so it would never be optimized // elsewhere. diff --git a/packages/react-scripts/config/polyfills.js b/packages/react-scripts/config/polyfills.js index 673fb8399b4..8d97fb4ac39 100644 --- a/packages/react-scripts/config/polyfills.js +++ b/packages/react-scripts/config/polyfills.js @@ -22,3 +22,9 @@ require('whatwg-fetch'); // Object.assign() is commonly used with React. // It will use the native implementation if it's present and isn't buggy. Object.assign = require('object-assign'); + +// In tests, polyfill requestAnimationFrame since jsdom doesn't provide it yet. +// We don't polyfill it in the browser--this is user's responsibility. +if (process.env.NODE_ENV === 'test') { + require('raf').polyfill(global); +} diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index 7238ab95695..3117a1cdf69 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -66,8 +66,6 @@ module.exports = { // changing JS code would still trigger a refresh. ], output: { - // Next line is not used in dev but WebpackDevServer crashes without it: - path: paths.appBuild, // Add /* filename */ comments to generated require()s in the output. pathinfo: true, // This does not produce a real file. It's just the virtual path that is @@ -98,7 +96,7 @@ module.exports = { // https://github.com/facebookincubator/create-react-app/issues/290 // `web` extension prefixes have been added for better support // for React Native Web. - extensions: ['.web.js', '.js', '.json', '.web.jsx', '.jsx'], + extensions: ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx'], alias: { // @remove-on-eject-begin // Resolve Babel runtime relative to react-scripts. @@ -132,7 +130,7 @@ module.exports = { // First, run the linter. // It's important to do this before Babel processes the JS. { - test: /\.(js|jsx)$/, + test: /\.(js|jsx|mjs)$/, enforce: 'pre', use: [ { @@ -170,7 +168,7 @@ module.exports = { }, // Process JS with Babel. { - test: /\.(js|jsx)$/, + test: /\.(js|jsx|mjs)$/, include: paths.appSrc, loader: require.resolve('babel-loader'), options: { diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index 124d5b3cbeb..c32eb0f08a7 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -96,7 +96,7 @@ module.exports = { // https://github.com/facebookincubator/create-react-app/issues/290 // `web` extension prefixes have been added for better support // for React Native Web. - extensions: ['.web.js', '.js', '.json', '.web.jsx', '.jsx'], + extensions: ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx'], alias: { // @remove-on-eject-begin // Resolve Babel runtime relative to react-scripts. @@ -130,7 +130,7 @@ module.exports = { // First, run the linter. // It's important to do this before Babel processes the JS. { - test: /\.(js|jsx)$/, + test: /\.(js|jsx|mjs)$/, enforce: 'pre', use: [ { @@ -169,7 +169,7 @@ module.exports = { }, // Process JS with Babel. { - test: /\.(js|jsx)$/, + test: /\.(js|jsx|mjs)$/, include: paths.appSrc, loader: require.resolve('babel-loader'), options: { @@ -299,6 +299,9 @@ module.exports = { // https://github.com/mishoo/UglifyJS2/issues/2011 comparisons: false, }, + mangle: { + safari10: true, + }, output: { comments: false, // Turned on because emoji and regex is not minified properly using default diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index f5007fbe635..8e24165e88d 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -1,6 +1,6 @@ { "name": "react-scripts", - "version": "1.0.14", + "version": "1.0.16", "description": "Configuration and scripts for Create React App.", "repository": "facebookincubator/create-react-app", "license": "MIT", @@ -21,45 +21,46 @@ "react-scripts": "./bin/react-scripts.js" }, "dependencies": { - "autoprefixer": "7.1.2", - "babel-core": "6.25.0", + "autoprefixer": "7.1.6", + "babel-core": "6.26.0", "babel-eslint": "7.2.3", "babel-jest": "20.0.3", - "babel-loader": "7.1.1", - "babel-preset-react-app": "^3.0.3", + "babel-loader": "7.1.2", + "babel-preset-react-app": "^3.1.0", "babel-runtime": "6.26.0", "case-sensitive-paths-webpack-plugin": "2.1.1", "chalk": "1.1.3", - "css-loader": "0.28.4", + "css-loader": "0.28.7", "dotenv": "4.0.0", - "eslint": "4.4.1", + "eslint": "4.10.0", "eslint-config-react-app": "^2.0.1", "eslint-loader": "1.9.0", - "eslint-plugin-flowtype": "2.35.0", - "eslint-plugin-import": "2.7.0", + "eslint-plugin-flowtype": "2.39.1", + "eslint-plugin-import": "2.8.0", "eslint-plugin-jsx-a11y": "5.1.1", - "eslint-plugin-react": "7.1.0", - "extract-text-webpack-plugin": "3.0.0", - "file-loader": "0.11.2", + "eslint-plugin-react": "7.4.0", + "extract-text-webpack-plugin": "3.0.2", + "file-loader": "1.1.5", "fs-extra": "3.0.1", "html-webpack-plugin": "2.29.0", "jest": "20.0.4", "object-assign": "4.1.1", "postcss-flexbugs-fixes": "3.2.0", - "postcss-loader": "2.0.6", + "postcss-loader": "2.0.8", "promise": "8.0.1", - "react-dev-utils": "^4.1.0", + "raf": "3.4.0", + "react-dev-utils": "^4.2.1", "style-loader": "0.19.0", "sw-precache-webpack-plugin": "0.11.4", "url-loader": "0.6.2", - "webpack": "3.5.1", - "webpack-dev-server": "2.8.2", - "webpack-manifest-plugin": "1.2.1", + "webpack": "3.8.1", + "webpack-dev-server": "2.9.3", + "webpack-manifest-plugin": "1.3.2", "whatwg-fetch": "2.0.3" }, "devDependencies": { - "react": "^15.5.4", - "react-dom": "^15.5.4" + "react": "^16.0.0", + "react-dom": "^16.0.0" }, "optionalDependencies": { "fsevents": "1.1.2" diff --git a/packages/react-scripts/scripts/utils/createJestConfig.js b/packages/react-scripts/scripts/utils/createJestConfig.js index 3e819b68e73..b4c2cfa5ea9 100644 --- a/packages/react-scripts/scripts/utils/createJestConfig.js +++ b/packages/react-scripts/scripts/utils/createJestConfig.js @@ -21,27 +21,37 @@ module.exports = (resolve, rootDir, isEjecting) => { // TODO: I don't know if it's safe or not to just use / as path separator // in Jest configs. We need help from somebody with Windows to determine this. const config = { - collectCoverageFrom: ['src/**/*.{js,jsx}'], + collectCoverageFrom: ['src/**/*.{js,jsx,mjs}'], setupFiles: [resolve('config/polyfills.js')], setupTestFrameworkScriptFile: setupTestsFile, testMatch: [ - '/src/**/__tests__/**/*.js?(x)', - '/src/**/?(*.)(spec|test).js?(x)', + '/src/**/__tests__/**/*.{js,jsx,mjs}', + '/src/**/?(*.)(spec|test).{js,jsx,mjs}', ], testEnvironment: 'node', testURL: 'http://localhost', transform: { - '^.+\\.(js|jsx)$': isEjecting + '^.+\\.(js|jsx|mjs)$': isEjecting ? '/node_modules/babel-jest' : resolve('config/jest/babelTransform.js'), '^.+\\.css$': resolve('config/jest/cssTransform.js'), - '^(?!.*\\.(js|jsx|css|json)$)': resolve('config/jest/fileTransform.js'), + '^(?!.*\\.(js|jsx|mjs|css|json)$)': resolve( + 'config/jest/fileTransform.js' + ), }, - transformIgnorePatterns: ['[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$'], + transformIgnorePatterns: ['[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$'], moduleNameMapper: { '^react-native$': 'react-native-web', }, - moduleFileExtensions: ['web.js', 'js', 'json', 'web.jsx', 'jsx', 'node'], + moduleFileExtensions: [ + 'web.js', + 'mjs', + 'js', + 'json', + 'web.jsx', + 'jsx', + 'node', + ], }; if (rootDir) { config.rootDir = rootDir; diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index a0cddfee64b..be57050eddd 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -599,7 +599,8 @@ Then we can change `start` and `build` scripts to include the CSS preprocessor c - "build": "react-scripts build", + "start-js": "react-scripts start", + "start": "npm-run-all -p watch-css start-js", -+ "build": "npm run build-css && react-scripts build", ++ "build-js": "react-scripts build", ++ "build": "npm-run-all build-css build-js", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" } @@ -1156,7 +1157,7 @@ If you use a Node server, you can even share the route matching logic between th ## Pre-Rendering into Static HTML Files -If you’re hosting your `build` with a static hosting provider you can use [react-snapshot](https://www.npmjs.com/package/react-snapshot) to generate HTML pages for each route, or relative link, in your application. These pages will then seamlessly become active, or “hydrated”, when the JavaScript bundle has loaded. +If you’re hosting your `build` with a static hosting provider you can use [react-snapshot](https://www.npmjs.com/package/react-snapshot) or [react-snap](https://github.com/stereobooster/react-snap) to generate HTML pages for each route, or relative link, in your application. These pages will then seamlessly become active, or “hydrated”, when the JavaScript bundle has loaded. There are also opportunities to use this outside of static hosting, to take the pressure off the server when generating and caching routes. @@ -1235,8 +1236,8 @@ it('sums numbers', () => { }); ``` -All `expect()` matchers supported by Jest are [extensively documented here](http://facebook.github.io/jest/docs/expect.html).
-You can also use [`jest.fn()` and `expect(fn).toBeCalled()`](http://facebook.github.io/jest/docs/expect.html#tohavebeencalled) to create “spies” or mock functions. +All `expect()` matchers supported by Jest are [extensively documented here](https://facebook.github.io/jest/docs/en/expect.html#content).
+You can also use [`jest.fn()` and `expect(fn).toBeCalled()`](https://facebook.github.io/jest/docs/en/expect.html#tohavebeencalled) to create “spies” or mock functions. ### Testing Components @@ -1262,16 +1263,28 @@ When you encounter bugs caused by changing components, you will gain a deeper in If you’d like to test components in isolation from the child components they render, we recommend using [`shallow()` rendering API](http://airbnb.io/enzyme/docs/api/shallow.html) from [Enzyme](http://airbnb.io/enzyme/). To install it, run: ```sh -npm install --save enzyme react-test-renderer +npm install --save enzyme enzyme-adapter-react-16 react-test-renderer ``` Alternatively you may use `yarn`: ```sh -yarn add enzyme react-test-renderer +yarn add enzyme enzyme-adapter-react-16 react-test-renderer ``` -You can write a smoke test with it too: +As of Enzyme 3, you will need to install Enzyme along with an Adapter corresponding to the version of React you are using. (The examples above use the adapter for React 16.) + +The adapter will also need to be configured in your [global setup file](#initializing-test-environment): + +#### `src/setupTests.js` +```js +import { configure } from 'enzyme'; +import Adapter from 'enzyme-adapter-react-16'; + +configure({ adapter: new Adapter() }); +``` + +Now you can write a smoke test with it: ```js import React from 'react'; @@ -1302,7 +1315,7 @@ it('renders welcome message', () => { }); ``` -All Jest matchers are [extensively documented here](http://facebook.github.io/jest/docs/expect.html).
+All Jest matchers are [extensively documented here](http://facebook.github.io/jest/docs/en/expect.html).
Nevertheless you can use a third-party assertion library like [Chai](http://chaijs.com/) if you want to, as described below. Additionally, you might find [jest-enzyme](https://github.com/blainekasten/enzyme-matchers) helpful to simplify your tests with readable matchers. The above `contains` code can be written simpler with jest-enzyme. @@ -1374,6 +1387,41 @@ Run `npm test -- --coverage` (note extra `--` in the middle) to include a covera Note that tests run much slower with coverage so it is recommended to run it separately from your normal workflow. +#### Configuration + +The default Jest coverage configuration can be overriden by adding any of the following supported keys to a Jest config in your package.json. + +Supported overrides: + - [`collectCoverageFrom`](https://facebook.github.io/jest/docs/en/configuration.html#collectcoveragefrom-array) + - [`coverageReporters`](https://facebook.github.io/jest/docs/en/configuration.html#coveragereporters-array-string) + - [`coverageThreshold`](https://facebook.github.io/jest/docs/en/configuration.html#coveragethreshold-object) + - [`snapshotSerializers`](https://facebook.github.io/jest/docs/en/configuration.html#snapshotserializers-array-string) + +Example package.json: + +```json +{ + "name": "your-package", + "jest": { + "collectCoverageFrom" : [ + "src/**/*.{js,jsx}", + "!/node_modules/", + "!/path/to/dir/" + ], + "coverageThreshold": { + "global": { + "branches": 90, + "functions": 90, + "lines": 90, + "statements": 90 + } + }, + "coverageReporters": ["text"], + "snapshotSerializers": ["my-serializer-module"] + } +} +``` + ### Continuous Integration By default `npm test` runs the watcher with interactive CLI. However, you can force it to run tests once and finish the process by setting an environment variable called `CI`. @@ -1581,14 +1629,18 @@ that your web app is reliably fast, even on a slow or unreliable network. ### Opting Out of Caching If you would prefer not to enable service workers prior to your initial -production deployment, then remove the call to `serviceWorkerRegistration.register()` +production deployment, then remove the call to `registerServiceWorker()` from [`src/index.js`](src/index.js). If you had previously enabled service workers in your production deployment and have decided that you would like to disable them for all your existing users, -you can swap out the call to `serviceWorkerRegistration.register()` in -[`src/index.js`](src/index.js) with a call to `serviceWorkerRegistration.unregister()`. -After the user visits a page that has `serviceWorkerRegistration.unregister()`, +you can swap out the call to `registerServiceWorker()` in +[`src/index.js`](src/index.js) first by modifying the service worker import: +```javascript +import { unregister } from './registerServiceWorker'; +``` +and then call `unregister()` instead. +After the user visits a page that has `unregister()`, the service worker will be uninstalled. Note that depending on how `/service-worker.js` is served, it may take up to 24 hours for the cache to be invalidated. @@ -1784,6 +1836,12 @@ service worker navigation routing can be configured or disabled by and [`navigateFallbackWhitelist`](https://github.com/GoogleChrome/sw-precache#navigatefallbackwhitelist-arrayregexp) options of the `SWPreachePlugin` [configuration](../config/webpack.config.prod.js). +When users install your app to the homescreen of their device the default configuration will make a shortcut to `/index.html`. This may not work for client-side routers which expect the app to be served from `/`. Edit the web app manifest at [`public/manifest.json`](public/manifest.json) and change `start_url` to match the required URL scheme, for example: + +```js + "start_url": ".", +``` + ### Building for Relative Paths By default, Create React App produces a build assuming your app is hosted at the server root.
@@ -2158,14 +2216,20 @@ This will only work for locales that have been explicitly imported before. ### `npm run build` fails to minify -You may occasionally find a package you depend on needs compiled or ships code for a non-browser environment.
-This is considered poor practice in the ecosystem and does not have an escape hatch in Create React App.
+Some third-party packages don't compile their code to ES5 before publishing to npm. This often causes problems in the ecosystem because neither browsers (except for most modern versions) nor some tools currently support all ES6 features. We recommend to publish code on npm as ES5 at least for a few more years. +
To resolve this: -1. Open an issue on the dependency's issue tracker and ask that the package be published pre-compiled (retaining ES6 Modules). -2. Fork the package and publish a corrected version yourself. + +1. Open an issue on the dependency's issue tracker and ask that the package be published pre-compiled. + * Note: Create React App can consume both CommonJS and ES modules. For Node.js compatibility, it is recommended that the main entry point is CommonJS. However, they can optionally provide an ES module entry point with the `module` field in `package.json`. Note that **even if a library provides an ES Modules version, it should still precompile other ES6 features to ES5 if it intends to support older browsers**. + +2. Fork the package and publish a corrected version yourself. + 3. If the dependency is small enough, copy it to your `src/` folder and treat it as application code. +In the future, we might start automatically compiling incompatible third-party modules, but it is not currently supported. This approach would also slow down the production builds. + ## Something Missing? If you have ideas for more “How To” recipes that should be on this page, [let us know](https://github.com/facebookincubator/create-react-app/issues) or [contribute some!](https://github.com/facebookincubator/create-react-app/edit/master/packages/react-scripts/template/README.md) diff --git a/packages/react-scripts/template/public/manifest.json b/packages/react-scripts/template/public/manifest.json index be607e41771..ef19ec243e7 100644 --- a/packages/react-scripts/template/public/manifest.json +++ b/packages/react-scripts/template/public/manifest.json @@ -4,8 +4,8 @@ "icons": [ { "src": "favicon.ico", - "sizes": "192x192", - "type": "image/png" + "sizes": "64x64 32x32 24x24 16x16", + "type": "image/x-icon" } ], "start_url": "./index.html", diff --git a/packages/react-scripts/template/src/registerServiceWorker.js b/packages/react-scripts/template/src/registerServiceWorker.js index 4a3ccf02124..12542ba2295 100644 --- a/packages/react-scripts/template/src/registerServiceWorker.js +++ b/packages/react-scripts/template/src/registerServiceWorker.js @@ -32,12 +32,12 @@ export default function register() { window.addEventListener('load', () => { const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; - if (!isLocalhost) { - // Is not local host. Just register service worker - registerValidSW(swUrl); - } else { + if (isLocalhost) { // This is running on localhost. Lets check if a service worker still exists or not. checkValidServiceWorker(swUrl); + } else { + // Is not local host. Just register service worker + registerValidSW(swUrl); } }); } diff --git a/tasks/e2e-kitchensink.sh b/tasks/e2e-kitchensink.sh index 3d29e8a6f3c..c1167c1dedf 100755 --- a/tasks/e2e-kitchensink.sh +++ b/tasks/e2e-kitchensink.sh @@ -44,6 +44,31 @@ function create_react_app { node "$temp_cli_path"/node_modules/create-react-app/index.js "$@" } +function install_package { + local pkg=$(basename $1) + + # Clean target (for safety) + rm -rf node_modules/$pkg/ + rm -rf node_modules/**/$pkg/ + + # Copy package into node_modules/ ignoring installed deps + # rsync -a ${1%/} node_modules/ --exclude node_modules + cp -R ${1%/} node_modules/ + rm -rf node_modules/$pkg/node_modules/ + + # Install `dependencies` + cd node_modules/$pkg/ + if [ "$USE_YARN" = "yes" ] + then + yarn install --production + else + npm install --only=production + fi + # Remove our packages to ensure side-by-side versions are used (which we link) + rm -rf node_modules/{babel-preset-react-app,eslint-config-react-app,react-dev-utils,react-error-overlay,react-scripts} + cd ../.. +} + # Check for the existence of one or more files. function exists { for f in $*; do @@ -162,13 +187,13 @@ npm install test-integrity@^2.0.1 cd "$temp_app_path/test-kitchensink" # Link to our preset -npm link "$root_path"/packages/babel-preset-react-app +install_package "$root_path"/packages/babel-preset-react-app # Link to error overlay package because now it's a dependency # of react-dev-utils and not react-scripts -npm link "$root_path"/packages/react-error-overlay +install_package "$root_path"/packages/react-error-overlay # Link to test module -npm link "$temp_module_path/node_modules/test-integrity" +install_package "$temp_module_path/node_modules/test-integrity" # Test the build REACT_APP_SHELL_ENV_MESSAGE=fromtheshell \ @@ -219,23 +244,25 @@ E2E_FILE=./build/index.html \ # Finally, let's check that everything still works after ejecting. # ****************************************************************************** -# Unlink our preset -npm unlink "$root_path"/packages/babel-preset-react-app -# Unlink error overlay -npm unlink "$root_path"/packages/react-error-overlay - # Eject... echo yes | npm run eject +# Ensure Yarn is ran after eject; at the time of this commit, we don't run Yarn +# after ejecting. Soon, we may only skip Yarn on Windows. Let's try to remove +# this in the near future. +if hash yarnpkg 2>/dev/null +then + yarn install --check-files +fi + # ...but still link to the local packages -npm link "$root_path"/packages/babel-preset-react-app -npm link "$root_path"/packages/eslint-config-react-app -npm link "$root_path"/packages/react-error-overlay -npm link "$root_path"/packages/react-dev-utils -npm link "$root_path"/packages/react-scripts +install_package "$root_path"/packages/babel-preset-react-app +install_package "$root_path"/packages/eslint-config-react-app +install_package "$root_path"/packages/react-error-overlay +install_package "$root_path"/packages/react-dev-utils # Link to test module -npm link "$temp_module_path/node_modules/test-integrity" +install_package "$temp_module_path/node_modules/test-integrity" # Test the build REACT_APP_SHELL_ENV_MESSAGE=fromtheshell \ diff --git a/tasks/e2e-simple.sh b/tasks/e2e-simple.sh index 2c9709546a0..867b6dc9503 100755 --- a/tasks/e2e-simple.sh +++ b/tasks/e2e-simple.sh @@ -43,6 +43,31 @@ function create_react_app { node "$temp_cli_path"/node_modules/create-react-app/index.js "$@" } +function install_package { + local pkg=$(basename $1) + + # Clean target (for safety) + rm -rf node_modules/$pkg/ + rm -rf node_modules/**/$pkg/ + + # Copy package into node_modules/ ignoring installed deps + # rsync -a ${1%/} node_modules/ --exclude node_modules + cp -R ${1%/} node_modules/ + rm -rf node_modules/$pkg/node_modules/ + + # Install `dependencies` + cd node_modules/$pkg/ + if [ "$USE_YARN" = "yes" ] + then + yarn install --production + else + npm install --only=production + fi + # Remove our packages to ensure side-by-side versions are used (which we link) + rm -rf node_modules/{babel-preset-react-app,eslint-config-react-app,react-dev-utils,react-error-overlay,react-scripts} + cd ../.. +} + # Check for the existence of one or more files. function exists { for f in $*; do @@ -306,11 +331,18 @@ verify_module_scope # Eject... echo yes | npm run eject +# Ensure Yarn is ran after eject; at the time of this commit, we don't run Yarn +# after ejecting. Soon, we may only skip Yarn on Windows. Let's try to remove +# this in the near future. +if hash yarnpkg 2>/dev/null +then + yarnpkg install --check-files +fi + # ...but still link to the local packages -npm link "$root_path"/packages/babel-preset-react-app -npm link "$root_path"/packages/eslint-config-react-app -npm link "$root_path"/packages/react-dev-utils -npm link "$root_path"/packages/react-scripts +install_package "$root_path"/packages/babel-preset-react-app +install_package "$root_path"/packages/eslint-config-react-app +install_package "$root_path"/packages/react-dev-utils # Test the build npm run build