From ed1cf75b79f0bffbb5122f88a570b91deb744708 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 5 Feb 2025 11:42:24 -0500
Subject: [PATCH] chore: add download/hash scripts for sandbox (#15218)

* chore: add download/hash scripts for sandbox

* remove logging
---
 playgrounds/sandbox/index.html          |  2 +-
 playgrounds/sandbox/package.json        |  4 +-
 playgrounds/sandbox/scripts/download.js | 52 +++++++++++++++++++++++++
 playgrounds/sandbox/scripts/hash.js     | 45 +++++++++++++++++++++
 playgrounds/sandbox/ssr-dev.js          |  2 +-
 playgrounds/sandbox/ssr-prod.js         |  2 +-
 6 files changed, 103 insertions(+), 4 deletions(-)
 create mode 100644 playgrounds/sandbox/scripts/download.js
 create mode 100644 playgrounds/sandbox/scripts/hash.js

diff --git a/playgrounds/sandbox/index.html b/playgrounds/sandbox/index.html
index 512b5426a9..845538abf0 100644
--- a/playgrounds/sandbox/index.html
+++ b/playgrounds/sandbox/index.html
@@ -12,7 +12,7 @@
 
 		<script type="module">
 			import { mount, hydrate, unmount } from 'svelte';
-			import App from '/src/main.svelte';
+			import App from '/src/App.svelte';
 
 			const root = document.getElementById('root');
 			const render = root.firstChild?.nextSibling ? hydrate : mount;
diff --git a/playgrounds/sandbox/package.json b/playgrounds/sandbox/package.json
index d9c490ba86..9a52fb4ad6 100644
--- a/playgrounds/sandbox/package.json
+++ b/playgrounds/sandbox/package.json
@@ -9,7 +9,9 @@
     "ssr": "node --conditions=development ./ssr-dev.js",
     "build": "vite build --outDir dist/client && vite build --outDir dist/server --ssr ssr-prod.js",
     "prod": "npm run build && node dist/server/ssr-prod",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "download": "node scripts/download.js",
+    "hash": "node scripts/hash.js | pbcopy && echo \"copied URL to clipboard\""
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^4.0.0-next.6",
diff --git a/playgrounds/sandbox/scripts/download.js b/playgrounds/sandbox/scripts/download.js
new file mode 100644
index 0000000000..5678f69ee3
--- /dev/null
+++ b/playgrounds/sandbox/scripts/download.js
@@ -0,0 +1,52 @@
+import fs from 'node:fs';
+
+const arg = process.argv[2];
+
+/** @type {URL} */
+let url;
+
+try {
+	url = new URL(arg);
+} catch (e) {
+	console.error(`${arg} is not a URL`);
+	process.exit(1);
+}
+
+if (url.origin !== 'https://svelte.dev' || !url.pathname.startsWith('/playground/')) {
+	console.error(`${arg} is not a Svelte playground URL`);
+	process.exit(1);
+}
+
+let files;
+
+if (url.hash.length > 1) {
+	const decoded = atob(url.hash.slice(1).replaceAll('-', '+').replaceAll('_', '/'));
+	// putting it directly into the blob gives a corrupted file
+	const u8 = new Uint8Array(decoded.length);
+	for (let i = 0; i < decoded.length; i++) {
+		u8[i] = decoded.charCodeAt(i);
+	}
+	const stream = new Blob([u8]).stream().pipeThrough(new DecompressionStream('gzip'));
+	const json = await new Response(stream).text();
+
+	files = JSON.parse(json).files;
+} else {
+	const id = url.pathname.split('/')[2];
+	const response = await fetch(`https://svelte.dev/playground/api/${id}.json`);
+
+	files = (await response.json()).components.map((data) => {
+		const basename = `${data.name}.${data.type}`;
+
+		return {
+			type: 'file',
+			name: basename,
+			basename,
+			contents: data.source,
+			text: true
+		};
+	});
+}
+
+for (const file of files) {
+	fs.writeFileSync(`src/${file.name}`, file.contents);
+}
diff --git a/playgrounds/sandbox/scripts/hash.js b/playgrounds/sandbox/scripts/hash.js
new file mode 100644
index 0000000000..e70dfc471a
--- /dev/null
+++ b/playgrounds/sandbox/scripts/hash.js
@@ -0,0 +1,45 @@
+import fs from 'node:fs';
+
+const files = [];
+
+for (const basename of fs.readdirSync('src')) {
+	if (fs.statSync(`src/${basename}`).isDirectory()) continue;
+
+	files.push({
+		type: 'file',
+		name: basename,
+		basename,
+		contents: fs.readFileSync(`src/${basename}`, 'utf-8'),
+		text: true // TODO might not be
+	});
+}
+
+const payload = JSON.stringify({
+	name: 'sandbox',
+	files
+});
+
+async function compress(payload) {
+	const reader = new Blob([payload])
+		.stream()
+		.pipeThrough(new CompressionStream('gzip'))
+		.getReader();
+
+	let buffer = '';
+	for (;;) {
+		const { done, value } = await reader.read();
+
+		if (done) {
+			reader.releaseLock();
+			return btoa(buffer).replaceAll('+', '-').replaceAll('/', '_');
+		} else {
+			for (let i = 0; i < value.length; i++) {
+				// decoding as utf-8 will make btoa reject the string
+				buffer += String.fromCharCode(value[i]);
+			}
+		}
+	}
+}
+
+const hash = await compress(payload);
+console.log(`https://svelte.dev/playground/untitled#${hash}`);
diff --git a/playgrounds/sandbox/ssr-dev.js b/playgrounds/sandbox/ssr-dev.js
index 65390b70ca..01ce14e266 100644
--- a/playgrounds/sandbox/ssr-dev.js
+++ b/playgrounds/sandbox/ssr-dev.js
@@ -22,7 +22,7 @@ polka()
 	.use(async (req, res) => {
 		const template = fs.readFileSync(path.resolve(__dirname, 'index.html'), 'utf-8');
 		const transformed_template = await vite.transformIndexHtml(req.url, template);
-		const { default: App } = await vite.ssrLoadModule('/src/main.svelte');
+		const { default: App } = await vite.ssrLoadModule('/src/App.svelte');
 		const { head, body } = render(App);
 
 		const html = transformed_template
diff --git a/playgrounds/sandbox/ssr-prod.js b/playgrounds/sandbox/ssr-prod.js
index c268aac790..1ed9435249 100644
--- a/playgrounds/sandbox/ssr-prod.js
+++ b/playgrounds/sandbox/ssr-prod.js
@@ -2,7 +2,7 @@ import fs from 'node:fs';
 import path from 'node:path';
 import polka from 'polka';
 import { render } from 'svelte/server';
-import App from './src/main.svelte';
+import App from './src/App.svelte';
 
 const { head, body } = render(App);