react-compiler supports compiling components with specified comments

[guaijie]

const ReactCompilerConfig = {
  sources: (filename) => {
    return filename.indexOf('src/path/to/dir') !== -1;
  },
};

The above approach is a bit complicated to use in existing projects to specify compilation scope, but it is also a very good one.

This is a simpler way to compile a specified component.
This approach is more explicit and allows developers to more quickly identify the scope of react-compiler compilation.
Easy to test component performance before and after compilation.

// @react-compiler
function Table() {
  // ...
  return <table>...</table>
}

[poteto]

This is actually supported via the compilationMode option although it's not documented. You can specify the following to enable the compiler's opt-in mode, meaning it will only compile components with the "use memo" annotation:

// babel.config.js
const ReactCompilerConfig = {
  compilationMode: 'annotation',
};

module.exports = function () {
  return {
    plugins: [
      ['babel-plugin-react-compiler', ReactCompilerConfig],
    ],
  };
};

function Compiled() {
  "use memo";
  // ...
}

function NotCompiledInAnnotationMode() {
  // ...
}

function NotCompiledUnderAnyCircumstances() {
  "use no memo";
  // ...
}

[arminyahya]

Hello everyone,
I would like to create a PR and provide an explanation about the compilationMode option if needed.
@poteto, do you think it would be useful to include a section about this on the website?

[yepitschunked]

FWIW, I went down this road as well. It made iteration easier because I could enable the React Compiler plugin in my build globally, and only had to modify source files to turn it on/off. The filename option means you have to modify the build config, which usually breaks incremental compilation and results in rebuilding the whole project.

I eventually found that there wasn't much value in turning on the compiler for specific components and went back to the filename option.

TBH the filename option in the compiler plugin feels a little redundant because you can do the same with Babel config overrides. You can get the best of both worlds by configuring babel so that:

• React Compiler is enabled unconditionally on some specific folders using babel's test pattern https://babeljs.io/docs/options#test
• React Compiler is enabled in annotationOnly on the rest of the repo using babel's exclude pattern https://babeljs.io/docs/options#exclude

This allows you to opt in entire folders without having to manage a bunch of annotation comments, but still letting you enable it on a specific component in dev without having to rebuild the whole project.