[compiler] Check TSAsExpression and TSNonNullExpression reorderability (#33788)

henryqdineen · web-flow · commit fe813143e236 · 2025-07-15T11:50:20.000-07:00
## Summary

The `TSAsExpression` and `TSNonNullExpression` nodes are supported by
`lowerExpression()` but `isReorderableExpression()` does not check if
they can be reordered. This PR updates `isReorderableExpression()` to
handle these two node types by adding cases that fall through to the
existing `TypeCastExpression` case.

We ran `react-compiler-healthcheck` at scale on several of our repos and
found dozens of `` (BuildHIR::node.lowerReorderableExpression)
Expression type `TSAsExpression` cannot be safely reordered`` errors and
a handful for `TSNonNullExpression`.


## How did you test this change?

In this case I added two fixture tests
diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/BuildHIR.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/BuildHIR.ts
@@ -3001,6 +3001,8 @@ function isReorderableExpression(
         }
       }
     }
+    case 'TSAsExpression':
+    case 'TSNonNullExpression':
     case 'TypeCastExpression': {
       return isReorderableExpression(
         builder,
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ts-as-expression-default-value.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ts-as-expression-default-value.expect.md
@@ -0,0 +1,67 @@
+
+## Input
+
+```javascript
+type Status = 'pending' | 'success' | 'error';
+
+const StatusIndicator = ({status}: {status: Status}) => {
+  return <div className={`status-${status}`}>Status: {status}</div>;
+};
+
+const Component = ({status = 'pending' as Status}) => {
+  return <StatusIndicator status={status} />;
+};
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{status: 'success'}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+type Status = "pending" | "success" | "error";
+
+const StatusIndicator = (t0) => {
+  const $ = _c(3);
+  const { status } = t0;
+  const t1 = `status-${status}`;
+  let t2;
+  if ($[0] !== status || $[1] !== t1) {
+    t2 = <div className={t1}>Status: {status}</div>;
+    $[0] = status;
+    $[1] = t1;
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  return t2;
+};
+
+const Component = (t0) => {
+  const $ = _c(2);
+  const { status: t1 } = t0;
+  const status = t1 === undefined ? ("pending" as Status) : t1;
+  let t2;
+  if ($[0] !== status) {
+    t2 = <StatusIndicator status={status} />;
+    $[0] = status;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  return t2;
+};
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ status: "success" }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div class="status-success">Status: success</div>
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ts-as-expression-default-value.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ts-as-expression-default-value.tsx
@@ -0,0 +1,14 @@
+type Status = 'pending' | 'success' | 'error';
+
+const StatusIndicator = ({status}: {status: Status}) => {
+  return <div className={`status-${status}`}>Status: {status}</div>;
+};
+
+const Component = ({status = 'pending' as Status}) => {
+  return <StatusIndicator status={status} />;
+};
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{status: 'success'}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ts-non-null-expression-default-value.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ts-non-null-expression-default-value.expect.md
@@ -0,0 +1,54 @@
+
+## Input
+
+```javascript
+const THEME_MAP: ReadonlyMap<string, string> = new Map([
+  ['default', 'light'],
+  ['dark', 'dark'],
+]);
+
+export const Component = ({theme = THEME_MAP.get('default')!}) => {
+  return <div className={`theme-${theme}`}>User preferences</div>;
+};
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{status: 'success'}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+const THEME_MAP: ReadonlyMap<string, string> = new Map([
+  ["default", "light"],
+  ["dark", "dark"],
+]);
+
+export const Component = (t0) => {
+  const $ = _c(2);
+  const { theme: t1 } = t0;
+  const theme = t1 === undefined ? THEME_MAP.get("default") : t1;
+  const t2 = `theme-${theme}`;
+  let t3;
+  if ($[0] !== t2) {
+    t3 = <div className={t2}>User preferences</div>;
+    $[0] = t2;
+    $[1] = t3;
+  } else {
+    t3 = $[1];
+  }
+  return t3;
+};
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ status: "success" }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div class="theme-light">User preferences</div>
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ts-non-null-expression-default-value.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ts-non-null-expression-default-value.tsx
@@ -0,0 +1,13 @@
+const THEME_MAP: ReadonlyMap<string, string> = new Map([
+  ['default', 'light'],
+  ['dark', 'dark'],
+]);
+
+export const Component = ({theme = THEME_MAP.get('default')!}) => {
+  return <div className={`theme-${theme}`}>User preferences</div>;
+};
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{status: 'success'}],
+};

Original file line number	Diff line number	Diff line change
`@@ -3001,6 +3001,8 @@ function isReorderableExpression(`
`3001`	`3001`	`}`
`3002`	`3002`	`}`
`3003`	`3003`	`}`
	`3004`	`+ case 'TSAsExpression':`
	`3005`	`+ case 'TSNonNullExpression':`
`3004`	`3006`	`case 'TypeCastExpression': {`
`3005`	`3007`	`return isReorderableExpression(`
`3006`	`3008`	`builder,`