feat(babel-plugin-react-compiler): support satisfies operator #32742

rodrigofariow · 2025-03-25T15:44:43Z

rodrigofariow · 2025-03-25T15:52:25Z

Hi @josephsavona , this should be a relatively simple change.
I added tests based on the AS operator. It's very similar if not the same.

The problem right now is that because of a simple "satisfies", an entire component is no longer memoizable by the compiler.

I tested this change as a patch on my codebase and it worked fine on the output. Instead of skipping a component, it now compiles it fine.

What can I do to have this merged?

Cheers

josephsavona · 2025-03-25T16:31:04Z

Thanks for the contribution. The changes and test look reasonable, can you fix the test and lint issues?

rodrigofariow · 2025-03-25T17:43:31Z

Fixed formatting ✅
Thank you for the fast feedback btw @josephsavona 👍

Currently, `babel-plugin-react-compiler` is bundled with (almost) all external dependencies. This is because babel traversal and ast logic is not forward-compatible. Since `babel-plugin-react-compiler` needs to be compatible with babel pipelines across a wide semvar range, we (1) set this package's babel dependency to an early version and (2) inline babel libraries into our bundle. A few other packages in `react/compiler` depend on the compiler. This PR moves `snap`, our test fixture compiler and evaluator, to use the bundled version of `babel-plugin-react-compiler`. This decouples the babel version used by `snap` with the version used by `babel-plugin-react-compiler`, which means that `snap` now can test features from newer babel versions (see #32742).

Currently, `babel-plugin-react-compiler` is bundled with (almost) all external dependencies. This is because babel traversal and ast logic is not forward-compatible. Since `babel-plugin-react-compiler` needs to be compatible with babel pipelines across a wide semvar range, we (1) set this package's babel dependency to an early version and (2) inline babel libraries into our bundle. A few other packages in `react/compiler` depend on the compiler. This PR moves `snap`, our test fixture compiler and evaluator, to use the bundled version of `babel-plugin-react-compiler`. This decouples the babel version used by `snap` with the version used by `babel-plugin-react-compiler`, which means that `snap` now can test features from newer babel versions (see #32742). --- [//]: # (BEGIN SAPLING FOOTER) Stack created with [Sapling](https://sapling-scm.com). Best reviewed with [ReviewStack](https://reviewstack.dev/facebook/react/pull/32758). * #32759 * __->__ #32758

Currently, `babel-plugin-react-compiler` is bundled with (almost) all external dependencies. This is because babel traversal and ast logic is not forward-compatible. Since `babel-plugin-react-compiler` needs to be compatible with babel pipelines across a wide semvar range, we (1) set this package's babel dependency to an early version and (2) inline babel libraries into our bundle. A few other packages in `react/compiler` depend on the compiler. This PR moves `snap`, our test fixture compiler and evaluator, to use the bundled version of `babel-plugin-react-compiler`. This decouples the babel version used by `snap` with the version used by `babel-plugin-react-compiler`, which means that `snap` now can test features from newer babel versions (see #32742). --- [//]: # (BEGIN SAPLING FOOTER) Stack created with [Sapling](https://sapling-scm.com). Best reviewed with [ReviewStack](https://reviewstack.dev/facebook/react/pull/32758). * #32759 * __->__ #32758 DiffTrain build for [33999c4](33999c4)

mofeiZ · 2025-03-26T18:41:16Z

Thanks for the contribution! @rodrigofariow you should be able to run tests after rebasing on #32758

# in compiler/packages/babel-plugin-react-compiler
yarn snap:build && yarn snap --watch

Note that you'll probably want to make changes in CodegenReactiveFunctions.ts as this currently replaces satisfies TSExpressions with as casts

rodrigofariow · 2025-03-27T15:57:07Z

compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CodegenReactiveFunction.ts

