[compiler] More precise errors for invalid import/export/namespace statements

import, export, and TS namespace statements can only be used at the top-level of a module, which is enforced by parsers already. Here we add a backup validation of that. As of this PR, we now have only major statement type (class declarations) listed as a todo.

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

@@ -1388,10 +1388,48 @@ function lowerStatement(
       });
       return;
     }
-    case 'TypeAlias':
-    case 'TSInterfaceDeclaration':
-    case 'TSTypeAliasDeclaration': {
-      // We do not preserve type annotations/syntax through transformation
+    case 'EnumDeclaration':
+    case 'TSEnumDeclaration': {
+      lowerValueToTemporary(builder, {
+        kind: 'UnsupportedNode',
+        loc: stmtPath.node.loc ?? GeneratedSource,
+        node: stmtPath.node,
+      });
+      return;
+    }
+    case 'ExportAllDeclaration':
+    case 'ExportDefaultDeclaration':
+    case 'ExportNamedDeclaration':
+    case 'ImportDeclaration':
+    case 'TSExportAssignment':
+    case 'TSImportEqualsDeclaration': {
+      builder.errors.push({
+        reason:
+          'JavaScript `import` and `export` statements may only appear at the top level of a module',
+        severity: ErrorSeverity.InvalidJS,
+        loc: stmtPath.node.loc ?? null,
+        suggestions: null,
+      });
+      lowerValueToTemporary(builder, {
+        kind: 'UnsupportedNode',
+        loc: stmtPath.node.loc ?? GeneratedSource,
+        node: stmtPath.node,
+      });
+      return;
+    }
+    case 'TSNamespaceExportDeclaration': {
+      builder.errors.push({
+        reason:
+          'TypeScript `namespace` statements may only appear at the top level of a module',
+        severity: ErrorSeverity.InvalidJS,
+        loc: stmtPath.node.loc ?? null,
+        suggestions: null,
+      });
+      lowerValueToTemporary(builder, {
+        kind: 'UnsupportedNode',
+        loc: stmtPath.node.loc ?? GeneratedSource,
+        node: stmtPath.node,
+      });
       return;
     }
     case 'DeclareClass':
@@ -1404,30 +1442,14 @@ function lowerStatement(
     case 'DeclareOpaqueType':
     case 'DeclareTypeAlias':
     case 'DeclareVariable':
-    case 'EnumDeclaration':
-    case 'ExportAllDeclaration':
-    case 'ExportDefaultDeclaration':
-    case 'ExportNamedDeclaration':
-    case 'ImportDeclaration':
     case 'InterfaceDeclaration':
     case 'OpaqueType':
     case 'TSDeclareFunction':
-    case 'TSEnumDeclaration':
-    case 'TSExportAssignment':
-    case 'TSImportEqualsDeclaration':
+    case 'TSInterfaceDeclaration':
     case 'TSModuleDeclaration':
-    case 'TSNamespaceExportDeclaration': {
-      builder.errors.push({
-        reason: `(BuildHIR::lowerStatement) Handle ${stmtPath.type} statements`,
-        severity: ErrorSeverity.Todo,
-        loc: stmtPath.node.loc ?? null,
-        suggestions: null,
-      });
-      lowerValueToTemporary(builder, {
-        kind: 'UnsupportedNode',
-        loc: stmtPath.node.loc ?? GeneratedSource,
-        node: stmtPath.node,
-      });
+    case 'TSTypeAliasDeclaration':
+    case 'TypeAlias': {
+      // We do not preserve type annotations/syntax through transformation
       return;
     }
     default: {

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

@@ -5,7 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import generate from '@babel/generator';
 import {CompilerError} from '../CompilerError';
 import {printReactiveScopeSummary} from '../ReactiveScopes/PrintReactiveFunction';
 import DisjointSet from '../Utils/DisjointSet';
@@ -466,7 +465,7 @@ export function printInstructionValue(instrValue: ReactiveValue): string {
       break;
     }
     case 'UnsupportedNode': {
-      value = `UnsupportedNode(${generate(instrValue.node).code})`;
+      value = `UnsupportedNode ${instrValue.node.type}`;
       break;
     }
     case 'LoadLocal': {

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

@@ -829,12 +829,14 @@ class CollectDependenciesVisitor extends ReactiveFunctionVisitor<
         };
       }
       case 'UnsupportedNode': {
-        CompilerError.invariant(false, {
-          reason: `Unexpected unsupported node`,
-          description: null,
-          loc: value.loc,
-          suggestions: null,
-        });
+        const lvalues = [];
+        if (lvalue !== null) {
+          lvalues.push({place: lvalue, level: MemoizationLevel.Never});
+        }
+        return {
+          lvalues,
+          rvalues: [],
+        };
       }
       default: {
         assertExhaustive(

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/flow-enum-inline.expect.md

@@ -0,0 +1,60 @@
+
+## Input
+
+```javascript
+// @flow
+function Component(props) {
+  enum Bool {
+    True = 'true',
+    False = 'false',
+  }
+
+  let bool: Bool = Bool.False;
+  if (props.value) {
+    bool = Bool.True;
+  }
+  return <div>{bool}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: true}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(2);
+  enum Bool {
+    True = "true",
+    False = "false",
+  }
+
+  let bool = Bool.False;
+  if (props.value) {
+    bool = Bool.True;
+  }
+  let t0;
+  if ($[0] !== bool) {
+    t0 = <div>{bool}</div>;
+    $[0] = bool;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ value: true }],
+};
+
+```
+      
+### Eval output
+(kind: exception) Bool is not defined

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/flow-enum-inline.js

@@ -0,0 +1,18 @@
+// @flow
+function Component(props) {
+  enum Bool {
+    True = 'true',
+    False = 'false',
+  }
+
+  let bool: Bool = Bool.False;
+  if (props.value) {
+    bool = Bool.True;
+  }
+  return <div>{bool}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: true}],
+};

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ts-enum-inline.expect.md

@@ -0,0 +1,59 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  enum Bool {
+    True = 'true',
+    False = 'false',
+  }
+
+  let bool: Bool = Bool.False;
+  if (props.value) {
+    bool = Bool.True;
+  }
+  return <div>{bool}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: true}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(2);
+  enum Bool {
+    True = "true",
+    False = "false",
+  }
+
+  let bool = Bool.False;
+  if (props.value) {
+    bool = Bool.True;
+  }
+  let t0;
+  if ($[0] !== bool) {
+    t0 = <div>{bool}</div>;
+    $[0] = bool;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ value: true }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>true</div>

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ts-enum-inline.tsx

@@ -0,0 +1,17 @@
+function Component(props) {
+  enum Bool {
+    True = 'true',
+    False = 'false',
+  }
+
+  let bool: Bool = Bool.False;
+  if (props.value) {
+    bool = Bool.True;
+  }
+  return <div>{bool}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: true}],
+};