Fix the react transform to work in babel 7

Reviewed By: jeanlauliac

Differential Revision: D7257551

fbshipit-source-id: 408104df411e6f7011c148d0f5146341d7e90125

packages/metro-babel7-plugin-react-transform/__tests__/__snapshots__/babel-plugin-react-transform-test.js.snap

@@ -1,8 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`finds React components should babel7 regression 1`] = `
-"import _react from \\"react\\";
+"var _default = _interopRequireDefault(require(\\"react\\")).default;
-import _reactTransformHmrLibIndexJs from \\"react-transform-hmr/lib/index.js\\";
+
+var _reactTransformHmrLibIndexJs = _interopRequireDefault(require(\\"react-transform-hmr/lib/index.js\\")).default;
+
 const _components = {
   Bar: {
     displayName: \\"Bar\\",
@@ -14,7 +16,7 @@ const _reactTransformHmrLibIndexJs2 = _reactTransformHmrLibIndexJs({
   filename: \\"unknown\\",
   components: _components,
   locals: [module],
-  imports: [_react]
+  imports: [_default]
 });
 
 function _wrapComponent(id) {
@@ -23,6 +25,8 @@ function _wrapComponent(id) {
   };
 }
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 class Foo {
   f() {
     class Bar extends React.Component {
@@ -55,7 +59,8 @@ foo(class extends React.Component {});"
 `;
 
 exports[`finds React components should code class expression extends react component with render method 1`] = `
-"import _transformLib from \\"transform-lib\\";
+"var _transformLib = _interopRequireDefault(require(\\"transform-lib\\")).default;
+
 const _components = {
   Foo: {
     displayName: \\"Foo\\"
@@ -76,6 +81,8 @@ function _wrapComponent(id) {
   };
 }
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 foo(_wrapComponent(\\"Foo\\")(class Foo extends React.Component {
   render() {}
 }));
@@ -143,7 +150,8 @@ Foo = _wrapComponent('Foo')(Foo);"
 exports[`finds React components should code class extends react component 1`] = `"class Foo extends React.Component {}"`;
 
 exports[`finds React components should code class extends react component with render method 1`] = `
-"import _transformLib from \\"transform-lib\\";
+"var _transformLib = _interopRequireDefault(require(\\"transform-lib\\")).default;
+
 const _components = {
   Foo: {
     displayName: \\"Foo\\"
@@ -163,6 +171,8 @@ function _wrapComponent(id) {
   };
 }
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 class Foo extends React.Component {
   render() {}
 }
@@ -182,7 +192,8 @@ exports[`finds React components should code class within function 1`] = `
 `;
 
 exports[`finds React components should code class within function extends react component with render method 1`] = `
-"import _transformLib from \\"transform-lib\\";
+"var _transformLib = _interopRequireDefault(require(\\"transform-lib\\")).default;
+
 const _components = {
   Foo: {
     displayName: \\"Foo\\",
@@ -203,6 +214,8 @@ function _wrapComponent(id) {
   };
 }
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 function factory() {
   return _wrapComponent(\\"Foo\\")(class Foo extends React.Component {
     render() {}
@@ -213,7 +226,8 @@ function factory() {
 exports[`finds React components should code class without name 1`] = `"const Foo = class extends React.Component {};"`;
 
 exports[`finds React components should code class without name extends react component with render method 1`] = `
-"import _transformLib from \\"transform-lib\\";
+"var _transformLib = _interopRequireDefault(require(\\"transform-lib\\")).default;
+
 const _components = {
   _component: {}
 };
@@ -231,6 +245,8 @@ function _wrapComponent(id) {
   };
 }
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 const Foo = _wrapComponent(\\"_component\\")(class extends React.Component {
   render() {}
 });"
