feat(babel-preset-expo): add option to configure decorators version

expo · Mar 26, 2024 · e2f0ee5 · e2f0ee5
1 parent 4b34b0c
commit e2f0ee5
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 2 deletions.
diff --git a/packages/babel-preset-expo/CHANGELOG.md b/packages/babel-preset-expo/CHANGELOG.md
@@ -10,6 +10,7 @@
 - Minify `typeof window` in server and web contexts. ([#27530](https://github.com/expo/expo/pull/27530) by [@EvanBacon](https://github.com/EvanBacon))
 - Add support for using `process.env.EXPO_OS` to detect the platform without platform shaking imports. ([#27509](https://github.com/expo/expo/pull/27509) by [@EvanBacon](https://github.com/EvanBacon))
 - Add basic `react-server` support. ([#27264](https://github.com/expo/expo/pull/27264) by [@EvanBacon](https://github.com/EvanBacon))
+- Add `decoratorsPluginVersion` option to configure or disable `@babel/plugin-proposal-decorators`. ([#27857](https://github.com/expo/expo/pull/27857) by [@Nodonisko](https://github.com/Nodonisko))
 
 ### 🐛 Bug fixes
 

diff --git a/packages/babel-preset-expo/README.md b/packages/babel-preset-expo/README.md
@@ -159,6 +159,23 @@ If `undefined` (default), this will be set automatically via `caller.supportsSta
 
 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`.
 
+### `decoratorsPluginVersion`
+
+Changes version of proposal that `@babel/plugin-proposal-decorators` uses. Defaults to `legacy`. You can find more info about versions in [`@babel/plugin-proposal-decorators` docs](https://babeljs.io/docs/babel-plugin-proposal-decorators#version). It could be set to `false` to disable the plugin.
+
+```js
+[
+  'babel-preset-expo',
+  {
+    // Use specific version of decorators proposal
+    decoratorsPluginVersion: '2023-05',
+
+    // Disable decorators plugin
+    decoratorsPluginVersion: false,
+  },
+];
+```
+
 ### `enableBabelRuntime`
 
 Passed to `@react-native/babel-preset`.

diff --git a/packages/babel-preset-expo/build/index.d.ts b/packages/babel-preset-expo/build/index.d.ts
diff --git a/packages/babel-preset-expo/build/index.js b/packages/babel-preset-expo/build/index.js
diff --git a/packages/babel-preset-expo/src/index.ts b/packages/babel-preset-expo/src/index.ts
@@ -40,6 +40,9 @@ type BabelPresetExpoPlatformOptions = {
   // Defaults to `'default'`, can also use `'hermes-canary'`
   unstable_transformProfile?: 'default' | 'hermes-stable' | 'hermes-canary';
 
+  /** Defaults to "legacy", set to false to disable `@babel/plugin-proposal-decorators` or set custom version string like "2023-05" */
+  decoratorsPluginVersion?: string | false;
+
   /** Enable `typeof window` runtime checks. The default behavior is to minify `typeof window` on web clients to `"object"` and `"undefined"` on servers. */
   minifyTypeofWindow?: boolean;
 };
@@ -216,6 +219,15 @@ function babelPresetExpo(api: ConfigAPI, options: BabelPresetExpoOptions = {}):
     ]);
   }
 
+  if (platformOptions.decoratorsPluginVersion !== false) {
+    extraPlugins.push([
+      require('@babel/plugin-proposal-decorators'),
+      {
+        version: platformOptions.decoratorsPluginVersion ?? 'legacy',
+      },
+    ]);
+  }
+
   return {
     presets: [
       [
@@ -291,7 +303,6 @@ function babelPresetExpo(api: ConfigAPI, options: BabelPresetExpoOptions = {}):
     plugins: [
       ...extraPlugins,
       // TODO: Remove
-      [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.