From 9d2da5913a58ad0d82f79b4df0852c788c2a3cc6 Mon Sep 17 00:00:00 2001 From: Sathya Gunsasekaran Date: Wed, 7 Aug 2024 16:54:23 +0100 Subject: [PATCH] [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 --- .../babel-plugin-react-compiler/src/Entrypoint/Program.ts | 5 ++++- .../babel-plugin-react-compiler/src/HIR/Environment.ts | 2 ++ .../src/Optimization/LowerContextAccess.ts | 3 ++- .../src/ReactiveScopes/CodegenReactiveFunction.ts | 6 ++++++ .../todo.lower-context-access-array-destructuring.expect.md | 1 - ...todo.lower-context-access-destructure-multiple.expect.md | 1 - .../todo.lower-context-access-mixed-array-obj.expect.md | 1 - ...todo.lower-context-access-nested-destructuring.expect.md | 1 - .../todo.lower-context-access-property-load.expect.md | 1 - 9 files changed, 14 insertions(+), 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 index 0ca26337c4bc0..2a6408a4fad5e 100644 --- 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 = []; 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 index 4bbd8cb17f89a..6aeae34ad55a0 100644 --- 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; #hoistedIdentifiers: Set; @@ -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 index efa0c0cdaa231..8455a094f05e7 100644 --- 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 | 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 index 6fd94dac09bce..978596dc67dfd 100644 --- 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/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.lower-context-access-array-destructuring.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.lower-context-access-array-destructuring.expect.md index 7feba7d408cf4..d064a48b7197a 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.lower-context-access-array-destructuring.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/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/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.lower-context-access-destructure-multiple.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.lower-context-access-destructure-multiple.expect.md index ac38876bce3f6..f82af06866b76 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.lower-context-access-destructure-multiple.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/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/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.lower-context-access-mixed-array-obj.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.lower-context-access-mixed-array-obj.expect.md index d808a5e3f04cd..573b6db231c1e 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.lower-context-access-mixed-array-obj.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__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/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.lower-context-access-nested-destructuring.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.lower-context-access-nested-destructuring.expect.md index 2e5b517ef23b1..03ce7f97ba357 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.lower-context-access-nested-destructuring.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/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/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.lower-context-access-property-load.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.lower-context-access-property-load.expect.md index 482ed458237e5..55387503cf744 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.lower-context-access-property-load.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__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);