Move babel-preset-react-native to metro repository

Summary:
From now, `babel-preset-react-native` is going to be called `metro-react-native-babel-preset` and it's going to use the same versioning system that other metro packages.

This solves a few problems:

* Automated publishing of this package: Currently we have to publish this package manually from the RN repository, so it's hard to make changes to `babel-preset-react-native` and have them available on `metro` (the plugin version has to be manually updated, the package has to be manually published to npm and metro has to be change to depend on the new version).
* Transforming package code before publishing: By being in Metro repository, we're going to transform its source code before publishing it to npm automatically using the same infra as other metro packages, which is going to prevent issues like the current one with Node v6 due to trailing commas added by prettier: https://circleci.com/gh/facebook/metro/2125
* Workspace usage: Now, this package is not going to be installed via npm internally, but instead be used directly from the yarn workspace.

Reviewed By: mjesun

Differential Revision: D8677254

fbshipit-source-id: 14abdd218af64056625c5a997458bfe51d2101bc

packages/metro-react-native-babel-preset/README.md

@@ -0,0 +1,31 @@
+# metro-react-native-babel-preset
+
+Babel presets for React Native applications. React Native itself uses this Babel preset by default when transforming your app's source code.
+
+If you wish to use a custom Babel configuration by writing a `.babelrc` file in your project's root directory, you must specify all the plugins necessary to transform your code. React Native does not apply its default Babel configuration in this case. So, to make your life easier, you can use this preset to get the default configuration and then specify more plugins that run before it.
+
+## Usage
+
+As mentioned above, you only need to use this preset if you are writing a custom `.babelrc` file.
+
+### Installation
+
+Install `metro-react-native-babel-preset` in your app:
+```sh
+npm i metro-react-native-babel-preset --save-dev
+```
+
+### Configuring Babel
+
+Then, create a file called `.babelrc` in your project's root directory. The existence of this `.babelrc` file will tell React Native to use your custom Babel configuration instead of its own. Then load this preset:
+```
+{
+  "presets": ["metro-react-native-babel-preset"]
+}
+```
+
+You can further customize your Babel configuration by specifying plugins and other options. See [Babel's `.babelrc` documentation](https://babeljs.io/docs/usage/babelrc/) to learn more.
+
+## Help and Support
+
+If you get stuck configuring Babel, please ask a question on Stack Overflow or find a consultant for help. If you discover a bug, please open up an issue.

packages/metro-react-native-babel-preset/configs/hmr.js

@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+'use strict';
+
+var path = require('path');
+
+var hmrTransform = 'react-transform-hmr/lib/index.js';
+var transformPath = require.resolve(hmrTransform);
+
+module.exports = function(options, filename) {
+  var transform = filename
+    ? './' + path.relative(path.dirname(filename), transformPath) // packager can't handle absolute paths
+    : hmrTransform;
+
+  // Fix the module path to use '/' on Windows.
+  if (path.sep === '\\') {
+    transform = transform.replace(/\\/g, '/');
+  }
+
+  return {
+    plugins: [
+      [
+        require('metro-babel7-plugin-react-transform'),
+        {
+          transforms: [
+            {
+              transform,
+              imports: ['react'],
+              locals: ['module'],
+            },
+          ],
+        },
+      ],
+    ],
+  };
+};

packages/metro-react-native-babel-preset/configs/main.js

@@ -0,0 +1,132 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+'use strict';
+
+const defaultPlugins = [
+  [require('@babel/plugin-transform-block-scoping')],
+  // the flow strip types plugin must go BEFORE class properties!
+  // there'll be a test case that fails if you don't.
+  [require('@babel/plugin-transform-flow-strip-types')],
+  [
+    require('@babel/plugin-proposal-class-properties'),
+    // use `this.foo = bar` instead of `this.defineProperty('foo', ...)`
+    {loose: true},
+  ],
+  [require('@babel/plugin-transform-computed-properties')],
+  [require('@babel/plugin-transform-destructuring')],
+  [require('@babel/plugin-transform-function-name')],
+  [require('@babel/plugin-transform-literals')],
+  [require('@babel/plugin-transform-parameters')],
+  [require('@babel/plugin-transform-shorthand-properties')],
+  [require('@babel/plugin-transform-react-jsx')],
+  [require('@babel/plugin-transform-regenerator')],
+  [require('@babel/plugin-transform-sticky-regex')],
+  [require('@babel/plugin-transform-unicode-regex')],
+  [
+    require('@babel/plugin-transform-modules-commonjs'),
+    {
+      strict: false,
+      strictMode: false, // prevent "use strict" injections
+      allowTopLevelThis: true, // dont rewrite global `this` -> `undefined`
+    },
+  ],
+];
+
+const es2015ArrowFunctions = [
+  require('@babel/plugin-transform-arrow-functions'),
+];
+const es2015Classes = [require('@babel/plugin-transform-classes')];
+const es2015ForOf = [require('@babel/plugin-transform-for-of'), {loose: true}];
+const es2015Spread = [require('@babel/plugin-transform-spread')];
+const es2015TemplateLiterals = [
+  require('@babel/plugin-transform-template-literals'),
+  {loose: true}, // dont 'a'.concat('b'), just use 'a'+'b'
+];
+const exponentiationOperator = [
+  require('@babel/plugin-transform-exponentiation-operator'),
+];
+const objectAssign = [require('@babel/plugin-transform-object-assign')];
+const objectRestSpread = [require('@babel/plugin-proposal-object-rest-spread')];
+const optionalChaining = [require('@babel/plugin-proposal-optional-chaining')];
+const reactDisplayName = [
+  require('@babel/plugin-transform-react-display-name'),
+];
+const reactJsxSource = [require('@babel/plugin-transform-react-jsx-source')];
+const symbolMember = [require('../transforms/transform-symbol-member')];
+
+const getPreset = (src, options) => {
+  const isNull = src == null;
+  const hasClass = isNull || src.indexOf('class') !== -1;
+  const hasForOf =
+    isNull || (src.indexOf('for') !== -1 && src.indexOf('of') !== -1);
+
+  const extraPlugins = [];
+
+  if (hasClass) {
+    extraPlugins.push(es2015Classes);
+  }
+  if (isNull || src.indexOf('=>') !== -1) {
+    extraPlugins.push(es2015ArrowFunctions);
+  }
+  if (isNull || hasClass || src.indexOf('...') !== -1) {
+    extraPlugins.push(es2015Spread);
+    extraPlugins.push(objectRestSpread);
+  }
+  if (isNull || src.indexOf('`') !== -1) {
+    extraPlugins.push(es2015TemplateLiterals);
+  }
+  if (isNull || src.indexOf('**') !== -1) {
+    extraPlugins.push(exponentiationOperator);
+  }
+  if (isNull || src.indexOf('Object.assign') !== -1) {
+    extraPlugins.push(objectAssign);
+  }
+  if (hasForOf) {
+    extraPlugins.push(es2015ForOf);
+  }
+  if (hasForOf || src.indexOf('Symbol') !== -1) {
+    extraPlugins.push(symbolMember);
+  }
+  if (
+    isNull ||
+    src.indexOf('React.createClass') !== -1 ||
+    src.indexOf('createReactClass') !== -1
+  ) {
+    extraPlugins.push(reactDisplayName);
+  }
+  if (isNull || src.indexOf('?.') !== -1) {
+    extraPlugins.push(optionalChaining);
+  }
+
+  if (options && options.dev) {
+    extraPlugins.push(reactJsxSource);
+  }
+
+  return {
+    comments: false,
+    compact: true,
+    plugins: defaultPlugins.concat(extraPlugins),
+  };
+};
+
+const base = getPreset(null);
+const devTools = getPreset(null, {dev: true});
+
+module.exports = options => {
+  if (options.withDevTools == null) {
+    const env = process.env.BABEL_ENV || process.env.NODE_ENV;
+    if (!env || env === 'development') {
+      return devTools;
+    }
+  }
+  return base;
+};
+
+module.exports.getPreset = getPreset;

packages/metro-react-native-babel-preset/index.js

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+'use strict';
+
+module.exports = require('./configs/main');

packages/metro-react-native-babel-preset/lib/resolvePlugins.js

@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+'use strict';
+
+/**
+ * Manually resolve all default Babel plugins.
+ * `babel.transform` will attempt to resolve all base plugins relative to
+ * the file it's compiling. This makes sure that we're using the plugins
+ * installed in the react-native package.
+ */
+function resolvePlugins(plugins, prefix) {
+  return plugins.map(plugin => resolvePlugin(plugin, prefix));
+}
+
+/**
+ * Manually resolve a single Babel plugin.
+ */
+function resolvePlugin(plugin, prefix = '@babel/plugin-') {
+  // Normalise plugin to an array.
+  if (!Array.isArray(plugin)) {
+    plugin = [plugin];
+  }
+  // Only resolve the plugin if it's a string reference.
+  if (typeof plugin[0] === 'string') {
+    plugin[0] = require(prefix + plugin[0]);
+    plugin[0] = plugin[0].__esModule ? plugin[0].default : plugin[0];
+  }
+  return plugin;
+}
+
+module.exports = resolvePlugins;
+module.exports.resolvePlugin = resolvePlugin;
+module.exports.resolvePluginAs = (prefix, plugin) =>
+  resolvePlugin(plugin, prefix);
+module.exports.resolvePluginsAs = (prefix, plugins) =>
+  resolvePlugins(plugins, prefix);

packages/metro-react-native-babel-preset/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "metro-react-native-babel-preset",
+  "version": "0.40.1",
+  "description": "Babel preset for React Native applications",
+  "main": "index.js",
+  "repository": {
+    "type": "git",
+    "url": "[email protected]:facebook/metro.git"
+  },
+  "scripts": {
+    "prepare-release": "test -d build && rm -rf src.real && mv src src.real && mv build src",
+    "cleanup-release": "test ! -e build && mv src build && mv src.real src"
+  },
+  "keywords": [
+    "babel",
+    "preset",
+    "react-native"
+  ],
+  "license": "MIT",
+  "dependencies": {
+    "@babel/plugin-proposal-class-properties": "7.0.0-beta.47",
+    "@babel/plugin-proposal-object-rest-spread": "7.0.0-beta.47",
+    "@babel/plugin-proposal-optional-chaining": "7.0.0-beta.47",
+    "@babel/plugin-transform-arrow-functions": "7.0.0-beta.47",
+    "@babel/plugin-transform-block-scoping": "7.0.0-beta.47",
+    "@babel/plugin-transform-classes": "7.0.0-beta.47",
+    "@babel/plugin-transform-computed-properties": "7.0.0-beta.47",
+    "@babel/plugin-transform-destructuring": "7.0.0-beta.47",
+    "@babel/plugin-transform-exponentiation-operator": "7.0.0-beta.47",
+    "@babel/plugin-transform-flow-strip-types": "7.0.0-beta.47",
+    "@babel/plugin-transform-for-of": "7.0.0-beta.47",
+    "@babel/plugin-transform-function-name": "7.0.0-beta.47",
+    "@babel/plugin-transform-literals": "7.0.0-beta.47",
+    "@babel/plugin-transform-modules-commonjs": "7.0.0-beta.47",
+    "@babel/plugin-transform-object-assign": "7.0.0-beta.47",
+    "@babel/plugin-transform-parameters": "7.0.0-beta.47",
+    "@babel/plugin-transform-react-display-name": "7.0.0-beta.47",
+    "@babel/plugin-transform-react-jsx": "7.0.0-beta.47",
+    "@babel/plugin-transform-react-jsx-source": "7.0.0-beta.47",
+    "@babel/plugin-transform-regenerator": "7.0.0-beta.47",
+    "@babel/plugin-transform-shorthand-properties": "7.0.0-beta.47",
+    "@babel/plugin-transform-spread": "7.0.0-beta.47",
+    "@babel/plugin-transform-sticky-regex": "7.0.0-beta.47",
+    "@babel/plugin-transform-template-literals": "7.0.0-beta.47",
+    "@babel/plugin-transform-unicode-regex": "7.0.0-beta.47",
+    "@babel/template": "7.0.0-beta.47",
+    "metro-babel7-plugin-react-transform": "0.40.1"
+  }
+}

