babel-preset-expo 8.4.0 → 9.0.0

package/README.md

@@ -42,6 +42,42 @@ If the `bundler` is not defined, it will default to checking if a `babel-loader`
 
 ## Options
 
+### [`jsxRuntime`](https://babeljs.io/docs/en/babel-plugin-transform-react-jsx#runtime)
+
+`classic | automatic`, defaults to `automatic`
+
+- `automatic` automatically convert JSX to JS without the need to `import React from 'react'` in every file. Be sure to follow the rest of the [setup guide](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#how-to-upgrade-to-the-new-jsx-transform) after enabling this, otherwise ESLint and other tools will throw warnings.
+- `classic` does not automatically import anything, React must imported into every file that uses JSX syntax.
+
+```js
+[
+  'babel-preset-expo',
+  {
+    jsxRuntime: 'classic',
+  },
+];
+```
+
+This property is passed down to [`@babel/plugin-transform-react-jsx`](https://babeljs.io/docs/en/babel-plugin-transform-react-jsx). This flag does nothing when `native.useTransformReactJSXExperimental` is set to `true` because `@babel/plugin-transform-react-jsx` is omitted.
+
+### [`jsxImportSource`](https://babeljs.io/docs/en/babel-plugin-transform-react-jsx#importsource)
+
+`string`, defaults to `react`
+
+This option allows specifying a custom import source for importing functions. 
+
+```js
+[
+  'babel-preset-expo',
+  {
+    jsxRuntime: 'automatic',
+    importSource: 'react',
+  },
+];
+```
+
+This property is passed down to [`@babel/plugin-transform-react-jsx`](https://babeljs.io/docs/en/babel-plugin-transform-react-jsx). This options does nothing when `jsxRuntime` is not set to `automatic`.
+
 ### [`lazyImports`](https://babeljs.io/docs/en/babel-plugin-transform-modules-commonjs#lazy)
 
 Changes Babel's compiled `import` statements to be lazily evaluated when their imported bindings are used for the first time.

package/index.js

@@ -1,6 +1,8 @@
 const lazyImportsBlacklist = require('./lazy-imports-blacklist');
 
-module.exports = function(api, options = {}) {
+let hasWarnedJsxRename = false;
+
+module.exports = function (api, options = {}) {
   const { web = {}, native = {} } = options;
 
   const bundler = api.caller(getBundler);
@@ -22,6 +24,37 @@ module.exports = function(api, options = {}) {
   // `metro-react-native-babel-preset` will handle it.
   const lazyImportsOption = options && options.lazyImports;
 
+  const extraPlugins = [];
+
+  if ('useTransformReactJsxExperimental' in platformOptions && !hasWarnedJsxRename) {
+    // https://github.com/expo/expo/pull/13945#pullrequestreview-724327024
+    hasWarnedJsxRename = true;
+    console.warn(
+      'Warning: useTransformReactJsxExperimental has been renamed to useTransformReactJSXExperimental (capitalized JSX) in react-native@0.64.0'
+    );
+  }
+
+  // Set true to disable `@babel/plugin-transform-react-jsx`
+  // we override this logic outside of the metro preset so we can add support for
+  // React 17 automatic JSX transformations.
+  // If the logic for `useTransformReactJSXExperimental` ever changes in `metro-react-native-babel-preset`
+  // then this block should be updated to reflect those changes.
+  if (!platformOptions.useTransformReactJSXExperimental) {
+    extraPlugins.push([
+      require('@babel/plugin-transform-react-jsx'),
+      {
+        // Defaults to `automatic`, pass in `classic` to disable auto JSX transformations.
+        runtime: (options && options.jsxRuntime) || 'automatic',
+        ...(options?.jsxRuntime !== 'classic' && {
+          importSource: (options && options.jsxImportSource) || 'react',
+        }),
+      },
+    ]);
+    // Purposefully not adding the deprecated packages:
+    // `@babel/plugin-transform-react-jsx-self` and `@babel/plugin-transform-react-jsx-source`
+    // back to the preset.
+  }
+
   return {
     presets: [
       [
@@ -39,12 +72,19 @@ module.exports = function(api, options = {}) {
           enableBabelRuntime: platformOptions.enableBabelRuntime,
           // Defaults to `'default'`, can also use `'hermes-canary'`
           unstable_transformProfile: platformOptions.unstable_transformProfile,
-          // Set true to disable `@babel/plugin-transform-react-jsx`
-          useTransformReactJsxExperimental: platformOptions.useTransformReactJsxExperimental,
+          // Set true to disable `@babel/plugin-transform-react-jsx` and
+          // the deprecated packages `@babel/plugin-transform-react-jsx-self`, and `@babel/plugin-transform-react-jsx-source`.
+          //
+          // Otherwise, you'll sometime get errors like the following (starting in Expo SDK 43, React Native 64, React 17):
+          //
+          // TransformError App.js: /path/to/App.js: Duplicate __self prop found. You are most likely using the deprecated transform-react-jsx-self Babel plugin.
+          // Both __source and __self are automatically set when using the automatic jsxRuntime. Please remove transform-react-jsx-source and transform-react-jsx-self from your Babel config.
+          useTransformReactJSXExperimental: true,
+
           disableImportExportTransform: platformOptions.disableImportExportTransform,
           lazyImportExportTransform:
             lazyImportsOption === true
-              ? importModuleSpecifier => {
+              ? (importModuleSpecifier) => {
                   // Do not lazy-initialize packages that are local imports (similar to `lazy: true`
                   // behavior) or are in the blacklist.
                   return !(
@@ -59,6 +99,8 @@ module.exports = function(api, options = {}) {
       ],
     ],
     plugins: [
+      getObjectRestSpreadPlugin(),
+      ...extraPlugins,
       getAliasPlugin(),
       [require.resolve('@babel/plugin-proposal-decorators'), { legacy: true }],
       platform === 'web' && [require.resolve('babel-plugin-react-native-web')],
@@ -85,6 +127,15 @@ function getAliasPlugin() {
   return null;
 }
 
+/**
+ * metro-react-native-babel-preset configures this plugin with `{ loose: true }`, which breaks all
+ * getters and setters in spread objects. We need to add this plugin ourself without that option.
+ * @see https://github.com/expo/expo/pull/11960#issuecomment-887796455
+ */
+function getObjectRestSpreadPlugin() {
+  return [require.resolve('@babel/plugin-proposal-object-rest-spread'), { loose: false }];
+}
+
 function hasModule(name) {
   try {
     return !!require.resolve(name);
@@ -114,8 +165,11 @@ function getBundler(caller) {
     if (name === 'metro') {
       // This is a hack to determine if metro is being used.
       return 'metro';
+    } else if (name === 'next-babel-turbo-loader') {
+      // NextJS 11
+      return 'webpack';
     } else if (name === 'babel-loader') {
-      // This won't work in all cases as tools like Next.js could change the name of their loader.
+      // expo/webpack-config, gatsby, storybook, and next.js <10
       return 'webpack';
     }
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "babel-preset-expo",
-  "version": "8.4.0",
+  "version": "9.0.0",
   "description": "The Babel preset for Expo projects",
   "main": "index.js",
   "files": [
@@ -45,15 +45,16 @@
     ]
   },
   "dependencies": {
-    "@babel/plugin-proposal-decorators": "^7.6.0",
-    "@babel/preset-env": "^7.6.3",
-    "babel-plugin-module-resolver": "^3.2.0",
-    "babel-plugin-react-native-web": "~0.13.6",
-    "metro-react-native-babel-preset": "~0.59.0"
+    "@babel/plugin-proposal-decorators": "^7.12.9",
+    "@babel/plugin-transform-react-jsx": "^7.12.17",
+    "@babel/preset-env": "^7.12.9",
+    "babel-plugin-module-resolver": "^4.1.0",
+    "babel-plugin-react-native-web": "~0.17.1",
+    "metro-react-native-babel-preset": "~0.64.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.6.4",
-    "jest": "^25.2.0"
+    "@babel/core": "^7.12.9",
+    "jest": "^26.6.3"
   },
-  "gitHead": "03d9022d47660e60ffd99562b28a9854939e79e6"
+  "gitHead": "2e5c6983b86d5ecfca028ba64002897d8adc2cc4"
 }