From efc4901c8cca568b8df652c2e8bb92aade90fab4 Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Mon, 24 Sep 2018 14:55:12 -0400 Subject: [PATCH 1/6] Add new overrides option --- .eslintrc | 2 +- packages/babel-preset-react-app/overrides.js | 21 +++++++++++++++++++ .../config/webpack.config.dev.js | 3 +++ .../config/webpack.config.prod.js | 3 +++ packages/react-scripts/package.json | 2 +- 5 files changed, 29 insertions(+), 2 deletions(-) create mode 100644 packages/babel-preset-react-app/overrides.js diff --git a/.eslintrc b/.eslintrc index 44a504e4080..b642bbc5c14 100644 --- a/.eslintrc +++ b/.eslintrc @@ -7,7 +7,7 @@ "es6": true }, "parserOptions": { - "ecmaVersion": 6 + "ecmaVersion": 2018 }, "rules": { "no-console": "off", diff --git a/packages/babel-preset-react-app/overrides.js b/packages/babel-preset-react-app/overrides.js new file mode 100644 index 00000000000..19f62192e2f --- /dev/null +++ b/packages/babel-preset-react-app/overrides.js @@ -0,0 +1,21 @@ +/** + * 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 crypto = require('crypto'); + +module.exports = { + config(config, { source }) { + if (source.indexOf('.macro') !== -1 || source.indexOf('/macro') !== -1) { + return { + ...config.options, + cacheBustingKey: crypto.randomBytes(32).toString('hex'), + }; + } + return config.options; + }, +}; diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index d92cf597e7d..d4cc2ba12bf 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -264,6 +264,9 @@ module.exports = { cacheDirectory: true, // Don't waste time on Gzipping the cache cacheCompression: false, + overrides: require.resolve( + 'babel-preset-react-app/overrides' + ), highlightCode: true, }, }, diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index 6bd24c06401..9322f8bec08 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -299,6 +299,9 @@ module.exports = { cacheDirectory: true, // Save disk space when time isn't as important cacheCompression: true, + overrides: require.resolve( + 'babel-preset-react-app/overrides' + ), compact: true, highlightCode: true, }, diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 4b4cf171a51..4e8a2d0fc3a 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -28,7 +28,7 @@ "babel-core": "7.0.0-bridge.0", "babel-eslint": "9.0.0", "babel-jest": "23.6.0", - "babel-loader": "8.0.2", + "babel-loader": "Timer/babel-loader#9c1e3f166415435eb4a9095ac86474752ba77bbf", "babel-plugin-named-asset-import": "^0.1.0", "babel-preset-react-app": "^3.1.1", "bfj": "6.1.1", From a4d9150a8c718ae8ced15c1504d57988d9c6200b Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Mon, 24 Sep 2018 15:04:54 -0400 Subject: [PATCH 2/6] Add file to package.json --- packages/babel-preset-react-app/package.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/babel-preset-react-app/package.json b/packages/babel-preset-react-app/package.json index 6387d54c1ca..50f9719097c 100644 --- a/packages/babel-preset-react-app/package.json +++ b/packages/babel-preset-react-app/package.json @@ -8,10 +8,11 @@ "url": "https://github.com/facebook/create-react-app/issues" }, "files": [ - "index.js", "create.js", "dependencies.js", "dev.js", + "index.js", + "overrides.js", "prod.js", "test.js" ], From bd88b9b31052b8bb9bd8f2945bfd046dc3b94b93 Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Mon, 24 Sep 2018 15:51:38 -0400 Subject: [PATCH 3/6] Create our own loader --- packages/babel-preset-react-app/loader.js | 12 ++++++++++++ packages/babel-preset-react-app/package.json | 2 ++ packages/react-scripts/config/webpack.config.dev.js | 2 +- packages/react-scripts/config/webpack.config.prod.js | 2 +- packages/react-scripts/package.json | 2 +- 5 files changed, 17 insertions(+), 3 deletions(-) create mode 100644 packages/babel-preset-react-app/loader.js diff --git a/packages/babel-preset-react-app/loader.js b/packages/babel-preset-react-app/loader.js new file mode 100644 index 00000000000..da11ea80cce --- /dev/null +++ b/packages/babel-preset-react-app/loader.js @@ -0,0 +1,12 @@ +/** + * 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 loader = require('babel-loader'); +const overrides = require('./overrides'); + +module.exports = loader.custom(() => overrides); diff --git a/packages/babel-preset-react-app/package.json b/packages/babel-preset-react-app/package.json index 50f9719097c..b017cdfbd29 100644 --- a/packages/babel-preset-react-app/package.json +++ b/packages/babel-preset-react-app/package.json @@ -12,6 +12,7 @@ "dependencies.js", "dev.js", "index.js", + "loader.js", "overrides.js", "prod.js", "test.js" @@ -30,6 +31,7 @@ "@babel/preset-env": "7.1.0", "@babel/preset-flow": "7.0.0", "@babel/preset-react": "7.0.0", + "babel-loader": "8.0.2", "babel-plugin-macros": "2.4.1", "babel-plugin-transform-dynamic-import": "2.0.0", "babel-plugin-transform-react-remove-prop-types": "0.4.15" diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index d4cc2ba12bf..1e0c7a1e025 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -228,7 +228,7 @@ module.exports = { }, }, { - loader: require.resolve('babel-loader'), + loader: require.resolve('babel-preset-react-app/loader'), options: { // @remove-on-eject-begin babelrc: false, diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index 9322f8bec08..7ec2d9f3640 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -266,7 +266,7 @@ module.exports = { // improves compile time on larger projects require.resolve('thread-loader'), { - loader: require.resolve('babel-loader'), + loader: require.resolve('babel-preset-react-app/loader'), options: { // @remove-on-eject-begin babelrc: false, diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 4e8a2d0fc3a..4b4cf171a51 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -28,7 +28,7 @@ "babel-core": "7.0.0-bridge.0", "babel-eslint": "9.0.0", "babel-jest": "23.6.0", - "babel-loader": "Timer/babel-loader#9c1e3f166415435eb4a9095ac86474752ba77bbf", + "babel-loader": "8.0.2", "babel-plugin-named-asset-import": "^0.1.0", "babel-preset-react-app": "^3.1.1", "bfj": "6.1.1", From c95ac50b072ed5ed82fb06a12417d167cc65d142 Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Mon, 24 Sep 2018 15:53:10 -0400 Subject: [PATCH 4/6] Remove overrides --- packages/react-scripts/config/webpack.config.dev.js | 3 --- packages/react-scripts/config/webpack.config.prod.js | 3 --- 2 files changed, 6 deletions(-) diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index 1e0c7a1e025..0ae1132ad13 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -264,9 +264,6 @@ module.exports = { cacheDirectory: true, // Don't waste time on Gzipping the cache cacheCompression: false, - overrides: require.resolve( - 'babel-preset-react-app/overrides' - ), highlightCode: true, }, }, diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index 7ec2d9f3640..73c5ea60b22 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -299,9 +299,6 @@ module.exports = { cacheDirectory: true, // Save disk space when time isn't as important cacheCompression: true, - overrides: require.resolve( - 'babel-preset-react-app/overrides' - ), compact: true, highlightCode: true, }, From b2af3db1daf09c295c8a564ac30f0aa45d96f905 Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Mon, 24 Sep 2018 16:04:10 -0400 Subject: [PATCH 5/6] We have to use a real babel option --- packages/babel-preset-react-app/overrides.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/babel-preset-react-app/overrides.js b/packages/babel-preset-react-app/overrides.js index 19f62192e2f..1c220dbeab5 100644 --- a/packages/babel-preset-react-app/overrides.js +++ b/packages/babel-preset-react-app/overrides.js @@ -13,7 +13,11 @@ module.exports = { if (source.indexOf('.macro') !== -1 || source.indexOf('/macro') !== -1) { return { ...config.options, - cacheBustingKey: crypto.randomBytes(32).toString('hex'), + caller: { + name: `babel-preset-react-app:${crypto + .randomBytes(32) + .toString('hex')}`, + }, }; } return config.options; From e1edaae55d6ad3496f23e8e83f4e27582d532d72 Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Mon, 24 Sep 2018 16:08:17 -0400 Subject: [PATCH 6/6] Add comments --- packages/babel-preset-react-app/overrides.js | 7 +++++++ packages/react-scripts/config/webpack.config.dev.js | 3 +++ packages/react-scripts/config/webpack.config.prod.js | 3 +++ 3 files changed, 13 insertions(+) diff --git a/packages/babel-preset-react-app/overrides.js b/packages/babel-preset-react-app/overrides.js index 1c220dbeab5..1613983b370 100644 --- a/packages/babel-preset-react-app/overrides.js +++ b/packages/babel-preset-react-app/overrides.js @@ -9,7 +9,14 @@ const crypto = require('crypto'); module.exports = { + // This function transforms the Babel configuration on a per-file basis config(config, { source }) { + // Babel Macros are notoriously hard to cache, so they shouldn't be + // https://github.com/babel/babel/issues/8497 + // We naively detect macros using their package suffix and insert a random + // caller name, a valid option accepted by Babel, to compose a one-time + // cacheIdentifier for the file. We cannot tune the loader options on a per + // file basis. if (source.indexOf('.macro') !== -1 || source.indexOf('/macro') !== -1) { return { ...config.options, diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index 0ae1132ad13..cb19f7f6b92 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -228,6 +228,9 @@ module.exports = { }, }, { + // We need to use our own loader until `babel-loader` supports + // customization + // https://github.com/babel/babel-loader/pull/687 loader: require.resolve('babel-preset-react-app/loader'), options: { // @remove-on-eject-begin diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index 73c5ea60b22..5ab033bad31 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -266,6 +266,9 @@ module.exports = { // improves compile time on larger projects require.resolve('thread-loader'), { + // We need to use our own loader until `babel-loader` supports + // customization + // https://github.com/babel/babel-loader/pull/687 loader: require.resolve('babel-preset-react-app/loader'), options: { // @remove-on-eject-begin