From 1864a83e6e88a4fea7946d390995d5d73f071748 Mon Sep 17 00:00:00 2001 From: Naor Matania Date: Tue, 20 Mar 2018 06:32:52 -0700 Subject: [PATCH] Revert D7257551: Fix the react transform to work in babel 7 Differential Revision: D7257551 Original commit changeset: 408104df411e fbshipit-source-id: 5128bc475ae4d4cc02f6b6825a697bbb3ed1e6a3 --- .../babel-plugin-react-transform-test.js.snap | 76 +++++-------------- .../lib/index.js | 23 +++--- 2 files changed, 28 insertions(+), 71 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 0c32ee91..9db26621 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,10 +1,8 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`finds React components should babel7 regression 1`] = ` -"var _default = _interopRequireDefault(require(\\"react\\")).default; - -var _reactTransformHmrLibIndexJs = _interopRequireDefault(require(\\"react-transform-hmr/lib/index.js\\")).default; - +"import _react from \\"react\\"; +import _reactTransformHmrLibIndexJs from \\"react-transform-hmr/lib/index.js\\"; const _components = { Bar: { displayName: \\"Bar\\", @@ -16,7 +14,7 @@ const _reactTransformHmrLibIndexJs2 = _reactTransformHmrLibIndexJs({ filename: \\"unknown\\", components: _components, locals: [module], - imports: [_default] + imports: [_react] }); function _wrapComponent(id) { @@ -25,8 +23,6 @@ function _wrapComponent(id) { }; } -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } - class Foo { f() { class Bar extends React.Component { @@ -59,8 +55,7 @@ foo(class extends React.Component {});" `; exports[`finds React components should code class expression extends react component with render method 1`] = ` -"var _transformLib = _interopRequireDefault(require(\\"transform-lib\\")).default; - +"import _transformLib from \\"transform-lib\\"; const _components = { Foo: { displayName: \\"Foo\\" @@ -81,8 +76,6 @@ function _wrapComponent(id) { }; } -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } - foo(_wrapComponent(\\"Foo\\")(class Foo extends React.Component { render() {} })); @@ -150,8 +143,7 @@ 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`] = ` -"var _transformLib = _interopRequireDefault(require(\\"transform-lib\\")).default; - +"import _transformLib from \\"transform-lib\\"; const _components = { Foo: { displayName: \\"Foo\\" @@ -171,8 +163,6 @@ function _wrapComponent(id) { }; } -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } - class Foo extends React.Component { render() {} } @@ -192,8 +182,7 @@ 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`] = ` -"var _transformLib = _interopRequireDefault(require(\\"transform-lib\\")).default; - +"import _transformLib from \\"transform-lib\\"; const _components = { Foo: { displayName: \\"Foo\\", @@ -214,8 +203,6 @@ function _wrapComponent(id) { }; } -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } - function factory() { return _wrapComponent(\\"Foo\\")(class Foo extends React.Component { render() {} @@ -226,8 +213,7 @@ 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`] = ` -"var _transformLib = _interopRequireDefault(require(\\"transform-lib\\")).default; - +"import _transformLib from \\"transform-lib\\"; const _components = { _component: {} }; @@ -245,8 +231,6 @@ function _wrapComponent(id) { }; } -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } - const Foo = _wrapComponent(\\"_component\\")(class extends React.Component { render() {} });" @@ -300,8 +284,7 @@ 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`] = ` -"var _transformLib = _interopRequireDefault(require('transform-lib')).default; - +"import _transformLib from 'transform-lib'; const _components = { Foo: { displayName: 'Foo' @@ -323,8 +306,6 @@ function _wrapComponent(id) { }; } -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } - const Foo = _wrapComponent('Foo')(React.createClass({ displayName: 'Foo', render: function () {} @@ -346,8 +327,7 @@ 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`] = ` -"var _transformLib = _interopRequireDefault(require('transform-lib')).default; - +"import _transformLib from 'transform-lib'; const _components = { 'my-component': { displayName: 'my-component' @@ -367,8 +347,6 @@ 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 () {} @@ -388,8 +366,7 @@ const Bar = factory({ `; exports[`finds React components should options custom factories with render method 1`] = ` -"var _transformLib = _interopRequireDefault(require('transform-lib')).default; - +"import _transformLib from 'transform-lib'; const _components = { Foo: { displayName: 'Foo' @@ -412,8 +389,6 @@ function _wrapComponent(id) { }; } -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } - const Foo = _wrapComponent('Foo')(createClass({ displayName: 'Foo', render: function () {} @@ -431,8 +406,7 @@ class Bar extends CustomComponent {}" `; exports[`finds React components should options custom super classes with render method 1`] = ` -"var _transformLib = _interopRequireDefault(require(\\"transform-lib\\")).default; - +"import _transformLib from \\"transform-lib\\"; const _components = { Foo: { displayName: \\"Foo\\" @@ -455,8 +429,6 @@ function _wrapComponent(id) { }; } -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } - class Foo extends BooComponent { render() {} } @@ -470,10 +442,8 @@ 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`] = ` -"var _transformTwo = _interopRequireDefault(require(\\"transform-two\\")).default; - -var _transformOne = _interopRequireDefault(require(\\"transform-one\\")).default; - +"import _transformTwo from \\"transform-two\\"; +import _transformOne from \\"transform-one\\"; const _components = { Foo: { displayName: \\"Foo\\" @@ -500,8 +470,6 @@ function _wrapComponent(id) { }; } -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } - class Foo extends React.Component { render() {} } @@ -511,12 +479,9 @@ 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`] = ` -"var _default2 = _interopRequireDefault(require(\\"react-dom\\")).default; - -var _default = _interopRequireDefault(require(\\"react\\")).default; - -var _transformLib = _interopRequireDefault(require(\\"transform-lib\\")).default; - +"import _reactDom from \\"react-dom\\"; +import _react from \\"react\\"; +import _transformLib from \\"transform-lib\\"; const _components = { Foo: { displayName: \\"Foo\\" @@ -527,7 +492,7 @@ const _transformLib2 = _transformLib({ filename: \\"unknown\\", components: _components, locals: [], - imports: [_default, _default2] + imports: [_react, _reactDom] }); function _wrapComponent(id) { @@ -536,8 +501,6 @@ function _wrapComponent(id) { }; } -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } - class Foo extends React.Component { render() {} } @@ -547,8 +510,7 @@ 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`] = ` -"var _transformLib = _interopRequireDefault(require(\\"transform-lib\\")).default; - +"import _transformLib from \\"transform-lib\\"; const _components = { Foo: { displayName: \\"Foo\\" @@ -568,8 +530,6 @@ 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 d3cd50b6..c6ac456c 100644 --- a/packages/metro-babel7-plugin-react-transform/lib/index.js +++ b/packages/metro-babel7-plugin-react-transform/lib/index.js @@ -26,8 +26,6 @@ const find = require('lodash/find'); -const {addDefault} = require('@babel/helper-module-imports'); - module.exports = { default: function({types: t, template}) { function matchesPatterns(path, patterns) { @@ -248,7 +246,7 @@ module.exports = { }; } - build(path) { + build() { const componentsDeclarationId = this.file.scope.generateUidIdentifier( 'components', ); @@ -267,7 +265,6 @@ module.exports = { components, ); const configuredTransforms = this.initTransformers( - path, componentsDeclarationId, ); const wrapperFunction = this.initWrapperFunction(wrapperFunctionId); @@ -362,19 +359,21 @@ module.exports = { * imports: [] * }); */ - initTransformers(path, componentsDeclarationId) { + initTransformers(componentsDeclarationId) { return this.options.transforms.map(transform => { const transformName = transform.transform; - const transformImportId = addDefault(path, transformName, { - nameHint: transformName, - }); + const transformImportId = this.file.addImport( + transformName, + 'default', + transformName, + ); const transformLocals = transform.locals.map(local => { return t.identifier(local); }); const transformImports = transform.imports.map(importName => { - return addDefault(path, importName, {hint: importName}); + return this.file.addImport(importName, 'default', importName); }); const configuredTransformId = this.file.scope.generateUidIdentifier( @@ -385,9 +384,7 @@ module.exports = { configuredTransformId, t.callExpression(transformImportId, [ toObjectExpression({ - filename: t.stringLiteral( - this.file.opts.filename || 'unknown', - ), + filename: t.stringLiteral(this.file.opts.filename), components: componentsDeclarationId, locals: t.arrayExpression(transformLocals), imports: t.arrayExpression(transformImports), @@ -433,7 +430,7 @@ module.exports = { Program(path, {file, opts}) { ReactTransformBuilder.assertValidOptions(opts); const builder = new ReactTransformBuilder(file, opts); - builder.build(path); + builder.build(); }, }, };