[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-source-id: 6ad794da41116e1034783b6c4a58fbfe7790343e Pull Request resolved: https://github.com/facebook/react/pull/30628
Sathya Gunsasekaran committed
Aug 7, 2024 at 16:54 UTC
9d2da5913a58ad0d82f79b4df0852c788c2a3cc6
9 files changed
+14
-7
compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts
+4
-1
@@ -502,6 +502,9 @@ export function compileProgram(
502
}
503
}
504
505
+ const hasLoweredContextAccess = compiledFns.some(
506
+ c => c.compiledFn.hasLoweredContextAccess,
507
+ );
508
const externalFunctions: Array<ExternalFunction> = [];
509
let gating: null | ExternalFunction = null;
510
try {
@@ -512,7 +515,7 @@ export function compileProgram(
515
}
516
517
const lowerContextAccess = pass.opts.environment?.lowerContextAccess;
515
- if (lowerContextAccess) {
518
+ if (lowerContextAccess && hasLoweredContextAccess) {
519
externalFunctions.push(tryParseExternalFunction(lowerContextAccess));
520
}
521
compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts
+2
@@ -552,6 +552,7 @@ export class Environment {
552
config: EnvironmentConfig;
553
fnType: ReactFunctionType;
554
useMemoCacheIdentifier: string;
555
+ hasLoweredContextAccess: boolean;
556
557
#contextIdentifiers: Set<t.Identifier>;
558
#hoistedIdentifiers: Set<t.Identifier>;
@@ -575,6 +576,7 @@ export class Environment {
576
this.useMemoCacheIdentifier = useMemoCacheIdentifier;
577
this.#shapes = new Map(DEFAULT_SHAPES);
578
this.#globals = new Map(DEFAULT_GLOBALS);
579
+ this.hasLoweredContextAccess = false;
580
581
if (
582
config.disableMemoizationForDebugging &&
compiler/packages/babel-plugin-react-compiler/src/Optimization/LowerContextAccess.ts
+2
-1
@@ -77,7 +77,7 @@ export function lowerContextAccess(
77
}
78
}
79
80
- if (contextAccess.size > 0) {
80
+ if (contextAccess.size > 0 && contextKeys.size > 0) {
81
for (const [, block] of fn.body.blocks) {
82
let nextInstructions: Array<Instruction> | null = null;
83
@@ -120,6 +120,7 @@ export function lowerContextAccess(
120
}
121
markInstructionIds(fn.body);
122
inferTypes(fn);
123
+ fn.env.hasLoweredContextAccess = true;
124
}
125
}
126
compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CodegenReactiveFunction.ts
+6
@@ -97,6 +97,11 @@ export type CodegenFunction = {
97
fn: CodegenFunction;
98
type: ReactFunctionType | null;
99
}>;
100
+
101
+ /**
102
+ * This is true if the compiler has the lowered useContext calls.
103
+ */
104
+ hasLoweredContextAccess: boolean;
105
};
106
107
export function codegenFunction(
@@ -348,6 +353,7 @@ function codegenReactiveFunction(
353
prunedMemoBlocks: countMemoBlockVisitor.prunedMemoBlocks,
354
prunedMemoValues: countMemoBlockVisitor.prunedMemoValues,
355
outlined: [],
356
+ hasLoweredContextAccess: fn.env.hasLoweredContextAccess,
357
});
358
}
359
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.lower-context-access-array-destructuring.expect.md
-1
@@ -13,7 +13,6 @@ function App() {
13
## Code
14
15
```javascript
16
-import { useContext_withSelector } from "react-compiler-runtime";
16
import { c as _c } from "react/compiler-runtime"; // @lowerContextAccess
17
function App() {
18
const $ = _c(3);
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.lower-context-access-destructure-multiple.expect.md
-1
@@ -15,7 +15,6 @@ function App() {
15
## Code
16
17
```javascript
18
-import { useContext_withSelector } from "react-compiler-runtime";
18
import { c as _c } from "react/compiler-runtime"; // @lowerContextAccess
19
function App() {
20
const $ = _c(3);
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.lower-context-access-mixed-array-obj.expect.md
-1
@@ -15,7 +15,6 @@ function App() {
15
## Code
16
17
```javascript
18
-import { useContext_withSelector } from "react-compiler-runtime";
18
import { c as _c } from "react/compiler-runtime"; // @lowerContextAccess
19
function App() {
20
const $ = _c(3);
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.lower-context-access-nested-destructuring.expect.md
-1
@@ -16,7 +16,6 @@ function App() {
16
## Code
17
18
```javascript
19
-import { useContext_withSelector } from "react-compiler-runtime";
19
import { c as _c } from "react/compiler-runtime"; // @lowerContextAccess
20
function App() {
21
const $ = _c(3);
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.lower-context-access-property-load.expect.md
-1
@@ -15,7 +15,6 @@ function App() {
15
## Code
16
17
```javascript
18
-import { useContext_withSelector } from "react-compiler-runtime";
18
import { c as _c } from "react/compiler-runtime"; // @lowerContextAccess
19
function App() {
20
const $ = _c(3);