feat: add support for react compiler (#6211)

joshblack · hectahertz · web-flow · commit c99d42e04e0f · 2025-06-23T16:53:54.000Z
Co-authored-by: Hector Garcia &lt;hectahertz@github.com&gt;
diff --git a/.changeset/clean-ends-end.md b/.changeset/clean-ends-end.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Add partial support for React Compiler to components
diff --git a/.github/workflows/migration-status.yml b/.github/workflows/migration-status.yml
@@ -5,6 +5,21 @@ on:
   workflow_dispatch:
 
 jobs:
+  react-compiler:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683
+      - name: Set up Node.js
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020
+        with:
+          node-version: 22
+          cache: 'npm'
+      - name: Install dependencies
+        run: npm ci
+      - name: Run migration script
+        run: |
+          node --experimental-strip-types script/react-compiler-migration-status.mts >> $GITHUB_STEP_SUMMARY
+
   styled-components:
     runs-on: ubuntu-latest
     steps:
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/react/.storybook/main.ts b/packages/react/.storybook/main.ts
@@ -3,6 +3,7 @@ import path from 'node:path'
 import react from '@vitejs/plugin-react'
 import postcssPresetPrimer from 'postcss-preset-primer'
 import type {StorybookConfig} from '@storybook/react-vite'
+import {isSupported} from '../script/react-compiler.mjs'
 
 const require = createRequire(import.meta.url)
 
@@ -55,7 +56,22 @@ const config: StorybookConfig = {
       config.css.postcss.plugins = [postcssPresetPrimer()]
     }
 
-    config.plugins = [...(config.plugins ?? []), react()]
+    config.plugins = [
+      ...(config.plugins ?? []),
+      react({
+        babel: {
+          plugins: [
+            [
+              'babel-plugin-react-compiler',
+              {
+                sources: (filepath: string) => isSupported(filepath),
+                target: '18',
+              },
+            ],
+          ],
+        },
+      }),
+    ]
 
     if (DEPLOY_ENV === 'development') {
       config.server = {
diff --git a/packages/react/babel.config.js b/packages/react/babel.config.js
@@ -1,10 +1,18 @@
 const defines = require('./babel-defines')
+const {isSupported} = require('./script/react-compiler.mjs')
 
 function replacementPlugin(env) {
   return ['babel-plugin-transform-replace-expressions', {replace: defines[env]}]
 }
 
 const sharedPlugins = [
+  [
+    'babel-plugin-react-compiler',
+    {
+      target: '18',
+      sources: isSupported,
+    },
+  ],
   'macros',
   'dev-expression',
   'add-react-displayname',
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -104,6 +104,7 @@
     "hsluv": "1.0.1",
     "lodash.isempty": "^4.4.0",
     "lodash.isobject": "^3.0.2",
+    "react-compiler-runtime": "^19.1.0-rc.2",
     "react-intersection-observer": "^9.16.0",
     "react-is": "^18.2.0",
     "styled-system": "^5.1.5",
@@ -164,6 +165,7 @@
     "babel-plugin-dev-expression": "0.2.3",
     "babel-plugin-macros": "3.1.0",
     "babel-plugin-open-source": "1.3.4",
+    "babel-plugin-react-compiler": "^19.1.0-rc.2",
     "babel-plugin-styled-components": "2.1.4",
     "babel-plugin-transform-replace-expressions": "0.2.0",
     "babel-polyfill": "6.26.0",
diff --git a/packages/react/rollup.config.mjs b/packages/react/rollup.config.mjs
@@ -9,6 +9,7 @@ import {importCSS} from 'rollup-plugin-import-css'
 import postcss from 'rollup-plugin-postcss'
 import postcssPresetPrimer from 'postcss-preset-primer'
 import MagicString from 'magic-string'
+import {isSupported} from './script/react-compiler.mjs'
 import packageJson from './package.json' with {type: 'json'}
 
 const input = new Set([
@@ -83,6 +84,13 @@ const baseConfig = {
         ],
       ],
       plugins: [
+        [
+          'babel-plugin-react-compiler',
+          {
+            target: '18',
+            sources: filepath => isSupported(filepath),
+          },
+        ],
         'macros',
         'add-react-displayname',
         'dev-expression',
diff --git a/packages/react/script/react-compiler.mjs b/packages/react/script/react-compiler.mjs
@@ -0,0 +1,46 @@
+import path from 'node:path'
+import glob from 'fast-glob'
+import {fileURLToPath} from 'node:url'
+
+const PACKAGE_DIR = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..')
+const files = glob
+  .sync('src/**/*.{ts,tsx}', {
+    cwd: PACKAGE_DIR,
+    ignore: ['**/*.d.ts'],
+  })
+  .map(match => {
+    return path.join(PACKAGE_DIR, match)
+  })
+const unsupported = new Set(
+  [
+    'src/ActionList/**/*.tsx',
+    'src/ActionMenu/**/*.tsx',
+    'src/AvatarStack/**/*.tsx',
+    'src/Button/**/*.tsx',
+    'src/ConfirmationDialog/**/*.tsx',
+    'src/Pagehead/**/*.tsx',
+    'src/Pagination/**/*.tsx',
+    'src/PointerBox/**/*.tsx',
+    'src/SelectPanel/**/*.tsx',
+    'src/SideNav.tsx',
+    'src/internal/components/CheckboxOrRadioGroup/**/*.tsx',
+  ].flatMap(pattern => {
+    if (glob.isDynamicPattern(pattern)) {
+      const matches = glob.sync(pattern, {cwd: PACKAGE_DIR})
+      if (matches) {
+        return matches.map(match => {
+          return path.join(PACKAGE_DIR, match)
+        })
+      }
+    }
+    return path.join(PACKAGE_DIR, pattern)
+  }),
+)
+
+function isSupported(filepath) {
+  return !unsupported.has(filepath)
+}
+
+const notMigrated = Array.from(unsupported)
+
+export {files, notMigrated, isSupported}
diff --git a/packages/react/src/SegmentedControl/SegmentedControl.test.tsx b/packages/react/src/SegmentedControl/SegmentedControl.test.tsx
@@ -397,7 +397,7 @@ describe('SegmentedControl', () => {
       </SegmentedControl>,
     )
 
-    expect(spy).toHaveBeenCalledTimes(2)
+    expect(spy).toHaveBeenCalledTimes(1)
     spy.mockRestore()
   })
 
diff --git a/packages/react/vitest.config.mts b/packages/react/vitest.config.mts
@@ -1,8 +1,23 @@
-import {defineConfig} from 'vitest/config'
 import react from '@vitejs/plugin-react'
+import {defineConfig} from 'vitest/config'
+import {isSupported} from './script/react-compiler.mjs'
 
 export default defineConfig({
-  plugins: [react()],
+  plugins: [
+    react({
+      babel: {
+        plugins: [
+          [
+            'babel-plugin-react-compiler',
+            {
+              sources: (filepath: string) => isSupported(filepath),
+              target: '18',
+            },
+          ],
+        ],
+      },
+    }),
+  ],
   define: {
     __DEV__: true,
   },
@@ -12,4 +27,3 @@ export default defineConfig({
     environment: 'node',
   },
 })
-
diff --git a/script/react-compiler-migration-status.mts b/script/react-compiler-migration-status.mts
@@ -0,0 +1,82 @@
+import path from 'node:path'
+import fs from 'node:fs'
+import {files as compilerFiles, notMigrated as notMigratedFiles} from '../packages/react/script/react-compiler.mjs'
+
+const directory = path.resolve(import.meta.dirname, '..')
+const files = compilerFiles.map(filepath => {
+  const stats = fs.statSync(filepath)
+  return {
+    filepath,
+    size: stats.size,
+  }
+})
+const migrated = files.filter(({filepath}) => {
+  return notMigratedFiles.indexOf(filepath) === -1
+})
+const notMigrated = notMigratedFiles.map(filepath => {
+  const stats = fs.statSync(filepath)
+  return {
+    filepath,
+    size: stats.size,
+  }
+})
+
+let totalSize = 0
+
+for (const {size} of files) {
+  totalSize += size
+}
+
+let migratedSize = 0
+
+for (const {size} of migrated) {
+  migratedSize += size
+}
+
+console.log(`
+# React Compiler Migration
+
+This report tracks our status migrating Primer React files to work with React Compiler.
+
+## Status
+
+**Status by file count**
+
+![Status by file count](https://geps.dev/progress/${Math.floor((migrated.length / files.length) * 100)})
+
+**Status by file size**
+
+![Status by file size](https://geps.dev/progress/${Math.floor((migratedSize / totalSize) * 100)})
+`)
+
+console.log(`
+## Not Migrated (${notMigrated.length})
+
+| Filepath | Size (kB) |
+| :------- | :-------- |`)
+
+for (const {filepath, size} of notMigrated) {
+  const relativePath = path.relative(directory, filepath)
+  const link = `[\`${relativePath}\`](https://github.com/primer/react/blob/main/${relativePath})`
+  console.log(`| ${link} | ${round(size / 1024)}kB |`)
+}
+
+console.log(`## Migrated (${migrated.length})
+
+<details>
+<summary>View migrated files</summary>
+
+| Filepath | Size (kB) |
+| :------- | :-------- |`)
+
+for (const {filepath, size} of migrated) {
+  const relativePath = path.relative(directory, filepath)
+  const link = `[\`${relativePath}\`](https://github.com/primer/react/blob/main/${relativePath})`
+  console.log(`| ${link} | ${round(size / 1024)}kB |`)
+}
+
+console.log(`\n</details>`)
+
+function round(value: number): number {
+  return Math.round((value + Number.EPSILON) * 100) / 100
+}

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@primer/react': minor
 +---
++
 +Add partial support for React Compiler to components
Original file line number	Diff line number	Diff line change
`@@ -397,7 +397,7 @@ describe('SegmentedControl', () => {`
`397`	`397`	`</SegmentedControl>,`
`398`	`398`	`)`
`399`	`399`
`400`		`- expect(spy).toHaveBeenCalledTimes(2)`
	`400`	`+ expect(spy).toHaveBeenCalledTimes(1)`
`401`	`401`	`spy.mockRestore()`
`402`	`402`	`})`
`403`	`403`