#If I use bun to package my react application, is it running the react compiler?

1 messages · Page 1 of 1 (latest)

thin dagger
#

Title says it all. My assumption is no, so my follow-up is, how can I run the react compiler while packaging with bun?

astral crest
#

From a basic skim, maybe you could try running their Babel plugin as a build step before packaging the rest of your project.

The most convenient way to do that is writing a Bun plugin wrapper that runs the Babel plugin and includes it in Bun.build.

// bun-plugin-react-compiler.ts
import { transformSync } from "@babel/core";

const reactCompilerConfig = { /* ... */ };
const babelOptions = {
  plugins: [
    ["babel-plugin-react-compiler", reactCompilerConfig],
  ],
};
const reactCompiler: Bun.BunPlugin = {
  name: "React Compiler",
  setup(build) {
    // maybe use a namespace to filter which ones get a React Compiler pass?
    build.onLoad({ filter: /\.(tsx|jsx)$/ }, async (args) => {
      const { code } = transformSync(
        await Bun.file(args.path).text(),
        babelOptions
      );
      // idk what the output format is
      return { contents: code, loader: "js" };
    });
  },
};

export default reactCompiler;

since Bun's plugin API is supposed to be similar to esbuild (see https://bun.sh/docs/bundler/vs-esbuild#plugin-api), you could try wrapping it in esbuild-plugin-babel instead

// bun-plugin-react-compiler.ts
import babel from "esbuild-plugin-babel";

const reactCompilerConfig = { /* ... */ };
export default babel({
  config: {
    plugins: [
      ["babel-plugin-react-compiler", reactCompilerConfig],
    ],
  },
});

example of using it in Bun.build

// build-script.ts
import reactCompiler from "./bun-plugin-react-compiler.ts";

await Bun.build({
  entrypoints: [/* ... */],
  plugins: [reactCompiler],
});

I haven't tested any of this (lol!)

south smelt