diff --git a/docs/GettingStarted.md b/docs/GettingStarted.md index 353c1712..1bc935ee 100644 --- a/docs/GettingStarted.md +++ b/docs/GettingStarted.md @@ -154,7 +154,7 @@ module.exports.transform = (file: {filename: string, src: string}) => { If you would like to plug-in babel, you can simply do that by passing the code to it: ```js -const {transformSync} = require('@babel/core'); +const {transform} = require('@babel/core'); module.exports.transform = file => { return transform(file.src, { 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 f5332f60..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 @@ -31,24 +31,23 @@ class Foo { f() { class Bar extends React.Component { render() {} - } Bar = _wrapComponent(\\"Bar\\")(Bar); foo(Bar); } - }" `; exports[`finds React components should code call expression with render method 1`] = ` "factory({ render() {} - }); + factory({ render: function () {} }); + factory({ 'render': function () {} });" @@ -86,24 +85,22 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de foo(_wrapComponent(\\"Foo\\")(class Foo extends React.Component { render() {} - })); foo(_wrapComponent(\\"_component\\")(class extends React.Component { render() {} - }));" `; exports[`finds React components should code class extends component with render method 1`] = ` -"import _transformLib from \\"transform-lib\\"; +"import _transformLib from 'transform-lib'; const _components = { Foo: { - displayName: \\"Foo\\" + displayName: 'Foo' } }; const _transformLib2 = _transformLib({ - filename: \\"unknown\\", + filename: 'unknown', components: _components, locals: [], imports: [] @@ -116,25 +113,22 @@ function _wrapComponent(id) { } import React, { Component } from 'react'; - class Foo extends Component { render() {} - } - -Foo = _wrapComponent(\\"Foo\\")(Foo);" +Foo = _wrapComponent('Foo')(Foo);" `; exports[`finds React components should code class extends purecomponent with render method 1`] = ` -"import _transformLib from \\"transform-lib\\"; +"import _transformLib from 'transform-lib'; const _components = { Foo: { - displayName: \\"Foo\\" + displayName: 'Foo' } }; const _transformLib2 = _transformLib({ - filename: \\"unknown\\", + filename: 'unknown', components: _components, locals: [], imports: [] @@ -147,13 +141,10 @@ function _wrapComponent(id) { } import React, { PureComponent } from 'react'; - class Foo extends PureComponent { render() {} - } - -Foo = _wrapComponent(\\"Foo\\")(Foo);" +Foo = _wrapComponent('Foo')(Foo);" `; exports[`finds React components should code class extends react component 1`] = `"class Foo extends React.Component {}"`; @@ -184,16 +175,13 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de class Foo extends React.Component { render() {} - } - Foo = _wrapComponent(\\"Foo\\")(Foo);" `; exports[`finds React components should code class with render method 1`] = ` "class Foo { render() {} - }" `; @@ -231,7 +219,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de function factory() { return _wrapComponent(\\"Foo\\")(class Foo extends React.Component { render() {} - }); }" `; @@ -262,7 +249,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de const Foo = _wrapComponent(\\"_component\\")(class extends React.Component { render() {} - });" `; @@ -273,16 +259,15 @@ export class Bar extends React.Component {} export const bar = React.createClass({}); export class Baz { render() {} - } export class Boo { render() {} - }" `; exports[`finds React components should code ignore 1`] = ` "import React from 'react'; + const First = React.createNotClass({ displayName: 'First' }); @@ -296,6 +281,7 @@ const myCreateClass = spec => { const spec = { render: function () {} }; + React.createClass(spec);" `; @@ -303,6 +289,7 @@ exports[`finds React components should code react create class 1`] = ` "const Foo = React.createClass({ displayName: 'Foo' }); + React.createClass({});" `; @@ -313,18 +300,18 @@ 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; +"var _transformLib = _interopRequireDefault(require('transform-lib')).default; const _components = { Foo: { - displayName: \\"Foo\\" + displayName: 'Foo' }, _component: {}, _component2: {} }; const _transformLib2 = _transformLib({ - filename: \\"unknown\\", + filename: 'unknown', components: _components, locals: [], imports: [] @@ -338,16 +325,16 @@ function _wrapComponent(id) { function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } -const Foo = _wrapComponent(\\"Foo\\")(React.createClass({ +const Foo = _wrapComponent('Foo')(React.createClass({ displayName: 'Foo', render: function () {} })); -_wrapComponent(\\"_component\\")(React.createClass({ +_wrapComponent('_component')(React.createClass({ render: function () {} })); -const Bar = _wrapComponent(\\"_component2\\")(React.createClass({ +const Bar = _wrapComponent('_component2')(React.createClass({ render: function () {} }));" `; @@ -359,16 +346,16 @@ 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; +"var _transformLib = _interopRequireDefault(require('transform-lib')).default; const _components = { - \\"my-component\\": { - displayName: \\"my-component\\" + 'my-component': { + displayName: 'my-component' } }; const _transformLib2 = _transformLib({ - filename: \\"unknown\\", + filename: 'unknown', components: _components, locals: [], imports: [] @@ -382,7 +369,7 @@ function _wrapComponent(id) { function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } -const MyComponent = _wrapComponent(\\"my-component\\")(React.createClass({ +const MyComponent = _wrapComponent('my-component')(React.createClass({ displayName: 'my-component', render: function () {} }));" @@ -394,25 +381,26 @@ exports[`finds React components should options custom factories 1`] = ` "const Foo = createClass({ displayName: 'Foo' }); + const Bar = factory({ displayName: 'Bar' });" `; exports[`finds React components should options custom factories with render method 1`] = ` -"var _transformLib = _interopRequireDefault(require(\\"transform-lib\\")).default; +"var _transformLib = _interopRequireDefault(require('transform-lib')).default; const _components = { Foo: { - displayName: \\"Foo\\" + displayName: 'Foo' }, Bar: { - displayName: \\"Bar\\" + displayName: 'Bar' } }; const _transformLib2 = _transformLib({ - filename: \\"unknown\\", + filename: 'unknown', components: _components, locals: [], imports: [] @@ -426,12 +414,12 @@ function _wrapComponent(id) { function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } -const Foo = _wrapComponent(\\"Foo\\")(createClass({ +const Foo = _wrapComponent('Foo')(createClass({ displayName: 'Foo', render: function () {} })); -const Bar = _wrapComponent(\\"Bar\\")(factory({ +const Bar = _wrapComponent('Bar')(factory({ displayName: 'Bar', render: function () {} }));" @@ -439,7 +427,6 @@ const Bar = _wrapComponent(\\"Bar\\")(factory({ exports[`finds React components should options custom super classes 1`] = ` "class Foo extends BooComponent {} - class Bar extends CustomComponent {}" `; @@ -472,16 +459,11 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de class Foo extends BooComponent { render() {} - } - Foo = _wrapComponent(\\"Foo\\")(Foo); - class Bar extends CustomComponent { render() {} - } - Bar = _wrapComponent(\\"Bar\\")(Bar);" `; @@ -522,9 +504,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de class Foo extends React.Component { render() {} - } - Foo = _wrapComponent(\\"Foo\\")(Foo);" `; @@ -560,9 +540,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de class Foo extends React.Component { render() {} - } - Foo = _wrapComponent(\\"Foo\\")(Foo);" `; @@ -594,8 +572,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de class Foo extends React.Component { render() {} - } - Foo = _wrapComponent(\\"Foo\\")(Foo);" `; diff --git a/packages/metro-babel7-plugin-react-transform/__tests__/babel-plugin-react-transform-test.js b/packages/metro-babel7-plugin-react-transform/__tests__/babel-plugin-react-transform-test.js index aaccea3f..773ef850 100644 --- a/packages/metro-babel7-plugin-react-transform/__tests__/babel-plugin-react-transform-test.js +++ b/packages/metro-babel7-plugin-react-transform/__tests__/babel-plugin-react-transform-test.js @@ -17,7 +17,7 @@ const fs = require('fs'); const path = require('path'); /*eslint-disable import/no-extraneous-dependencies*/ -const {transformSync} = require('@babel/core'); +const {transform: transformSync} = require('babel-core'); const reactPlugin = require('../lib/index.js').default; describe('finds React components', () => { diff --git a/packages/metro/src/babel-bridge.js b/packages/metro/src/babel-bridge.js index cb0f40a7..4fd76194 100644 --- a/packages/metro/src/babel-bridge.js +++ b/packages/metro/src/babel-bridge.js @@ -13,7 +13,7 @@ // This is a temporary migration bridge to switch between babel 6 and 7 -const IS_BABEL7 = true; // process.env.BABEL_VERSION === '7'; +const IS_BABEL7 = process.env.BABEL_VERSION === '7'; // ## Babel 6 stuff diff --git a/packages/metro/src/babelRegisterOnly.js b/packages/metro/src/babelRegisterOnly.js index d77d2256..4bb091e8 100644 --- a/packages/metro/src/babelRegisterOnly.js +++ b/packages/metro/src/babelRegisterOnly.js @@ -13,28 +13,31 @@ require('./setupNodePolyfills'); var _only = []; const PLUGINS = [ - require('@babel/plugin-transform-flow-strip-types'), - require('@babel/plugin-proposal-object-rest-spread'), - require('@babel/plugin-proposal-class-properties'), + 'transform-flow-strip-types', + 'transform-object-rest-spread', + 'transform-class-properties', ]; if (/^v[0-7]\./.test(process.version)) { - PLUGINS.push(require('@babel/plugin-transform-async-to-generator')); + PLUGINS.push( + 'transform-async-to-generator', + 'syntax-trailing-function-commas', + ); } function registerOnly(onlyList) { // This prevents `babel-register` from transforming the code of the // plugins/presets that we are require-ing themselves before setting up the // actual config. - require('@babel/register')({only: [], babelrc: false}); - require('@babel/register')(config(onlyList)); + require('babel-register')({only: [], babelrc: false}); + require('babel-register')(config(onlyList)); } function config(onlyList) { _only = _only.concat(onlyList); return { - presets: [], - plugins: PLUGINS, + presets: [require('babel-preset-es2015-node')], + plugins: PLUGINS.map(pluginName => require(`babel-plugin-${pluginName}`)), only: _only, retainLines: true, sourceMaps: 'inline', diff --git a/packages/metro/src/integration_tests/__tests__/__snapshots__/basic_bundle-test.js.snap b/packages/metro/src/integration_tests/__tests__/__snapshots__/basic_bundle-test.js.snap index 8a278f8a..aa17e9f4 100644 --- a/packages/metro/src/integration_tests/__tests__/__snapshots__/basic_bundle-test.js.snap +++ b/packages/metro/src/integration_tests/__tests__/__snapshots__/basic_bundle-test.js.snap @@ -45,7 +45,7 @@ exports[`basic_bundle bundles package with polyfills 1`] = ` function guardedLoadModule(moduleId, module) { if (!inGuard && global.ErrorUtils) { inGuard = true; - var returnValue; + var returnValue = void 0; try { returnValue = loadModuleImplementation(moduleId, module); @@ -108,7 +108,7 @@ exports[`basic_bundle bundles package with polyfills 1`] = ` try { if (PRINT_REQUIRE_PATHS) { - console.log(\`require file path \${module.path || 'unknown'}\`); + console.log(\\"require file path \\" + (module.path || 'unknown')); } var _moduleObject = { @@ -248,7 +248,7 @@ exports[`basic_bundle bundles package without polyfills 1`] = ` function guardedLoadModule(moduleId, module) { if (!inGuard && global.ErrorUtils) { inGuard = true; - var returnValue; + var returnValue = void 0; try { returnValue = loadModuleImplementation(moduleId, module); @@ -311,7 +311,7 @@ exports[`basic_bundle bundles package without polyfills 1`] = ` try { if (PRINT_REQUIRE_PATHS) { - console.log(\`require file path \${module.path || 'unknown'}\`); + console.log(\\"require file path \\" + (module.path || 'unknown')); } var _moduleObject = {