From f8745311db8314cf0b5232e0e8d04b98b8450ff9 Mon Sep 17 00:00:00 2001 From: Danilo Woznica Date: Wed, 27 Jul 2022 20:47:33 +0100 Subject: [PATCH 1/6] upgrade sandpack and address breaking changes --- beta/package.json | 2 +- .../components/MDX/CodeBlock/CodeBlock.tsx | 29 ++-- .../components/MDX/Sandpack/CustomPreset.tsx | 8 +- .../components/MDX/Sandpack/FilesDropdown.tsx | 10 +- .../components/MDX/Sandpack/NavigationBar.tsx | 6 +- beta/src/components/MDX/Sandpack/Preview.tsx | 1 + .../components/MDX/Sandpack/SandpackRoot.tsx | 18 ++- beta/src/components/MDX/Sandpack/Themes.tsx | 51 +++--- beta/src/pages/_app.tsx | 1 - beta/src/pages/_document.tsx | 2 + beta/yarn.lock | 149 ++++++++++++++---- 11 files changed, 193 insertions(+), 84 deletions(-) diff --git a/beta/package.json b/beta/package.json index f6996879d38..fb869151234 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.3.0", "@docsearch/css": "3.0.0-alpha.41", "@docsearch/react": "3.0.0-alpha.41", "@headlessui/react": "^1.3.0", diff --git a/beta/src/components/MDX/CodeBlock/CodeBlock.tsx b/beta/src/components/MDX/CodeBlock/CodeBlock.tsx index 965bc816ab7..703f0169d0c 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'; @@ -74,21 +73,23 @@ const CodeBlock = function CodeBlock({ !noMargin && 'my-8' )}> - - - + }} + options={{ + initMode: 'immediate', + }} + theme={CustomTheme}> + ); diff --git a/beta/src/components/MDX/Sandpack/CustomPreset.tsx b/beta/src/components/MDX/Sandpack/CustomPreset.tsx index bb0f1c67169..d12eda14700 100644 --- a/beta/src/components/MDX/Sandpack/CustomPreset.tsx +++ b/beta/src/components/MDX/Sandpack/CustomPreset.tsx @@ -41,11 +41,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 ( diff --git a/beta/src/components/MDX/Sandpack/FilesDropdown.tsx b/beta/src/components/MDX/Sandpack/FilesDropdown.tsx index 68d068ad7c9..2c47de712c8 100644 --- a/beta/src/components/MDX/Sandpack/FilesDropdown.tsx +++ b/beta/src/components/MDX/Sandpack/FilesDropdown.tsx @@ -15,9 +15,9 @@ const getFileName = (filePath: string): string => { export function FilesDropdown() { const {sandpack} = useSandpack(); - const {openPaths, setActiveFile, activePath} = sandpack; + const {visibleFiles, setActiveFile, activeFile} = sandpack; return ( - + {({open}) => ( - {getFileName(activePath)} + {getFileName(activeFile)} @@ -33,13 +33,13 @@ export function FilesDropdown() { )} - {openPaths.map((filePath: string) => ( + {visibleFiles.map((filePath: string) => ( {getFileName(filePath)} diff --git a/beta/src/components/MDX/Sandpack/NavigationBar.tsx b/beta/src/components/MDX/Sandpack/NavigationBar.tsx index 6114ef6736c..2c9282f1a6f 100644 --- a/beta/src/components/MDX/Sandpack/NavigationBar.tsx +++ b/beta/src/components/MDX/Sandpack/NavigationBar.tsx @@ -16,7 +16,7 @@ import {FilesDropdown} from './FilesDropdown'; export function NavigationBar({showDownload}: {showDownload: boolean}) { const {sandpack} = useSandpack(); const [dropdownActive, setDropdownActive] = React.useState(false); - const {openPaths, clients} = sandpack; + const {visibleFiles, clients} = sandpack; const clientId = Object.keys(clients)[0]; const {refresh} = useSandpackNavigation(clientId); @@ -31,7 +31,7 @@ export function NavigationBar({showDownload}: {showDownload: boolean}) { }, [dropdownActive]); React.useEffect(() => { - if (openPaths.length > 1) { + if (visibleFiles.length > 1) { resizeHandler(); window.addEventListener('resize', resizeHandler); return () => { @@ -39,7 +39,7 @@ export function NavigationBar({showDownload}: {showDownload: boolean}) { }; } return; - }, [openPaths.length, resizeHandler]); + }, [visibleFiles.length, resizeHandler]); const handleReset = () => { sandpack.resetAllFiles(); diff --git a/beta/src/components/MDX/Sandpack/Preview.tsx b/beta/src/components/MDX/Sandpack/Preview.tsx index fe4ed45e9dc..ccc3999d0ba 100644 --- a/beta/src/components/MDX/Sandpack/Preview.tsx +++ b/beta/src/components/MDX/Sandpack/Preview.tsx @@ -206,6 +206,7 @@ export function Preview({ )} diff --git a/beta/src/components/MDX/Sandpack/SandpackRoot.tsx b/beta/src/components/MDX/Sandpack/SandpackRoot.tsx index 8a609b509fb..ecc40e0615d 100644 --- a/beta/src/components/MDX/Sandpack/SandpackRoot.tsx +++ b/beta/src/components/MDX/Sandpack/SandpackRoot.tsx @@ -7,7 +7,7 @@ import {SandpackProvider} from '@codesandbox/sandpack-react'; import {SandpackLogLevel} from '@codesandbox/sandpack-client'; import {CustomPreset} from './CustomPreset'; import {createFileMap} from './createFileMap'; - +import {CustomTheme} from './Themes'; import type {SandpackSetup} from '@codesandbox/sandpack-react'; type SandpackProps = { @@ -80,12 +80,16 @@ function SandpackRoot(props: SandpackProps) {
+ files={files} + customSetup={setup} + theme={CustomTheme} + options={{ + autorun, + initMode: 'user-visible', + initModeObserverOptions: {rootMargin: '1400px 0px'}, + bundlerURL: 'https://6b760a26.sandpack-bundler.pages.dev', + logLevel: SandpackLogLevel.None, + }}> ( <>{children} diff --git a/beta/src/pages/_document.tsx b/beta/src/pages/_document.tsx index 0c46ff5f208..b7b5bd45f17 100644 --- a/beta/src/pages/_document.tsx +++ b/beta/src/pages/_document.tsx @@ -4,6 +4,7 @@ import * as React from 'react'; import {Html, Head, Main, NextScript} from 'next/document'; +import {getSandpackCssText} from '@codesandbox/sandpack-react'; const MyDocument = () => { // @todo specify language in HTML? @@ -11,6 +12,7 @@ const MyDocument = () => { +