Skip to content

Commit

Permalink
merging all conflicts
Browse files Browse the repository at this point in the history
  • Loading branch information
react-translations-bot committed Dec 11, 2023
2 parents f52bcd9 + af54fc8 commit c471fa7
Show file tree
Hide file tree
Showing 82 changed files with 3,054 additions and 139 deletions.
2 changes: 1 addition & 1 deletion .env.production
Original file line number Diff line number Diff line change
@@ -1 +1 @@
NEXT_PUBLIC_GA_TRACKING_ID = 'UA-41298772-4'
NEXT_PUBLIC_GA_TRACKING_ID = 'G-B1E83PJ3RT'
3 changes: 1 addition & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -30,13 +30,12 @@
"classnames": "^2.2.6",
"date-fns": "^2.16.1",
"debounce": "^1.2.1",
"ga-lite": "^2.1.4",
"github-slugger": "^1.3.0",
"next": "^13.4.1",
"next-remote-watch": "^1.0.0",
"parse-numeric-range": "^1.2.0",
"react": "^0.0.0-experimental-16d053d59-20230506",
"react-collapsed": "npm:@gaearon/[email protected]",
"react-collapsed": "4.0.4",
"react-dom": "^0.0.0-experimental-16d053d59-20230506",
"remark-frontmatter": "^4.0.1",
"remark-gfm": "^3.0.1"
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/docs/diagrams/render_tree.dark.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/docs/diagrams/render_tree.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
17 changes: 8 additions & 9 deletions src/components/Layout/Feedback.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@

import {useState} from 'react';
import {useRouter} from 'next/router';
import {ga} from '../../utils/analytics';

