babel-preset-expo 9.7.0 → 9.8.0

package/build/common.d.ts

@@ -0,0 +1,5 @@
+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;

package/build/common.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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;

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

@@ -5,7 +5,7 @@ type BabelPresetExpoPlatformOptions = {
     withDevTools?: boolean;
     disableFlowStripTypesTransform?: boolean;
     enableBabelRuntime?: boolean;
-    unstable_transformProfile?: 'default' | 'hermes-canary';
+    unstable_transformProfile?: 'default' | 'hermes-stable' | 'hermes-canary';
 };
 export type BabelPresetExpoOptions = {
     lazyImports?: boolean;

package/build/index.js

@@ -1,11 +1,15 @@
 "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 lazyImports_1 = require("./lazyImports");
 function babelPresetExpo(api, options = {}) {
     const { web = {}, native = {}, reanimated } = options;
-    const bundler = api.caller(getBundler);
+    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';
     // 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) {
@@ -16,18 +20,27 @@ function babelPresetExpo(api, options = {}) {
             // 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,
         }
-        : { disableImportExportTransform: false, ...native };
+        : {
+            disableImportExportTransform: false,
+            unstable_transformProfile: engine === 'hermes' ? 'hermes-stable' : 'default',
+            ...native,
+        };
     // 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 extraPlugins = [
+    const extraPlugins = [];
+    if (engine !== 'hermes') {
         // `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
-        [require.resolve('@babel/plugin-proposal-object-rest-spread'), { loose: false }],
-    ];
+        extraPlugins.push([
+            require.resolve('@babel/plugin-proposal-object-rest-spread'),
+            { 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.
@@ -55,6 +68,13 @@ function babelPresetExpo(api, options = {}) {
     }
     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);
     }
     return {
         presets: [
@@ -71,7 +91,7 @@ function babelPresetExpo(api, options = {}) {
                     disableFlowStripTypesTransform: platformOptions.disableFlowStripTypesTransform,
                     // Defaults to undefined, set to `false` to disable `@babel/plugin-transform-runtime`
                     enableBabelRuntime: platformOptions.enableBabelRuntime,
-                    // Defaults to `'default'`, can also use `'hermes-canary'`
+                    // 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`.
@@ -101,13 +121,13 @@ function babelPresetExpo(api, options = {}) {
             require.resolve('@babel/plugin-proposal-export-namespace-from'),
             // Automatically add `react-native-reanimated/plugin` when the package is installed.
             // TODO: Move to be a customTransformOption.
-            hasModule('react-native-reanimated') &&
+            (0, common_1.hasModule)('react-native-reanimated') &&
                 reanimated !== false && [require.resolve('react-native-reanimated/plugin')],
         ].filter(Boolean),
     };
 }
 function getAliasPlugin() {
-    if (!hasModule('@expo/vector-icons')) {
+    if (!(0, common_1.hasModule)('@expo/vector-icons')) {
         return null;
     }
     return [
@@ -119,32 +139,5 @@ function getAliasPlugin() {
         },
     ];
 }
-function hasModule(name) {
-    try {
-        return !!require.resolve(name);
-    }
-    catch (error) {
-        if (error.code === 'MODULE_NOT_FOUND' && error.message.includes(name)) {
-            return false;
-        }
-        throw error;
-    }
-}
-/** 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.default = babelPresetExpo;
 module.exports = babelPresetExpo;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "babel-preset-expo",
-  "version": "9.7.0",
+  "version": "9.8.0",
   "description": "The Babel preset for Expo projects",
   "main": "build/index.js",
   "files": [
@@ -54,5 +54,5 @@
     "@babel/core": "^7.20.0",
     "jest": "^29.2.1"
   },
-  "gitHead": "ee2c866ba3c7fbc35ff2a3e896041cf15d3bd7c5"
+  "gitHead": "ee7897097f5f946ad7fcb94447eed789b984dd02"
 }