[beta] upgrade sandpack and refactor sandpack.css

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.3",
     "@docsearch/css": "3.0.0-alpha.41",
     "@docsearch/react": "3.0.0-alpha.41",
     "@headlessui/react": "^1.3.0",

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,29 @@ const CodeBlock = function CodeBlock({
   const decorators = getDecoratedLineInfo();
   return (
     <div
-      translate="no"
       className={cn(
+        'sandpack sandpack--codeblock',
         'rounded-lg h-full w-full overflow-x-auto flex items-center bg-wash dark:bg-gray-95 shadow-lg',
         !noMargin && 'my-8'
       )}>
       <SandpackProvider
+        files={{
+          [filename]: {
+            code: children.trimEnd(),
+          },
+        }}
         customSetup={{
           entry: filename,
-          files: {
-            [filename]: {
-              code: children.trimEnd(),
-            },
-          },
-        }}>
-        <SandpackThemeProvider theme={CustomTheme}>
-          <SandpackCodeViewer
-            key={children.trimEnd()}
-            showLineNumbers={false}
-            decorators={decorators}
-          />
-        </SandpackThemeProvider>
+        }}
+        options={{
+          initMode: 'immediate',
+        }}
+        theme={CustomTheme}>
+        <SandpackCodeViewer
+          key={children.trimEnd()}
+          showLineNumbers={false}
+          decorators={decorators}
+        />
       </SandpackProvider>
     </div>
   );

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

@@ -8,20 +8,17 @@ import {
   useSandpack,
   useActiveCode,
   SandpackCodeEditor,
-  SandpackThemeProvider,
-  SandpackReactDevTools,
+  // SandpackReactDevTools,
+  SandpackLayout,
 } 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';
-import {useSandpackLint} from './useSandpackLint';
 
