Use babel runtime instead of relying on global babelHelpers and regen…

…erator

packages/metro-react-native-babel-preset/package.json

@@ -40,6 +40,7 @@
     "@babel/plugin-transform-react-jsx": "^7.0.0",
     "@babel/plugin-transform-react-jsx-source": "^7.0.0",
     "@babel/plugin-transform-regenerator": "^7.0.0",
+    "@babel/plugin-transform-runtime": "^7.0.0",
     "@babel/plugin-transform-shorthand-properties": "^7.0.0",
     "@babel/plugin-transform-spread": "^7.0.0",
     "@babel/plugin-transform-sticky-regex": "^7.0.0",

packages/metro-react-native-babel-preset/src/configs/main.js

@@ -32,6 +32,13 @@ const defaultPlugins = [
   [require('@babel/plugin-transform-shorthand-properties')],
   [require('@babel/plugin-transform-react-jsx')],
   [require('@babel/plugin-transform-regenerator')],
+  [
+    require('@babel/plugin-transform-runtime'),
+    {
+      helpers: true,
+      regenerator: true,
+    },
+  ],
   [require('@babel/plugin-transform-sticky-regex')],
   [require('@babel/plugin-transform-unicode-regex')],
 ];

packages/metro-react-native-babel-preset/src/plugins.js

