Skip to content

Commit 1552949

Browse files
clemmyTimer
authored andcommitted
Switch to Babel 7 (facebook#3522)
* Update dependencies in react-scripts * Add first pass of working dependencies for babel-preset-react-app and react-scripts * Bump more dependency versions * Adjust more versions and edit fix options * Restore functionality of old preset * Disable Uglify in iframe webpack * Apply prettier * Re-enable cache in dev and clean deps * Lock packages and move babel/core to dep in preset * Bump babel-jest * Re-enable uglify * Nest forceAllTransforms correctly in webpack config * Install babel-core bridge for jest * Add jest-cli and babel-core bridge to make tests in react-error-overlay pass * Re-enable transform-dynamic-import * Add dynamic import syntax support back * Use new babel in kitchensink * Transform modules in test * Revert "Transform modules in test" This reverts commit 539e46a. * Attempt fix for ejected tests * try this * Add regenerator back * Bump babel deps to beta.34 * Remove bad files * Use default when requiring babel transform plugin * Bump deps * Try the fix? * Oopsie * Remove some weird things * Run Babel on react-error-overlay tests * Try fixing kitchensink * Use new API for codeFrame * Add missing (?) babelrc * Maybe this helps? * Maybe fix mocha * I shouldn't have deleted this 🤦
1 parent 590df7e commit 1552949

File tree

14 files changed

+178
-163
lines changed

14 files changed

+178
-163
lines changed

packages/babel-preset-react-app/index.js

+87-108
Original file line numberDiff line numberDiff line change
@@ -6,138 +6,117 @@
66
*/
77
'use strict';
88

9-
const plugins = [
10-
// Experimental macros support. Will be documented after it's had some time
11-
// in the wild.
12-
require.resolve('babel-plugin-macros'),
13-
// Necessary to include regardless of the environment because
14-
// in practice some other transforms (such as object-rest-spread)
15-
// don't work without it: https://github.com/babel/babel/issues/7215
16-
require.resolve('babel-plugin-transform-es2015-destructuring'),
17-
// class { handleClick = () => { } }
18-
require.resolve('babel-plugin-transform-class-properties'),
19-
// The following two plugins use Object.assign directly, instead of Babel's
20-
// extends helper. Note that this assumes `Object.assign` is available.
21-
// { ...todo, completed: true }
22-
[
23-
require.resolve('babel-plugin-transform-object-rest-spread'),
24-
{
25-
useBuiltIns: true,
26-
},
27-
],
28-
// Transforms JSX
29-
[
30-
require.resolve('babel-plugin-transform-react-jsx'),
31-
{
32-
useBuiltIns: true,
33-
},
34-
],
35-
// Polyfills the runtime needed for async/await and generators
36-
[
37-
require.resolve('babel-plugin-transform-runtime'),
38-
{
39-
helpers: false,
40-
polyfill: false,
41-
regenerator: true,
42-
},
43-
],
44-
];
45-
46-
// This is similar to how `env` works in Babel:
47-
// https://babeljs.io/docs/usage/babelrc/#env-option
48-
// We are not using `env` because it’s ignored in versions > [email protected]:
49-
// https://github.com/babel/babel/issues/4539
50-
// https://github.com/facebookincubator/create-react-app/issues/720
51-
// It’s also nice that we can enforce `NODE_ENV` being specified.
52-
var env = process.env.BABEL_ENV || process.env.NODE_ENV;
53-
if (env !== 'development' && env !== 'test' && env !== 'production') {
54-
throw new Error(
55-
'Using `babel-preset-react-app` requires that you specify `NODE_ENV` or ' +
56-
'`BABEL_ENV` environment variables. Valid values are "development", ' +
57-
'"test", and "production". Instead, received: ' +
58-
JSON.stringify(env) +
59-
'.'
60-
);
61-
}
9+
module.exports = function(api, opts) {
10+
if (!opts) {
11+
opts = {};
12+
}
6213

63-
if (env === 'development' || env === 'test') {
64-
// The following two plugins are currently necessary to make React warnings
65-
// include more valuable information. They are included here because they are
66-
// currently not enabled in babel-preset-react. See the below threads for more info:
67-
// https://github.com/babel/babel/issues/4702
68-
// https://github.com/babel/babel/pull/3540#issuecomment-228673661
69-
// https://github.com/facebookincubator/create-react-app/issues/989
70-
plugins.push.apply(plugins, [
71-
// Adds component stack to warning messages
72-
require.resolve('babel-plugin-transform-react-jsx-source'),
73-
// Adds __self attribute to JSX which React will use for some warnings
74-
require.resolve('babel-plugin-transform-react-jsx-self'),
75-
]);
76-
}
14+
// This is similar to how `env` works in Babel:
15+
// https://babeljs.io/docs/usage/babelrc/#env-option
16+
// We are not using `env` because it’s ignored in versions > [email protected]:
17+
// https://github.com/babel/babel/issues/4539
18+
// https://github.com/facebookincubator/create-react-app/issues/720
19+
// It’s also nice that we can enforce `NODE_ENV` being specified.
20+
var env = process.env.BABEL_ENV || process.env.NODE_ENV;
21+
var isEnvDevelopment = env === 'development';
22+
var isEnvProduction = env === 'production';
23+
var isEnvTest = env === 'test';
24+
if (!isEnvDevelopment && !isEnvProduction && !isEnvTest) {
25+
throw new Error(
26+
'Using `babel-preset-react-app` requires that you specify `NODE_ENV` or ' +
27+
'`BABEL_ENV` environment variables. Valid values are "development", ' +
28+
'"test", and "production". Instead, received: ' +
29+
JSON.stringify(env) +
30+
'.'
31+
);
32+
}
7733

78-
if (env === 'test') {
79-
module.exports = {
34+
return {
8035
presets: [
81-
// ES features necessary for user's Node version
82-
[
83-
require('babel-preset-env').default,
36+
isEnvTest && [
37+
// ES features necessary for user's Node version
38+
require('@babel/preset-env').default,
8439
{
8540
targets: {
86-
node: 'current',
41+
node: '6.12',
8742
},
8843
},
8944
],
90-
// JSX, Flow
91-
require.resolve('babel-preset-react'),
92-
],
93-
plugins: plugins.concat([
94-
// Compiles import() to a deferred require()
95-
require.resolve('babel-plugin-dynamic-import-node'),
96-
]),
97-
};
98-
} else {
99-
module.exports = {
100-
presets: [
101-
// Latest stable ECMAScript features
102-
[
103-
require.resolve('babel-preset-env'),
45+
(isEnvProduction || isEnvDevelopment) && [
46+
// Latest stable ECMAScript features
47+
require('@babel/preset-env').default,
10448
{
10549
targets: {
10650
// React parses on ie 9, so we should too
10751
ie: 9,
108-
// We currently minify with uglify
109-
// Remove after https://github.com/mishoo/UglifyJS2/issues/448
110-
uglify: true,
11152
},
53+
// We currently minify with uglify
54+
// Remove after https://github.com/mishoo/UglifyJS2/issues/448
55+
forceAllTransforms: true,
11256
// Disable polyfill transforms
11357
useBuiltIns: false,
11458
// Do not transform modules to CJS
11559
modules: false,
11660
},
11761
],
118-
// JSX, Flow
119-
require.resolve('babel-preset-react'),
120-
],
121-
plugins: plugins.concat([
122-
// function* () { yield 42; yield 43; }
12362
[
124-
require.resolve('babel-plugin-transform-regenerator'),
63+
require('@babel/preset-react').default,
64+
{
65+
// Adds component stack to warning messages
66+
// Adds __self attribute to JSX which React will use for some warnings
67+
development: isEnvDevelopment || isEnvTest,
68+
},
69+
],
70+
[require('@babel/preset-flow').default],
71+
].filter(Boolean),
72+
plugins: [
73+
// Experimental macros support. Will be documented after it's had some time
74+
// in the wild.
75+
require('babel-plugin-macros'),
76+
// Necessary to include regardless of the environment because
77+
// in practice some other transforms (such as object-rest-spread)
78+
// don't work without it: https://github.com/babel/babel/issues/7215
79+
require('@babel/plugin-transform-destructuring').default,
80+
// class { handleClick = () => { } }
81+
require('@babel/plugin-proposal-class-properties').default,
82+
// The following two plugins use Object.assign directly, instead of Babel's
83+
// extends helper. Note that this assumes `Object.assign` is available.
84+
// { ...todo, completed: true }
85+
[
86+
require('@babel/plugin-proposal-object-rest-spread').default,
87+
{
88+
useBuiltIns: true,
89+
},
90+
],
91+
// Transforms JSX
92+
[
93+
require('@babel/plugin-transform-react-jsx').default,
94+
{
95+
useBuiltIns: true,
96+
},
97+
],
98+
// Polyfills the runtime needed for async/await and generators
99+
[
100+
require('@babel/plugin-transform-runtime').default,
101+
{
102+
helpers: false,
103+
polyfill: false,
104+
regenerator: true,
105+
},
106+
],
107+
// function* () { yield 42; yield 43; }
108+
!isEnvTest && [
109+
require('@babel/plugin-transform-regenerator').default,
125110
{
126111
// Async functions are converted to generators by babel-preset-env
127112
async: false,
128113
},
129114
],
130115
// Adds syntax support for import()
131-
require.resolve('babel-plugin-syntax-dynamic-import'),
132-
]),
116+
require('@babel/plugin-syntax-dynamic-import').default,
117+
isEnvTest &&
118+
// Transform dynamic import to require
119+
require('babel-plugin-transform-dynamic-import').default,
120+
].filter(Boolean),
133121
};
134-
135-
if (env === 'production') {
136-
// Optimization: hoist JSX that never changes out of render()
137-
// Disabled because of issues: https://github.com/facebookincubator/create-react-app/issues/553
138-
// TODO: Enable again when these issues are resolved.
139-
// plugins.push.apply(plugins, [
140-
// require.resolve('babel-plugin-transform-react-constant-elements')
141-
// ]);
142-
}
143-
}
122+
};

packages/babel-preset-react-app/package.json

+14-16
Original file line numberDiff line numberDiff line change
@@ -11,22 +11,20 @@
1111
"index.js"
1212
],
1313
"dependencies": {
14-
"babel-plugin-dynamic-import-node": "1.1.0",
14+
"@babel/core": "7.0.0-beta.36",
15+
"@babel/plugin-proposal-class-properties": "7.0.0-beta.36",
16+
"@babel/plugin-syntax-dynamic-import": "^7.0.0-beta.36",
17+
"@babel/plugin-transform-classes": "7.0.0-beta.36",
18+
"@babel/plugin-transform-destructuring": "7.0.0-beta.36",
19+
"@babel/plugin-transform-react-constant-elements": "7.0.0-beta.36",
20+
"@babel/plugin-transform-react-display-name": "7.0.0-beta.36",
21+
"@babel/plugin-transform-react-jsx": "7.0.0-beta.36",
22+
"@babel/plugin-transform-regenerator": "7.0.0-beta.36",
23+
"@babel/plugin-transform-runtime": "7.0.0-beta.36",
24+
"@babel/preset-env": "7.0.0-beta.36",
25+
"@babel/preset-flow": "7.0.0-beta.36",
26+
"@babel/preset-react": "7.0.0-beta.36",
1527
"babel-plugin-macros": "2.0.0",
16-
"babel-plugin-syntax-dynamic-import": "6.18.0",
17-
"babel-plugin-transform-class-properties": "6.24.1",
18-
"babel-plugin-transform-es2015-destructuring": "6.23.0",
19-
"babel-plugin-transform-object-rest-spread": "6.26.0",
20-
"babel-plugin-transform-react-constant-elements": "6.23.0",
21-
"babel-plugin-transform-react-jsx": "6.24.1",
22-
"babel-plugin-transform-react-jsx-self": "6.22.0",
23-
"babel-plugin-transform-react-jsx-source": "6.22.0",
24-
"babel-plugin-transform-regenerator": "6.26.0",
25-
"babel-plugin-transform-runtime": "6.23.0",
26-
"babel-preset-env": "1.6.1",
27-
"babel-preset-react": "6.24.1"
28-
},
29-
"peerDependencies": {
30-
"babel-runtime": "^6.23.0"
28+
"babel-plugin-transform-dynamic-import": "2.0.0"
3129
}
3230
}

packages/eslint-config-react-app/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
"index.js"
1212
],
1313
"peerDependencies": {
14-
"babel-eslint": "^7.2.3",
14+
"babel-eslint": "^8.0.2",
1515
"eslint": "^4.1.1",
1616
"eslint-plugin-flowtype": "^2.34.1",
1717
"eslint-plugin-import": "^2.6.0",

packages/react-dev-utils/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@
3737
],
3838
"dependencies": {
3939
"address": "1.0.3",
40-
"babel-code-frame": "6.26.0",
40+
"@babel/code-frame": "7.0.0-beta.36",
4141
"chalk": "1.1.3",
4242
"cross-spawn": "5.1.0",
4343
"detect-port-alt": "1.1.5",

packages/react-error-overlay/package.json

+7-5
Original file line numberDiff line numberDiff line change
@@ -30,13 +30,15 @@
3030
"lib/index.js"
3131
],
3232
"devDependencies": {
33+
"@babel/code-frame": "7.0.0-beta.36",
34+
"@babel/core": "7.0.0-beta.36",
35+
"@babel/runtime": "7.0.0-beta.36",
3336
"anser": "1.4.4",
34-
"babel-code-frame": "6.26.0",
35-
"babel-core": "^6.26.0",
36-
"babel-eslint": "7.2.3",
37-
"babel-loader": "^7.1.2",
37+
"babel-core": "^7.0.0-bridge.0",
38+
"babel-eslint": "^8.0.2",
39+
"babel-jest": "^22.0.6",
40+
"babel-loader": "^8.0.0-beta.0",
3841
"babel-preset-react-app": "^3.1.1",
39-
"babel-runtime": "6.26.0",
4042
"chalk": "^2.1.0",
4143
"chokidar": "^1.7.0",
4244
"cross-env": "5.0.5",

packages/react-error-overlay/src/containers/StackFrameCodeBlock.js

+11-4
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import type { ScriptLine } from '../utils/stack-frame';
1414
import { primaryErrorStyle, secondaryErrorStyle } from '../styles';
1515
import generateAnsiHTML from '../utils/generateAnsiHTML';
1616

17-
import codeFrame from 'babel-code-frame';
17+
import { codeFrameColumns } from '@babel/code-frame';
1818

1919
type StackFrameCodeBlockPropsType = {|
2020
lines: ScriptLine[],
@@ -53,10 +53,17 @@ function StackFrameCodeBlock(props: Exact<StackFrameCodeBlockPropsType>) {
5353
}
5454
sourceCode[line - 1] = text;
5555
});
56-
const ansiHighlight = codeFrame(
56+
const ansiHighlight = codeFrameColumns(
5757
sourceCode.join('\n'),
58-
lineNum,
59-
columnNum == null ? 0 : columnNum - (isFinite(whiteSpace) ? whiteSpace : 0),
58+
{
59+
start: {
60+
line: lineNum,
61+
column:
62+
columnNum == null
63+
? 0
64+
: columnNum - (isFinite(whiteSpace) ? whiteSpace : 0),
65+
},
66+
},
6067
{
6168
forceColor: true,
6269
linesAbove: contextSize,

packages/react-error-overlay/webpack.config.iframe.js

+18-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,24 @@ module.exports = {
1919
rules: [
2020
{
2121
test: /\.js$/,
22-
include: path.resolve(__dirname, './src'),
22+
include: [
23+
path.resolve(__dirname, './src'),
24+
path.dirname(
25+
require.resolve('chalk', {
26+
paths: path.dirname(require.resolve('@babel/code-frame')),
27+
})
28+
),
29+
path.dirname(
30+
require.resolve(
31+
'ansi-styles',
32+
path.dirname(
33+
require.resolve('chalk', {
34+
paths: path.dirname(require.resolve('@babel/code-frame')),
35+
})
36+
)
37+
)
38+
),
39+
],
2340
use: 'babel-loader',
2441
},
2542
],

packages/react-scripts/config/webpack.config.dev.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -96,9 +96,9 @@ module.exports = {
9696
// Resolve Babel runtime relative to react-scripts.
9797
// It usually still works on npm 3 without this but it would be
9898
// unfortunate to rely on, as react-scripts could be symlinked,
99-
// and thus babel-runtime might not be resolvable from the source.
100-
'babel-runtime': path.dirname(
101-
require.resolve('babel-runtime/package.json')
99+
// and thus @babel/runtime might not be resolvable from the source.
100+
'@babel/runtime': path.dirname(
101+
require.resolve('@babel/runtime/package.json')
102102
),
103103
// @remove-on-eject-end
104104
// Support React Native Web

packages/react-scripts/config/webpack.config.prod.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -103,9 +103,9 @@ module.exports = {
103103
// Resolve Babel runtime relative to react-scripts.
104104
// It usually still works on npm 3 without this but it would be
105105
// unfortunate to rely on, as react-scripts could be symlinked,
106-
// and thus babel-runtime might not be resolvable from the source.
107-
'babel-runtime': path.dirname(
108-
require.resolve('babel-runtime/package.json')
106+
// and thus @babel/runtime might not be resolvable from the source.
107+
'@babel/runtime': path.dirname(
108+
require.resolve('@babel/runtime/package.json')
109109
),
110110
// @remove-on-eject-end
111111
// Support React Native Web

packages/react-scripts/fixtures/kitchensink/.babelrc

-4
This file was deleted.

0 commit comments

Comments
 (0)