Fix spelling errors and typos (#19138)

.github/PULL_REQUEST_TEMPLATE.md

@@ -12,7 +12,7 @@
   6. If you need a debugger, run `yarn debug-test --watch TestName`, open `chrome://inspect`, and press "Inspect".
   7. Format your code with [prettier](https://github.com/prettier/prettier) (`yarn prettier`).
   8. Make sure your code lints (`yarn lint`). Tip: `yarn linc` to only check changed files.
-  9. Run the [Flow](https://flowtype.org/) typechecks (`yarn flow`).
+  9. Run the [Flow](https://flowtype.org/) type checks (`yarn flow`).
   10. If you haven't already, complete the CLA.
 
   Learn more about contributing: https://reactjs.org/docs/how-to-contribute.html

fixtures/dom/src/components/fixtures/hydration/index.js

@@ -105,7 +105,7 @@ class Hydration extends React.Component {
             Version:
             <VersionPicker
               id="hydration_version"
-              name="hyration_version"
+              name="hydration_version"
               version={version}
               onChange={this.setVersion}
             />

fixtures/tracing/index.html

@@ -65,7 +65,7 @@ <h3>
 
     <script>
       if (window.location.search.includes('puppeteer=true')) {
-        // Colocated calls to performance.now() often yield different values in Puppeteer.
+        // Collocated calls to performance.now() often yield different values in Puppeteer.
         // This causes the Scheduler API test to fail.
         // For the purposes of our automated release scripts,
         // Coerce tests to use Date.now() instead to reduce the chances of a false positive.

packages/eslint-plugin-react-hooks/src/RulesOfHooks.js

@@ -536,7 +536,7 @@ export default {
  * easy. For anonymous function expressions it is much harder. If you search for
  * `IsAnonymousFunctionDefinition()` in the ECMAScript spec you'll find places
  * where JS gives anonymous function expressions names. We roughly detect the
- * same AST nodes with some exceptions to better fit our usecase.
+ * same AST nodes with some exceptions to better fit our use case.
  */
 
 function getFunctionName(node) {

packages/react-devtools-core/README.md

@@ -21,7 +21,7 @@ Be sure to run this function *before* importing e.g. `react`, `react-dom`, `reac
 The `config` object may contain:
 * `host: string` (defaults to "localhost") - Websocket will connect to this host.
 * `port: number` (defaults to `8097`) - Websocket will connect to this port.
-* `websocket: Websocket` - Custom websocked to use. Overrides `host` and `port` settings if provided.
+* `websocket: Websocket` - Custom websocket to use. Overrides `host` and `port` settings if provided.
 * `resolveRNStyle: (style: number) => ?Object` - Used by the React Native style plug-in.
 * `isAppActive: () => boolean` - If provided, DevTools will poll this method and wait until it returns true before connecting to React.
 
@@ -50,4 +50,4 @@ yarn start:backend
 Watch for changes made to the standalone UI entry point and rebuild:
 ```sh
 yarn start:standalone
-```
+```

packages/react-devtools-extensions/src/renderer.js

@@ -1,7 +1,7 @@
 /**
  * In order to support reload-and-profile functionality, the renderer needs to be injected before any other scripts.
  * Since it is a complex file (with imports) we can't just toString() it like we do with the hook itself,
- * So this entry point (one of the web_accessible_resources) provcides a way to eagerly inject it.
+ * So this entry point (one of the web_accessible_resources) provides a way to eagerly inject it.
  * The hook will look for the presence of a global __REACT_DEVTOOLS_ATTACH__ and attach an injected renderer early.
  * The normal case (not a reload-and-profile) will not make use of this entry point though.
  *

packages/react-devtools-inline/README.md

@@ -85,7 +85,7 @@ initializeBackend(contentWindow);
 
 // React application can be injected into <iframe> at any time now...
 // Note that this would need to be done via <script> tag injection,
-// as setting the src of the <iframe> would load a new page (withou the injected backend).
+// as setting the src of the <iframe> would load a new page (without the injected backend).
 
 // Initialize DevTools UI to listen to the hook we just installed.
 // This returns a React component we can render anywhere in the parent window.
@@ -107,7 +107,7 @@ Sandboxed `iframe`s are also supported but require more complex initialization.
 ```js
 import { activate, initialize } from "react-devtools-inline/backend";
 
-// The DevTooks hook needs to be installed before React is even required!
+// The DevTools hook needs to be installed before React is even required!
 // The safest way to do this is probably to install it in a separate script tag.
 initialize(window);
 
@@ -177,4 +177,4 @@ Once the above packages have been built or downloaded, you can watch for changes
 yarn start
 ```
 
-To test package changes, refer to the [`react-devtools-shell` README](https://github.com/facebook/react/blob/master/packages/react-devtools-shell/README.md).
+To test package changes, refer to the [`react-devtools-shell` README](https://github.com/facebook/react/blob/master/packages/react-devtools-shell/README.md).

packages/react-devtools-shared/src/__tests__/setupTests.js

@@ -21,7 +21,7 @@ env.beforeEach(() => {
   // it's too late for a test to mock the clipboard-js modules.
   jest.mock('clipboard-js', () => ({copy: global.mockClipboardCopy}));
 
-  // These files should be required (and re-reuired) before each test,
+  // These files should be required (and re-required) before each test,
   // rather than imported at the head of the module.
   // That's because we reset modules between tests,
   // which disconnects the DevTool's cache from the current dispatcher ref.

packages/react-devtools-shared/src/__tests__/store-test.js

@@ -867,19 +867,19 @@ describe('Store', () => {
     }
 
     const MyComponent = (props, ref) => null;
-    const FowardRefComponent = React.forwardRef(MyComponent);
+    const ForwardRefComponent = React.forwardRef(MyComponent);
     const MyComponent2 = (props, ref) => null;
-    const FowardRefComponentWithAnonymousFunction = React.forwardRef(() => (
+    const ForwardRefComponentWithAnonymousFunction = React.forwardRef(() => (
       <MyComponent2 />
     ));
     const MyComponent3 = (props, ref) => null;
-    const FowardRefComponentWithCustomDisplayName = React.forwardRef(
+    const ForwardRefComponentWithCustomDisplayName = React.forwardRef(
       MyComponent3,
     );
-    FowardRefComponentWithCustomDisplayName.displayName = 'Custom';
+    ForwardRefComponentWithCustomDisplayName.displayName = 'Custom';
     const MyComponent4 = (props, ref) => null;
     const MemoComponent = React.memo(MyComponent4);
-    const MemoForwardRefComponent = React.memo(FowardRefComponent);
+    const MemoForwardRefComponent = React.memo(ForwardRefComponent);
     const MyComponent5 = (props, ref) => null;
     const LazyComponent = React.lazy(() => fakeImport(MyComponent5));
 
@@ -896,9 +896,9 @@ describe('Store', () => {
     const App = () => (
       <React.Fragment>
         <MyComponent />
-        <FowardRefComponent />
-        <FowardRefComponentWithAnonymousFunction />
-        <FowardRefComponentWithCustomDisplayName />
+        <ForwardRefComponent />
+        <ForwardRefComponentWithAnonymousFunction />
+        <ForwardRefComponentWithCustomDisplayName />
         <MemoComponent />
         <MemoForwardRefComponent />
         <React.Suspense fallback="Loading...">

packages/react-devtools-shared/src/__tests__/utils.js

@@ -41,7 +41,7 @@ export async function actAsync(
   const {act: actTestRenderer} = require('react-test-renderer');
   const {act: actDOM} = require('react-dom/test-utils');
 
-  // $FlowFixMe Flow doens't know about "await act()" yet
+  // $FlowFixMe Flow doesn't know about "await act()" yet
   await actDOM(async () => {
     await actTestRenderer(async () => {
       await cb();
@@ -50,7 +50,7 @@ export async function actAsync(
 
   if (recursivelyFlush) {
     while (jest.getTimerCount() > 0) {
-      // $FlowFixMe Flow doens't know about "await act()" yet
+      // $FlowFixMe Flow doesn't know about "await act()" yet
       await actDOM(async () => {
         await actTestRenderer(async () => {
           jest.runAllTimers();

packages/react-devtools-shared/src/backend/legacy/renderer.js

@@ -586,7 +586,7 @@ export function attach(
     });
   }
 
-  function createisPathAllowed(key: string) {
+  function createIsPathAllowed(key: string) {
     // This function helps prevent previously-inspected paths from being dehydrated in updates.
     // This is important to avoid a bad user experience where expanded toggles collapse on update.
     return function isPathAllowed(path: Array<string | number>): boolean {
@@ -706,15 +706,15 @@ export function attach(
 
     inspectedElement.context = cleanForBridge(
       inspectedElement.context,
-      createisPathAllowed('context'),
+      createIsPathAllowed('context'),
     );
     inspectedElement.props = cleanForBridge(
       inspectedElement.props,
-      createisPathAllowed('props'),
+      createIsPathAllowed('props'),
     );
     inspectedElement.state = cleanForBridge(
       inspectedElement.state,
-      createisPathAllowed('state'),
+      createIsPathAllowed('state'),
     );
 
     return {
@@ -800,7 +800,7 @@ export function attach(
       // List of owners
       owners,
 
-      // Location of component in source coude.
+      // Location of component in source code.
       source,
 
       rootType: null,

packages/react-devtools-shared/src/backend/renderer.js

@@ -111,7 +111,7 @@ type ReactTypeOfSideEffectType = {|
   Placement: number,
 |};
 
-// Some environments (e.g. React Native / Hermes) don't support the performace API yet.
+// Some environments (e.g. React Native / Hermes) don't support the performance API yet.
 const getCurrentTime =
   typeof performance === 'object' && typeof performance.now === 'function'
     ? () => performance.now()
@@ -532,7 +532,7 @@ export function attach(
 
   // If necessary, we can revisit optimizing this operation.
   // For example, we could add a new recursive unmount tree operation.
-  // The unmount operations are already significantly smaller than mount opreations though.
+  // The unmount operations are already significantly smaller than mount operations though.
   // This is something to keep in mind for later.
   function updateComponentFilters(componentFilters: Array<ComponentFilter>) {
     if (isProfiling) {
@@ -551,7 +551,7 @@ export function attach(
 
     applyComponentFilters(componentFilters);
 
-    // Reset psuedo counters so that new path selections will be persisted.
+    // Reset pseudo counters so that new path selections will be persisted.
     rootDisplayNameCounter.clear();
 
     // Recursively re-mount all roots with new filter criteria applied.
@@ -810,7 +810,7 @@ export function attach(
 
   // Record all contexts at the time profiling is started.
   // Fibers only store the current context value,
-  // so we need to track them separatenly in order to determine changed keys.
+  // so we need to track them separately in order to determine changed keys.
   function crawlToInitializeContextsMap(fiber: Fiber) {
     updateContextsForFiber(fiber);
     let current = fiber.child;
@@ -961,7 +961,7 @@ export function attach(
       // (1) an initial tree snapshot and
       // (2) the operations array for each commit
       // Because of this, it's important that the operations and metadata arrays align,
-      // So it's important not to ommit even empty operations while profiing is active.
+      // So it's important not to omit even empty operations while profiling is active.
       if (!isProfiling) {
         return;
       }
@@ -1156,7 +1156,7 @@ export function attach(
     }
     const id = getFiberID(primaryFiber);
     if (isRoot) {
-      // Roots must be removed only after all children (pending and simultated) have been removed.
+      // Roots must be removed only after all children (pending and simulated) have been removed.
       // So we track it separately.
       pendingUnmountedRootID = id;
     } else if (!shouldFilterFiber(fiber)) {
@@ -1320,7 +1320,7 @@ export function attach(
       const {alternate} = fiber;
 
       // It's important to update treeBaseDuration even if the current Fiber did not render,
-      // becuase it's possible that one of its descednants did.
+      // because it's possible that one of its descendants did.
       if (
         alternate == null ||
         treeBaseDuration !== alternate.treeBaseDuration
@@ -1382,7 +1382,7 @@ export function attach(
     // This is trickier than a simple comparison though, since certain types of fibers are filtered.
     const nextChildren: Array<number> = [];
 
-    // This is a naive implimentation that shallowly recurses children.
+    // This is a naive implementation that shallowly recourses children.
     // We might want to revisit this if it proves to be too inefficient.
     let child = childSet;
     while (child !== null) {
@@ -1476,7 +1476,7 @@ export function attach(
     // Suspense components only have a non-null memoizedState if they're timed-out.
     const prevDidTimeout = isSuspense && prevFiber.memoizedState !== null;
     const nextDidTimeOut = isSuspense && nextFiber.memoizedState !== null;
-    // The logic below is inspired by the codepaths in updateSuspenseComponent()
+    // The logic below is inspired by the code paths in updateSuspenseComponent()
     // inside ReactFiberBeginWork in the React source code.
     if (prevDidTimeout && nextDidTimeOut) {
       // Fallback -> Fallback:
@@ -1540,7 +1540,7 @@ export function attach(
       }
     } else {
       // Common case: Primary -> Primary.
-      // This is the same codepath as for non-Suspense fibers.
+      // This is the same code path as for non-Suspense fibers.
       if (nextFiber.child !== prevFiber.child) {
         // If the first child is different, we need to traverse them.
         // Each next child will be either a new child (mount) or an alternate (update).
@@ -1596,7 +1596,7 @@ export function attach(
       } else {
         if (traceUpdatesEnabled) {
           // If we're tracing updates and we've bailed out before reaching a host node,
-          // we should fall back to recursively marking the nearest host descendates for highlight.
+          // we should fall back to recursively marking the nearest host descendants for highlight.
           if (traceNearestHostComponentUpdate) {
             const hostFibers = findAllCurrentHostFibers(
               getFiberID(getPrimaryFiber(nextFiber)),
@@ -2347,7 +2347,7 @@ export function attach(
       // List of owners
       owners,
 
-      // Location of component in source coude.
+      // Location of component in source code.
       source: _debugSource || null,
 
       rootType,
@@ -2380,7 +2380,7 @@ export function attach(
     });
   }
 
-  function createisPathAllowed(
+  function createIsPathAllowed(
     key: string | null,
     secondaryCategory: 'hooks' | null,
   ) {
@@ -2528,7 +2528,7 @@ export function attach(
               ((mostRecentlyInspectedElement: any): InspectedElement),
               path,
             ),
-            createisPathAllowed(null, secondaryCategory),
+            createIsPathAllowed(null, secondaryCategory),
             path,
           ),
         };
@@ -2564,7 +2564,7 @@ export function attach(
 
       // Any time an inspected element has an update,
       // we should update the selected $r value as wel.
-      // Do this before dehyration (cleanForBridge).
+      // Do this before dehydration (cleanForBridge).
       updateSelectedElement(mostRecentlyInspectedElement);
 
       // Clone before cleaning so that we preserve the full data.
@@ -2573,19 +2573,19 @@ export function attach(
       const cleanedInspectedElement = {...mostRecentlyInspectedElement};
       cleanedInspectedElement.context = cleanForBridge(
         cleanedInspectedElement.context,
-        createisPathAllowed('context', null),
+        createIsPathAllowed('context', null),
       );
       cleanedInspectedElement.hooks = cleanForBridge(
         cleanedInspectedElement.hooks,
-        createisPathAllowed('hooks', 'hooks'),
+        createIsPathAllowed('hooks', 'hooks'),
       );
       cleanedInspectedElement.props = cleanForBridge(
         cleanedInspectedElement.props,
-        createisPathAllowed('props', null),
+        createIsPathAllowed('props', null),
       );
       cleanedInspectedElement.state = cleanForBridge(
         cleanedInspectedElement.state,
-        createisPathAllowed('state', null),
+        createIsPathAllowed('state', null),
       );
 
       return {
@@ -2678,7 +2678,7 @@ export function attach(
   }
 
   function setInContext(id: number, path: Array<string | number>, value: any) {
-    // To simplify hydration and display of primative context values (e.g. number, string)
+    // To simplify hydration and display of primitive context values (e.g. number, string)
     // the inspectElement() method wraps context in a {value: ...} object.
     // We need to remove the first part of the path (the "value") before continuing.
     path = path.slice(1);
@@ -2843,7 +2843,7 @@ export function attach(
       if (shouldRecordChangeDescriptions) {
         // Record all contexts at the time profiling is started.
         // Fibers only store the current context value,
-        // so we need to track them separatenly in order to determine changed keys.
+        // so we need to track them separately in order to determine changed keys.
         crawlToInitializeContextsMap(root.current);
       }
     });

packages/react-devtools-shared/src/backend/types.js

@@ -190,7 +190,7 @@ export type InspectedElement = {|
   // Does the current renderer support editable function props?
   canEditFunctionProps: boolean,
 
-  // Is this Suspense, and can its value be overriden now?
+  // Is this Suspense, and can its value be overridden now?
   canToggleSuspense: boolean,
 
   // Can view component source location.

packages/react-devtools-shared/src/backend/views/TraceUpdates/index.js

@@ -24,7 +24,7 @@ const MAX_DISPLAY_DURATION = 3000;
 // How long should a rect be considered valid for?
 const REMEASUREMENT_AFTER_DURATION = 250;
 
-// Some environments (e.g. React Native / Hermes) don't support the performace API yet.
+// Some environments (e.g. React Native / Hermes) don't support the performance API yet.
 const getCurrentTime =
   typeof performance === 'object' && typeof performance.now === 'function'
     ? () => performance.now()