babel-preset-expo 0.0.1-canary-20231205-250b31f → 0.0.1-canary-20240222-c729a13

package/README.md

@@ -1,8 +1,8 @@
 # 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.
+This preset extends the default React Native preset (`@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.
+You can use this preset in any React Native project as a drop-in replacement for `@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.
 
@@ -92,14 +92,10 @@ This can improve the initial load time of your app because evaluating dependenci
 
 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)
-
+- `null` - [@react-native/babel-preset](https://github.com/facebook/react-native/tree/main/packages/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`.
@@ -117,11 +113,20 @@ The value of `lazyImports` has a few possible effects:
 
 ### `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:
+Pass `true` to disable the transform that converts import/export to `module.exports`. Avoid setting this property directly. If you're using Metro, set `experimentalImportSupport: true` instead to ensure the entire pipeline is configured correctly.
 
-> `TypeError: Cannot assign to read only property 'exports' of object '#<Object>'`
+```js
+// metro.config.js
+
+config.transformer.getTransformOptions = async () => ({
+  transform: {
+    // Setting this to `true` will automatically toggle `disableImportExportTransform` in `babel-preset-expo`.
+    experimentalImportSupport: true,
+  },
+});
+```
 
-**default:** `false` when using Webpack. `true` otherwise.
+If `undefined` (default), this will be set automatically via `caller.supportsStaticESM` which is set by the bundler.
 
 ```js
 [
@@ -134,15 +139,15 @@ Enabling this option will allow your project to run with older JavaScript syntax
 
 ### `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`.
+Changes the engine preset in `@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`.
+Passed to `@react-native/babel-preset`.
 
 ### `disableFlowStripTypesTransform`
 
-Passed to `metro-react-native-babel-preset`.
+Passed to `@react-native/babel-preset`.
 
 ## Platform-specific options
 

package/build/index.js

@@ -20,6 +20,7 @@ function babelPresetExpo(api, options = {}) {
     const isDev = api.caller(common_1.getIsDev);
     const isFastRefreshEnabled = api.caller(common_1.getIsFastRefreshEnabled);
     const baseUrl = api.caller(common_1.getBaseUrl);
+    const supportsStaticESM = api.caller((caller) => caller?.supportsStaticESM);
     // 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);
@@ -34,10 +35,10 @@ function babelPresetExpo(api, options = {}) {
         if (platform === 'web') {
             // Only disable import/export transform when Webpack is used because
             // Metro does not support tree-shaking.
-            platformOptions.disableImportExportTransform = isWebpack;
+            platformOptions.disableImportExportTransform = supportsStaticESM ?? isWebpack;
         }
         else {
-            platformOptions.disableImportExportTransform = false;
+            platformOptions.disableImportExportTransform = supportsStaticESM ?? false;
         }
     }
     if (platformOptions.unstable_transformProfile == null) {
@@ -51,10 +52,7 @@ 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-proposal-object-rest-spread'),
-            { loose: false },
-        ]);
+        extraPlugins.push([require('@babel/plugin-transform-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
@@ -99,7 +97,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);
@@ -183,12 +181,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "babel-preset-expo",
-  "version": "0.0.1-canary-20231205-250b31f",
+  "version": "0.0.1-canary-20240222-c729a13",
   "description": "The Babel preset for Expo projects",
   "main": "build/index.js",
   "files": [
@@ -42,19 +42,19 @@
   },
   "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/plugin-transform-object-rest-spread": "^7.12.13",
+    "@babel/plugin-transform-parameters": "^7.22.15",
     "@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",
+    "babel-plugin-react-native-web": "~0.19.10",
     "react-refresh": "0.14.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
-    "expo-module-scripts": "0.0.1-canary-20231205-250b31f",
+    "expo-module-scripts": "0.0.1-canary-20240222-c729a13",
     "jest": "^29.2.1"
   },
-  "gitHead": "250b31f516a04578a29c6bcda29aab80ef4d4e2d"
+  "gitHead": "c729a13f936926743c13c021f569a22921455e49"
 }