Revert "[beta] upgrade sandpack and refactor sandpack.css (#4843)" (#4959)

This reverts commit 537e0a3.

Author: gaearon

beta/package.json

@@ -22,7 +22,7 @@
     "check-all": "npm-run-all prettier lint:fix tsc"
   },
   "dependencies": {
-    "@codesandbox/sandpack-react": "1.3.3",
+    "@codesandbox/sandpack-react": "v0.19.8-experimental.7",
     "@docsearch/css": "3.0.0-alpha.41",
     "@docsearch/react": "3.0.0-alpha.41",
     "@headlessui/react": "^1.3.0",

beta/patches/@codesandbox+sandpack-react+0.19.8-experimental.4.patch

@@ -0,0 +1,37 @@
+diff --git a/node_modules/@codesandbox/sandpack-react/dist/esm/index.js b/node_modules/@codesandbox/sandpack-react/dist/esm/index.js
+index ced9bd3..7e5e366 100644
+--- a/node_modules/@codesandbox/sandpack-react/dist/esm/index.js
++++ b/node_modules/@codesandbox/sandpack-react/dist/esm/index.js
+@@ -566,17 +566,16 @@ var REACT_TEMPLATE = {
+     },
+     "/index.js": {
+       code: `import React, { StrictMode } from "react";
+-import ReactDOM from "react-dom";
++import { createRoot } from "react-dom/client";
+ import "./styles.css";
+ 
+ import App from "./App";
+ 
+-const rootElement = document.getElementById("root");
+-ReactDOM.render(
++const root = createRoot(document.getElementById("root"));
++root.render(
+   <StrictMode>
+     <App />
+-  </StrictMode>,
+-  rootElement
++  </StrictMode>
+ );`
+     },
+     "/styles.css": {
+@@ -611,8 +610,8 @@ h1 {
+     }
+   },
+   dependencies: {
+-    react: "^17.0.0",
+-    "react-dom": "^17.0.0",
++    react: "^18.0.0",
++    "react-dom": "^18.0.0",
+     "react-scripts": "^4.0.0"
+   },
+   entry: "/index.js",

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

@@ -6,6 +6,7 @@ import cn from 'classnames';
 import {
   SandpackCodeViewer,
   SandpackProvider,
+  SandpackThemeProvider,
 } from '@codesandbox/sandpack-react';
 import rangeParser from 'parse-numeric-range';
 import {CustomTheme} from '../Sandpack/Themes';
@@ -67,29 +68,27 @@ 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,
-        }}
-        options={{
-          initMode: 'immediate',
-        }}
-        theme={CustomTheme}>
-        <SandpackCodeViewer
-          key={children.trimEnd()}
-          showLineNumbers={false}
-          decorators={decorators}
-        />
+          files: {
+            [filename]: {
+              code: children.trimEnd(),
+            },
+          },
+        }}>
+        <SandpackThemeProvider theme={CustomTheme}>
+          <SandpackCodeViewer
+            key={children.trimEnd()}
+            showLineNumbers={false}
+            decorators={decorators}
+          />
+        </SandpackThemeProvider>
       </SandpackProvider>
     </div>
   );

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

