integrate into menu

Author: dummdidumm

apps/svelte.dev/package.json

@@ -37,7 +37,6 @@
 		"cookie": "^0.7.0",
 		"d3-geo": "^3.1.0",
 		"d3-geo-projection": "^4.0.0",
-		"do-not-zip": "^1.0.0",
 		"editor": "workspace:*",
 		"flexsearch": "^0.7.43",
 		"flru": "^1.0.2",

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

@@ -9,8 +9,6 @@
 	import { compress_and_encode_text, decode_and_decompress_text } from './gzip.js';
 	import { page } from '$app/state';
 	import type { File } from 'editor';
-	// @ts-expect-error this library was created way before TS conquered the world
-	import * as doNotZip from 'do-not-zip';
 
 	let { data } = $props();
 
@@ -115,46 +113,6 @@
 		}
 	}
 
-	async function download() {
-		const { files: components, imports } = repl.toJSON();
-
-		const files: Array<{ path: string; data: string }> = await (
-			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');
-	}
-
 	async function update_hash() {
 		// Only change hash when necessary to avoid polluting everyone's browser history
 		if (modified) {
@@ -217,12 +175,6 @@
 			sessionStorage.setItem(STORAGE_KEY, json);
 		}
 	}}
-	onkeydown={(e) => {
-		// TODO remove once dropdown from VIM UI PR is merged
-		if (e.ctrlKey && e.key === 'd') {
-			download();
-		}
-	}}
 />
 
 <svelte:body onmouseleave={update_hash} />

packages/repl/package.json

@@ -80,6 +80,7 @@
 		"@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,9 +10,10 @@
 		workspace: Workspace;
 		can_migrate: boolean;
 		migrate: () => void;
+		download: () => void;
 	}
 
-	let { runes, onchange, workspace, can_migrate, migrate }: Props = $props();
+	let { runes, onchange, workspace, can_migrate, migrate, download }: Props = $props();
 
 	let input = $state() as HTMLInputElement;
 	let input_value = $state(workspace.current.name);
@@ -170,6 +171,7 @@
 			</label>
 
 			<button disabled={!can_migrate} onclick={migrate}>Migrate to Svelte 5, if possible</button>
+			<button onclick={download}>Download app</button>
 		</Toolbox>
 	</div>
 </div>

packages/repl/src/lib/Repl.svelte

@@ -1,4 +1,5 @@
 <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';
@@ -107,6 +108,50 @@
 		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);
@@ -174,7 +219,7 @@
 		>
 			{#snippet a()}
 				<section>
-					<ComponentSelector {runes} {onchange} {workspace} {can_migrate} {migrate} />
+					<ComponentSelector {runes} {onchange} {workspace} {can_migrate} {migrate} {download} />
 
 					<Editor {workspace} />
 				</section>