-          codegenPlaceToExpression(cx, instrValue.value),
-          instrValue.typeAnnotation,
-        );
+        if (t.isTSSatisfiesExpression(instrValue.typeAnnotation)) {


Hi @mofeiZ
Thanks for the info.
Is this the change you were suggesting? Makes sense in theory but I'm not 100% sure 😆

mofeiZ · 2025-03-27T16:11:15Z

compiler/packages/babel-plugin-react-compiler/src/HIR/BuildHIR.ts

-      let expr = exprPath as NodePath<t.TSAsExpression>;
+      let expr = exprPath as NodePath<
+        t.TSAsExpression | t.TSSatisfiesExpression
+      >;


Hmmmm the problem here is that we're not storing the TSAsExpression | TSSatisfiesExpression node themselves in our IR. Instead, we store the typeAnnotation (e.g. number part of satisfies number).

You'll want to make a change in HIR.ts -- you can add a typeAnnotationKind: 'as' | 'satisfies' property to the TypeCastExpression instruction.

Also I noticed that your test fixtures don't seem to be updated in the commits. Could you try yarn snap --watch and yarn snap --update locally so you get signal before submitting? Let me know if you have trouble with this (I know we hardcode linux paths so it may not be compatible)

…expressions

rodrigofariow · 2025-03-27T16:49:18Z

compiler/packages/babel-plugin-react-compiler/src/HIR/HIR.ts

+          typeAnnotation: t.FlowType;
+          typeAnnotationKind: 'cast';
+        }
+      | {


I tried to make it so that it wouldn't be possible to have a 'satisfies' annotation kind when the annotation was t.FlowType.
Hence why I opted for this slightly more complex union FYI @mofeiZ

mofeiZ

Looks good, thank you for the contribution!

rodrigofariow · 2025-03-28T15:15:01Z

Thank you for your guidance @mofeiZ @josephsavona! 🙏

Solve #29818 --------- Co-authored-by: Rodrigo Faria <[email protected]> DiffTrain build for [ef4bc8b](ef4bc8b)

facebook-github-bot added the CLA Signed label Mar 25, 2025

vercel bot deployed to Preview March 25, 2025 15:46 View deployment

vercel bot deployed to Preview March 25, 2025 16:01 View deployment

vercel bot deployed to Preview March 25, 2025 16:03 View deployment

vercel bot deployed to Preview March 25, 2025 17:37 View deployment

mofeiZ mentioned this pull request Mar 26, 2025

[compiler][be] Test runner (snap) now uses tsup bundled plugin #32758

Merged

rodrigo-faria-cartrack added 4 commits March 27, 2025 15:37

feat(babel-plugin-react-compiler): support satisfies operator

7e051b0

refactor: add tests for satisfies operator

d0dbe7f

refactor: add tests for satisfies operator for arrays

3227d39

chore: format code

472e40c

rodrigofariow force-pushed the babel-plugin-react-compiler-support-satisfies-operator branch from 6595f69 to 472e40c Compare March 27, 2025 15:37

vercel bot deployed to Preview March 27, 2025 15:38 View deployment

feat: add support for satisfies operator in CodegenReactiveFunction

1c815c2

rodrigofariow commented Mar 27, 2025

View reviewed changes

vercel bot deployed to Preview March 27, 2025 15:57 View deployment

mofeiZ reviewed Mar 27, 2025

View reviewed changes

refactor(compiler): properly support satisfies operator in type cast …

29beb05

…expressions

vercel bot deployed to Preview March 27, 2025 16:49 View deployment

rodrigofariow commented Mar 27, 2025

View reviewed changes

mofeiZ approved these changes Mar 28, 2025

View reviewed changes

mofeiZ merged commit ef4bc8b into facebook:main Mar 28, 2025
21 checks passed

github-actions bot pushed a commit that referenced this pull request Mar 28, 2025

feat(babel-plugin-react-compiler): support satisfies operator (#32742)

cb70b73

Solve #29818 --------- Co-authored-by: Rodrigo Faria <[email protected]> DiffTrain build for [ef4bc8b](ef4bc8b)

This was referenced Mar 28, 2025

Upgrade React from 313332d1-20250326 to ef4bc8b4-20250328 vercel/next.js#77589

Closed

Upgrade React from 313332d1-20250326 to 63779030-20250328 vercel/next.js#77643

Merged

dimaMachina mentioned this pull request Apr 1, 2025

chore: bump babel-plugin-react-compiler and react-compiler-runtime, remove custom pnpm patch for babel-plugin-react-compiler shuding/nextra#4414

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(babel-plugin-react-compiler): support satisfies operator #32742

feat(babel-plugin-react-compiler): support satisfies operator #32742

rodrigofariow commented Mar 25, 2025 •

edited

Loading

rodrigofariow commented Mar 25, 2025 •

edited

Loading

josephsavona commented Mar 25, 2025

rodrigofariow commented Mar 25, 2025 •

edited

Loading

mofeiZ commented Mar 26, 2025 •

edited

Loading

rodrigofariow Mar 27, 2025 •

edited

Loading

mofeiZ Mar 27, 2025

rodrigofariow Mar 27, 2025

mofeiZ left a comment

rodrigofariow commented Mar 28, 2025

feat(babel-plugin-react-compiler): support satisfies operator #32742

feat(babel-plugin-react-compiler): support satisfies operator #32742

Conversation

rodrigofariow commented Mar 25, 2025 • edited Loading

rodrigofariow commented Mar 25, 2025 • edited Loading

josephsavona commented Mar 25, 2025

rodrigofariow commented Mar 25, 2025 • edited Loading

mofeiZ commented Mar 26, 2025 • edited Loading

rodrigofariow Mar 27, 2025 • edited Loading

Choose a reason for hiding this comment

mofeiZ Mar 27, 2025

Choose a reason for hiding this comment

rodrigofariow Mar 27, 2025

Choose a reason for hiding this comment

mofeiZ left a comment

Choose a reason for hiding this comment

rodrigofariow commented Mar 28, 2025

rodrigofariow commented Mar 25, 2025 •

edited

Loading

rodrigofariow commented Mar 25, 2025 •

edited

Loading

rodrigofariow commented Mar 25, 2025 •

edited

Loading

mofeiZ commented Mar 26, 2025 •

edited

Loading

rodrigofariow Mar 27, 2025 •

edited

Loading