From 36415cc8cd9cb5da30420fc4cb6558b0b0ba6fa9 Mon Sep 17 00:00:00 2001
From: Richard Harris <richard.a.harris@gmail.com>
Date: Wed, 27 Mar 2019 09:31:06 -0400
Subject: [PATCH] use external repl package

---
 site/package-lock.json                        |   8 +-
 site/package.json                             |   2 +-
 site/src/routes/examples/index.svelte         |  19 --
 site/src/routes/index.svelte                  |   8 -
 .../repl/_components/AppControls/index.svelte |   9 -
 site/src/routes/repl/index.svelte             |  10 +-
 .../routes/repl/{local.js => local/[file].js} |   4 +-
 site/static/workers/bundler.js                | 221 ------------------
 site/static/workers/compiler.js               |  58 -----
 9 files changed, 15 insertions(+), 324 deletions(-)
 rename site/src/routes/repl/{local.js => local/[file].js} (83%)
 delete mode 100644 site/static/workers/bundler.js
 delete mode 100644 site/static/workers/compiler.js

diff --git a/site/package-lock.json b/site/package-lock.json
index b527a5feeb..c1b5331056 100644
--- a/site/package-lock.json
+++ b/site/package-lock.json
@@ -1941,7 +1941,7 @@
       "dev": true
     },
     "eslint-plugin-svelte3": {
-      "version": "git+https://github.com/sveltejs/eslint-plugin-svelte3.git#651d7e3695b1731251ab3a501d1067b561ede09f",
+      "version": "git+https://github.com/sveltejs/eslint-plugin-svelte3.git#5fc4861d4b191649b0badf4f9a4c2470f08b237e",
       "from": "git+https://github.com/sveltejs/eslint-plugin-svelte3.git#semver:*",
       "dev": true
     },
@@ -5296,9 +5296,9 @@
       }
     },
     "svelte": {
-      "version": "3.0.0-beta.20",
-      "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.0.0-beta.20.tgz",
-      "integrity": "sha512-IEZrUseN2Hzpo1KFdyZf3Neqw7abbXLU7oRRkyBVm0iT1PQKHj8G75hR0wISvz7pOegYisiVFdi3C5Asz4ps9Q==",
+      "version": "3.0.0-beta.21",
+      "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.0.0-beta.21.tgz",
+      "integrity": "sha512-TlYvRrwnA9SeoNwxD1nv6kzQO/KxPGISyaJrzizt1kEBSKEdY4rB9U1URDfpMtdAKdYJkeXXca4Tt6FWAyS5Ng==",
       "dev": true
     },
     "tar": {
diff --git a/site/package.json b/site/package.json
index 664dd59e48..f4bc842c29 100644
--- a/site/package.json
+++ b/site/package.json
@@ -54,6 +54,6 @@
     "rollup-plugin-svelte": "^5.0.3",
     "rollup-plugin-terser": "^4.0.4",
     "sapper": "^0.26.0-alpha.12",
-    "svelte": "^3.0.0-beta.20"
+    "svelte": "^3.0.0-beta.21"
   }
 }
diff --git a/site/src/routes/examples/index.svelte b/site/src/routes/examples/index.svelte
index 68cb9e3110..57bb03e893 100644
--- a/site/src/routes/examples/index.svelte
+++ b/site/src/routes/examples/index.svelte
@@ -74,25 +74,6 @@
 		border-radius: 2px;
 		box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
 	}
-
-	/* .thumbnail::before {
-		content: "";
-		width: 1px;
-		margin-left: -1px;
-		float: left;
-		height: 0;
-		padding-top: 100%;
-	}
-
-	.thumbnail::after {
-		content: "";
-		display: table;
-		clear: both;
-	} */
-
-	img {
-		background-color: #eee;
-	}
 </style>
 
 <div class="content">
diff --git a/site/src/routes/index.svelte b/site/src/routes/index.svelte
index 061e9c94da..916023bc6c 100644
--- a/site/src/routes/index.svelte
+++ b/site/src/routes/index.svelte
@@ -144,14 +144,6 @@
 		/* padding: 0.8rem; */
 	}
 
