babel-preset-expo 10.0.2 → 11.0.0

package/README.md

@@ -42,6 +42,24 @@ If the `bundler` is not defined, it will default to checking if a `babel-loader`
 
 ## Options
 
+### `minifyTypeofWindow`
+
+Set `minifyTypeofWindow: false` to preserve the `typeof window` check in your code, e.g. `if (typeof window === 'undefined')` -> `if (true)` in servers. This is useful when you're using libraries that mock the window object on native or in the server.
+
+```js
+[
+  'babel-preset-expo',
+  {
+    // If your native app doesn't polyfill `window` then setting this to `false` can reduce bundle size.
+    native: {
+      minifyTypeofWindow: true,
+    },
+  },
+];
+```
+
+Defaults to `false` for server environments and web, `true` for native platforms to support legacy browser polyfills.
+
 ### `reanimated`
 
 `boolean`, defaults to `true`. Set `reanimated: false` to disable adding the `react-native-reanimated/plugin` when `react-native-reanimated` is installed.

package/build/client-module-proxy-plugin.d.ts

@@ -0,0 +1 @@
+export declare function reactClientReferencesPlugin(): babel.PluginObj;

package/build/client-module-proxy-plugin.js

@@ -0,0 +1,57 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.reactClientReferencesPlugin = reactClientReferencesPlugin;
+/**
+ * Copyright © 2024 650 Industries.
+ */
+const core_1 = require("@babel/core");
+const url_1 = __importDefault(require("url"));
+function reactClientReferencesPlugin() {
+    return {
+        name: 'expo-client-references',
+        visitor: {
+            Program(path, state) {
+                const isUseClient = path.node.directives.some((directive) => directive.value.value === 'use client');
+                // TODO: use server can be added to scopes inside of the file. https://github.com/facebook/react/blob/29fbf6f62625c4262035f931681c7b7822ca9843/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeRegister.js#L55
+                const isUseServer = path.node.directives.some((directive) => directive.value.value === 'use server');
+                if (isUseClient && isUseServer) {
+                    throw path.buildCodeFrameError("It's not possible to have both `use client` and `use server` directives in the same file.");
+                }
+                const filePath = state.file.opts.filename;
+                if (!filePath) {
+                    // This can happen in tests or systems that use Babel standalone.
+                    throw new Error('[Babel] Expected a filename to be set in the state');
+                }
+                const outputKey = url_1.default.pathToFileURL(filePath).href;
+                // File starts with "use client" directive.
+                if (!isUseClient && !isUseServer) {
+                    // Do nothing for code that isn't marked as a client component.
+                    return;
+                }
+                // Clear the body
+                if (isUseClient) {
+                    path.node.body = [];
+                    path.node.directives = [];
+                    path.pushContainer('body', core_1.template.ast `module.exports = require("react-server-dom-webpack/server").createClientModuleProxy(${JSON.stringify(outputKey)});`);
+                }
+                else {
+                    path.pushContainer('body', core_1.template.ast `
+            ;(() => {
+              if (typeof module.exports === 'function') {
+                require('react-server-dom-webpack/server').registerServerReference(module.exports, ${JSON.stringify(outputKey)}, null);
+              } else {
+                for (const key in module.exports) {
+                  if (typeof module.exports[key] === 'function') {
+                    require('react-server-dom-webpack/server').registerServerReference(module.exports[key], ${JSON.stringify(outputKey)}, key);
+                  }
+                }
+              }
+            })()`);
+                }
+            },
+        },
+    };
+}

package/build/common.d.ts

@@ -3,6 +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;
+/** If bundling for a react-server target. */
+export declare function getIsReactServer(caller: any): boolean;
 export declare function getIsDev(caller: any): any;
 export declare function getIsFastRefreshEnabled(caller: any): any;
 export declare function getIsProd(caller: any): boolean;

package/build/common.js

