babel-preset-expo 11.0.10 → 11.1.0-canary-20240627-1402f4b

package/README.md

@@ -42,6 +42,24 @@ If the `bundler` is not defined, it will default to checking if a `babel-loader`
 
 ## Options
 
+### `react-compiler`
+
+Settings to pass to `babel-plugin-react-compiler`. Set as `false` to disable the plugin. As of SDK 51, you must also enable `experiments.reactCompiler: true` in the `app.json`.
+
+```js
+[
+  'babel-preset-expo',
+  {
+    'react-compiler': {
+      sources: (filename) => {
+        // Match file names to include in the React Compiler.
+        return filename.includes('src/path/to/dir');
+      },
+    },
+  },
+];
+```
+
 ### `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.

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

@@ -101,10 +101,7 @@ function reactClientReferencesPlugin() {
                 path.pushContainer('body', core_1.template.ast(proxyModule.join('\n')));
                 assertExpoMetadata(state.file.metadata);
                 // Save the client reference in the metadata.
-                if (!state.file.metadata.clientReferences) {
-                    state.file.metadata.clientReferences ??= [];
-                }
-                state.file.metadata.clientReferences.push(outputKey);
+                state.file.metadata.reactClientReference = outputKey;
                 // Store the proxy export names for testing purposes.
                 state.file.metadata.proxyExports = [...proxyExports];
             },

package/build/common.d.ts

@@ -1,16 +1,17 @@
 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 getBundler(caller?: any): "metro" | "webpack" | null;