-	iframe {
-		display: block;
-		width: 100%;
-		height: 420px;
-		border: none;
-		border-radius: var(--border-r);
-	}
-
 	a.cta {
 		background-color: var(--prime);
 		padding: 0.5em 1.8em 0.5em 1em;
diff --git a/site/src/routes/repl/_components/AppControls/index.svelte b/site/src/routes/repl/_components/AppControls/index.svelte
index f02cdc8fd2..edc4c8e81f 100644
--- a/site/src/routes/repl/_components/AppControls/index.svelte
+++ b/site/src/routes/repl/_components/AppControls/index.svelte
@@ -263,15 +263,6 @@ export default app;` });
 		color: white;
 	}
 
-	.hidden-select {
-		position: absolute;
-		width: 100%;
-		height: 100%;
-		opacity: 0.0001;
-		top: 0;
-		left: 0;
-	}
-
 	.icon {
 		position: relative;
 		top: -0.1rem;
diff --git a/site/src/routes/repl/index.svelte b/site/src/routes/repl/index.svelte
index 2cd99db38e..6a58daca3b 100644
--- a/site/src/routes/repl/index.svelte
+++ b/site/src/routes/repl/index.svelte
@@ -12,7 +12,7 @@
 	import { onMount } from 'svelte';
 	import { process_example } from '../../components/Repl/process_example.js';
 	import AppControls from './_components/AppControls/index.svelte';
-	import Repl from '../../components/Repl/index.svelte';
+	import Repl from '@sveltejs/svelte-repl';
 
 	export let version;
 	export let example;
@@ -105,6 +105,12 @@
 		gist = event.detail.gist;
 		gist_id = gist.id;
 	}
+
+	$: svelteUrl = version === 'local' ?
+		'/repl/local' :
+		`https://unpkg.com/svelte@${version}`;
+
+	const rollupUrl = `https://unpkg.com/rollup@1/dist/rollup.browser.js`;
 </script>
 
 <style>
@@ -165,6 +171,6 @@
 	/>
 
 	{#if process.browser}
-		<Repl bind:this={repl} {version} {relaxed}/>
+		<Repl bind:this={repl} {svelteUrl} {rollupUrl} {relaxed}/>
 	{/if}
 </div>
diff --git a/site/src/routes/repl/local.js b/site/src/routes/repl/local/[file].js
similarity index 83%
rename from site/src/routes/repl/local.js
rename to site/src/routes/repl/local/[file].js
index d240136c8a..20d9f509cb 100644
--- a/site/src/routes/repl/local.js
+++ b/site/src/routes/repl/local/[file].js
@@ -1,12 +1,12 @@
 import { createReadStream } from 'fs';
 
 export function get(req, res) {
-	if (process.env.NODE_ENV !== 'development' || !/^[a-z.]+$/.test(req.query.file)) {
+	if (process.env.NODE_ENV !== 'development' || !/^[a-z.]+$/.test(req.params.file)) {
 		res.writeHead(403);
 		res.end();
 		return;
 	}
-	createReadStream('../' + req.query.file)
+	createReadStream('../' + req.params.file)
 		.on('error', () => {
 			res.writeHead(403);
 			res.end();
diff --git a/site/static/workers/bundler.js b/site/static/workers/bundler.js
deleted file mode 100644
index 48aed10ede..0000000000
--- a/site/static/workers/bundler.js
+++ /dev/null
@@ -1,221 +0,0 @@
-self.window = self; // egregious hack to get magic-string to work in a worker
-
-let version;
-
-let fulfil;
-let ready = new Promise(f => fulfil = f);
-
-self.addEventListener('message', async event => {
-	switch (event.data.type) {
-		case 'init':
-			version = event.data.version;
-
-			importScripts(
-				version === 'local' ?
-					'/repl/local?file=compiler.js' :
-					`https://unpkg.com/svelte@${version}/compiler.js`,
-				`https://unpkg.com/rollup@1/dist/rollup.browser.js`
-			);
-			fulfil();
-
-			break;
-
-		case 'bundle':
-			if (event.data.components.length === 0) return;
-
-			await ready;
-			const result = await bundle(event.data);
-			if (result) {
-				postMessage(result);
-			}
-
-			break;
-	}
-});
-
-const common_options = {
-	dev: true,
-};
-
-let cached = {
-	dom: {},
-	ssr: {}
-};
-
-const is_svelte_module = id => id === 'svelte' || id.startsWith('svelte/');
-
-const cache = new Map();
-function fetch_if_uncached(url) {
-	if (!cache.has(url)) {
-		cache.set(url, fetch(url.startsWith('https://unpkg.com/svelte@local/') ? '/repl/local?file=' + url.slice(31) : url)
-			.then(r => r.text())
-			.catch(err => {
-				console.error(err);
-				cache.delete(url);
-			}));
-	}
-
-	return cache.get(url);
-}
-
-async function get_bundle(mode, cache, lookup) {
-	let bundle;
-	const all_warnings = [];
-
-	const new_cache = {};
-
-	try {
-		bundle = await rollup.rollup({
-			input: './App.svelte',
-			external: id => {
-				if (id[0] === '.') return false;
-				if (is_svelte_module(id)) return false;
-				if (id.startsWith('https://')) return false;
-				return true;
-			},
-			plugins: [{
-				resolveId(importee, importer) {
-					// v3 hack
-					if (importee === `svelte`) return `https://unpkg.com/svelte@${version}/index.mjs`;
-					if (importee.startsWith(`svelte/`)) return `https://unpkg.com/svelte@${version}/${importee.slice(7)}.mjs`;
-
-					if (importer && importer.startsWith(`https://`)) {
-						return new URL(`${importee}.mjs`, importer).href;
-					}
-
-					if (importee.endsWith('.html')) importee = importee.replace(/\.html$/, '.svelte');
-
-					if (importee in lookup) return importee;
-
-					throw new Error(`Could not resolve "${importee}" from "${importer}"`);
-				},
-				load(id) {
-					if (id.startsWith(`https://`)) return fetch_if_uncached(id);
-					if (id in lookup) return lookup[id].source;
-				},
-				transform(code, id) {
-					if (!/\.svelte$/.test(id)) return null;
-
-					const name = id.replace(/^\.\//, '').replace(/\.svelte$/, '');
-
-					const result = cache[id] && cache[id].code === code
-						? cache[id].result
-						: svelte.compile(code, Object.assign({
-							generate: mode,
-							format: 'esm',
-							name,
-							filename: name + '.svelte'
-						}, common_options));
-
-					new_cache[id] = { code, result };
-
-					(result.warnings || result.stats.warnings).forEach(warning => { // TODO remove stats post-launch
-						all_warnings.push({
-							message: warning.message,
-							filename: warning.filename,
-							start: warning.start,
-							end: warning.end
-						});
-					});
-
-					return result.js;
-				}
-			}],
-			inlineDynamicImports: true,
-			onwarn(warning) {
-				all_warnings.push({
-					message: warning.message
-				});
-			}
-		});
-	} catch (error) {
-		return { error, bundle: null, cache: new_cache, warnings: all_warnings };
-	}
-
-	return { bundle, cache: new_cache, error: null, warnings: all_warnings };
-}
-
-async function bundle({ id, components }) {
-	// console.clear();
-	console.log(`running Svelte compiler version %c${svelte.VERSION}`, 'font-weight: bold');
-
-	const lookup = {};
-	components.forEach(component => {
-		const path = `./${component.name}.${component.type}`;
-		lookup[path] = component;
-	});
-
-	const import_map = new Map();
-	let dom;
-	let error;
-
-	try {
-		dom = await get_bundle('dom', cached.dom, lookup);
-		if (dom.error) {
-			throw dom.error;
-		}
-
-		cached.dom = dom.cache;
-
-		let uid = 1;
-
-		const dom_result = (await dom.bundle.generate({
-			format: 'iife',
-			name: 'SvelteComponent',
-			globals: id => {
-				const name = `import_${uid++}`;
-				import_map.set(id, name);
-				return name;
-			},
-			exports: 'named',
-			sourcemap: true
-		})).output[0];
-
-		const ssr = false // TODO how can we do SSR?
-			? await get_bundle('ssr', cached.ssr, lookup)
-			: null;
-
-		if (ssr) {
-			cached.ssr = ssr.cache;
-			if (ssr.error) {
-				throw ssr.error;
-			}
-		}
-
-		const ssr_result = ssr
-			? (await ssr.bundle.generate({
-				format: 'iife',
-				name: 'SvelteComponent',
-				globals: id => import_map.get(id),
-				exports: 'named',
-				sourcemap: true
-			})).output[0]
-			: null;
-
-		return {
-			id,
-			imports: dom_result.imports,
-			import_map,
-			dom: dom_result,
-			ssr: ssr_result,
-			warnings: dom.warnings,
-			error: null
-		};
-	} catch (err) {
-		const e = error || err;
-		delete e.toString;
-
-		return {
-			id,
-			imports: [],
-			import_map,
-			dom: null,
-			ssr: null,
-			warnings: dom.warnings,
-			error: Object.assign({}, e, {
-				message: e.message,
-				stack: e.stack
-			})
-		};
-	}
-}
diff --git a/site/static/workers/compiler.js b/site/static/workers/compiler.js
deleted file mode 100644
index 3d62eaded3..0000000000
--- a/site/static/workers/compiler.js
+++ /dev/null
@@ -1,58 +0,0 @@
-self.window = self; // egregious hack to get magic-string to work in a worker
-
-let fulfil_ready;
-const ready = new Promise(f => {
-	fulfil_ready = f;
-});
-
-self.addEventListener('message', async event => {
-	switch (event.data.type) {
-		case 'init':
-			importScripts(
-				event.data.version === 'local' ?
-					'/repl/local?file=compiler.js' :
-					`https://unpkg.com/svelte@${event.data.version}/compiler.js`
-			);
-			fulfil_ready();
-			break;
-
-		case 'compile':
-			await ready;
-			postMessage(compile(event.data));
-			break;
-	}
-});
-
-const common_options = {
-	dev: false,
-	css: false
-};
-
-function compile({ id, source, options }) {
-	try {
-		const { js, css } = svelte.compile(
-			source,
-			Object.assign({}, common_options, options)
-		);
-
-		return {
-			id,
-			result: {
-				js: js.code,
-				css: css.code || `/* Add a <sty` + `le> tag to see compiled CSS */`
-			}
-		};
-	} catch (err) {
-		let message = `/* Error compiling component\n\n${err.message}`;
-		if (err.frame) message += `\n${err.frame}`;
-		message += `\n\n*/`;
-
-		return {
-			id,
-			result: {
-				js: message,
-				css: message
-			}
-		};
-	}
-}