Compare commits

..

6 Commits

Author SHA1 Message Date
Joe Savona
edfde88816 [compiler] Phase 4 (batch 1): Update validation passes to record errors on env
Update 9 validation passes to record errors directly on fn.env instead of
returning Result<void, CompilerError>:
- validateHooksUsage
- validateNoCapitalizedCalls (also changed throwInvalidReact to recordError)
- validateUseMemo
- dropManualMemoization
- validateNoRefAccessInRender
- validateNoSetStateInRender
- validateNoImpureFunctionsInRender
- validateNoFreezingKnownMutableFunctions
- validateExhaustiveDependencies

Each pass now calls fn.env.recordErrors() instead of returning errors.asResult().
Pipeline.ts call sites updated to remove tryRecord() wrappers and .unwrap().
2026-02-23 15:27:43 -08:00
Joseph Savona
426a394845 [compiler] Phase 2+7: Wrap pipeline passes in tryRecord for fault tolerance (#35874)
- Change runWithEnvironment/run/compileFn to return
Result<CodegenFunction, CompilerError>
- Wrap all pipeline passes in env.tryRecord() to catch and record
CompilerErrors
- Record inference pass errors via env.recordErrors() instead of
throwing
- Handle codegen Result explicitly, returning Err on failure
- Add final error check: return Err(env.aggregateErrors()) if any errors
accumulated
- Update tryCompileFunction and retryCompileFunction in Program.ts to
handle Result
- Keep lint-only passes using env.logErrors() (non-blocking)
- Update 52 test fixture expectations that now report additional errors

This is the core integration that enables fault tolerance: errors are
caught,
recorded, and the pipeline continues to discover more errors.

---
[//]: # (BEGIN SAPLING FOOTER)
Stack created with [Sapling](https://sapling-scm.com). Best reviewed
with [ReviewStack](https://reviewstack.dev/facebook/react/pull/35874).
* #35888
* #35884
* #35883
* #35882
* #35881
* #35880
* #35879
* #35878
* #35877
* #35876
* #35875
* __->__ #35874
2026-02-23 15:26:28 -08:00
Joseph Savona
eca778cf8b [compiler] Phase 1: Add error accumulation infrastructure to Environment (#35873)
Add error accumulation methods to the Environment class:
- #errors field to accumulate CompilerErrors across passes
- recordError() to record a single diagnostic (throws if Invariant)
- recordErrors() to record all diagnostics from a CompilerError
- hasErrors() to check if any errors have been recorded
- aggregateErrors() to retrieve the accumulated CompilerError
- tryRecord() to wrap callbacks and catch CompilerErrors

---
[//]: # (BEGIN SAPLING FOOTER)
Stack created with [Sapling](https://sapling-scm.com). Best reviewed
with [ReviewStack](https://reviewstack.dev/facebook/react/pull/35873).
* #35888
* #35884
* #35883
* #35882
* #35881
* #35880
* #35879
* #35878
* #35877
* #35876
* #35875
* #35874
* __->__ #35873
2026-02-23 15:18:23 -08:00
Joseph Savona
0dbb43bc57 [compiler] Add fault tolerance plan document (#35872)
Add detailed plan for making the React Compiler fault-tolerant by
accumulating errors across all passes instead of stopping at the first
error. This enables reporting multiple compilation errors at once.

---
[//]: # (BEGIN SAPLING FOOTER)
Stack created with [Sapling](https://sapling-scm.com). Best reviewed
with [ReviewStack](https://reviewstack.dev/facebook/react/pull/35872).
* #35888
* #35884
* #35883
* #35882
* #35881
* #35880
* #35879
* #35878
* #35877
* #35876
* #35875
* #35874
* #35873
* __->__ #35872
2026-02-23 15:15:29 -08:00
Joseph Savona
8b6b11f703 [compiler] Remove fallback compilation pipeline dead code (#35827)
Remove dead code left behind after the removal of retryCompileFunction,
enableFire, and inferEffectDependencies:
- Delete ValidateNoUntransformedReferences.ts (always a no-op)
- Remove CompileProgramMetadata type and retryErrors from ProgramContext
- Remove 'client-no-memo' output mode
- Change compileProgram return type from CompileProgramMetadata | null
to void
2026-02-23 08:54:49 -08:00
Andrew Clark
ab18f33d46 Fix context propagation through suspended Suspense boundaries (#35839)
When a Suspense boundary suspends during initial mount, the primary
children's fibers are discarded because there is no current tree to
preserve them. If the suspended promise never resolves, the only way to
retry is something external like a context change. However, lazy context
propagation could not find the consumer fibers — they no longer exist in
the tree — so the Suspense boundary was never marked for retry and
remained stuck in fallback state indefinitely.

The fix teaches context propagation to conservatively mark suspended
Suspense boundaries for retry when a parent context changes, even when
the consumer fibers can't be found. This matches the existing
conservative approach used for dehydrated (SSR) Suspense boundaries.
2026-02-20 22:03:11 -05:00
27 changed files with 325 additions and 540 deletions

View File

@@ -174,17 +174,17 @@ These passes already accumulate errors internally and return `Result<void, Compi
- Record errors on env
- Update Pipeline.ts call site (line 315): remove `.unwrap()`
- [x] **4.10 `validateMemoizedEffectDependencies`** (`src/Validation/ValidateMemoizedEffectDependencies.ts`)
- [ ] **4.10 `validateMemoizedEffectDependencies`** (`src/Validation/ValidateMemoizedEffectDependencies.ts`)
- Change signature to return void (note: operates on `ReactiveFunction`)
- Record errors on the function's env
- Update Pipeline.ts call site (line 565): remove `.unwrap()`
- [x] **4.11 `validatePreservedManualMemoization`** (`src/Validation/ValidatePreservedManualMemoization.ts`)
- [ ] **4.11 `validatePreservedManualMemoization`** (`src/Validation/ValidatePreservedManualMemoization.ts`)
- Change signature to return void (note: operates on `ReactiveFunction`)
- Record errors on the function's env
- Update Pipeline.ts call site (line 572): remove `.unwrap()`
- [x] **4.12 `validateSourceLocations`** (`src/Validation/ValidateSourceLocations.ts`)
- [ ] **4.12 `validateSourceLocations`** (`src/Validation/ValidateSourceLocations.ts`)
- Change signature to return void
- Record errors on env
- Update Pipeline.ts call site (line 585): remove `.unwrap()`
@@ -202,16 +202,16 @@ These already use a soft-logging pattern and don't block compilation. They can b
These throw `CompilerError` directly (not via Result). They need the most work.
- [x] **4.17 `validateContextVariableLValues`** (`src/Validation/ValidateContextVariableLValues.ts`)
- [ ] **4.17 `validateContextVariableLValues`** (`src/Validation/ValidateContextVariableLValues.ts`)
- Currently throws via `CompilerError.throwTodo()` and `CompilerError.invariant()`
- Change to record Todo errors on env and continue
- Keep invariant throws (those indicate internal bugs)
- [x] **4.18 `validateLocalsNotReassignedAfterRender`** (`src/Validation/ValidateLocalsNotReassignedAfterRender.ts`)
- [ ] **4.18 `validateLocalsNotReassignedAfterRender`** (`src/Validation/ValidateLocalsNotReassignedAfterRender.ts`)
- Currently constructs a `CompilerError` and `throw`s it directly
- Change to record errors on env
- [x] **4.19 `validateNoDerivedComputationsInEffects`** (`src/Validation/ValidateNoDerivedComputationsInEffects.ts`)
- [ ] **4.19 `validateNoDerivedComputationsInEffects`** (`src/Validation/ValidateNoDerivedComputationsInEffects.ts`)
- Currently throws directly
- Change to record errors on env
@@ -219,14 +219,14 @@ These throw `CompilerError` directly (not via Result). They need the most work.
The inference passes are the most critical to handle correctly because they produce side effects (populating effects on instructions, computing mutable ranges) that downstream passes depend on. They must continue producing valid (even if imprecise) output when errors are encountered.
- [x] **5.1 `inferMutationAliasingEffects`** (`src/Inference/InferMutationAliasingEffects.ts`)
- [ ] **5.1 `inferMutationAliasingEffects`** (`src/Inference/InferMutationAliasingEffects.ts`)
- Currently returns `Result<void, CompilerError>` — errors are about mutation of frozen/global values
- Change to record errors on `fn.env` instead of accumulating internally
- **Key recovery strategy**: When a mutation of a frozen value is detected, record the error but treat the operation as a non-mutating read. This way downstream passes see a consistent (if conservative) view
- When a mutation of a global is detected, record the error but continue with the global unchanged
- Update Pipeline.ts (lines 233-239): remove the conditional `.isErr()` / throw pattern
- [x] **5.2 `inferMutationAliasingRanges`** (`src/Inference/InferMutationAliasingRanges.ts`)
- [ ] **5.2 `inferMutationAliasingRanges`** (`src/Inference/InferMutationAliasingRanges.ts`)
- Currently returns `Result<Array<AliasingEffect>, CompilerError>`
- This pass has a meaningful success value (the function's external aliasing effects)
- Change to: always produce a best-effort effects array, record errors on env
@@ -235,7 +235,7 @@ The inference passes are the most critical to handle correctly because they prod
### Phase 6: Update Codegen
- [x] **6.1 `codegenFunction`** (`src/ReactiveScopes/CodegenReactiveFunction.ts`)
- [ ] **6.1 `codegenFunction`** (`src/ReactiveScopes/CodegenReactiveFunction.ts`)
- Currently returns `Result<CodegenFunction, CompilerError>`
- Change to: always produce a `CodegenFunction`, record errors on env
- If codegen encounters an error (e.g., an instruction it can't generate code for), it should:

View File

@@ -11,7 +11,6 @@ import {
injectReanimatedFlag,
pipelineUsesReanimatedPlugin,
} from '../Entrypoint/Reanimated';
import validateNoUntransformedReferences from '../Entrypoint/ValidateNoUntransformedReferences';
import {CompilerError} from '..';
const ENABLE_REACT_COMPILER_TIMINGS =
@@ -64,19 +63,12 @@ export default function BabelPluginReactCompiler(
},
};
}
const result = compileProgram(prog, {
compileProgram(prog, {
opts,
filename: pass.filename ?? null,
comments: pass.file.ast.comments ?? [],
code: pass.file.code,
});
validateNoUntransformedReferences(
prog,
pass.filename ?? null,
opts.logger,
opts.environment,
result,
);
if (ENABLE_REACT_COMPILER_TIMINGS === true) {
performance.mark(`${filename}:end`, {
detail: 'BabelPlugin:Program:end',

View File

@@ -19,7 +19,7 @@ import {getOrInsertWith} from '../Utils/utils';
import {ExternalFunction, isHookName} from '../HIR/Environment';
import {Err, Ok, Result} from '../Utils/Result';
import {LoggerEvent, ParsedPluginOptions} from './Options';
import {BabelFn, getReactCompilerRuntimeModule} from './Program';
import {getReactCompilerRuntimeModule} from './Program';
import {SuppressionRange} from './Suppression';
export function validateRestrictedImports(
@@ -84,11 +84,6 @@ export class ProgramContext {
// generated imports
imports: Map<string, Map<string, NonLocalImportSpecifier>> = new Map();
/**
* Metadata from compilation
*/
retryErrors: Array<{fn: BabelFn; error: CompilerError}> = [];
constructor({
program,
suppressions,

View File

@@ -228,8 +228,6 @@ const CompilerOutputModeSchema = z.enum([
'ssr',
// Build optimized for the client, with auto memoization
'client',
// Build optimized for the client without auto memo
'client-no-memo',
// Lint mode, the output is unused but validations should run
'lint',
]);

View File

@@ -92,7 +92,6 @@ import {validateNoJSXInTryStatement} from '../Validation/ValidateNoJSXInTryState
import {propagateScopeDependenciesHIR} from '../HIR/PropagateScopeDependenciesHIR';
import {outlineJSX} from '../Optimization/OutlineJsx';
import {optimizePropsMethodCalls} from '../Optimization/OptimizePropsMethodCalls';
import {validateNoImpureFunctionsInRender} from '../Validation/ValidateNoImpureFunctionsInRender';
import {validateStaticComponents} from '../Validation/ValidateStaticComponents';
import {validateNoFreezingKnownMutableFunctions} from '../Validation/ValidateNoFreezingKnownMutableFunctions';
import {inferMutationAliasingEffects} from '../Inference/InferMutationAliasingEffects';
@@ -159,12 +158,12 @@ function runWithEnvironment(
const hir = lower(func, env).unwrap();
log({kind: 'hir', name: 'HIR', value: hir});
env.tryRecord(() => {
pruneMaybeThrows(hir);
});
pruneMaybeThrows(hir);
log({kind: 'hir', name: 'PruneMaybeThrows', value: hir});
validateContextVariableLValues(hir);
env.tryRecord(() => {
validateContextVariableLValues(hir);
});
validateUseMemo(hir);
if (env.enableDropManualMemoization) {
@@ -172,43 +171,31 @@ function runWithEnvironment(
log({kind: 'hir', name: 'DropManualMemoization', value: hir});
}
env.tryRecord(() => {
inlineImmediatelyInvokedFunctionExpressions(hir);
});
inlineImmediatelyInvokedFunctionExpressions(hir);
log({
kind: 'hir',
name: 'InlineImmediatelyInvokedFunctionExpressions',
value: hir,
});
env.tryRecord(() => {
mergeConsecutiveBlocks(hir);
});
mergeConsecutiveBlocks(hir);
log({kind: 'hir', name: 'MergeConsecutiveBlocks', value: hir});
assertConsistentIdentifiers(hir);
assertTerminalSuccessorsExist(hir);
env.tryRecord(() => {
enterSSA(hir);
});
enterSSA(hir);
log({kind: 'hir', name: 'SSA', value: hir});
env.tryRecord(() => {
eliminateRedundantPhi(hir);
});
eliminateRedundantPhi(hir);
log({kind: 'hir', name: 'EliminateRedundantPhi', value: hir});
assertConsistentIdentifiers(hir);
env.tryRecord(() => {
constantPropagation(hir);
});
constantPropagation(hir);
log({kind: 'hir', name: 'ConstantPropagation', value: hir});
env.tryRecord(() => {
inferTypes(hir);
});
inferTypes(hir);
log({kind: 'hir', name: 'InferTypes', value: hir});
if (env.enableValidations) {
@@ -220,42 +207,42 @@ function runWithEnvironment(
}
}
env.tryRecord(() => {
optimizePropsMethodCalls(hir);
});
optimizePropsMethodCalls(hir);
log({kind: 'hir', name: 'OptimizePropsMethodCalls', value: hir});
env.tryRecord(() => {
analyseFunctions(hir);
});
analyseFunctions(hir);
log({kind: 'hir', name: 'AnalyseFunctions', value: hir});
inferMutationAliasingEffects(hir);
const mutabilityAliasingErrors = inferMutationAliasingEffects(hir);
log({kind: 'hir', name: 'InferMutationAliasingEffects', value: hir});
if (env.enableValidations) {
if (mutabilityAliasingErrors.isErr()) {
env.recordErrors(mutabilityAliasingErrors.unwrapErr());
}
}
if (env.outputMode === 'ssr') {
env.tryRecord(() => {
optimizeForSSR(hir);
});
optimizeForSSR(hir);
log({kind: 'hir', name: 'OptimizeForSSR', value: hir});
}
// Note: Has to come after infer reference effects because "dead" code may still affect inference
env.tryRecord(() => {
deadCodeElimination(hir);
});
deadCodeElimination(hir);
log({kind: 'hir', name: 'DeadCodeElimination', value: hir});
env.tryRecord(() => {
pruneMaybeThrows(hir);
});
pruneMaybeThrows(hir);
log({kind: 'hir', name: 'PruneMaybeThrows', value: hir});
inferMutationAliasingRanges(hir, {
const mutabilityAliasingRangeErrors = inferMutationAliasingRanges(hir, {
isFunctionExpression: false,
});
log({kind: 'hir', name: 'InferMutationAliasingRanges', value: hir});
if (env.enableValidations) {
validateLocalsNotReassignedAfterRender(hir);
if (mutabilityAliasingRangeErrors.isErr()) {
env.recordErrors(mutabilityAliasingRangeErrors.unwrapErr());
}
env.tryRecord(() => {
validateLocalsNotReassignedAfterRender(hir);
});
}
if (env.enableValidations) {
@@ -277,7 +264,9 @@ function runWithEnvironment(
) {
env.logErrors(validateNoDerivedComputationsInEffects_exp(hir));
} else if (env.config.validateNoDerivedComputationsInEffects) {
validateNoDerivedComputationsInEffects(hir);
env.tryRecord(() => {
validateNoDerivedComputationsInEffects(hir);
});
}
if (env.config.validateNoSetStateInEffects && env.outputMode === 'lint') {
@@ -288,16 +277,12 @@ function runWithEnvironment(
env.logErrors(validateNoJSXInTryStatement(hir));
}
if (env.config.validateNoImpureFunctionsInRender) {
validateNoImpureFunctionsInRender(hir);
}
validateNoFreezingKnownMutableFunctions(hir);
env.tryRecord(() => {
validateNoFreezingKnownMutableFunctions(hir);
});
}
env.tryRecord(() => {
inferReactivePlaces(hir);
});
inferReactivePlaces(hir);
log({kind: 'hir', name: 'InferReactivePlaces', value: hir});
if (env.enableValidations) {
@@ -310,9 +295,7 @@ function runWithEnvironment(
}
}
env.tryRecord(() => {
rewriteInstructionKindsBasedOnReassignment(hir);
});
rewriteInstructionKindsBasedOnReassignment(hir);
log({
kind: 'hir',
name: 'RewriteInstructionKindsBasedOnReassignment',
@@ -333,16 +316,12 @@ function runWithEnvironment(
* if inferred memoization is enabled. This makes all later passes which
* transform reactive-scope labeled instructions no-ops.
*/
env.tryRecord(() => {
inferReactiveScopeVariables(hir);
});
inferReactiveScopeVariables(hir);
log({kind: 'hir', name: 'InferReactiveScopeVariables', value: hir});
}
let fbtOperands: Set<IdentifierId> = new Set();
env.tryRecord(() => {
fbtOperands = memoizeFbtAndMacroOperandsInSameScope(hir);
});
fbtOperands = memoizeFbtAndMacroOperandsInSameScope(hir);
log({
kind: 'hir',
name: 'MemoizeFbtAndMacroOperandsInSameScope',
@@ -350,15 +329,11 @@ function runWithEnvironment(
});
if (env.config.enableJsxOutlining) {
env.tryRecord(() => {
outlineJSX(hir);
});
outlineJSX(hir);
}
if (env.config.enableNameAnonymousFunctions) {
env.tryRecord(() => {
nameAnonymousFunctions(hir);
});
nameAnonymousFunctions(hir);
log({
kind: 'hir',
name: 'NameAnonymousFunctions',
@@ -367,51 +342,39 @@ function runWithEnvironment(
}
if (env.config.enableFunctionOutlining) {
env.tryRecord(() => {
outlineFunctions(hir, fbtOperands);
});
outlineFunctions(hir, fbtOperands);
log({kind: 'hir', name: 'OutlineFunctions', value: hir});
}
env.tryRecord(() => {
alignMethodCallScopes(hir);
});
alignMethodCallScopes(hir);
log({
kind: 'hir',
name: 'AlignMethodCallScopes',
value: hir,
});
env.tryRecord(() => {
alignObjectMethodScopes(hir);
});
alignObjectMethodScopes(hir);
log({
kind: 'hir',
name: 'AlignObjectMethodScopes',
value: hir,
});
env.tryRecord(() => {
pruneUnusedLabelsHIR(hir);
});
pruneUnusedLabelsHIR(hir);
log({
kind: 'hir',
name: 'PruneUnusedLabelsHIR',
value: hir,
});
env.tryRecord(() => {
alignReactiveScopesToBlockScopesHIR(hir);
});
alignReactiveScopesToBlockScopesHIR(hir);
log({
kind: 'hir',
name: 'AlignReactiveScopesToBlockScopesHIR',
value: hir,
});
env.tryRecord(() => {
mergeOverlappingReactiveScopesHIR(hir);
});
mergeOverlappingReactiveScopesHIR(hir);
log({
kind: 'hir',
name: 'MergeOverlappingReactiveScopesHIR',
@@ -419,9 +382,7 @@ function runWithEnvironment(
});
assertValidBlockNesting(hir);
env.tryRecord(() => {
buildReactiveScopeTerminalsHIR(hir);
});
buildReactiveScopeTerminalsHIR(hir);
log({
kind: 'hir',
name: 'BuildReactiveScopeTerminalsHIR',
@@ -430,18 +391,14 @@ function runWithEnvironment(
assertValidBlockNesting(hir);
env.tryRecord(() => {
flattenReactiveLoopsHIR(hir);
});
flattenReactiveLoopsHIR(hir);
log({
kind: 'hir',
name: 'FlattenReactiveLoopsHIR',
value: hir,
});
env.tryRecord(() => {
flattenScopesWithHooksOrUseHIR(hir);
});
flattenScopesWithHooksOrUseHIR(hir);
log({
kind: 'hir',
name: 'FlattenScopesWithHooksOrUseHIR',
@@ -449,9 +406,7 @@ function runWithEnvironment(
});
assertTerminalSuccessorsExist(hir);
assertTerminalPredsExist(hir);
env.tryRecord(() => {
propagateScopeDependenciesHIR(hir);
});
propagateScopeDependenciesHIR(hir);
log({
kind: 'hir',
name: 'PropagateScopeDependenciesHIR',
@@ -459,9 +414,7 @@ function runWithEnvironment(
});
let reactiveFunction!: ReactiveFunction;
env.tryRecord(() => {
reactiveFunction = buildReactiveFunction(hir);
});
reactiveFunction = buildReactiveFunction(hir);
log({
kind: 'reactive',
name: 'BuildReactiveFunction',
@@ -470,9 +423,7 @@ function runWithEnvironment(
assertWellFormedBreakTargets(reactiveFunction);
env.tryRecord(() => {
pruneUnusedLabels(reactiveFunction);
});
pruneUnusedLabels(reactiveFunction);
log({
kind: 'reactive',
name: 'PruneUnusedLabels',
@@ -480,90 +431,70 @@ function runWithEnvironment(
});
assertScopeInstructionsWithinScopes(reactiveFunction);
env.tryRecord(() => {
pruneNonEscapingScopes(reactiveFunction);
});
pruneNonEscapingScopes(reactiveFunction);
log({
kind: 'reactive',
name: 'PruneNonEscapingScopes',
value: reactiveFunction,
});
env.tryRecord(() => {
pruneNonReactiveDependencies(reactiveFunction);
});
pruneNonReactiveDependencies(reactiveFunction);
log({
kind: 'reactive',
name: 'PruneNonReactiveDependencies',
value: reactiveFunction,
});
env.tryRecord(() => {
pruneUnusedScopes(reactiveFunction);
});
pruneUnusedScopes(reactiveFunction);
log({
kind: 'reactive',
name: 'PruneUnusedScopes',
value: reactiveFunction,
});
env.tryRecord(() => {
mergeReactiveScopesThatInvalidateTogether(reactiveFunction);
});
mergeReactiveScopesThatInvalidateTogether(reactiveFunction);
log({
kind: 'reactive',
name: 'MergeReactiveScopesThatInvalidateTogether',
value: reactiveFunction,
});
env.tryRecord(() => {
pruneAlwaysInvalidatingScopes(reactiveFunction);
});
pruneAlwaysInvalidatingScopes(reactiveFunction);
log({
kind: 'reactive',
name: 'PruneAlwaysInvalidatingScopes',
value: reactiveFunction,
});
env.tryRecord(() => {
propagateEarlyReturns(reactiveFunction);
});
propagateEarlyReturns(reactiveFunction);
log({
kind: 'reactive',
name: 'PropagateEarlyReturns',
value: reactiveFunction,
});
env.tryRecord(() => {
pruneUnusedLValues(reactiveFunction);
});
pruneUnusedLValues(reactiveFunction);
log({
kind: 'reactive',
name: 'PruneUnusedLValues',
value: reactiveFunction,
});
env.tryRecord(() => {
promoteUsedTemporaries(reactiveFunction);
});
promoteUsedTemporaries(reactiveFunction);
log({
kind: 'reactive',
name: 'PromoteUsedTemporaries',
value: reactiveFunction,
});
env.tryRecord(() => {
extractScopeDeclarationsFromDestructuring(reactiveFunction);
});
extractScopeDeclarationsFromDestructuring(reactiveFunction);
log({
kind: 'reactive',
name: 'ExtractScopeDeclarationsFromDestructuring',
value: reactiveFunction,
});
env.tryRecord(() => {
stabilizeBlockIds(reactiveFunction);
});
stabilizeBlockIds(reactiveFunction);
log({
kind: 'reactive',
name: 'StabilizeBlockIds',
@@ -571,43 +502,47 @@ function runWithEnvironment(
});
let uniqueIdentifiers: Set<string> = new Set();
env.tryRecord(() => {
uniqueIdentifiers = renameVariables(reactiveFunction);
});
uniqueIdentifiers = renameVariables(reactiveFunction);
log({
kind: 'reactive',
name: 'RenameVariables',
value: reactiveFunction,
});
env.tryRecord(() => {
pruneHoistedContexts(reactiveFunction);
});
pruneHoistedContexts(reactiveFunction);
log({
kind: 'reactive',
name: 'PruneHoistedContexts',
value: reactiveFunction,
});
if (
env.config.enablePreserveExistingMemoizationGuarantees ||
env.config.validatePreserveExistingMemoizationGuarantees
) {
validatePreservedManualMemoization(reactiveFunction);
env.tryRecord(() => {
validatePreservedManualMemoization(reactiveFunction).unwrap();
});
}
const ast = codegenFunction(reactiveFunction, {
const codegenResult = codegenFunction(reactiveFunction, {
uniqueIdentifiers,
fbtOperands,
});
if (codegenResult.isErr()) {
env.recordErrors(codegenResult.unwrapErr());
return Err(env.aggregateErrors());
}
const ast = codegenResult.unwrap();
log({kind: 'ast', name: 'Codegen', value: ast});
for (const outlined of ast.outlined) {
log({kind: 'ast', name: 'Codegen (outlined)', value: outlined.fn});
}
if (env.config.validateSourceLocations) {
validateSourceLocations(func, ast, env);
env.tryRecord(() => {
validateSourceLocations(func, ast).unwrap();
});
}
/**

View File

@@ -350,9 +350,6 @@ function isFilePartOfSources(
return false;
}
export type CompileProgramMetadata = {
retryErrors: Array<{fn: BabelFn; error: CompilerError}>;
};
/**
* Main entrypoint for React Compiler.
*
@@ -363,7 +360,7 @@ export type CompileProgramMetadata = {
export function compileProgram(
program: NodePath<t.Program>,
pass: CompilerPass,
): CompileProgramMetadata | null {
): void {
/**
* This is directly invoked by the react-compiler babel plugin, so exceptions
* thrown by this function will fail the babel build.
@@ -376,7 +373,7 @@ export function compileProgram(
* the outlined functions.
*/
if (shouldSkipCompilation(program, pass)) {
return null;
return;
}
const restrictedImportsErr = validateRestrictedImports(
program,
@@ -384,7 +381,7 @@ export function compileProgram(
);
if (restrictedImportsErr) {
handleError(restrictedImportsErr, pass, null);
return null;
return;
}
/*
* Record lint errors and critical errors as depending on Forget's config,
@@ -478,15 +475,11 @@ export function compileProgram(
);
handleError(error, programContext, null);
}
return null;
return;
}
// Insert React Compiler generated functions into the Babel AST
applyCompiledFunctions(program, compiledFns, pass, programContext);
return {
retryErrors: programContext.retryErrors,
};
}
type CompileSource = {

View File

@@ -1,162 +0,0 @@
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import {NodePath} from '@babel/core';
import * as t from '@babel/types';
import {CompilerError, EnvironmentConfig, Logger} from '..';
import {getOrInsertWith} from '../Utils/utils';
import {GeneratedSource} from '../HIR';
import {DEFAULT_EXPORT} from '../HIR/Environment';
import {CompileProgramMetadata} from './Program';
export default function validateNoUntransformedReferences(
path: NodePath<t.Program>,
filename: string | null,
logger: Logger | null,
env: EnvironmentConfig,
compileResult: CompileProgramMetadata | null,
): void {
const moduleLoadChecks = new Map<
string,
Map<string, CheckInvalidReferenceFn>
>();
if (moduleLoadChecks.size > 0) {
transformProgram(path, moduleLoadChecks, filename, logger, compileResult);
}
}
type TraversalState = {
shouldInvalidateScopes: boolean;
program: NodePath<t.Program>;
logger: Logger | null;
filename: string | null;
transformErrors: Array<{fn: NodePath<t.Node>; error: CompilerError}>;
};
type CheckInvalidReferenceFn = (
paths: Array<NodePath<t.Node>>,
context: TraversalState,
) => void;
function validateImportSpecifier(
specifier: NodePath<t.ImportSpecifier>,
importSpecifierChecks: Map<string, CheckInvalidReferenceFn>,
state: TraversalState,
): void {
const imported = specifier.get('imported');
const specifierName: string =
imported.node.type === 'Identifier'
? imported.node.name
: imported.node.value;
const checkFn = importSpecifierChecks.get(specifierName);
if (checkFn == null) {
return;
}
if (state.shouldInvalidateScopes) {
state.shouldInvalidateScopes = false;
state.program.scope.crawl();
}
const local = specifier.get('local');
const binding = local.scope.getBinding(local.node.name);
CompilerError.invariant(binding != null, {
reason: 'Expected binding to be found for import specifier',
loc: local.node.loc ?? GeneratedSource,
});
checkFn(binding.referencePaths, state);
}
function validateNamespacedImport(
specifier: NodePath<t.ImportNamespaceSpecifier | t.ImportDefaultSpecifier>,
importSpecifierChecks: Map<string, CheckInvalidReferenceFn>,
state: TraversalState,
): void {
if (state.shouldInvalidateScopes) {
state.shouldInvalidateScopes = false;
state.program.scope.crawl();
}
const local = specifier.get('local');
const binding = local.scope.getBinding(local.node.name);
const defaultCheckFn = importSpecifierChecks.get(DEFAULT_EXPORT);
CompilerError.invariant(binding != null, {
reason: 'Expected binding to be found for import specifier',
loc: local.node.loc ?? GeneratedSource,
});
const filteredReferences = new Map<
CheckInvalidReferenceFn,
Array<NodePath<t.Node>>
>();
for (const reference of binding.referencePaths) {
if (defaultCheckFn != null) {
getOrInsertWith(filteredReferences, defaultCheckFn, () => []).push(
reference,
);
}
const parent = reference.parentPath;
if (
parent != null &&
parent.isMemberExpression() &&
parent.get('object') === reference
) {
if (parent.node.computed || parent.node.property.type !== 'Identifier') {
continue;
}
const checkFn = importSpecifierChecks.get(parent.node.property.name);
if (checkFn != null) {
getOrInsertWith(filteredReferences, checkFn, () => []).push(parent);
}
}
}
for (const [checkFn, references] of filteredReferences) {
checkFn(references, state);
}
}
function transformProgram(
path: NodePath<t.Program>,
moduleLoadChecks: Map<string, Map<string, CheckInvalidReferenceFn>>,
filename: string | null,
logger: Logger | null,
compileResult: CompileProgramMetadata | null,
): void {
const traversalState: TraversalState = {
shouldInvalidateScopes: true,
program: path,
filename,
logger,
transformErrors: compileResult?.retryErrors ?? [],
};
path.traverse({
ImportDeclaration(path: NodePath<t.ImportDeclaration>) {
const importSpecifierChecks = moduleLoadChecks.get(
path.node.source.value,
);
if (importSpecifierChecks == null) {
return;
}
const specifiers = path.get('specifiers');
for (const specifier of specifiers) {
if (specifier.isImportSpecifier()) {
validateImportSpecifier(
specifier,
importSpecifierChecks,
traversalState,
);
} else {
validateNamespacedImport(
specifier as NodePath<
t.ImportNamespaceSpecifier | t.ImportDefaultSpecifier
>,
importSpecifierChecks,
traversalState,
);
}
}
},
});
}

View File

@@ -640,9 +640,6 @@ export class Environment {
case 'ssr': {
return true;
}
case 'client-no-memo': {
return false;
}
default: {
assertExhaustive(
this.outputMode,
@@ -659,8 +656,7 @@ export class Environment {
// linting also enables memoization so that we can check if manual memoization is preserved
return true;
}
case 'ssr':
case 'client-no-memo': {
case 'ssr': {
return false;
}
default: {
@@ -679,9 +675,6 @@ export class Environment {
case 'ssr': {
return true;
}
case 'client-no-memo': {
return false;
}
default: {
assertExhaustive(
this.outputMode,
@@ -741,13 +734,6 @@ export class Environment {
} else {
this.#errors.pushErrorDetail(error);
}
if (this.logger != null) {
this.logger.logEvent(this.filename, {
kind: 'CompileError',
detail: error,
fnLoc: null,
});
}
}
/**

View File

@@ -54,7 +54,7 @@ function lowerWithMutationAliasing(fn: HIRFunction): void {
deadCodeElimination(fn);
const functionEffects = inferMutationAliasingRanges(fn, {
isFunctionExpression: true,
});
}).unwrap();
rewriteInstructionKindsBasedOnReassignment(fn);
inferReactiveScopeVariables(fn);
fn.aliasingEffects = functionEffects;

View File

@@ -45,7 +45,7 @@ import {
eachTerminalOperand,
eachTerminalSuccessor,
} from '../HIR/visitors';
import {Ok, Result} from '../Utils/Result';
import {
assertExhaustive,
getOrInsertDefault,
@@ -100,7 +100,7 @@ export function inferMutationAliasingEffects(
{isFunctionExpression}: {isFunctionExpression: boolean} = {
isFunctionExpression: false,
},
): void {
): Result<void, CompilerError> {
const initialState = InferenceState.empty(fn.env, isFunctionExpression);
// Map of blocks to the last (merged) incoming state that was processed
@@ -220,7 +220,7 @@ export function inferMutationAliasingEffects(
}
}
}
return;
return Ok(undefined);
}
function findHoistedContextDeclarations(

View File

@@ -26,7 +26,7 @@ import {
eachTerminalOperand,
} from '../HIR/visitors';
import {assertExhaustive, getOrInsertWith} from '../Utils/utils';
import {Err, Ok, Result} from '../Utils/Result';
import {AliasingEffect, MutationReason} from './AliasingEffects';
/**
@@ -74,7 +74,7 @@ import {AliasingEffect, MutationReason} from './AliasingEffects';
export function inferMutationAliasingRanges(
fn: HIRFunction,
{isFunctionExpression}: {isFunctionExpression: boolean},
): Array<AliasingEffect> {
): Result<Array<AliasingEffect>, CompilerError> {
// The set of externally-visible effects
const functionEffects: Array<AliasingEffect> = [];
@@ -547,14 +547,10 @@ export function inferMutationAliasingRanges(
}
}
if (
errors.hasAnyErrors() &&
!isFunctionExpression &&
fn.env.enableValidations
) {
fn.env.recordErrors(errors);
if (errors.hasAnyErrors() && !isFunctionExpression) {
return Err(errors);
}
return functionEffects;
return Ok(functionEffects);
}
function appendFunctionErrors(errors: CompilerError, fn: HIRFunction): void {

View File

@@ -46,7 +46,7 @@ import {
} from '../HIR/HIR';
import {printIdentifier, printInstruction, printPlace} from '../HIR/PrintHIR';
import {eachPatternOperand} from '../HIR/visitors';
import {Err, Ok, Result} from '../Utils/Result';
import {GuardKind} from '../Utils/RuntimeDiagnosticConstants';
import {assertExhaustive} from '../Utils/utils';
import {buildReactiveFunction} from './BuildReactiveFunction';
@@ -111,7 +111,7 @@ export function codegenFunction(
uniqueIdentifiers: Set<string>;
fbtOperands: Set<IdentifierId>;
},
): CodegenFunction {
): Result<CodegenFunction, CompilerError> {
const cx = new Context(
fn.env,
fn.id ?? '[[ anonymous ]]',
@@ -141,7 +141,11 @@ export function codegenFunction(
};
}
const compiled = codegenReactiveFunction(cx, fn);
const compileResult = codegenReactiveFunction(cx, fn);
if (compileResult.isErr()) {
return compileResult;
}
const compiled = compileResult.unwrap();
const hookGuard = fn.env.config.enableEmitHookGuards;
if (hookGuard != null && fn.env.outputMode === 'client') {
@@ -269,7 +273,7 @@ export function codegenFunction(
emitInstrumentForget.globalGating,
);
if (assertResult.isErr()) {
fn.env.recordErrors(assertResult.unwrapErr());
return assertResult;
}
}
@@ -319,17 +323,20 @@ export function codegenFunction(
),
reactiveFunction,
);
outlined.push({fn: codegen, type});
if (codegen.isErr()) {
return codegen;
}
outlined.push({fn: codegen.unwrap(), type});
}
compiled.outlined = outlined;
return compiled;
return compileResult;
}
function codegenReactiveFunction(
cx: Context,
fn: ReactiveFunction,
): CodegenFunction {
): Result<CodegenFunction, CompilerError> {
for (const param of fn.params) {
const place = param.kind === 'Identifier' ? param : param.place;
cx.temp.set(place.identifier.declarationId, null);
@@ -348,13 +355,13 @@ function codegenReactiveFunction(
}
if (cx.errors.hasAnyErrors()) {
fn.env.recordErrors(cx.errors);
return Err(cx.errors);
}
const countMemoBlockVisitor = new CountMemoBlockVisitor(fn.env);
visitReactiveFunction(fn, countMemoBlockVisitor, undefined);
return {
return Ok({
type: 'CodegenFunction',
loc: fn.loc,
id: fn.id !== null ? t.identifier(fn.id) : null,
@@ -369,7 +376,7 @@ function codegenReactiveFunction(
prunedMemoBlocks: countMemoBlockVisitor.prunedMemoBlocks,
prunedMemoValues: countMemoBlockVisitor.prunedMemoValues,
outlined: [],
};
});
}
class CountMemoBlockVisitor extends ReactiveFunctionVisitor<void> {
@@ -1658,7 +1665,7 @@ function codegenInstructionValue(
cx.temp,
),
reactiveFunction,
);
).unwrap();
/*
* ObjectMethod builder must be backwards compatible with older versions of babel.
@@ -1857,7 +1864,7 @@ function codegenInstructionValue(
cx.temp,
),
reactiveFunction,
);
).unwrap();
if (instrValue.type === 'ArrowFunctionExpression') {
let body: t.BlockStatement | t.Expression = fn.body;

View File

@@ -5,9 +5,7 @@
* LICENSE file in the root directory of this source tree.
*/
import {CompilerDiagnostic, CompilerError} from '..';
import {ErrorCategory} from '../CompilerError';
import {Environment} from '../HIR/Environment';
import {CompilerError} from '..';
import {HIRFunction, IdentifierId, Place} from '../HIR';
import {printPlace} from '../HIR/PrintHIR';
import {eachInstructionValueLValue, eachPatternOperand} from '../HIR/visitors';
@@ -19,13 +17,12 @@ import {eachInstructionValueLValue, eachPatternOperand} from '../HIR/visitors';
*/
export function validateContextVariableLValues(fn: HIRFunction): void {
const identifierKinds: IdentifierKinds = new Map();
validateContextVariableLValuesImpl(fn, identifierKinds, fn.env);
validateContextVariableLValuesImpl(fn, identifierKinds);
}
function validateContextVariableLValuesImpl(
fn: HIRFunction,
identifierKinds: IdentifierKinds,
env: Environment,
): void {
for (const [, block] of fn.body.blocks) {
for (const instr of block.instructions) {
@@ -33,30 +30,30 @@ function validateContextVariableLValuesImpl(
switch (value.kind) {
case 'DeclareContext':
case 'StoreContext': {
visit(identifierKinds, value.lvalue.place, 'context', env);
visit(identifierKinds, value.lvalue.place, 'context');
break;
}
case 'LoadContext': {
visit(identifierKinds, value.place, 'context', env);
visit(identifierKinds, value.place, 'context');
break;
}
case 'StoreLocal':
case 'DeclareLocal': {
visit(identifierKinds, value.lvalue.place, 'local', env);
visit(identifierKinds, value.lvalue.place, 'local');
break;
}
case 'LoadLocal': {
visit(identifierKinds, value.place, 'local', env);
visit(identifierKinds, value.place, 'local');
break;
}
case 'PostfixUpdate':
case 'PrefixUpdate': {
visit(identifierKinds, value.lvalue, 'local', env);
visit(identifierKinds, value.lvalue, 'local');
break;
}
case 'Destructure': {
for (const lvalue of eachPatternOperand(value.lvalue.pattern)) {
visit(identifierKinds, lvalue, 'destructure', env);
visit(identifierKinds, lvalue, 'destructure');
}
break;
}
@@ -65,24 +62,18 @@ function validateContextVariableLValuesImpl(
validateContextVariableLValuesImpl(
value.loweredFunc.func,
identifierKinds,
env,
);
break;
}
default: {
for (const _ of eachInstructionValueLValue(value)) {
fn.env.recordError(
CompilerDiagnostic.create({
category: ErrorCategory.Todo,
reason:
'ValidateContextVariableLValues: unhandled instruction variant',
description: `Handle '${value.kind} lvalues`,
}).withDetails({
kind: 'error',
loc: value.loc,
message: null,
}),
);
CompilerError.throwTodo({
reason:
'ValidateContextVariableLValues: unhandled instruction variant',
loc: value.loc,
description: `Handle '${value.kind} lvalues`,
suggestions: null,
});
}
}
}
@@ -99,7 +90,6 @@ function visit(
identifiers: IdentifierKinds,
place: Place,
kind: 'local' | 'context' | 'destructure',
env: Environment,
): void {
const prev = identifiers.get(place.identifier.id);
if (prev !== undefined) {
@@ -107,18 +97,12 @@ function visit(
const isContext = kind === 'context';
if (wasContext !== isContext) {
if (prev.kind === 'destructure' || kind === 'destructure') {
env.recordError(
CompilerDiagnostic.create({
category: ErrorCategory.Todo,
reason: `Support destructuring of context variables`,
description: null,
}).withDetails({
kind: 'error',
loc: kind === 'destructure' ? place.loc : prev.place.loc,
message: null,
}),
);
return;
CompilerError.throwTodo({
reason: `Support destructuring of context variables`,
loc: kind === 'destructure' ? place.loc : prev.place.loc,
description: null,
suggestions: null,
});
}
CompilerError.invariant(false, {

View File

@@ -7,7 +7,6 @@
import {CompilerDiagnostic, CompilerError, Effect} from '..';
import {ErrorCategory} from '../CompilerError';
import {Environment} from '../HIR/Environment';
import {HIRFunction, IdentifierId, Place} from '../HIR';
import {
eachInstructionLValue,
@@ -28,15 +27,15 @@ export function validateLocalsNotReassignedAfterRender(fn: HIRFunction): void {
contextVariables,
false,
false,
fn.env,
);
if (reassignment !== null) {
const errors = new CompilerError();
const variable =
reassignment.identifier.name != null &&
reassignment.identifier.name.kind === 'named'
? `\`${reassignment.identifier.name.value}\``
: 'variable';
fn.env.recordError(
errors.pushDiagnostic(
CompilerDiagnostic.create({
category: ErrorCategory.Immutability,
reason: 'Cannot reassign variable after render completes',
@@ -47,6 +46,7 @@ export function validateLocalsNotReassignedAfterRender(fn: HIRFunction): void {
message: `Cannot reassign ${variable} after render completes`,
}),
);
throw errors;
}
}
@@ -55,7 +55,6 @@ function getContextReassignment(
contextVariables: Set<IdentifierId>,
isFunctionExpression: boolean,
isAsync: boolean,
env: Environment,
): Place | null {
const reassigningFunctions = new Map<IdentifierId, Place>();
for (const [, block] of fn.body.blocks) {
@@ -69,7 +68,6 @@ function getContextReassignment(
contextVariables,
true,
isAsync || value.loweredFunc.func.async,
env,
);
if (reassignment === null) {
// If the function itself doesn't reassign, does one of its dependencies?
@@ -86,12 +84,13 @@ function getContextReassignment(
// if the function or its depends reassign, propagate that fact on the lvalue
if (reassignment !== null) {
if (isAsync || value.loweredFunc.func.async) {
const errors = new CompilerError();
const variable =
reassignment.identifier.name !== null &&
reassignment.identifier.name.kind === 'named'
? `\`${reassignment.identifier.name.value}\``
: 'variable';
env.recordError(
errors.pushDiagnostic(
CompilerDiagnostic.create({
category: ErrorCategory.Immutability,
reason: 'Cannot reassign variable in async function',
@@ -103,7 +102,7 @@ function getContextReassignment(
message: `Cannot reassign ${variable}`,
}),
);
return null;
throw errors;
}
reassigningFunctions.set(lvalue.identifier.id, reassignment);
}

View File

@@ -97,8 +97,8 @@ export function validateNoDerivedComputationsInEffects(fn: HIRFunction): void {
}
}
}
for (const detail of errors.details) {
fn.env.recordError(detail);
if (errors.hasAnyErrors()) {
throw errors;
}
}

View File

@@ -37,6 +37,7 @@ import {
ReactiveFunctionVisitor,
visitReactiveFunction,
} from '../ReactiveScopes/visitors';
import {Result} from '../Utils/Result';
import {getOrInsertDefault} from '../Utils/utils';
/**
@@ -46,15 +47,15 @@ import {getOrInsertDefault} from '../Utils/utils';
* This can occur if a value's mutable range somehow extended to include a hook and
* was pruned.
*/
export function validatePreservedManualMemoization(fn: ReactiveFunction): void {
export function validatePreservedManualMemoization(
fn: ReactiveFunction,
): Result<void, CompilerError> {
const state = {
errors: new CompilerError(),
manualMemoState: null,
};
visitReactiveFunction(fn, new Visitor(), state);
for (const detail of state.errors.details) {
fn.env.recordError(detail);
}
return state.errors.asResult();
}
const DEBUG = false;

View File

@@ -9,7 +9,7 @@ import {NodePath} from '@babel/traverse';
import * as t from '@babel/types';
import {CompilerDiagnostic, CompilerError, ErrorCategory} from '..';
import {CodegenFunction} from '../ReactiveScopes';
import {Environment} from '../HIR/Environment';
import {Result} from '../Utils/Result';
/**
* IMPORTANT: This validation is only intended for use in unit tests.
@@ -123,8 +123,7 @@ export function validateSourceLocations(
t.FunctionDeclaration | t.ArrowFunctionExpression | t.FunctionExpression
>,
generatedAst: CodegenFunction,
env: Environment,
): void {
): Result<void, CompilerError> {
const errors = new CompilerError();
/*
@@ -310,7 +309,5 @@ export function validateSourceLocations(
}
}
for (const detail of errors.details) {
env.recordError(detail);
}
return errors.asResult();
}

View File

@@ -21,15 +21,15 @@ export const FIXTURE_ENTRYPOINT = {
```
Found 1 error:
Invariant: [InferMutationAliasingEffects] Expected value kind to be initialized
Todo: [hoisting] EnterSSA: Expected identifier to be defined before being used
<unknown> x$1.
Identifier x$1 is undefined.
error.dont-hoist-inline-reference.ts:3:21
error.dont-hoist-inline-reference.ts:3:2
1 | import {identity} from 'shared-runtime';
2 | function useInvalid() {
> 3 | const x = identity(x);
| ^ this is uninitialized
| ^^^^^^^^^^^^^^^^^^^^^^ [hoisting] EnterSSA: Expected identifier to be defined before being used
4 | return x;
5 | }
6 |

View File

@@ -17,7 +17,7 @@ function Component() {
## Error
```
Found 6 errors:
Found 3 errors:
Error: Cannot call impure function during render
@@ -57,45 +57,6 @@ error.invalid-impure-functions-in-render.ts:6:15
7 | return <Foo date={date} now={now} rand={rand} />;
8 | }
9 |
Error: Cannot call impure function during render
`Date.now` is an impure function. Calling an impure function can produce unstable results that update unpredictably when the component happens to re-render. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent).
error.invalid-impure-functions-in-render.ts:4:15
2 |
3 | function Component() {
> 4 | const date = Date.now();
| ^^^^^^^^ Cannot call impure function
5 | const now = performance.now();
6 | const rand = Math.random();
7 | return <Foo date={date} now={now} rand={rand} />;
Error: Cannot call impure function during render
`performance.now` is an impure function. Calling an impure function can produce unstable results that update unpredictably when the component happens to re-render. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent).
error.invalid-impure-functions-in-render.ts:5:14
3 | function Component() {
4 | const date = Date.now();
> 5 | const now = performance.now();
| ^^^^^^^^^^^^^^^ Cannot call impure function
6 | const rand = Math.random();
7 | return <Foo date={date} now={now} rand={rand} />;
8 | }
Error: Cannot call impure function during render
`Math.random` is an impure function. Calling an impure function can produce unstable results that update unpredictably when the component happens to re-render. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent).
error.invalid-impure-functions-in-render.ts:6:15
4 | const date = Date.now();
5 | const now = performance.now();
> 6 | const rand = Math.random();
| ^^^^^^^^^^^ Cannot call impure function
7 | return <Foo date={date} now={now} rand={rand} />;
8 | }
9 |
```

View File

@@ -21,7 +21,7 @@ function Component({foo}) {
## Error
```
Found 3 errors:
Found 2 errors:
Todo: Support destructuring of context variables
@@ -29,18 +29,7 @@ error.todo-reassign-const.ts:3:20
1 | import {Stringify} from 'shared-runtime';
2 |
> 3 | function Component({foo}) {
| ^^^
4 | let bar = foo.bar;
5 | return (
6 | <Stringify
Todo: Support destructuring of context variables
error.todo-reassign-const.ts:3:20
1 | import {Stringify} from 'shared-runtime';
2 |
> 3 | function Component({foo}) {
| ^^^
| ^^^ Support destructuring of context variables
4 | let bar = foo.bar;
5 | return (
6 | <Stringify

View File

@@ -58,7 +58,6 @@ export const FIXTURE_ENTRYPOINT = {
## Logs
```
{"kind":"CompileError","detail":{"options":{"category":"PreserveManualMemo","reason":"Existing memoization could not be preserved","description":"React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. The inferred dependencies did not match the manually specified dependencies, which could cause the value to change more or less frequently than expected. The inferred dependency was `value`, but the source dependencies were []. Inferred dependency not present in source","suggestions":null,"details":[{"kind":"error","loc":{"start":{"line":9,"column":31,"index":337},"end":{"line":9,"column":52,"index":358},"filename":"dynamic-gating-bailout-nopanic.ts"},"message":"Could not preserve existing manual memoization"}]}},"fnLoc":null}
{"kind":"CompileError","fnLoc":{"start":{"line":6,"column":0,"index":255},"end":{"line":16,"column":1,"index":482},"filename":"dynamic-gating-bailout-nopanic.ts"},"detail":{"options":{"category":"PreserveManualMemo","reason":"Existing memoization could not be preserved","description":"React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. The inferred dependencies did not match the manually specified dependencies, which could cause the value to change more or less frequently than expected. The inferred dependency was `value`, but the source dependencies were []. Inferred dependency not present in source","suggestions":null,"details":[{"kind":"error","loc":{"start":{"line":9,"column":31,"index":337},"end":{"line":9,"column":52,"index":358},"filename":"dynamic-gating-bailout-nopanic.ts"},"message":"Could not preserve existing manual memoization"}]}}}
```

View File

@@ -17,7 +17,7 @@ function Component() {
## Error
```
Found 6 errors:
Found 3 errors:
Error: Cannot call impure function during render
@@ -57,45 +57,6 @@ error.invalid-impure-functions-in-render.ts:6:15
7 | return <Foo date={date} now={now} rand={rand} />;
8 | }
9 |
Error: Cannot call impure function during render
`Date.now` is an impure function. Calling an impure function can produce unstable results that update unpredictably when the component happens to re-render. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent).
error.invalid-impure-functions-in-render.ts:4:15
2 |
3 | function Component() {
> 4 | const date = Date.now();
| ^^^^^^^^ Cannot call impure function
5 | const now = performance.now();
6 | const rand = Math.random();
7 | return <Foo date={date} now={now} rand={rand} />;
Error: Cannot call impure function during render
`performance.now` is an impure function. Calling an impure function can produce unstable results that update unpredictably when the component happens to re-render. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent).
error.invalid-impure-functions-in-render.ts:5:14
3 | function Component() {
4 | const date = Date.now();
> 5 | const now = performance.now();
| ^^^^^^^^^^^^^^^ Cannot call impure function
6 | const rand = Math.random();
7 | return <Foo date={date} now={now} rand={rand} />;
8 | }
Error: Cannot call impure function during render
`Math.random` is an impure function. Calling an impure function can produce unstable results that update unpredictably when the component happens to re-render. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent).
error.invalid-impure-functions-in-render.ts:6:15
4 | const date = Date.now();
5 | const now = performance.now();
> 6 | const rand = Math.random();
| ^^^^^^^^^^^ Cannot call impure function
7 | return <Foo date={date} now={now} rand={rand} />;
8 | }
9 |
```

View File

@@ -64,6 +64,9 @@ testRule(
makeTestCaseError(
'Capitalized functions are reserved for components',
),
makeTestCaseError(
'Capitalized functions are reserved for components',
),
],
},
],

View File

@@ -57,7 +57,6 @@ testRule('plugin-recommended', TestRecommendedRules, {
],
invalid: [
{
// TODO: actually return multiple diagnostics in this case
name: 'Multiple diagnostic kinds from the same function are surfaced',
code: normalizeIndent`
import Child from './Child';
@@ -70,6 +69,7 @@ testRule('plugin-recommended', TestRecommendedRules, {
`,
errors: [
makeTestCaseError('Hooks must always be called in a consistent order'),
makeTestCaseError('Capitalized functions are reserved for components'),
],
},
{
@@ -128,6 +128,7 @@ testRule('plugin-recommended', TestRecommendedRules, {
makeTestCaseError(
'Calling setState from useMemo may trigger an infinite loop',
),
makeTestCaseError('Found extra memoization dependencies'),
],
},
],

View File

@@ -3991,9 +3991,23 @@ function attemptEarlyBailoutIfNoScheduledUpdate(
// whether to retry the primary children, or to skip over it and
// go straight to the fallback. Check the priority of the primary
// child fragment.
//
// Propagate context changes first. If a parent context changed
// and the primary children's consumer fibers were discarded
// during initial mount suspension, normal propagation can't find
// them. In that case we conservatively retry the boundary — the
// re-mounted children will read the updated context value.
const contextChanged = lazilyPropagateParentContextChanges(
current,
workInProgress,
renderLanes,
);
const primaryChildFragment: Fiber = (workInProgress.child: any);
const primaryChildLanes = primaryChildFragment.childLanes;
if (includesSomeLane(renderLanes, primaryChildLanes)) {
if (
contextChanged ||
includesSomeLane(renderLanes, primaryChildLanes)
) {
// The primary children have pending work. Use the normal path
// to attempt to render the primary children again.
return updateSuspenseComponent(current, workInProgress, renderLanes);

View File

@@ -20,7 +20,11 @@ import type {Hook} from './ReactFiberHooks';
import {isPrimaryRenderer, HostTransitionContext} from './ReactFiberConfig';
import {createCursor, push, pop} from './ReactFiberStack';
import {ContextProvider, DehydratedFragment} from './ReactWorkTags';
import {
ContextProvider,
DehydratedFragment,
SuspenseComponent,
} from './ReactWorkTags';
import {NoLanes, isSubsetOfLanes, mergeLanes} from './ReactFiberLane';
import {
NoFlags,
@@ -295,6 +299,37 @@ function propagateContextChanges<T>(
workInProgress,
);
nextFiber = null;
} else if (
fiber.tag === SuspenseComponent &&
fiber.memoizedState !== null &&
fiber.memoizedState.dehydrated === null
) {
// This is a client-rendered Suspense boundary that is currently
// showing its fallback. The primary children may include context
// consumers, but their fibers may not exist in the tree — during
// initial mount, if the primary children suspended, their fibers
// were discarded since there was no current tree to preserve them.
// We can't walk into the primary tree to find consumers, so
// conservatively mark the Suspense boundary itself for retry.
// When it re-renders, it will re-mount the primary children,
// which will read the updated context value.
fiber.lanes = mergeLanes(fiber.lanes, renderLanes);
const alternate = fiber.alternate;
if (alternate !== null) {
alternate.lanes = mergeLanes(alternate.lanes, renderLanes);
}
scheduleContextWorkOnParentPath(
fiber.return,
renderLanes,
workInProgress,
);
if (!forcePropagateEntireTree) {
// During lazy propagation, we can defer propagating changes to
// the children, same as the consumer match above.
nextFiber = null;
} else {
nextFiber = fiber.child;
}
} else {
// Traverse down.
nextFiber = fiber.child;
@@ -331,9 +366,9 @@ export function lazilyPropagateParentContextChanges(
current: Fiber,
workInProgress: Fiber,
renderLanes: Lanes,
) {
): boolean {
const forcePropagateEntireTree = false;
propagateParentContextChanges(
return propagateParentContextChanges(
current,
workInProgress,
renderLanes,
@@ -364,7 +399,7 @@ function propagateParentContextChanges(
workInProgress: Fiber,
renderLanes: Lanes,
forcePropagateEntireTree: boolean,
) {
): boolean {
// Collect all the parent providers that changed. Since this is usually small
// number, we use an Array instead of Set.
let contexts = null;
@@ -460,6 +495,7 @@ function propagateParentContextChanges(
// then we could remove both `DidPropagateContext` and `NeedsPropagation`.
// Consider this as part of the next refactor to the fiber tree structure.
workInProgress.flags |= DidPropagateContext;
return contexts !== null;
}
export function checkIfContextChanged(

View File

@@ -2,6 +2,7 @@ let React;
let ReactNoop;
let Scheduler;
let act;
let use;
let useState;
let useContext;
let Suspense;
@@ -19,6 +20,7 @@ describe('ReactLazyContextPropagation', () => {
ReactNoop = require('react-noop-renderer');
Scheduler = require('scheduler');
act = require('internal-test-utils').act;
use = React.use;
useState = React.useState;
useContext = React.useContext;
Suspense = React.Suspense;
@@ -937,4 +939,102 @@ describe('ReactLazyContextPropagation', () => {
assertLog(['B', 'B']);
expect(root).toMatchRenderedOutput('BB');
});
it('regression: context change triggers retry of suspended Suspense boundary on initial mount', async () => {
// Regression test for a bug where a context change above a suspended
// Suspense boundary would fail to trigger a retry. When a Suspense
// boundary suspends during initial mount, the primary children's fibers
// are discarded because there is no current tree to preserve them. If
// the suspended promise never resolves, the only way to retry is
// something external — like a context change. Context propagation must
// mark suspended Suspense boundaries for retry even though the consumer
// fibers no longer exist in the tree.
//
// The Provider component owns the state update. The children are
// passed in from above, so they are not re-created when the Provider
// re-renders — this means the Suspense boundary bails out, exercising
// the lazy context propagation path where the bug manifests.
const Context = React.createContext(null);
const neverResolvingPromise = new Promise(() => {});
const resolvedThenable = {status: 'fulfilled', value: 'Result', then() {}};
function Consumer() {
return <Text text={use(use(Context))} />;
}
let setPromise;
function Provider({children}) {
const [promise, _setPromise] = useState(neverResolvingPromise);
setPromise = _setPromise;
return <Context.Provider value={promise}>{children}</Context.Provider>;
}
const root = ReactNoop.createRoot();
await act(() => {
root.render(
<Provider>
<Suspense fallback={<Text text="Loading" />}>
<Consumer />
</Suspense>
</Provider>,
);
});
assertLog(['Loading']);
expect(root).toMatchRenderedOutput('Loading');
await act(() => {
setPromise(resolvedThenable);
});
assertLog(['Result']);
expect(root).toMatchRenderedOutput('Result');
});
it('regression: context change triggers retry of suspended Suspense boundary on initial mount (nested)', async () => {
// Same as above, but with an additional indirection component between
// the provider and the Suspense boundary. This exercises the
// propagateContextChanges walker path rather than the
// propagateParentContextChanges path.
const Context = React.createContext(null);
const neverResolvingPromise = new Promise(() => {});
const resolvedThenable = {status: 'fulfilled', value: 'Result', then() {}};
function Consumer() {
return <Text text={use(use(Context))} />;
}
function Indirection({children}) {
Scheduler.log('Indirection');
return children;
}
let setPromise;
function Provider({children}) {
const [promise, _setPromise] = useState(neverResolvingPromise);
setPromise = _setPromise;
return <Context.Provider value={promise}>{children}</Context.Provider>;
}
const root = ReactNoop.createRoot();
await act(() => {
root.render(
<Provider>
<Indirection>
<Suspense fallback={<Text text="Loading" />}>
<Consumer />
</Suspense>
</Indirection>
</Provider>,
);
});
assertLog(['Indirection', 'Loading']);
expect(root).toMatchRenderedOutput('Loading');
// Indirection should not re-render — only the Suspense boundary
// should be retried.
await act(() => {
setPromise(resolvedThenable);
});
assertLog(['Result']);
expect(root).toMatchRenderedOutput('Result');
});
});