refactor: update static computed properties to static, move to experimental react compiler#8143
refactor: update static computed properties to static, move to experimental react compiler#8143joshblack wants to merge 8 commits into
Conversation
🦋 Changeset detectedLatest commit: 4473727 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> Copilot-Session: 47294113-3de3-46e1-a6e8-f3360cf91de4
ac3063e to
860feda
Compare
Replace static computed property syntax with static property names so React Compiler diagnostics are surfaced instead of ignored. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> Copilot-Session: 56b531f4-215a-46cc-a593-543687336648
Limit the React Compiler static-property cleanup to static computed property cases and keep the existing dynamic template-literal diagnostic handling. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> Copilot-Session: 56b531f4-215a-46cc-a593-543687336648
Convert the remaining computed object keys that failed the check to static property names so all compiler diagnostics are surfaced. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> Copilot-Session: 56b531f4-215a-46cc-a593-543687336648
Move the longer static data attribute and class mappings into helpers so the React Compiler fixes stay readable. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> Copilot-Session: 56b531f4-215a-46cc-a593-543687336648
Keep the compiler-check test file unchanged while preserving the source fixes for surfaced compiler diagnostics. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> Copilot-Session: 56b531f4-215a-46cc-a593-543687336648
Update React Compiler and runtime packages to the current experimental build and drop source rewrites that are no longer needed with that compiler. Keep the object-pattern destructuring fixes and make compiler error handling robust across compiler builds. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> Copilot-Session: 56b531f4-215a-46cc-a593-543687336648
The experimental React Compiler package now resolves consistently, so the existing CompilerError instanceof check is sufficient. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> Copilot-Session: 56b531f4-215a-46cc-a593-543687336648
|
Integration test results from github/github-ui PR: |
There was a problem hiding this comment.
Pull request overview
This PR updates the repo’s React Compiler toolchain to a newer experimental build (to better match compiler behavior in the playground) and adjusts a handful of call sites to avoid computed-property destructuring patterns that still fail compiler checks. It also adds a changeset to capture the published @primer/react runtime dependency bump.
Changes:
- Bump
babel-plugin-react-compileracross the repo and bumpreact-compiler-runtimefor@primer/react(and devDependency usage in@primer/styled-react) to0.0.0-experimental-a1856f3-20260507. - Replace computed-key object destructuring (e.g.
{['aria-label']: x}) with static string-literal destructuring (e.g.{'aria-label': x}) in the remaining affected files. - Add a changeset for the
@primer/reactruntime dependency update and update the lockfile accordingly.
Show a summary per file
| File | Description |
|---|---|
| packages/styled-react/package.json | Bumps compiler plugin + runtime devDependency to the experimental build for the styled-react workspace. |
| packages/react/src/CounterLabel/CounterLabel.tsx | Converts data-component prop destructuring to static string-literal destructuring. |
| packages/react/src/Checkbox/Checkbox.tsx | Converts data-component prop destructuring to static string-literal destructuring. |
| packages/react/src/Button/ButtonBase.tsx | Converts aria-* prop destructuring to static string-literal destructuring. |
| packages/react/src/Autocomplete/Autocomplete.test.tsx | Converts aria-labelledby destructuring to static string-literal destructuring. |
| packages/react/src/ActionBar/ActionBar.tsx | Converts aria-label destructuring to static string-literal destructuring. |
| packages/react/package.json | Bumps react-compiler-runtime dependency and compiler plugin devDependency to the experimental build. |
| packages/react-compiler-check/package.json | Bumps compiler plugin dependency to the experimental build for the check package. |
| package.json | Bumps root babel-plugin-react-compiler devDependency to the experimental build. |
| package-lock.json | Updates the lockfile to reflect the dependency/version changes (plus some additional transitive bumps). |
| .changeset/react-compiler-experimental-runtime.md | Adds a patch changeset for @primer/react runtime dependency update. |
Review details
- Files reviewed: 10/11 changed files
- Comments generated: 0
- Review effort level: Low
Closes #
This PR updates our React Compiler packages to the current experimental build so the local migration check matches the compiler behavior in the playground more closely.
With the newer compiler, dynamic template-literal object keys compile without the source rewrites we were adding before. As a result, this PR keeps the source changes focused on computed object-pattern destructuring that still fails the compiler check.
Changelog
New
@primer/reactReact Compiler runtime dependency update.Changed
babel-plugin-react-compileracross the repo to0.0.0-experimental-a1856f3-20260507.react-compiler-runtimein@primer/reactand@primer/styled-reactto0.0.0-experimental-a1856f3-20260507.@primer/react-compiler-checkso compile errors are surfaced directly.Removed
Rollout strategy
This should be a patch: it updates internal compiler tooling and the published compiler runtime dependency, without changing the public component API.
Testing & Reviewing
Verified the compiler migration path and focused package checks:
npm run lint:react-compiler -w @primer/reactnpx vitest run packages/react-compiler-check/src/index.test.tsnpm run type-check -w @primer/react-compiler-checknpm run type-check -w @primer/reactnpm run type-check -w @primer/styled-react