export function Feedback({onSubmit = () => {}}: {onSubmit?: () => void}) {
const {asPath} = useRouter();
Expand Down Expand Up @@ -46,16 +45,16 @@ const thumbsDownIcon = (
);

function sendGAEvent(isPositive: boolean) {
const category = isPositive ? 'like_button' : 'dislike_button';
const value = isPositive ? 1 : 0;
// Fragile. Don't change unless you've tested the network payload
// and verified that the right events actually show up in GA.
ga(
'send',
'event',
'button',
'feedback',
window.location.pathname,
isPositive ? '1' : '0'
);
// @ts-ignore
gtag('event', 'feedback', {
event_category: category,
event_label: window.location.pathname,
event_value: value,
});
}

function SendFeedback({onSubmit}: {onSubmit: () => void}) {
Expand Down
8 changes: 7 additions & 1 deletion src/components/Layout/Page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,12 @@ interface PageProps {
children: React.ReactNode;
toc: Array<TocItem>;
routeTree: RouteItem;
meta: {title?: string; canary?: boolean; description?: string};
meta: {
title?: string;
titleForTitleTag?: string;
canary?: boolean;
description?: string;
};
section: 'learn' | 'reference' | 'community' | 'blog' | 'home' | 'unknown';
}

Expand Down Expand Up @@ -107,6 +112,7 @@ export function Page({children, toc, routeTree, meta, section}: PageProps) {
<>
<Seo
title={title}
titleForTitleTag={meta.titleForTitleTag}
isHomePage={isHomePage}
image={`/images/og-` + section + '.png'}
searchOrder={searchOrder}
Expand Down
2 changes: 1 addition & 1 deletion src/components/Layout/Sidebar/SidebarLink.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ export function SidebarLink({
{title}{' '}
{canary && (
<IconCanary
title="This feature is available in the latest Canary"
title=" - This feature is available in the latest Canary"
className="ms-2 text-gray-30 dark:text-gray-60 inline-block w-4 h-4 align-[-3px]"
/>
)}
Expand Down
2 changes: 1 addition & 1 deletion src/components/Layout/Sidebar/SidebarRouteTree.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import {useRef, useLayoutEffect, Fragment} from 'react';
import cn from 'classnames';
import {useRouter} from 'next/router';
import {SidebarLink} from './SidebarLink';
import useCollapse from 'react-collapsed';
import {useCollapse} from 'react-collapsed';
import usePendingRoute from 'hooks/usePendingRoute';
import type {RouteItem} from 'components/Layout/getRouteMeta';

Expand Down
6 changes: 3 additions & 3 deletions src/components/Layout/getRouteMeta.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -58,13 +58,13 @@ export interface RouteMeta {
order?: number;
}

type TravesalContext = RouteMeta & {
type TraversalContext = RouteMeta & {
currentIndex: number;
};

export function getRouteMeta(cleanedPath: string, routeTree: RouteItem) {
const breadcrumbs = getBreadcrumbs(cleanedPath, routeTree);
const ctx: TravesalContext = {
const ctx: TraversalContext = {
currentIndex: 0,
};
buildRouteMeta(cleanedPath, routeTree, ctx);
Expand All @@ -79,7 +79,7 @@ export function getRouteMeta(cleanedPath: string, routeTree: RouteItem) {
function buildRouteMeta(
searchPath: string,
currentRoute: RouteItem,
ctx: TravesalContext
ctx: TraversalContext
) {
ctx.currentIndex++;

Expand Down
9 changes: 7 additions & 2 deletions src/components/MDX/MDXComponents.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -243,7 +243,7 @@ function Illustration({
src={src}
alt={alt}
style={{maxHeight: 300}}
className="bg-white rounded-lg"
className="rounded-lg"
/>
{caption ? (
<figcaption className="text-center leading-tight mt-4">
Expand Down Expand Up @@ -275,7 +275,12 @@ function IllustrationBlock({
const images = imageInfos.map((info, index) => (
<figure key={index}>
<div className="bg-white rounded-lg p-4 flex-1 flex xl:p-6 justify-center items-center my-4">
<img src={info.src} alt={info.alt} height={info.height} />
<img
className="text-primary"
src={info.src}
alt={info.alt}
height={info.height}
/>
</div>
{info.caption ? (
<figcaption className="text-secondary dark:text-secondary-dark text-center leading-tight mt-4">
Expand Down
6 changes: 6 additions & 0 deletions src/components/MDX/Sandpack/Preview.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,12 @@ export function Preview({
rawError = null;
}

// When throwing a new Error in Sandpack - we want to disable the dev error dialog
// to show the Error Boundary fallback
if (rawError && rawError.message.includes(`throw Error('Example error')`)) {
rawError = null;
}

// Memoized because it's fed to debouncing.
const firstLintError = useMemo(() => {
if (lintErrors.length === 0) {
Expand Down
2 changes: 1 addition & 1 deletion src/components/PageHeading.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ function PageHeading({
{title}
{canary && (
<IconCanary
title="This feature is available in the latest Canary"
title=" - This feature is available in the latest Canary"
className="ms-4 mt-1 text-gray-50 dark:text-gray-40 inline-block w-6 h-6 align-[-1px]"
/>
)}
Expand Down
14 changes: 11 additions & 3 deletions src/components/Seo.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {siteConfig} from '../siteConfig';

export interface SeoProps {
title: string;
titleForTitleTag: undefined | string;
description?: string;
image?: string;
// jsonld?: JsonLDType | Array<JsonLDType>;
Expand All @@ -22,6 +23,7 @@ const deployedTranslations = [
'zh-hans',
'es',
'fr',
'ja',
// We'll add more languages when they have enough content.
// Please DO NOT edit this list without a discussion in the reactjs/react.dev repo.
// It must be the same between all translations.
Expand All @@ -35,7 +37,7 @@ function getDomain(languageCode: string): string {
export const Seo = withRouter(
({
title,
description = 'The library for web and native user interfaces',
titleForTitleTag,
image = '/images/og-default.png',
router,
children,
Expand All @@ -46,14 +48,20 @@ export const Seo = withRouter(
const canonicalUrl = `https://${siteDomain}${
router.asPath.split(/[\?\#]/)[0]
}`;
const pageTitle = isHomePage ? title : title + ' – React';
// Allow setting a different title for Google results
const pageTitle =
(titleForTitleTag ?? title) + (isHomePage ? '' : ' – React');
// Twitter's meta parser is not very good.
const twitterTitle = pageTitle.replace(/[<>]/g, '');
let description = isHomePage
? 'React is the library for web and native user interfaces. Build user interfaces out of individual pieces called components written in JavaScript. React is designed to let you seamlessly combine components written by independent people, teams, and organizations.'
: 'The library for web and native user interfaces';
return (
<Head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
{title != null && <title key="title">{pageTitle}</title>}
{description != null && (
{isHomePage && (
// Let Google figure out a good description for each page.
<meta name="description" key="description" content={description} />
)}
<link rel="canonical" href={canonicalUrl} />
Expand Down
4 changes: 2 additions & 2 deletions src/content/blog/2022/03/08/react-18-upgrade-guide.md
Original file line number Diff line number Diff line change
Expand Up @@ -224,8 +224,8 @@ For more information, see the [Automatic batching deep dive](https://github.com/

In the React 18 Working Group we worked with library maintainers to create new APIs needed to support concurrent rendering for use cases specific to their use case in areas like styles, and external stores. To support React 18, some libraries may need to switch to one of the following APIs:

* `useSyncExternalStore` is a new hook that allows external stores to support concurrent reads by forcing updates to the store to be synchronous. This new API is recommended for any library that integrates with state external to React. For more information, see the [useSyncExternalStore overview post](https://github.com/reactwg/react-18/discussions/70) and [useSyncExternalStore API details](https://github.com/reactwg/react-18/discussions/86).
* `useInsertionEffect` is a new hook that allows CSS-in-JS libraries to address performance issues of injecting styles in render. Unless you've already built a CSS-in-JS library we don't expect you to ever use this. This hook will run after the DOM is mutated, but before layout effects read the new layout. This solves an issue that already exists in React 17 and below, but is even more important in React 18 because React yields to the browser during concurrent rendering, giving it a chance to recalculate layout. For more information, see the [Library Upgrade Guide for `<style>`](https://github.com/reactwg/react-18/discussions/110).
* `useSyncExternalStore` is a new Hook that allows external stores to support concurrent reads by forcing updates to the store to be synchronous. This new API is recommended for any library that integrates with state external to React. For more information, see the [useSyncExternalStore overview post](https://github.com/reactwg/react-18/discussions/70) and [useSyncExternalStore API details](https://github.com/reactwg/react-18/discussions/86).
* `useInsertionEffect` is a new Hook that allows CSS-in-JS libraries to address performance issues of injecting styles in render. Unless you've already built a CSS-in-JS library we don't expect you to ever use this. This Hook will run after the DOM is mutated, but before layout effects read the new layout. This solves an issue that already exists in React 17 and below, but is even more important in React 18 because React yields to the browser during concurrent rendering, giving it a chance to recalculate layout. For more information, see the [Library Upgrade Guide for `<style>`](https://github.com/reactwg/react-18/discussions/110).

React 18 also introduces new APIs for concurrent rendering such as `startTransition`, `useDeferredValue` and `useId`, which we share more about in the [release post](/blog/2022/03/29/react-v18).

Expand Down
11 changes: 5 additions & 6 deletions src/content/blog/2022/03/29/react-v18.md
Original file line number Diff line number Diff line change
Expand Up @@ -139,8 +139,8 @@ startTransition(() => {
Updates wrapped in startTransition are handled as non-urgent and will be interrupted if more urgent updates like clicks or key presses come in. If a transition gets interrupted by the user (for example, by typing multiple characters in a row), React will throw out the stale rendering work that wasn’t finished and render only the latest update.


* `useTransition`: a hook to start transitions, including a value to track the pending state.
* `startTransition`: a method to start transitions when the hook cannot be used.
* `useTransition`: a Hook to start transitions, including a value to track the pending state.
* `startTransition`: a method to start transitions when the Hook cannot be used.

Transitions will opt in to concurrent rendering, which allows the update to be interrupted. If the content re-suspends, transitions also tell React to continue showing the current content while rendering the transition content in the background (see the [Suspense RFC](https://github.com/reactjs/rfcs/blob/main/text/0213-suspense-in-react-18.md) for more info).

Expand Down Expand Up @@ -229,7 +229,7 @@ With Strict Mode in React 18, React will simulate unmounting and remounting the

#### useId {/*useid*/}

`useId` is a new hook for generating unique IDs on both the client and server, while avoiding hydration mismatches. It is primarily useful for component libraries integrating with accessibility APIs that require unique IDs. This solves an issue that already exists in React 17 and below, but it's even more important in React 18 because of how the new streaming server renderer delivers HTML out-of-order. [See docs here](/reference/react/useId).
`useId` is a new Hook for generating unique IDs on both the client and server, while avoiding hydration mismatches. It is primarily useful for component libraries integrating with accessibility APIs that require unique IDs. This solves an issue that already exists in React 17 and below, but it's even more important in React 18 because of how the new streaming server renderer delivers HTML out-of-order. [See docs here](/reference/react/useId).

> Note
>
Expand All @@ -245,15 +245,15 @@ With Strict Mode in React 18, React will simulate unmounting and remounting the

#### useSyncExternalStore {/*usesyncexternalstore*/}

`useSyncExternalStore` is a new hook that allows external stores to support concurrent reads by forcing updates to the store to be synchronous. It removes the need for useEffect when implementing subscriptions to external data sources, and is recommended for any library that integrates with state external to React. [See docs here](/reference/react/useSyncExternalStore).
`useSyncExternalStore` is a new Hook that allows external stores to support concurrent reads by forcing updates to the store to be synchronous. It removes the need for useEffect when implementing subscriptions to external data sources, and is recommended for any library that integrates with state external to React. [See docs here](/reference/react/useSyncExternalStore).

> Note
>
> `useSyncExternalStore` is intended to be used by libraries, not application code.
#### useInsertionEffect {/*useinsertioneffect*/}

`useInsertionEffect` is a new hook that allows CSS-in-JS libraries to address performance issues of injecting styles in render. Unless you’ve already built a CSS-in-JS library we don’t expect you to ever use this. This hook will run after the DOM is mutated, but before layout effects read the new layout. This solves an issue that already exists in React 17 and below, but is even more important in React 18 because React yields to the browser during concurrent rendering, giving it a chance to recalculate layout. [See docs here](/reference/react/useInsertionEffect).
`useInsertionEffect` is a new Hook that allows CSS-in-JS libraries to address performance issues of injecting styles in render. Unless you’ve already built a CSS-in-JS library we don’t expect you to ever use this. This Hook will run after the DOM is mutated, but before layout effects read the new layout. This solves an issue that already exists in React 17 and below, but is even more important in React 18 because React yields to the browser during concurrent rendering, giving it a chance to recalculate layout. [See docs here](/reference/react/useInsertionEffect).

> Note
>
Expand Down Expand Up @@ -339,4 +339,3 @@ See [How to Upgrade to React 18](/blog/2022/03/08/react-18-upgrade-guide) for st
* Update webpack plugin for webpack 5 ([#22739](https://github.com/facebook/react/pull/22739) by [@michenly](https://github.com/michenly))
* Fix a mistake in the Node loader. ([#22537](https://github.com/facebook/react/pull/22537) by [@btea](https://github.com/btea))
* Use `globalThis` instead of `window` for edge environments. ([#22777](https://github.com/facebook/react/pull/22777) by [@huozhi](https://github.com/huozhi))

Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ June 15, 2022 by [Andrew Clark](https://twitter.com/acdlite), [Dan Abramov](http

<Intro>

[React 18](https://reactjs.org/blog/2022/03/29/react-v18) was years in the making, and with it brought valuable lessons for the React team. Its release was the result of many years of research and exploring many paths. Some of those paths were successful; many more were dead-ends that led to new insights. One lesson we’ve learned is that it’s frustrating for the community to wait for new features without having insight into these paths that we’re exploring.
[React 18](https://react.dev/blog/2022/03/29/react-v18) was years in the making, and with it brought valuable lessons for the React team. Its release was the result of many years of research and exploring many paths. Some of those paths were successful; many more were dead-ends that led to new insights. One lesson we’ve learned is that it’s frustrating for the community to wait for new features without having insight into these paths that we’re exploring.

</Intro>

Expand All @@ -28,7 +28,7 @@ We’re working together with Vercel and Shopify to unify bundler support for sh

## Asset Loading {/*asset-loading*/}

Currently, assets like scripts, external styles, fonts, and images are typically preloaded and loaded using external systems. This can make it tricky to coordinate across new environments like streaming, server components, and more.
Currently, assets like scripts, external styles, fonts, and images are typically preloaded and loaded using external systems. This can make it tricky to coordinate across new environments like streaming, Server Components, and more.
We’re looking at adding APIs to preload and load deduplicated external assets through React APIs that work in all React environments.

We’re also looking at having these support Suspense so you can have images, CSS, and fonts that block display until they’re loaded but don’t block streaming and concurrent rendering. This can help avoid [“popcorning“](https://twitter.com/sebmarkbage/status/1516852731251724293) as the visuals pop and layout shifts.
Expand All @@ -41,7 +41,7 @@ Static Site Generation (SSG) and Incremental Static Regeneration (ISR) are great

We gave an [early preview](https://www.youtube.com/watch?v=lGEMwh32soc) of React Forget at React Conf 2021. It’s a compiler that automatically generates the equivalent of `useMemo` and `useCallback` calls to minimize the cost of re-rendering, while retaining React’s programming model.

Recently, we finished a rewrite of the compiler to make it more reliable and capable. This new architecture allows us to analyze and memoize more complex patterns such as the use of [local mutations](/learn/keeping-components-pure#local-mutation-your-components-little-secret), and opens up many new compile-time optimization opportunities beyond just being on par with memoization hooks.
Recently, we finished a rewrite of the compiler to make it more reliable and capable. This new architecture allows us to analyze and memoize more complex patterns such as the use of [local mutations](/learn/keeping-components-pure#local-mutation-your-components-little-secret), and opens up many new compile-time optimization opportunities beyond just being on par with memoization Hooks.

We’re also working on a playground for exploring many aspects of the compiler. While the goal of the playground is to make development of the compiler easier, we think that it will make it easier to try it out and build intuition for what the compiler does. It reveals various insights into how it works under the hood, and live renders the compiler’s outputs as you type. This will be shipped together with the compiler when it’s released.

Expand Down
Loading

0 comments on commit c471fa7

Please sign in to comment.