[Beta] Fix Download button (#5013)

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

@@ -22,15 +22,15 @@ import {useSandpackLint} from './useSandpackLint';
 const emptyArray: Array<any> = [];
 
 export function CustomPreset({
-  isSingleFile,
   showDevTools,
   onDevToolsLoad,
   devToolsLoaded,
+  providedFiles,
 }: {
-  isSingleFile: boolean;
   showDevTools: boolean;
   devToolsLoaded: boolean;
   onDevToolsLoad: () => void;
+  providedFiles: Array<string>;
 }) {
   const {lintErrors, lintExtensions} = useSandpackLint();
   const lineCountRef = React.useRef<{[key: string]: number}>({});
@@ -51,7 +51,7 @@ export function CustomPreset({
       <div
         className="shadow-lg dark:shadow-lg-dark rounded-lg"
         ref={containerRef}>
-        <NavigationBar showDownload={isSingleFile} />
+        <NavigationBar providedFiles={providedFiles} />
         <SandpackThemeProvider theme={CustomTheme}>
           <div
             ref={sandpack.lazyAnchorRef}

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

@@ -33,12 +33,21 @@ function useSupportsImportMap() {
   );
 }
 
-export const DownloadButton: React.FC<DownloadButtonProps> = () => {
+const SUPPORTED_FILES = ['/App.js', '/styles.css'];
+
+export function DownloadButton({
+  providedFiles,
+}: {
+  providedFiles: Array<string>;
+}) {
   const {sandpack} = useSandpack();
   const supported = useSupportsImportMap();
   if (!supported) {
     return null;
   }
+  if (providedFiles.some((file) => !SUPPORTED_FILES.includes(file))) {
+    return null;
+  }
 
   const downloadHTML = () => {
     const css = sandpack.files['/styles.css']?.code ?? '';
@@ -55,20 +64,22 @@ export const DownloadButton: React.FC<DownloadButtonProps> = () => {
 <script type="importmap">
 {
   "imports": {
-    "react": "https://cdn.skypack.dev/react",
-    "react-dom": "https://cdn.skypack.dev/react-dom"
+    "react": "https://esm.sh/react?dev",
+    "react-dom/client": "https://esm.sh/react-dom/client?dev"
   }
 }
 </script>
 <script type="text/babel" data-type="module">
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import React, { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
 
-${code.replace('export default ', 'let Root = ')}
+${code.replace('export default ', 'let App = ')}
 
-ReactDOM.render(
-  <Root />,
-  document.getElementById('root')
+const root = createRoot(document.getElementById('root'));
+root.render(
+  <StrictMode>
+    <App />
+  </StrictMode>
 );
 </script>
 <style>
@@ -95,4 +106,4 @@ ${css}
       <IconDownload className="inline mr-1" /> Download
     </button>
   );
-};
+}

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

@@ -13,7 +13,7 @@ import {ResetButton} from './ResetButton';
 import {DownloadButton} from './DownloadButton';
 import {FilesDropdown} from './FilesDropdown';
 
-export function NavigationBar({showDownload}: {showDownload: boolean}) {
+export function NavigationBar({providedFiles}: {providedFiles: Array<string>}) {
   const {sandpack} = useSandpack();
   const [dropdownActive, setDropdownActive] = React.useState(false);
   const {openPaths, clients} = sandpack;
@@ -54,7 +54,7 @@ export function NavigationBar({showDownload}: {showDownload: boolean}) {
       <div
         className="px-3 flex items-center justify-end grow text-right"
         translate="yes">
-        {showDownload && <DownloadButton />}
+        <DownloadButton providedFiles={providedFiles} />
         <ResetButton onReset={handleReset} />
         <OpenInCodeSandboxButton />
       </div>

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

@@ -66,9 +66,7 @@ ul {
 function SandpackRoot(props: SandpackProps) {
   let {children, setup, autorun = true, showDevTools = false} = props;
   const [devToolsLoaded, setDevToolsLoaded] = React.useState(false);
-  let codeSnippets = React.Children.toArray(children) as React.ReactElement[];
-  let isSingleFile = true;
-
+  const codeSnippets = React.Children.toArray(children) as React.ReactElement[];
   const files = createFileMap(codeSnippets);
 
   files['/styles.css'] = {
@@ -87,10 +85,10 @@ function SandpackRoot(props: SandpackProps) {
         bundlerURL="https://6b760a26.sandpack-bundler.pages.dev"
         logLevel={SandpackLogLevel.None}>
         <CustomPreset
-          isSingleFile={isSingleFile}
           showDevTools={showDevTools}
           onDevToolsLoad={() => setDevToolsLoaded(true)}
           devToolsLoaded={devToolsLoaded}
+          providedFiles={Object.keys(files)}
         />
       </SandpackProvider>
     </div>