[ty] Add Download button to ty playground which creates a zip export

playground/ruff/src/Editor/Chrome.tsx

@@ -1,6 +1,6 @@
 import ruffSchema from "../../../../ruff.schema.json";
 import { useCallback, useMemo, useRef, useState } from "react";
-import { Header, useTheme, setupMonaco } from "shared";
+import { Header, useTheme, setupMonaco, downloadZip } from "shared";
 import {
   copyAsMarkdown,
   copyAsMarkdownLink,
@@ -44,6 +44,24 @@ export default function Chrome() {
     await copyAsMarkdown(settings, pythonSource);
   }, [pythonSource, settings]);
 
+  const handleDownload = useCallback(async () => {
+    if (settings == null || pythonSource == null) {
+      return;
+    }
+
+    const toml = await import("smol-toml");
+
+    const files: { [name: string]: string } = { "main.py": pythonSource };
+
+    try {
+      files["ruff.toml"] = toml.stringify(JSON.parse(settings));
+    } catch {
+      files["ruff.json"] = settings;
+    }
+
+    await downloadZip(files, "ruff-playground");
+  }, [pythonSource, settings]);
+
   if (initPromise.current == null) {
     initPromise.current = startPlayground()
       .then(({ sourceCode, settings, ruffVersion }) => {
@@ -110,6 +128,7 @@ export default function Chrome() {
         onShare={handleShare}
         onCopyMarkdownLink={handleCopyMarkdownLink}
         onCopyMarkdown={handleCopyMarkdown}
+        onDownload={handleDownload}
         onReset={handleResetClicked}
       />
 

playground/shared/package.json

@@ -6,6 +6,7 @@
   "dependencies": {
     "@monaco-editor/react": "^4.7.0",
     "classnames": "^2.3.2",
+    "fflate": "^0.8.2",
     "react-aria-components": "^1.16.0",
     "react": "^19.0.0",
     "react-resizable-panels": "^4.0.0"

playground/shared/src/Header.tsx

@@ -16,6 +16,7 @@ export default function Header({
   onShare,
   onCopyMarkdownLink,
   onCopyMarkdown,
+  onDownload,
 }: {
   theme: Theme;
   tool: "ruff" | "ty";
@@ -26,6 +27,7 @@ export default function Header({
   onShare: () => Promise<void>;
   onCopyMarkdownLink: () => Promise<void>;
   onCopyMarkdown: () => Promise<void>;
+  onDownload(): void;
 }) {
   return (
     <div
@@ -61,6 +63,7 @@ export default function Header({
             onShare={onShare}
             onCopyMarkdownLink={onCopyMarkdownLink}
             onCopyMarkdown={onCopyMarkdown}
+            onDownload={onDownload}
           />
         </div>
         <Divider />

playground/shared/src/ShareButton.tsx

@@ -7,6 +7,7 @@ import {
   MenuTrigger,
   Popover,
   Pressable,
+  Separator,
 } from "react-aria-components";
 import AstralButton from "./AstralButton";
 
@@ -17,10 +18,12 @@ export default function ShareButton({
   onShare,
   onCopyMarkdownLink,
   onCopyMarkdown,
+  onDownload,
 }: {
   onShare: () => Promise<void>;
   onCopyMarkdownLink: () => Promise<void>;
   onCopyMarkdown: () => Promise<void>;
+  onDownload(): void;
 }) {
   const [status, dispatch, isPending] = useActionState(
     async (_previousStatus: ShareStatus, action: ShareAction) => {
@@ -101,6 +104,8 @@ export default function ShareButton({
           >
             Markdown
           </ShareMenuItem>
+          <Separator className="my-1 border-t border-gray-200 dark:border-gray-700" />
+          <ShareMenuItem onAction={onDownload}>Download ZIP</ShareMenuItem>
         </Menu>
       </Popover>
     </MenuTrigger>

playground/shared/src/downloadZip.ts

@@ -0,0 +1,41 @@
+import { strToU8, zipSync } from "fflate";
+
+/**
+ * Creates a ZIP archive from the given files and triggers a browser download.
+ * The filename includes a short content hash for uniqueness.
+ */
+export async function downloadZip(
+  files: { [name: string]: string },
+  prefix = "playground",
+): Promise<void> {
+  const data: { [name: string]: Uint8Array } = {};
+
+  for (const [name, content] of Object.entries(files)) {
+    data[name] = strToU8(content);
+  }
+
+  const zipped = zipSync(data);
+
+  const hash = await contentHash(JSON.stringify(files));
+
+  const blob = new Blob([zipped.buffer as ArrayBuffer], {
+    type: "application/zip",
+  });
+  const url = URL.createObjectURL(blob);
+
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = `${prefix}-${hash}.zip`;
+  a.click();
+
+  URL.revokeObjectURL(url);
+}
+
+async function contentHash(content: string): Promise<string> {
+  const encoded = new TextEncoder().encode(content);
+  const digest = await crypto.subtle.digest("SHA-256", encoded);
+  const bytes = new Uint8Array(digest);
+  return Array.from(bytes.slice(0, 4))
+    .map((b) => b.toString(16).padStart(2, "0"))
+    .join("");
+}

playground/shared/src/index.ts

@@ -6,6 +6,7 @@ export * as Icons from "./Icons";
 export { type Theme, useTheme } from "./theme";
 export { HorizontalResizeHandle, VerticalResizeHandle } from "./ResizeHandle";
 export { setupMonaco } from "./setupMonaco";
+export { downloadZip } from "./downloadZip";
 export {
   default as SideBar,
   SideBarEntry,

playground/ty/src/Playground.tsx

@@ -9,7 +9,13 @@ import {
   useRef,
   useState,
 } from "react";
-import { ErrorMessage, Header, setupMonaco, useTheme } from "shared";
+import {
+  ErrorMessage,
+  Header,
+  setupMonaco,
+  useTheme,
+  downloadZip,
+} from "shared";
 import { FileHandle, PositionEncoding, Workspace } from "ty_wasm";
 import {
   copyAsMarkdown,
@@ -80,6 +86,28 @@ export default function Playground() {
     }
   }, [files]);
 
+  const handleDownload = useCallback(async () => {
+    const serialized = serializeFiles(files);
+
+    if (serialized != null) {
+      const downloadFiles = { ...serialized.files };
+
+      if (SETTINGS_FILE_NAME in downloadFiles) {
+        try {
+          const toml = await import("smol-toml");
+          const tomlContent = toml.stringify(
+            JSON.parse(downloadFiles[SETTINGS_FILE_NAME]),
+          );
+          delete downloadFiles[SETTINGS_FILE_NAME];
+          downloadFiles["ty.toml"] = tomlContent;
+        } catch {
+          // Keep the original JSON file if conversion fails.
+        }
+      }
+
+      await downloadZip(downloadFiles, "ty-playground");
+    }
+  }, [files]);
   const handleFileAdded = useCallback((workspace: Workspace, name: string) => {
     let handle = null;
 
@@ -205,6 +233,7 @@ export default function Playground() {
         onShare={handleShare}
         onCopyMarkdownLink={handleCopyMarkdownLink}
         onCopyMarkdown={handleCopyMarkdown}
+        onDownload={handleDownload}
         onReset={workspace == null ? undefined : handleReset}
       />