Skip to content

Commit b12a982

Browse files
lunaruanarmujahidmmarkelov
authored
Babel 7 (facebook#16297)
Upgraded from Babel 6 to Babel 7. The only significant change seems to be the way `@babel/plugin-transform-classes` handles classes differently from `babel-plugin-transform-es2015-classes`. In regular mode, the former injects a `_createClass` function that increases the bundle size, and in the latter it removes the safeguard checks. However, this is okay because we don't all classes in new features, and we want to deprecate class usage in the future in the react repo. Co-authored-by: Luna Ruan <[email protected]> Co-authored-by: Abdul Rauf <[email protected]> Co-authored-by: Maksim Markelov <[email protected]>
1 parent d77c623 commit b12a982

20 files changed

+1027
-417
lines changed

‎.babelrc

-23
This file was deleted.

‎babel.config.js

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
'use strict';
2+
3+
module.exports = {
4+
plugins: [
5+
'@babel/plugin-syntax-jsx',
6+
'@babel/plugin-transform-react-jsx',
7+
'@babel/plugin-transform-flow-strip-types',
8+
['@babel/plugin-proposal-class-properties', {loose: true}],
9+
'syntax-trailing-function-commas',
10+
[
11+
'@babel/plugin-proposal-object-rest-spread',
12+
{loose: true, useBuiltIns: true},
13+
],
14+
['@babel/plugin-transform-template-literals', {loose: true}],
15+
'@babel/plugin-transform-literals',
16+
'@babel/plugin-transform-arrow-functions',
17+
'@babel/plugin-transform-block-scoped-functions',
18+
'@babel/plugin-transform-object-super',
19+
'@babel/plugin-transform-shorthand-properties',
20+
'@babel/plugin-transform-computed-properties',
21+
'@babel/plugin-transform-for-of',
22+
['@babel/plugin-transform-spread', {loose: true, useBuiltIns: true}],
23+
'@babel/plugin-transform-parameters',
24+
['@babel/plugin-transform-destructuring', {loose: true, useBuiltIns: true}],
25+
['@babel/plugin-transform-block-scoping', {throwIfClosureRequired: true}],
26+
],
27+
};

‎package.json

+29-30
Original file line numberDiff line numberDiff line change
@@ -4,38 +4,37 @@
44
"packages/*"
55
],
66
"devDependencies": {
7+
"@babel/cli": "^7.0.0",
8+
"@babel/code-frame": "^7.0.0",
9+
"@babel/core": "^7.0.0",
10+
"@babel/helper-module-imports": "^7.0.0",
11+
"@babel/plugin-external-helpers": "^7.0.0",
12+
"@babel/plugin-proposal-class-properties": "^7.0.0",
13+
"@babel/plugin-proposal-object-rest-spread": "^7.0.0",
14+
"@babel/plugin-syntax-dynamic-import": "^7.0.0",
15+
"@babel/plugin-transform-arrow-functions": "^7.0.0",
16+
"@babel/plugin-transform-async-to-generator": "^7.0.0",
17+
"@babel/plugin-transform-block-scoped-functions": "^7.0.0",
18+
"@babel/plugin-transform-block-scoping": "^7.0.0",
19+
"@babel/plugin-transform-classes": "^7.0.0",
20+
"@babel/plugin-transform-computed-properties": "^7.0.0",
21+
"@babel/plugin-transform-destructuring": "^7.0.0",
22+
"@babel/plugin-transform-for-of": "^7.0.0",
23+
"@babel/plugin-transform-literals": "^7.0.0",
24+
"@babel/plugin-transform-modules-commonjs": "^7.0.0",
25+
"@babel/plugin-transform-object-super": "^7.0.0",
26+
"@babel/plugin-transform-parameters": "^7.0.0",
27+
"@babel/plugin-transform-react-jsx-source": "^7.0.0",
28+
"@babel/plugin-transform-shorthand-properties": "^7.0.0",
29+
"@babel/plugin-transform-spread": "^7.0.0",
30+
"@babel/plugin-transform-template-literals": "^7.0.0",
31+
"@babel/preset-flow": "^7.0.0",
32+
"@babel/preset-react": "^7.0.0",
33+
"@babel/traverse": "^7.0.0",
734
"@mattiasbuelens/web-streams-polyfill": "0.1.0",
835
"art": "^0.10.1",
9-
"babel-cli": "^6.6.5",
10-
"babel-code-frame": "^6.26.0",
11-
"babel-core": "^6.0.0",
1236
"babel-eslint": "^10.0.0",
13-
"babel-jest": "^23.0.1",
14-
"babel-plugin-check-es2015-constants": "^6.5.0",
15-
"babel-plugin-external-helpers": "^6.22.0",
16-
"babel-plugin-syntax-dynamic-import": "^6.18.0",
1737
"babel-plugin-syntax-trailing-function-commas": "^6.5.0",
18-
"babel-plugin-transform-async-to-generator": "^6.22.0",
19-
"babel-plugin-transform-class-properties": "^6.11.5",
20-
"babel-plugin-transform-es2015-arrow-functions": "^6.5.2",
21-
"babel-plugin-transform-es2015-block-scoped-functions": "^6.5.0",
22-
"babel-plugin-transform-es2015-block-scoping": "^6.23.0",
23-
"babel-plugin-transform-es2015-classes": "^6.5.2",
24-
"babel-plugin-transform-es2015-computed-properties": "^6.5.2",
25-
"babel-plugin-transform-es2015-destructuring": "^6.5.0",
26-
"babel-plugin-transform-es2015-for-of": "^6.5.2",
27-
"babel-plugin-transform-es2015-literals": "^6.5.0",
28-
"babel-plugin-transform-es2015-modules-commonjs": "^6.5.2",
29-
"babel-plugin-transform-es2015-object-super": "^6.5.0",
30-
"babel-plugin-transform-es2015-parameters": "^6.5.0",
31-
"babel-plugin-transform-es2015-shorthand-properties": "^6.5.0",
32-
"babel-plugin-transform-es2015-spread": "^6.5.2",
33-
"babel-plugin-transform-es2015-template-literals": "^6.5.2",
34-
"babel-plugin-transform-object-rest-spread": "^6.6.5",
35-
"babel-plugin-transform-react-jsx-source": "^6.8.0",
36-
"babel-plugin-transform-regenerator": "^6.26.0",
37-
"babel-preset-react": "^6.5.0",
38-
"babel-traverse": "^6.9.0",
3938
"babylon": "6.18.0",
4039
"chalk": "^1.1.3",
4140
"cli-table": "^0.3.1",
@@ -53,7 +52,7 @@
5352
"eslint-plugin-jest": "^21.6.1",
5453
"eslint-plugin-no-for-of-loops": "^1.0.0",
5554
"eslint-plugin-react": "^6.7.1",
56-
"eslint-plugin-react-internal": "link:./scripts/eslint-rules/",
55+
"eslint-plugin-react-internal": "link:./scripts/eslint-rules",
5756
"fbjs-scripts": "^0.8.3",
5857
"filesize": "^3.5.6",
5958
"flow-bin": "^0.72.0",
@@ -76,7 +75,7 @@
7675
"react-lifecycles-compat": "^3.0.2",
7776
"rimraf": "^2.6.1",
7877
"rollup": "^0.52.1",
79-
"rollup-plugin-babel": "^3.0.1",
78+
"rollup-plugin-babel": "^4.0.1",
8079
"rollup-plugin-commonjs": "^8.2.6",
8180
"rollup-plugin-node-resolve": "^2.1.1",
8281
"rollup-plugin-prettier": "^0.3.0",

‎packages/react-refresh/src/__tests__/ReactFreshBabelPlugin-test.js

+4-3
Original file line numberDiff line numberDiff line change
@@ -7,17 +7,18 @@
77

88
'use strict';
99

10-
let babel = require('babel-core');
10+
let babel = require('@babel/core');
1111
let {wrap} = require('jest-snapshot-serializer-raw');
1212
let freshPlugin = require('react-refresh/babel');
1313

1414
function transform(input, options = {}) {
1515
return wrap(
1616
babel.transform(input, {
1717
babelrc: false,
18+
configFile: false,
1819
plugins: [
19-
'syntax-jsx',
20-
'syntax-dynamic-import',
20+
'@babel/syntax-jsx',
21+
'@babel/syntax-dynamic-import',
2122
freshPlugin,
2223
...(options.plugins || []),
2324
],

‎packages/react-refresh/src/__tests__/ReactFreshBabelPluginProd-test.js

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
/**
2+
* Copyright (c) Facebook, Inc. and its affiliates.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*/
7+
8+
'use strict';
9+
10+
let babel = require('@babel/core');
11+
let {wrap} = require('jest-snapshot-serializer-raw');
12+
let freshPlugin = require('react-refresh/babel');
13+
14+
function transform(input, options = {}) {
15+
return wrap(
16+
babel.transform(input, {
17+
babelrc: false,
18+
configFile: false,
19+
plugins: [
20+
'@babel/syntax-jsx',
21+
'@babel/syntax-dynamic-import',
22+
freshPlugin,
23+
...(options.plugins || []),
24+
],
25+
}).code,
26+
);
27+
}
28+
29+
describe('ReactFreshBabelPlugin Prod', () => {
30+
it('thorw error if environment is not development', () => {
31+
let error;
32+
try {
33+
transform(`function Hello() {}`);
34+
} catch (transformError) {
35+
error = transformError;
36+
}
37+
expect(error).toEqual(
38+
new Error(
39+
'[BABEL] unknown: React Refresh Babel transform should only be enabled ' +
40+
'in development environment. Instead, the environment is: "' +
41+
process.env.NODE_ENV +
42+
'". (While processing: "base$2")',
43+
),
44+
);
45+
});
46+
});

‎packages/react-refresh/src/__tests__/ReactFreshIntegration-test.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ let ReactDOM;
1616
let ReactFreshRuntime;
1717
let act;
1818

19-
let babel = require('babel-core');
19+
let babel = require('@babel/core');
2020
let freshPlugin = require('react-refresh/babel');
2121

2222
describe('ReactFreshIntegration', () => {
@@ -58,11 +58,11 @@ describe('ReactFreshIntegration', () => {
5858
function execute(source) {
5959
const compiled = babel.transform(source, {
6060
babelrc: false,
61-
presets: ['react'],
61+
presets: ['@babel/react'],
6262
plugins: [
6363
freshPlugin,
64-
'transform-es2015-modules-commonjs',
65-
compileDestructuring && 'transform-es2015-destructuring',
64+
'@babel/plugin-transform-modules-commonjs',
65+
compileDestructuring && '@babel/plugin-transform-destructuring',
6666
].filter(Boolean),
6767
}).code;
6868
exportsObj = {};

0 commit comments

Comments
 (0)