Babel 7

babel.config.js

@@ -0,0 +1,27 @@
+'use strict';
+
+module.exports = {
+  plugins: [
+    '@babel/plugin-syntax-jsx',
+    '@babel/plugin-transform-react-jsx',
+    '@babel/plugin-transform-flow-strip-types',
+    ['@babel/plugin-proposal-class-properties', {loose: true}],
+    'syntax-trailing-function-commas',
+    [
+      '@babel/plugin-proposal-object-rest-spread',
+      {loose: true, useBuiltIns: true},
+    ],
+    ['@babel/plugin-transform-template-literals', {loose: true}],
+    '@babel/plugin-transform-literals',
+    '@babel/plugin-transform-arrow-functions',
+    '@babel/plugin-transform-block-scoped-functions',
+    '@babel/plugin-transform-object-super',
+    '@babel/plugin-transform-shorthand-properties',
+    '@babel/plugin-transform-computed-properties',
+    '@babel/plugin-transform-for-of',
+    ['@babel/plugin-transform-spread', {loose: true, useBuiltIns: true}],
+    '@babel/plugin-transform-parameters',
+    ['@babel/plugin-transform-destructuring', {loose: true, useBuiltIns: true}],
+    ['@babel/plugin-transform-block-scoping', {throwIfClosureRequired: true}],
+  ],
+};

package.json

