[compiler] add fire imports (#31797)
Summary: Adds import {useFire} from 'react' when fire syntax is used. This is experimentation and may not become a stable feature in the compiler. -- --- [//]: # (BEGIN SAPLING FOOTER) Stack created with [Sapling](https://sapling-scm.com). Best reviewed with [ReviewStack](https://reviewstack.dev/facebook/react/pull/31797). * #31811 * #31798 * __->__ #31797
Jordan Brown committed
Dec 20, 2024 at 15:25 UTC
ab27231dc51aa2535df37555797e630d31047fa4
9 files changed
+19
-1
compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts
+5
@@ -564,6 +564,11 @@ export function compileProgram(
564
if (environment.enableChangeDetectionForDebugging != null) {
565
externalFunctions.push(environment.enableChangeDetectionForDebugging);
566
}
567
+
568
+ const hasFireRewrite = compiledFns.some(c => c.compiledFn.hasFireRewrite);
569
+ if (environment.enableFire && hasFireRewrite) {
570
+ externalFunctions.push({source: 'react', importSpecifierName: 'useFire'});
571
+ }
572
} catch (err) {
573
handleError(err, pass, null);
574
return;
compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts
+2
@@ -787,6 +787,7 @@ export class Environment {
787
fnType: ReactFunctionType;
788
useMemoCacheIdentifier: string;
789
hasLoweredContextAccess: boolean;
790
+ hasFireRewrite: boolean;
791
792
#contextIdentifiers: Set<t.Identifier>;
793
#hoistedIdentifiers: Set<t.Identifier>;
@@ -811,6 +812,7 @@ export class Environment {
812
this.#shapes = new Map(DEFAULT_SHAPES);
813
this.#globals = new Map(DEFAULT_GLOBALS);
814
this.hasLoweredContextAccess = false;
815
+ this.hasFireRewrite = false;
816
817
if (
818
config.disableMemoizationForDebugging &&
compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CodegenReactiveFunction.ts
+6
@@ -103,6 +103,11 @@ export type CodegenFunction = {
103
* This is true if the compiler has the lowered useContext calls.
104
*/
105
hasLoweredContextAccess: boolean;
106
+
107
+ /**
108
+ * This is true if the compiler has compiled a fire to a useFire call
109
+ */
110
+ hasFireRewrite: boolean;
111
};
112
113
export function codegenFunction(
@@ -355,6 +360,7 @@ function codegenReactiveFunction(
360
prunedMemoValues: countMemoBlockVisitor.prunedMemoValues,
361
outlined: [],
362
hasLoweredContextAccess: fn.env.hasLoweredContextAccess,
363
+ hasFireRewrite: fn.env.hasFireRewrite,
364
});
365
}
366
compiler/packages/babel-plugin-react-compiler/src/Transform/TransformFire.ts
+1
-1
@@ -32,7 +32,6 @@ import {BuiltInFireId, DefaultNonmutatingHook} from '../HIR/ObjectShape';
32
/*
33
* TODO(jmbrown):
34
* In this stack:
35
- * - Insert useFire import
35
* - Assert no lingering fire calls
36
* - Ensure a fired function is not called regularly elsewhere in the same effect
37
*
@@ -226,6 +225,7 @@ function replaceFireFunctions(fn: HIRFunction, context: Context): void {
225
226
if (rewriteInstrs.size > 0 || deleteInstrs.size > 0) {
227
hasRewrite = true;
228
+ fn.env.hasFireRewrite = true;
229
}
230
}
231
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/basic.expect.md
+1
@@ -21,6 +21,7 @@ function Component(props) {
21
## Code
22
23
```javascript
24
+import { useFire } from "react";
25
import { c as _c } from "react/compiler-runtime"; // @enableFire
26
import { fire } from "react";
27
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/deep-scope.expect.md
+1
@@ -30,6 +30,7 @@ function Component(props) {
30
## Code
31
32
```javascript
33
+import { useFire } from "react";
34
import { c as _c } from "react/compiler-runtime"; // @enableFire
35
import { fire } from "react";
36
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/multiple-scope.expect.md
+1
@@ -29,6 +29,7 @@ function Component(props) {
29
## Code
30
31
```javascript
32
+import { useFire } from "react";
33
import { c as _c } from "react/compiler-runtime"; // @enableFire
34
import { fire } from "react";
35
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/repeated-calls.expect.md
+1
@@ -22,6 +22,7 @@ function Component(props) {
22
## Code
23
24
```javascript
25
+import { useFire } from "react";
26
import { c as _c } from "react/compiler-runtime"; // @enableFire
27
import { fire } from "react";
28
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/shared-hook-calls.expect.md
+1
@@ -26,6 +26,7 @@ function Component({bar, baz}) {
26
## Code
27
28
```javascript
29
+import { useFire } from "react";
30
import { c as _c } from "react/compiler-runtime"; // @enableFire
31
import { fire } from "react";
32