diff --git a/src/components/Layout/getRouteMeta.tsx b/src/components/Layout/getRouteMeta.tsx index d22947847a9..9f28dc13d4b 100644 --- a/src/components/Layout/getRouteMeta.tsx +++ b/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 []; } diff --git a/src/content/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023.md b/src/content/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023.md index a6592fd3bc7..5071af6ecc5 100644 --- a/src/content/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023.md +++ b/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. diff --git a/src/content/learn/passing-data-deeply-with-context.md b/src/content/learn/passing-data-deeply-with-context.md index 45c5e77daaf..31405c0afe2 100644 --- a/src/content/learn/passing-data-deeply-with-context.md +++ b/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, diff --git a/src/content/reference/react-dom/components/form.md b/src/content/reference/react-dom/components/form.md index 7c602322072..dfffc74f561 100644 --- a/src/content/reference/react-dom/components/form.md +++ b/src/content/reference/react-dom/components/form.md @@ -273,7 +273,7 @@ export async function deliverMessage(message) { -[//]: # '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*/} diff --git a/src/content/reference/react/Component.md b/src/content/reference/react/Component.md index f8884608bdf..6174cd753a8 100644 --- a/src/content/reference/react/Component.md +++ b/src/content/reference/react/Component.md @@ -632,7 +632,7 @@ class Form extends Component { return ( <> -

Hello, {this.state.name}.

+

Hello, {this.state.name}. ); } diff --git a/src/content/reference/react/cache.md b/src/content/reference/react/cache.md index 65d95ab76a5..735560636a3 100644 --- a/src/content/reference/react/cache.md +++ b/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 `getUser` 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. diff --git a/src/content/reference/react/experimental_taintUniqueValue.md b/src/content/reference/react/experimental_taintUniqueValue.md index aeee7456cf3..e8226d92f6f 100644 --- a/src/content/reference/react/experimental_taintUniqueValue.md +++ b/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.