feat(compiler): Handle TSSatisfiesExpression

compiler/packages/babel-plugin-react-compiler/package.json

@@ -19,7 +19,7 @@
   },
   "dependencies": {
     "@babel/generator": "7.2.0",
-    "@babel/types": "^7.19.0",
+    "@babel/types": "^7.24.7",
     "chalk": "4",
     "invariant": "^2.2.4",
     "pretty-format": "^24",
@@ -41,12 +41,12 @@
     "@types/invariant": "^2.2.35",
     "@types/jest": "^29.0.3",
     "@types/node": "^18.7.18",
-    "@typescript-eslint/eslint-plugin": "^7.4.0",
-    "@typescript-eslint/parser": "^7.4.0",
+    "@typescript-eslint/eslint-plugin": "^7.16.1",
+    "@typescript-eslint/parser": "^7.16.1",
     "babel-jest": "^29.0.3",
     "babel-plugin-fbt": "^1.0.0",
     "babel-plugin-fbt-runtime": "^1.0.0",
-    "eslint": "8.27.0",
+    "eslint": "8.57.0",
     "glob": "^7.1.6",
     "jest": "^29.0.3",
     "jest-environment-jsdom": "^29.0.3",
@@ -59,7 +59,7 @@
   "resolutions": {
     "./**/@babel/parser": "7.7.4",
     "./**/@babel/plugin-syntax-flow": "7.7.4",
-    "./**/@babel/types": "7.7.4",
+    "./**/@babel/types": "$@babel/types",
     "@babel/core": "7.2.0",
     "@babel/generator": "7.2.0",
     "@babel/traverse": "7.7.4"

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

@@ -1890,11 +1890,26 @@ function lowerExpression(
 
       if (operator === "=") {
         const left = expr.get("left");
+
+        /*
+         * Babel already supports parsing optional member expressions: https://github.com/tc39/proposal-optional-chaining-assignment
+         * But we don't
+         */
+        if (left.type === "OptionalMemberExpression") {
+          builder.errors.push({
+            reason: `(BuildHIR::lowerExpression) Handle OptionalMemberExpression operators in AssignmentExpression`,
+            severity: ErrorSeverity.Todo,
+            loc: left.node.loc ?? null,
+            suggestions: null,
+          });
+          return { kind: "UnsupportedNode", node: exprNode, loc: exprLoc };
+        }
+
         return lowerAssignment(
           builder,
           left.node.loc ?? GeneratedSource,
           InstructionKind.Reassign,
-          left,
+          left as NodePath<t.LVal>,
           lowerExpressionToTemporary(builder, expr.get("right")),
           left.isArrayPattern() || left.isObjectPattern()
             ? "Destructure"
@@ -2452,6 +2467,10 @@ function lowerExpression(
       let expr = exprPath as NodePath<t.TSNonNullExpression>;
       return lowerExpression(builder, expr.get("expression"));
     }
+    case "TSSatisfiesExpression": {
+      const expr = exprPath as NodePath<t.TSSatisfiesExpression>;
+      return lowerExpression(builder, expr.get("expression"));
+    }
     case "MetaProperty": {
       let expr = exprPath as NodePath<t.MetaProperty>;
       if (

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

@@ -64,7 +64,21 @@ export function findContextIdentifiers(
       ): void {
         const left = path.get("left");
         const currentFn = state.currentFn.at(-1) ?? null;
-        handleAssignment(currentFn, state.identifiers, left);
+
+        if (left.type === "OptionalMemberExpression") {
+          CompilerError.throwTodo({
+            reason: `[FindContextIdentifiers] Cannot handle OptionalAssignmentExpressions assignment target ${left.type}`,
+            description: null,
+            loc: left.node.loc ?? GeneratedSource,
+            suggestions: null,
+          });
+        }
+
+        handleAssignment(
+          currentFn,
+          state.identifiers,
+          left as NodePath<t.LVal>
+        );
       },
       UpdateExpression(
         path: NodePath<t.UpdateExpression>,

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

@@ -172,13 +172,17 @@ function mergeLocation(l: SourceLocation, r: SourceLocation): SourceLocation {
     return l;
   } else {
     return {
+      filename: r.filename,
+      identifierName: r.identifierName,
       start: {
         line: Math.min(l.start.line, r.start.line),
         column: Math.min(l.start.column, r.start.column),
+        index: Math.min(l.start.index, r.start.index),
       },
       end: {
         line: Math.max(l.end.line, r.end.line),
         column: Math.max(l.end.column, r.end.column),
+        index: Math.max(l.end.index, r.end.index),
       },
     };
   }

compiler/packages/babel-plugin-react-compiler/src/Utils/Result.ts

@@ -124,11 +124,11 @@ class OkImpl<T> implements Result<T, never> {
     return this;
   }
 
-  isOk(): boolean {
+  isOk(): this is OkImpl<T> {
     return true;
   }
 
-  isErr(): boolean {
+  isErr(): this is ErrImpl<never> {
     return false;
   }
 
@@ -199,11 +199,11 @@ class ErrImpl<E> implements Result<never, E> {
     return fn(this.val);
   }
 
-  isOk(): boolean {
+  isOk(): this is OkImpl<never> {
     return false;
   }
 
-  isErr(): boolean {
+  isErr(): this is ErrImpl<E> {
     return true;
   }
 

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hook-noAlias.expect.md

@@ -41,13 +41,9 @@ function Component(props) {
     t0 = $[1];
   }
   const item = t0;
-  const x = useNoAlias(
-    item,
-    () => {
-      console.log(props);
-    },
-    [props.a],
-  );
+  const x = useNoAlias(item, () => {
+    console.log(props);
+  }, [props.a]);
   let t1;
   if ($[2] !== x || $[3] !== item) {
     t1 = [x, item];

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-constant-prop.expect.md

@@ -47,7 +47,7 @@ function useFoo(cond) {
   t0 = t1;
   const derived1 = t0;
 
-  const derived2 = cond ?? Math.min(0, 1) ? 1 : 2;
+  const derived2 = (cond ?? Math.min(0, 1)) ? 1 : 2;
   let t2;
   let t3;
   if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
@@ -59,7 +59,7 @@ function useFoo(cond) {
   t2 = t3;
   const derived3 = t2;
 
-  const derived4 = Math.min(0, -1) ?? cond ? 1 : 2;
+  const derived4 = (Math.min(0, -1) ?? cond) ? 1 : 2;
   let t4;
   if ($[2] !== derived2 || $[3] !== derived4) {
     t4 = [derived1, derived2, derived3, derived4];

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/satisfies.expect.md

@@ -0,0 +1,47 @@
+
+## Input
+
+```javascript
+import { Stringify } from "shared-runtime";
+
+function Foo() {
+  const b = 1 satisfies number;
+  return <Stringify value={b} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [],
+  isComponent: true,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { Stringify } from "shared-runtime";
+
+function Foo() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = <Stringify value={1} />;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [],
+  isComponent: true,
+};
+
+```
+
+### Eval output
+(kind: ok) <div>{"value":1}</div>

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/satisfies.tsx

@@ -0,0 +1,12 @@
+import { Stringify } from "shared-runtime";
+
+function Foo() {
+  const b = 1 satisfies number;
+  return <Stringify value={b} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [],
+  isComponent: true,
+};

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ternary-expression.expect.md

@@ -20,7 +20,7 @@ export const FIXTURE_ENTRYPOINT = {
 
 ```javascript
 function ternary(props) {
-  const a = props.a && props.b ? props.c || props.d : props.e ?? props.f;
+  const a = props.a && props.b ? props.c || props.d : (props.e ?? props.f);
   const b = props.a ? (props.b && props.c ? props.d : props.e) : props.f;
   return a ? b : null;
 }

compiler/packages/snap/package.json

@@ -46,8 +46,8 @@
     "@types/fbt": "^1.0.4",
     "@types/glob": "^8.1.0",
     "@types/node": "^18.7.18",
-    "@typescript-eslint/eslint-plugin": "^7.4.0",
-    "@typescript-eslint/parser": "^7.4.0",
+    "@typescript-eslint/eslint-plugin": "^7.16.1",
+    "@typescript-eslint/parser": "^7.16.1",
     "rimraf": "^3.0.2"
   },
   "resolutions": {