+export declare function getPlatform(caller?: any): string | null | undefined;
+export declare function getPossibleProjectRoot(caller?: any): string | null | undefined;
 /** 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;
-export declare function getIsNodeModule(caller: any): boolean;
-export declare function getBaseUrl(caller: any): string;
-export declare function getIsServer(caller: any): any;
-export declare function getExpoRouterAbsoluteAppRoot(caller: any): string;
-export declare function getInlineEnvVarsEnabled(caller: any): boolean;
-export declare function getAsyncRoutes(caller: any): boolean;
+export declare function getIsReactServer(caller?: any): boolean;
+export declare function getIsDev(caller?: any): boolean;
+export declare function getIsFastRefreshEnabled(caller?: any): boolean | undefined;
+export declare function getIsProd(caller?: any): boolean;
+export declare function getIsNodeModule(caller?: any): boolean;
+export declare function getBaseUrl(caller?: any): string;
+export declare function getReactCompiler(caller?: any): boolean;
+export declare function getIsServer(caller?: any): boolean;
+export declare function getExpoRouterAbsoluteAppRoot(caller?: any): string;
+export declare function getInlineEnvVarsEnabled(caller?: any): boolean;
+export declare function getAsyncRoutes(caller?: any): boolean;

package/build/common.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.getAsyncRoutes = exports.getInlineEnvVarsEnabled = exports.getExpoRouterAbsoluteAppRoot = exports.getIsServer = exports.getBaseUrl = exports.getIsNodeModule = exports.getIsProd = exports.getIsFastRefreshEnabled = exports.getIsDev = exports.getIsReactServer = exports.getPossibleProjectRoot = exports.getPlatform = exports.getBundler = exports.hasModule = void 0;
+exports.getAsyncRoutes = exports.getInlineEnvVarsEnabled = exports.getExpoRouterAbsoluteAppRoot = exports.getIsServer = exports.getReactCompiler = exports.getBaseUrl = exports.getIsNodeModule = exports.getIsProd = exports.getIsFastRefreshEnabled = exports.getIsDev = exports.getIsReactServer = exports.getPossibleProjectRoot = exports.getPlatform = exports.getBundler = exports.hasModule = void 0;
 const path_1 = __importDefault(require("path"));
 function hasModule(name) {
     try {
@@ -19,6 +19,7 @@ function hasModule(name) {
 exports.hasModule = hasModule;
 /** Determine which bundler is being used. */
 function getBundler(caller) {
+    assertExpoBabelCaller(caller);
     if (!caller)
         return null;
     if (caller.bundler)
@@ -35,6 +36,7 @@ function getBundler(caller) {
 }
 exports.getBundler = getBundler;
 function getPlatform(caller) {
+    assertExpoBabelCaller(caller);
     if (!caller)
         return null;
     if (caller.platform)
@@ -48,6 +50,7 @@ function getPlatform(caller) {
 }
 exports.getPlatform = getPlatform;
 function getPossibleProjectRoot(caller) {
+    assertExpoBabelCaller(caller);
     if (!caller)
         return null;
     if (caller.projectRoot)
@@ -58,10 +61,13 @@ function getPossibleProjectRoot(caller) {
 exports.getPossibleProjectRoot = getPossibleProjectRoot;
 /** If bundling for a react-server target. */
 function getIsReactServer(caller) {
+    assertExpoBabelCaller(caller);
     return caller?.isReactServer ?? false;
 }
 exports.getIsReactServer = getIsReactServer;
+function assertExpoBabelCaller(caller) { }
 function getIsDev(caller) {
+    assertExpoBabelCaller(caller);
     if (caller?.isDev != null)
         return caller.isDev;
     // https://babeljs.io/docs/options#envname
@@ -69,12 +75,14 @@ function getIsDev(caller) {
 }
 exports.getIsDev = getIsDev;
 function getIsFastRefreshEnabled(caller) {
+    assertExpoBabelCaller(caller);
     if (!caller)
         return false;
     return caller.isHMREnabled && !caller.isServer && !caller.isNodeModule && getIsDev(caller);
 }
 exports.getIsFastRefreshEnabled = getIsFastRefreshEnabled;
 function getIsProd(caller) {
+    assertExpoBabelCaller(caller);
     if (caller?.isDev != null)
         return caller.isDev === false;
     // https://babeljs.io/docs/options#envname
@@ -86,14 +94,22 @@ function getIsNodeModule(caller) {
 }
 exports.getIsNodeModule = getIsNodeModule;
 function getBaseUrl(caller) {
+    assertExpoBabelCaller(caller);
     return caller?.baseUrl ?? '';
 }
 exports.getBaseUrl = getBaseUrl;
+function getReactCompiler(caller) {
+    assertExpoBabelCaller(caller);
+    return caller?.supportsReactCompiler ?? false;
+}
+exports.getReactCompiler = getReactCompiler;
 function getIsServer(caller) {
+    assertExpoBabelCaller(caller);
     return caller?.isServer ?? false;
 }
 exports.getIsServer = getIsServer;
 function getExpoRouterAbsoluteAppRoot(caller) {
+    assertExpoBabelCaller(caller);
     const rootModuleId = caller?.routerRoot ?? './app';
     if (path_1.default.isAbsolute(rootModuleId)) {
         return rootModuleId;
@@ -103,6 +119,7 @@ function getExpoRouterAbsoluteAppRoot(caller) {
 }
 exports.getExpoRouterAbsoluteAppRoot = getExpoRouterAbsoluteAppRoot;
 function getInlineEnvVarsEnabled(caller) {
+    assertExpoBabelCaller(caller);
     const isWebpack = getBundler(caller) === 'webpack';
     const isDev = getIsDev(caller);
     const isServer = getIsServer(caller);
@@ -114,6 +131,7 @@ function getInlineEnvVarsEnabled(caller) {
 }
 exports.getInlineEnvVarsEnabled = getInlineEnvVarsEnabled;
 function getAsyncRoutes(caller) {
+    assertExpoBabelCaller(caller);
     const isServer = getIsServer(caller);
     if (isServer) {
         return false;

package/build/expo-router-plugin.js

@@ -69,7 +69,7 @@ function expoRouterBabelPlugin(api) {
                                 path.replaceWith(t.stringLiteral(routerAbsoluteRoot));
                             }
                             else if (key.value.startsWith('EXPO_ROUTER_APP_ROOT')) {
-                                path.replaceWith(t.stringLiteral(getExpoRouterAppRoot(possibleProjectRoot, routerAbsoluteRoot)));
+                                path.replaceWith(t.stringLiteral(getExpoRouterAppRoot(projectRoot, routerAbsoluteRoot)));
                             }
                         }
                     }

package/build/index.d.ts

@@ -13,6 +13,53 @@ type BabelPresetExpoPlatformOptions = {
     disableFlowStripTypesTransform?: boolean;
     enableBabelRuntime?: boolean;
     unstable_transformProfile?: 'default' | 'hermes-stable' | 'hermes-canary';
+    /** Settings to pass to `babel-plugin-react-compiler`. Set as `false` to disable the plugin. */
+    'react-compiler'?: false | {
+        enableUseMemoCachePolyfill?: boolean;
+        compilationMode?: 'infer' | 'strict';
+        panicThreshold?: 'none' | 'all_errors' | 'critical_errors';
+        logger?: any;
+        environment?: {
+            customHooks?: unknown;
+            enableResetCacheOnSourceFileChanges?: boolean;
+            enablePreserveExistingMemoizationGuarantees?: boolean;
+            /** @default true */
+            validatePreserveExistingMemoizationGuarantees?: boolean;
+            enableForest?: boolean;
+            enableUseTypeAnnotations?: boolean;
+            /** @default true */
+            enableReactiveScopesInHIR?: boolean;
+            /** @default true */
+            validateHooksUsage?: boolean;
+            validateRefAccessDuringRender?: boolean;
+            /** @default true */
+            validateNoSetStateInRender?: boolean;
+            validateMemoizedEffectDependencies?: boolean;
+            validateNoCapitalizedCalls?: string[] | null;
+            /** @default true */
+            enableAssumeHooksFollowRulesOfReact?: boolean;
+            /** @default true */
+            enableTransitivelyFreezeFunctionExpressions: boolean;
+            enableEmitFreeze?: unknown;
+            enableEmitHookGuards?: unknown;
+            enableEmitInstrumentForget?: unknown;
+            assertValidMutableRanges?: boolean;
+            enableChangeVariableCodegen?: boolean;
+            enableMemoizationComments?: boolean;
+            throwUnknownException__testonly?: boolean;
+            enableTreatFunctionDepsAsConditional?: boolean;
+            /** Automatically enabled when reanimated plugin is added. */
+            enableCustomTypeDefinitionForReanimated?: boolean;
+            /** @default `null` */
+            hookPattern?: string | null;
+        };
+        gating?: unknown;
+        noEmit?: boolean;
+        runtimeModule?: string | null;
+        eslintSuppressionRules?: unknown | null;
+        flowSuppressions?: boolean;
+        ignoreUseNoForget?: boolean;
+    };
     /** Enable `typeof window` runtime checks. The default behavior is to minify `typeof window` on web clients to `"object"` and `"undefined"` on servers. */
     minifyTypeofWindow?: boolean;
 };

package/build/index.js

@@ -21,9 +21,11 @@ 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 isNodeModule = api.caller(common_1.getIsNodeModule);
     const isServer = api.caller(common_1.getIsServer);
     const isReactServer = api.caller(common_1.getIsReactServer);
     const isFastRefreshEnabled = api.caller(common_1.getIsFastRefreshEnabled);
+    const isReactCompilerEnabled = api.caller(common_1.getReactCompiler);
     const baseUrl = api.caller(common_1.getBaseUrl);
     const supportsStaticESM = api.caller((caller) => caller?.supportsStaticESM);
     const isServerEnv = isServer || isReactServer;
@@ -57,6 +59,30 @@ function babelPresetExpo(api, options = {}) {
     // `@react-native/babel-preset` will handle it.
     const lazyImportsOption = platformOptions?.lazyImports;
     const extraPlugins = [];
+    // Add compiler as soon as possible to prevent other plugins from modifying the code.
+    if (isReactCompilerEnabled &&
+        // Don't run compiler on node modules, it can only safely be run on the user's code.
+        !isNodeModule &&
+        // Only run for client code. It's unclear if compiler has any benefits for React Server Components.
+        // NOTE: We might want to allow running it to prevent hydration errors.
+        !isServerEnv &&
+        // Give users the ability to opt-out of the feature, per-platform.
+        platformOptions['react-compiler'] !== false) {
+        extraPlugins.push([
+            require('babel-plugin-react-compiler'),
+            {
+                runtimeModule: 'babel-preset-expo/react-compiler-runtime.js',
+                // enableUseMemoCachePolyfill: true,
+                // compilationMode: 'infer',
+                environment: {
+                    enableResetCacheOnSourceFileChanges: !isProduction,
+                    ...(platformOptions['react-compiler']?.environment ?? {}),
+                },
+                panicThreshold: isDev ? undefined : 'NONE',
+                ...platformOptions['react-compiler'],
+            },
+        ]);
+    }
     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.

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "babel-preset-expo",
-  "version": "11.0.10",
+  "version": "11.1.0-canary-20240627-1402f4b",
   "description": "The Babel preset for Expo projects",
   "main": "build/index.js",
   "files": [
     "build",
-    "lazy-imports-blacklist.js"
+    "lazy-imports-blacklist.js",
+    "react-compiler-runtime.js"
   ],
   "scripts": {
     "build": "expo-module build",
@@ -48,13 +49,14 @@
     "@babel/preset-typescript": "^7.23.0",
     "@babel/preset-react": "^7.22.15",
     "@react-native/babel-preset": "0.74.84",
+    "babel-plugin-react-compiler": "^0.0.0-experimental-938cd9a-20240601",
     "babel-plugin-react-native-web": "~0.19.10",
     "react-refresh": "^0.14.2"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
-    "expo-module-scripts": "^3.3.0",
+    "expo-module-scripts": "3.6.0-canary-20240627-1402f4b",
     "jest": "^29.2.1"
   },
-  "gitHead": "6f609a05a2d4dac7fd281bcc502575440c5af7c9"
+  "gitHead": "1402f4bcfdfcec328fc1e20cf1656bbefe7c3b7b"
 }

package/react-compiler-runtime.js

@@ -0,0 +1,21 @@
+// lib/react-compiler-runtime.js
+const $empty = Symbol.for('react.memo_cache_sentinel');
+const React = require('react');
+/**
+ * DANGER: this hook is NEVER meant to be called directly!
+ *
+ * Note that this is a temporary userspace implementation of this function
+ * from React 19. It is not as efficient and may invalidate more frequently
+ * than the official API. Please upgrade to React 19 as soon as you can.
+ **/
+export function c(size) {
+  return React.useState(() => {
+    const $ = new Array(size);
+    for (let ii = 0; ii < size; ii++) {
+      $[ii] = $empty;
+    }
+    // @ts-ignore
+    $[$empty] = true;
+    return $;
+  })[0];
+}