babel-preset-expo 0.0.0-canary-20231122-1af9191

package/README.md

@@ -0,0 +1,166 @@
+# babel-preset-expo
+
+This preset extends the default React Native preset (`metro-react-native-babel-preset`) and adds support for decorators, tree-shaking web packages, and loading font icons with optional native dependencies if they're installed.
+
+You can use this preset in any React Native project as a drop-in replacement for `metro-react-native-babel-preset`. If your project isn't using native font loading or web support then this preset will only add support for decorators with `@babel/plugin-proposal-decorators` - this is mostly used for supporting legacy community libraries.
+
+If you start your **web** project with `@expo/webpack-config` or `npx expo start` and your project doesn't contain a `babel.config.js` or a `.babelrc` then it will default to using `babel-preset-expo` for loading.
+
+If you have problems with the code in this repository, please file issues & bug reports
+at https://github.com/expo/expo. Thanks!
+
+## Expo Bundler Spec Compliance
+
+A bundler must follow these requirements if they are to be considered spec compliant for use with a **universal React** (Expo) project.
+
+### Babel Loader
+
+The babel loading mechanism must include the following properties on its `caller`.
+
+#### platform
+
+A `platform` property denoting the target platform. If the `platform` is not defined, it will default to using `web` when the `bundler` is `webpack` -- this is temporary and will throw an error in the future.
+
+| Value     | Description             |
+| --------- | ----------------------- |
+| `ios`     | Runs on iOS devices     |
+| `android` | Runs on Android devices |
+| `web`     | Runs in web browsers    |
+
+#### bundler
+
+A `bundler` property denoting the name of the bundler that is being used to create the JavaScript bundle.
+If the `bundler` is not defined, it will default to checking if a `babel-loader` is used, if so then `webpack` will be used, otherwise it will default to `metro`.
+
+| Value     | Description                      |
+| --------- | -------------------------------- |
+| `metro`   | Bundling with [Metro][metro]     |
+| `webpack` | Bundling with [Webpack][webpack] |
+
+[metro]: https://facebook.github.io/metro/
+[webpack]: https://webpack.js.org/
+
+## Options
+
+### `reanimated`
+
+`boolean`, defaults to `true`. Set `reanimated: false` to disable adding the `react-native-reanimated/plugin` when `react-native-reanimated` is installed.
+
+### [`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 `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',
+    jsxImportSource: '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.
+
+_Note:_ this option has an effect only when the `disableImportExportTransform` option is set to `false`. On Android and iOS, `disableImportExportTransform` defaults to `false`, and on web it defaults to `true` to allow for tree shaking.
+
+This can improve the initial load time of your app because evaluating dependencies up front is sometimes entirely un-necessary, particularly when the dependencies have no side effects.
+
+The value of `lazyImports` has a few possible effects:
+
+- `null` - [metro-react-native-babel-preset](https://github.com/facebook/metro/tree/master/packages/metro-react-native-babel-preset) will handle it. (Learn more about it here: https://github.com/facebook/metro/commit/23e3503dde5f914f3e642ef214f508d0a699851d)
+
+- `false` - No lazy initialization of any imported module.
+
+- `true` - Lazy-init all imported modules except local imports (e.g., `./foo`), certain Expo packages that have side effects, and the two cases mentioned [here](https://babeljs.io/docs/en/babel-plugin-transform-modules-commonjs#lazy).
+
+- `Array<string>` - [babel-plugin-transform-modules-commonjs](https://babeljs.io/docs/en/babel-plugin-transform-modules-commonjs#lazy) will handle it.
+
+- `(string) => boolean` - [babel-plugin-transform-modules-commonjs](https://babeljs.io/docs/en/babel-plugin-transform-modules-commonjs#lazy) will handle it.
+
+  If you choose to do this, you can also access the list of Expo packages that have side effects by using `const lazyImportsBlacklist = require('babel-preset-expo/lazy-imports-blacklist');` which returns a `Set`.
+
+**default:** `null`
+
+```js
+[
+    'babel-preset-expo',
+    {
+        lazyImports: true
+    }
+],
+```
+
+### `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:
+
+> `TypeError: Cannot assign to read only property 'exports' of object '#<Object>'`
+
+**default:** `false` when using Webpack. `true` otherwise.
+
+```js
+[
+    'babel-preset-expo',
+    {
+        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

@@ -0,0 +1,12 @@
+export declare function hasModule(name: string): boolean;
+/** Determine which bundler is being used. */
+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 getIsFastRefreshEnabled(caller: any): any;
+export declare function getIsProd(caller: any): boolean;
+export declare function getIsNodeModule(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

@@ -0,0 +1,97 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getInlineEnvVarsEnabled = exports.getIsServer = exports.getBaseUrl = exports.getIsNodeModule = exports.getIsProd = exports.getIsFastRefreshEnabled = exports.getIsDev = exports.getPossibleProjectRoot = exports.getPlatform = exports.getBundler = exports.hasModule = void 0;
+function hasModule(name) {
+    try {
+        return !!require.resolve(name);
+    }
+    catch (error) {
+        if (error.code === 'MODULE_NOT_FOUND' && error.message.includes(name)) {
+            return false;
+        }
+        throw error;
+    }
+}
+exports.hasModule = hasModule;
+/** Determine which bundler is being used. */
+function getBundler(caller) {
+    if (!caller)
+        return null;
+    if (caller.bundler)
+        return caller.bundler;
+    if (
+    // Known tools that use `webpack`-mode via `babel-loader`: `@expo/webpack-config`, Next.js <10
+    caller.name === 'babel-loader' ||
+        // NextJS 11 uses this custom caller name.
+        caller.name === 'next-babel-turbo-loader') {
+        return 'webpack';
+    }
+    // Assume anything else is Metro.
+    return 'metro';
+}
+exports.getBundler = getBundler;
+function getPlatform(caller) {
+    if (!caller)
+        return null;
+    if (caller.platform)
+        return caller.platform;
+    const bundler = getBundler(caller);
+    if (bundler === 'webpack') {
+        return 'web';
+    }
+    // unknown
+    return caller.platform;
+}
+exports.getPlatform = getPlatform;
+function getPossibleProjectRoot(caller) {
+    if (!caller)
+        return null;
+    if (caller.projectRoot)
+        return caller.projectRoot;
+    // unknown
+    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 getIsFastRefreshEnabled(caller) {
+    if (!caller)
+        return false;
+    return caller.isHMREnabled && !caller.isServer && !caller.isNodeModule && getIsDev(caller);
+}
+exports.getIsFastRefreshEnabled = getIsFastRefreshEnabled;
+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 getIsNodeModule(caller) {
+    return caller?.isNodeModule ?? false;
+}
+exports.getIsNodeModule = getIsNodeModule;
+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 isNodeModule = getIsNodeModule(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 !isNodeModule && !isWebpack && !isDev && !isServer && !preserveEnvVars;
+}
+exports.getInlineEnvVarsEnabled = getInlineEnvVarsEnabled;

package/build/expo-inline-manifest-plugin.d.ts

@@ -0,0 +1,9 @@
+import { ConfigAPI } from '@babel/core';
+export declare function expoInlineManifestPlugin(api: ConfigAPI & {
+    types: any;
+}): {
+    name: string;
+    visitor: {
+        MemberExpression(path: any, state: any): void;
+    };
+};

package/build/expo-inline-manifest-plugin.js

@@ -0,0 +1,149 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.expoInlineManifestPlugin = void 0;
+const config_1 = require("expo/config");
+const common_1 = require("./common");
+const debug = require('debug')('expo:babel:inline-manifest');
+// Convert expo value to PWA value
+function ensurePWAorientation(orientation) {
+    if (orientation) {
+        const webOrientation = orientation.toLowerCase();
+        if (webOrientation !== 'default') {
+            return webOrientation;
+        }
+    }
+    return undefined;
+}
+const RESTRICTED_MANIFEST_FIELDS = [
+    'androidNavigationBar',
+    'androidStatusBar',
+    'privacy',
+    // Remove iOS and Android.
+    'ios',
+    'android',
+    // Hide internal / build values
+    'plugins',
+    'hooks',
+    '_internal',
+    // Remove metro-specific values
+    'assetBundlePatterns',
+];
+function getExpoConstantsManifest(projectRoot) {
+    const { exp } = getConfigMemo(projectRoot);
+    const manifest = applyWebDefaults(exp);
+    for (const field of RESTRICTED_MANIFEST_FIELDS) {
+        delete manifest[field];
+    }
+    return manifest;
+}
+function applyWebDefaults(appJSON) {
+    // For RN CLI support
+    const { web: webManifest = {}, splash = {}, ios = {}, android = {} } = appJSON;
+    // rn-cli apps use a displayName value as well.
+    const { appName, webName } = (0, config_1.getNameFromConfig)(appJSON);
+    const languageISOCode = webManifest.lang;
+    const primaryColor = appJSON.primaryColor;
+    const description = appJSON.description;
+    // The theme_color sets the color of the tool bar, and may be reflected in the app's preview in task switchers.
+    const webThemeColor = webManifest.themeColor || primaryColor;
+    const dir = webManifest.dir;
+    const shortName = webManifest.shortName || webName;
+    const display = webManifest.display;
+    const startUrl = webManifest.startUrl;
+    const { scope, crossorigin } = webManifest;
+    const barStyle = webManifest.barStyle;
+    const orientation = ensurePWAorientation(webManifest.orientation || appJSON.orientation);
+    /**
+     * **Splash screen background color**
+     * `https://developers.google.com/web/fundamentals/web-app-manifest/#splash-screen`
+     * The background_color should be the same color as the load page,
+     * to provide a smooth transition from the splash screen to your app.
+     */
+    const backgroundColor = webManifest.backgroundColor || splash.backgroundColor; // No default background color
+    return {
+        ...appJSON,
+        name: appName,
+        description,
+        primaryColor,
+        // Ensure these objects exist
+        ios: {
+            ...ios,
+        },
+        android: {
+            ...android,
+        },
+        web: {
+            ...webManifest,
+            meta: undefined,
+            build: undefined,
+            scope,
+            crossorigin,
+            description,
+            startUrl,
+            shortName,
+            display,
+            orientation,
+            dir,
+            barStyle,
+            backgroundColor,
+            themeColor: webThemeColor,
+            lang: languageISOCode,
+            name: webName,
+        },
+    };
+}
+function getExpoAppManifest(projectRoot) {
+    if (process.env.APP_MANIFEST) {
+        return process.env.APP_MANIFEST;
+    }
+    const exp = getExpoConstantsManifest(projectRoot);
+    debug('public manifest', exp);
+    return JSON.stringify(exp);
+}
+let config;
+function getConfigMemo(projectRoot) {
+    if (!config) {
+        config = (0, config_1.getConfig)(projectRoot, {
+            isPublicConfig: true,
+            skipSDKVersionRequirement: true,
+        });
+    }
+    return config;
+}
+// Convert `process.env.APP_MANIFEST` to a modified web-specific variation of the app.json public manifest.
+function expoInlineManifestPlugin(api) {
+    const { types: t } = api;
+    const platform = api.caller(common_1.getPlatform);
+    const possibleProjectRoot = api.caller(common_1.getPossibleProjectRoot);
+    return {
+        name: 'expo-inline-manifest-plugin',
+        visitor: {
+            MemberExpression(path, state) {
+                // Web-only feature, the native manifest is provided dynamically by the client.
+                if (platform !== 'web') {
+                    return;
+                }
+                if (!t.isIdentifier(path.node.object, { name: 'process' }) ||
+                    !t.isIdentifier(path.node.property, { name: 'env' })) {
+                    return;
+                }
+                const parent = path.parentPath;
+                if (!t.isMemberExpression(parent.node)) {
+                    return;
+                }
+                const projectRoot = possibleProjectRoot || state.file.opts.root || '';
+                if (
+                // Surfaces the `app.json` (config) as an environment variable which is then parsed by
+                // `expo-constants` https://docs.expo.dev/versions/latest/sdk/constants/
+                t.isIdentifier(parent.node.property, {
+                    name: 'APP_MANIFEST',
+                }) &&
+                    !parent.parentPath.isAssignmentExpression()) {
+                    const manifest = getExpoAppManifest(projectRoot);
+                    parent.replaceWith(t.stringLiteral(manifest));
+                }
+            },
+        },
+    };
+}
+exports.expoInlineManifestPlugin = expoInlineManifestPlugin;

package/build/expo-router-plugin.d.ts

@@ -0,0 +1,20 @@
+import { ConfigAPI, types } from '@babel/core';
+/**
+ * Inlines environment variables to configure the process:
+ *
+ * EXPO_PROJECT_ROOT
+ * EXPO_PUBLIC_USE_STATIC
+ * EXPO_ROUTER_ABS_APP_ROOT
+ * EXPO_ROUTER_APP_ROOT
+ * EXPO_ROUTER_IMPORT_MODE_IOS
+ * EXPO_ROUTER_IMPORT_MODE_ANDROID
+ * EXPO_ROUTER_IMPORT_MODE_WEB
+ */
+export declare function expoRouterBabelPlugin(api: ConfigAPI & {
+    types: typeof types;
+}): {
+    name: string;
+    visitor: {
+        MemberExpression(path: any, state: any): void;
+    };
+};

package/build/expo-router-plugin.js

@@ -0,0 +1,178 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.expoRouterBabelPlugin = void 0;
+const config_1 = require("expo/config");
+const fs_1 = __importDefault(require("fs"));
+const path_1 = __importDefault(require("path"));
+const resolve_from_1 = __importDefault(require("resolve-from"));
+const common_1 = require("./common");
+const debug = require('debug')('expo:babel:router');
+let config;
+function getConfigMemo(projectRoot) {
+    if (!config || process.env._EXPO_INTERNAL_TESTING) {
+        config = (0, config_1.getConfig)(projectRoot);
+    }
+    return config;
+}
+function getExpoRouterImportMode(projectRoot, platform) {
+    const envVar = 'EXPO_ROUTER_IMPORT_MODE_' + platform.toUpperCase();
+    if (process.env[envVar]) {
+        return process.env[envVar];
+    }
+    const env = process.env.NODE_ENV || process.env.BABEL_ENV;
+    const { exp } = getConfigMemo(projectRoot);
+    let asyncRoutesSetting;
+    if (exp.extra?.router?.asyncRoutes) {
+        const asyncRoutes = exp.extra?.router?.asyncRoutes;
+        if (typeof asyncRoutes === 'string') {
+            asyncRoutesSetting = asyncRoutes;
+        }
+        else if (typeof asyncRoutes === 'object') {
+            asyncRoutesSetting = asyncRoutes[platform] ?? asyncRoutes.default;
+        }
+    }
+    let mode = [env, true].includes(asyncRoutesSetting) ? 'lazy' : 'sync';
+    // TODO: Production bundle splitting
+    if (env === 'production' && mode === 'lazy') {
+        throw new Error('Async routes are not supported in production yet. Set the `expo-router` Config Plugin prop `asyncRoutes` to `development`, `false`, or `undefined`.');
+    }
+    // NOTE: This is a temporary workaround for static rendering on web.
+    if (platform === 'web' && (exp.web || {}).output === 'static') {
+        mode = 'sync';
+    }
+    // Development
+    debug('Router import mode', mode);
+    process.env[envVar] = mode;
+    return mode;
+}
+function directoryExistsSync(file) {
+    return fs_1.default.statSync(file, { throwIfNoEntry: false })?.isDirectory() ?? false;
+}
+function getRouterDirectory(projectRoot) {
+    // more specific directories first
+    if (directoryExistsSync(path_1.default.join(projectRoot, 'src/app'))) {
+        // Log.log(chalk.gray('Using src/app as the root directory for Expo Router.'));
+        return './src/app';
+    }
+    // Log.debug('Using app as the root directory for Expo Router.');
+    return './app';
+}
+function getExpoRouterAppRoot(projectRoot) {
+    // Bump to v2 to prevent the CLI from setting the variable anymore.
+    // TODO: Bump to v3 to revert back to the CLI setting the variable again, but with custom value
+    // support.
+    if (process.env.EXPO_ROUTER_APP_ROOT_2) {
+        return process.env.EXPO_ROUTER_APP_ROOT_2;
+    }
+    const routerEntry = (0, resolve_from_1.default)(projectRoot, 'expo-router/entry');
+    // It doesn't matter if the app folder exists.
+    const appFolder = getExpoRouterAbsoluteAppRoot(projectRoot);
+    const appRoot = path_1.default.relative(path_1.default.dirname(routerEntry), appFolder);
+    debug('routerEntry', routerEntry, appFolder, appRoot);
+    process.env.EXPO_ROUTER_APP_ROOT_2 = appRoot;
+    return appRoot;
+}
+function getExpoRouterAbsoluteAppRoot(projectRoot) {
+    if (process.env.EXPO_ROUTER_ABS_APP_ROOT) {
+        return process.env.EXPO_ROUTER_ABS_APP_ROOT;
+    }
+    const { exp } = getConfigMemo(projectRoot);
+    const customSrc = exp.extra?.router?.unstable_src || getRouterDirectory(projectRoot);
+    const isAbsolute = customSrc.startsWith('/');
+    // It doesn't matter if the app folder exists.
+    const appFolder = isAbsolute ? customSrc : path_1.default.join(projectRoot, customSrc);
+    const appRoot = appFolder;
+    debug('absolute router entry', appFolder, appRoot);
+    process.env.EXPO_ROUTER_ABS_APP_ROOT = appFolder;
+    return appRoot;
+}
+// TODO: Strip the function `generateStaticParams` when bundling for node.js environments.
+/**
+ * Inlines environment variables to configure the process:
+ *
+ * EXPO_PROJECT_ROOT
+ * EXPO_PUBLIC_USE_STATIC
+ * EXPO_ROUTER_ABS_APP_ROOT
+ * EXPO_ROUTER_APP_ROOT
+ * EXPO_ROUTER_IMPORT_MODE_IOS
+ * EXPO_ROUTER_IMPORT_MODE_ANDROID
+ * EXPO_ROUTER_IMPORT_MODE_WEB
+ */
+function expoRouterBabelPlugin(api) {
+    const { types: t } = api;
+    const platform = api.caller(common_1.getPlatform);
+    const possibleProjectRoot = api.caller(common_1.getPossibleProjectRoot);
+    return {
+        name: 'expo-router',
+        visitor: {
+            // Convert `process.env.EXPO_ROUTER_APP_ROOT` to a string literal
+            MemberExpression(path, state) {
+                if (!t.isIdentifier(path.node.object, { name: 'process' }) ||
+                    !t.isIdentifier(path.node.property, { name: 'env' })) {
+                    return;
+                }
+                const parent = path.parentPath;
+                if (!t.isMemberExpression(parent.node)) {
+                    return;
+                }
+                const projectRoot = possibleProjectRoot || state.file.opts.root || '';
+                // Used for log box and stuff
+                if (t.isIdentifier(parent.node.property, {
+                    name: 'EXPO_PROJECT_ROOT',
+                }) &&
+                    !parent.parentPath.isAssignmentExpression()) {
+                    parent.replaceWith(t.stringLiteral(projectRoot));
+                }
+                else if (
+                // Enable static rendering
+                // TODO: Use a serializer or something to ensure this changes without
+                // needing to clear the cache.
+                t.isIdentifier(parent.node.property, {
+                    name: 'EXPO_PUBLIC_USE_STATIC',
+                }) &&
+                    !parent.parentPath.isAssignmentExpression()) {
+                    if (platform === 'web') {
+                        const isStatic = process.env.EXPO_PUBLIC_USE_STATIC === 'true' ||
+                            process.env.EXPO_PUBLIC_USE_STATIC === '1';
+                        parent.replaceWith(t.booleanLiteral(isStatic));
+                    }
+                    else {
+                        parent.replaceWith(t.booleanLiteral(false));
+                    }
+                }
+                else if (process.env.NODE_ENV !== 'test' &&
+                    t.isIdentifier(parent.node.property, {
+                        name: 'EXPO_ROUTER_ABS_APP_ROOT',
+                    }) &&
+                    !parent.parentPath.isAssignmentExpression()) {
+                    parent.replaceWith(t.stringLiteral(getExpoRouterAbsoluteAppRoot(projectRoot)));
+                }
+                else if (
+                // Skip loading the app root in tests.
+                // This is handled by the testing-library utils
+                process.env.NODE_ENV !== 'test' &&
+                    t.isIdentifier(parent.node.property, {
+                        name: 'EXPO_ROUTER_APP_ROOT',
+                    }) &&
+                    !parent.parentPath.isAssignmentExpression()) {
+                    parent.replaceWith(
+                    // This is defined in Expo CLI when using Metro. It points to the relative path for the project app directory.
+                    t.stringLiteral(getExpoRouterAppRoot(projectRoot)));
+                }
+                else if (
+                // Expose the app route import mode.
+                platform &&
+                    t.isIdentifier(parent.node.property, {
+                        name: 'EXPO_ROUTER_IMPORT_MODE_' + platform.toUpperCase(),
+                    }) &&
+                    !parent.parentPath.isAssignmentExpression()) {
+                    parent.replaceWith(t.stringLiteral(getExpoRouterImportMode(projectRoot, platform)));
+                }
+            },
+        },
+    };
+}
+exports.expoRouterBabelPlugin = expoRouterBabelPlugin;

package/build/index.d.ts

@@ -0,0 +1,24 @@
+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;
+    disableFlowStripTypesTransform?: boolean;
+    enableBabelRuntime?: boolean;
+    unstable_transformProfile?: 'default' | 'hermes-stable' | 'hermes-canary';
+};
+export type BabelPresetExpoOptions = BabelPresetExpoPlatformOptions & {
+    /** Web-specific settings. */
+    web?: BabelPresetExpoPlatformOptions;
+    /** Native-specific settings. */
+    native?: BabelPresetExpoPlatformOptions;
+};
+declare function babelPresetExpo(api: ConfigAPI, options?: BabelPresetExpoOptions): TransformOptions;
+export default babelPresetExpo;

package/build/index.js

@@ -0,0 +1,196 @@
+"use strict";
+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 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 isFastRefreshEnabled = api.caller(common_1.getIsFastRefreshEnabled);
+    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 = 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.
+            platformOptions.disableImportExportTransform = isWebpack;
+        }
+        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`),
+    // `@react-native/babel-preset` will handle it.
+    const lazyImportsOption = platformOptions?.lazyImports;
+    const extraPlugins = [];
+    if (engine !== 'hermes') {
+        // `@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
+        extraPlugins.push([
+            require.resolve('@babel/plugin-proposal-object-rest-spread'),
+            { loose: false },
+        ]);
+    }
+    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('metro-transform-plugins/src/inline-plugin.js'),
+            {
+                dev: isDev,
+                inlinePlatform: true,
+                platform,
+            },
+        ]);
+    }
+    if (platformOptions.useTransformReactJSXExperimental != null) {
+        throw new Error(`babel-preset-expo: The option 'useTransformReactJSXExperimental' has been removed in favor of { jsxRuntime: 'classic' }.`);
+    }
+    // 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`.
+        if (bundler !== 'webpack') {
+            extraPlugins.push(expo_inline_manifest_plugin_1.expoInlineManifestPlugin);
+        }
+    }
+    if ((0, common_1.hasModule)('expo-router')) {
+        extraPlugins.push(expo_router_plugin_1.expoRouterBabelPlugin);
+    }
+    if (isFastRefreshEnabled) {
+        extraPlugins.push([
+            require('react-refresh/babel'),
+            {
+                // We perform the env check to enable `isFastRefreshEnabled`.
+                skipEnvCheck: true,
+            },
+        ]);
+    }
+    return {
+        presets: [
+            [
+                // We use `require` here instead of directly using the package name because we want to
+                // specifically use the `@react-native/babel-preset` installed by this package (ex:
+                // `babel-preset-expo/node_modules/`). This way the preset will not change unintentionally.
+                // Reference: https://github.com/expo/expo/pull/4685#discussion_r307143920
+                require('@react-native/babel-preset'),
+                {
+                    // 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`
+                    enableBabelRuntime: platformOptions.enableBabelRuntime,
+                    // This reduces the amount of transforms required, as Hermes supports many modern language features.
+                    unstable_transformProfile: platformOptions.unstable_transformProfile,
+                    // 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,
+                    // 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) => {
+                            // Do not lazy-initialize packages that are local imports (similar to `lazy: true`
+                            // behavior) or are in the blacklist.
+                            return !(importModuleSpecifier.includes('./') || lazyImports_1.lazyImports.has(importModuleSpecifier));
+                        }
+                        : // Pass the option directly to `@react-native/babel-preset`, which in turn
+                            // passes it to `babel-plugin-transform-modules-commonjs`
+                            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-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') &&
+                platformOptions.reanimated !== false && [require.resolve('react-native-reanimated/plugin')],
+        ].filter(Boolean),
+    };
+}
+exports.default = babelPresetExpo;
+module.exports = babelPresetExpo;

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,60 @@
+"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 (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/build/lazyImports.d.ts

