@samitouri / QOS-React-2 / commits / 5a90a5a7a5

[compiler] Bail out with Todo on using and await using declarations (#36946)

## Summary The compiler silently rewrote functions containing `using` and `await using` declarations (explicit resource management). BuildHIR's `VariableDeclaration` case only special-cases `var`; every other kind falls through to `InstructionKind.Const`. A `using` declaration therefore compiled as a plain memoized `const`, and the implicit dispose call at scope exit was dropped from the compiled output. No diagnostic was emitted. The Rust port mirrored the same bug in `build_hir.rs`. The Rust port had a second, harder failure: its `VariableDeclarationKind` enum had no `await using` variant, so a Babel AST containing one failed serde deserialization at the NAPI boundary ("unknown variant `await using`") and threw for the whole file. The fix records the same per-function Todo bail as the existing `var` case, in both implementations, then continues lowering the declaration as `const` so references do not break while the error unwinds (mirroring how `var` continues as `let`). This matches the compiler's established Todo-bail precedent for unsupported syntax: the function is skipped with a logged `CompileError` diagnostic, `panicThreshold` is respected, and sibling functions in the same file still compile. This deliberately contrasts with oxc-project/oxc#24217, which handles the same syntax with a silent per-function skip; nothing in this compiler is skipped without a surfaced diagnostic. Changes: - TS: `BuildHIR.ts` records a Todo `CompilerErrorDetail` for `using` and `await using` kinds, in the style of the existing `var` case. - Rust: same Todo `record_error` in `build_hir.rs`. New `AwaitUsing` variant (serde name `"await using"`) in `react_compiler_ast`, so `await using` survives the NAPI boundary, covered by a serde round-trip unit test. - Test harness: enables the `explicitResourceManagement` parser plugin in snap and in the e2e script's Babel baseline so fixtures can use the syntax. Fixtures (identical snapshots for the TS and Rust pipelines): - `error.todo-using-declaration` and `error.todo-await-using-declaration` show the Todo diagnostic with code frames. - `using-declaration-bailout-sibling-compiles` shows the bailing function left untouched (disposal preserved) while a sibling component in the same file is memoized. The first commit snapshots the previous broken behavior (`using` memoized as `const` with disposal dropped); the second commit lands the fix and updates the snapshots. ## How did you test this change? All results below are from the branch rebased onto current main. TS implementation: - `yarn snap`: 1809 tests, 1809 passed, 0 failed. - `yarn workspace babel-plugin-react-compiler lint`: clean. `yarn prettier-check` at the repo root: clean. - Manually verified pre-fix output: a component with `using resource = getResource(props.id)` compiled to a memoized `const` with no disposal. Rust implementation: - `cargo test --workspace`: 42 passed, 0 failed (includes the new serde round-trip unit test for both `using` kinds). - `bash scripts/test-babel-ast.sh`: passed. - `bash scripts/test-rust-port.sh`: 1808 passed, 0 failed. - `yarn snap --rust`: 1809 tests, 1809 passed, 0 failed, against the same `.expect.md` snapshots as the TS run. - `scripts/test-e2e.ts` (babel variant): the three using fixtures pass code and events parity. - Manually verified `await using` now deserializes across the NAPI boundary and records the Todo instead of throwing. <div><a href="https://cursor.com/agents/bc-5fe4350d-5d42-4c0e-9001-429ed0b5e5b7"><picture><source media="(prefers-color-scheme: dark)" srcset="https://cursor.com/assets/images/open-in-web-dark.png"><source media="(prefers-color-scheme: light)" srcset="https://cursor.com/assets/images/open-in-web-light.png"><img alt="Open in Web" width="114" height="28" src="https://cursor.com/assets/images/open-in-web-dark.png"></picture></a>&nbsp;<a href="https://cursor.com/background-agent?bcId=bc-5fe4350d-5d42-4c0e-9001-429ed0b5e5b7"><picture><source media="(prefers-color-scheme: dark)" srcset="https://cursor.com/assets/images/open-in-cursor-dark.png"><source media="(prefers-color-scheme: light)" srcset="https://cursor.com/assets/images/open-in-cursor-light.png"><img alt="Open in Cursor" width="131" height="28" src="https://cursor.com/assets/images/open-in-cursor-dark.png"></picture></a>&nbsp;</div> --------- Co-authored-by: Cursor Agent <cursoragent@cursor.com>

lauren committed Jul 7, 2026 at 20:46 UTC 5a90a5a7a54d88105b203cfc3230325f495948ae
12 files changed +175 -12
compiler/crates/react_compiler_ast/src/statements.rs
+27
@@ -478,6 +478,8 @@ pub enum VariableDeclarationKind {
478 Let,
479 Const,
480 Using,
481 + #[serde(rename = "await using")]
482 + AwaitUsing,
483 }
484
485 #[derive(Debug, Clone, Serialize, Deserialize)]
@@ -668,6 +670,31 @@ mod tests {
670 assert!(matches!(stmt, Statement::EmptyStatement(_)));
671 }
672
673 + /// Babel serializes `using`/`await using` declarations as ordinary
674 + /// VariableDeclarations whose `kind` is "using" / "await using" (with a
675 + /// space). Both must round-trip so the NAPI boundary does not reject
676 + /// files containing them.
677 + #[test]
678 + fn using_declaration_kinds_round_trip() {
679 + for kind in ["using", "await using"] {
680 + let input = json!({
681 + "type": "VariableDeclaration",
682 + "kind": kind,
683 + "declarations": [
684 + {
685 + "type": "VariableDeclarator",
686 + "id": { "type": "Identifier", "name": "resource" },
687 + "init": { "type": "NullLiteral" }
688 + }
689 + ]
690 + });
691 +
692 + let stmt: Statement = serde_json::from_value(input.clone()).unwrap();
693 + assert!(matches!(stmt, Statement::VariableDeclaration(_)));
694 + assert_eq!(serde_json::to_value(&stmt).unwrap()["kind"], json!(kind));
695 + }
696 + }
697 +
698 #[test]
699 fn malformed_known_statement_type_errors() {
700 let err = serde_json::from_value::<Statement>(json!({
compiler/crates/react_compiler_lowering/src/build_hir.rs
+15 -7
@@ -3058,22 +3058,30 @@ fn lower_statement(
3058 Statement::VariableDeclaration(var_decl) => {
3059 use react_compiler_ast::patterns::PatternLike;
3060 use react_compiler_ast::statements::VariableDeclarationKind;
3061 - if matches!(var_decl.kind, VariableDeclarationKind::Var) {
3061 + let unsupported_node_kind = match var_decl.kind {
3062 + VariableDeclarationKind::Var => Some("var"),
3063 + VariableDeclarationKind::Using => Some("using"),
3064 + VariableDeclarationKind::AwaitUsing => Some("await using"),
3065 + VariableDeclarationKind::Let | VariableDeclarationKind::Const => None,
3066 + };
3067 + if let Some(node_kind) = unsupported_node_kind {
3068 builder.record_error(CompilerErrorDetail {
3063 - reason: "(BuildHIR::lowerStatement) Handle var kinds in VariableDeclaration"
3064 - .to_string(),
3069 + reason: format!(
3070 + "(BuildHIR::lowerStatement) Handle {node_kind} kinds in VariableDeclaration"
3071 + ),
3072 category: ErrorCategory::Todo,
3073 loc: convert_opt_loc(&var_decl.base.loc),
3074 description: None,
3075 suggestions: None,
3076 })?;
3070 - // Treat `var` as `let` so references to the variable don't break
3077 + // Treat `var` as `let` and `using`/`await using` as `const` so
3078 + // references to the variable don't break while the error unwinds
3079 }
3080 let kind = match var_decl.kind {
3081 VariableDeclarationKind::Let | VariableDeclarationKind::Var => InstructionKind::Let,
3074 - VariableDeclarationKind::Const | VariableDeclarationKind::Using => {
3075 - InstructionKind::Const
3076 - }
3082 + VariableDeclarationKind::Const
3083 + | VariableDeclarationKind::Using
3084 + | VariableDeclarationKind::AwaitUsing => InstructionKind::Const,
3085 };
3086 for declarator in &var_decl.declarations {
3087 let stmt_loc = convert_opt_loc(&var_decl.base.loc);
compiler/packages/babel-plugin-react-compiler/src/HIR/BuildHIR.ts
+9 -2
@@ -903,7 +903,11 @@ function lowerStatement(
903 case 'VariableDeclaration': {
904 const stmt = stmtPath as NodePath<t.VariableDeclaration>;
905 const nodeKind: t.VariableDeclaration['kind'] = stmt.node.kind;
906 - if (nodeKind === 'var') {
906 + if (
907 + nodeKind === 'var' ||
908 + nodeKind === 'using' ||
909 + nodeKind === 'await using'
910 + ) {
911 builder.recordError(
912 new CompilerErrorDetail({
913 reason: `(BuildHIR::lowerStatement) Handle ${nodeKind} kinds in VariableDeclaration`,
@@ -912,7 +916,10 @@ function lowerStatement(
916 suggestions: null,
917 }),
918 );
915 - // Treat `var` as `let` so references to the variable don't break
919 + /*
920 + * Treat `var` as `let` and `using`/`await using` as `const` so
921 + * references to the variable don't break while the error unwinds
922 + */
923 }
924 const kind =
925 nodeKind === 'let' || nodeKind === 'var'
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-await-using-declaration.expect.md new
+29
@@ -0,0 +1,29 @@
1 +
2 +## Input
3 +
4 +```javascript
5 +async function Component(props) {
6 + await using resource = getResource(props.id);
7 + return <div>{resource.data}</div>;
8 +}
9 +
10 +```
11 +
12 +
13 +## Error
14 +
15 +```
16 +Found 1 error:
17 +
18 +Todo: (BuildHIR::lowerStatement) Handle await using kinds in VariableDeclaration
19 +
20 +error.todo-await-using-declaration.ts:2:2
21 + 1 | async function Component(props) {
22 +> 2 | await using resource = getResource(props.id);
23 + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ (BuildHIR::lowerStatement) Handle await using kinds in VariableDeclaration
24 + 3 | return <div>{resource.data}</div>;
25 + 4 | }
26 + 5 |
27 +```
28 +
29 +
\ No newline at end of file
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-await-using-declaration.js new
+4
@@ -0,0 +1,4 @@
1 +async function Component(props) {
2 + await using resource = getResource(props.id);
3 + return <div>{resource.data}</div>;
4 +}
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-using-declaration.expect.md new
+29
@@ -0,0 +1,29 @@
1 +
2 +## Input
3 +
4 +```javascript
5 +function Component(props) {
6 + using resource = getResource(props.id);
7 + return <div>{resource.data}</div>;
8 +}
9 +
10 +```
11 +
12 +
13 +## Error
14 +
15 +```
16 +Found 1 error:
17 +
18 +Todo: (BuildHIR::lowerStatement) Handle using kinds in VariableDeclaration
19 +
20 +error.todo-using-declaration.ts:2:2
21 + 1 | function Component(props) {
22 +> 2 | using resource = getResource(props.id);
23 + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ (BuildHIR::lowerStatement) Handle using kinds in VariableDeclaration
24 + 3 | return <div>{resource.data}</div>;
25 + 4 | }
26 + 5 |
27 +```
28 +
29 +
\ No newline at end of file
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-using-declaration.js new
+4
@@ -0,0 +1,4 @@
1 +function Component(props) {
2 + using resource = getResource(props.id);
3 + return <div>{resource.data}</div>;
4 +}
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/using-declaration-bailout-sibling-compiles.expect.md new
+40
@@ -0,0 +1,40 @@
1 +
2 +## Input
3 +
4 +```javascript
5 +// @panicThreshold:"none"
6 +function ComponentWithUsing(props) {
7 + using resource = getResource(props.id);
8 + return <div>{resource.data}</div>;
9 +}
10 +
11 +function ValidComponent(props) {
12 + return <div>{props.greeting}</div>;
13 +}
14 +
15 +```
16 +
17 +## Code
18 +
19 +```javascript
20 +import { c as _c } from "react/compiler-runtime"; // @panicThreshold:"none"
21 +function ComponentWithUsing(props) {
22 + using resource = getResource(props.id);
23 + return <div>{resource.data}</div>;
24 +}
25 +
26 +function ValidComponent(props) {
27 + const $ = _c(2);
28 + let t0;
29 + if ($[0] !== props.greeting) {
30 + t0 = <div>{props.greeting}</div>;
31 + $[0] = props.greeting;
32 + $[1] = t0;
33 + } else {
34 + t0 = $[1];
35 + }
36 + return t0;
37 +}
38 +
39 +```
40 +
\ No newline at end of file
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/using-declaration-bailout-sibling-compiles.js new
+9
@@ -0,0 +1,9 @@
1 +// @panicThreshold:"none"
2 +function ComponentWithUsing(props) {
3 + using resource = getResource(props.id);
4 + return <div>{resource.data}</div>;
5 +}
6 +
7 +function ValidComponent(props) {
8 + return <div>{props.greeting}</div>;
9 +}
compiler/packages/snap/src/SproutTodoFilter.ts
+6
@@ -26,6 +26,12 @@ const skipFilter = new Set([
26 */
27 'ts-namespace-export-declaration',
28
29 + /**
30 + * `using`/`await using` (explicit resource management) is not supported by
31 + * the Node version the evaluator runs on.
32 + */
33 + 'using-declaration-bailout-sibling-compiles',
34 +
35 /**
36 * Observable different in logging between Forget and non-Forget
37 */
compiler/packages/snap/src/compiler.ts
+1 -1
@@ -121,7 +121,7 @@ export function parseInput(
121 } else {
122 return BabelParser.parse(input, {
123 sourceFilename: filename,
124 - plugins: ['typescript', 'jsx'],
124 + plugins: ['typescript', 'jsx', 'explicitResourceManagement'],
125 sourceType,
126 });
127 }
compiler/scripts/test-e2e.ts
+2 -2
@@ -148,7 +148,7 @@ async function formatCode(code: string, isFlow: boolean): Promise<string> {
148 try {
149 const parserPlugins: string[] = isFlow
150 ? ['flow', 'jsx']
151 - : ['typescript', 'jsx'];
151 + : ['typescript', 'jsx', 'explicitResourceManagement'];
152 const ast = babel.parseSync(code, {
153 sourceType: 'module',
154 parserOpts: {plugins: parserPlugins},
@@ -183,7 +183,7 @@ function compileBabel(
183 const isScript = firstLine.includes('@script');
184 const parserPlugins: string[] = isFlow
185 ? ['flow', 'jsx']
186 - : ['typescript', 'jsx'];
186 + : ['typescript', 'jsx', 'explicitResourceManagement'];
187
188 const pragmaOpts = parseConfigPragmaForTests(firstLine, {
189 compilationMode: 'all',