rnx-kit/incubator/metro-swc-worker

@rnx-kit/metro-swc-worker

🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧

This tool is EXPERIMENTAL - USE WITH CAUTION

🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧

An experimental Metro transformer using swc.

Requirements

This plugin currently depends on some unstable features introduced in Metro 0.66.1. Breaking changes were introduced in Metro 0.60, so this plugin will not work with React Native below 0.64.

Install

yarn add @rnx-kit/metro-swc-worker --dev

or if you're using npm:

npm add --save-dev @rnx-kit/metro-swc-worker

Usage

@rnx-kit/metro-swc-worker falls back to Babel for assets and Flow files, and relies on esbuild to perform import/export transformation and tree-shaking. For best effect, we also need to disable Babel's import/export transformation in babel.config.js:

 module.exports = {
   presets: [
     ["module:metro-react-native-babel-preset", {
+      disableImportExportTransform: true
     }],
   ],
 };

Next, we configure Metro to use the esbuild serializer and swc as transformer in metro.config.js:

 const { makeMetroConfig } = require("@rnx-kit/metro-config");
+const {
+  MetroSerializer,
+  esbuildTransformerConfig,
+} = require("@rnx-kit/metro-serializer-esbuild");

 module.exports = makeMetroConfig({
+  serializer: {
+    customSerializer: MetroSerializer(),
+  },
+  transformer: esbuildTransformerConfig,
+  transformerPath: require.resolve("@rnx-kit/metro-swc-worker"),
 });

Known Limitations

• Similar to Babel, your TypeScript code needs to be compilable with Isolated Modules enabled.
• Since this worker requires the esbuild serializer, it inherits all the limitations listed in the README.