-// Workaround for https://github.com/reactjs/reactjs.org/issues/4686#issuecomment-1137402613.
-const emptyArray: Array<any> = [];
+import {useSandpackLint} from './useSandpackLint';
 
 export function CustomPreset({
   isSingleFile,
@@ -41,11 +38,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 (
@@ -54,59 +51,57 @@ export function CustomPreset({
         className="shadow-lg dark:shadow-lg-dark rounded-lg"
         ref={containerRef}>
         <NavigationBar showDownload={isSingleFile} />
-        <SandpackThemeProvider theme={CustomTheme}>
-          <div
-            ref={sandpack.lazyAnchorRef}
-            className={cn(
-              'sp-layout sp-custom-layout',
-              showDevTools && devToolsLoaded && 'sp-layout-devtools',
-              isExpanded && 'sp-layout-expanded'
-            )}>
-            <SandpackCodeEditor
-              showLineNumbers
-              showInlineErrors
-              showTabs={false}
-              showRunButton={false}
-              extensions={lintExtensions}
-              extensionsKeymap={emptyArray}
-            />
-            <Preview
-              className="order-last xl:order-2"
-              isExpanded={isExpanded}
-              lintErrors={lintErrors}
-            />
-            {isExpandable && (
-              <button
-                translate="yes"
-                className="flex text-base justify-between dark:border-card-dark bg-wash dark:bg-card-dark items-center z-10 rounded-t-none p-1 w-full order-2 xl:order-last border-b-1 relative top-0"
-                onClick={() => {
-                  const nextIsExpanded = !isExpanded;
-                  flushSync(() => {
-                    setIsExpanded(nextIsExpanded);
-                  });
-                  if (!nextIsExpanded && containerRef.current !== null) {
-                    scrollIntoView(containerRef.current, {
-                      scrollMode: 'if-needed',
-                      block: 'nearest',
-                      inline: 'nearest',
-                    });
-                  }
-                }}>
-                <span className="flex p-2 focus:outline-none text-primary dark:text-primary-dark">
-                  <IconChevron
-                    className="inline mr-1.5 text-xl"
-                    displayDirection={isExpanded ? 'up' : 'down'}
-                  />
-                  {isExpanded ? 'Show less' : 'Show more'}
-                </span>
-              </button>
-            )}
-          </div>
 
-          {showDevTools && (
-            <SandpackReactDevTools onLoadModule={onDevToolsLoad} />
+        <SandpackLayout
+          className={cn(
+            showDevTools && devToolsLoaded && 'sp-layout-devtools',
+            !isExpandable && 'rounded-b-lg overflow-hidden',
+            isExpanded && 'sp-layout-expanded'
+          )}>
+          <SandpackCodeEditor
+            showLineNumbers
+            showInlineErrors
+            showTabs={false}
+            showRunButton={false}
+            extensions={lintExtensions}
+          />
+          <Preview
+            className="order-last xl:order-2"
+            isExpanded={isExpanded}
+            lintErrors={lintErrors}
+          />
+          {isExpandable && (
+            <button
+              translate="yes"
+              className="sandpack-expand flex text-base justify-between dark:border-card-dark bg-wash dark:bg-card-dark items-center z-10 p-1 w-full order-2 xl:order-last border-b-1 relative top-0"
+              onClick={() => {
+                const nextIsExpanded = !isExpanded;
+                flushSync(() => {
+                  setIsExpanded(nextIsExpanded);
+                });
+                if (!nextIsExpanded && containerRef.current !== null) {
+                  scrollIntoView(containerRef.current, {
+                    scrollMode: 'if-needed',
+                    block: 'nearest',
+                    inline: 'nearest',
+                  });
+                }
+              }}>
+              <span className="flex p-2 focus:outline-none text-primary dark:text-primary-dark">
+                <IconChevron
+                  className="inline mr-1.5 text-xl"
+                  displayDirection={isExpanded ? 'up' : 'down'}
+                />
+                {isExpanded ? 'Show less' : 'Show more'}
+              </span>
+            </button>
           )}
-        </SandpackThemeProvider>
+        </SandpackLayout>
+
+        {/* {showDevTools && (
+          // @ts-ignore TODO(@danilowoz): support devtools
+          <SandpackReactDevTools onLoadModule={onDevToolsLoad} />
+        )} */}
       </div>
     </>
   );

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

@@ -15,31 +15,31 @@ const getFileName = (filePath: string): string => {
 
 export function FilesDropdown() {
   const {sandpack} = useSandpack();
-  const {openPaths, setActiveFile, activePath} = sandpack;
+  const {visibleFiles, setActiveFile, activeFile} = sandpack;
   return (
-    <Listbox value={activePath} onChange={setActiveFile}>
+    <Listbox value={activeFile} onChange={setActiveFile}>
       <Listbox.Button>
         {({open}) => (
           <span
             className={cn(
               'h-full py-2 px-1 mt-px -mb-px flex border-b-2 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)}
             <span className="ml-2">
               <IconChevron displayDirection={open ? 'up' : 'down'} />
             </span>
           </span>
         )}
       </Listbox.Button>
       <Listbox.Options className="absolute mt-0.5 bg-card dark:bg-card-dark px-2 left-0 right-0 mx-0 rounded-b-lg border-1 border-border dark:border-border-dark rounded-sm shadow-md">
-        {openPaths.map((filePath: string) => (
+        {visibleFiles.map((filePath: string) => (
           <Listbox.Option
             key={filePath}
             value={filePath}
             className={cn(
               'text-md mx-2 my-4 cursor-pointer',
-              filePath === activePath && 'text-link dark:text-link-dark'
+              filePath === activeFile && 'text-link dark:text-link-dark'
             )}>
             {getFileName(filePath)}
           </Listbox.Option>

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,23 +31,23 @@ export function NavigationBar({showDownload}: {showDownload: boolean}) {
   }, [dropdownActive]);
 
   React.useEffect(() => {
-    if (openPaths.length > 1) {
+    if (visibleFiles.length > 1) {
       resizeHandler();
       window.addEventListener('resize', resizeHandler);
       return () => {
         window.removeEventListener('resize', resizeHandler);
       };
     }
     return;
-  }, [openPaths.length, resizeHandler]);
+  }, [visibleFiles.length, resizeHandler]);
 
   const handleReset = () => {
     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="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 text-lg">
       <div className="px-4 lg:px-6">
         {dropdownActive ? <FilesDropdown /> : <FileTabs />}
       </div>

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,16 +156,16 @@ export function Preview({
   // The best way to test it is to actually go through some challenges.
 
   return (
-    <div
-      className={cn('sp-stack', className)}
+    <SandpackStack
+      className={className}
       style={{
         // TODO: clean up this mess.
         ...customStyle,
         ...overrideStyle,
       }}>
       <div
         className={cn(
-          'p-0 sm:p-2 md:p-4 lg:p-8 md:bg-card md:dark:bg-wash-dark h-full relative md:rounded-b-lg lg:rounded-b-none',
+          'p-0 sm:p-2 md:p-4 lg:p-8 bg-card dark:bg-wash-dark h-full relative md:rounded-b-lg lg:rounded-b-none',
           // Allow content to be scrolled if it's too high to fit.
           // Note we don't want this in the expanded state
           // because it breaks position: sticky (and isn't needed anyway).
@@ -172,7 +179,7 @@ export function Preview({
               : isExpanded
               ? 'sticky'
               : undefined,
-            top: isExpanded ? '2rem' : undefined,
+            top: isExpanded ? '4rem' : undefined,
           }}>
           <iframe
             ref={iframeRef}
@@ -206,11 +213,12 @@ export function Preview({
           </div>
         )}
         <LoadingOverlay
+          showOpenInCodeSandbox
           clientId={clientId.current}
           loading={!isReady && iframeComputedHeight === null}
         />
       </div>
       {!error && <SandpackConsole />}
-    </div>
+    </SandpackStack>
   );
 }