[compiler] Fix enableJsxOutlining with hyphenated JSX attribute names and SequenceExpression variable declarations

Fixes two issues with enableJsxOutlining:

1. JSX attributes with hyphens (e.g. aria-label, data-testid) were used
   directly as JavaScript identifier names in the outlined component's
   props destructuring, producing invalid code like:
   `const { "aria-label": aria-label } = t0;`
   Fix: sanitize attribute names to valid JS identifiers by converting
   hyphens to camelCase (e.g. aria-label -> ariaLabel).

2. When a VariableDeclaration appeared inside a SequenceExpression value
   block during codegen, it would emit a Todo error or produce invalid JS.
   Fix: convert VariableDeclarations to assignment expressions within
   SequenceExpression contexts.

Fixes #36217
Fixes #36218

Author: sleitor

compiler/packages/babel-plugin-react-compiler/src/Optimization/OutlineJsx.ts

@@ -6,6 +6,7 @@
  */
 
 import invariant from 'invariant';
+import {isValidIdentifier} from '@babel/types';
 import {Environment} from '../HIR';
 import {
   BasicBlock,
@@ -222,9 +223,19 @@ function collectProps(
   let id = 1;
 
   function generateName(oldName: string): string {
-    let newName = oldName;
+    // Sanitize names that aren't valid JS identifiers (e.g. "aria-label" -> "ariaLabel")
+    let baseName = oldName;
+    if (!isValidIdentifier(baseName)) {
+      baseName = baseName.replace(/[^a-zA-Z0-9$_]+(.)?/g, (_, char) =>
+        char != null ? char.toUpperCase() : '',
+      );
+      if (!isValidIdentifier(baseName)) {
+        baseName = `_${baseName}`;
+      }
+    }
+    let newName = baseName;
     while (seen.has(newName)) {
-      newName = `${oldName}${id++}`;
+      newName = `${baseName}${id++}`;
     }
     seen.add(newName);
     env.programContext.addNewReference(newName);

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

@@ -1963,34 +1963,35 @@ function codegenInstructionValue(
           instruction,
         })),
       ).body;
-      const expressions = body.map(stmt => {
+      const expressions = body.flatMap(stmt => {
         if (stmt.type === 'ExpressionStatement') {
-          return stmt.expression;
+          return [stmt.expression];
+        } else if (t.isVariableDeclaration(stmt)) {
+          return stmt.declarations.map(declarator => {
+            if (declarator.init != null) {
+              return t.assignmentExpression(
+                '=',
+                declarator.id as t.LVal,
+                declarator.init,
+              );
+            } else {
+              return t.assignmentExpression(
+                '=',
+                declarator.id as t.LVal,
+                t.identifier('undefined'),
+              );
+            }
+          });
         } else {
-          if (t.isVariableDeclaration(stmt)) {
-            const declarator = stmt.declarations[0];
-            cx.recordError(
-              new CompilerErrorDetail({
-                reason: `(CodegenReactiveFunction::codegenInstructionValue) Cannot declare variables in a value block, tried to declare '${
-                  (declarator.id as t.Identifier).name
-                }'`,
-                category: ErrorCategory.Todo,
-                loc: declarator.loc ?? null,
-                suggestions: null,
-              }),
-            );
-            return t.stringLiteral(`TODO handle ${declarator.id}`);
-          } else {
-            cx.recordError(
-              new CompilerErrorDetail({
-                reason: `(CodegenReactiveFunction::codegenInstructionValue) Handle conversion of ${stmt.type} to expression`,
-                category: ErrorCategory.Todo,
-                loc: stmt.loc ?? null,
-                suggestions: null,
-              }),
-            );
-            return t.stringLiteral(`TODO handle ${stmt.type}`);
-          }
+          cx.recordError(
+            new CompilerErrorDetail({
+              reason: `(CodegenReactiveFunction::codegenInstructionValue) Handle conversion of ${stmt.type} to expression`,
+              category: ErrorCategory.Todo,
+              loc: stmt.loc ?? null,
+              suggestions: null,
+            }),
+          );
+          return [t.stringLiteral(`TODO handle ${stmt.type}`)];
         }
       });
       if (expressions.length === 0) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-outlining-variable-declaration-in-sequence-expression.expect.md

@@ -0,0 +1,68 @@
+
+## Input
+
+```javascript
+// @enableJsxOutlining
+function Component() {
+  const [isSubmitting] = useState(false);
+
+  return ssoProviders.map((provider) => {
+    return (
+      <div key={provider.providerId}>
+        <Switch disabled={isSubmitting} aria-label={`Toggle ${provider.displayName}`} />
+      </div>
+    );
+  });
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enableJsxOutlining
+function Component() {
+  const $ = _c(2);
+  const [isSubmitting] = useState(false);
+  let t0;
+  if ($[0] !== isSubmitting) {
+    t0 = ssoProviders.map((provider) => {
+      const T0 = _temp;
+      return (
+        <T0
+          disabled={isSubmitting}
+          ariaLabel={`Toggle ${provider.displayName}`}
+          key={provider.providerId}
+        />
+      );
+    });
+    $[0] = isSubmitting;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+function _temp(t0) {
+  const $ = _c(3);
+  const { disabled: disabled, ariaLabel: ariaLabel } = t0;
+  let t1;
+  if ($[0] !== ariaLabel || $[1] !== disabled) {
+    t1 = (
+      <div>
+        <Switch disabled={disabled} aria-label={ariaLabel} />
+      </div>
+    );
+    $[0] = ariaLabel;
+    $[1] = disabled;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-outlining-variable-declaration-in-sequence-expression.js

@@ -0,0 +1,15 @@
+// @enableJsxOutlining
+function Component() {
+  const [isSubmitting] = useState(false);
+
+  return ssoProviders.map(provider => {
+    return (
+      <div key={provider.providerId}>
+        <Switch
+          disabled={isSubmitting}
+          aria-label={`Toggle ${provider.displayName}`}
+        />
+      </div>
+    );
+  });
+}