Fix typos in mentioned files

src/components/Layout/getRouteMeta.tsx

@@ -10,130 +10,130 @@
  */
 
 export type RouteTag =
-  | 'foundation'
-  | 'intermediate'
-  | 'advanced'
-  | 'experimental'
-  | 'deprecated';
+	| 'foundation'
+	| 'intermediate'
+	| 'advanced'
+	| 'experimental'
+	| 'deprecated';
 
 export interface RouteItem {
-  /** Page title (for the sidebar) */
-  title: string;
-  /** Optional canary flag for heading */
-  canary?: boolean;
-  /** Optional page description for heading */
-  description?: string;
-  /* Additional meta info for page tagging */
-  tags?: RouteTag[];
-  /** Path to page */
-  path?: string;
-  /** Whether the entry is a heading */
-  heading?: boolean;
-  /** List of sub-routes */
-  routes?: RouteItem[];
-  /** Adds a section header above the route item */
-  hasSectionHeader?: boolean;
-  /** Title of section header */
-  sectionHeader?: string;
-  /** Whether it should be omitted in breadcrumbs */
-  skipBreadcrumb?: boolean;
+	/** Page title (for the sidebar) */
+	title: string;
+	/** Optional canary flag for heading */
+	canary?: boolean;
+	/** Optional page description for heading */
+	description?: string;
+	/* Additional meta info for page tagging */
+	tags?: RouteTag[];
+	/** Path to page */
+	path?: string;
+	/** Whether the entry is a heading */
+	heading?: boolean;
+	/** List of sub-routes */
+	routes?: RouteItem[];
+	/** Adds a section header above the route item */
+	hasSectionHeader?: boolean;
+	/** Title of section header */
+	sectionHeader?: string;
+	/** Whether it should be omitted in breadcrumbs */
+	skipBreadcrumb?: boolean;
 }
 
 export interface Routes {
-  /** List of routes */
-  routes: RouteItem[];
+	/** List of routes */
+	routes: RouteItem[];
 }
 
 /** Routing metadata about a given route and it's siblings and parent */
 export interface RouteMeta {
-  /** The previous route */
-  prevRoute?: RouteItem;
-  /** The next route */
-  nextRoute?: RouteItem;
-  /** The current route */
-  route?: RouteItem;
-  /** Trail of parent routes */
-  breadcrumbs?: RouteItem[];
-  /** Order in the section */
-  order?: number;
+	/** The previous route */
+	prevRoute?: RouteItem;
+	/** The next route */
+	nextRoute?: RouteItem;
+	/** The current route */
+	route?: RouteItem;
+	/** Trail of parent routes */
+	breadcrumbs?: RouteItem[];
+	/** Order in the section */
+	order?: number;
 }
 