@@ -0,0 +1,2 @@
+/** These Expo packages may have side-effects and should not be lazily initialized. */
+export declare const lazyImports: Set<string>;

package/build/lazyImports.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.lazyImports = void 0;
+/** These Expo packages may have side-effects and should not be lazily initialized. */
+exports.lazyImports = new Set(['expo', 'expo-asset', 'expo-task-manager']);

package/lazy-imports-blacklist.js

@@ -0,0 +1,6 @@
+/**
+ * These Expo packages may have side-effects and should not be lazily initialized.
+ */
+'use strict';
+
+module.exports = require('./build/lazyImports').lazyImports;

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "babel-preset-expo",
+  "version": "0.0.0-canary-20231122-1af9191",
+  "description": "The Babel preset for Expo projects",
+  "main": "build/index.js",
+  "files": [
+    "build",
+    "lazy-imports-blacklist.js"
+  ],
+  "scripts": {
+    "build": "expo-module build",
+    "clean": "expo-module clean",
+    "lint": "expo-module lint",
+    "test": "expo-module test",
+    "prepare": "expo-module prepare",
+    "prepublishOnly": "expo-module prepublishOnly",
+    "expo-module": "expo-module"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/expo/expo.git",
+    "directory": "packages/babel-preset-expo"
+  },
+  "keywords": [
+    "babel",
+    "babel-preset",
+    "expo",
+    "expo-web",
+    "react-native",
+    "react-native-web",
+    "metro",
+    "webpack"
+  ],
+  "author": "Expo <support@expo.dev>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/expo/expo/issues"
+  },
+  "homepage": "https://github.com/expo/expo/tree/main/packages/babel-preset-expo#readme",
+  "eslintConfig": {
+    "extends": "universe/node"
+  },
+  "dependencies": {
+    "@babel/plugin-proposal-decorators": "^7.12.9",
+    "@babel/plugin-proposal-object-rest-spread": "^7.12.13",
+    "@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",
+    "@react-native/babel-preset": "^0.73.18",
+    "babel-plugin-react-native-web": "~0.18.10",
+    "react-refresh": "0.14.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.0",
+    "jest": "^29.2.1"
+  },
+  "gitHead": "1af91912cdf13b6f7fa0a8207dc9f024132a9a72"
+}