@@ -4,38 +4,37 @@
     "packages/*"
   ],
   "devDependencies": {
+    "@babel/cli": "^7.0.0",
+    "@babel/code-frame": "^7.0.0",
+    "@babel/core": "^7.0.0",
+    "@babel/helper-module-imports": "^7.0.0",
+    "@babel/plugin-external-helpers": "^7.0.0",
+    "@babel/plugin-proposal-class-properties": "^7.0.0",
+    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
+    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
+    "@babel/plugin-transform-arrow-functions": "^7.0.0",
+    "@babel/plugin-transform-async-to-generator": "^7.0.0",
+    "@babel/plugin-transform-block-scoped-functions": "^7.0.0",
+    "@babel/plugin-transform-block-scoping": "^7.0.0",
+    "@babel/plugin-transform-classes": "^7.0.0",
+    "@babel/plugin-transform-computed-properties": "^7.0.0",
+    "@babel/plugin-transform-destructuring": "^7.0.0",
+    "@babel/plugin-transform-for-of": "^7.0.0",
+    "@babel/plugin-transform-literals": "^7.0.0",
+    "@babel/plugin-transform-modules-commonjs": "^7.0.0",
+    "@babel/plugin-transform-object-super": "^7.0.0",
+    "@babel/plugin-transform-parameters": "^7.0.0",
+    "@babel/plugin-transform-react-jsx-source": "^7.0.0",
+    "@babel/plugin-transform-shorthand-properties": "^7.0.0",
+    "@babel/plugin-transform-spread": "^7.0.0",
+    "@babel/plugin-transform-template-literals": "^7.0.0",
+    "@babel/preset-flow": "^7.0.0",
+    "@babel/preset-react": "^7.0.0",
+    "@babel/traverse": "^7.0.0",
     "@mattiasbuelens/web-streams-polyfill": "0.1.0",
     "art": "^0.10.1",
-    "babel-cli": "^6.6.5",
-    "babel-code-frame": "^6.26.0",
-    "babel-core": "^6.0.0",
     "babel-eslint": "^10.0.0",
-    "babel-jest": "^23.0.1",
-    "babel-plugin-check-es2015-constants": "^6.5.0",
-    "babel-plugin-external-helpers": "^6.22.0",
-    "babel-plugin-syntax-dynamic-import": "^6.18.0",
     "babel-plugin-syntax-trailing-function-commas": "^6.5.0",
-    "babel-plugin-transform-async-to-generator": "^6.22.0",
-    "babel-plugin-transform-class-properties": "^6.11.5",
-    "babel-plugin-transform-es2015-arrow-functions": "^6.5.2",
-    "babel-plugin-transform-es2015-block-scoped-functions": "^6.5.0",
-    "babel-plugin-transform-es2015-block-scoping": "^6.23.0",
-    "babel-plugin-transform-es2015-classes": "^6.5.2",
-    "babel-plugin-transform-es2015-computed-properties": "^6.5.2",
-    "babel-plugin-transform-es2015-destructuring": "^6.5.0",
-    "babel-plugin-transform-es2015-for-of": "^6.5.2",
-    "babel-plugin-transform-es2015-literals": "^6.5.0",
-    "babel-plugin-transform-es2015-modules-commonjs": "^6.5.2",
-    "babel-plugin-transform-es2015-object-super": "^6.5.0",
-    "babel-plugin-transform-es2015-parameters": "^6.5.0",
-    "babel-plugin-transform-es2015-shorthand-properties": "^6.5.0",
-    "babel-plugin-transform-es2015-spread": "^6.5.2",
-    "babel-plugin-transform-es2015-template-literals": "^6.5.2",
-    "babel-plugin-transform-object-rest-spread": "^6.6.5",
-    "babel-plugin-transform-react-jsx-source": "^6.8.0",
-    "babel-plugin-transform-regenerator": "^6.26.0",
-    "babel-preset-react": "^6.5.0",
-    "babel-traverse": "^6.9.0",
     "babylon": "6.18.0",
     "chalk": "^1.1.3",
     "cli-table": "^0.3.1",
@@ -53,7 +52,7 @@
     "eslint-plugin-jest": "^21.6.1",
     "eslint-plugin-no-for-of-loops": "^1.0.0",
     "eslint-plugin-react": "^6.7.1",
-    "eslint-plugin-react-internal": "link:./scripts/eslint-rules/",
+    "eslint-plugin-react-internal": "link:./scripts/eslint-rules",
     "fbjs-scripts": "^0.8.3",
     "filesize": "^3.5.6",
     "flow-bin": "^0.72.0",
@@ -76,7 +75,7 @@
     "react-lifecycles-compat": "^3.0.2",
     "rimraf": "^2.6.1",
     "rollup": "^0.52.1",
-    "rollup-plugin-babel": "^3.0.1",
+    "rollup-plugin-babel": "^4.0.1",
     "rollup-plugin-commonjs": "^8.2.6",
     "rollup-plugin-node-resolve": "^2.1.1",
     "rollup-plugin-prettier": "^0.3.0",

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

@@ -7,17 +7,18 @@
 
 'use strict';
 
-let babel = require('babel-core');
+let babel = require('@babel/core');
 let {wrap} = require('jest-snapshot-serializer-raw');
 let freshPlugin = require('react-refresh/babel');
 
 function transform(input, options = {}) {
   return wrap(
     babel.transform(input, {
       babelrc: false,
+      configFile: false,
       plugins: [
-        'syntax-jsx',
-        'syntax-dynamic-import',
+        '@babel/syntax-jsx',
+        '@babel/syntax-dynamic-import',
         freshPlugin,
         ...(options.plugins || []),
       ],

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

@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+let babel = require('@babel/core');
+let {wrap} = require('jest-snapshot-serializer-raw');
+let freshPlugin = require('react-refresh/babel');
+
+function transform(input, options = {}) {
+  return wrap(
+    babel.transform(input, {
+      babelrc: false,
+      configFile: false,
+      plugins: [
+        '@babel/syntax-jsx',
+        '@babel/syntax-dynamic-import',
+        freshPlugin,
+        ...(options.plugins || []),
+      ],
+    }).code,
+  );
+}
+
+describe('ReactFreshBabelPlugin Prod', () => {
+  it('thorw error if environment is not development', () => {
+    let error;
+    try {
+      transform(`function Hello() {}`);
+    } catch (transformError) {
+      error = transformError;
+    }
+    expect(error).toEqual(
+      new Error(
+        '[BABEL] unknown: React Refresh Babel transform should only be enabled ' +
+          'in development environment. Instead, the environment is: "' +
+          process.env.NODE_ENV +
+          '". (While processing: "base$2")',
+      ),
+    );
+  });
+});

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

@@ -16,7 +16,7 @@ let ReactDOM;
 let ReactFreshRuntime;
 let act;
 
-let babel = require('babel-core');
+let babel = require('@babel/core');
 let freshPlugin = require('react-refresh/babel');
 
 describe('ReactFreshIntegration', () => {
@@ -58,11 +58,11 @@ describe('ReactFreshIntegration', () => {
     function execute(source) {
       const compiled = babel.transform(source, {
         babelrc: false,
-        presets: ['react'],
+        presets: ['@babel/react'],
         plugins: [
           freshPlugin,
-          'transform-es2015-modules-commonjs',
-          compileDestructuring && 'transform-es2015-destructuring',
+          '@babel/plugin-transform-modules-commonjs',
+          compileDestructuring && '@babel/plugin-transform-destructuring',
         ].filter(Boolean),
       }).code;
       exportsObj = {};