[compiler] Add context callee import if required

Previously the compiler would add an import for the specified context callee even if the context access was not lowered, leading to unused imports. This PR tracks if lowering has happened and adds the import only when necessary. [ghstack-poisoned]
facebook · Aug 7, 2024 · 7deadab · 7deadab
1 parent 5112793
commit 7deadab
Show file tree

Hide file tree

Showing 9 changed files with 14 additions and 7 deletions.
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts b/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts
@@ -502,6 +502,9 @@ export function compileProgram(
     }
   }
 
+  const hasLoweredContextAccess = compiledFns.some(
+    c => c.compiledFn.hasLoweredContextAccess,
+  );
   const externalFunctions: Array<ExternalFunction> = [];
   let gating: null | ExternalFunction = null;
   try {
@@ -512,7 +515,7 @@ export function compileProgram(
     }
 
     const lowerContextAccess = pass.opts.environment?.lowerContextAccess;
-    if (lowerContextAccess) {
+    if (lowerContextAccess && hasLoweredContextAccess) {
       externalFunctions.push(tryParseExternalFunction(lowerContextAccess));
     }
 

diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts
@@ -552,6 +552,7 @@ export class Environment {
   config: EnvironmentConfig;
   fnType: ReactFunctionType;
   useMemoCacheIdentifier: string;
+  hasLoweredContextAccess: boolean;
 
   #contextIdentifiers: Set<t.Identifier>;
   #hoistedIdentifiers: Set<t.Identifier>;
@@ -575,6 +576,7 @@ export class Environment {
     this.useMemoCacheIdentifier = useMemoCacheIdentifier;
     this.#shapes = new Map(DEFAULT_SHAPES);
     this.#globals = new Map(DEFAULT_GLOBALS);
+    this.hasLoweredContextAccess = false;
 
     if (
       config.disableMemoizationForDebugging &&

diff --git a/compiler/packages/babel-plugin-react-compiler/src/Optimization/LowerContextAccess.ts b/compiler/packages/babel-plugin-react-compiler/src/Optimization/LowerContextAccess.ts
@@ -77,7 +77,7 @@ export function lowerContextAccess(
     }
   }
 
-  if (contextAccess.size > 0) {
+  if (contextAccess.size > 0 && contextKeys.size > 0) {
     for (const [, block] of fn.body.blocks) {
       let nextInstructions: Array<Instruction> | null = null;
 
@@ -120,6 +120,7 @@ export function lowerContextAccess(
     }
     markInstructionIds(fn.body);
     inferTypes(fn);
+    fn.env.hasLoweredContextAccess = true;
   }
 }
 

diff --git a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CodegenReactiveFunction.ts b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CodegenReactiveFunction.ts
@@ -97,6 +97,11 @@ export type CodegenFunction = {
     fn: CodegenFunction;
     type: ReactFunctionType | null;
   }>;
+
+  /**
+   * This is true if the compiler has the lowered useContext calls.
+   */
+  hasLoweredContextAccess: boolean;
 };
 
 export function codegenFunction(
@@ -348,6 +353,7 @@ function codegenReactiveFunction(
     prunedMemoBlocks: countMemoBlockVisitor.prunedMemoBlocks,
     prunedMemoValues: countMemoBlockVisitor.prunedMemoValues,
     outlined: [],
+    hasLoweredContextAccess: fn.env.hasLoweredContextAccess,
   });
 }
 

diff --git a/...sts__/fixtures/compiler/todo.lower-context-access-array-destructuring.expect.md b/...sts__/fixtures/compiler/todo.lower-context-access-array-destructuring.expect.md
@@ -13,7 +13,6 @@ function App() {
 ## Code
 
 ```javascript
-import { useContext_withSelector } from "react-compiler-runtime";
 import { c as _c } from "react/compiler-runtime"; // @lowerContextAccess
 function App() {
   const $ = _c(3);

diff --git a/...ts__/fixtures/compiler/todo.lower-context-access-destructure-multiple.expect.md b/...ts__/fixtures/compiler/todo.lower-context-access-destructure-multiple.expect.md
@@ -15,7 +15,6 @@ function App() {
 ## Code
 
 ```javascript
-import { useContext_withSelector } from "react-compiler-runtime";
 import { c as _c } from "react/compiler-runtime"; // @lowerContextAccess
 function App() {
   const $ = _c(3);

diff --git a/...__tests__/fixtures/compiler/todo.lower-context-access-mixed-array-obj.expect.md b/...__tests__/fixtures/compiler/todo.lower-context-access-mixed-array-obj.expect.md
@@ -15,7 +15,6 @@ function App() {
 ## Code
 
 ```javascript
-import { useContext_withSelector } from "react-compiler-runtime";
 import { c as _c } from "react/compiler-runtime"; // @lowerContextAccess
 function App() {
   const $ = _c(3);

diff --git a/...ts__/fixtures/compiler/todo.lower-context-access-nested-destructuring.expect.md b/...ts__/fixtures/compiler/todo.lower-context-access-nested-destructuring.expect.md
@@ -16,7 +16,6 @@ function App() {
 ## Code
 
 ```javascript
-import { useContext_withSelector } from "react-compiler-runtime";
 import { c as _c } from "react/compiler-runtime"; // @lowerContextAccess
 function App() {
   const $ = _c(3);

diff --git a/...c/__tests__/fixtures/compiler/todo.lower-context-access-property-load.expect.md b/...c/__tests__/fixtures/compiler/todo.lower-context-access-property-load.expect.md
@@ -15,7 +15,6 @@ function App() {
 ## Code
 
 ```javascript
-import { useContext_withSelector } from "react-compiler-runtime";
 import { c as _c } from "react/compiler-runtime"; // @lowerContextAccess
 function App() {
   const $ = _c(3);