React Compilerを既存のプロジェクトに少しずつ入れる方法

export function OrderTable({ rows, options }: { rows: Row[]; options: Options }) {
  options.renderedCount = (options.renderedCount ?? 0) + 1; // レンダー中に props を書き換える（ルール違反）
  return (
    <table>
      <tbody>
        {rows.map((r) => <tr key={r.id}><td>{r.amount}</td></tr>)}
      </tbody>
    </table>
  );
}

import { relative } from 'node:path';
import type { Logger } from 'babel-plugin-react-compiler';

// どの関数がコンパイルされたか（されなかったか）を1行ずつ出す
export const logger: Logger = {
  logEvent(filename, event) {
    if (event.kind === 'CompileSuccess' || event.kind === 'CompileError' || event.kind === 'CompileSkip') {
      const name = 'fnName' in event ? (event.fnName ?? '') : '';
      console.log(`[compiler] ${event.kind} ${relative(process.cwd(), filename ?? '')} ${name}`);
    }
  },
};

import reactHooks from 'eslint-plugin-react-hooks';
import tseslint from 'typescript-eslint';
import { defineConfig } from 'eslint/config';

export default defineConfig([
  { files: ['src/**/*.{ts,tsx}'], languageOptions: { parser: tseslint.parser } },
  reactHooks.configs.flat.recommended,
]);

./src/legacy/OrderTable.tsx
  5:3  error  Error: This value cannot be modified
Modifying component props or hook arguments is not allowed. Consider using a local variable instead.

import { defineConfig } from 'vite';
import react, { reactCompilerPreset } from '@vitejs/plugin-react';
import babel from '@rolldown/plugin-babel';
import { logger } from './compiler-logger.ts';

export default defineConfig({
  plugins: [
    react(),
    babel({
      include: [/\/src\/features\/cart\//], // まずはこのフォルダだけ
      presets: [reactCompilerPreset({ logger })],
    }),
  ],
});

[compiler] CompileSuccess src/features/cart/CartSummary.tsx CartSummary
[compiler] CompileSuccess src/features/cart/PriceRow.tsx PriceRow
[compiler] CompileSuccess src/features/cart/useCartTotal.ts useCartTotal

function CartSummary(t0) {
	const $ = (0, import_compiler_runtime.c)(8);
	const { items } = t0;
	const [note, setNote] = (0, import_react.useState)("");
--
function ProfileCard({ name }) {
	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
		className: "card",
		children: name

[compiler] CompileSuccess src/App.tsx App
[compiler] CompileSuccess src/features/cart/CartSummary.tsx CartSummary
[compiler] CompileSuccess src/legacy/LegacyBanner.tsx LegacyBanner
[compiler] CompileError src/legacy/OrderTable.tsx 
[compiler] CompileSuccess src/features/profile/ProfileCard.tsx ProfileCard
[compiler] CompileSuccess src/features/cart/useCartTotal.ts useCartTotal
[compiler] CompileSuccess src/features/cart/PriceRow.tsx PriceRow

// babel.config.cjs（logger の定義は省略。test の値は検証ごとに書き換えた）
module.exports = {
  presets: [
    '@babel/preset-typescript',
    ['@babel/preset-react', { runtime: 'automatic' }],
  ],
  overrides: [
    {
      test: './src/features/**/*.{js,jsx,ts,tsx}',
      plugins: [['babel-plugin-react-compiler', { logger }]],
    },
  ],
};

--- test: './src/features/**/*.{js,jsx,ts,tsx}'（Babel 8）
$ node babel-all.mjs
変換したファイル：11個

// フォルダを指定する（その下のファイルがすべて当てはまる）
test: './src/features',

// 拡張子ごとに分けて並べる
test: ['./src/features/**/*.ts', './src/features/**/*.tsx'],

export function LegacyBanner({ text }: { text: string }) {
  "use no memo"; // TODO: コンパイル後の表示を確かめたら外す
  return <p className="banner">{text}</p>;
}

[compiler] CompileSkip src/legacy/LegacyBanner.tsx 

✗ Build failed in 313ms
error during build:
Build failed with 1 error:
[plugin @rolldown/plugin-babel] ./src/legacy/OrderTable.tsx
RolldownError: [BabelError] Found 1 error:
Error: This value cannot be modified

babel({ presets: [reactCompilerPreset({ compilationMode: 'annotation', logger })] })

export function ProfileCard({ name }: { name: string }) {
  "use memo";
  return <div className="card">{name}</div>;
}

[compiler] CompileSuccess src/features/profile/ProfileCard.tsx ProfileCard

// src/compilerFlags.ts
// URL に ?compiler=on が付いているときだけ、コンパイル後の版を使う
export function isCompilerEnabled(): boolean {
  return new URLSearchParams(window.location.search).get('compiler') === 'on';
}

babel({
  presets: [
    reactCompilerPreset({
      gating: { source: '/src/compilerFlags.ts', importSpecifierName: 'isCompilerEnabled' },
      logger,
    }),
  ],
}),

var ProfileCard = isCompilerEnabled() ? function ProfileCard(t0) {
	const $ = (0, import_compiler_runtime.c)(2);
	...
} : function ProfileCard({ name }) {
	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {

URL=/  input="abc"  PriceRow の描画回数=4
URL=/?compiler=on  input="abc"  PriceRow の描画回数=1