From 226e59a7e2da8fdfa5c558b7c4008794818a8aef Mon Sep 17 00:00:00 2001 From: Peter van der Zee Date: Tue, 20 Mar 2018 04:49:19 -0700 Subject: [PATCH] Fix the react transform to work in babel 7 Reviewed By: jeanlauliac Differential Revision: D7257551 fbshipit-source-id: 408104df411e6f7011c148d0f5146341d7e90125 --- .../babel-plugin-react-transform-test.js.snap | 76 ++++++++++++++----- .../lib/index.js | 23 +++--- 2 files changed, 71 insertions(+), 28 deletions(-) diff --git a/packages/metro-babel7-plugin-react-transform/__tests__/__snapshots__/babel-plugin-react-transform-test.js.snap b/packages/metro-babel7-plugin-react-transform/__tests__/__snapshots__/babel-plugin-react-transform-test.js.snap index 9db26621..0c32ee91 100644 --- a/packages/metro-babel7-plugin-react-transform/__tests__/__snapshots__/babel-plugin-react-transform-test.js.snap +++ b/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\\"; -import _reactTransformHmrLibIndexJs from \\"react-transform-hmr/lib/index.js\\"; +"var _default = _interopRequireDefault(require(\\"react\\")).default; + +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\\"; -import _transformOne from \\"transform-one\\"; +"var _transformTwo = _interopRequireDefault(require(\\"transform-two\\")).default; + +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\\"; -import _react from \\"react\\"; -import _transformLib from \\"transform-lib\\"; +"var _default2 = _interopRequireDefault(require(\\"react-dom\\")).default; + +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() {} } diff --git a/packages/metro-babel7-plugin-react-transform/lib/index.js b/packages/metro-babel7-plugin-react-transform/lib/index.js index c6ac456c..d3cd50b6 100644 --- a/packages/metro-babel7-plugin-react-transform/lib/index.js +++ b/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( - transformName, - 'default', - transformName, - ); + const transformImportId = addDefault(path, transformName, { + nameHint: 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); }, }, };