Sandpack: upgrade dependencies and adds ReactDevtools

beta/next-env.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="next" />
-/// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited

beta/package.json

@@ -21,7 +21,7 @@
     "check-all": "npm-run-all prettier lint:fix tsc"
   },
   "dependencies": {
-    "@codesandbox/sandpack-react": "^0.1.20",
+    "@codesandbox/sandpack-react": "^0.10.2",
     "@docsearch/css": "3.0.0-alpha.41",
     "@docsearch/react": "3.0.0-alpha.41",
     "@headlessui/react": "^1.3.0",
@@ -89,6 +89,10 @@
     "unist-util-visit": "^2.0.3",
     "webpack-bundle-analyzer": "^4.5.0"
   },
+  "resolutions": {
+    "@codemirror/gutter": "0.19.4",
+    "@codemirror/view": "0.19.14"
+  },
   "engines": {
     "node": ">=12.x"
   },

beta/src/components/MDX/APIAnatomy.tsx

@@ -42,7 +42,6 @@ const colors = [
 
 export function APIAnatomy({children}: APIAnatomyProps) {
   const [activeStep, setActiveStep] = React.useState<number | null>(null);
-  const ref = React.useRef<HTMLDivElement>();
 
   const {steps, code} = React.Children.toArray(children).reduce(
     (acc: AnatomyContent, child) => {
@@ -60,11 +59,7 @@ export function APIAnatomy({children}: APIAnatomyProps) {
           break;
         case 'pre':
           acc.code = (
-            <CodeBlock
-              ref={ref}
-              {...child.props.children.props}
-              noMargin={true}
-            />
+            <CodeBlock {...child.props.children.props} noMargin={true} />
           );
           break;
       }

beta/src/components/MDX/CodeBlock/CodeBlock.tsx

@@ -2,7 +2,6 @@
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
 
-import * as React from 'react';
 import cn from 'classnames';
 import {
   ClasserProvider,
@@ -21,22 +20,19 @@ interface InlineHiglight {
   endColumn: number;
 }
 
-const CodeBlock = React.forwardRef(function CodeBlock(
-  {
-    children,
-    className = 'language-js',
-    metastring,
-    noMargin,
-    noMarkers,
-  }: {
-    children: string;
-    className?: string;
-    metastring: string;
-    noMargin?: boolean;
-    noMarkers?: boolean;
-  },
-  ref?: React.Ref<HTMLDivElement>
-) {
+const CodeBlock = function CodeBlock({
+  children,
+  className = 'language-js',
+  metastring,
+  noMargin,
+  noMarkers,
+}: {
+  children: string;
+  className?: string;
+  metastring: string;
+  noMargin?: boolean;
+  noMarkers?: boolean;
+}) {
   const getDecoratedLineInfo = () => {
     if (!metastring) {
       return [];
@@ -95,7 +91,6 @@ const CodeBlock = React.forwardRef(function CodeBlock(
               'sp-cm': styles.codeViewer,
             }}>
             <SandpackCodeViewer
-              ref={ref}
               showLineNumbers={false}
               decorators={decorators}
             />
@@ -104,7 +99,7 @@ const CodeBlock = React.forwardRef(function CodeBlock(
       </SandpackProvider>
     </div>
   );
-});
+};
 
 export default CodeBlock;
 

beta/src/components/MDX/Sandpack/CustomPreset.tsx

@@ -10,6 +10,7 @@ import {
   useActiveCode,
   SandpackCodeEditor,
   SandpackThemeProvider,
+  SandpackReactDevTools,
 } from '@codesandbox/sandpack-react';
 import scrollIntoView from 'scroll-into-view-if-needed';
 
@@ -77,6 +78,7 @@ export function CustomPreset({
                 maxHeight: isExpanded ? '' : 406,
               }}
             />
+
             {isExpandable && (
               <button
                 translate="yes"
@@ -104,6 +106,8 @@ export function CustomPreset({
               </button>
             )}
           </div>
+
+          <SandpackReactDevTools />
         </SandpackThemeProvider>
       </div>
     </>

beta/src/components/MDX/Sandpack/OpenInCodeSandboxButton.tsx

@@ -3,29 +3,21 @@
  */
 
 import * as React from 'react';
-import {useCodeSandboxLink} from '@codesandbox/sandpack-react';
+import {UnstyledOpenInCodeSandboxButton} from '@codesandbox/sandpack-react';
 import cn from 'classnames';
 import {IconNewPage} from '../../Icon/IconNewPage';
 
 export const OpenInCodeSandboxButton = ({className}: {className?: string}) => {
-  const url = useCodeSandboxLink();
-
   return (
-    <a
+    <UnstyledOpenInCodeSandboxButton
       className={cn(
         'text-sm text-primary dark:text-primary-dark inline-flex items-center hover:text-link duration-100 ease-in transition mx-1',
         className
       )}
-      href={url}
-      rel="noreferrer noopener"
-      target="_blank"
       title="Open in CodeSandbox">
-      <span className="hidden md:inline">
-        <IconNewPage className="inline mb-0.5 text-base" /> Fork
-      </span>
-      <span className="inline md:hidden">
+      <span className="inline">
         <IconNewPage className="inline mb-0.5 text-base" /> Fork
       </span>
-    </a>
+    </UnstyledOpenInCodeSandboxButton>
   );
 };