feat: add support for react compiler (#6211)

Co-authored-by: Hector Garcia <[email protected]>

Author: joshblack

.changeset/clean-ends-end.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Add partial support for React Compiler to components

.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:

package-lock.json

@@ -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 = {

packages/react/.storybook/main.ts

@@ -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',

packages/react/babel.config.js

@@ -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",

packages/react/package.json

@@ -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',

packages/react/rollup.config.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}

packages/react/script/react-compiler.mjs

@@ -397,7 +397,7 @@ describe('SegmentedControl', () => {
       </SegmentedControl>,
     )
 
-    expect(spy).toHaveBeenCalledTimes(2)
+    expect(spy).toHaveBeenCalledTimes(1)
     spy.mockRestore()
   })
 

packages/react/src/SegmentedControl/SegmentedControl.test.tsx

@@ -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',
   },
 })
-