Skip to content

Commit 5bc49eb

Browse files
Subramanyarao11Subramanyarao11
authored
Merge branch 'reactjs:main' into editor-setup
2 parents 5fa1403 + d158002 commit 5bc49eb

Some content is hidden

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

57 files changed

+1373
-890
lines changed

Diff for: ‎.env.development

-1
Original file line numberDiff line numberDiff line change
@@ -1 +0,0 @@
1-
SANDPACK_BARE_COMPONENTS=true

Diff for: ‎.env.production

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,2 +1 @@
1-
NEXT_PUBLIC_GA_TRACKING_ID = 'UA-41298772-4'
2-
SANDPACK_BARE_COMPONENTS=true
1+
NEXT_PUBLIC_GA_TRACKING_ID = 'UA-41298772-4'

Diff for: ‎next.config.js

+1-7
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,7 @@ const nextConfig = {
1414
scrollRestoration: true,
1515
legacyBrowsers: false,
1616
},
17-
env: {
18-
SANDPACK_BARE_COMPONENTS: process.env.SANDPACK_BARE_COMPONENTS,
19-
},
17+
env: {},
2018
webpack: (config, {dev, isServer, ...options}) => {
2119
if (process.env.ANALYZE) {
2220
const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer');
@@ -35,10 +33,6 @@ const nextConfig = {
3533

3634
const {IgnorePlugin, NormalModuleReplacementPlugin} = require('webpack');
3735
config.plugins.push(
38-
new NormalModuleReplacementPlugin(
39-
/^@stitches\/core$/,
40-
require.resolve('./src/utils/emptyShim.js')
41-
),
4236
new NormalModuleReplacementPlugin(
4337
/^raf$/,
4438
require.resolve('./src/utils/rafShim.js')

Diff for: ‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
"check-all": "npm-run-all prettier lint:fix tsc"
2323
},
2424
"dependencies": {
25-
"@codesandbox/sandpack-react": "1.15.5",
25+
"@codesandbox/sandpack-react": "2.6.0",
2626
"@docsearch/css": "3.0.0-alpha.41",
2727
"@docsearch/react": "3.0.0-alpha.41",
2828
"@headlessui/react": "^1.7.0",

Diff for: ‎patches/@codemirror+lang-javascript+0.19.6.patch

-30
This file was deleted.

Diff for: ‎patches/@codesandbox+sandpack-react+1.15.5.patch

-62
This file was deleted.

Diff for: ‎patches/@lezer+javascript+0.15.2.patch

-345
This file was deleted.

Diff for: ‎public/images/team/dave-mccabe.jpg

-203 KB
Binary file not shown.

Diff for: ‎public/images/team/lunaruan.jpg

-150 KB
Binary file not shown.

Diff for: ‎public/images/team/mengdi-chen.jpg

-106 KB
Binary file not shown.

Diff for: ‎public/images/team/sean-keegan.jpg

-199 KB
Binary file not shown.

Diff for: ‎src/components/Icon/IconTwitter.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,13 @@ export const IconTwitter = memo<JSX.IntrinsicElements['svg']>(
99
return (
1010
<svg
1111
xmlns="http://www.w3.org/2000/svg"
12-
viewBox="0 0 24 24"
13-
width="1.33em"
14-
height="1.33em"
12+
viewBox="0 0 512 512"
13+
height="1.30em"
14+
width="1.30em"
1515
fill="currentColor"
1616
{...props}>
1717
<path fill="none" d="M0 0h24v24H0z" />
18-
<path d="M22.162 5.656a8.384 8.384 0 0 1-2.402.658A4.196 4.196 0 0 0 21.6 4c-.82.488-1.719.83-2.656 1.015a4.182 4.182 0 0 0-7.126 3.814 11.874 11.874 0 0 1-8.62-4.37 4.168 4.168 0 0 0-.566 2.103c0 1.45.738 2.731 1.86 3.481a4.168 4.168 0 0 1-1.894-.523v.052a4.185 4.185 0 0 0 3.355 4.101 4.21 4.21 0 0 1-1.89.072A4.185 4.185 0 0 0 7.97 16.65a8.394 8.394 0 0 1-6.191 1.732 11.83 11.83 0 0 0 6.41 1.88c7.693 0 11.9-6.373 11.9-11.9 0-.18-.005-.362-.013-.54a8.496 8.496 0 0 0 2.087-2.165z" />
18+
<path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z" />
1919
</svg>
2020
);
2121
}

Diff for: ‎src/components/Layout/HomeContent.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1654,8 +1654,8 @@ function LikeButton({video}) {
16541654
<button
16551655
data-hover="LikeButton"
16561656
className={cn(
1657-
'outline-none focus:bg-red-50/5 focus:text-red-50 relative flex items-center justify-center w-10 h-10 cursor-pointer rounded-full text-tertiary hover:bg-card active:scale-95 active:bg-red-50/5 active:text-red-50',
1658-
isLiked && 'text-red-50'
1657+
'outline-none focus:bg-red-50/5 focus:text-red-50 relative flex items-center justify-center w-10 h-10 cursor-pointer rounded-full hover:bg-card active:scale-95 active:bg-red-50/5 active:text-red-50',
1658+
isLiked ? 'text-red-50' : 'text-tertiary'
16591659
)}
16601660
aria-label={isLiked ? 'Unsave' : 'Save'}
16611661
onClick={() => {

Diff for: ‎src/components/Layout/Toc.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,7 @@ export function Toc({headings}: {headings: Toc}) {
2727
<ul className="space-y-2 pb-16">
2828
{headings.length > 0 &&
2929
headings.map((h, i) => {
30-
if (h.url == null) {
31-
// TODO: only log in DEV
30+
if (!h.url && process.env.NODE_ENV === 'development') {
3231
console.error('Heading does not have URL');
3332
}
3433
return (

Diff for: ‎src/components/MDX/CodeBlock/CodeBlock.tsx

+5-2
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,14 @@
33
*/
44

55
import cn from 'classnames';
6-
import {highlightTree, HighlightStyle, tags} from '@codemirror/highlight';
6+
import {HighlightStyle} from '@codemirror/language';
7+
import {highlightTree} from '@lezer/highlight';
78
import {javascript} from '@codemirror/lang-javascript';
89
import {html} from '@codemirror/lang-html';
910
import {css} from '@codemirror/lang-css';
1011
import rangeParser from 'parse-numeric-range';
12+
import {tags} from '@lezer/highlight';
13+
1114
import {CustomTheme} from '../Sandpack/Themes';
1215

1316
interface InlineHighlight {
@@ -52,7 +55,7 @@ const CodeBlock = function CodeBlock({
5255
let tokenStarts = new Map();
5356
let tokenEnds = new Map();
5457
const highlightTheme = getSyntaxHighlight(CustomTheme);
55-
highlightTree(tree, highlightTheme.match, (from, to, className) => {
58+
highlightTree(tree, highlightTheme, (from, to, className) => {
5659
tokenStarts.set(from, className);
5760
tokenEnds.set(to, className);
5861
});

Diff for: ‎src/components/MDX/Heading.tsx

+8
Original file line numberDiff line numberDiff line change
@@ -88,3 +88,11 @@ export const H4 = ({className, ...props}: HeadingProps) => (
8888
{...props}
8989
/>
9090
);
91+
92+
export const H5 = ({className, ...props}: HeadingProps) => (
93+
<Heading
94+
as="h5"
95+
className={cn(className, 'text-lg font-display font-bold leading-9 my-2')}
96+
{...props}
97+
/>
98+
);

Diff for: ‎src/components/MDX/MDXComponents.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import {CodeDiagram} from './CodeDiagram';
1111
import ConsoleBlock from './ConsoleBlock';
1212
import ExpandableCallout from './ExpandableCallout';
1313
import ExpandableExample from './ExpandableExample';
14-
import {H1, H2, H3, H4} from './Heading';
14+
import {H1, H2, H3, H4, H5} from './Heading';
1515
import InlineCode from './InlineCode';
1616
import Intro from './Intro';
1717
import BlogCard from './BlogCard';
@@ -388,6 +388,7 @@ export const MDXComponents = {
388388
h2: H2,
389389
h3: H3,
390390
h4: H4,
391+
h5: H5,
391392
hr: Divider,
392393
a: Link,
393394
img: Image,

Diff for: ‎src/components/MDX/Sandpack/Console.tsx

+4-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,10 @@ import cn from 'classnames';
55
import {useState, useRef, useEffect} from 'react';
66
import {IconChevron} from 'components/Icon/IconChevron';
77

8-
import {SandpackCodeViewer, useSandpack} from '@codesandbox/sandpack-react';
8+
import {
9+
SandpackCodeViewer,
10+
useSandpack,
11+
} from '@codesandbox/sandpack-react/unstyled';
912
import type {SandpackMessageConsoleMethods} from '@codesandbox/sandpack-client';
1013

1114
const getType = (

Diff for: ‎src/components/MDX/Sandpack/CustomPreset.tsx

+1-22
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,8 @@ import {
77
useSandpack,
88
useActiveCode,
99
SandpackCodeEditor,
10-
// SandpackReactDevTools,
1110
SandpackLayout,
12-
} from '@codesandbox/sandpack-react';
11+
} from '@codesandbox/sandpack-react/unstyled';
1312
import cn from 'classnames';
1413

1514
import {IconChevron} from 'components/Icon/IconChevron';
@@ -19,14 +18,8 @@ import {Preview} from './Preview';
1918
import {useSandpackLint} from './useSandpackLint';
2019

2120
export const CustomPreset = memo(function CustomPreset({
22-
showDevTools,
23-
onDevToolsLoad,
24-
devToolsLoaded,
2521
providedFiles,
2622
}: {
27-
showDevTools: boolean;
28-
devToolsLoaded: boolean;
29-
onDevToolsLoad: () => void;
3023
providedFiles: Array<string>;
3124
}) {
3225
const {lintErrors, lintExtensions} = useSandpackLint();
@@ -41,9 +34,6 @@ export const CustomPreset = memo(function CustomPreset({
4134
const isExpandable = lineCount > 16;
4235
return (
4336
<SandboxShell
44-
showDevTools={showDevTools}
45-
onDevToolsLoad={onDevToolsLoad}
46-
devToolsLoaded={devToolsLoaded}
4737
providedFiles={providedFiles}
4838
lintErrors={lintErrors}
4939
lintExtensions={lintExtensions}
@@ -53,16 +43,11 @@ export const CustomPreset = memo(function CustomPreset({
5343
});
5444

5545
const SandboxShell = memo(function SandboxShell({
56-
showDevTools,
57-
devToolsLoaded,
5846
providedFiles,
5947
lintErrors,
6048
lintExtensions,
6149
isExpandable,
6250
}: {
63-
showDevTools: boolean;
64-
devToolsLoaded: boolean;
65-
onDevToolsLoad: () => void;
6651
providedFiles: Array<string>;
6752
lintErrors: Array<any>;
6853
lintExtensions: Array<any>;
@@ -81,7 +66,6 @@ const SandboxShell = memo(function SandboxShell({
8166
<NavigationBar providedFiles={providedFiles} />
8267
<SandpackLayout
8368
className={cn(
84-
showDevTools && devToolsLoaded && 'sp-layout-devtools',
8569
!(isExpandable || isExpanded) && 'rounded-b-lg overflow-hidden',
8670
isExpanded && 'sp-layout-expanded'
8771
)}>
@@ -123,11 +107,6 @@ const SandboxShell = memo(function SandboxShell({
123107
</button>
124108
)}
125109
</SandpackLayout>
126-
127-
{/* {showDevTools && (
128-
// @ts-ignore TODO(@danilowoz): support devtools
129-
<SandpackReactDevTools onLoadModule={onDevToolsLoad} />
130-
)} */}
131110
</div>
132111
</>
133112
);

Diff for: ‎src/components/MDX/Sandpack/DownloadButton.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
*/
44

55
import {useSyncExternalStore} from 'react';
6-
import {useSandpack} from '@codesandbox/sandpack-react';
6+
import {useSandpack} from '@codesandbox/sandpack-react/unstyled';
77
import {IconDownload} from '../../Icon/IconDownload';
88
export interface DownloadButtonProps {}
99

Diff for: ‎src/components/MDX/Sandpack/LoadingOverlay.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import {
44
LoadingOverlayState,
55
OpenInCodeSandboxButton,
66
useSandpack,
7-
} from '@codesandbox/sandpack-react';
7+
} from '@codesandbox/sandpack-react/unstyled';
88
import {useEffect} from 'react';
99

1010
const FADE_ANIMATION_DURATION = 200;

Diff for: ‎src/components/MDX/Sandpack/NavigationBar.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import {
1515
FileTabs,
1616
useSandpack,
1717
useSandpackNavigation,
18-
} from '@codesandbox/sandpack-react';
18+
} from '@codesandbox/sandpack-react/unstyled';
1919
import {OpenInCodeSandboxButton} from './OpenInCodeSandboxButton';
2020
import {ResetButton} from './ResetButton';
2121
import {DownloadButton} from './DownloadButton';

Diff for: ‎src/components/MDX/Sandpack/OpenInCodeSandboxButton.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
* Copyright (c) Facebook, Inc. and its affiliates.
33
*/
44

5-
import {UnstyledOpenInCodeSandboxButton} from '@codesandbox/sandpack-react';
5+
import {UnstyledOpenInCodeSandboxButton} from '@codesandbox/sandpack-react/unstyled';
66
import {IconNewPage} from '../../Icon/IconNewPage';
77

88
export const OpenInCodeSandboxButton = () => {

Diff for: ‎src/components/MDX/Sandpack/Preview.tsx

+2-15
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
/* eslint-disable react-hooks/exhaustive-deps */
66
import {useRef, useState, useEffect, useMemo, useId} from 'react';
7-
import {useSandpack, SandpackStack} from '@codesandbox/sandpack-react';
7+
import {useSandpack, SandpackStack} from '@codesandbox/sandpack-react/unstyled';
88
import cn from 'classnames';
99
import {ErrorMessage} from './ErrorMessage';
1010
import {SandpackConsole} from './Console';
@@ -42,14 +42,7 @@ export function Preview({
4242
null
4343
);
4444

45-
let {
46-
error: rawError,
47-
registerBundler,
48-
unregisterBundler,
49-
errorScreenRegisteredRef,
50-
openInCSBRegisteredRef,
51-
loadingScreenRegisteredRef,
52-
} = sandpack;
45+
let {error: rawError, registerBundler, unregisterBundler} = sandpack;
5346

5447
if (
5548
rawError &&
@@ -88,12 +81,6 @@ export function Preview({
8881
const clientId = useId();
8982
const iframeRef = useRef<HTMLIFrameElement | null>(null);
9083

91-
// SandpackPreview immediately registers the custom screens/components so the bundler does not render any of them
92-
// TODO: why are we doing this during render?
93-
openInCSBRegisteredRef.current = true;
94-
errorScreenRegisteredRef.current = true;
95-
loadingScreenRegisteredRef.current = true;
96-
9784
const sandpackIdle = sandpack.status === 'idle';
9885

9986
useEffect(function createBundler() {

Diff for: ‎src/components/MDX/Sandpack/SandpackRoot.tsx

+4-11
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@
22
* Copyright (c) Facebook, Inc. and its affiliates.
33
*/
44

5-
import {Children, useState} from 'react';
5+
import {Children} from 'react';
66
import * as React from 'react';
7-
import {SandpackProvider} from '@codesandbox/sandpack-react';
7+
import {SandpackProvider} from '@codesandbox/sandpack-react/unstyled';
88
import {SandpackLogLevel} from '@codesandbox/sandpack-client';
99
import {CustomPreset} from './CustomPreset';
1010
import {createFileMap} from './createFileMap';
@@ -13,7 +13,6 @@ import {CustomTheme} from './Themes';
1313
type SandpackProps = {
1414
children: React.ReactNode;
1515
autorun?: boolean;
16-
showDevTools?: boolean;
1716
};
1817

1918
const sandboxStyle = `
@@ -67,8 +66,7 @@ ul {
6766
`.trim();
6867

6968
function SandpackRoot(props: SandpackProps) {
70-
let {children, autorun = true, showDevTools = false} = props;
71-
const [devToolsLoaded, setDevToolsLoaded] = useState(false);
69+
let {children, autorun = true} = props;
7270
const codeSnippets = Children.toArray(children) as React.ReactElement[];
7371
const files = createFileMap(codeSnippets);
7472

@@ -90,12 +88,7 @@ function SandpackRoot(props: SandpackProps) {
9088
bundlerURL: 'https://1e4ad8f7.sandpack-bundler-4bw.pages.dev',
9189
logLevel: SandpackLogLevel.None,
9290
}}>
93-
<CustomPreset
94-
showDevTools={showDevTools}
95-
onDevToolsLoad={() => setDevToolsLoaded(true)}
96-
devToolsLoaded={devToolsLoaded}
97-
providedFiles={Object.keys(files)}
98-
/>
91+
<CustomPreset providedFiles={Object.keys(files)} />
9992
</SandpackProvider>
10093
</div>
10194
);

Diff for: ‎src/components/MDX/Sandpack/createFileMap.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
* Copyright (c) Facebook, Inc. and its affiliates.
33
*/
44

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

77
export const createFileMap = (codeSnippets: any) => {
88
return codeSnippets.reduce(

0 commit comments

Comments
 (0)