Skip to content

Commit 96c61b7

Browse files
authored
[compiler] Add CompilerError.UnsupportedJS variant (facebook#33750)
We use this variant for syntax we intentionally don't support: with statements, eval, and inline class declarations. --- [//]: # (BEGIN SAPLING FOOTER) Stack created with [Sapling](https://sapling-scm.com). Best reviewed with [ReviewStack](https://reviewstack.dev/facebook/react/pull/33750). * facebook#33753 * facebook#33752 * facebook#33751 * __->__ facebook#33750 * facebook#33748
1 parent 0bfa404 commit 96c61b7

File tree

4 files changed

+22
-11
lines changed

4 files changed

+22
-11
lines changed

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

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,11 @@ export enum ErrorSeverity {
1515
* misunderstanding on the user’s part.
1616
*/
1717
InvalidJS = 'InvalidJS',
18+
/**
19+
* JS syntax that is not supported and which we do not plan to support. Developers should
20+
* rewrite to use supported forms.
21+
*/
22+
UnsupportedJS = 'UnsupportedJS',
1823
/**
1924
* Code that breaks the rules of React.
2025
*/
@@ -241,12 +246,16 @@ export class CompilerError extends Error {
241246
case ErrorSeverity.InvalidJS:
242247
case ErrorSeverity.InvalidReact:
243248
case ErrorSeverity.InvalidConfig:
249+
case ErrorSeverity.UnsupportedJS: {
244250
return true;
251+
}
245252
case ErrorSeverity.CannotPreserveMemoization:
246-
case ErrorSeverity.Todo:
253+
case ErrorSeverity.Todo: {
247254
return false;
248-
default:
255+
}
256+
default: {
249257
assertExhaustive(detail.severity, 'Unhandled error severity');
258+
}
250259
}
251260
});
252261
}

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

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1359,7 +1359,7 @@ function lowerStatement(
13591359
builder.errors.push({
13601360
reason: `JavaScript 'with' syntax is not supported`,
13611361
description: `'with' syntax is considered deprecated and removed from JavaScript standards, consider alternatives`,
1362-
severity: ErrorSeverity.InvalidJS,
1362+
severity: ErrorSeverity.UnsupportedJS,
13631363
loc: stmtPath.node.loc ?? null,
13641364
suggestions: null,
13651365
});
@@ -1371,13 +1371,15 @@ function lowerStatement(
13711371
return;
13721372
}
13731373
case 'ClassDeclaration': {
1374-
/*
1375-
* We can in theory support nested classes, similarly to functions where we track values
1376-
* captured by the class and consider mutations of the instances to mutate the class itself
1374+
/**
1375+
* In theory we could support inline class declarations, but this is rare enough in practice
1376+
* and complex enough to support that we don't anticipate supporting anytime soon. Developers
1377+
* are encouraged to lift classes out of component/hook declarations.
13771378
*/
13781379
builder.errors.push({
1379-
reason: `Support nested class declarations`,
1380-
severity: ErrorSeverity.Todo,
1380+
reason: 'Inline `class` declarations are not supported',
1381+
description: `Move class declarations outside of components/hooks`,
1382+
severity: ErrorSeverity.UnsupportedJS,
13811383
loc: stmtPath.node.loc ?? null,
13821384
suggestions: null,
13831385
});
@@ -3560,7 +3562,7 @@ function lowerIdentifier(
35603562
reason: `The 'eval' function is not supported`,
35613563
description:
35623564
'Eval is an anti-pattern in JavaScript, and the code executed cannot be evaluated by React Compiler',
3563-
severity: ErrorSeverity.InvalidJS,
3565+
severity: ErrorSeverity.UnsupportedJS,
35643566
loc: exprPath.node.loc ?? null,
35653567
suggestions: null,
35663568
});

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-eval-unsupported.expect.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ function Component(props) {
1515
```
1616
1 | function Component(props) {
1717
> 2 | eval('props.x = true');
18-
| ^^^^ InvalidJS: The 'eval' function is not supported. Eval is an anti-pattern in JavaScript, and the code executed cannot be evaluated by React Compiler (2:2)
18+
| ^^^^ UnsupportedJS: The 'eval' function is not supported. Eval is an anti-pattern in JavaScript, and the code executed cannot be evaluated by React Compiler (2:2)
1919
3 | return <div />;
2020
4 | }
2121
5 |

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-kitchensink.expect.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@ let moduleLocal = false;
8484
> 3 | var x = [];
8585
| ^^^^^^^^^^^ Todo: (BuildHIR::lowerStatement) Handle var kinds in VariableDeclaration (3:3)
8686
87-
Todo: Support nested class declarations (5:10)
87+
UnsupportedJS: Inline `class` declarations are not supported. Move class declarations outside of components/hooks (5:10)
8888
8989
Todo: (BuildHIR::lowerStatement) Handle non-variable initialization in ForStatement (20:22)
9090

0 commit comments

Comments
 (0)