Skip to content

Commit 44c6f83

Browse files
kartikjsonawanekartikjsonawane
committed
fix: download sandbox as zip instead of relying on CodeSandbox (#8472)
1 parent 6ec6134 commit 44c6f83

2 files changed

Lines changed: 116 additions & 71 deletions

File tree

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

Lines changed: 114 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -9,104 +9,149 @@
99
* Copyright (c) Facebook, Inc. and its affiliates.
1010
*/
1111

12-
import {useSyncExternalStore} from 'react';
1312
import {useSandpack} from '@codesandbox/sandpack-react/unstyled';
1413
import {IconDownload} from '../../Icon/IconDownload';
15-
import {AppJSPath, StylesCSSPath, SUPPORTED_FILES} from './createFileMap';
1614
export interface DownloadButtonProps {}
1715

18-
let supportsImportMap = false;
19-
20-
function subscribe(cb: () => void) {
21-
// This shouldn't actually need to update, but this works around
22-
// https://github.com/facebook/react/issues/26095
23-
let timeout = setTimeout(() => {
24-
supportsImportMap =
25-
(HTMLScriptElement as any).supports &&
26-
(HTMLScriptElement as any).supports('importmap');
27-
cb();
28-
}, 0);
29-
return () => clearTimeout(timeout);
16+
/**
17+
* Computes CRC-32 checksum required by the ZIP format.
18+
*/
19+
function crc32(data: Uint8Array): number {
20+
let crc = 0xffffffff;
21+
for (let i = 0; i < data.length; i++) {
22+
crc ^= data[i];
23+
for (let j = 0; j < 8; j++) {
24+
crc = (crc >>> 1) ^ (crc & 1 ? 0xedb88320 : 0);
25+
}
26+
}
27+
return (crc ^ 0xffffffff) >>> 0;
3028
}
3129

32-
function useSupportsImportMap() {
33-
function getCurrentValue() {
34-
return supportsImportMap;
30+
/**
31+
* Builds an uncompressed ZIP archive from a map of filename → content.
32+
* Produces a valid ZIP that any OS or tool can extract.
33+
*/
34+
function createZip(files: Record<string, string>): Uint8Array {
35+
const encoder = new TextEncoder();
36+
37+
const entries = Object.entries(files).map(([name, content]) => {
38+
const nameBytes = encoder.encode(name);
39+
const contentBytes = encoder.encode(content);
40+
return {nameBytes, contentBytes, crc: crc32(contentBytes)};
41+
});
42+
43+
// Pre-calculate total buffer size
44+
const localSize = entries.reduce(
45+
(sum, e) => sum + 30 + e.nameBytes.length + e.contentBytes.length,
46+
0
47+
);
48+
const centralSize = entries.reduce(
49+
(sum, e) => sum + 46 + e.nameBytes.length,
50+
0
51+
);
52+
const buffer = new ArrayBuffer(localSize + centralSize + 22);
53+
const view = new DataView(buffer);
54+
const bytes = new Uint8Array(buffer);
55+
56+
const w16 = (off: number, v: number) => view.setUint16(off, v, true);
57+
const w32 = (off: number, v: number) => view.setUint32(off, v, true);
58+
59+
let pos = 0;
60+
const localOffsets: number[] = [];
61+
62+
// Local file entries
63+
for (const e of entries) {
64+
localOffsets.push(pos);
65+
w32(pos, 0x04034b50); // local file header signature
66+
w16(pos + 4, 20); // version needed
67+
w16(pos + 6, 0); // general purpose bit flag
68+
w16(pos + 8, 0); // compression: stored
69+
w16(pos + 10, 0); // last mod time
70+
w16(pos + 12, 0); // last mod date
71+
w32(pos + 14, e.crc);
72+
w32(pos + 18, e.contentBytes.length); // compressed size
73+
w32(pos + 22, e.contentBytes.length); // uncompressed size
74+
w16(pos + 26, e.nameBytes.length);
75+
w16(pos + 28, 0); // extra field length
76+
bytes.set(e.nameBytes, pos + 30);
77+
bytes.set(e.contentBytes, pos + 30 + e.nameBytes.length);
78+
pos += 30 + e.nameBytes.length + e.contentBytes.length;
3579
}
36-
function getServerSnapshot() {
37-
return false;
80+
81+
// Central directory
82+
const centralStart = pos;
83+
for (let i = 0; i < entries.length; i++) {
84+
const e = entries[i];
85+
w32(pos, 0x02014b50); // central directory file header signature
86+
w16(pos + 4, 20); // version made by
87+
w16(pos + 6, 20); // version needed
88+
w16(pos + 8, 0); // general purpose bit flag
89+
w16(pos + 10, 0); // compression: stored
90+
w16(pos + 12, 0); // last mod time
91+
w16(pos + 14, 0); // last mod date
92+
w32(pos + 16, e.crc);
93+
w32(pos + 20, e.contentBytes.length); // compressed size
94+
w32(pos + 24, e.contentBytes.length); // uncompressed size
95+
w16(pos + 28, e.nameBytes.length);
96+
w16(pos + 30, 0); // extra field length
97+
w16(pos + 32, 0); // file comment length
98+
w16(pos + 34, 0); // disk number start
99+
w16(pos + 36, 0); // internal attributes
100+
w32(pos + 38, 0); // external attributes
101+
w32(pos + 42, localOffsets[i]); // offset of local header
102+
bytes.set(e.nameBytes, pos + 46);
103+
pos += 46 + e.nameBytes.length;
38104
}
39105

40-
return useSyncExternalStore(subscribe, getCurrentValue, getServerSnapshot);
106+
// End of central directory record
107+
w32(pos, 0x06054b50); // end of central directory signature
108+
w16(pos + 4, 0); // disk number
109+
w16(pos + 6, 0); // disk with start of central directory
110+
w16(pos + 8, entries.length);
111+
w16(pos + 10, entries.length);
112+
w32(pos + 12, centralSize);
113+
w32(pos + 16, centralStart);
114+
w16(pos + 20, 0); // comment length
115+
116+
return bytes;
41117
}
42118

43119
export function DownloadButton({
44-
providedFiles,
120+
providedFiles: _providedFiles,
45121
}: {
46122
providedFiles: Array<string>;
47123
}) {
48124
const {sandpack} = useSandpack();
49-
const supported = useSupportsImportMap();
50-
if (!supported) {
51-
return null;
52-
}
53-
if (providedFiles.some((file) => !SUPPORTED_FILES.includes(file))) {
54-
return null;
55-
}
56125

57-
const downloadHTML = () => {
58-
const css = sandpack.files[StylesCSSPath]?.code ?? '';
59-
const code = sandpack.files[AppJSPath]?.code ?? '';
60-
const blob = new Blob([
61-
`<!DOCTYPE html>
62-
<html>
63-
<body>
64-
<div id="root"></div>
65-
</body>
66-
<!-- This setup is not suitable for production. -->
67-
<!-- Only use it in development! -->
68-
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
69-
<script async src="https://ga.jspm.io/npm:es-module-shims@1.7.0/dist/es-module-shims.js"></script>
70-
<script type="importmap">
71-
{
72-
"imports": {
73-
"react": "https://esm.sh/react?dev",
74-
"react-dom/client": "https://esm.sh/react-dom/client?dev"
75-
}
76-
}
77-
</script>
78-
<script type="text/babel" data-type="module">
79-
import React, { StrictMode } from 'react';
80-
import { createRoot } from 'react-dom/client';
81-
82-
${code.replace('export default ', 'let App = ')}
83-
84-
const root = createRoot(document.getElementById('root'));
85-
root.render(
86-
<StrictMode>
87-
<App />
88-
</StrictMode>
89-
);
90-
</script>
91-
<style>
92-
${css}
93-
</style>
94-
</html>`,
95-
]);
126+
const downloadZip = () => {
127+
// Include all files (user files + hidden template files like package.json,
128+
// src/index.js, public/index.html) so the downloaded project can be run
129+
// with `npm install && npm start` without any extra configuration.
130+
const zipFiles: Record<string, string> = {};
131+
for (const [path, file] of Object.entries(sandpack.files)) {
132+
// Zip paths must not start with '/' and should be nested under "sandbox/"
133+
// so extracting the archive creates a tidy top-level folder.
134+
const zipPath = 'sandbox/' + (path.startsWith('/') ? path.slice(1) : path);
135+
zipFiles[zipPath] = (file as {code: string}).code ?? '';
136+
}
137+
138+
const zipBytes = createZip(zipFiles);
139+
const blob = new Blob([zipBytes], {type: 'application/zip'});
96140
const url = window.URL.createObjectURL(blob);
97141
const a = document.createElement('a');
98142
a.style.display = 'none';
99143
a.href = url;
100-
a.download = 'sandbox.html';
144+
a.download = 'sandbox.zip';
101145
document.body.appendChild(a);
102146
a.click();
103147
window.URL.revokeObjectURL(url);
148+
document.body.removeChild(a);
104149
};
105150

106151
return (
107152
<button
108153
className="text-sm text-primary dark:text-primary-dark inline-flex items-center hover:text-link duration-100 ease-in transition mx-1"
109-
onClick={downloadHTML}
154+
onClick={downloadZip}
110155
title="Download Sandbox"
111156
type="button">
112157
<IconDownload className="inline me-1" /> Download

‎src/content/learn/tutorial-tic-tac-toe.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -264,8 +264,8 @@ body {
264264
You can also follow this tutorial using your local development environment. To do this, you need to:
265265

266266
1. Install [Node.js](https://nodejs.org/en/)
267-
1. In the CodeSandbox tab you opened earlier, press the top-left corner button to open the menu, and then choose **Download Sandbox** in that menu to download an archive of the files locally
268-
1. Unzip the archive, then open a terminal and `cd` to the directory you unzipped
267+
1. Click the **Download** button (↓) in the sandbox toolbar above to download the files as a zip archive
268+
1. Unzip the archive, then open a terminal and `cd` to the `sandbox` directory you unzipped
269269
1. Install the dependencies with `npm install`
270270
1. Run `npm start` to start a local server and follow the prompts to view the code running in a browser
271271

0 commit comments

Comments
 (0)