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.13-experimental.0",
     "@docsearch/css": "3.0.0-alpha.41",
     "@docsearch/react": "3.0.0-alpha.41",
     "@headlessui/react": "^1.3.0",
@@ -34,9 +34,9 @@
     "github-slugger": "^1.3.0",
     "next": "^12.0.3-canary.2",
     "parse-numeric-range": "^1.2.0",
-    "react": "18.0.0-alpha-930c9e7ee-20211015",
+    "react": "experimental",
     "react-collapsed": "3.1.0",
-    "react-dom": "18.0.0-alpha-930c9e7ee-20211015",
+    "react-dom": "experimental",
     "scroll-into-view-if-needed": "^2.2.25"
   },
   "devDependencies": {

beta/src/components/Icon/IconNewPage.tsx

@@ -5,14 +5,14 @@
 import * as React from 'react';
 
 export const IconNewPage = React.memo<JSX.IntrinsicElements['svg']>(
-  function IconNewPage({className}) {
+  function IconNewPage(props) {
     return (
       <svg
-        className={className}
         width="0.72em"
         height="0.72em"
         viewBox="0 0 13 13"
-        xmlns="http://www.w3.org/2000/svg">
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}>
         <path
           d="M4.72038 2.94824V4.28158H1.38704V11.6149H8.72038V8.28158H10.0537V12.2816C10.0537 12.4584 9.98347 12.628 9.85845 12.753C9.73343 12.878 9.56386 12.9482 9.38704 12.9482H0.720378C0.543567 12.9482 0.373997 12.878 0.248973 12.753C0.123949 12.628 0.0537109 12.4584 0.0537109 12.2816V3.61491C0.0537109 3.4381 0.123949 3.26853 0.248973 3.1435C0.373997 3.01848 0.543567 2.94824 0.720378 2.94824H4.72038ZM12.0537 0.948242V6.28158H10.7204V3.22358L5.52504 8.41958L4.58238 7.47691L9.77704 2.28158H6.72038V0.948242H12.0537Z"
           fill="currentColor"

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,9 +10,12 @@ import {
   useActiveCode,
   SandpackCodeEditor,
   SandpackThemeProvider,
+  SandpackReactDevTools,
 } from '@codesandbox/sandpack-react';
 import scrollIntoView from 'scroll-into-view-if-needed';
 
+import cn from 'classnames';
+
 import {IconChevron} from 'components/Icon/IconChevron';
 import {NavigationBar} from './NavigationBar';
 import {Preview} from './Preview';
@@ -21,9 +24,15 @@ import {CustomTheme} from './Themes';
 export function CustomPreset({
   isSingleFile,
   onReset,
+  showDevTools,
+  onDevToolsLoad,
+  devToolsLoaded,
 }: {
   isSingleFile: boolean;
+  showDevTools: boolean;
+  devToolsLoaded: boolean;
   onReset: () => void;
+  onDevToolsLoad: () => void;
 }) {
   const lineCountRef = React.useRef<{[key: string]: number}>({});
   const containerRef = React.useRef<HTMLDivElement>(null);
@@ -54,7 +63,10 @@ export function CustomPreset({
         <SandpackThemeProvider theme={CustomTheme}>
           <div
             ref={sandpack.lazyAnchorRef}
-            className="sp-layout rounded-t-none"
+            className={cn(
+              'sp-layout sp-custom-layout',
+              showDevTools && devToolsLoaded && 'sp-layout-devtools'
+            )}
             style={{
               // Prevent it from collapsing below the initial (non-loaded) height.
               // There has to be some better way to do this...
@@ -77,6 +89,7 @@ export function CustomPreset({
                 maxHeight: isExpanded ? '' : 406,
               }}
             />
+
             {isExpandable && (
               <button
                 translate="yes"
@@ -104,6 +117,10 @@ export function CustomPreset({
               </button>
             )}
           </div>
+
+          {showDevTools && (
+            <SandpackReactDevTools onLoadModule={onDevToolsLoad} />
+          )}
         </SandpackThemeProvider>
       </div>
     </>

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

@@ -3,7 +3,11 @@
  */
 
 import * as React from 'react';
-import {FileTabs, useSandpack} from '@codesandbox/sandpack-react';
+import {
+  FileTabs,
+  useSandpack,
+  useSandpackNavigation,
+} from '@codesandbox/sandpack-react';
 import {OpenInCodeSandboxButton} from './OpenInCodeSandboxButton';
 import {ResetButton} from './ResetButton';
 import {DownloadButton} from './DownloadButton';
@@ -18,7 +22,9 @@ export function NavigationBar({
 }) {
   const {sandpack} = useSandpack();
   const [dropdownActive, setDropdownActive] = React.useState(false);
-  const {openPaths} = sandpack;
+  const {openPaths, clients} = sandpack;
+  const clientId = Object.keys(clients)[0];
+  const {refresh} = useSandpackNavigation(clientId);
 
   const resizeHandler = React.useCallback(() => {
     const width = window.innerWidth || document.documentElement.clientWidth;
@@ -41,6 +47,13 @@ export function NavigationBar({
     return;
   }, [openPaths.length, resizeHandler]);
 
+  const handleReset = () => {
+    sandpack.resetAllFiles();
+    refresh();
+
+    onReset();
+  };
+
   return (
     <div className="bg-wash dark:bg-card-dark flex justify-between items-center relative z-10 border-b border-border dark:border-border-dark rounded-t-lg rounded-b-none">
       <div className="px-4 lg:px-6">
@@ -50,8 +63,8 @@ export function NavigationBar({
         className="px-3 flex items-center justify-end flex-grow text-right"
         translate="yes">
         {showDownload && <DownloadButton />}
-        <ResetButton onReset={onReset} />
-        <OpenInCodeSandboxButton className="ml-2 md:ml-4" />
+        <ResetButton onReset={handleReset} />
+        <OpenInCodeSandboxButton />
       </div>
     </div>
   );

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

@@ -3,29 +3,20 @@
  */
 
 import * as React from 'react';
-import {useCodeSandboxLink} from '@codesandbox/sandpack-react';
-import cn from 'classnames';
+import {UnstyledOpenInCodeSandboxButton} from '@codesandbox/sandpack-react';
 import {IconNewPage} from '../../Icon/IconNewPage';
 
-export const OpenInCodeSandboxButton = ({className}: {className?: string}) => {
-  const url = useCodeSandboxLink();
-
+export const OpenInCodeSandboxButton = () => {
   return (
-    <a
-      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"
+    <UnstyledOpenInCodeSandboxButton
+      className="text-sm text-primary dark:text-primary-dark inline-flex items-center hover:text-link duration-100 ease-in transition mx-1 ml-3 md:ml-1"
       title="Open in CodeSandbox">
-      <span className="hidden md:inline">
-        <IconNewPage className="inline mb-0.5 text-base" /> Fork
-      </span>
-      <span className="inline md:hidden">
-        <IconNewPage className="inline mb-0.5 text-base" /> Fork
-      </span>
-    </a>
+      <IconNewPage
+        className="inline mb-0.5 ml-1 mr-1 relative top-px"
+        width=".8em"
+        height=".8em"
+      />
+      <span className="hidden md:block">Fork</span>
+    </UnstyledOpenInCodeSandboxButton>
   );
 };

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

@@ -15,6 +15,7 @@ type SandpackProps = {
   children: React.ReactChildren;
   autorun?: boolean;
   setup?: SandpackSetup;
+  showDevTools?: boolean;
 };
 
 const sandboxStyle = `
@@ -64,8 +65,9 @@ ul {
 `.trim();
 
 function Sandpack(props: SandpackProps) {
-  let {children, setup, autorun = true} = props;
+  let {children, setup, autorun = true, showDevTools = false} = props;
   let [resetKey, setResetKey] = React.useState(0);
+  const [devToolsLoaded, setDevToolsLoaded] = React.useState(false);
   let codeSnippets = React.Children.toArray(children) as React.ReactElement[];
   let isSingleFile = true;
 
@@ -133,16 +135,25 @@ function Sandpack(props: SandpackProps) {
   }
 
   return (
-    <div className="my-8" translate="no">
+    <div className="sandpack-container my-8" translate="no">
       <SandpackProvider
-        key={key}
         template="react"
         customSetup={{...setup, files: files}}
-        autorun={autorun}>
+        autorun={autorun}
+        key={key}>
         <CustomPreset
           isSingleFile={isSingleFile}
+          showDevTools={showDevTools}
+          onDevToolsLoad={() => setDevToolsLoaded(true)}
+          devToolsLoaded={devToolsLoaded}
           onReset={() => {
-            setResetKey((k) => k + 1);
+            /**
+             * Leverage Sandpack API to reset the changes
+             * and refresh the preview component
+             */
+            if (process.env.NODE_ENV !== 'production') {
+              setResetKey((k) => k + 1);
+            }
           }}
         />
       </SandpackProvider>