packages/metro-react-native-babel-preset/plugins.js

@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ * @format
+ */
+'use strict';
+
+module.exports = {
+  '@babel/plugin-proposal-class-properties': require('@babel/plugin-proposal-class-properties'),
+  '@babel/plugin-proposal-object-rest-spread': require('@babel/plugin-proposal-object-rest-spread'),
+  '@babel/plugin-transform-arrow-functions': require('@babel/plugin-transform-arrow-functions'),
+  '@babel/plugin-transform-block-scoping': require('@babel/plugin-transform-block-scoping'),
+  '@babel/plugin-transform-classes': require('@babel/plugin-transform-classes'),
+  '@babel/plugin-transform-computed-properties': require('@babel/plugin-transform-computed-properties'),
+  '@babel/plugin-transform-destructuring': require('@babel/plugin-transform-destructuring'),
+  '@babel/plugin-transform-exponentiation-operator': require('@babel/plugin-transform-exponentiation-operator'),
+  '@babel/plugin-transform-flow-strip-types': require('@babel/plugin-transform-flow-strip-types'),
+  '@babel/plugin-transform-for-of': require('@babel/plugin-transform-for-of'),
+  '@babel/plugin-transform-function-name': require('@babel/plugin-transform-function-name'),
+  '@babel/plugin-transform-literals': require('@babel/plugin-transform-literals'),
+  '@babel/plugin-transform-modules-commonjs': require('@babel/plugin-transform-modules-commonjs'),
+  '@babel/plugin-transform-object-assign': require('@babel/plugin-transform-object-assign'),
+  '@babel/plugin-transform-parameters': require('@babel/plugin-transform-parameters'),
+  '@babel/plugin-transform-shorthand-properties': require('@babel/plugin-transform-shorthand-properties'),
+  '@babel/plugin-transform-react-display-name': require('@babel/plugin-transform-react-display-name'),
+  '@babel/plugin-transform-react-jsx': require('@babel/plugin-transform-react-jsx'),
+  '@babel/plugin-transform-react-jsx-source': require('@babel/plugin-transform-react-jsx-source'),
+  '@babel/plugin-transform-regenerator': require('@babel/plugin-transform-regenerator'),
+  '@babel/plugin-transform-spread': require('@babel/plugin-transform-spread'),
+  '@babel/plugin-transform-sticky-regex': require('@babel/plugin-transform-sticky-regex'),
+  '@babel/plugin-transform-unicode-regex': require('@babel/plugin-transform-unicode-regex'),
+  '@babel/plugin-transform-template-literals': require('@babel/plugin-transform-template-literals'),
+};