move here

Author: dummdidumm

apps/svelte.dev/package.json

@@ -35,6 +35,7 @@
 		"ansi-to-html": "^0.7.2",
 		"base64-js": "^1.5.1",
 		"cookie": "^0.7.0",
+		"do-not-zip": "^1.0.0",
 		"d3-geo": "^3.1.0",
 		"d3-geo-projection": "^4.0.0",
 		"editor": "workspace:*",

apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	// @ts-expect-error no types
+	import * as doNotZip from 'do-not-zip';
 	import { browser } from '$app/environment';
 	import { afterNavigate, goto, replaceState } from '$app/navigation';
 	import type { Gist } from '$lib/db/types';
@@ -113,6 +115,44 @@
 		}
 	}
 
+	async function download() {
+		const { files: components, imports } = repl.toJSON();
+
+		const files: Array<{ path: string; data: string }> =
+			await // TODO this is a bit of a cyclic dependency: we assume that the site
+			// does provide a template at this position which matches our expectations
+			(await fetch('/svelte-template.json')).json();
+
+		if (imports.length > 0) {
+			const idx = files.findIndex(({ path }) => path === 'package.json');
+			const pkg = JSON.parse(files[idx].data);
+			const { devDependencies } = pkg;
+			imports.forEach((mod) => {
+				const match = /^(@[^/]+\/)?[^@/]+/.exec(mod)!;
+				devDependencies[match[0]] = 'latest';
+			});
+			pkg.devDependencies = devDependencies;
+			files[idx].data = JSON.stringify(pkg, null, '  ');
+		}
+
+		files.push(
+			...components.map((component) => ({
+				path: `src/routes/${component.name}`,
+				data: (component as File).contents
+			}))
+		);
+
+		const url = URL.createObjectURL(doNotZip.toBlob(files));
+		const link = document.createElement('a');
+		link.href = url;
+		link.download = 'svelte-app.zip';
+		link.style.display = 'none';
+		document.body.appendChild(link);
+		link.click();
+		URL.revokeObjectURL(url);
+		link.remove();
+	}
+
 	async function update_hash() {
 		// Only change hash when necessary to avoid polluting everyone's browser history
 		if (modified) {
@@ -200,6 +240,7 @@
 				{can_escape}
 				injectedJS={mapbox_setup}
 				{onchange}
+				{download}
 				previewTheme={$theme.current}
 			/>
 		</div>

packages/repl/package.json

@@ -80,7 +80,6 @@
 		"@sveltejs/site-kit": "workspace:*",
 		"@sveltejs/svelte-json-tree": "^2.2.1",
 		"acorn": "^8.11.3",
-		"do-not-zip": "^1.0.0",
 		"editor": "workspace:*",
 		"esm-env": "^1.0.0",
 		"esrap": "^1.2.2",

packages/repl/src/lib/Input/ComponentSelector.svelte

@@ -10,7 +10,7 @@
 		workspace: Workspace;
 		can_migrate: boolean;
 		migrate: () => void;
-		download: () => void;
+		download?: () => void;
 	}
 
 	let { runes, onchange, workspace, can_migrate, migrate, download }: Props = $props();
@@ -171,7 +171,10 @@
 			</label>
 
 			<button disabled={!can_migrate} onclick={migrate}>Migrate to Svelte 5, if possible</button>
-			<button onclick={download}>Download app</button>
+
+			{#if download}
+				<button onclick={download}>Download app</button>
+			{/if}
 		</Toolbox>
 	</div>
 </div>

packages/repl/src/lib/Repl.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import * as doNotZip from 'do-not-zip';
 	import { SplitPane } from '@rich_harris/svelte-split-pane';
 	import { ScreenToggle } from '@sveltejs/site-kit/components';
 	import { BROWSER } from 'esm-env';
@@ -24,6 +23,7 @@
 		injectedCSS?: string;
 		previewTheme?: 'light' | 'dark';
 		onchange?: () => void;
+		download?: () => void;
 	}
 
 	let {
@@ -38,7 +38,8 @@
 		injectedJS = '',
 		injectedCSS = '',
 		previewTheme = 'light',
-		onchange = () => {}
+		onchange = () => {},
+		download
 	}: Props = $props();
 
 	// TODO pass in real data
@@ -108,50 +109,6 @@
 		rebundle();
 	}
 
-	async function download() {
-		const { files: components, imports } = toJSON();
-
-		const files: Array<{ path: string; data: string }> =
-			await // TODO this is a bit of a cyclic dependency: we assume that the site
-			// does provide a template at this position which matches our expectations
-			(
-				await fetch('/svelte-template.json')
-			).json();
-
-		if (imports.length > 0) {
-			const idx = files.findIndex(({ path }) => path === 'package.json');
-			const pkg = JSON.parse(files[idx].data);
-			const { devDependencies } = pkg;
-			imports.forEach((mod) => {
-				const match = /^(@[^/]+\/)?[^@/]+/.exec(mod)!;
-				devDependencies[match[0]] = 'latest';
-			});
-			pkg.devDependencies = devDependencies;
-			files[idx].data = JSON.stringify(pkg, null, '  ');
-		}
-
-		files.push(
-			...components.map((component) => ({
-				path: `src/routes/${component.name}`,
-				data: (component as File).contents
-			}))
-		);
-
-		const downloadBlob = (blob: any, filename: string) => {
-			const url = URL.createObjectURL(blob);
-			const link = document.createElement('a');
-			link.href = url;
-			link.download = filename;
-			link.style.display = 'none';
-			document.body.appendChild(link);
-			link.click();
-			URL.revokeObjectURL(url);
-			link.remove();
-		};
-
-		downloadBlob(doNotZip.toBlob(files), 'svelte-app.zip');
-	}
-
 	let width = $state(0);
 	let show_output = $state(false);
 	let status: string | null = $state(null);