@@ -8,18 +8,21 @@ import {
   useSandpack,
   useActiveCode,
   SandpackCodeEditor,
-  // SandpackReactDevTools,
-  SandpackLayout,
+  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';
 import {useSandpackLint} from './useSandpackLint';
 
+// Workaround for https://github.com/reactjs/reactjs.org/issues/4686#issuecomment-1137402613.
+const emptyArray: Array<any> = [];
+
 export function CustomPreset({
   isSingleFile,
   showDevTools,
@@ -38,11 +41,11 @@ export function CustomPreset({
   const {code} = useActiveCode();
   const [isExpanded, setIsExpanded] = React.useState(false);
 
-  const {activeFile} = sandpack;
-  if (!lineCountRef.current[activeFile]) {
-    lineCountRef.current[activeFile] = code.split('\n').length;
+  const {activePath} = sandpack;
+  if (!lineCountRef.current[activePath]) {
+    lineCountRef.current[activePath] = code.split('\n').length;
   }
-  const lineCount = lineCountRef.current[activeFile];
+  const lineCount = lineCountRef.current[activePath];
   const isExpandable = lineCount > 16 || isExpanded;
 
   return (
@@ -51,57 +54,59 @@ export function CustomPreset({
         className="shadow-lg dark:shadow-lg-dark rounded-lg"
         ref={containerRef}>
         <NavigationBar showDownload={isSingleFile} />
-
-        <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',
+        <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);
                   });
-                }
-              }}>
-              <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>
-          )}
-        </SandpackLayout>
+                  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 && (
-          // @ts-ignore TODO(@danilowoz): support devtools
-          <SandpackReactDevTools onLoadModule={onDevToolsLoad} />
-        )} */}
+          {showDevTools && (
+            <SandpackReactDevTools onLoadModule={onDevToolsLoad} />
+          )}
+        </SandpackThemeProvider>
       </div>
     </>
   );

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

@@ -15,31 +15,31 @@ const getFileName = (filePath: string): string => {
 
 export function FilesDropdown() {
   const {sandpack} = useSandpack();
-  const {visibleFiles, setActiveFile, activeFile} = sandpack;
+  const {openPaths, setActiveFile, activePath} = sandpack;
   return (
-    <Listbox value={activeFile} onChange={setActiveFile}>
+    <Listbox value={activePath} 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(activeFile)}
+            {getFileName(activePath)}
             <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">
-        {visibleFiles.map((filePath: string) => (
+        {openPaths.map((filePath: string) => (
           <Listbox.Option
             key={filePath}
             value={filePath}
             className={cn(
               'text-md mx-2 my-4 cursor-pointer',
-              filePath === activeFile && 'text-link dark:text-link-dark'
+              filePath === activePath && '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 {visibleFiles, clients} = sandpack;
+  const {openPaths, 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 (visibleFiles.length > 1) {
+    if (openPaths.length > 1) {
       resizeHandler();
       window.addEventListener('resize', resizeHandler);
       return () => {
         window.removeEventListener('resize', resizeHandler);
       };
     }
     return;
-  }, [visibleFiles.length, resizeHandler]);
+  }, [openPaths.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 text-lg">
+    <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">
         {dropdownActive ? <FilesDropdown /> : <FileTabs />}
       </div>

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

@@ -4,19 +4,12 @@
 
 /* eslint-disable react-hooks/exhaustive-deps */
 import * as React from 'react';
-import {
-  useSandpack,
-  LoadingOverlay,
-  SandpackStack,
-} from '@codesandbox/sandpack-react';
+import {useSandpack, LoadingOverlay} 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();
 
@@ -156,16 +149,16 @@ export function Preview({
   // The best way to test it is to actually go through some challenges.
 
   return (
-    <SandpackStack
-      className={className}
+    <div
+      className={cn('sp-stack', className)}
       style={{
         // TODO: clean up this mess.
         ...customStyle,
         ...overrideStyle,
       }}>
       <div
         className={cn(
-          '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',
+          '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',
           // 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).
@@ -179,7 +172,7 @@ export function Preview({
               : isExpanded
               ? 'sticky'
               : undefined,
-            top: isExpanded ? '4rem' : undefined,
+            top: isExpanded ? '2rem' : undefined,
           }}>
           <iframe
             ref={iframeRef}
@@ -213,12 +206,11 @@ export function Preview({
           </div>
         )}
         <LoadingOverlay
-          showOpenInCodeSandbox
           clientId={clientId.current}
           loading={!isReady && iframeComputedHeight === null}
         />
       </div>
       {!error && <SandpackConsole />}
-    </SandpackStack>
+    </div>
   );
 }