-type TravesalContext = RouteMeta & {
-  currentIndex: number;
+type TraversalContext = RouteMeta & {
+	currentIndex: number;
 };
 
 export function getRouteMeta(cleanedPath: string, routeTree: RouteItem) {
-  const breadcrumbs = getBreadcrumbs(cleanedPath, routeTree);
-  const ctx: TravesalContext = {
-    currentIndex: 0,
-  };
-  buildRouteMeta(cleanedPath, routeTree, ctx);
-  const {currentIndex: _, ...meta} = ctx;
-  return {
-    ...meta,
-    breadcrumbs: breadcrumbs.length > 0 ? breadcrumbs : [routeTree],
-  };
+	const breadcrumbs = getBreadcrumbs(cleanedPath, routeTree);
+	const ctx: TraversalContext = {
+		currentIndex: 0,
+	};
+	buildRouteMeta(cleanedPath, routeTree, ctx);
+	const { currentIndex: _, ...meta } = ctx;
+	return {
+		...meta,
+		breadcrumbs: breadcrumbs.length > 0 ? breadcrumbs : [routeTree],
+	};
 }
 
 // Performs a depth-first search to find the current route and its previous/next route
 function buildRouteMeta(
-  searchPath: string,
-  currentRoute: RouteItem,
-  ctx: TravesalContext
+	searchPath: string,
+	currentRoute: RouteItem,
+	ctx: TraversalContext
 ) {
-  ctx.currentIndex++;
-
-  const {routes} = currentRoute;
-
-  if (ctx.route && !ctx.nextRoute) {
-    ctx.nextRoute = currentRoute;
-  }
-
-  if (currentRoute.path === searchPath) {
-    ctx.route = currentRoute;
-    ctx.order = ctx.currentIndex;
-    // If we've found a deeper match, reset the previously stored next route.
-    // TODO: this only works reliably if deeper matches are first in the tree.
-    // We should revamp all of this to be more explicit.
-    ctx.nextRoute = undefined;
-  }
-
-  if (!ctx.route) {
-    ctx.prevRoute = currentRoute;
-  }
-
-  if (!routes) {
-    return;
-  }
-
-  for (const route of routes) {
-    buildRouteMeta(searchPath, route, ctx);
-  }
+	ctx.currentIndex++;
+
+	const { routes } = currentRoute;
+
+	if (ctx.route && !ctx.nextRoute) {
+		ctx.nextRoute = currentRoute;
+	}
+
+	if (currentRoute.path === searchPath) {
+		ctx.route = currentRoute;
+		ctx.order = ctx.currentIndex;
+		// If we've found a deeper match, reset the previously stored next route.
+		// TODO: this only works reliably if deeper matches are first in the tree.
+		// We should revamp all of this to be more explicit.
+		ctx.nextRoute = undefined;
+	}
+
+	if (!ctx.route) {
+		ctx.prevRoute = currentRoute;
+	}
+
+	if (!routes) {
+		return;
+	}
+
+	for (const route of routes) {
+		buildRouteMeta(searchPath, route, ctx);
+	}
 }
 
 // iterates the route tree from the current route to find its ancestors for breadcrumbs
 function getBreadcrumbs(
-  path: string,
-  currentRoute: RouteItem,
-  breadcrumbs: RouteItem[] = []
+	path: string,
+	currentRoute: RouteItem,
+	breadcrumbs: RouteItem[] = []
 ): RouteItem[] {
-  if (currentRoute.path === path) {
-    return breadcrumbs;
-  }
-
-  if (!currentRoute.routes) {
-    return [];
-  }
-
-  for (const route of currentRoute.routes) {
-    const childRoute = getBreadcrumbs(path, route, [
-      ...breadcrumbs,
-      currentRoute,
-    ]);
-    if (childRoute?.length) {
-      return childRoute;
-    }
-  }
-
-  return [];
+	if (currentRoute.path === path) {
+		return breadcrumbs;
+	}
+
+	if (!currentRoute.routes) {
+		return [];
+	}
+
+	for (const route of currentRoute.routes) {
+		const childRoute = getBreadcrumbs(path, route, [
+			...breadcrumbs,
+			currentRoute,
+		]);
+		if (childRoute?.length) {
+			return childRoute;
+		}
+	}
+
+	return [];
 }

src/content/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023.md

@@ -74,7 +74,7 @@ Making plain JavaScript in React components reactive requires a compiler with a
 
 ## Offscreen Rendering {/*offscreen-rendering*/}
 
-Offscreen rendering is an upcoming capability in React for rendering screens in the background without additional performance overhead. You can think of it as a version of the [`content-visiblity` CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/content-visibility) that works not only for DOM elements but React components, too. During our research, we've discovered a variety of use cases:
+Offscreen rendering is an upcoming capability in React for rendering screens in the background without additional performance overhead. You can think of it as a version of the [`content-visibility` CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/content-visibility) that works not only for DOM elements but React components, too. During our research, we've discovered a variety of use cases:
 
 - A router can prerender screens in the background so that when a user navigates to them, they're instantly available.
 - A tab switching component can preserve the state of hidden tabs, so the user can switch between them without losing their progress.

src/content/learn/passing-data-deeply-with-context.md

@@ -985,7 +985,7 @@ export const places = [{
 }, {
   id: 5, 
   name: 'Chefchaouen, Marocco',
-  description: 'There are a few theories on why the houses are painted blue, including that the color repells mosquitos or that it symbolizes sky and heaven.',
+  description: 'There are a few theories on why the houses are painted blue, including that the color repels mosquitos or that it symbolizes sky and heaven.',
   imageId: 'rTqKo46'
 }, {
   id: 6,
@@ -1124,7 +1124,7 @@ export const places = [{
 }, {
   id: 5, 
   name: 'Chefchaouen, Marocco',
-  description: 'There are a few theories on why the houses are painted blue, including that the color repells mosquitos or that it symbolizes sky and heaven.',
+  description: 'There are a few theories on why the houses are painted blue, including that the color repels mosquitos or that it symbolizes sky and heaven.',
   imageId: 'rTqKo46'
 }, {
   id: 6,

src/content/reference/react-dom/components/form.md

@@ -273,7 +273,7 @@ export async function deliverMessage(message) {
 
 </Sandpack>
 
-[//]: # 'Uncomment the next line, and delete this line after the `useOptimisitc` reference documentatino page is published'
+[//]: # 'Uncomment the next line, and delete this line after the `useOptimistic` reference documentatino page is published'
 [//]: # 'To learn more about the `useOptimistic` Hook see the [reference documentation](/reference/react/hooks/useOptimistic).'
 
 ### Handling form submission errors {/*handling-form-submission-errors*/}

src/content/reference/react/Component.md

@@ -632,7 +632,7 @@ class Form extends Component {
     return (
       <>
         <input value={this.state.name} onChange={this.handleNameChange} />
-        <p>Hello, {this.state.name}.</p>
+        <p>Hello, {this.state.name}.
       </>
     );
   }

src/content/reference/react/cache.md

@@ -309,7 +309,7 @@ async function DemoProfile() {
 
 React only provides cache access to the memoized function in a component. When calling <CodeStep step={1}>`getUser`</CodeStep> outside of a component, it will still evaluate the function but not read or update the cache.
 
-This is because cache access is provided through a [context](/learn/passing-data-deeply-with-context) which is only accessibile from a component. 
+This is because cache access is provided through a [context](/learn/passing-data-deeply-with-context) which is only accessible from a component. 
 
 </Pitfall>
 

src/content/reference/react/experimental_taintUniqueValue.md

@@ -131,7 +131,7 @@ In this example, the constant `password` is tainted. Then `password` is used to
 
 Other similar ways of deriving new values from tainted values like concatenating it into a larger string, converting it to base64, or returning a substring create untained values.
 
-Tainting only protects against simple mistakes like explictly passing secret values to the client. Mistakes in calling the `taintUniqueValue` like using a global store outside of React, without the corresponding lifetime object, can cause the tainted value to become untainted. Tainting is a layer of protection; a secure app will have multiple layers of protection, well designed APIs, and isolation patterns.
+Tainting only protects against simple mistakes like explicitly passing secret values to the client. Mistakes in calling the `taintUniqueValue` like using a global store outside of React, without the corresponding lifetime object, can cause the tainted value to become untainted. Tainting is a layer of protection; a secure app will have multiple layers of protection, well designed APIs, and isolation patterns.
 
 </Pitfall>