@@ -3,7 +3,20 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getAsyncRoutes = exports.getInlineEnvVarsEnabled = exports.getExpoRouterAbsoluteAppRoot = exports.getIsServer = exports.getBaseUrl = exports.getIsNodeModule = exports.getIsProd = exports.getIsFastRefreshEnabled = exports.getIsDev = exports.getPossibleProjectRoot = exports.getPlatform = exports.getBundler = exports.hasModule = void 0;
+exports.hasModule = hasModule;
+exports.getBundler = getBundler;
+exports.getPlatform = getPlatform;
+exports.getPossibleProjectRoot = getPossibleProjectRoot;
+exports.getIsReactServer = getIsReactServer;
+exports.getIsDev = getIsDev;
+exports.getIsFastRefreshEnabled = getIsFastRefreshEnabled;
+exports.getIsProd = getIsProd;
+exports.getIsNodeModule = getIsNodeModule;
+exports.getBaseUrl = getBaseUrl;
+exports.getIsServer = getIsServer;
+exports.getExpoRouterAbsoluteAppRoot = getExpoRouterAbsoluteAppRoot;
+exports.getInlineEnvVarsEnabled = getInlineEnvVarsEnabled;
+exports.getAsyncRoutes = getAsyncRoutes;
 const path_1 = __importDefault(require("path"));
 function hasModule(name) {
     try {
@@ -16,7 +29,6 @@ function hasModule(name) {
         throw error;
     }
 }
-exports.hasModule = hasModule;
 /** Determine which bundler is being used. */
 function getBundler(caller) {
     if (!caller)
@@ -33,7 +45,6 @@ function getBundler(caller) {
     // Assume anything else is Metro.
     return 'metro';
 }
-exports.getBundler = getBundler;
 function getPlatform(caller) {
     if (!caller)
         return null;
@@ -46,7 +57,6 @@ function getPlatform(caller) {
     // unknown
     return caller.platform;
 }
-exports.getPlatform = getPlatform;
 function getPossibleProjectRoot(caller) {
     if (!caller)
         return null;
@@ -55,39 +65,36 @@ function getPossibleProjectRoot(caller) {
     // unknown
     return process.env.EXPO_PROJECT_ROOT;
 }
-exports.getPossibleProjectRoot = getPossibleProjectRoot;
+/** If bundling for a react-server target. */
+function getIsReactServer(caller) {
+    return caller?.isReactServer ?? false;
+}
 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 getExpoRouterAbsoluteAppRoot(caller) {
     const rootModuleId = caller?.routerRoot ?? './app';
     if (path_1.default.isAbsolute(rootModuleId)) {
@@ -96,7 +103,6 @@ function getExpoRouterAbsoluteAppRoot(caller) {
     const projectRoot = getPossibleProjectRoot(caller) || '/';
     return path_1.default.join(projectRoot, rootModuleId);
 }
-exports.getExpoRouterAbsoluteAppRoot = getExpoRouterAbsoluteAppRoot;
 function getInlineEnvVarsEnabled(caller) {
     const isWebpack = getBundler(caller) === 'webpack';
     const isDev = getIsDev(caller);
@@ -107,7 +113,6 @@ function getInlineEnvVarsEnabled(caller) {
     // Servers have env vars left as-is to read from the environment.
     return !isNodeModule && !isWebpack && !isDev && !isServer && !preserveEnvVars;
 }
-exports.getInlineEnvVarsEnabled = getInlineEnvVarsEnabled;
 function getAsyncRoutes(caller) {
     const isServer = getIsServer(caller);
     if (isServer) {
@@ -120,4 +125,3 @@ function getAsyncRoutes(caller) {
     }
     return caller?.asyncRoutes ?? false;
 }
-exports.getAsyncRoutes = getAsyncRoutes;

package/build/define-plugin.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Copyright © 2024 650 Industries.
+ * Copyright (c) 2016 Formidable
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import * as t from '@babel/types';
+declare const plugin: ({ types }: {
+    types: typeof t;
+}) => babel.PluginObj;
+export default plugin;

package/build/define-plugin.js

@@ -0,0 +1,140 @@
+"use strict";
+/**
+ * Copyright © 2024 650 Industries.
+ * Copyright (c) 2016 Formidable
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const t = __importStar(require("@babel/types"));
+/**
+ * Replace a node with a given value. If the replacement results in a BinaryExpression, it will be
+ * evaluated. For example, if the result of the replacement is `var x = "production" === "production"`
+ * The evaluation will make a second replacement resulting in `var x = true`
+ */
+function replaceAndEvaluateNode(nodePath, replacement) {
+    nodePath.replaceWith(t.valueToNode(replacement));
+    if (nodePath.parentPath && nodePath.parentPath.isBinaryExpression()) {
+        const result = nodePath.parentPath.evaluate();
+        if (result.confident) {
+            nodePath.parentPath.replaceWith(t.valueToNode(result.value));
+        }
+    }
+}
+/**
+ * Checks if the given identifier is an ES module import
+ * @param  {babelNode} identifierNodePath The node to check
+ * @return {boolean} Indicates if the provided node is an import specifier or references one
+ */
+const isImportIdentifier = (identifierNodePath) => {
+    if (identifierNodePath.container &&
+        !Array.isArray(identifierNodePath.container) &&
+        'type' in identifierNodePath.container) {
+        return (identifierNodePath.container.type === 'ImportDefaultSpecifier' ||
+            identifierNodePath.container.type === 'ImportSpecifier');
+    }
+    return false;
+};
+const memberExpressionComparator = (nodePath, value) => nodePath.matchesPattern(value);
+const identifierComparator = (nodePath, value) => 'name' in nodePath.node && nodePath.node.name === value;
+const unaryExpressionComparator = (nodePath, value) => {
+    if ('argument' in nodePath.node && nodePath.node.argument && 'name' in nodePath.node?.argument) {
+        return nodePath.node.argument.name === value;
+    }
+    return false;
+};
+const isLeftHandSideOfAssignmentExpression = (node, parent) => t.isAssignmentExpression(parent) && parent.left === node;
+const TYPEOF_PREFIX = 'typeof ';
+const plugin = ({ types }) => {
+    const processNode = (replacements, nodePath, comparator) => {
+        const replacementKey = Object.keys(replacements).find((value) => comparator(nodePath, value));
+        if (typeof replacementKey === 'string' &&
+            replacements != null &&
+            replacementKey in replacements) {
+            replaceAndEvaluateNode(nodePath, replacements[replacementKey]);
+        }
+    };
+    return {
+        name: 'expo-define-globals',
+        visitor: {
+            // process.env.NODE_ENV;
+            MemberExpression(nodePath, state) {
+                if (
+                // Prevent rewriting if the member expression is on the left-hand side of an assignment
+                isLeftHandSideOfAssignmentExpression(nodePath.node, nodePath.parent)) {
+                    return;
+                }
+                const replacements = state.opts;
+                assertOptions(replacements);
+                processNode(replacements, nodePath, memberExpressionComparator);
+            },
+            // const x = { version: VERSION };
+            Identifier(nodePath, state) {
+                const binding = nodePath.scope?.getBinding(nodePath.node.name);
+                if (binding ||
+                    // Don't transform import identifiers. This is meant to mimic webpack's
+                    // DefinePlugin behavior.
+                    isImportIdentifier(nodePath) ||
+                    // Do not transform Object keys / properties unless they are computed like {[key]: value}
+                    (nodePath.key === 'key' &&
+                        nodePath.parent &&
+                        'computed' in nodePath.parent &&
+                        nodePath.parent.computed === false) ||
+                    (nodePath.key === 'property' &&
+                        nodePath.parent &&
+                        'computed' in nodePath.parent &&
+                        nodePath.parent.computed === false)) {
+                    return;
+                }
+                const replacements = state.opts;
+                assertOptions(replacements);
+                processNode(replacements, nodePath, identifierComparator);
+            },
+            // typeof window
+            UnaryExpression(nodePath, state) {
+                if (nodePath.node.operator !== 'typeof') {
+                    return;
+                }
+                const replacements = state.opts;
+                assertOptions(replacements);
+                const typeofValues = {};
+                Object.keys(replacements).forEach((key) => {
+                    if (key.substring(0, TYPEOF_PREFIX.length) === TYPEOF_PREFIX) {
+                        typeofValues[key.substring(TYPEOF_PREFIX.length)] = replacements[key];
+                    }
+                });
+                processNode(typeofValues, nodePath, unaryExpressionComparator);
+            },
+        },
+    };
+};
+function assertOptions(opts) {
+    if (opts == null || typeof opts !== 'object') {
+        throw new Error('define plugin expects an object as options');
+    }
+}
+exports.default = plugin;

package/build/environment-restricted-imports.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright © 2024 650 Industries.
+ */
+import { ConfigAPI, types } from '@babel/core';
+/** Prevent importing certain known imports in given environments. This is for sanity to ensure a module never accidentally gets imported unexpectedly. */
+export declare function environmentRestrictedImportsPlugin(api: ConfigAPI & {
+    types: typeof types;
+}): babel.PluginObj;

package/build/environment-restricted-imports.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.environmentRestrictedImportsPlugin = environmentRestrictedImportsPlugin;
+const common_1 = require("./common");
+const FORBIDDEN_CLIENT_IMPORTS = ['server-only'];
+const FORBIDDEN_REACT_SERVER_IMPORTS = ['client-only'];
+/** Prevent importing certain known imports in given environments. This is for sanity to ensure a module never accidentally gets imported unexpectedly. */
+function environmentRestrictedImportsPlugin(api) {
+    const { types: t } = api;
+    const isReactServer = api.caller(common_1.getIsReactServer);
+    const forbiddenPackages = isReactServer
+        ? FORBIDDEN_REACT_SERVER_IMPORTS
+        : FORBIDDEN_CLIENT_IMPORTS;
+    function checkSource(source, path) {
+        forbiddenPackages.forEach((forbiddenImport) => {
+            if (source === forbiddenImport) {
+                if (isReactServer) {
+                    throw path.buildCodeFrameError(`Importing '${forbiddenImport}' module is not allowed in a React server bundle. Add the "use client" directive to this file or one of the parent modules to allow importing this module.`);
+                }
+                else {
+                    throw path.buildCodeFrameError(`Importing '${forbiddenImport}' module is not allowed in a client component.`);
+                }
+            }
+        });
+    }
+    return {
+        name: 'expo-environment-restricted-imports-plugin',
+        visitor: {
+            ImportDeclaration(path) {
+                checkSource(path.node.source.value, path);
+            },
+            ExportAllDeclaration(path) {
+                if (path.node.source) {
+                    checkSource(path.node.source.value, path);
+                }
+            },
+            ExportNamedDeclaration(path) {
+                if (path.node.source) {
+                    checkSource(path.node.source.value, path);
+                }
+            },
+            CallExpression(path) {
+                if ((('name' in path.node.callee && path.node.callee.name === 'require') ||
+                    (t.isMemberExpression(path.node.callee) &&
+                        'name' in path.node.callee.property &&
+                        ['resolveWeak', 'importAll', 'importDefault'].includes(path.node.callee.property.name))) &&
+                    path.node.arguments.length > 0 &&
+                    t.isStringLiteral(path.node.arguments[0])) {
+                    checkSource(path.node.arguments[0].value, path);
+                }
+                // Handle dynamic import() syntax
+                else if (path.node.callee.type === 'Import' &&
+                    path.node.arguments.length > 0 &&
+                    t.isStringLiteral(path.node.arguments[0])) {
+                    checkSource(path.node.arguments[0].value, path);
+                }
+            },
+        },
+    };
+}

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.expoInlineManifestPlugin = void 0;
+exports.expoInlineManifestPlugin = expoInlineManifestPlugin;
 const config_1 = require("expo/config");
 const common_1 = require("./common");
 const debug = require('debug')('expo:babel:inline-manifest');
@@ -23,7 +23,7 @@ const RESTRICTED_MANIFEST_FIELDS = [
     'android',
     // Hide internal / build values
     'plugins',
-    'hooks',
+    'hooks', // hooks no longer exists in the typescript type but should still be removed
     '_internal',
     // Remove metro-specific values
     'assetBundlePatterns',
@@ -146,4 +146,3 @@ function expoInlineManifestPlugin(api) {
         },
     };
 }
-exports.expoInlineManifestPlugin = expoInlineManifestPlugin;

package/build/expo-router-plugin.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.expoRouterBabelPlugin = void 0;
+exports.expoRouterBabelPlugin = expoRouterBabelPlugin;
 const core_1 = require("@babel/core");
 const path_1 = __importDefault(require("path"));
 const resolve_from_1 = __importDefault(require("resolve-from"));
@@ -78,4 +78,3 @@ function expoRouterBabelPlugin(api) {
         },
     };
 }
-exports.expoRouterBabelPlugin = expoRouterBabelPlugin;

package/build/index.d.ts

@@ -13,6 +13,8 @@ type BabelPresetExpoPlatformOptions = {
     disableFlowStripTypesTransform?: boolean;
     enableBabelRuntime?: boolean;
     unstable_transformProfile?: 'default' | 'hermes-stable' | 'hermes-canary';
+    /** Enable `typeof window` runtime checks. The default behavior is to minify `typeof window` on web clients to `"object"` and `"undefined"` on servers. */
+    minifyTypeofWindow?: boolean;
 };
 export type BabelPresetExpoOptions = BabelPresetExpoPlatformOptions & {
     /** Web-specific settings. */

package/build/index.js

@@ -1,10 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+const client_module_proxy_plugin_1 = require("./client-module-proxy-plugin");
 const common_1 = require("./common");
+const environment_restricted_imports_1 = require("./environment-restricted-imports");
 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");
+const restricted_react_api_plugin_1 = require("./restricted-react-api-plugin");
 function getOptions(options, platform) {
     const tag = platform === 'web' ? 'web' : 'native';
     return {
@@ -18,9 +21,12 @@ function babelPresetExpo(api, options = {}) {
     let platform = api.caller((caller) => caller?.platform);
     const engine = api.caller((caller) => caller?.engine) ?? 'default';
     const isDev = api.caller(common_1.getIsDev);
+    const isServer = api.caller(common_1.getIsServer);
+    const isReactServer = api.caller(common_1.getIsReactServer);
     const isFastRefreshEnabled = api.caller(common_1.getIsFastRefreshEnabled);
     const baseUrl = api.caller(common_1.getBaseUrl);
     const supportsStaticESM = api.caller((caller) => caller?.supportsStaticESM);
+    const isServerEnv = isServer || isReactServer;
     // 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);
@@ -31,6 +37,9 @@ function babelPresetExpo(api, options = {}) {
         platform = 'web';
     }
     const platformOptions = getOptions(options, platform);
+    if (platformOptions.useTransformReactJSXExperimental != null) {
+        throw new Error(`babel-preset-expo: The option 'useTransformReactJSXExperimental' has been removed in favor of { jsxRuntime: 'classic' }.`);
+    }
     if (platformOptions.disableImportExportTransform == null) {
         if (platform === 'web') {
             // Only disable import/export transform when Webpack is used because
@@ -52,27 +61,39 @@ function babelPresetExpo(api, options = {}) {
         // `@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-transform-object-rest-spread'),
-            { loose: false },
-        ]);
+        extraPlugins.push([require('@babel/plugin-transform-object-rest-spread'), { loose: false }]);
     }
-    else {
+    else if (!isServerEnv) {
         // 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.
+    const inlines = {
+        'process.env.EXPO_OS': platform,
+        // 'typeof document': isServerEnv ? 'undefined' : 'object',
+    };
+    // `typeof window` is left in place for native + client environments.
+    const minifyTypeofWindow = (platformOptions.minifyTypeofWindow ?? isServerEnv) || platform === 'web';
+    if (minifyTypeofWindow !== false) {
+        // This nets out slightly faster in development when considering the cost of bundling server dependencies.
+        inlines['typeof window'] = isServerEnv ? 'undefined' : 'object';
+    }
+    if (isProduction) {
+        inlines['process.env.NODE_ENV'] = 'production';
+        inlines['__DEV__'] = false;
+        inlines['Platform.OS'] = platform;
+    }
+    if (process.env.NODE_ENV !== 'test') {
+        inlines['process.env.EXPO_BASE_URL'] = baseUrl;
+    }
+    extraPlugins.push([require('./define-plugin'), inlines]);
+    if (isProduction) {
+        // Metro applies a version of this plugin too but it does it after the Platform modules have been transformed to CJS, this breaks the transform.
+        // Here, we'll apply it before the commonjs transform, in production only, to ensure `Platform.OS` is replaced with a string literal.
         extraPlugins.push([
-            require('metro-transform-plugins/src/inline-plugin.js'),
+            require('./minify-platform-select-plugin'),
             {
-                dev: isDev,
-                inlinePlatform: true,
                 platform,
             },
         ]);
@@ -80,17 +101,6 @@ function babelPresetExpo(api, options = {}) {
     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.
@@ -100,7 +110,7 @@ function babelPresetExpo(api, options = {}) {
         extraPlugins.push(inline_env_vars_1.expoInlineEnvVars);
     }
     if (platform === 'web') {
-        extraPlugins.push(require.resolve('babel-plugin-react-native-web'));
+        extraPlugins.push(require('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);
@@ -109,6 +119,14 @@ function babelPresetExpo(api, options = {}) {
     if ((0, common_1.hasModule)('expo-router')) {
         extraPlugins.push(expo_router_plugin_1.expoRouterBabelPlugin);
     }
+    // Ensure these only run when the user opts-in to bundling for a react server to prevent unexpected behavior for
+    // users who are bundling using the client-only system.
+    if (isReactServer) {
+        extraPlugins.push(client_module_proxy_plugin_1.reactClientReferencesPlugin);
+        extraPlugins.push(restricted_react_api_plugin_1.environmentRestrictedReactAPIsPlugin);
+    }
+    // This plugin is fine to run whenever as the server-only imports were introduced as part of RSC and shouldn't be used in any client code.
+    extraPlugins.push(environment_restricted_imports_1.environmentRestrictedImportsPlugin);
     if (isFastRefreshEnabled) {
         extraPlugins.push([
             require('react-refresh/babel'),
@@ -118,6 +136,8 @@ function babelPresetExpo(api, options = {}) {
             },
         ]);
     }
+    // Use the simpler babel preset for web and server environments (both web and native SSR).
+    const isModernEngine = platform === 'web' || isServerEnv;
     return {
         presets: [
             [
@@ -125,7 +145,7 @@ function babelPresetExpo(api, options = {}) {
                 // 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'),
+                isModernEngine ? require('./web-preset') : require('@react-native/babel-preset'),
                 {
                     // Defaults to undefined, set to `true` to disable `@babel/plugin-transform-flow-strip-types`
                     disableFlowStripTypesTransform: platformOptions.disableFlowStripTypesTransform,
@@ -184,12 +204,12 @@ function babelPresetExpo(api, options = {}) {
         plugins: [
             ...extraPlugins,
             // TODO: Remove
-            [require.resolve('@babel/plugin-proposal-decorators'), { legacy: true }],
-            require.resolve('@babel/plugin-transform-export-namespace-from'),
+            [require('@babel/plugin-proposal-decorators'), { legacy: true }],
+            require('@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')],
+                platformOptions.reanimated !== false && [require('react-native-reanimated/plugin')],
         ].filter(Boolean),
     };
 }

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

@@ -2,12 +2,3 @@ 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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.expoInlineTransformEnvVars = exports.expoInlineEnvVars = void 0;
+exports.expoInlineEnvVars = expoInlineEnvVars;
 const debug = require('debug')('expo:babel:env-vars');
 function expoInlineEnvVars(api) {
     const { types: t } = api;
@@ -26,35 +26,3 @@ function expoInlineEnvVars(api) {
         },
     };
 }
-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/minify-platform-select-plugin.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Copyright © 2024 650 Industries.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { ConfigAPI, types } from '@babel/core';
+export default function minifyPlatformSelectPlugin({ types: t, }: ConfigAPI & {
+    types: typeof types;
+}): babel.PluginObj;

package/build/minify-platform-select-plugin.js

@@ -0,0 +1,73 @@
+"use strict";
+/**
+ * Copyright © 2024 650 Industries.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = minifyPlatformSelectPlugin;
+const core_1 = require("@babel/core");
+function minifyPlatformSelectPlugin({ types: t, }) {
+    return {
+        visitor: {
+            CallExpression(path, state) {
+                const node = path.node;
+                const arg = node.arguments[0];
+                const opts = state.opts;
+                if (isPlatformSelect(path) && core_1.types.isObjectExpression(arg)) {
+                    if (hasStaticProperties(arg)) {
+                        let fallback;
+                        if (opts.platform === 'web') {
+                            fallback = () => findProperty(arg, 'default', () => t.identifier('undefined'));
+                        }
+                        else {
+                            fallback = () => findProperty(arg, 'native', () => findProperty(arg, 'default', () => t.identifier('undefined')));
+                        }
+                        path.replaceWith(findProperty(arg, opts.platform, fallback));
+                    }
+                }
+            },
+        },
+    };
+}
+function isPlatformSelect(path) {
+    return (core_1.types.isMemberExpression(path.node.callee) &&
+        core_1.types.isIdentifier(path.node.callee.object) &&
+        core_1.types.isIdentifier(path.node.callee.property) &&
+        path.node.callee.object.name === 'Platform' &&
+        path.node.callee.property.name === 'select' &&
+        core_1.types.isObjectExpression(path.node.arguments[0]));
+}
+function findProperty(objectExpression, key, fallback) {
+    let value = null;
+    for (const p of objectExpression.properties) {
+        if (!core_1.types.isObjectProperty(p) && !core_1.types.isObjectMethod(p)) {
+            continue;
+        }
+        if ((core_1.types.isIdentifier(p.key) && p.key.name === key) ||
+            (core_1.types.isStringLiteral(p.key) && p.key.value === key)) {
+            if (core_1.types.isObjectProperty(p)) {
+                value = p.value;
+                break;
+            }
+            else if (core_1.types.isObjectMethod(p)) {
+                value = core_1.types.toExpression(p);
+                break;
+            }
+        }
+    }
+    return value ?? fallback();
+}
+function hasStaticProperties(objectExpression) {
+    return objectExpression.properties.every((p) => {
+        if (('computed' in p && p.computed) || core_1.types.isSpreadElement(p)) {
+            return false;
+        }
+        if (core_1.types.isObjectMethod(p) && p.kind !== 'method') {
+            return false;
+        }
+        return core_1.types.isIdentifier(p.key) || core_1.types.isStringLiteral(p.key);
+    });
+}

package/build/restricted-react-api-plugin.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Copyright © 2024 650 Industries.
+ */
+import { ConfigAPI, types } from '@babel/core';
+export declare function environmentRestrictedReactAPIsPlugin(api: ConfigAPI & {
+    types: typeof types;
+}): babel.PluginObj;

package/build/restricted-react-api-plugin.js

@@ -0,0 +1,115 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.environmentRestrictedReactAPIsPlugin = environmentRestrictedReactAPIsPlugin;
+const INVALID_SERVER_REACT_DOM_APIS = [
+    'findDOMNode',
+    'flushSync',
+    'unstable_batchedUpdates',
+    'useFormStatus',
+    'useFormState',
+];
+// From the React docs: https://github.com/vercel/next.js/blob/d43a387d271263f2c1c4da6b9db826e382fc489c/packages/next-swc/crates/next-custom-transforms/src/transforms/react_server_components.rs#L665-L681
+const INVALID_SERVER_REACT_APIS = [
+    'Component',
+    'createContext',
+    'createFactory',
+    'PureComponent',
+    'useDeferredValue',
+    'useEffect',
+    'useImperativeHandle',
+    'useInsertionEffect',
+    'useLayoutEffect',
+    'useReducer',
+    'useRef',
+    'useState',
+    'useSyncExternalStore',
+    'useTransition',
+    'useOptimistic',
+];
+function isNodeModule(path) {
+    return path != null && /[\\/]node_modules[\\/]/.test(path);
+}
+// Restricts imports from `react` and `react-dom` when using React Server Components.
+const FORBIDDEN_IMPORTS = {
+    react: INVALID_SERVER_REACT_APIS,
+    'react-dom': INVALID_SERVER_REACT_DOM_APIS,
+};
+function environmentRestrictedReactAPIsPlugin(api) {
+    const { types: t } = api;
+    return {
+        name: 'expo-environment-restricted-react-api-plugin',
+        visitor: {
+            ImportDeclaration(path, state) {
+                // Skip node_modules
+                if (isNodeModule(state.file.opts.filename)) {
+                    return;
+                }
+                const sourceValue = path.node.source.value;
+                const forbiddenList = FORBIDDEN_IMPORTS[sourceValue];
+                if (forbiddenList) {
+                    path.node.specifiers.forEach((specifier) => {
+                        if (t.isImportSpecifier(specifier)) {
+                            const importName = t.isStringLiteral(specifier.imported)
+                                ? specifier.imported.value
+                                : specifier.imported.name;
+                            // Check for both named and namespace imports
+                            const isForbidden = forbiddenList.includes(importName);
+                            if (isForbidden) {
+                                if (['Component', 'PureComponent'].includes(importName)) {
+                                    // Add special handling for `Component` since it is different to a function API.
+                                    throw path.buildCodeFrameError(`Client-only "${sourceValue}" API "${importName}" cannot be imported in a React server component. Add the "use client" directive to the top of this file or one of the parent files to enable running this stateful code on a user's device.`);
+                                }
+                                else {
+                                    const forbiddenImports = path.scope.getData('forbiddenImports') ?? new Map();
+                                    if (!forbiddenImports.has(sourceValue))
+                                        forbiddenImports.set(sourceValue, new Set());
+                                    forbiddenImports.get(sourceValue).add(importName);
+                                    path.scope.setData('forbiddenImports', forbiddenImports);
+                                }
+                            }
+                        }
+                        else {
+                            const importName = t.isStringLiteral(specifier.local)
+                                ? specifier.local
+                                : specifier.local.name;
+                            // Save namespace import for later checks in MemberExpression
+                            path.scope.setData('importedNamespace', { [importName]: sourceValue });
+                        }
+                    });
+                }
+            },
+            // Match against `var _useState = useState(0),`
+            VariableDeclarator(path) {
+                const importedSpecifiers = path.scope.getData('forbiddenImports');
+                if (!importedSpecifiers)
+                    return;
+                importedSpecifiers.forEach((forbiddenApis, importName) => {
+                    if (t.isCallExpression(path.node.init) && t.isIdentifier(path.node.init.callee)) {
+                        if (forbiddenApis.has(path.node.init.callee.name)) {
+                            throw path.buildCodeFrameError(`Client-only "useState" API cannot be used in a React server component. Add the "use client" directive to the top of this file or one of the parent files to enable running this stateful code on a user's device.`);
+                        }
+                    }
+                });
+            },
+            MemberExpression(path) {
+                const importedNamespaces = path.scope.getData('importedNamespace') || {};
+                Object.keys(importedNamespaces).forEach((namespace) => {
+                    const library = importedNamespaces[namespace];
+                    const forbiddenList = FORBIDDEN_IMPORTS[library];
+                    const objectName = t.isIdentifier(path.node.object) ? path.node.object.name : null;
+                    if (objectName === namespace &&
+                        forbiddenList &&
+                        t.isIdentifier(path.node.property) &&
+                        forbiddenList.includes(path.node.property.name)) {
+                        // Throw a special error for class components since it's not always clear why they cannot be used in RSC.
+                        // e.g. https://x.com/Baconbrix/status/1749223042440392806?s=20
+                        if (path.node.property.name === 'Component') {
+                            throw path.buildCodeFrameError(`Class components cannot be used in a React server component due to their ability to contain stateful and interactive APIs that cannot be statically evaluated in non-interactive environments such as a server or at build-time. Migrate to a function component, or add the "use client" directive to the top of this file or one of the parent files to render this class component on a user's device.`);
+                        }
+                        throw path.buildCodeFrameError(`Client-only "${namespace}" API "${path.node.property.name}" cannot be used in a React server component. Add the "use client" directive to the top of this file or one of the parent files to enable running this stateful code on a user's device.`);
+                    }
+                });
+            },
+        },
+    };
+}

package/build/web-preset.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Copyright © 2024 650 Industries.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * A fork of `@react-native/babel-preset` but with everything unrelated to web/ssr removed.
+ * https://github.com/facebook/react-native/blob/2af1da42ff517232f1309efed7565fe9ddbbac77/packages/react-native-babel-preset/src/configs/main.js#L1
+ */
+export {};

package/build/web-preset.js

@@ -0,0 +1,73 @@
+"use strict";
+/**
+ * Copyright © 2024 650 Industries.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * A fork of `@react-native/babel-preset` but with everything unrelated to web/ssr removed.
+ * https://github.com/facebook/react-native/blob/2af1da42ff517232f1309efed7565fe9ddbbac77/packages/react-native-babel-preset/src/configs/main.js#L1
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+// use `this.foo = bar` instead of `this.defineProperty('foo', ...)`
+const loose = true;
+const defaultPlugins = [
+    [require('@babel/plugin-syntax-flow')],
+    [require('babel-plugin-transform-flow-enums')],
+    [require('@babel/plugin-transform-private-methods'), { loose }],
+    [require('@babel/plugin-transform-private-property-in-object'), { loose }],
+    // [require('@babel/plugin-syntax-dynamic-import')],
+    [require('@babel/plugin-syntax-export-default-from')],
+    // [require('@babel/plugin-syntax-nullish-coalescing-operator')],
+    // [require('@babel/plugin-syntax-optional-chaining')],
+    // [require('@babel/plugin-transform-unicode-regex')],
+];
+module.exports = function (babel, options) {
+    const extraPlugins = [];
+    // NOTE: We also remove `@react-native/babel-plugin-codegen` since it doesn't seem needed on web.
+    if (!options || !options.disableImportExportTransform) {
+        extraPlugins.push([require('@babel/plugin-proposal-export-default-from')], [
+            require('@babel/plugin-transform-modules-commonjs'),
+            {
+                strict: false,
+                strictMode: false, // prevent "use strict" injections
+                lazy: options.lazyImportExportTransform,
+                allowTopLevelThis: true, // dont rewrite global `this` -> `undefined`
+            },
+        ]);
+    }
+    if (!options || options.enableBabelRuntime !== false) {
+        // Allows configuring a specific runtime version to optimize output
+        const isVersion = typeof options?.enableBabelRuntime === 'string';
+        extraPlugins.push([
+            require('@babel/plugin-transform-runtime'),
+            {
+                helpers: true,
+                regenerator: false,
+                ...(isVersion && { version: options.enableBabelRuntime }),
+            },
+        ]);
+    }
+    return {
+        comments: false,
+        compact: true,
+        presets: [
+            // TypeScript support
+            [require('@babel/preset-typescript'), { allowNamespaces: true }],
+        ],
+        overrides: [
+            // the flow strip types plugin must go BEFORE class properties!
+            // there'll be a test case that fails if you don't.
+            {
+                plugins: [require('@babel/plugin-transform-flow-strip-types')],
+            },
+            {
+                plugins: defaultPlugins,
+            },
+            {
+                plugins: extraPlugins,
+            },
+        ],
+    };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "babel-preset-expo",
-  "version": "10.0.2",
+  "version": "11.0.0",
   "description": "The Babel preset for Expo projects",
   "main": "build/index.js",
   "files": [
@@ -42,13 +42,13 @@
   },
   "dependencies": {
     "@babel/plugin-proposal-decorators": "^7.12.9",
-    "@babel/plugin-transform-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-object-rest-spread": "^7.12.13",
     "@babel/plugin-transform-parameters": "^7.22.15",
-    "@react-native/babel-preset": "^0.73.18",
-    "babel-plugin-react-native-web": "~0.18.10",
+    "@babel/preset-typescript": "^7.23.0",
+    "@babel/preset-react": "^7.22.15",
+    "@react-native/babel-preset": "~0.74.80",
+    "babel-plugin-react-native-web": "~0.19.10",
     "react-refresh": "0.14.0"
   },
   "devDependencies": {
@@ -56,5 +56,5 @@
     "expo-module-scripts": "^3.3.0",
     "jest": "^29.2.1"
   },
-  "gitHead": "88a8226609b870c0635c39da43ac8306c4dc7031"
+  "gitHead": "4165b8d72e1b9a1889c2767534cc619e21468110"
 }