fix(babel): fix unused platform code removal

packages/babel-preset-expo/CHANGELOG.md

@@ -8,6 +8,7 @@
 
 ### 🎉 New features
 
+- Add `Platform.OS` shaking without needing to enable experimental ESM transforms. ([#25171](https://github.com/expo/expo/pull/25171) by [@EvanBacon](https://github.com/EvanBacon))
 - Inline environment variables in production before the serializer to support source maps. ([#25239](https://github.com/expo/expo/pull/25239) by [@EvanBacon](https://github.com/EvanBacon))
 - Support all options in top-level object and in `native` and `web` sub-objects. ([#25172](https://github.com/expo/expo/pull/25172) by [@EvanBacon](https://github.com/EvanBacon))
 - Use the standard `@babel/preset-react` for all React transformations. ([#25125](https://github.com/expo/expo/pull/25125) by [@EvanBacon](https://github.com/EvanBacon))

packages/babel-preset-expo/src/__tests__/__snapshots__/inline-env-vars.test.ts.snap

@@ -17,7 +17,7 @@ exports[`inlines environment variables 1`] = `
 "
 var foo = process.env.JEST_WORKER_ID;
 process.env.ABC;
-console.log(process.env.NODE_ENV);
+console.log("production");
 console.log("development");
 "bar";
 

packages/babel-preset-expo/src/__tests__/inline-env-vars.test.ts

@@ -105,7 +105,7 @@ process.env['other'];
 
   expect(contents).toMatch('development');
   expect(contents).toMatch('bar');
-  expect(contents).toMatch('process.env.NODE_ENV');
+  expect(contents).not.toMatch('process.env.NODE_ENV');
   expect(contents).toMatch('process.env.JEST_WORKER_ID');
   expect(contents).not.toMatch('EXPO_PUBLIC_NODE_ENV');
   expect(contents).not.toMatch('EXPO_PUBLIC_FOO');

packages/babel-preset-expo/src/__tests__/platform-shaking.test.ts

@@ -0,0 +1,103 @@
+import * as babel from '@babel/core';
+
+import preset from '..';
+
+function getCaller(props: Record<string, string>): babel.TransformCaller {
+  return props as unknown as babel.TransformCaller;
+}
+
+const DEFAULT_OPTS = {
+  babelrc: false,
+  presets: [[preset]],
+  plugins: [
+    // Fold constants to emulate Metro
+    require('metro-transform-plugins/src/constant-folding-plugin.js'),
+  ],
+  sourceMaps: true,
+  filename: 'unknown',
+  configFile: false,
+  compact: true,
+  comments: false,
+  retainLines: false,
+};
+
+function stripReactNativeImport(code: string) {
+  return code
+    .replace(
+      'var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");var _Platform=_interopRequireDefault(require("react-native-web/dist/exports/Platform"));',
+      ''
+    )
+    .replace('var _reactNative=require("react-native");', '');
+}
+
+it(`removes Platform module usage on web`, () => {
+  const options = {
+    ...DEFAULT_OPTS,
+    caller: getCaller({ name: 'metro', engine: 'hermes', platform: 'web' }),
+  };
+
+  const sourceCode = `
+    import { Platform } from 'react-native';
+
+    if (Platform.OS === 'ios') {
+      console.log('ios')
+    }
+
+    Platform.select({
+      ios: () => console.log('ios'),
+      web: () => console.log('web'),
+      android: () => console.log('android'),
+    })
+    `;
+
+  expect(stripReactNativeImport(babel.transform(sourceCode, options)!.code!)).toEqual(
+    `(function(){return console.log('web');});`
+  );
+});
+
+it(`removes Platform module usage on native`, () => {
+  const options = {
+    ...DEFAULT_OPTS,
+    caller: getCaller({ name: 'metro', engine: 'hermes', platform: 'android' }),
+  };
+
+  expect(
+    babel.transform(
+      `Platform.select({ ios: () => console.log('ios'), web: () => console.log('web'), android: () => console.log('android'), })`,
+      options
+    )!.code
+  ).toEqual(`(function(){return console.log('android');});`);
+
+  const sourceCode = `
+    import { Platform } from 'react-native';
+
+    if (Platform.OS === 'ios') {
+      console.log('ios')
+    }
+
+    Platform.select({
+      ios: () => console.log('ios'),
+      web: () => console.log('web'),
+      android: () => console.log('android'),
+    })
+    `;
+
+  expect(stripReactNativeImport(babel.transform(sourceCode, options)!.code!)).toEqual(
+    `(function(){return console.log('android');});`
+  );
+});
+
+it(`removes __DEV__ usage`, () => {
+  const options = {
+    ...DEFAULT_OPTS,
+    caller: getCaller({ name: 'metro', engine: 'hermes', platform: 'android' }),
+  };
+
+  const sourceCode = `  
+    if (__DEV__) {
+      require('./foobar')
+    }
+    `;
+
+  expect(babel.transform(sourceCode, options)!.code!).toEqual(``);
+});

packages/babel-preset-expo/src/index.ts

@@ -98,6 +98,21 @@ function babelPresetExpo(api: ConfigAPI, options: BabelPresetExpoOptions = {}):
     extraPlugins.push(require('@babel/plugin-transform-parameters'));
   }
 
+  if (!isDev && 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.
+    extraPlugins.push([
+      require('metro-transform-plugins/src/inline-plugin.js'),
+      {
+        dev: isDev,
+        inlinePlatform: true,
+        platform,
+      },
+    ]);
+  }
+
   if (platformOptions.useTransformReactJSXExperimental != null) {
     throw new Error(
       `babel-preset-expo: The option 'useTransformReactJSXExperimental' has been removed in favor of { jsxRuntime: 'classic' }.`