fix(docs): correct typos found during code review

compiler/docs/DESIGN_GOALS.md

@@ -19,7 +19,7 @@ The idea of React Compiler is to allow developers to use React's familiar declar
 The following are explicitly *not* goals for React Compiler:
 
 * Provide perfectly optimal re-rendering with zero unnecessary recomputation. This is a non-goal for several reasons:
-  * The runtime overhead of the extra tracking involved can outweight the cost of recomputation in many cases.
+  * The runtime overhead of the extra tracking involved can outweigh the cost of recomputation in many cases.
   * In cases with conditional dependencies it may not be possible to avoid recomputing some/all instructions.
   * The amount of code may regress startup times, which would conflict with our goal of neutral startup performance.
 * Support code that violates React's rules. React's rules exist to help developers build robust, scalable applications and form a contract that allows us to continue improving React without breaking applications. React Compiler depends on these rules to safely transform code, and violations of rules will therefore break React Compiler's optimizations.

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

@@ -28,7 +28,7 @@ function hasModule(name: string): boolean {
 
 /**
  * Tries to detect if reanimated is installed by first looking for the presence of the babel plugin.
- * However, babel-preset-expo includes it by default so it is occasionally ommitted. If so, we do
+ * However, babel-preset-expo includes it by default so it is occasionally omitted. If so, we do
  * a check to see if `react-native-animated` is requireable.
  *
  * See https://github.com/expo/expo/blob/e4b8d86442482c7316365a6b7ec1141eec73409d/packages/babel-preset-expo/src/index.ts#L300-L301

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

@@ -980,7 +980,7 @@ function lowerStatement(
       const conditionalBlock = builder.reserve('loop');
       //  Block for code following the loop
       const continuationBlock = builder.reserve('block');
-      //  Loop body, executed at least once uncondtionally prior to exit
+      //  Loop body, executed at least once unconditionally prior to exit
       const loopBlock = builder.enter('block', _loopBlockId => {
         return builder.loop(
           label,

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

@@ -229,7 +229,7 @@ export const EnvironmentConfigSchema = z.object({
 
   /**
    * Enable use of type annotations in the source to drive type inference. By default
-   * Forget attemps to infer types using only information that is guaranteed correct
+   * Forget attempts to infer types using only information that is guaranteed correct
    * given the source, and does not trust user-supplied type annotations. This mode
    * enables trusting user type annotations.
    */
@@ -292,7 +292,7 @@ export const EnvironmentConfigSchema = z.object({
    * An alternative to the standard JSX transform which replaces JSX with React's jsxProd() runtime
    * Currently a prod-only optimization, requiring Fast JSX dependencies
    *
-   * The symbol configuration is set for backwards compatability with pre-React 19 transforms
+   * The symbol configuration is set for backwards compatibility with pre-React 19 transforms
    */
   inlineJsxTransform: ReactElementSymbolSchema.nullable().default(null),
 
@@ -549,7 +549,7 @@ export const EnvironmentConfigSchema = z.object({
    * makes sure we don't load a dep when it's a property (to check if it has
    * changed) and instead check the receiver.
    *
-   * This makes sure we don't end up throwing when the reciver is null. Consider
+   * This makes sure we don't end up throwing when the receiver is null. Consider
    * this code:
    *
    * ```

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

@@ -919,7 +919,7 @@ TYPED_GLOBALS.push(
         'createRef',
         addFunction(DEFAULT_SHAPES, [], {
           positionalParams: [],
-          restParam: Effect.Capture, // createRef takes no paramters
+          restParam: Effect.Capture, // createRef takes no parameters
           returnType: {kind: 'Object', shapeId: BuiltInUseRefId},
           calleeEffect: Effect.Read,
           returnValueKind: ValueKind.Mutable,

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

@@ -741,7 +741,7 @@ export enum InstructionKind {
   Const = 'Const',
   // let declaration
   Let = 'Let',
-  // assing a new value to a let binding
+  // assign a new value to a let binding
   Reassign = 'Reassign',
   // catch clause binding
   Catch = 'Catch',
@@ -1216,7 +1216,7 @@ export type MutableRange = {
 export type VariableBinding =
   // let, const, etc declared within the current component/hook
   | {kind: 'Identifier'; identifier: Identifier; bindingKind: BindingKind}
-  // bindings declard outside the current component/hook
+  // bindings declared outside the current component/hook
   | NonLocalBinding;
 
 // `import {bar as baz} from 'foo'`: name=baz, module=foo, imported=bar

compiler/packages/babel-plugin-react-compiler/src/Inference/AliasingEffects.ts

@@ -36,7 +36,7 @@ export type AliasingEffect =
    * For example:
    * const x = {};
    * const y = [x];
-   * y.pop(); // y dosn't contain x anymore!
+   * y.pop(); // y doesn't contain x anymore!
    * freeze(y);
    * mutate(x); // safe to mutate!
    *
@@ -164,7 +164,7 @@ export type AliasingEffect =
    */
   | {kind: 'Impure'; place: Place; error: CompilerDiagnostic}
   /**
-   * Indicates that a given place is accessed during render. Used to distingush
+   * Indicates that a given place is accessed during render. Used to distinguish
    * hook arguments that are known to be called immediately vs those used for
    * event handlers/effects, and for JSX values known to be called during render
    * (tags, children) vs those that may be events/effect (other props).

compiler/packages/babel-plugin-react-compiler/src/Inference/InferMutationAliasingEffects.ts

@@ -90,7 +90,7 @@ const DEBUG = false;
  * - Then we do abstract interpretation over the HIR, iterating until reaching a fixpoint.
  *   This phase tracks the abstract kind of each value (mutable, primitive, frozen, etc)
  *   and the set of values pointed to by each identifier. Each candidate effect is "applied"
- *   to the current abtract state, and effects may be dropped or rewritten accordingly.
+ *   to the current abstract state, and effects may be dropped or rewritten accordingly.
  *   For example, a "MutateConditionally <x>" effect may be dropped if x is not a mutable
  *   value. A "Mutate <y>" effect may get converted into a "MutateFrozen <error>" effect
  *   if y is mutable, etc.
@@ -527,7 +527,7 @@ function inferBlock(
     if (handlerParam != null) {
       CompilerError.invariant(state.kind(handlerParam) != null, {
         reason:
-          'Expected catch binding to be intialized with a DeclareLocal Catch instruction',
+          'Expected catch binding to be initialized with a DeclareLocal Catch instruction',
         description: null,
         details: [
           {
@@ -1373,7 +1373,7 @@ class InferenceState {
   #values: Map<InstructionValue, AbstractValue>;
   /*
    * The set of values pointed to by each identifier. This is a set
-   * to accomodate phi points (where a variable may have different
+   * to accommodate phi points (where a variable may have different
    * values from different control flow paths).
    */
   #variables: Map<IdentifierId, Set<InstructionValue>>;

compiler/packages/babel-plugin-react-compiler/src/Inference/MUTABILITY_ALIASING_MODEL.md

@@ -24,7 +24,7 @@ The goal of mutability and aliasing inference is to understand the set of instru
 
 In code, the mutability and aliasing model is compromised of the following phases:
 
-* `InferMutationAliasingEffects`. Infers a set of mutation and aliasing effects for each instruction. The approach is to generate a set of candidate effects based purely on the semantics of each instruction and the types of the operands, then use abstract interpretation to determine the actual effects (or errros) that would apply. For example, an instruction that by default has a Capture effect might downgrade to an ImmutableCapture effect if the value is known to be frozen.
+* `InferMutationAliasingEffects`. Infers a set of mutation and aliasing effects for each instruction. The approach is to generate a set of candidate effects based purely on the semantics of each instruction and the types of the operands, then use abstract interpretation to determine the actual effects (or errors) that would apply. For example, an instruction that by default has a Capture effect might downgrade to an ImmutableCapture effect if the value is known to be frozen.
 * `InferMutationAliasingRanges`. Infers a mutable range (start:end instruction ids) for each value in the program, and annotates each Place with its effect type for usage in later passes. This builds a graph of data flow through the program over time in order to understand which mutations effect which values.
 * `InferReactiveScopeVariables`. Given the per-Place effects, determines disjoint sets of values that mutate together and assigns all identifiers in each set to a unique scope, and updates the range to include the ranges of all constituent values.
 
@@ -69,7 +69,7 @@ Describes the creation of new function value, capturing the given set of mutable
     kind: 'Apply';
     receiver: Place;
     function: Place; // same as receiver for function calls
-    mutatesFunction: boolean; // indicates if this is a type that we consdier to mutate the function itself by default
+    mutatesFunction: boolean; // indicates if this is a type that we consider to mutate the function itself by default
     args: Array<Place | SpreadPattern | Hole>;
     into: Place; // where result is stored
     signature: FunctionSignature | null;

compiler/packages/babel-plugin-react-compiler/src/Optimization/ConstantPropagation.ts

@@ -168,7 +168,7 @@ function evaluatePhi(phi: Phi, constants: Constants): Constant | null {
   let value: Constant | null = null;
   for (const [, operand] of phi.operands) {
     const operandValue = constants.get(operand.identifier.id) ?? null;
-    // did not find a constant, can't constant propogate
+    // did not find a constant, can't constant propagate
     if (operandValue === null) {
       return null;
     }
@@ -182,7 +182,7 @@ function evaluatePhi(phi: Phi, constants: Constants): Constant | null {
       continue;
     }
 
-    // found different kinds of constants, can't constant propogate
+    // found different kinds of constants, can't constant propagate
     if (operandValue.kind !== value.kind) {
       return null;
     }
@@ -202,7 +202,7 @@ function evaluatePhi(phi: Phi, constants: Constants): Constant | null {
           suggestions: null,
         });
 
-        // different constant values, can't constant propogate
+        // different constant values, can't constant propagate
         if (operandValue.value !== value.value) {
           return null;
         }
@@ -222,7 +222,7 @@ function evaluatePhi(phi: Phi, constants: Constants): Constant | null {
           suggestions: null,
         });
 
-        // different global values, can't constant propogate
+        // different global values, can't constant propagate
         if (operandValue.binding.name !== value.binding.name) {
           return null;
         }

compiler/packages/babel-plugin-react-compiler/src/Optimization/DeadCodeElimination.ts

@@ -81,7 +81,7 @@ class State {
 
   /*
    * Check if any version of the given identifier is used somewhere.
-   * This checks both for usage of this specific identifer id (ssa id)
+   * This checks both for usage of this specific identifier id (ssa id)
    * and (for named identifiers) for any usages of that identifier name.
    */
   isIdOrNameUsed(identifier: Identifier): boolean {
@@ -379,7 +379,7 @@ function pruneableValue(value: InstructionValue, state: State): boolean {
     default: {
       assertExhaustive(
         value,
-        `Unexepcted value kind \`${(value as any).kind}\``,
+        `Unexpected value kind \`${(value as any).kind}\``,
       );
     }
   }

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

@@ -1019,7 +1019,7 @@ class Driver {
           /*
            * Value blocks generally end in a StoreLocal to assign the value of the
            * expression for this branch. These StoreLocal instructions can be pruned,
-           * since we represent the value blocks as a compund value in ReactiveFunction
+           * since we represent the value blocks as a compound value in ReactiveFunction
            * (no phis). However, it's also possible to have a value block that ends in
            * an AssignmentExpression, which we need to keep. So we only prune
            * StoreLocal for temporaries — any named/promoted values must be used
@@ -1049,7 +1049,7 @@ class Driver {
           /*
            * Value blocks generally end in a StoreLocal to assign the value of the
            * expression for this branch. These StoreLocal instructions can be pruned,
-           * since we represent the value blocks as a compund value in ReactiveFunction
+           * since we represent the value blocks as a compound value in ReactiveFunction
            * (no phis). However, it's also possible to have a value block that ends in
            * an AssignmentExpression, which we need to keep. So we only prune
            * StoreLocal for temporaries — any named/promoted values must be used

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

@@ -133,7 +133,7 @@ export function codegenFunction(
 
   /**
    * Fast Refresh reuses component instances at runtime even as the source of the component changes.
-   * The generated code needs to prevent values from one version of the code being reused after a code cange.
+   * The generated code needs to prevent values from one version of the code being reused after a code change.
    * If HMR detection is enabled and we know the source code of the component, assign a cache slot to track
    * the source hash, and later, emit code to check for source changes and reset the cache on source changes.
    */

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

@@ -143,7 +143,7 @@ export function inferReactiveScopeVariables(fn: HIRFunction): void {
   }
 
   /*
-   * Validate that all scopes have properly intialized, valid mutable ranges
+   * Validate that all scopes have properly initialized, valid mutable ranges
    * within the span of instructions for this function, ie from 1 to 1 past
    * the last instruction id.
    */

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

@@ -66,7 +66,7 @@ import {
  *    those dependencies.
  * - The output of A is the input to B. Any invalidation of A will change its output
  *    which invalidates B, so we can similarly merge scopes. Note that this optimization
- *    may not be beneficial if the outupts of A are not guaranteed to change if its input
+ *    may not be beneficial if the outputs of A are not guaranteed to change if its input
  *    changes, but in practice this is generally the case.
  *
  * ## Nested Scopes
@@ -77,7 +77,7 @@ import {
  * Note that PropagateScopeDependencies propagates scope dependencies upwards. This ensures
  * that parent scopes have the union of their own direct dependencies as well as those of
  * their (transitive) children. As a result nested scopes may have the same or fewer
- * dependencies than their parents, but not more dependencies. If they have fewer dependncies,
+ * dependencies than their parents, but not more dependencies. If they have fewer dependencies,
  * it means that the inner scope does not always invalidate with the parent and we should not
  * flatten. If they inner scope has the exact same dependencies, however, then it's always
  * better to flatten.

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

@@ -1064,7 +1064,7 @@ class PruneScopesTransform extends ReactiveFunctionTransform<
 
     /**
      * Scopes may initially appear "empty" because the value being memoized
-     * is early-returned from within the scope. For now we intentionaly keep
+     * is early-returned from within the scope. For now we intentionally keep
      * these scopes, and let them get pruned later by PruneUnusedScopes
      * _after_ handling the early-return case in PropagateEarlyReturns.
      *

compiler/packages/babel-plugin-react-compiler/src/SSA/EnterSSA.ts

@@ -146,7 +146,7 @@ class SSABuilder {
 
     if (block.preds.size == 0) {
       /*
-       * We're at the entry block and haven't found our defintion yet.
+       * We're at the entry block and haven't found our definition yet.
        * console.log(
        *   `Unable to find "${printPlace(
        *     oldPlace

compiler/packages/babel-plugin-react-compiler/src/Utils/Keyword.ts

@@ -75,7 +75,7 @@ const STRICT_MODE_RESERVED_WORDS = new Set([
 const STRICT_MODE_RESTRICTED_WORDS = new Set(['eval', 'arguments']);
 
 /**
- * Conservative check for whether an identifer name is reserved or not. We assume that code is
+ * Conservative check for whether an identifier name is reserved or not. We assume that code is
  * written with strict mode.
  */
 export function isReservedWord(identifierName: string): boolean {

compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateHooksUsage.ts

@@ -118,7 +118,7 @@ export function validateHooksUsage(
 
     /*
      * In some circumstances such as optional calls, we may first encounter a "hook may not be referenced as normal values" error.
-     * If that same place is also used as a conditional call, upgrade the error to a conditonal hook error
+     * If that same place is also used as a conditional call, upgrade the error to a conditional hook error
      */
     if (previousError === undefined || previousError.reason !== reason) {
       recordError(

compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoSetStateInRender.ts

@@ -88,7 +88,7 @@ function validateNoSetStateInRenderImpl(
                 isSetStateType(operand.identifier) ||
                 unconditionalSetStateFunctions.has(operand.identifier.id),
             ) &&
-            // if yes, does it unconditonally call it?
+            // if yes, does it unconditionally call it?
             validateNoSetStateInRenderImpl(
               instr.value.loweredFunc.func,
               unconditionalSetStateFunctions,

compiler/packages/babel-plugin-react-compiler/src/__tests__/Logger-test.ts

@@ -10,7 +10,7 @@ import invariant from 'invariant';
 import {runBabelPluginReactCompiler} from '../Babel/RunReactCompilerBabelPlugin';
 import type {Logger, LoggerEvent} from '../Entrypoint';
 
-it('logs succesful compilation', () => {
+it('logs successful compilation', () => {
   const logs: [string | null, LoggerEvent][] = [];
   const logger: Logger = {
     logEvent(filename, event) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.validate-mutate-ref-arg-in-render.expect.md

@@ -10,7 +10,7 @@ function Foo(props, ref) {
 
 export const FIXTURE_ENTRYPOINT = {
   fn: Foo,
-  params: [{bar: 'foo'}, {ref: {cuurrent: 1}}],
+  params: [{bar: 'foo'}, {ref: {current: 1}}],
   isComponent: true,
 };
 

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.validate-mutate-ref-arg-in-render.js

@@ -6,6 +6,6 @@ function Foo(props, ref) {
 
 export const FIXTURE_ENTRYPOINT = {
   fn: Foo,
-  params: [{bar: 'foo'}, {ref: {cuurrent: 1}}],
+  params: [{bar: 'foo'}, {ref: {current: 1}}],
   isComponent: true,
 };

compiler/packages/react-forgive/client/src/colors.ts

@@ -40,7 +40,7 @@ export class Color {
     return `rgba(${this.r},${this.g},${this.b},${a})`;
   }
   /**
-   * Redistributes rgb, maintaing hue until its clamped.
+   * Redistributes rgb, maintaining hue until its clamped.
    * https://stackoverflow.com/a/141943
    */
   private static redistribute([r, g, b]: RGB): RGB {

compiler/packages/react-mcp-server/src/index.ts

@@ -377,7 +377,7 @@ server.tool(
   <requirements>
   - The url should be a full url with the protocol (http:// or https://) and the domain name (e.g. localhost:3000).
   - Also the user should be running a Chrome browser running on debug mode on port 9222. If you receive an error message, advise the user to run
-  the following comand in the terminal:
+  the following command in the terminal:
   MacOS: "/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome"
   Windows: "chrome.exe --remote-debugging-port=9222 --user-data-dir=C:\temp\chrome"
   </requirements>

fixtures/nesting/src/legacy/createLegacyRoot.js

@@ -17,7 +17,7 @@ function Bridge({children, context}) {
       <__RouterContext.Provider value={context.router}>
         {/*
           If we used the newer [email protected] in the legacy/package.json,
-          we woud instead import {ReactReduxContext} from 'react-redux'
+          we would instead import {ReactReduxContext} from 'react-redux'
           and render <ReactReduxContext.Provider value={context.reactRedux}>.
         */}
         <Provider store={context.reactRedux.store}>{children}</Provider>

flow-typed/environments/dom.js

@@ -643,7 +643,7 @@ declare class Event {
   preventDefault(): void;
   /**
    * Returns true if preventDefault() was invoked successfully to indicate
-   * cancelation, and false otherwise.
+   * cancellation, and false otherwise.
    */
   +defaultPrevented: boolean;
   /**

packages/eslint-plugin-react-hooks/src/code-path-analysis/code-path-analyzer.js

@@ -488,7 +488,7 @@ function processCodePathToEnter(analyzer, node) {
 
     case 'SwitchCase':
       /*
-       * Fork if this node is after the 2st node in `cases`.
+       * Fork if this node is after the 2nd node in `cases`.
        * It's similar to `else` blocks.
        * The next `test` node is processed in this path.
        */