[typo] Fix common spelling errors across codebase

compiler/.eslintrc.js

@@ -17,7 +17,7 @@ module.exports = {
   extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
   rules: {
     /*
-     * We prefer using const where variables are not reassigned, but occassional mistakes
+     * We prefer using const where variables are not reassigned, but occasional mistakes
      * aren't a major issue
      */
     "prefer-const": "off",

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

@@ -89,7 +89,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.
@@ -284,7 +284,7 @@ class Context {
   catchHandlers: Map<BlockId, Place> = new Map();
   functionSignatureCache: Map<FunctionExpression, AliasingSignature> =
     new Map();
-  isFuctionExpression: boolean;
+  isFunctionExpression: boolean;
   fn: HIRFunction;
   hoistedContextDeclarations: Map<DeclarationId, Place | null>;
 
@@ -293,7 +293,7 @@ class Context {
     fn: HIRFunction,
     hoistedContextDeclarations: Map<DeclarationId, Place | null>,
   ) {
-    this.isFuctionExpression = isFunctionExpression;
+    this.isFunctionExpression = isFunctionExpression;
     this.fn = fn;
     this.hoistedContextDeclarations = hoistedContextDeclarations;
   }
@@ -367,7 +367,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: [
           {
@@ -409,7 +409,7 @@ function inferBlock(
       terminal.effects = effects.length !== 0 ? effects : null;
     }
   } else if (terminal.kind === 'return') {
-    if (!context.isFuctionExpression) {
+    if (!context.isFunctionExpression) {
       terminal.effects = [
         context.internEffect({
           kind: 'Freeze',
@@ -1212,7 +1212,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/__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) {

packages/react-devtools-core/src/standalone.js

@@ -354,7 +354,7 @@ function startServer(
 
     // The renderer interface doesn't read saved component filters directly,
     // because they are generally stored in localStorage within the context of the extension.
-    // Because of this it relies on the extension to pass filters, so include them wth the response here.
+    // Because of this it relies on the extension to pass filters, so include them with the response here.
     // This will ensure that saved filters are shared across different web pages.
     const savedPreferencesString = `
       window.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = ${JSON.stringify(

packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorBoundary.js

@@ -156,7 +156,7 @@ export default class ErrorBoundary extends Component<Props, State> {
           <CaughtErrorView
             callStack={callStack}
             componentStack={componentStack}
-            errorMessage={errorMessage || 'Error occured in inspected element'}
+            errorMessage={errorMessage || 'Error occurred in inspected element'}
             info={
               <>
                 React DevTools encountered an error while trying to inspect the

packages/react-devtools-shared/src/devtools/views/Settings/GeneralSettings.js

@@ -29,7 +29,7 @@ function getChangeLogUrl(version: ?string): string | null {
   // Version numbers are in the format of: <major>.<minor>.<patch>-<sha>
   // e.g. "4.23.0-f0dd459e0"
   // GitHub CHANGELOG headers are in the format of: <major>.<minor>.<patch>
-  // but the "." are stripped from anchor tags, becomming: <major><minor><patch>
+  // but the "." are stripped from anchor tags, becoming: <major><minor><patch>
   const versionAnchor = version.replace(/^(\d+)\.(\d+)\.(\d+).*/, '$1$2$3');
   return `${CHANGE_LOG_URL}#${versionAnchor}`;
 }

packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js

@@ -643,7 +643,7 @@ export function finalizeHydratedChildren(
   props: Props,
   hostContext: HostContext,
 ): boolean {
-  // TOOD: Consider unifying this with hydrateInstance.
+  // TODO: Consider unifying this with hydrateInstance.
   if (!enableHydrationChangeEvent) {
     return false;
   }
@@ -2560,7 +2560,7 @@ export function startGestureTransition(
           const duration =
             // $FlowFixMe[prop-missing]
             typeof timing.duration === 'number' ? timing.duration : 0;
-          // TODO: Consider interation count higher than 1.
+          // TODO: Consider iteration count higher than 1.
           // $FlowFixMe[prop-missing]
           // $FlowFixMe[unsafe-addition]
           const durationWithDelay = timing.delay + duration;
@@ -2576,7 +2576,7 @@ export function startGestureTransition(
           }
         }
       }
-      const durationToRangeMultipler =
+      const durationToRangeMultiplier =
         (rangeEnd - rangeStart) / longestDuration;
       for (let i = 0; i < animations.length; i++) {
         const anim = animations[i];
@@ -2627,12 +2627,12 @@ export function startGestureTransition(
           let adjustedRangeStart =
             // $FlowFixMe[unsafe-addition]
             // $FlowFixMe[prop-missing]
-            rangeEnd - (duration + timing.delay) * durationToRangeMultipler;
+            rangeEnd - (duration + timing.delay) * durationToRangeMultiplier;
           let adjustedRangeEnd =
             rangeEnd -
             // $FlowFixMe[prop-missing]
             // $FlowFixMe[unsafe-arithmetic]
-            timing.delay * durationToRangeMultipler;
+            timing.delay * durationToRangeMultiplier;
           if (
             timing.direction === 'reverse' ||
             timing.direction === 'alternate-reverse'
@@ -2723,7 +2723,7 @@ export function startGestureTransition(
         // was invoked, then we need to first finish the mutation and layout phases.
         // If they're already invoked it's still safe to call them due the status check.
         mutationCallback();
-        // Skip readyCallback() and go straight to animateCallbck() since we're not animating.
+        // Skip readyCallback() and go straight to animateCallback() since we're not animating.
         // animateCallback() is still required to restore states.
         animateCallback();
         if (enableProfilerTimer) {
@@ -3468,7 +3468,7 @@ function clearContainerSparingly(container: Node) {
         const element: Element = (node: any);
         clearContainerSparingly(element);
         // If these singleton instances had previously been rendered with React they
-        // may still hold on to references to the previous fiber tree. We detatch them
+        // may still hold on to references to the previous fiber tree. We detach them
         // prospectively to reset them to a baseline starting state since we cannot create
         // new instances.
         detachDeletedInstance(element);
@@ -3843,7 +3843,7 @@ export function registerSuspenseInstanceRetry(
     instance.data !== SUSPENSE_PENDING_START_DATA ||
     // The boundary is still in pending status but the document has finished loading
     // before we could register the event handler that would have scheduled the retry
-    // on load so we call teh callback now.
+    // on load so we call the callback now.
     ownerDocument.readyState !== DOCUMENT_READY_STATE_LOADING
   ) {
     callback();
@@ -6118,7 +6118,7 @@ export function suspendResource(
         instance = ownerDocument.createElement('link');
         markNodeAsHoistable(instance);
         const linkInstance: HTMLLinkElement = (instance: any);
-        // This Promise is a loading state used by the Fizz runtime. We need this incase there is a race
+        // This Promise is a loading state used by the Fizz runtime. We need this in case there is a race
         // between this resource being rendered on the client and being rendered with a late completed boundary.
         (linkInstance: any)._p = new Promise((resolve, reject) => {
           linkInstance.onload = resolve;

packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js

@@ -165,7 +165,7 @@ describe('ReactDOMFizzServer', () => {
   });
 
   function expectErrors(errorsArr, toBeDevArr, toBeProdArr) {
-    const mappedErrows = errorsArr.map(({error, errorInfo}) => {
+    const mappedErrors = errorsArr.map(({error, errorInfo}) => {
       const stack = errorInfo && errorInfo.componentStack;
       const digest = error.digest;
       if (stack) {
@@ -176,9 +176,9 @@ describe('ReactDOMFizzServer', () => {
       return error.message;
     });
     if (__DEV__) {
-      expect(mappedErrows).toEqual(toBeDevArr);
+      expect(mappedErrors).toEqual(toBeDevArr);
     } else {
-      expect(mappedErrows).toEqual(toBeProdArr);
+      expect(mappedErrors).toEqual(toBeProdArr);
     }
   }
 
@@ -234,7 +234,7 @@ describe('ReactDOMFizzServer', () => {
         bufferedContent.startsWith('<html ')
       ) {
         throw new Error(
-          'Recieved <html> without a <!DOCTYPE html> which is almost certainly a bug in React',
+          'Received <html> without a <!DOCTYPE html> which is almost certainly a bug in React',
         );
       }
 
@@ -3638,7 +3638,7 @@ describe('ReactDOMFizzServer', () => {
   });
 
   // bugfix: https://github.com/facebook/react/issues/27286
-  it('can render custom elements with children on ther server', async () => {
+  it('can render custom elements with children on their server', async () => {
     await act(() => {
       renderToPipeableStream(
         <html>
@@ -3664,10 +3664,10 @@ describe('ReactDOMFizzServer', () => {
   });
 
   // https://github.com/facebook/react/issues/27540
-  // This test is not actually asserting much because there is possibly a bug in the closeing logic for the
+  // This test is not actually asserting much because there is possibly a bug in the closing logic for the
   // Node implementation of Fizz. The close leads to an abort which sets the destination to null before the Float
   // method has an opportunity to schedule a write. We should fix this probably and once we do this test will start
-  // to fail if the underyling issue of writing after stream completion isn't fixed
+  // to fail if the underlying issue of writing after stream completion isn't fixed
   it('does not try to write to the stream after it has been closed', async () => {
     async function preloadLate() {
       await 1;
@@ -3806,7 +3806,7 @@ describe('ReactDOMFizzServer', () => {
 
     expect(headers).toEqual({
       Link: `
-<non-responsive-preload>; rel=preload; as="image"; fetchpriority="high", 
+<non-responsive-preload>; rel=preload; as="image"; fetchpriority="high",
 <non-responsive-img>; rel=preload; as="image"; fetchpriority="high"
 `
         .replaceAll('\n', '')
@@ -3843,7 +3843,7 @@ describe('ReactDOMFizzServer', () => {
     expect(headers).toEqual({});
   });
 
-  it('stops accumulating new headers once the maxHeadersLength limit is satisifed', async () => {
+  it('stops accumulating new headers once the maxHeadersLength limit is satisfied', async () => {
     let headers = null;
     function onHeaders(x) {
       headers = x;

packages/react-reconciler/src/ReactFiberClassComponent.js

@@ -443,17 +443,17 @@ function checkClassInstance(workInProgress: Fiber, ctor: any, newProps: any) {
         name,
       );
     }
-    if (typeof instance.componentWillRecieveProps === 'function') {
+    if (typeof instance.componentWillReceiveProps === 'function') {
       console.error(
         '%s has a method called ' +
-          'componentWillRecieveProps(). Did you mean componentWillReceiveProps()?',
+          'componentWillReceiveProps(). Did you mean componentWillReceiveProps()?',
         name,
       );
     }
-    if (typeof instance.UNSAFE_componentWillRecieveProps === 'function') {
+    if (typeof instance.UNSAFE_componentWillReceiveProps === 'function') {
       console.error(
         '%s has a method called ' +
-          'UNSAFE_componentWillRecieveProps(). Did you mean UNSAFE_componentWillReceiveProps()?',
+          'UNSAFE_componentWillReceiveProps(). Did you mean UNSAFE_componentWillReceiveProps()?',
         name,
       );
     }

packages/react-reconciler/src/ReactFiberHooks.js

@@ -576,7 +576,7 @@ export function renderWithHooks<Props, SecondArg>(
   //
   // We want memoized functions to run twice, too, so account for this, user
   // functions are double invoked during the *first* invocation of the component
-  // function, and are *not* double invoked during the second incovation:
+  // function, and are *not* double invoked during the second invocation:
   //
   // - First execution of component function: user functions are double invoked
   // - Second execution of component function (in Strict Mode, during
@@ -924,7 +924,7 @@ export function bailoutHooks(
 }
 
 export function resetHooksAfterThrow(): void {
-  // This is called immediaetly after a throw. It shouldn't reset the entire
+  // This is called immediately after a throw. It shouldn't reset the entire
   // module state, because the work loop might decide to replay the component
   // again without rewinding.
   //
@@ -1847,7 +1847,7 @@ function updateStoreInstance<T>(
   // Something may have been mutated in between render and commit. This could
   // have been in an event that fired before the passive effects, or it could
   // have been in a layout effect. In that case, we would have used the old
-  // snapsho and getSnapshot values to bail out. We need to check one more time.
+  // snapshot and getSnapshot values to bail out. We need to check one more time.
   if (checkIfSnapshotChanged(inst)) {
     // Force a re-render.
     // We intentionally don't log update times and stacks here because this
@@ -2015,7 +2015,7 @@ function rerenderOptimistic<S, A>(
   // the passthrough value changed.
   //
   // So instead of a forked re-render implementation that knows how to handle
-  // render phase udpates, we can use the same implementation as during a
+  // render phase updates, we can use the same implementation as during a
   // regular mount or update.
   const hook = updateWorkInProgressHook();
 
@@ -2528,7 +2528,7 @@ function rerenderActionState<S, P>(
   // the passthrough value changed.
   //
   // So instead of a forked re-render implementation that knows how to handle
-  // render phase udpates, we can use the same implementation as during a
+  // render phase updates, we can use the same implementation as during a
   // regular mount or update.
   const stateHook = updateWorkInProgressHook();
   const currentStateHook = currentHook;
@@ -3462,7 +3462,7 @@ function mountId(): string {
   if (getIsHydrating()) {
     const treeId = getTreeId();
 
-    // Use a captial R prefix for server-generated ids.
+    // Use a capital R prefix for server-generated ids.
     id = '_' + identifierPrefix + 'R_' + treeId;
 
     // Unless this is the first id at this level, append a number at the end
@@ -3769,7 +3769,7 @@ function dispatchOptimisticSetState<S, A>(
       throw new Error('Cannot update optimistic state while rendering.');
     } else {
       // startTransition was called during render. We don't need to do anything
-      // besides warn here because the render phase update would be overidden by
+      // besides warn here because the render phase update would be overridden by
       // the second update, anyway. We can remove this branch and make it throw
       // in a future release.
       if (__DEV__) {

packages/react-reconciler/src/__tests__/ReactAsyncActions-test.js

@@ -1703,7 +1703,7 @@ describe('ReactAsyncActions', () => {
     'regression: updates in an action passed to React.startTransition are batched ' +
       'even if there were no updates before the first await',
     async () => {
-      // Regression for a bug that occured in an older, too-clever-by-half
+      // Regression for a bug that occurred in an older, too-clever-by-half
       // implementation of the isomorphic startTransition API. Now, the
       // isomorphic startTransition is literally the composition of every
       // reconciler instance's startTransition, so the behavior is less likely

packages/react-server/src/ReactFizzClassComponent.js

@@ -459,17 +459,17 @@ function checkClassInstance(instance: any, ctor: any, newProps: any) {
         name,
       );
     }
-    if (typeof instance.componentWillRecieveProps === 'function') {
+    if (typeof instance.componentWillReceiveProps === 'function') {
       console.error(
         '%s has a method called ' +
-          'componentWillRecieveProps(). Did you mean componentWillReceiveProps()?',
+          'componentWillReceiveProps(). Did you mean componentWillReceiveProps()?',
         name,
       );
     }
-    if (typeof instance.UNSAFE_componentWillRecieveProps === 'function') {
+    if (typeof instance.UNSAFE_componentWillReceiveProps === 'function') {
       console.error(
         '%s has a method called ' +
-          'UNSAFE_componentWillRecieveProps(). Did you mean UNSAFE_componentWillReceiveProps()?',
+          'UNSAFE_componentWillReceiveProps(). Did you mean UNSAFE_componentWillReceiveProps()?',
         name,
       );
     }