@@ -30,6 +30,7 @@ module.exports = {
   '@babel/plugin-transform-react-jsx': require('@babel/plugin-transform-react-jsx'),
   '@babel/plugin-transform-react-jsx-source': require('@babel/plugin-transform-react-jsx-source'),
   '@babel/plugin-transform-regenerator': require('@babel/plugin-transform-regenerator'),
+  '@babel/plugin-transform-runtime': require('@babel/plugin-transform-runtime'),
   '@babel/plugin-transform-spread': require('@babel/plugin-transform-spread'),
   '@babel/plugin-transform-sticky-regex': require('@babel/plugin-transform-sticky-regex'),
   '@babel/plugin-transform-unicode-regex': require('@babel/plugin-transform-unicode-regex'),

packages/metro/src/JSTransformer/worker/__tests__/__snapshots__/worker-test.js.snap

@@ -47,110 +47,110 @@ Array [
     0,
   ],
   Array [
-    4,
+    6,
     0,
     5,
     0,
   ],
   Array [
-    6,
+    8,
     0,
     2,
     0,
     "require",
   ],
   Array [
-    6,
+    8,
     2,
     2,
     0,
     "require",
   ],
   Array [
-    6,
+    8,
     13,
     2,
     7,
   ],
   Array [
-    6,
+    8,
     39,
     2,
     0,
   ],
   Array [
-    8,
+    10,
     0,
     3,
     0,
     "arbitrary",
   ],
   Array [
-    8,
+    10,
     2,
     3,
     0,
     "arbitrary",
   ],
   Array [
-    8,
+    10,
     11,
     3,
     9,
   ],
   Array [
-    8,
+    10,
     12,
     3,
     10,
     "code",
   ],
   Array [
-    8,
+    10,
     16,
     3,
     9,
   ],
   Array [
-    8,
+    10,
     17,
     3,
     0,
   ],
   Array [
-    10,
+    12,
     0,
     4,
     0,
   ],
   Array [
-    10,
+    12,
     6,
     4,
     6,
     "b",
   ],
   Array [
-    10,
+    12,
     7,
     4,
     7,
   ],
   Array [
-    10,
+    12,
     10,
     4,
     10,
     "require",
   ],
   Array [
-    10,
+    12,
     21,
     4,
     17,
   ],
   Array [
-    10,
+    12,
     45,
     4,
     0,
@@ -245,3 +245,28 @@ Array [
   ],
 ]
 `;
+
+exports[`code transformation worker: transforms an es module with regenerator 1`] = `
+"__d(function (global, _$$_REQUIRE, _$$_IMPORT_DEFAULT, _$$_IMPORT_ALL, module, exports, _dependencyMap) {
+  var _interopRequireDefault = _$$_REQUIRE(_dependencyMap[0], \\"@babel/runtime/helpers/interopRequireDefault\\");
+
+  Object.defineProperty(exports, \\"__esModule\\", {
+    value: true
+  });
+  exports.test = test;
+
+  var _regenerator = _interopRequireDefault(_$$_REQUIRE(_dependencyMap[1], \\"@babel/runtime/regenerator\\"));
+
+  function test() {
+    return _regenerator.default.async(function test$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+          case \\"end\\":
+            return _context.stop();
+        }
+      }
+    }, null, this);
+  }
+});"
+`;

packages/metro/src/JSTransformer/worker/__tests__/worker-test.js

@@ -143,24 +143,63 @@ describe('code transformation worker:', () => {
         '__d(function (global, _$$_REQUIRE, _$$_IMPORT_DEFAULT, _$$_IMPORT_ALL, module, exports, _dependencyMap) {',
         "  'use strict';",
         '',
-        '  var _c = babelHelpers.interopRequireDefault(_$$_REQUIRE(_dependencyMap[0], "./c"));',
+        '  var _interopRequireDefault = _$$_REQUIRE(_dependencyMap[0], "@babel/runtime/helpers/interopRequireDefault");',
         '',
-        '  _$$_REQUIRE(_dependencyMap[1], "./a");',
+        '  var _c = _interopRequireDefault(_$$_REQUIRE(_dependencyMap[1], "./c"));',
+        '',
+        '  _$$_REQUIRE(_dependencyMap[2], "./a");',
         '',
         '  arbitrary(code);',
         '',
-        '  var b = _$$_REQUIRE(_dependencyMap[2], "b");',
+        '  var b = _$$_REQUIRE(_dependencyMap[3], "b");',
         '});',
       ].join('\n'),
     );
     expect(result.output[0].data.map).toMatchSnapshot();
     expect(result.dependencies).toEqual([
+      {
+        data: {isAsync: false},
+        name: '@babel/runtime/helpers/interopRequireDefault',
+      },
       {data: {isAsync: false}, name: './c'},
       {data: {isAsync: false}, name: './a'},
       {data: {isAsync: false}, name: 'b'},
     ]);
   });
 
+  it('transforms an es module with regenerator', async () => {
+    const result = await transform(
+      '/root/local/file.js',
+      'local/file.js',
+      'export async function test() {}',
+      {
+        assetExts: [],
+        assetPlugins: [],
+        assetRegistryPath: '',
+        asyncRequireModulePath: 'asyncRequire',
+        isScript: false,
+        minifierPath: 'minifyModulePath',
+        babelTransformerPath,
+        transformOptions: {dev: true},
+        dynamicDepsInPackages: 'reject',
+      },
+    );
+
+    expect(result.output[0].type).toBe('js/module');
+    expect(result.output[0].data.code).toMatchSnapshot();
+    expect(result.output[0].data.map).toHaveLength(13);
+    expect(result.dependencies).toEqual([
+      {
+        data: {isAsync: false},
+        name: '@babel/runtime/helpers/interopRequireDefault',
+      },
+      {
+        data: {isAsync: false},
+        name: '@babel/runtime/regenerator',
+      },
+    ]);
+  });
+
   it('keeps import/export syntax if requested to do so', async () => {
     const contents = ['import c from "./c";'].join('\n');
 

packages/metro/src/lib/polyfills/__tests__/require-test.js

@@ -14,10 +14,6 @@ const fs = require('fs');
 
 const {transformSync} = require('@babel/core');
 
-// Include the external-helpers plugin to be able to detect if they're
-// needed when transforming the requirejs implementation.
-const PLUGINS = ['@babel/plugin-external-helpers'];
-
 function createModule(
   moduleSystem,
   moduleId,
@@ -34,7 +30,6 @@ describe('require', () => {
     return transformSync(rawCode, {
       ast: false,
       babelrc: false,
-      plugins: PLUGINS.map(require),
       presets: [require.resolve('metro-react-native-babel-preset')],
       retainLines: true,
       sourceMaps: 'inline',
@@ -56,9 +51,9 @@ describe('require', () => {
   });
 
   it('does not need any babel helper logic', () => {
-    // Super-simple check to validate that no babel helpers are used.
-    // This check will need to be updated if https://fburl.com/6z0y2kf8 changes.
-    expect(moduleSystemCode.includes('babelHelpers')).toBe(false);
+    // The react native preset uses @babel/transform-runtime so helpers will be
+    // imported from @babel/runtime.
+    expect(moduleSystemCode.includes('@babel/runtime')).toBe(false);
   });
 
   it('works with plain bundles', () => {

packages/metro/src/reactNativeTransformer.js

@@ -12,7 +12,6 @@
 'use strict';
 
 const crypto = require('crypto');
-const externalHelpersPlugin = require('@babel/plugin-external-helpers');
 const fs = require('fs');
 const inlineRequiresPlugin = require('babel-preset-fbjs/plugins/inline-requires');
 const json5 = require('json5');
@@ -28,7 +27,6 @@ type ModuleES6 = {__esModule?: boolean, default?: {}};
 
 const cacheKeyParts = [
   fs.readFileSync(__filename),
-  require('@babel/plugin-external-helpers/package.json').version,
   require('babel-preset-fbjs/package.json').version,
 ];
 
@@ -127,7 +125,7 @@ function buildBabelConfig(filename, options, plugins?: BabelPlugins = []) {
   let config = Object.assign({}, babelRC, extraConfig);
 
   // Add extra plugins
-  const extraPlugins = [externalHelpersPlugin];
+  const extraPlugins = [];
 
   if (options.inlineRequires) {
     extraPlugins.push(inlineRequiresPlugin);