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/IconInspect.tsx

@@ -0,0 +1,25 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import * as React from 'react';
+
+export const IconInspect = React.memo<JSX.IntrinsicElements['svg']>(
+  function IconInspect({className, ...rest}) {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        className={className}
+        viewBox="0 0 203 203"
+        width=".9em"
+        height=".9em"
+        fill="currentColor"
+        {...rest}>
+        <path d="M136.159 63.8778L156.979 63.8778V25.2093C156.979 22.4484 155.883 19.8005 153.93 17.8482C151.978 15.8959 149.33 14.7991 146.569 14.7991L11.2354 14.7991C8.47459 14.7991 5.82622 15.8959 3.87429 17.8482C1.92237 19.8005 0.826178 22.4484 0.826178 25.2093L0.826172 160.543C0.826172 163.304 1.92236 165.952 3.87428 167.904C5.82622 169.856 8.47458 170.953 11.2354 170.953H47.3955V150.132H21.6462L21.6462 35.6195L136.159 35.6195V63.8778Z" />
+        <path d="M60.1716 70.2329C57.7899 69.3855 55.4922 71.6832 56.3396 74.0649L89.241 166.542C89.9797 168.619 92.6303 169.216 94.1887 167.658L112 139.5L157.93 184C159.102 185.172 161.001 185.172 162.173 184L170.312 175.861C171.484 174.689 171.484 172.789 170.312 171.618L124.382 127.118L153.765 108.082C155.323 106.524 154.725 103.873 152.649 103.134L60.1716 70.2329Z" />
+      </svg>
+    );
+  }
+);
+
+IconInspect.displayName = 'IconInspect';

beta/src/components/Icon/IconNewPage.tsx

@@ -5,14 +5,15 @@
 import * as React from 'react';
 
 export const IconNewPage = React.memo<JSX.IntrinsicElements['svg']>(
-  function IconNewPage({className}) {
+  function IconNewPage({className, ...rest}) {
     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"
+        {...rest}>
         <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,20 +10,29 @@ 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';
 import {CustomTheme} from './Themes';
 
 export function CustomPreset({
   isSingleFile,
-  onReset,
+  showDevTools,
+  onOpenDevTools,
+  onDevToolsLoad,
+  devToolsLoaded,
 }: {
   isSingleFile: boolean;
-  onReset: () => void;
+  showDevTools: boolean;
+  devToolsLoaded: boolean;
+  onOpenDevTools: (refresh: () => void) => void;
+  onDevToolsLoad: () => void;
 }) {
   const lineCountRef = React.useRef<{[key: string]: number}>({});
   const containerRef = React.useRef<HTMLDivElement>(null);
@@ -50,11 +59,17 @@ export function CustomPreset({
       <div
         className="shadow-lg dark:shadow-lg-dark rounded-lg"
         ref={containerRef}>
-        <NavigationBar showDownload={isSingleFile} onReset={onReset} />
+        <NavigationBar
+          showDownload={isSingleFile}
+          onOpenDevTools={onOpenDevTools}
+        />
         <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 +92,7 @@ export function CustomPreset({
                 maxHeight: isExpanded ? '' : 406,
               }}
             />
+
             {isExpandable && (
               <button
                 translate="yes"
@@ -104,6 +120,10 @@ export function CustomPreset({
               </button>
             )}
           </div>
+
+          {showDevTools && (
+            <SandpackReactDevTools onLoadModule={onDevToolsLoad} />
+          )}
         </SandpackThemeProvider>
       </div>
     </>

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

@@ -0,0 +1,25 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import * as React from 'react';
+import {IconInspect} from '../../Icon/IconInspect';
+export interface ResetButtonProps {
+  onClick: () => void;
+}
+
+export const DevToolsButton: React.FC<ResetButtonProps> = ({onClick}) => {
+  return (
+    <button
+      className="text-sm text-primary dark:text-primary-dark inline-flex items-center hover:text-link duration-100 ease-in transition mx-1"
+      onClick={onClick}
+      title="Open React devtools"
+      type="button">
+      <IconInspect
+        className="inline mb-0.5 ml-1 mr-0.5 relative"
+        style={{top: 2}}
+      />
+      <span className="hidden md:block">Inspect</span>
+    </button>
+  );
+};

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

@@ -3,22 +3,29 @@
  */
 
 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';
 import {FilesDropdown} from './FilesDropdown';
+import {DevToolsButton} from './DevToolsButton';
 
 export function NavigationBar({
   showDownload,
-  onReset,
+  onOpenDevTools,
 }: {
   showDownload: boolean;
-  onReset: () => void;
+  onOpenDevTools: (refresh: () => void) => void;
 }) {
   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 +48,11 @@ export function NavigationBar({
     return;
   }, [openPaths.length, resizeHandler]);
 
+  const onReset = () => {
+    sandpack.resetAllFiles();
+    refresh();
+  };
+
   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">
@@ -51,7 +63,8 @@ export function NavigationBar({
         translate="yes">
         {showDownload && <DownloadButton />}
         <ResetButton onReset={onReset} />
-        <OpenInCodeSandboxButton className="ml-2 md:ml-4" />
+        <OpenInCodeSandboxButton />
+        <DevToolsButton onClick={() => onOpenDevTools(refresh)} />
       </div>
     </div>
   );

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

@@ -3,29 +3,21 @@
  */
 
 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"
+        width=".8em"
+        height=".8em"
+        style={{top: 1}}
+      />
+      <span className="hidden md:block">Fork</span>
+    </UnstyledOpenInCodeSandboxButton>
   );
 };