diff --git a/docs/GettingStarted.md b/docs/GettingStarted.md index 1bc935ee..353c1712 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 {transform} = require('@babel/core'); +const {transformSync} = 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 0c32ee91..f5332f60 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,23 +31,24 @@ 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 () {} });" @@ -85,22 +86,24 @@ 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: [] @@ -113,22 +116,25 @@ 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: [] @@ -141,10 +147,13 @@ 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 {}"`; @@ -175,13 +184,16 @@ 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() {} + }" `; @@ -219,6 +231,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de function factory() { return _wrapComponent(\\"Foo\\")(class Foo extends React.Component { render() {} + }); }" `; @@ -249,6 +262,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de const Foo = _wrapComponent(\\"_component\\")(class extends React.Component { render() {} + });" `; @@ -259,15 +273,16 @@ 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' }); @@ -281,7 +296,6 @@ const myCreateClass = spec => { const spec = { render: function () {} }; - React.createClass(spec);" `; @@ -289,7 +303,6 @@ exports[`finds React components should code react create class 1`] = ` "const Foo = React.createClass({ displayName: 'Foo' }); - React.createClass({});" `; @@ -300,18 +313,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: [] @@ -325,16 +338,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 () {} }));" `; @@ -346,16 +359,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: [] @@ -369,7 +382,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 () {} }));" @@ -381,26 +394,25 @@ 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: [] @@ -414,12 +426,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 () {} }));" @@ -427,6 +439,7 @@ const Bar = _wrapComponent('Bar')(factory({ exports[`finds React components should options custom super classes 1`] = ` "class Foo extends BooComponent {} + class Bar extends CustomComponent {}" `; @@ -459,11 +472,16 @@ 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);" `; @@ -504,7 +522,9 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de class Foo extends React.Component { render() {} + } + Foo = _wrapComponent(\\"Foo\\")(Foo);" `; @@ -540,7 +560,9 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de class Foo extends React.Component { render() {} + } + Foo = _wrapComponent(\\"Foo\\")(Foo);" `; @@ -572,6 +594,8 @@ 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 773ef850..aaccea3f 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 {transform: transformSync} = require('babel-core'); +const {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 4fd76194..cb0f40a7 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 = process.env.BABEL_VERSION === '7'; +const IS_BABEL7 = true; // process.env.BABEL_VERSION === '7'; // ## Babel 6 stuff diff --git a/packages/metro/src/babelRegisterOnly.js b/packages/metro/src/babelRegisterOnly.js index 4bb091e8..9fbb9cc7 100644 --- a/packages/metro/src/babelRegisterOnly.js +++ b/packages/metro/src/babelRegisterOnly.js @@ -13,31 +13,29 @@ require('./setupNodePolyfills'); var _only = []; const PLUGINS = [ - 'transform-flow-strip-types', - 'transform-object-rest-spread', - 'transform-class-properties', + require('@babel/plugin-transform-flow-strip-types'), + require('@babel/plugin-proposal-object-rest-spread'), + require('@babel/plugin-proposal-class-properties'), + require('@babel/plugin-transform-modules-commonjs'), ]; if (/^v[0-7]\./.test(process.version)) { - PLUGINS.push( - 'transform-async-to-generator', - 'syntax-trailing-function-commas', - ); + PLUGINS.push(require('@babel/plugin-transform-async-to-generator')); } 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: [require('babel-preset-es2015-node')], - plugins: PLUGINS.map(pluginName => require(`babel-plugin-${pluginName}`)), + presets: [], + plugins: PLUGINS, 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 aa17e9f4..8a278f8a 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 = void 0; + var returnValue; 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 = void 0; + var returnValue; 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 = {