diff --git a/beta/package.json b/beta/package.json index af88884e7c6..de26b3486e5 100644 --- a/beta/package.json +++ b/beta/package.json @@ -22,7 +22,7 @@ "check-all": "npm-run-all prettier lint:fix tsc" }, "dependencies": { - "@codesandbox/sandpack-react": "v0.19.8-experimental.7", + "@codesandbox/sandpack-react": "1.7.2", "@docsearch/css": "3.0.0-alpha.41", "@docsearch/react": "3.0.0-alpha.41", "@headlessui/react": "^1.7.0", diff --git a/beta/patches/@codesandbox+sandpack-react+0.19.8-experimental.4.patch b/beta/patches/@codesandbox+sandpack-react+0.19.8-experimental.4.patch deleted file mode 100644 index 2298cbd1aa1..00000000000 --- a/beta/patches/@codesandbox+sandpack-react+0.19.8-experimental.4.patch +++ /dev/null @@ -1,37 +0,0 @@ -diff --git a/node_modules/@codesandbox/sandpack-react/dist/esm/index.js b/node_modules/@codesandbox/sandpack-react/dist/esm/index.js -index ced9bd3..7e5e366 100644 ---- a/node_modules/@codesandbox/sandpack-react/dist/esm/index.js -+++ b/node_modules/@codesandbox/sandpack-react/dist/esm/index.js -@@ -566,17 +566,16 @@ var REACT_TEMPLATE = { - }, - "/index.js": { - code: `import React, { StrictMode } from "react"; --import ReactDOM from "react-dom"; -+import { createRoot } from "react-dom/client"; - import "./styles.css"; - - import App from "./App"; - --const rootElement = document.getElementById("root"); --ReactDOM.render( -+const root = createRoot(document.getElementById("root")); -+root.render( - - -- , -- rootElement -+ - );` - }, - "/styles.css": { -@@ -611,8 +610,8 @@ h1 { - } - }, - dependencies: { -- react: "^17.0.0", -- "react-dom": "^17.0.0", -+ react: "^18.0.0", -+ "react-dom": "^18.0.0", - "react-scripts": "^4.0.0" - }, - entry: "/index.js", diff --git a/beta/src/components/MDX/CodeBlock/CodeBlock.tsx b/beta/src/components/MDX/CodeBlock/CodeBlock.tsx index 965bc816ab7..85ff20af027 100644 --- a/beta/src/components/MDX/CodeBlock/CodeBlock.tsx +++ b/beta/src/components/MDX/CodeBlock/CodeBlock.tsx @@ -6,7 +6,6 @@ import cn from 'classnames'; import { SandpackCodeViewer, SandpackProvider, - SandpackThemeProvider, } from '@codesandbox/sandpack-react'; import rangeParser from 'parse-numeric-range'; import {CustomTheme} from '../Sandpack/Themes'; @@ -68,27 +67,34 @@ const CodeBlock = function CodeBlock({ const decorators = getDecoratedLineInfo(); return (
- - - + }} + options={{ + initMode: 'immediate', + }} + theme={CustomTheme}> +
); diff --git a/beta/src/components/MDX/Sandpack/CustomPreset.tsx b/beta/src/components/MDX/Sandpack/CustomPreset.tsx index 7dd6fa55298..47eb57def82 100644 --- a/beta/src/components/MDX/Sandpack/CustomPreset.tsx +++ b/beta/src/components/MDX/Sandpack/CustomPreset.tsx @@ -7,19 +7,16 @@ import { useSandpack, useActiveCode, SandpackCodeEditor, - SandpackThemeProvider, - SandpackReactDevTools, + // SandpackReactDevTools, + SandpackLayout, } from '@codesandbox/sandpack-react'; import cn from 'classnames'; import {IconChevron} from 'components/Icon/IconChevron'; import {NavigationBar} from './NavigationBar'; import {Preview} from './Preview'; -import {CustomTheme} from './Themes'; -import {useSandpackLint} from './useSandpackLint'; -// Workaround for https://github.com/reactjs/reactjs.org/issues/4686#issuecomment-1137402613. -const emptyArray: Array = []; +import {useSandpackLint} from './useSandpackLint'; export function CustomPreset({ showDevTools, @@ -39,11 +36,11 @@ export function CustomPreset({ const {code} = useActiveCode(); const [isExpanded, setIsExpanded] = React.useState(false); - const {activePath} = sandpack; - if (!lineCountRef.current[activePath]) { - lineCountRef.current[activePath] = code.split('\n').length; + const {activeFile} = sandpack; + if (!lineCountRef.current[activeFile]) { + lineCountRef.current[activeFile] = code.split('\n').length; } - const lineCount = lineCountRef.current[activePath]; + const lineCount = lineCountRef.current[activeFile]; const isExpandable = lineCount > 16 || isExpanded; return ( @@ -52,64 +49,61 @@ export function CustomPreset({ className="shadow-lg dark:shadow-lg-dark rounded-lg" ref={containerRef}> - -
- - - {isExpandable && ( - - )} -
- - {showDevTools && ( - + } + }}> + + + {isExpanded ? 'Show less' : 'Show more'} + + )} - + + + {/* {showDevTools && ( + // @ts-ignore TODO(@danilowoz): support devtools + + )} */} ); diff --git a/beta/src/components/MDX/Sandpack/NavigationBar.tsx b/beta/src/components/MDX/Sandpack/NavigationBar.tsx index 9adf0fca385..27164404afb 100644 --- a/beta/src/components/MDX/Sandpack/NavigationBar.tsx +++ b/beta/src/components/MDX/Sandpack/NavigationBar.tsx @@ -40,10 +40,10 @@ export function NavigationBar({providedFiles}: {providedFiles: Array}) { // By default, show the dropdown because all tabs may not fit. // We don't know whether they'll fit or not until after hydration: const [showDropdown, setShowDropdown] = React.useState(true); - const {openPaths, clients, setActiveFile, activePath} = sandpack; + const {activeFile, setActiveFile, visibleFiles, clients} = sandpack; const clientId = Object.keys(clients)[0]; const {refresh} = useSandpackNavigation(clientId); - const isMultiFile = openPaths.length > 1; + const isMultiFile = visibleFiles.length > 1; const hasJustToggledDropdown = React.useRef(false); // Keep track of whether we can show all tabs or just the dropdown. @@ -88,9 +88,9 @@ export function NavigationBar({providedFiles}: {providedFiles: Array}) { }; return ( -
+
- +
}) { )}>
- + {({open}) => ( // If tabs don't fit, display the dropdown instead. // The dropdown is absolutely positioned inside the // space that's taken by the (invisible) tab list. -
}) { 'h-full py-2 px-1 mt-px -mb-px flex border-b text-link dark:text-link-dark border-link dark:border-link-dark items-center text-md leading-tight truncate' )} style={{maxWidth: '160px'}}> - {getFileName(activePath)} + {getFileName(activeFile)} {isMultiFile && ( }) { )} -
+ )}
{isMultiFile && showDropdown && ( - {openPaths.map((filePath: string) => ( + {visibleFiles.map((filePath: string) => ( - {getFileName(filePath)} + as={React.Fragment}> + {({active}) => ( +
  • + {getFileName(filePath)} +
    • + )}     ))}     diff --git a/beta/src/components/MDX/Sandpack/Preview.tsx b/beta/src/components/MDX/Sandpack/Preview.tsx index cf1a595bcb5..8df69e8e6d8 100644 --- a/beta/src/components/MDX/Sandpack/Preview.tsx +++ b/beta/src/components/MDX/Sandpack/Preview.tsx @@ -4,12 +4,19 @@ /* eslint-disable react-hooks/exhaustive-deps */ import * as React from 'react'; -import {useSandpack, LoadingOverlay} from '@codesandbox/sandpack-react'; +import { + useSandpack, + LoadingOverlay, + SandpackStack, +} from '@codesandbox/sandpack-react'; import cn from 'classnames'; import {Error} from './Error'; import {SandpackConsole} from './Console'; import type {LintDiagnostic} from './useSandpackLint'; +/** + * TODO: can we use React.useId? + */ const generateRandomId = (): string => Math.floor(Math.random() * 10000).toString(); @@ -149,8 +156,8 @@ export function Preview({ // The best way to test it is to actually go through some challenges. return ( -