feat(babel): rewrite for web (attempt 2)

packages/babel-preset-expo/CHANGELOG.md

@@ -4,6 +4,8 @@
 
 ### 🛠 Breaking changes
 
+- Remove all unused babel plugins on web and SSR. ([#27907](https://github.com/expo/expo/pull/27907) by [@EvanBacon](https://github.com/EvanBacon))
+
 ### 🎉 New features
 
 - Add faster `Platform.select` transform. ([#27533](https://github.com/expo/expo/pull/27533) by [@EvanBacon](https://github.com/EvanBacon))

packages/babel-preset-expo/package.json

@@ -45,6 +45,7 @@
     "@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-typescript": "^7.23.0",
     "@babel/preset-react": "^7.22.15",
     "@react-native/babel-preset": "~0.74.76",
     "babel-plugin-react-native-web": "~0.19.10",

packages/babel-preset-expo/src/__tests__/__snapshots__/index.test.ts.snap

@@ -318,8 +318,8 @@ console.log("Hey I'm running on the UI thread");
 `;
 
 exports[`webpack supports reanimated worklets 1`] = `
-"var _worklet_549132292534_init_data={code:"function someWorklet(greeting){console.log(\\"Hey I'm running on the UI thread\\");}",location:"[mock]/worklet.js",sourceMap:"{\\"version\\":3,\\"names\\":[\\"someWorklet\\",\\"greeting\\",\\"console\\",\\"log\\"],\\"sources\\":[\\"[mock]/worklet.js\\"],\\"mappings\\":\\"AAAA,SAAAA,YAAAC,QAAA,EAAAC,OAAA,CAAAC,GAAA,qCACA\\"}",version:"[GLOBAL]"};var
-someWorklet=function(){var _e=[new global.Error(),1,-27];var someWorklet=function someWorklet(greeting){
+"const _worklet_549132292534_init_data={code:"function someWorklet(greeting){console.log(\\"Hey I'm running on the UI thread\\");}",location:"[mock]/worklet.js",sourceMap:"{\\"version\\":3,\\"names\\":[\\"someWorklet\\",\\"greeting\\",\\"console\\",\\"log\\"],\\"sources\\":[\\"[mock]/worklet.js\\"],\\"mappings\\":\\"AAAA,SAAAA,YAAAC,QAAA,EAAAC,OAAA,CAAAC,GAAA,qCACA\\"}",version:"[GLOBAL]"};const
+someWorklet=function(){const _e=[new global.Error(),1,-27];const someWorklet=function(greeting){
 
 console.log("Hey I'm running on the UI thread");
 };someWorklet.__closure={};someWorklet.__workletHash=549132292534;someWorklet.__initData=_worklet_549132292534_init_data;someWorklet.__stackDetails=_e;return someWorklet;}();"

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

@@ -223,7 +223,7 @@ function babelPresetExpo(api: ConfigAPI, options: BabelPresetExpoOptions = {}):
         // 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'),
+        platform === 'web' ? 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,

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

@@ -0,0 +1,94 @@
+/**
+ * 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
+ */
+
+// 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-proposal-class-properties'), { loose }],
+  [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: unknown,
+  options: {
+    disableImportExportTransform?: boolean;
+    lazyImportExportTransform?: any;
+    enableBabelRuntime?: boolean;
+  }
+) {
+  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`
+        },
+      ]
+    );
+  }
+
+  // TODO(gaearon): put this back into '=>' indexOf bailout
+  // and patch react-refresh to not depend on this transform.
+  extraPlugins.push([require('@babel/plugin-transform-arrow-functions')]);
+
+  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,
+      },
+    ],
+  };
+};