From 1922f4d4d8cf54c20237d38691cd5bee154f032e Mon Sep 17 00:00:00 2001 From: froyog Date: Fri, 23 Mar 2018 20:28:41 +0800 Subject: [PATCH 01/35] Allow ModuleScopePlugin accecpts an array as its appSrc (#4138) * allow appSrc accepting an array * fixture of finding all appSrcs logic * update docs on ModuleScopePlugin accepts an array for appSrc * minor typo fix in docs: change directory to directories. --- packages/react-dev-utils/ModuleScopePlugin.js | 26 ++++++++++++------- packages/react-dev-utils/README.md | 4 +-- 2 files changed, 19 insertions(+), 11 deletions(-) diff --git a/packages/react-dev-utils/ModuleScopePlugin.js b/packages/react-dev-utils/ModuleScopePlugin.js index 101a30a1fb9..695426331b9 100644 --- a/packages/react-dev-utils/ModuleScopePlugin.js +++ b/packages/react-dev-utils/ModuleScopePlugin.js @@ -12,12 +12,12 @@ const path = require('path'); class ModuleScopePlugin { constructor(appSrc, allowedFiles = []) { - this.appSrc = appSrc; + this.appSrcs = Array.isArray(appSrc) ? appSrc : [appSrc]; this.allowedFiles = new Set(allowedFiles); } apply(resolver) { - const { appSrc } = this; + const { appSrcs } = this; resolver.plugin('file', (request, callback) => { // Unknown issuer, probably webpack internals if (!request.context.issuer) { @@ -34,9 +34,13 @@ class ModuleScopePlugin { } // Resolve the issuer from our appSrc and make sure it's one of our files // Maybe an indexOf === 0 would be better? - const relative = path.relative(appSrc, request.context.issuer); - // If it's not in src/ or a subdirectory, not our request! - if (relative.startsWith('../') || relative.startsWith('..\\')) { + if ( + appSrcs.every(appSrc => { + const relative = path.relative(appSrc, request.context.issuer); + // If it's not in one of our app src or a subdirectory, not our request! + return relative.startsWith('../') || relative.startsWith('..\\'); + }) + ) { return callback(); } const requestFullPath = path.resolve( @@ -47,11 +51,15 @@ class ModuleScopePlugin { return callback(); } // Find path from src to the requested file - // Error if in a parent directory of src/ - const requestRelative = path.relative(appSrc, requestFullPath); + // Error if in a parent directory of all given appSrcs if ( - requestRelative.startsWith('../') || - requestRelative.startsWith('..\\') + appSrcs.every(appSrc => { + const requestRelative = path.relative(appSrc, requestFullPath); + return ( + requestRelative.startsWith('../') || + requestRelative.startsWith('..\\') + ); + }) ) { callback( new Error( diff --git a/packages/react-dev-utils/README.md b/packages/react-dev-utils/README.md index 5279ade8f41..42e12c2f91d 100644 --- a/packages/react-dev-utils/README.md +++ b/packages/react-dev-utils/README.md @@ -57,9 +57,9 @@ module.exports = { ``` -#### `new ModuleScopePlugin(appSrc: string, allowedFiles?: string[])` +#### `new ModuleScopePlugin(appSrc: string | string[], allowedFiles?: string[])` -This Webpack plugin ensures that relative imports from app's source directory don't reach outside of it. +This Webpack plugin ensures that relative imports from app's source directories don't reach outside of it. ```js var path = require('path'); From 33f1294f07a884ca2628fb6d8dc648bd18b25fbe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andreas=20Cederstr=C3=B6m?= Date: Fri, 23 Mar 2018 14:41:28 +0100 Subject: [PATCH 02/35] Revert "Change no-unused-vars 'args' from none to all to show warning on destructured objects" This reverts commit 1dcb3db3edb809e64208c0540a7de0d41fc9f6ce. --- packages/eslint-config-react-app/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/eslint-config-react-app/index.js b/packages/eslint-config-react-app/index.js index 8527793542c..54dfe334733 100644 --- a/packages/eslint-config-react-app/index.js +++ b/packages/eslint-config-react-app/index.js @@ -131,7 +131,7 @@ module.exports = { 'no-unused-vars': [ 'warn', { - args: 'all', + args: 'none', ignoreRestSiblings: true, }, ], From 8a34b7cc77099c7f591d64726a8106c02104f8f8 Mon Sep 17 00:00:00 2001 From: Ian Sutherland Date: Sun, 25 Mar 2018 16:17:41 -0600 Subject: [PATCH 03/35] Add ESLint check for incorrect propTypes usage (#3840) (#4048) --- packages/eslint-config-react-app/index.js | 1 + packages/eslint-config-react-app/package.json | 2 +- packages/react-error-overlay/package.json | 2 +- packages/react-scripts/package.json | 2 +- 4 files changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/eslint-config-react-app/index.js b/packages/eslint-config-react-app/index.js index 54dfe334733..7d2e716956a 100644 --- a/packages/eslint-config-react-app/index.js +++ b/packages/eslint-config-react-app/index.js @@ -186,6 +186,7 @@ module.exports = { 'import/no-webpack-loader-syntax': 'error', // https://github.com/yannickcr/eslint-plugin-react/tree/master/docs/rules + 'react/forbid-foreign-prop-types': ['warn', { allowInPropTypes: true }], 'react/jsx-no-comment-textnodes': 'warn', 'react/jsx-no-duplicate-props': ['warn', { ignoreCase: true }], 'react/jsx-no-target-blank': 'warn', diff --git a/packages/eslint-config-react-app/package.json b/packages/eslint-config-react-app/package.json index 45dfc42e76e..c4b51925e69 100644 --- a/packages/eslint-config-react-app/package.json +++ b/packages/eslint-config-react-app/package.json @@ -16,7 +16,7 @@ "eslint-plugin-flowtype": "^2.34.1", "eslint-plugin-import": "^2.6.0", "eslint-plugin-jsx-a11y": "^6.0.2", - "eslint-plugin-react": "^7.1.0" + "eslint-plugin-react": "^7.7.0" }, "dependencies": { "confusing-browser-globals": "^1.0.0" diff --git a/packages/react-error-overlay/package.json b/packages/react-error-overlay/package.json index 282cca890d0..cdaffae49d3 100644 --- a/packages/react-error-overlay/package.json +++ b/packages/react-error-overlay/package.json @@ -47,7 +47,7 @@ "eslint-plugin-flowtype": "2.41.0", "eslint-plugin-import": "2.8.0", "eslint-plugin-jsx-a11y": "6.0.3", - "eslint-plugin-react": "7.5.1", + "eslint-plugin-react": "7.7.0", "flow-bin": "^0.63.1", "html-entities": "1.2.1", "jest": "22.1.2", diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 69bc74f2862..31b417c8328 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -41,7 +41,7 @@ "eslint-plugin-flowtype": "2.41.0", "eslint-plugin-import": "2.8.0", "eslint-plugin-jsx-a11y": "6.0.3", - "eslint-plugin-react": "7.5.1", + "eslint-plugin-react": "7.7.0", "extract-text-webpack-plugin": "3.0.2", "file-loader": "1.1.6", "fs-extra": "5.0.0", From 8db5e336b14bf9c61bd34901ce52d2c0963ea439 Mon Sep 17 00:00:00 2001 From: Minh Nguyen Date: Mon, 26 Mar 2018 01:03:23 +0100 Subject: [PATCH 04/35] Revert lint-related changes made in #4193 (#4211) --- packages/react-error-overlay/src/effects/proxyConsole.js | 2 +- packages/react-error-overlay/src/utils/getStackFrames.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-error-overlay/src/effects/proxyConsole.js b/packages/react-error-overlay/src/effects/proxyConsole.js index a1e8373a1bb..db270e9ddef 100644 --- a/packages/react-error-overlay/src/effects/proxyConsole.js +++ b/packages/react-error-overlay/src/effects/proxyConsole.js @@ -28,7 +28,7 @@ const registerReactStack = () => { // $FlowFixMe console.reactStack = frames => reactFrameStack.push(frames); // $FlowFixMe - console.reactStackEnd = () => reactFrameStack.pop(); + console.reactStackEnd = frames => reactFrameStack.pop(); } }; diff --git a/packages/react-error-overlay/src/utils/getStackFrames.js b/packages/react-error-overlay/src/utils/getStackFrames.js index b01c6ebaee5..9721e316c52 100644 --- a/packages/react-error-overlay/src/utils/getStackFrames.js +++ b/packages/react-error-overlay/src/utils/getStackFrames.js @@ -13,7 +13,7 @@ import { unmap } from './unmapper'; function getStackFrames( error: Error, - unhandledRejection: boolean = false, // eslint-disable-line + unhandledRejection: boolean = false, contextSize: number = 3 ): Promise { const parsedFrames = parse(error); From 06dd17e21bcbe65578013b3b6bc990ba0ff3f6ec Mon Sep 17 00:00:00 2001 From: Albert Still Date: Mon, 26 Mar 2018 12:08:16 +1100 Subject: [PATCH 05/35] add `create-react-app --help` info for local file path `--scripts-version` support (#4015) * add `create-react-app --help` info for local file path --scripts-version * make example path `../my-react-scripts` for local file path --help info --- packages/create-react-app/createReactApp.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/create-react-app/createReactApp.js b/packages/create-react-app/createReactApp.js index 1bf3bb0649d..cbe9699e2c3 100755 --- a/packages/create-react-app/createReactApp.js +++ b/packages/create-react-app/createReactApp.js @@ -89,6 +89,11 @@ const program = new commander.Command(packageJson.name) 'my-react-scripts' )}` ); + console.log( + ` - a local path relative to the current working directory: ${chalk.green( + 'file:../my-react-scripts' + )}` + ); console.log( ` - a .tgz archive: ${chalk.green( 'https://mysite.com/my-react-scripts-0.8.2.tgz' From 9c167a42490d134832e6e1b721292ea99eaf8ca5 Mon Sep 17 00:00:00 2001 From: bradfordlemley Date: Sun, 25 Mar 2018 19:14:59 -0600 Subject: [PATCH 06/35] Add some stuff that requires transpilation. (#4174) --- .../fixtures/monorepos/packages/comp1/index.js | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/packages/react-scripts/fixtures/monorepos/packages/comp1/index.js b/packages/react-scripts/fixtures/monorepos/packages/comp1/index.js index f3cb7964952..104989fe35a 100644 --- a/packages/react-scripts/fixtures/monorepos/packages/comp1/index.js +++ b/packages/react-scripts/fixtures/monorepos/packages/comp1/index.js @@ -1,5 +1,21 @@ import React from 'react'; -const Comp1 = () =>
Comp1
; +class Comp1 extends React.Component { + static parts = { + greeting: 'hello', + region: 'world', + }; + + render() { + const { greeting, region } = Comp1.parts; + + return ( +
+ Comp1 + {greeting} {region} +
+ ); + } +} export default Comp1; From da518d2238298dd5db74e9c63c12251099f87bb0 Mon Sep 17 00:00:00 2001 From: Jih-Chi Lee Date: Tue, 27 Mar 2018 11:03:39 +0800 Subject: [PATCH 07/35] Fix floating caret position incorrect while scrolling overlay (#4024) --- packages/react-error-overlay/src/components/CodeBlock.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react-error-overlay/src/components/CodeBlock.js b/packages/react-error-overlay/src/components/CodeBlock.js index 3165bb3b028..f2bda36342b 100644 --- a/packages/react-error-overlay/src/components/CodeBlock.js +++ b/packages/react-error-overlay/src/components/CodeBlock.js @@ -10,6 +10,7 @@ import React from 'react'; import { redTransparent, yellowTransparent } from '../styles'; const _preStyle = { + position: 'relative', display: 'block', padding: '0.5em', marginTop: '0.5em', From 2824bf2e155ab5809ed4018ca8e6175e32d60167 Mon Sep 17 00:00:00 2001 From: Daniel Date: Mon, 2 Apr 2018 19:30:30 +0200 Subject: [PATCH 08/35] [next] Revert to use ecma 5 in uglifyOptions (#4234) * Revert to use ecma 5 in uglifyOptions * remove explicit ecma version from uglifyOptions settings The defaults are already what we want * be explicit of where we use ecma: 8 and ecma: 5 --- packages/react-scripts/config/webpack.config.prod.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index d631fc32a3b..e76f67d60d2 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -378,8 +378,15 @@ module.exports = { // Minify the code. new UglifyJsPlugin({ uglifyOptions: { - ecma: 8, + parse: { + // we want uglify-js to parse ecma 8 code. However we want it to output + // ecma 5 compliant code, to avoid issues with older browsers, this is + // whey we put `ecma: 5` to the compress and output section + // https://github.com/facebook/create-react-app/pull/4234 + ecma: 8, + }, compress: { + ecma: 5, warnings: false, // Disabled because of an issue with Uglify breaking seemingly valid code: // https://github.com/facebook/create-react-app/issues/2376 @@ -391,6 +398,7 @@ module.exports = { safari10: true, }, output: { + ecma: 5, comments: false, // Turned on because emoji and regex is not minified properly using default // https://github.com/facebook/create-react-app/issues/2488 From 9a99b5d190c70006f61b6bb86d8e16cdb22be8f5 Mon Sep 17 00:00:00 2001 From: Daniel Date: Mon, 2 Apr 2018 21:17:24 +0200 Subject: [PATCH 09/35] Fix typo and be clearer about `ecma` settings in uglifyjs options (#4239) --- packages/react-scripts/config/webpack.config.prod.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index e76f67d60d2..b3c4a602cd4 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -379,9 +379,10 @@ module.exports = { new UglifyJsPlugin({ uglifyOptions: { parse: { - // we want uglify-js to parse ecma 8 code. However we want it to output - // ecma 5 compliant code, to avoid issues with older browsers, this is - // whey we put `ecma: 5` to the compress and output section + // we want uglify-js to parse ecma 8 code. However, we don't want it + // to apply any minfication steps that turns valid ecma 5 code + // into invalid ecma 5 code. This is why the 'compress' and 'output' + // sections only apply transformations that are ecma 5 safe // https://github.com/facebook/create-react-app/pull/4234 ecma: 8, }, From 9c3f03cac78c7ba27178324e8c3d5e956c33f27e Mon Sep 17 00:00:00 2001 From: Plortinus Date: Tue, 3 Apr 2018 03:19:28 +0800 Subject: [PATCH 10/35] use the lastest url of gitignore file (#4236) * use the lastest url of gitignore file * Update gitignore --- packages/react-scripts/template/gitignore | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/template/gitignore b/packages/react-scripts/template/gitignore index d30f40ef442..f4917854e95 100644 --- a/packages/react-scripts/template/gitignore +++ b/packages/react-scripts/template/gitignore @@ -1,4 +1,4 @@ -# See https://help.github.com/ignore-files/ for more about ignoring files. +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies /node_modules From 061d1e46fcd4766d38b45499c3d29cfaa2b7d0af Mon Sep 17 00:00:00 2001 From: Vicente Plata Date: Fri, 23 Mar 2018 03:07:25 -0700 Subject: [PATCH 11/35] Add troubleshooting for Github Pages (#4197) Add troubleshooting for an issue that has to do with either 2FA, or using Windows, or both, when trying to deploy an app via gh-pages --- packages/react-scripts/template/README.md | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index f2efdd83c93..5f00b482f59 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -2387,6 +2387,16 @@ GitHub Pages doesn’t support routers that use the HTML5 `pushState` history AP * You could switch from using HTML5 history API to routing with hashes. If you use React Router, you can switch to `hashHistory` for this effect, but the URL will be longer and more verbose (for example, `http://user.github.io/todomvc/#/todos/42?_k=yknaj`). [Read more](https://reacttraining.com/react-router/web/api/Router) about different history implementations in React Router. * Alternatively, you can use a trick to teach GitHub Pages to handle 404 by redirecting to your `index.html` page with a special redirect parameter. You would need to add a `404.html` file with the redirection code to the `build` folder before deploying your project, and you’ll need to add code handling the redirect parameter to `index.html`. You can find a detailed explanation of this technique [in this guide](https://github.com/rafrex/spa-github-pages). +#### Troubleshooting + +##### "/dev/tty: No such a device or address" + +If, when deploying, you get `/dev/tty: No such a device or address` or a similar error, try the follwing: + +1. Create a new [Personal Access Token](https://github.com/settings/tokens) +2. `git remote set-url origin https://:@github.com//` . +3. Try `npm run deploy again` + ### [Heroku](https://www.heroku.com/) Use the [Heroku Buildpack for Create React App](https://github.com/mars/create-react-app-buildpack).
From 2e690e98fc960cf3d36773e42222fcb95292c643 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Tue, 3 Apr 2018 00:48:07 +0100 Subject: [PATCH 12/35] Add 1.1.2 changelog (#4242) --- CHANGELOG.md | 32 ++++++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 796c6a1e56e..a5650277358 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,35 @@ +## 1.1.2 (April 3, 2018) + +#### :bug: Bug Fix + +* `react-scripts` + + * [#4085](https://github.com/facebook/create-react-app/pull/4085) Resolve `.js` before `.mjs` files to unbreak dependencies with native ESM support. ([@leebyron](https://github.com/leebyron)) + +#### :memo: Documentation + +* `react-scripts` + + * [#4197](https://github.com/facebook/create-react-app/pull/4197) Add troubleshooting for Github Pages. ([@xnt](https://github.com/xnt)) + +#### Committers: 2 +- Lee Byron ([leebyron](https://github.com/leebyron)) +- Vicente Plata ([xnt](https://github.com/xnt)) + +### Migrating from 1.1.1 to 1.1.2 + +Inside any created project that has not been ejected, run: + +``` +npm install --save --save-exact react-scripts@1.1.2 +``` + +or + +``` +yarn add --exact react-scripts@1.1.2 +``` + ## 1.1.1 (February 2, 2018) #### :bug: Bug Fix From 3b102fe1b9b45e9fa88ef5435c76908d5c6c604e Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Tue, 3 Apr 2018 18:03:08 +0100 Subject: [PATCH 13/35] Work around Jest environment resolving bug (#4247) --- packages/react-scripts/package.json | 1 + packages/react-scripts/scripts/test.js | 56 +++++++++++++++++++++++++- 2 files changed, 56 insertions(+), 1 deletion(-) diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 31b417c8328..dc47634bdc0 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -56,6 +56,7 @@ "promise": "8.0.1", "raf": "3.4.0", "react-dev-utils": "^5.0.0", + "resolve": "1.6.0", "style-loader": "0.19.1", "svgr": "1.8.1", "sw-precache-webpack-plugin": "0.11.4", diff --git a/packages/react-scripts/scripts/test.js b/packages/react-scripts/scripts/test.js index 7d2acf77ea2..b77db920625 100644 --- a/packages/react-scripts/scripts/test.js +++ b/packages/react-scripts/scripts/test.js @@ -31,7 +31,7 @@ if (process.env.SKIP_PREFLIGHT_CHECK !== 'true') { // @remove-on-eject-end const jest = require('jest'); -const argv = process.argv.slice(2); +let argv = process.argv.slice(2); // Watch unless on CI, in coverage mode, or explicitly running all tests if ( @@ -57,5 +57,59 @@ argv.push( ) ) ); + +// This is a very dirty workaround for https://github.com/facebook/jest/issues/5913. +// We're trying to resolve the environment ourselves because Jest does it incorrectly. +// TODO: remove this (and the `resolve` dependency) as soon as it's fixed in Jest. +const resolve = require('resolve'); +function resolveJestDefaultEnvironment(name) { + const jestDir = path.dirname( + resolve.sync('jest', { + basedir: __dirname, + }) + ); + const jestCLIDir = path.dirname( + resolve.sync('jest-cli', { + basedir: jestDir, + }) + ); + const jestConfigDir = path.dirname( + resolve.sync('jest-config', { + basedir: jestCLIDir, + }) + ); + return resolve.sync(name, { + basedir: jestConfigDir, + }); +} +let cleanArgv = []; +let env = 'node'; +let next; +do { + next = argv.shift(); + if (next === '--env') { + env = argv.shift(); + } else if (next.indexOf('--env=') === 0) { + env = next.substring('--env='.length); + } else { + cleanArgv.push(next); + } +} while (argv.length > 0); +argv = cleanArgv; +let resolvedEnv; +try { + resolvedEnv = resolveJestDefaultEnvironment(`jest-environment-${env}`); +} catch (e) { + // ignore +} +if (!resolvedEnv) { + try { + resolvedEnv = resolveJestDefaultEnvironment(env); + } catch (e) { + // ignore + } +} +const testEnvironment = resolvedEnv || env; +argv.push('--env', testEnvironment); // @remove-on-eject-end jest.run(argv); From 90c908e39707d5dc4bf5facdf59bbf755d051f10 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Tue, 3 Apr 2018 18:30:23 +0100 Subject: [PATCH 14/35] Changelog for 1.1.3 --- CHANGELOG.md | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index a5650277358..946c6cda1a1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,28 @@ +## 1.1.3 (April 3, 2018) + +#### :bug: Bug Fix + +* `react-scripts` + + * [#4247](https://github.com/facebook/create-react-app/pull/4247) Fix `environment.dispose is not a function` error caused by a Jest bug. ([@gaearon](https://github.com/gaearon)) + +#### Committers: 1 +- Dan Abramov ([gaearon](https://github.com/gaearon)) + +### Migrating from 1.1.2 to 1.1.3 + +Inside any created project that has not been ejected, run: + +``` +npm install --save --save-exact react-scripts@1.1.3 +``` + +or + +``` +yarn add --exact react-scripts@1.1.3 +``` + ## 1.1.2 (April 3, 2018) #### :bug: Bug Fix From 27629245fb9466dea0b486169c48faabaeffd392 Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Tue, 3 Apr 2018 19:59:36 -0400 Subject: [PATCH 15/35] Update detect-port-alt --- 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 39890f6bdf9..25690e95d0b 100644 --- a/packages/react-dev-utils/package.json +++ b/packages/react-dev-utils/package.json @@ -42,7 +42,7 @@ "browserslist": "2.11.3", "chalk": "2.3.0", "cross-spawn": "5.1.0", - "detect-port-alt": "1.1.5", + "detect-port-alt": "1.1.6", "escape-string-regexp": "1.0.5", "filesize": "3.5.11", "find-pkg": "1.0.0", From 6bf77205eaca0325f1d2b26532e3cbc231d32bda Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Tue, 3 Apr 2018 20:27:05 -0400 Subject: [PATCH 16/35] Changelog for 1.1.4 --- CHANGELOG.md | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 946c6cda1a1..9c63d42f570 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,28 @@ +## 1.1.4 (April 3, 2018) + +#### :bug: Bug Fix + +* `react-dev-utils` + + * [#4250](https://github.com/facebook/create-react-app/pull/4250) Upgrade `detect-port-alt` to fix [#4189](https://github.com/facebook/create-react-app/issues/4189). ([@Timer](https://github.com/Timer)) + +#### Committers: 1 +- Joe Haddad ([Timer](https://github.com/Timer)) + +### Migrating from 1.1.3 to 1.1.4 + +Inside any created project that has not been ejected, run: + +``` +npm install --save --save-exact react-scripts@1.1.4 +``` + +or + +``` +yarn add --exact react-scripts@1.1.4 +``` + ## 1.1.3 (April 3, 2018) #### :bug: Bug Fix From 79661396359de40742792d413269a65d01e86661 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andreas=20Cederstr=C3=B6m?= Date: Wed, 4 Apr 2018 08:46:15 +0200 Subject: [PATCH 17/35] Small typo fix #4217 --- packages/react-scripts/template/src/serviceWorker.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/template/src/serviceWorker.js b/packages/react-scripts/template/src/serviceWorker.js index a932f3c7da0..8859a0c6b20 100644 --- a/packages/react-scripts/template/src/serviceWorker.js +++ b/packages/react-scripts/template/src/serviceWorker.js @@ -33,7 +33,7 @@ export function register(config) { const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; if (isLocalhost) { - // This is running on localhost. Lets check if a service worker still exists or not. + // This is running on localhost. Let's check if a service worker still exists or not. checkValidServiceWorker(swUrl, config); // Add some additional logging to localhost, pointing developers to the From 06176e1ea4de222039164e19b7f1546a20c6060f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andreas=20Cederstr=C3=B6m?= Date: Thu, 5 Apr 2018 07:28:30 +0200 Subject: [PATCH 18/35] bump babel 7 beta (#4253) --- .../package.json | 2 +- packages/babel-preset-react-app/package.json | 26 +++++++++---------- packages/react-dev-utils/package.json | 2 +- packages/react-error-overlay/package.json | 6 ++--- packages/react-scripts/package.json | 4 +-- 5 files changed, 20 insertions(+), 20 deletions(-) diff --git a/packages/babel-plugin-named-asset-import/package.json b/packages/babel-plugin-named-asset-import/package.json index 2517156308c..27bfae4b0e2 100644 --- a/packages/babel-plugin-named-asset-import/package.json +++ b/packages/babel-plugin-named-asset-import/package.json @@ -12,6 +12,6 @@ "index.js" ], "peerDependencies": { - "@babel/core": "7.0.0-beta.42" + "@babel/core": "7.0.0-beta.44" } } diff --git a/packages/babel-preset-react-app/package.json b/packages/babel-preset-react-app/package.json index 3c620b55be3..be38c048947 100644 --- a/packages/babel-preset-react-app/package.json +++ b/packages/babel-preset-react-app/package.json @@ -12,19 +12,19 @@ "dependencies.js" ], "dependencies": { - "@babel/core": "7.0.0-beta.42", - "@babel/plugin-proposal-class-properties": "7.0.0-beta.42", - "@babel/plugin-proposal-object-rest-spread": "7.0.0-beta.42", - "@babel/plugin-syntax-dynamic-import": "7.0.0-beta.42", - "@babel/plugin-transform-classes": "7.0.0-beta.42", - "@babel/plugin-transform-destructuring": "7.0.0-beta.42", - "@babel/plugin-transform-react-constant-elements": "7.0.0-beta.42", - "@babel/plugin-transform-react-display-name": "7.0.0-beta.42", - "@babel/plugin-transform-regenerator": "7.0.0-beta.42", - "@babel/plugin-transform-runtime": "7.0.0-beta.42", - "@babel/preset-env": "7.0.0-beta.42", - "@babel/preset-flow": "7.0.0-beta.42", - "@babel/preset-react": "7.0.0-beta.42", + "@babel/core": "7.0.0-beta.44", + "@babel/plugin-proposal-class-properties": "7.0.0-beta.44", + "@babel/plugin-proposal-object-rest-spread": "7.0.0-beta.44", + "@babel/plugin-syntax-dynamic-import": "7.0.0-beta.44", + "@babel/plugin-transform-classes": "7.0.0-beta.44", + "@babel/plugin-transform-destructuring": "7.0.0-beta.44", + "@babel/plugin-transform-react-constant-elements": "7.0.0-beta.44", + "@babel/plugin-transform-react-display-name": "7.0.0-beta.44", + "@babel/plugin-transform-regenerator": "7.0.0-beta.44", + "@babel/plugin-transform-runtime": "7.0.0-beta.44", + "@babel/preset-env": "7.0.0-beta.44", + "@babel/preset-flow": "7.0.0-beta.44", + "@babel/preset-react": "7.0.0-beta.44", "babel-plugin-macros": "2.0.0", "babel-plugin-transform-dynamic-import": "2.0.0", "babel-plugin-transform-react-remove-prop-types": "0.4.12" diff --git a/packages/react-dev-utils/package.json b/packages/react-dev-utils/package.json index 25690e95d0b..424c16f6305 100644 --- a/packages/react-dev-utils/package.json +++ b/packages/react-dev-utils/package.json @@ -37,7 +37,7 @@ "workspaceUtils.js" ], "dependencies": { - "@babel/code-frame": "7.0.0-beta.42", + "@babel/code-frame": "7.0.0-beta.44", "address": "1.0.3", "browserslist": "2.11.3", "chalk": "2.3.0", diff --git a/packages/react-error-overlay/package.json b/packages/react-error-overlay/package.json index cdaffae49d3..ce7c2cbe683 100644 --- a/packages/react-error-overlay/package.json +++ b/packages/react-error-overlay/package.json @@ -30,9 +30,9 @@ "lib/index.js" ], "devDependencies": { - "@babel/code-frame": "7.0.0-beta.42", - "@babel/core": "7.0.0-beta.42", - "@babel/runtime": "7.0.0-beta.42", + "@babel/code-frame": "7.0.0-beta.44", + "@babel/core": "7.0.0-beta.44", + "@babel/runtime": "7.0.0-beta.44", "anser": "1.4.6", "babel-core": "^7.0.0-bridge.0", "babel-eslint": "^8.2.2", diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index dc47634bdc0..352484fe1e8 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -21,8 +21,8 @@ "react-scripts": "./bin/react-scripts.js" }, "dependencies": { - "@babel/core": "7.0.0-beta.42", - "@babel/runtime": "7.0.0-beta.42", + "@babel/core": "7.0.0-beta.44", + "@babel/runtime": "7.0.0-beta.44", "autoprefixer": "7.2.5", "babel-core": "7.0.0-bridge.0", "babel-eslint": "8.2.2", From 1d4fdc2dd4950011beacf1883900bf5d8da7079e Mon Sep 17 00:00:00 2001 From: Rob Grochowicz Date: Thu, 5 Apr 2018 19:42:01 -0500 Subject: [PATCH 19/35] Enable loose mode for `class-properties` (#4248) * Enable loose mode for `class-properties` * Update comment to point to discussion Resolves #4263 --- packages/babel-preset-react-app/index.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/babel-preset-react-app/index.js b/packages/babel-preset-react-app/index.js index 87b070070d9..72089b9b78b 100644 --- a/packages/babel-preset-react-app/index.js +++ b/packages/babel-preset-react-app/index.js @@ -92,7 +92,14 @@ module.exports = function(api, opts) { // don't work without it: https://github.com/babel/babel/issues/7215 require('@babel/plugin-transform-destructuring').default, // class { handleClick = () => { } } - require('@babel/plugin-proposal-class-properties').default, + // Enable loose mode to use assignment instead of defineProperty + // See discussion in https://github.com/facebook/create-react-app/issues/4263 + [ + require('@babel/plugin-proposal-class-properties').default, + { + loose: true, + }, + ], // The following two plugins use Object.assign directly, instead of Babel's // extends helper. Note that this assumes `Object.assign` is available. // { ...todo, completed: true } From ae2cf072494c332f3252d5109d4e2ef505749048 Mon Sep 17 00:00:00 2001 From: Ro Savage Date: Sat, 14 Apr 2018 08:14:31 +1200 Subject: [PATCH 20/35] Update CSS Modules localIndetName (#4192) * Update CSS Modules localIndetName * Add missing file to package * Correct regex * plz plz plz --- packages/react-dev-utils/README.md | 37 +++++++++++++++++++ .../react-dev-utils/getCSSModuleLocalIdent.js | 37 +++++++++++++++++++ packages/react-dev-utils/package.json | 1 + .../config/webpack.config.dev.js | 3 +- .../config/webpack.config.prod.js | 5 ++- .../kitchensink/integration/webpack.test.js | 5 ++- .../features/webpack/CssModulesInclusion.js | 8 +++- .../features/webpack/assets/index.module.css | 4 ++ packages/react-scripts/package.json | 1 + packages/react-scripts/template/README.md | 24 ++++++------ 10 files changed, 109 insertions(+), 16 deletions(-) create mode 100644 packages/react-dev-utils/getCSSModuleLocalIdent.js create mode 100644 packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/index.module.css diff --git a/packages/react-dev-utils/README.md b/packages/react-dev-utils/README.md index 42e12c2f91d..f63febe7c65 100644 --- a/packages/react-dev-utils/README.md +++ b/packages/react-dev-utils/README.md @@ -326,3 +326,40 @@ module.exports = { // ... } ``` + +#### `getCSSModuleLocalIdent(context: Object, localIdentName: String, localName: String, options: Object): string` + +Creates a class name for CSS Modules that uses either the filename or folder name if named `index.module.css`. + +For `MyFolder/MyComponent.module.css` and class `MyClass` the output will be `MyComponent.module_MyClass__[hash]` +For `MyFolder/index.module.css` and class `MyClass` the output will be `MyFolder_MyClass__[hash]` + +```js +const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent'); + +// In your webpack config: +// ... +module: { + rules: [ + { + test: /\.module\.css$/, + use: [ + require.resolve('style-loader'), + { + loader: require.resolve('css-loader'), + options: { + importLoaders: 1, + modules: true, + getLocalIdent: getCSSModuleLocalIdent, + }, + }, + { + loader: require.resolve('postcss-loader'), + options: postCSSLoaderOptions, + }, + ], + } + ] +} +``` + diff --git a/packages/react-dev-utils/getCSSModuleLocalIdent.js b/packages/react-dev-utils/getCSSModuleLocalIdent.js new file mode 100644 index 00000000000..d1cd22a4e05 --- /dev/null +++ b/packages/react-dev-utils/getCSSModuleLocalIdent.js @@ -0,0 +1,37 @@ +/** + * Copyright (c) 2015-present, Facebook, Inc. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +'use strict'; + +const loaderUtils = require('loader-utils'); + +module.exports = function getLocalIdent( + context, + localIdentName, + localName, + options +) { + // Use the filename or folder name, based on some uses the index.js / index.module.css project style + const fileNameOrFolder = context.resourcePath.endsWith('index.module.css') + ? '[folder]' + : '[name]'; + // Create a hash based on a the file location and class name. Will be unique across a project, and close to globally unique. + const hash = loaderUtils.getHashDigest( + context.resourcePath + localName, + 'md5', + 'base64', + 5 + ); + // Use loaderUtils to find the file or folder name + const className = loaderUtils.interpolateName( + context, + fileNameOrFolder + '_' + localName + '__' + hash, + options + ); + // remove the .module that appears in every classname when based on the file. + return className.replace('.module_', '_'); +}; diff --git a/packages/react-dev-utils/package.json b/packages/react-dev-utils/package.json index 424c16f6305..73d6600fd50 100644 --- a/packages/react-dev-utils/package.json +++ b/packages/react-dev-utils/package.json @@ -19,6 +19,7 @@ "eslintFormatter.js", "FileSizeReporter.js", "formatWebpackMessages.js", + "getCSSModuleLocalIdent.js", "getProcessForPort.js", "ignoredFiles.js", "inquirer.js", diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index 398b8bf53b7..fd18d23d255 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -17,6 +17,7 @@ const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin'); const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin'); const eslintFormatter = require('react-dev-utils/eslintFormatter'); const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin'); +const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent'); const getClientEnvironment = require('./env'); const paths = require('./paths'); @@ -269,7 +270,7 @@ module.exports = { options: { importLoaders: 1, modules: true, - localIdentName: '[path]__[name]___[local]', + getLocalIdent: getCSSModuleLocalIdent, }, }, { diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index b3c4a602cd4..67fa18150a3 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -19,6 +19,7 @@ const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin'); const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin'); const eslintFormatter = require('react-dev-utils/eslintFormatter'); const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin'); +const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent'); const paths = require('./paths'); const getClientEnvironment = require('./env'); @@ -306,7 +307,7 @@ module.exports = { minimize: true, sourceMap: shouldUseSourceMap, modules: true, - localIdentName: '[path]__[name]___[local]', + getLocalIdent: getCSSModuleLocalIdent, }, }, { @@ -422,7 +423,7 @@ module.exports = { // having to parse `index.html`. new ManifestPlugin({ fileName: 'asset-manifest.json', - publicPath: publicPath + publicPath: publicPath, }), // Generate a service worker script that will precache, and keep up to date, // the HTML & assets that are part of the Webpack build. diff --git a/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js b/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js index bba497c49f3..865fb118517 100644 --- a/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js +++ b/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js @@ -26,8 +26,11 @@ describe('Integration', () => { expect( doc.getElementsByTagName('style')[0].textContent.replace(/\s/g, '') + ).to.match(/.+style_cssModulesInclusion__.+\{background:.+;color:.+}/); + expect( + doc.getElementsByTagName('style')[1].textContent.replace(/\s/g, '') ).to.match( - /.+__style-module___cssModulesInclusion+\{background:.+;color:.+}/ + /.+assets_cssModulesIndexInclusion__.+\{background:.+;color:.+}/ ); }); diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/CssModulesInclusion.js b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/CssModulesInclusion.js index 0f96ae161fb..05339e3fae1 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/CssModulesInclusion.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/CssModulesInclusion.js @@ -7,7 +7,13 @@ import React from 'react'; import styles from './assets/style.module.css'; +import indexStyles from './assets/index.module.css'; export default () => ( -

CSS Modules are working!

+
+

CSS Modules are working!

+

+ CSS Modules with index are working! +

+
); diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/index.module.css b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/index.module.css new file mode 100644 index 00000000000..f1c6d7d19be --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/index.module.css @@ -0,0 +1,4 @@ +.cssModulesIndexInclusion { + background: darkblue; + color: lightblue; +} diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 352484fe1e8..66359e30661 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -50,6 +50,7 @@ "html-webpack-plugin": "2.30.1", "identity-obj-proxy": "3.0.0", "jest": "22.1.2", + "loader-utils": "^1.1.0", "object-assign": "4.1.1", "postcss-flexbugs-fixes": "3.2.0", "postcss-loader": "2.0.10", diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 5f00b482f59..5495e320f06 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -518,23 +518,23 @@ If you are concerned about using Webpack-specific semantics, you can put all you +