Skip to content

Commit 265aab0

Browse files
react-translations-botreact-translations-bot
committed
merging all conflicts
2 parents cdbbf34 + 303ecae commit 265aab0

File tree

99 files changed

+1150
-1018
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

99 files changed

+1150
-1018
lines changed

‎src/components/Layout/Feedback.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,13 +45,15 @@ const thumbsDownIcon = (
4545
);
4646

4747
function sendGAEvent(isPositive: boolean) {
48+
const category = isPositive ? 'like_button' : 'dislike_button';
49+
const value = isPositive ? 1 : 0;
4850
// Fragile. Don't change unless you've tested the network payload
4951
// and verified that the right events actually show up in GA.
5052
// @ts-ignore
5153
gtag('event', 'feedback', {
52-
event_category: 'button',
54+
event_category: category,
5355
event_label: window.location.pathname,
54-
value: isPositive ? 1 : 0,
56+
event_value: value,
5557
});
5658
}
5759

‎src/components/Layout/Sidebar/SidebarLink.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ export function SidebarLink({
7777
{title}{' '}
7878
{canary && (
7979
<IconCanary
80-
title="This feature is available in the latest Canary"
80+
title=" - This feature is available in the latest Canary"
8181
className="ms-2 text-gray-30 dark:text-gray-60 inline-block w-4 h-4 align-[-3px]"
8282
/>
8383
)}

‎src/components/MDX/MDXComponents.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -243,7 +243,7 @@ function Illustration({
243243
src={src}
244244
alt={alt}
245245
style={{maxHeight: 300}}
246-
className="bg-white rounded-lg"
246+
className="rounded-lg"
247247
/>
248248
{caption ? (
249249
<figcaption className="text-center leading-tight mt-4">
@@ -275,7 +275,12 @@ function IllustrationBlock({
275275
const images = imageInfos.map((info, index) => (
276276
<figure key={index}>
277277
<div className="bg-white rounded-lg p-4 flex-1 flex xl:p-6 justify-center items-center my-4">
278-
<img src={info.src} alt={info.alt} height={info.height} />
278+
<img
279+
className="text-primary"
280+
src={info.src}
281+
alt={info.alt}
282+
height={info.height}
283+
/>
279284
</div>
280285
{info.caption ? (
281286
<figcaption className="text-secondary dark:text-secondary-dark text-center leading-tight mt-4">

‎src/components/MDX/Sandpack/DownloadButton.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
import {useSyncExternalStore} from 'react';
66
import {useSandpack} from '@codesandbox/sandpack-react/unstyled';
77
import {IconDownload} from '../../Icon/IconDownload';
8+
import {AppJSPath, StylesCSSPath, SUPPORTED_FILES} from './createFileMap';
89
export interface DownloadButtonProps {}
910

1011
let supportsImportMap = false;
@@ -32,8 +33,6 @@ function useSupportsImportMap() {
3233
return useSyncExternalStore(subscribe, getCurrentValue, getServerSnapshot);
3334
}
3435

35-
const SUPPORTED_FILES = ['/App.js', '/styles.css'];
36-
3736
export function DownloadButton({
3837
providedFiles,
3938
}: {
@@ -49,8 +48,8 @@ export function DownloadButton({
4948
}
5049

5150
const downloadHTML = () => {
52-
const css = sandpack.files['/styles.css']?.code ?? '';
53-
const code = sandpack.files['/App.js']?.code ?? '';
51+
const css = sandpack.files[StylesCSSPath]?.code ?? '';
52+
const code = sandpack.files[AppJSPath]?.code ?? '';
5453
const blob = new Blob([
5554
`<!DOCTYPE html>
5655
<html>

‎src/components/MDX/Sandpack/SandpackRoot.tsx‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {SandpackLogLevel} from '@codesandbox/sandpack-client';
99
import {CustomPreset} from './CustomPreset';
1010
import {createFileMap} from './createFileMap';
1111
import {CustomTheme} from './Themes';
12+
import {template} from './template';
1213

1314
type SandpackProps = {
1415
children: React.ReactNode;
@@ -70,17 +71,19 @@ function SandpackRoot(props: SandpackProps) {
7071
const codeSnippets = Children.toArray(children) as React.ReactElement[];
7172
const files = createFileMap(codeSnippets);
7273

73-
files['/styles.css'] = {
74-
code: [sandboxStyle, files['/styles.css']?.code ?? ''].join('\n\n'),
75-
hidden: !files['/styles.css']?.visible,
74+
files['/src/styles.css'] = {
75+
code: [sandboxStyle, files['/src/styles.css']?.code ?? ''].join('\n\n'),
76+
hidden: !files['/src/styles.css']?.visible,
7677
};
7778

7879
return (
7980
<div className="sandpack sandpack--playground w-full my-8" dir="ltr">
8081
<SandpackProvider
81-
template="react"
82-
files={files}
82+
files={{...template, ...files}}
8383
theme={CustomTheme}
84+
customSetup={{
85+
environment: 'create-react-app',
86+
}}
8487
options={{
8588
autorun,
8689
initMode: 'user-visible',

‎src/components/MDX/Sandpack/createFileMap.ts‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,10 @@
44

55
import type {SandpackFile} from '@codesandbox/sandpack-react/unstyled';
66

7+
export const AppJSPath = `/src/App.js`;
8+
export const StylesCSSPath = `/src/styles.css`;
9+
export const SUPPORTED_FILES = [AppJSPath, StylesCSSPath];
10+
711
export const createFileMap = (codeSnippets: any) => {
812
return codeSnippets.reduce(
913
(result: Record<string, SandpackFile>, codeSnippet: React.ReactElement) => {
@@ -26,15 +30,16 @@ export const createFileMap = (codeSnippets: any) => {
2630
}
2731
} else {
2832
if (props.className === 'language-js') {
29-
filePath = '/App.js';
33+
filePath = AppJSPath;
3034
} else if (props.className === 'language-css') {
31-
filePath = '/styles.css';
35+
filePath = StylesCSSPath;
3236
} else {
3337
throw new Error(
3438
`Code block is missing a filename: ${props.children}`
3539
);
3640
}
3741
}
42+
3843
if (result[filePath]) {
3944
throw new Error(
4045
`File ${filePath} was defined multiple times. Each file snippet should have a unique path name`

‎src/components/MDX/Sandpack/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
*/
44

55
import {lazy, memo, Children, Suspense} from 'react';
6-
import {createFileMap} from './createFileMap';
6+
import {AppJSPath, createFileMap} from './createFileMap';
77

88
const SandpackRoot = lazy(() => import('./SandpackRoot'));
99

@@ -57,7 +57,7 @@ export default memo(function SandpackWrapper(props: any): any {
5757
);
5858
let activeCode;
5959
if (!activeCodeSnippet.length) {
60-
activeCode = codeSnippet['/App.js'].code;
60+
activeCode = codeSnippet[AppJSPath].code;
6161
} else {
6262
activeCode = codeSnippet[activeCodeSnippet[0]].code;
6363
}

‎src/components/MDX/Sandpack/template.ts‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
export const template = {
2+
'/src/index.js': {
3+
hidden: true,
4+
code: `import React, { StrictMode } from "react";
5+
import { createRoot } from "react-dom/client";
6+
import "./styles.css";
7+
8+
import App from "./App";
9+
10+
const root = createRoot(document.getElementById("root"));
11+
root.render(
12+
<StrictMode>
13+
<App />
14+
</StrictMode>
15+
);`,
16+
},
17+
'/package.json': {
18+
hidden: true,
19+
code: JSON.stringify(
20+
{
21+
name: 'react.dev',
22+
version: '0.0.0',
23+
main: '/src/index.js',
24+
scripts: {
25+
start: 'react-scripts start',
26+
build: 'react-scripts build',
27+
test: 'react-scripts test --env=jsdom',
28+
eject: 'react-scripts eject',
29+
},
30+
dependencies: {
31+
react: '^18.0.0',
32+
'react-dom': '^18.0.0',
33+
'react-scripts': '^5.0.0',
34+
},
35+
},
36+
null,
37+
2
38+
),
39+
},
40+
'/public/index.html': {
41+
hidden: true,
42+
code: `<!DOCTYPE html>
43+
<html lang="en">
44+
<head>
45+
<meta charset="UTF-8">
46+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
47+
<title>Document</title>
48+
</head>
49+
<body>
50+
<div id="root"></div>
51+
</body>
52+
</html>`,
53+
},
54+
};

‎src/components/PageHeading.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ function PageHeading({
3434
{title}
3535
{canary && (
3636
<IconCanary
37-
title="This feature is available in the latest Canary"
37+
title=" - This feature is available in the latest Canary"
3838
className="ms-4 mt-1 text-gray-50 dark:text-gray-40 inline-block w-6 h-6 align-[-1px]"
3939
/>
4040
)}

‎src/content/blog/2022/03/08/react-18-upgrade-guide.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -224,8 +224,8 @@ For more information, see the [Automatic batching deep dive](https://github.com/
224224

225225
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:
226226

227-
* `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).
228-
* `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).
227+
* `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).
228+
* `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).
229229

230230
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).
231231

0 commit comments

Comments
 (0)