babel-preset-expo 9.8.0 → 9.9.0

package/README.md

@@ -62,7 +62,7 @@ If the `bundler` is not defined, it will default to checking if a `babel-loader`
 ];
 ```
 
-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.
+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 `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)
 
@@ -115,7 +115,7 @@ The value of `lazyImports` has a few possible effects:
 ],
 ```
 
-### `web.disableImportExportTransform`
+### `disableImportExportTransform`
 
 Enabling this option will allow your project to run with older JavaScript syntax (i.e. `module.exports`). This option will break tree shaking and increase your bundle size, but will eliminate the following error when `module.exports` is used:
 
@@ -127,7 +127,40 @@ Enabling this option will allow your project to run with older JavaScript syntax
 [
     'babel-preset-expo',
     {
-        web: { disableImportExportTransform: true }
+        disableImportExportTransform: true
     }
 ],
 ```
+
+### `unstable_transformProfile`
+
+Changes the engine preset in `metro-react-native-babel-preset` based on the JavaScript engine that is being targeted. In Expo SDK 50 and greater, this is automatically set based on the [`jsEngine`](https://docs.expo.dev/versions/latest/config/app/#jsengine) option in your `app.json`.
+
+### `enableBabelRuntime`
+
+Passed to `metro-react-native-babel-preset`.
+
+### `disableFlowStripTypesTransform`
+
+Passed to `metro-react-native-babel-preset`.
+
+## Platform-specific options
+
+All options can be passed in the platform-specific objects `native` and `web` to provide different settings on different platforms. For example, if you'd like to only apply `disableImportExportTransform` on web, use the following:
+
+```js
+[
+  'babel-preset-expo',
+  {
+    // Default value:
+    disableImportExportTransform: false,
+
+    web: {
+      // Web-specific value:
+      disableImportExportTransform: true,
+    },
+  },
+];
+```
+
+Platform-specific options have higher priority over top-level options.

package/build/common.d.ts

@@ -3,3 +3,8 @@ export declare function hasModule(name: string): boolean;
 export declare function getBundler(caller: any): any;
 export declare function getPlatform(caller: any): any;
 export declare function getPossibleProjectRoot(caller: any): any;
+export declare function getIsDev(caller: any): any;
+export declare function getIsProd(caller: any): boolean;
+export declare function getBaseUrl(caller: any): string;
+export declare function getIsServer(caller: any): any;
+export declare function getInlineEnvVarsEnabled(caller: any): boolean;

package/build/common.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getPossibleProjectRoot = exports.getPlatform = exports.getBundler = exports.hasModule = void 0;
+exports.getInlineEnvVarsEnabled = exports.getIsServer = exports.getBaseUrl = exports.getIsProd = exports.getIsDev = exports.getPossibleProjectRoot = exports.getPlatform = exports.getBundler = exports.hasModule = void 0;
 function hasModule(name) {
     try {
         return !!require.resolve(name);
@@ -52,3 +52,35 @@ function getPossibleProjectRoot(caller) {
     return process.env.EXPO_PROJECT_ROOT;
 }
 exports.getPossibleProjectRoot = getPossibleProjectRoot;
+function getIsDev(caller) {
+    if (caller?.isDev != null)
+        return caller.isDev;
+    // https://babeljs.io/docs/options#envname
+    return process.env.BABEL_ENV === 'development' || process.env.NODE_ENV === 'development';
+}
+exports.getIsDev = getIsDev;
+function getIsProd(caller) {
+    if (caller?.isDev != null)
+        return caller.isDev === false;
+    // https://babeljs.io/docs/options#envname
+    return process.env.BABEL_ENV === 'production' || process.env.NODE_ENV === 'production';
+}
+exports.getIsProd = getIsProd;
+function getBaseUrl(caller) {
+    return caller?.baseUrl ?? '';
+}
+exports.getBaseUrl = getBaseUrl;
+function getIsServer(caller) {
+    return caller?.isServer ?? false;
+}
+exports.getIsServer = getIsServer;
+function getInlineEnvVarsEnabled(caller) {
+    const isWebpack = getBundler(caller) === 'webpack';
+    const isDev = getIsDev(caller);
+    const isServer = getIsServer(caller);
+    const preserveEnvVars = caller?.preserveEnvVars;
+    // Development env vars are added in the serializer to avoid caching issues in development.
+    // Servers have env vars left as-is to read from the environment.
+    return !isWebpack && !isDev && !isServer && !preserveEnvVars;
+}
+exports.getInlineEnvVarsEnabled = getInlineEnvVarsEnabled;

package/build/index.d.ts

@@ -1,18 +1,23 @@
 import { ConfigAPI, TransformOptions } from '@babel/core';
 type BabelPresetExpoPlatformOptions = {
+    /** Enable or disable adding the Reanimated plugin by default. @default `true` */
+    reanimated?: boolean;
+    /** @deprecated Set `jsxRuntime: 'classic'` to disable automatic JSX handling.  */
     useTransformReactJSXExperimental?: boolean;
+    /** Change the policy for handling JSX in a file. Passed to `plugin-transform-react-jsx`. @default `'automatic'` */
+    jsxRuntime?: 'classic' | 'automatic';
+    /** Change the source module ID to use when importing an automatic JSX import. Only applied when `jsxRuntime` is `'automatic'` (default). Passed to `plugin-transform-react-jsx`. @default `'react'` */
+    jsxImportSource?: string;
+    lazyImports?: boolean;
     disableImportExportTransform?: boolean;
-    withDevTools?: boolean;
     disableFlowStripTypesTransform?: boolean;
     enableBabelRuntime?: boolean;
     unstable_transformProfile?: 'default' | 'hermes-stable' | 'hermes-canary';
 };
-export type BabelPresetExpoOptions = {
-    lazyImports?: boolean;
-    reanimated?: boolean;
-    jsxRuntime?: 'classic' | 'automatic';
-    jsxImportSource?: string;
+export type BabelPresetExpoOptions = BabelPresetExpoPlatformOptions & {
+    /** Web-specific settings. */
     web?: BabelPresetExpoPlatformOptions;
+    /** Native-specific settings. */
     native?: BabelPresetExpoPlatformOptions;
 };
 declare function babelPresetExpo(api: ConfigAPI, options?: BabelPresetExpoOptions): TransformOptions;

package/build/index.js

@@ -3,34 +3,48 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const common_1 = require("./common");
 const expo_inline_manifest_plugin_1 = require("./expo-inline-manifest-plugin");
 const expo_router_plugin_1 = require("./expo-router-plugin");
+const inline_env_vars_1 = require("./inline-env-vars");
 const lazyImports_1 = require("./lazyImports");
+function getOptions(options, platform) {
+    const tag = platform === 'web' ? 'web' : 'native';
+    return {
+        ...options,
+        ...options[tag],
+    };
+}
 function babelPresetExpo(api, options = {}) {
-    const { web = {}, native = {}, reanimated } = options;
     const bundler = api.caller(common_1.getBundler);
     const isWebpack = bundler === 'webpack';
     let platform = api.caller((caller) => caller?.platform);
     const engine = api.caller((caller) => caller?.engine) ?? 'default';
+    const isDev = api.caller(common_1.getIsDev);
+    const baseUrl = api.caller(common_1.getBaseUrl);
+    // Unlike `isDev`, this will be `true` when the bundler is explicitly set to `production`,
+    // i.e. `false` when testing, development, or used with a bundler that doesn't specify the correct inputs.
+    const isProduction = api.caller(common_1.getIsProd);
+    const inlineEnvironmentVariables = api.caller(common_1.getInlineEnvVarsEnabled);
     // If the `platform` prop is not defined then this must be a custom config that isn't
     // defining a platform in the babel-loader. Currently this may happen with Next.js + Expo web.
     if (!platform && isWebpack) {
         platform = 'web';
     }
-    const platformOptions = platform === 'web'
-        ? {
+    const platformOptions = getOptions(options, platform);
+    if (platformOptions.disableImportExportTransform == null) {
+        if (platform === 'web') {
             // Only disable import/export transform when Webpack is used because
             // Metro does not support tree-shaking.
-            disableImportExportTransform: isWebpack,
-            unstable_transformProfile: engine === 'hermes' ? 'hermes-stable' : 'default',
-            ...web,
+            platformOptions.disableImportExportTransform = isWebpack;
         }
-        : {
-            disableImportExportTransform: false,
-            unstable_transformProfile: engine === 'hermes' ? 'hermes-stable' : 'default',
-            ...native,
-        };
+        else {
+            platformOptions.disableImportExportTransform = false;
+        }
+    }
+    if (platformOptions.unstable_transformProfile == null) {
+        platformOptions.unstable_transformProfile = engine === 'hermes' ? 'hermes-stable' : 'default';
+    }
     // Note that if `options.lazyImports` is not set (i.e., `null` or `undefined`),
     // `metro-react-native-babel-preset` will handle it.
-    const lazyImportsOption = options?.lazyImports;
+    const lazyImportsOption = platformOptions?.lazyImports;
     const extraPlugins = [];
     if (engine !== 'hermes') {
         // `metro-react-native-babel-preset` configures this plugin with `{ loose: true }`, which breaks all
@@ -41,31 +55,52 @@ function babelPresetExpo(api, options = {}) {
             { loose: false },
         ]);
     }
-    // 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) {
+    else {
+        // This is added back on hermes to ensure the react-jsx-dev plugin (`@babel/preset-react`) works as expected when
+        // JSX is used in a function body. This is technically not required in production, but we
+        // should retain the same behavior since it's hard to debug the differences.
+        extraPlugins.push(require('@babel/plugin-transform-parameters'));
+    }
+    if (isProduction && (0, common_1.hasModule)('metro-transform-plugins')) {
+        // Metro applies this plugin too but it does it after the imports have been transformed which breaks
+        // the plugin. Here, we'll apply it before the commonjs transform, in production, to ensure `Platform.OS`
+        // is replaced with a string literal and `__DEV__` is converted to a boolean.
+        // Applying early also means that web can be transformed before the `react-native-web` transform mutates the import.
         extraPlugins.push([
-            require('@babel/plugin-transform-react-jsx'),
+            require('metro-transform-plugins/src/inline-plugin.js'),
             {
-                // Defaults to `automatic`, pass in `classic` to disable auto JSX transformations.
-                runtime: (options && options.jsxRuntime) || 'automatic',
-                ...(options &&
-                    options.jsxRuntime !== 'classic' && {
-                    importSource: (options && options.jsxImportSource) || 'react',
-                }),
+                dev: isDev,
+                inlinePlatform: true,
+                platform,
             },
         ]);
-        // Purposefully not adding the deprecated packages:
-        // `@babel/plugin-transform-react-jsx-self` and `@babel/plugin-transform-react-jsx-source`
-        // back to the preset.
+    }
+    if (platformOptions.useTransformReactJSXExperimental != null) {
+        throw new Error(`babel-preset-expo: The option 'useTransformReactJSXExperimental' has been removed in favor of { jsxRuntime: 'classic' }.`);
     }
     const aliasPlugin = getAliasPlugin();
     if (aliasPlugin) {
         extraPlugins.push(aliasPlugin);
     }
+    // Allow jest tests to redefine the environment variables.
+    if (process.env.NODE_ENV !== 'test') {
+        extraPlugins.push([
+            inline_env_vars_1.expoInlineTransformEnvVars,
+            {
+                // These values should not be prefixed with `EXPO_PUBLIC_`, so we don't
+                // squat user-defined environment variables.
+                EXPO_BASE_URL: baseUrl,
+            },
+        ]);
+    }
+    // Only apply in non-server, for metro-only, in production environments, when the user hasn't disabled the feature.
+    // Webpack uses DefinePlugin for environment variables.
+    // Development uses an uncached serializer.
+    // Servers read from the environment.
+    // Users who disable the feature may be using a different babel plugin.
+    if (inlineEnvironmentVariables) {
+        extraPlugins.push(inline_env_vars_1.expoInlineEnvVars);
+    }
     if (platform === 'web') {
         extraPlugins.push(require.resolve('babel-plugin-react-native-web'));
         // Webpack uses the DefinePlugin to provide the manifest to `expo-constants`.
@@ -85,8 +120,6 @@ function babelPresetExpo(api, options = {}) {
                 // Reference: https://github.com/expo/expo/pull/4685#discussion_r307143920
                 require('metro-react-native-babel-preset'),
                 {
-                    // Defaults to undefined, set to something truthy to disable `@babel/plugin-transform-react-jsx-self` and `@babel/plugin-transform-react-jsx-source`.
-                    withDevTools: platformOptions.withDevTools,
                     // Defaults to undefined, set to `true` to disable `@babel/plugin-transform-flow-strip-types`
                     disableFlowStripTypesTransform: platformOptions.disableFlowStripTypesTransform,
                     // Defaults to undefined, set to `false` to disable `@babel/plugin-transform-runtime`
@@ -101,6 +134,9 @@ function babelPresetExpo(api, options = {}) {
                     // 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,
+                    // This will never be used regardless because `useTransformReactJSXExperimental` is set to `true`.
+                    // https://github.com/facebook/react-native/blob/a4a8695cec640e5cf12be36a0c871115fbce9c87/packages/react-native-babel-preset/src/configs/main.js#L151
+                    withDevTools: false,
                     disableImportExportTransform: platformOptions.disableImportExportTransform,
                     lazyImportExportTransform: lazyImportsOption === true
                         ? (importModuleSpecifier) => {
@@ -113,16 +149,40 @@ function babelPresetExpo(api, options = {}) {
                             lazyImportsOption,
                 },
             ],
+            // React support with similar options to Metro.
+            // We override this logic outside of the metro preset so we can add support for
+            // React 17 automatic JSX transformations.
+            // The only known issue is the plugin `@babel/plugin-transform-react-display-name` will be run twice,
+            // once in the Metro plugin, and another time here.
+            [
+                require('@babel/preset-react'),
+                {
+                    development: isDev,
+                    // Defaults to `automatic`, pass in `classic` to disable auto JSX transformations.
+                    runtime: platformOptions?.jsxRuntime || 'automatic',
+                    ...(platformOptions &&
+                        platformOptions.jsxRuntime !== 'classic' && {
+                        importSource: (platformOptions && platformOptions.jsxImportSource) || 'react',
+                    }),
+                    // NOTE: Unexposed props:
+                    // pragma?: string;
+                    // pragmaFrag?: string;
+                    // pure?: string;
+                    // throwIfNamespace?: boolean;
+                    // useBuiltIns?: boolean;
+                    // useSpread?: boolean;
+                },
+            ],
         ],
         plugins: [
             ...extraPlugins,
             // TODO: Remove
             [require.resolve('@babel/plugin-proposal-decorators'), { legacy: true }],
-            require.resolve('@babel/plugin-proposal-export-namespace-from'),
+            require.resolve('@babel/plugin-transform-export-namespace-from'),
             // Automatically add `react-native-reanimated/plugin` when the package is installed.
             // TODO: Move to be a customTransformOption.
             (0, common_1.hasModule)('react-native-reanimated') &&
-                reanimated !== false && [require.resolve('react-native-reanimated/plugin')],
+                platformOptions.reanimated !== false && [require.resolve('react-native-reanimated/plugin')],
         ].filter(Boolean),
     };
 }

package/build/inline-env-vars.d.ts

@@ -0,0 +1,13 @@
+import { ConfigAPI, PluginObj, types } from '@babel/core';
+export declare function expoInlineEnvVars(api: ConfigAPI & {
+    types: typeof types;
+}): PluginObj;
+/**
+ * Given a set of options like `{ EXPO_BASE_URL: '/' }`, inline the values into the bundle.
+ * This is used for build settings that are always available and not configurable at runtime.
+ *
+ * Webpack uses DefinePlugin for similar functionality.
+ */
+export declare function expoInlineTransformEnvVars(api: ConfigAPI & {
+    types: typeof types;
+}): PluginObj;

package/build/inline-env-vars.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.expoInlineTransformEnvVars = exports.expoInlineEnvVars = void 0;
+const debug = require('debug')('expo:babel:env-vars');
+function expoInlineEnvVars(api) {
+    const { types: t } = api;
+    function isFirstInAssign(path) {
+        return t.isAssignmentExpression(path.parent) && path.parent.left === path.node;
+    }
+    return {
+        name: 'expo-inline-production-environment-variables',
+        visitor: {
+            MemberExpression(path, state) {
+                const filename = state.filename;
+                // If the filename is not defined, skip to prevent a node module from intercepting
+                // environment variables.
+                if (!filename) {
+                    debug('No filename found in state, skipping to be safe:', state.file.opts);
+                    return;
+                }
+                // Do nothing in node modules
+                // Skip node_modules, the feature is a bit too sensitive to allow in arbitrary code.
+                if (/node_modules/.test(filename)) {
+                    return;
+                }
+                if (path.get('object').matchesPattern('process.env')) {
+                    // @ts-expect-error: missing types
+                    const key = path.toComputedKey();
+                    if (t.isStringLiteral(key) &&
+                        !isFirstInAssign(path) &&
+                        key.value.startsWith('EXPO_PUBLIC_')) {
+                        debug('Inlining environment variable in %s: %s', filename, key.value);
+                        path.replaceWith(t.valueToNode(process.env[key.value]));
+                    }
+                }
+            },
+        },
+    };
+}
+exports.expoInlineEnvVars = expoInlineEnvVars;
+/**
+ * Given a set of options like `{ EXPO_BASE_URL: '/' }`, inline the values into the bundle.
+ * This is used for build settings that are always available and not configurable at runtime.
+ *
+ * Webpack uses DefinePlugin for similar functionality.
+ */
+function expoInlineTransformEnvVars(api) {
+    const { types: t } = api;
+    function isFirstInAssign(path) {
+        return t.isAssignmentExpression(path.parent) && path.parent.left === path.node;
+    }
+    return {
+        name: 'expo-inline-transform-environment-variables',
+        visitor: {
+            MemberExpression(path, state) {
+                const options = state.opts;
+                if (path.get('object').matchesPattern('process.env')) {
+                    // @ts-expect-error: missing types
+                    const key = path.toComputedKey();
+                    if (t.isStringLiteral(key) &&
+                        !isFirstInAssign(path) &&
+                        options[key.value] !== undefined) {
+                        debug('Inlining transform setting in %s: %s', state.filename || '[unknown file]', key.value);
+                        path.replaceWith(t.valueToNode(options[key.value]));
+                    }
+                }
+            },
+        },
+    };
+}
+exports.expoInlineTransformEnvVars = expoInlineTransformEnvVars;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "babel-preset-expo",
-  "version": "9.8.0",
+  "version": "9.9.0",
   "description": "The Babel preset for Expo projects",
   "main": "build/index.js",
   "files": [
@@ -42,10 +42,11 @@
   },
   "dependencies": {
     "@babel/plugin-proposal-decorators": "^7.12.9",
-    "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
     "@babel/plugin-proposal-object-rest-spread": "^7.12.13",
-    "@babel/plugin-transform-react-jsx": "^7.12.17",
+    "@babel/plugin-transform-export-namespace-from": "^7.22.11",
     "@babel/preset-env": "^7.20.0",
+    "@babel/preset-react": "^7.22.15",
+    "@babel/plugin-transform-parameters": "^7.22.15",
     "babel-plugin-module-resolver": "^5.0.0",
     "babel-plugin-react-native-web": "~0.18.10",
     "metro-react-native-babel-preset": "0.76.8"
@@ -54,5 +55,5 @@
     "@babel/core": "^7.20.0",
     "jest": "^29.2.1"
   },
-  "gitHead": "ee7897097f5f946ad7fcb94447eed789b984dd02"
+  "gitHead": "3142a086578deffd8704a8f1b6f0f661527d836c"
 }