[compiler] add fire imports

Summary:

Adds import {useFire} from 'react' when fire syntax is used.

This is experimentation and may not become a stable feature in the compiler.

--

Author: jbrown215

compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts

@@ -564,6 +564,11 @@ export function compileProgram(
     if (environment.enableChangeDetectionForDebugging != null) {
       externalFunctions.push(environment.enableChangeDetectionForDebugging);
     }
+
+    const hasFireRewrite = compiledFns.some(c => c.compiledFn.hasFireRewrite);
+    if (environment.enableFire && hasFireRewrite) {
+      externalFunctions.push({source: 'react', importSpecifierName: 'useFire'});
+    }
   } catch (err) {
     handleError(err, pass, null);
     return;

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

@@ -787,6 +787,7 @@ export class Environment {
   fnType: ReactFunctionType;
   useMemoCacheIdentifier: string;
   hasLoweredContextAccess: boolean;
+  hasFireRewrite: boolean;
 
   #contextIdentifiers: Set<t.Identifier>;
   #hoistedIdentifiers: Set<t.Identifier>;
@@ -811,6 +812,7 @@ export class Environment {
     this.#shapes = new Map(DEFAULT_SHAPES);
     this.#globals = new Map(DEFAULT_GLOBALS);
     this.hasLoweredContextAccess = false;
+    this.hasFireRewrite = false;
 
     if (
       config.disableMemoizationForDebugging &&

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

@@ -103,6 +103,11 @@ export type CodegenFunction = {
    * This is true if the compiler has the lowered useContext calls.
    */
   hasLoweredContextAccess: boolean;
+
+  /**
+   * This is true if the compiler has compiled a fire to a useFire call
+   */
+  hasFireRewrite: boolean;
 };
 
 export function codegenFunction(
@@ -355,6 +360,7 @@ function codegenReactiveFunction(
     prunedMemoValues: countMemoBlockVisitor.prunedMemoValues,
     outlined: [],
     hasLoweredContextAccess: fn.env.hasLoweredContextAccess,
+    hasFireRewrite: fn.env.hasFireRewrite,
   });
 }
 

compiler/packages/babel-plugin-react-compiler/src/Transform/TransformFire.ts

@@ -32,7 +32,6 @@ import {BuiltInFireId, DefaultNonmutatingHook} from '../HIR/ObjectShape';
 /*
  * TODO(jmbrown):
  *   In this stack:
- *     - Insert useFire import
  *     - Assert no lingering fire calls
  *     - Ensure a fired function is not called regularly elsewhere in the same effect
  *
@@ -226,6 +225,7 @@ function replaceFireFunctions(fn: HIRFunction, context: Context): void {
 
     if (rewriteInstrs.size > 0 || deleteInstrs.size > 0) {
       hasRewrite = true;
+      fn.env.hasFireRewrite = true;
     }
   }
 

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/basic.expect.md

@@ -21,6 +21,7 @@ function Component(props) {
 ## Code
 
 ```javascript
+import { useFire } from "react";
 import { c as _c } from "react/compiler-runtime"; // @enableFire
 import { fire } from "react";
 

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/deep-scope.expect.md

@@ -30,6 +30,7 @@ function Component(props) {
 ## Code
 
 ```javascript
+import { useFire } from "react";
 import { c as _c } from "react/compiler-runtime"; // @enableFire
 import { fire } from "react";
 

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/multiple-scope.expect.md

@@ -29,6 +29,7 @@ function Component(props) {
 ## Code
 
 ```javascript
+import { useFire } from "react";
 import { c as _c } from "react/compiler-runtime"; // @enableFire
 import { fire } from "react";
 

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/repeated-calls.expect.md

@@ -22,6 +22,7 @@ function Component(props) {
 ## Code
 
 ```javascript
+import { useFire } from "react";
 import { c as _c } from "react/compiler-runtime"; // @enableFire
 import { fire } from "react";
 

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/shared-hook-calls.expect.md

@@ -26,6 +26,7 @@ function Component({bar, baz}) {
 ## Code
 
 ```javascript
+import { useFire } from "react";
 import { c as _c } from "react/compiler-runtime"; // @enableFire
 import { fire } from "react";