[ci] Try to make playground e2e tests less flaky

compiler/apps/playground/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

compiler/apps/playground/package.json

@@ -12,7 +12,7 @@
     "vercel-build": "yarn build",
     "start": "next start",
     "lint": "next lint",
-    "test": "playwright test"
+    "test": "playwright test --workers 4"
   },
   "dependencies": {
     "@babel/core": "^7.18.9",

compiler/apps/playground/playwright.config.js

@@ -17,7 +17,7 @@ const baseURL = `http://localhost:${PORT}`;
 // Reference: https://playwright.dev/docs/test-configuration
 export default defineConfig({
   // Timeout per test
-  timeout: 30 * 1000,
+  timeout: 60 * 1000,
   // Run all tests in parallel.
   fullyParallel: true,
   // Test directory

compiler/package.json

@@ -26,6 +26,7 @@
     "react-is": "0.0.0-experimental-4beb1fd8-20241118"
   },
   "devDependencies": {
+    "@babel/types": "^7.26.0",
     "@tsconfig/strictest": "^2.0.5",
     "concurrently": "^7.4.0",
     "esbuild": "^0.25.0",
@@ -37,13 +38,15 @@
     "prettier-plugin-hermes-parser": "^0.26.0",
     "prompt-promise": "^1.0.3",
     "rimraf": "^5.0.10",
+    "to-fast-properties": "^2.0.0",
     "tsup": "^8.4.0",
     "typescript": "^5.4.3",
     "wait-on": "^7.2.0",
     "yargs": "^17.7.2"
   },
   "resolutions": {
-    "rimraf": "5.0.10"
+    "rimraf": "5.0.10",
+    "@babel/types": "7.26.3"
   },
   "packageManager": "yarn@1.22.22"
 }

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

@@ -20,7 +20,7 @@
     "watch": "yarn build --watch"
   },
   "dependencies": {
-    "@babel/types": "^7.19.0"
+    "@babel/types": "^7.26.0"
   },
   "devDependencies": {
     "@babel/core": "^7.2.0",

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

@@ -1909,16 +1909,31 @@ function lowerExpression(
 
       if (operator === '=') {
         const left = expr.get('left');
-        return lowerAssignment(
-          builder,
-          left.node.loc ?? GeneratedSource,
-          InstructionKind.Reassign,
-          left,
-          lowerExpressionToTemporary(builder, expr.get('right')),
-          left.isArrayPattern() || left.isObjectPattern()
-            ? 'Destructure'
-            : 'Assignment',
-        );
+        if (left.isLVal()) {
+          return lowerAssignment(
+            builder,
+            left.node.loc ?? GeneratedSource,
+            InstructionKind.Reassign,
+            left,
+            lowerExpressionToTemporary(builder, expr.get('right')),
+            left.isArrayPattern() || left.isObjectPattern()
+              ? 'Destructure'
+              : 'Assignment',
+          );
+        } else {
+          /**
+           * OptionalMemberExpressions as the left side of an AssignmentExpression are Stage 1 and
+           * not supported by React Compiler yet.
+           */
+          builder.errors.push({
+            reason: `(BuildHIR::lowerExpression) Unsupported syntax on the left side of an AssignmentExpression`,
+            description: `Expected an LVal, got: ${left.type}`,
+            severity: ErrorSeverity.Todo,
+            loc: left.node.loc ?? null,
+            suggestions: null,
+          });
+          return {kind: 'UnsupportedNode', node: exprNode, loc: exprLoc};
+        }
       }
 
       const operators: {
@@ -2091,7 +2106,7 @@ function lowerExpression(
           propName = namePath.node.name;
           if (propName.indexOf(':') !== -1) {
             builder.errors.push({
-              reason: `(BuildHIR::lowerExpression) Unexpected colon in attribute name \`${name}\``,
+              reason: `(BuildHIR::lowerExpression) Unexpected colon in attribute name \`${propName}\``,
               severity: ErrorSeverity.Todo,
               loc: namePath.node.loc ?? null,
               suggestions: null,

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

@@ -63,8 +63,20 @@ export function findContextIdentifiers(
         state: FindContextIdentifierState,
       ): void {
         const left = path.get('left');
-        const currentFn = state.currentFn.at(-1) ?? null;
-        handleAssignment(currentFn, state.identifiers, left);
+        if (left.isLVal()) {
+          const currentFn = state.currentFn.at(-1) ?? null;
+          handleAssignment(currentFn, state.identifiers, left);
+        } else {
+          /**
+           * OptionalMemberExpressions as the left side of an AssignmentExpression are Stage 1 and
+           * not supported by React Compiler yet.
+           */
+          CompilerError.throwTodo({
+            reason: `Unsupported syntax on the left side of an AssignmentExpression`,
+            description: `Expected an LVal, got: ${left.type}`,
+            loc: left.node.loc ?? null,
+          });
+        }
       },
       UpdateExpression(
         path: NodePath<t.UpdateExpression>,

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

@@ -178,11 +178,15 @@ function mergeLocation(l: SourceLocation, r: SourceLocation): SourceLocation {
     return l;
   } else {
     return {
+      filename: l.filename,
+      identifierName: l.identifierName,
       start: {
+        index: Math.min(l.start.index, r.start.index),
         line: Math.min(l.start.line, r.start.line),
         column: Math.min(l.start.column, r.start.column),
       },
       end: {
+        index: Math.max(l.end.index, r.end.index),
         line: Math.max(l.end.line, r.end.line),
         column: Math.max(l.end.column, r.end.column),
       },
@@ -202,7 +206,7 @@ export function inRange(
   return id >= range.start && id < range.end;
 }
 
-function mayAllocate(env: Environment, instruction: Instruction): boolean {
+function mayAllocate(_env: Environment, instruction: Instruction): boolean {
   const {value} = instruction;
   switch (value.kind) {
     case 'Destructure': {

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

@@ -22,6 +22,8 @@ export {
   findDirectiveEnablingMemoization,
   findDirectiveDisablingMemoization,
   type CompilerPipelineValue,
+  type Logger,
+  type LoggerEvent,
   type PluginOptions,
 } from './Entrypoint';
 export {

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

@@ -22,7 +22,7 @@
   "devDependencies": {
     "@babel/preset-env": "^7.22.4",
     "@babel/preset-typescript": "^7.18.6",
-    "@babel/types": "^7.19.0",
+    "@babel/types": "^7.26.0",
     "@types/eslint": "^8.56.12",
     "@types/node": "^20.2.5",
     "babel-jest": "^29.0.3",

compiler/packages/snap/package.json

@@ -23,7 +23,7 @@
     "@babel/code-frame": "^7.22.5",
     "@babel/plugin-syntax-jsx": "^7.18.6",
     "@babel/preset-flow": "^7.7.4",
-    "@babel/preset-typescript": "^7.18.6",
+    "@babel/preset-typescript": "^7.26.0",
     "@parcel/watcher": "^2.1.0",
     "@testing-library/react": "^13.4.0",
     "babel-plugin-idx": "^3.0.3",