@@ -284,7 +300,8 @@ exports[`finds React components should code react create class with dynamic disp
 `;
 
 exports[`finds React components should code react create class with render method 1`] = `
-"import _transformLib from 'transform-lib';
+"var _transformLib = _interopRequireDefault(require('transform-lib')).default;
+
 const _components = {
   Foo: {
     displayName: 'Foo'
@@ -306,6 +323,8 @@ function _wrapComponent(id) {
   };
 }
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 const Foo = _wrapComponent('Foo')(React.createClass({
   displayName: 'Foo',
   render: function () {}
@@ -327,7 +346,8 @@ exports[`finds React components should code react create class with string liter
 `;
 
 exports[`finds React components should code react create class with string literal display name with render method 1`] = `
-"import _transformLib from 'transform-lib';
+"var _transformLib = _interopRequireDefault(require('transform-lib')).default;
+
 const _components = {
   'my-component': {
     displayName: 'my-component'
@@ -347,6 +367,8 @@ function _wrapComponent(id) {
   };
 }
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 const MyComponent = _wrapComponent('my-component')(React.createClass({
   displayName: 'my-component',
   render: function () {}
@@ -366,7 +388,8 @@ const Bar = factory({
 `;
 
 exports[`finds React components should options custom factories with render method 1`] = `
-"import _transformLib from 'transform-lib';
+"var _transformLib = _interopRequireDefault(require('transform-lib')).default;
+
 const _components = {
   Foo: {
     displayName: 'Foo'
@@ -389,6 +412,8 @@ function _wrapComponent(id) {
   };
 }
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 const Foo = _wrapComponent('Foo')(createClass({
   displayName: 'Foo',
   render: function () {}
@@ -406,7 +431,8 @@ class Bar extends CustomComponent {}"
 `;
 
 exports[`finds React components should options custom super classes with render method 1`] = `
-"import _transformLib from \\"transform-lib\\";
+"var _transformLib = _interopRequireDefault(require(\\"transform-lib\\")).default;
+
 const _components = {
   Foo: {
     displayName: \\"Foo\\"
@@ -429,6 +455,8 @@ function _wrapComponent(id) {
   };
 }
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 class Foo extends BooComponent {
   render() {}
 }
@@ -442,8 +470,10 @@ Bar = _wrapComponent(\\"Bar\\")(Bar);"
 exports[`finds React components should options multiple transforms 1`] = `"class Foo extends React.Component {}"`;
 
 exports[`finds React components should options multiple transforms with render method 1`] = `
-"import _transformTwo from \\"transform-two\\";
+"var _transformTwo = _interopRequireDefault(require(\\"transform-two\\")).default;
-import _transformOne from \\"transform-one\\";
+
+var _transformOne = _interopRequireDefault(require(\\"transform-one\\")).default;
+
 const _components = {
   Foo: {
     displayName: \\"Foo\\"
@@ -470,6 +500,8 @@ function _wrapComponent(id) {
   };
 }
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 class Foo extends React.Component {
   render() {}
 }
@@ -479,9 +511,12 @@ Foo = _wrapComponent(\\"Foo\\")(Foo);"
 exports[`finds React components should options with imports 1`] = `"class Foo extends React.Component {}"`;
 
 exports[`finds React components should options with imports with render method 1`] = `
-"import _reactDom from \\"react-dom\\";
+"var _default2 = _interopRequireDefault(require(\\"react-dom\\")).default;
-import _react from \\"react\\";
+
-import _transformLib from \\"transform-lib\\";
+var _default = _interopRequireDefault(require(\\"react\\")).default;
+
+var _transformLib = _interopRequireDefault(require(\\"transform-lib\\")).default;
+
 const _components = {
   Foo: {
     displayName: \\"Foo\\"
@@ -492,7 +527,7 @@ const _transformLib2 = _transformLib({
   filename: \\"unknown\\",
   components: _components,
   locals: [],
-  imports: [_react, _reactDom]
+  imports: [_default, _default2]
 });
 
 function _wrapComponent(id) {
@@ -501,6 +536,8 @@ function _wrapComponent(id) {
   };
 }
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 class Foo extends React.Component {
   render() {}
 }
@@ -510,7 +547,8 @@ Foo = _wrapComponent(\\"Foo\\")(Foo);"
 exports[`finds React components should options with locals 1`] = `"class Foo extends React.Component {}"`;
 
 exports[`finds React components should options with locals with render method 1`] = `
-"import _transformLib from \\"transform-lib\\";
+"var _transformLib = _interopRequireDefault(require(\\"transform-lib\\")).default;
+
 const _components = {
   Foo: {
     displayName: \\"Foo\\"
@@ -530,6 +568,8 @@ function _wrapComponent(id) {
   };
 }
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 class Foo extends React.Component {
   render() {}
 }

packages/metro-babel7-plugin-react-transform/lib/index.js

@@ -26,6 +26,8 @@
 
 const find = require('lodash/find');
 
+const {addDefault} = require('@babel/helper-module-imports');
+
 module.exports = {
   default: function({types: t, template}) {
     function matchesPatterns(path, patterns) {
@@ -246,7 +248,7 @@ module.exports = {
         };
       }
 
-      build() {
+      build(path) {
         const componentsDeclarationId = this.file.scope.generateUidIdentifier(
           'components',
         );
@@ -265,6 +267,7 @@ module.exports = {
           components,
         );
         const configuredTransforms = this.initTransformers(
+          path,
           componentsDeclarationId,
         );
         const wrapperFunction = this.initWrapperFunction(wrapperFunctionId);
@@ -359,21 +362,19 @@ module.exports = {
        *   imports: []
        * });
        */
-      initTransformers(componentsDeclarationId) {
+      initTransformers(path, componentsDeclarationId) {
         return this.options.transforms.map(transform => {
           const transformName = transform.transform;
-          const transformImportId = this.file.addImport(
+          const transformImportId = addDefault(path, transformName, {
-            transformName,
+            nameHint: transformName,
-            'default',
+          });
-            transformName,
-          );
 
           const transformLocals = transform.locals.map(local => {
             return t.identifier(local);
           });
 
           const transformImports = transform.imports.map(importName => {
-            return this.file.addImport(importName, 'default', importName);
+            return addDefault(path, importName, {hint: importName});
           });
 
           const configuredTransformId = this.file.scope.generateUidIdentifier(
@@ -384,7 +385,9 @@ module.exports = {
               configuredTransformId,
               t.callExpression(transformImportId, [
                 toObjectExpression({
-                  filename: t.stringLiteral(this.file.opts.filename),
+                  filename: t.stringLiteral(
+                    this.file.opts.filename || 'unknown',
+                  ),
                   components: componentsDeclarationId,
                   locals: t.arrayExpression(transformLocals),
                   imports: t.arrayExpression(transformImports),
@@ -430,7 +433,7 @@ module.exports = {
         Program(path, {file, opts}) {
           ReactTransformBuilder.assertValidOptions(opts);
           const builder = new ReactTransformBuilder(file, opts);
-          builder.build();
+          builder.build(path);
         },
       },
     };