From d0cd4521dd0d910b03af400078a19bbaeee23d26 Mon Sep 17 00:00:00 2001
From: Brian S <bsssshhhhhhh@users.noreply.github.com>
Date: Sun, 3 Mar 2019 10:34:47 -0500
Subject: [PATCH 01/10] Update Element.ts

Adds 'rowindex' and 'colindex' to the list of recognized aria attributes as suggested here: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Row_Role
---
 src/compile/nodes/Element.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/compile/nodes/Element.ts b/src/compile/nodes/Element.ts
index 24378b180c..33d84b2009 100644
--- a/src/compile/nodes/Element.ts
+++ b/src/compile/nodes/Element.ts
@@ -18,7 +18,7 @@ import TemplateScope from './shared/TemplateScope';
 
 const svg = /^(?:altGlyph|altGlyphDef|altGlyphItem|animate|animateColor|animateMotion|animateTransform|circle|clipPath|color-profile|cursor|defs|desc|discard|ellipse|feBlend|feColorMatrix|feComponentTransfer|feComposite|feConvolveMatrix|feDiffuseLighting|feDisplacementMap|feDistantLight|feDropShadow|feFlood|feFuncA|feFuncB|feFuncG|feFuncR|feGaussianBlur|feImage|feMerge|feMergeNode|feMorphology|feOffset|fePointLight|feSpecularLighting|feSpotLight|feTile|feTurbulence|filter|font|font-face|font-face-format|font-face-name|font-face-src|font-face-uri|foreignObject|g|glyph|glyphRef|hatch|hatchpath|hkern|image|line|linearGradient|marker|mask|mesh|meshgradient|meshpatch|meshrow|metadata|missing-glyph|mpath|path|pattern|polygon|polyline|radialGradient|rect|set|solidcolor|stop|switch|symbol|text|textPath|tref|tspan|unknown|use|view|vkern)$/;
 
-const ariaAttributes = 'activedescendant atomic autocomplete busy checked controls current describedby details disabled dropeffect errormessage expanded flowto grabbed haspopup hidden invalid keyshortcuts label labelledby level live modal multiline multiselectable orientation owns placeholder posinset pressed readonly relevant required roledescription selected setsize sort valuemax valuemin valuenow valuetext'.split(' ');
+const ariaAttributes = 'activedescendant atomic autocomplete busy checked colindex controls current describedby details disabled dropeffect errormessage expanded flowto grabbed haspopup hidden invalid keyshortcuts label labelledby level live modal multiline multiselectable orientation owns placeholder posinset pressed readonly relevant required roledescription rowindex selected setsize sort valuemax valuemin valuenow valuetext'.split(' ');
 const ariaAttributeSet = new Set(ariaAttributes);
 
 const ariaRoles = 'alert alertdialog application article banner button cell checkbox columnheader combobox command complementary composite contentinfo definition dialog directory document feed figure form grid gridcell group heading img input landmark link list listbox listitem log main marquee math menu menubar menuitem menuitemcheckbox menuitemradio navigation none note option presentation progressbar radio radiogroup range region roletype row rowgroup rowheader scrollbar search searchbox section sectionhead select separator slider spinbutton status structure switch tab table tablist tabpanel term textbox timer toolbar tooltip tree treegrid treeitem widget window'.split(' ');

From 8f5aba32252607d36968b7d7201e1d41f06fd343 Mon Sep 17 00:00:00 2001
From: Conduitry <git@chor.date>
Date: Tue, 5 Mar 2019 12:31:02 -0500
Subject: [PATCH 02/10] prevent reactive declaration assignees from being
 dependencies (#2129)

---
 src/compile/Component.ts | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/compile/Component.ts b/src/compile/Component.ts
index 1b843e9ca2..7ff56dfa2d 100644
--- a/src/compile/Component.ts
+++ b/src/compile/Component.ts
@@ -1042,15 +1042,17 @@ export default class Component {
 						}
 
 						if (node.type === 'AssignmentExpression') {
-							assignees.add(getObject(node.left).name);
+							const { name } = getObject(node.left)
+							assignees.add(name);
+							dependencies.delete(name);
 						} else if (node.type === 'UpdateExpression') {
-							assignees.add(getObject(node.argument).name);
+							const { name } = getObject(node.argument);
+							assignees.add(name);
+							dependencies.delete(name);
 						} else if (isReference(node, parent)) {
-							const object = getObject(node);
-							const { name } = object;
-
+							const { name } = getObject(node);
 							const owner = scope.findOwner(name);
-							if ((!owner || owner === component.instance_scope) && (name[0] === '$' || component.var_lookup.has(name))) {
+							if ((!owner || owner === component.instance_scope) && (name[0] === '$' || component.var_lookup.has(name)) && !assignees.has(name)) {
 								dependencies.add(name);
 							}
 

From 957093e81a68897ec8ad71303169b525af9ea419 Mon Sep 17 00:00:00 2001
From: Conduitry <git@chor.date>
Date: Tue, 5 Mar 2019 12:34:47 -0500
Subject: [PATCH 03/10] update tests

---
 .../samples/dev-warning-missing-data-computed/expected.js   | 4 ++--
 .../reactive-values-non-topologically-ordered/expected.js   | 6 +++---
 .../reactive-values-non-writable-dependencies/expected.js   | 6 +++---
 .../_config.js                                              | 6 +++---
 .../main.svelte                                             | 0
 5 files changed, 11 insertions(+), 11 deletions(-)
 rename test/runtime/samples/{reactive-values-readonly => reactive-values-overwrite}/_config.js (76%)
 rename test/runtime/samples/{reactive-values-readonly => reactive-values-overwrite}/main.svelte (100%)

diff --git a/test/js/samples/dev-warning-missing-data-computed/expected.js b/test/js/samples/dev-warning-missing-data-computed/expected.js
index e3dff9649d..dcd1078a6d 100644
--- a/test/js/samples/dev-warning-missing-data-computed/expected.js
+++ b/test/js/samples/dev-warning-missing-data-computed/expected.js
@@ -56,8 +56,8 @@ function instance($$self, $$props, $$invalidate) {
 		if ('foo' in $$props) $$invalidate('foo', foo = $$props.foo);
 	};
 
-	$$self.$$.update = ($$dirty = { bar: 1, foo: 1 }) => {
-		if ($$dirty.bar || $$dirty.foo) {
+	$$self.$$.update = ($$dirty = { foo: 1 }) => {
+		if ($$dirty.foo) {
 			bar = foo * 2; $$invalidate('bar', bar);
 		}
 	};
diff --git a/test/js/samples/reactive-values-non-topologically-ordered/expected.js b/test/js/samples/reactive-values-non-topologically-ordered/expected.js
index de1a4cdc8c..edf98e9613 100644
--- a/test/js/samples/reactive-values-non-topologically-ordered/expected.js
+++ b/test/js/samples/reactive-values-non-topologically-ordered/expected.js
@@ -22,11 +22,11 @@ function instance($$self, $$props, $$invalidate) {
 		if ('x' in $$props) $$invalidate('x', x = $$props.x);
 	};
 
-	$$self.$$.update = ($$dirty = { b: 1, x: 1, a: 1 }) => {
-		if ($$dirty.b || $$dirty.x) {
+	$$self.$$.update = ($$dirty = { x: 1, b: 1 }) => {
+		if ($$dirty.x) {
 			b = x; $$invalidate('b', b);
 		}
-		if ($$dirty.a || $$dirty.b) {
+		if ($$dirty.b) {
 			a = b; $$invalidate('a', a);
 		}
 	};
diff --git a/test/js/samples/reactive-values-non-writable-dependencies/expected.js b/test/js/samples/reactive-values-non-writable-dependencies/expected.js
index fc2ca37d31..42f57a0037 100644
--- a/test/js/samples/reactive-values-non-writable-dependencies/expected.js
+++ b/test/js/samples/reactive-values-non-writable-dependencies/expected.js
@@ -17,12 +17,12 @@ let a = 1;
 let b = 2;
 
 function instance($$self, $$props, $$invalidate) {
-
+	
 
 	let max;
 
-	$$self.$$.update = ($$dirty = { max: 1, Math: 1, a: 1, b: 1 }) => {
-		if ($$dirty.max || $$dirty.a || $$dirty.b) {
+	$$self.$$.update = ($$dirty = { Math: 1, a: 1, b: 1 }) => {
+		if ($$dirty.a || $$dirty.b) {
 			max = Math.max(a, b); $$invalidate('max', max);
 		}
 	};
diff --git a/test/runtime/samples/reactive-values-readonly/_config.js b/test/runtime/samples/reactive-values-overwrite/_config.js
similarity index 76%
rename from test/runtime/samples/reactive-values-readonly/_config.js
rename to test/runtime/samples/reactive-values-overwrite/_config.js
index bf5c9dbb67..644a49ec0d 100644
--- a/test/runtime/samples/reactive-values-readonly/_config.js
+++ b/test/runtime/samples/reactive-values-overwrite/_config.js
@@ -11,11 +11,11 @@ export default {
 			<p>doubled: 4</p>
 		`);
 
-		component.doubled = 6;
+		component.doubled = 3;
 
-		assert.equal(component.doubled, 4);
+		assert.equal(component.doubled, 3);
 		assert.htmlEqual(target.innerHTML, `
-			<p>doubled: 4</p>
+			<p>doubled: 3</p>
 		`);
 	}
 };
diff --git a/test/runtime/samples/reactive-values-readonly/main.svelte b/test/runtime/samples/reactive-values-overwrite/main.svelte
similarity index 100%
rename from test/runtime/samples/reactive-values-readonly/main.svelte
rename to test/runtime/samples/reactive-values-overwrite/main.svelte

From f5290b29584e2c51a3311ab54fb03582294d627e Mon Sep 17 00:00:00 2001
From: Conduitry <git@chor.date>
Date: Tue, 5 Mar 2019 16:11:02 -0500
Subject: [PATCH 04/10] another test

---
 .../reactive-values-subscript-assignment/_config.js   | 11 +++++++++++
 .../reactive-values-subscript-assignment/main.svelte  |  7 +++++++
 2 files changed, 18 insertions(+)
 create mode 100644 test/runtime/samples/reactive-values-subscript-assignment/_config.js
 create mode 100644 test/runtime/samples/reactive-values-subscript-assignment/main.svelte

diff --git a/test/runtime/samples/reactive-values-subscript-assignment/_config.js b/test/runtime/samples/reactive-values-subscript-assignment/_config.js
new file mode 100644
index 0000000000..e29fe2c676
--- /dev/null
+++ b/test/runtime/samples/reactive-values-subscript-assignment/_config.js
@@ -0,0 +1,11 @@
+export default {
+	test({ assert, component }) {
+		assert.deepEqual(component.foo, {});
+		component.bar = 'hello';
+		assert.deepEqual(component.foo, { hello: true });
+		component.bar = 'world';
+		assert.deepEqual(component.foo, { hello: true, world: true });
+		component.bar = false;
+		assert.deepEqual(component.foo, { hello: true, world: true });
+	}
+};
diff --git a/test/runtime/samples/reactive-values-subscript-assignment/main.svelte b/test/runtime/samples/reactive-values-subscript-assignment/main.svelte
new file mode 100644
index 0000000000..9753032618
--- /dev/null
+++ b/test/runtime/samples/reactive-values-subscript-assignment/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let foo = {};
+	export let bar;
+	$: if (bar) {
+		foo[bar] = true;
+	}
+</script>

From bee6fe7ebce08b85485554a7100ec38699e8421d Mon Sep 17 00:00:00 2001
From: Conduitry <git@chor.date>
Date: Wed, 6 Mar 2019 12:42:40 -0500
Subject: [PATCH 05/10] require whitespace after `{@html` (#2154)

---
 src/parse/state/mustache.ts                            |  2 ++
 .../samples/raw-mustaches-whitespace-error/error.json  | 10 ++++++++++
 .../raw-mustaches-whitespace-error/input.svelte        |  1 +
 3 files changed, 13 insertions(+)
 create mode 100644 test/parser/samples/raw-mustaches-whitespace-error/error.json
 create mode 100644 test/parser/samples/raw-mustaches-whitespace-error/input.svelte

diff --git a/src/parse/state/mustache.ts b/src/parse/state/mustache.ts
index 980ec8555a..bdeb8bdede 100644
--- a/src/parse/state/mustache.ts
+++ b/src/parse/state/mustache.ts
@@ -316,6 +316,8 @@ export default function mustache(parser: Parser) {
 		}
 	} else if (parser.eat('@html')) {
 		// {@html content} tag
+		parser.requireWhitespace();
+
 		const expression = readExpression(parser);
 
 		parser.allowWhitespace();
diff --git a/test/parser/samples/raw-mustaches-whitespace-error/error.json b/test/parser/samples/raw-mustaches-whitespace-error/error.json
new file mode 100644
index 0000000000..abb9f8ed0f
--- /dev/null
+++ b/test/parser/samples/raw-mustaches-whitespace-error/error.json
@@ -0,0 +1,10 @@
+{
+	"code": "missing-whitespace",
+	"message": "Expected whitespace",
+	"start": {
+		"line": 1,
+		"column": 6,
+		"character": 6
+	},
+	"pos": 6
+}
diff --git a/test/parser/samples/raw-mustaches-whitespace-error/input.svelte b/test/parser/samples/raw-mustaches-whitespace-error/input.svelte
new file mode 100644
index 0000000000..94e75fda09
--- /dev/null
+++ b/test/parser/samples/raw-mustaches-whitespace-error/input.svelte
@@ -0,0 +1 @@
+{@htmlfoo}

From e6f0282da148298b458798ebacdc3d2af835d308 Mon Sep 17 00:00:00 2001
From: Richard Harris <richard.a.harris@gmail.com>
Date: Wed, 6 Mar 2019 14:20:41 -0500
Subject: [PATCH 06/10] various REPL improvements

---
 .../Repl}/CodeMirror.svelte                   | 120 +++----
 .../Repl}/Input/ComponentSelector.svelte      |  53 +--
 .../components/Repl/Input/ModuleEditor.svelte |  59 ++++
 .../Repl}/InputOutputToggle.svelte            |   0
 site/src/components/Repl/Message.svelte       |  80 +++++
 site/src/components/Repl/Output/Compiler.js   |  38 ++
 .../Repl}/Output/CompilerOptions.svelte       |   0
 .../Repl}/Output/PropEditor.svelte            |   0
 site/src/components/Repl/Output/ReplProxy.js  |  89 +++++
 site/src/components/Repl/Output/Viewer.svelte | 158 +++++++++
 .../Repl/Output}/getLocationFromStack.js      |   0
 site/src/components/Repl/Output/index.svelte  | 246 +++++++++++++
 .../Repl}/SplitPane.svelte                    |   1 +
 .../Repl}/_codemirror.js                      |   0
 .../Repl}/codemirror.css                      |   0
 site/src/components/Repl/index.svelte         | 232 +++++++++++++
 site/src/routes/api/blog/_posts.js            |  15 +-
 site/src/routes/guide/_sections.js            |  36 +-
 .../repl/_components/AppControls/index.svelte |   2 +-
 .../_components/Input/ModuleEditor.svelte     |  38 --
 .../repl/_components/Input/index.svelte       |  28 --
 .../repl/_components/Output/Viewer.svelte     | 325 ------------------
 .../repl/_components/Output/index.svelte      | 197 -----------
 site/src/routes/repl/_components/Repl.svelte  | 321 -----------------
 site/src/routes/repl/_utils/replProxy.js      |  90 -----
 site/src/routes/repl/embed.svelte             |  16 +-
 site/src/routes/repl/index.svelte             |  21 +-
 site/src/utils/_process_markdown.js           |  15 -
 .../repl/_components => utils}/events.js      |   0
 site/src/utils/markdown.js                    |  43 +++
 site/static/repl-runner.js                    | 264 +++++++-------
 site/static/workers/bundler.js                |  84 ++---
 site/static/workers/compiler.js               |  27 +-
 33 files changed, 1243 insertions(+), 1355 deletions(-)
 rename site/src/{routes/repl/_components => components/Repl}/CodeMirror.svelte (70%)
 rename site/src/{routes/repl/_components => components/Repl}/Input/ComponentSelector.svelte (73%)
 create mode 100644 site/src/components/Repl/Input/ModuleEditor.svelte
 rename site/src/{routes/repl/_components => components/Repl}/InputOutputToggle.svelte (100%)
 create mode 100644 site/src/components/Repl/Message.svelte
 create mode 100644 site/src/components/Repl/Output/Compiler.js
 rename site/src/{routes/repl/_components => components/Repl}/Output/CompilerOptions.svelte (100%)
 rename site/src/{routes/repl/_components => components/Repl}/Output/PropEditor.svelte (100%)
 create mode 100644 site/src/components/Repl/Output/ReplProxy.js
 create mode 100644 site/src/components/Repl/Output/Viewer.svelte
 rename site/src/{routes/repl/_utils => components/Repl/Output}/getLocationFromStack.js (100%)
 create mode 100644 site/src/components/Repl/Output/index.svelte
 rename site/src/{routes/repl/_components => components/Repl}/SplitPane.svelte (99%)
 rename site/src/{routes/repl/_components => components/Repl}/_codemirror.js (100%)
 rename site/src/{routes/repl/_components => components/Repl}/codemirror.css (100%)
 create mode 100644 site/src/components/Repl/index.svelte
 delete mode 100644 site/src/routes/repl/_components/Input/ModuleEditor.svelte
 delete mode 100644 site/src/routes/repl/_components/Input/index.svelte
 delete mode 100644 site/src/routes/repl/_components/Output/Viewer.svelte
 delete mode 100644 site/src/routes/repl/_components/Output/index.svelte
 delete mode 100644 site/src/routes/repl/_components/Repl.svelte
 delete mode 100644 site/src/routes/repl/_utils/replProxy.js
 delete mode 100644 site/src/utils/_process_markdown.js
 rename site/src/{routes/repl/_components => utils}/events.js (100%)
 create mode 100644 site/src/utils/markdown.js

diff --git a/site/src/routes/repl/_components/CodeMirror.svelte b/site/src/components/Repl/CodeMirror.svelte
similarity index 70%
rename from site/src/routes/repl/_components/CodeMirror.svelte
rename to site/src/components/Repl/CodeMirror.svelte
index b8b3b18109..8c3f5a0660 100644
--- a/site/src/routes/repl/_components/CodeMirror.svelte
+++ b/site/src/components/Repl/CodeMirror.svelte
@@ -12,33 +12,60 @@
 </script>
 
 <script>
-	import { onMount, beforeUpdate, createEventDispatcher } from 'svelte';
+	import { onMount, beforeUpdate, createEventDispatcher, getContext } from 'svelte';
+	import Message from './Message.svelte';
 
 	const dispatch = createEventDispatcher();
+	const { navigate } = getContext('REPL');
 
-	export let mode;
-	export let code;
 	export let readonly = false;
-	export let error = null;
 	export let errorLoc = null;
-	export let warningCount = 0;
 	export let flex = false;
 	export let lineNumbers = true;
 	export let tab = true;
 
 	let w;
 	let h;
+	let code = '';
+	let mode;
+
+	// We have to expose set and update methods, rather
+	// than making this state-driven through props,
+	// because it's difficult to update an editor
+	// without resetting scroll otherwise
+	export function set(new_code, new_mode) {
+		if (new_mode !== mode) {
+			createEditor(mode = new_mode);
+		}
+
+		code = new_code;
+		if (editor) editor.setValue(code);
+	}
+
+	export function update(new_code) {
+		code = new_code;
+
+		if (editor) {
+			const { left, top } = editor.getScrollInfo();
+			editor.setValue(code = new_code);
+			editor.scrollTo(left, top);
+		}
+	}
 
 	export function resize() {
 		editor.refresh();
 	}
 
 	const modes = {
+		js: {
+			name: 'javascript',
+			json: false
+		},
 		json: {
 			name: 'javascript',
 			json: true
 		},
-		handlebars: {
+		svelte: {
 			name: 'handlebars',
 			base: 'text/html'
 		}
@@ -52,15 +79,6 @@
 	let destroyed = false;
 	let CodeMirror;
 
-	$: if (CodeMirror) {
-		createEditor(mode);
-	}
-
-	$: if (editor && !updating && code != null) {
-		updating = true;
-		editor.setValue(code);
-	}
-
 	$: if (editor && w && h) {
 		editor.refresh();
 	}
@@ -97,9 +115,13 @@
 	onMount(() => {
 		if (_CodeMirror) {
 			CodeMirror = _CodeMirror;
+			createEditor(mode || 'svelte');
+			editor.setValue(code || '');
 		} else {
 			codemirror_promise.then(mod => {
 				CodeMirror = mod.default;
+				createEditor(mode || 'svelte');
+				editor.setValue(code || '');
 			});
 		}
 
@@ -114,7 +136,7 @@
 	});
 
 	function createEditor(mode) {
-		if (destroyed) return;
+		if (destroyed || !CodeMirror) return;
 
 		if (editor) {
 			editor.toTextArea();
@@ -126,7 +148,7 @@
 			indentWithTabs: true,
 			indentUnit: 2,
 			tabSize: 2,
-			value: code,
+			value: '',
 			mode: modes[mode] || {
 				name: mode
 			},
@@ -143,8 +165,8 @@
 		editor.on('change', instance => {
 			if (!updating) {
 				updating = true;
-				code = instance.getValue();
-				dispatch('change', { value: code });
+				// code = instance.getValue();
+				dispatch('change', { value: instance.getValue() });
 			}
 		});
 
@@ -159,6 +181,7 @@
 		height: 100%;
 		border: none;
 		line-height: 1.5;
+		overflow: hidden;
 	}
 
 	.codemirror-container :global(.CodeMirror) {
@@ -182,13 +205,6 @@
 		border: none;
 	}
 
-	.codemirror-container .message {
-		position: absolute;
-		bottom: 2.4rem;
-		left: 2.4rem;
-		z-index: 20;
-	}
-
 	.codemirror-container :global(.error-loc) {
 		position: relative;
 		border-bottom: 2px solid #da106e;
@@ -198,18 +214,6 @@
 		background-color: rgba(200, 0, 0, .05);
 	}
 
-	.loading,
-	.error {
-		text-align: center;
-		color: #999;
-		font-weight: 400;
-		margin: 2.4rem 0 0 0;
-	}
-
-	.loading {
-		background-color: #666;
-	}
-
 	textarea {
 		visibility: hidden;
 	}
@@ -221,7 +225,7 @@
 		top: 0;
 		left: 0;
 		border: none;
-		padding: 4px 4px 4px 57px;
+		padding: 4px 4px 4px 60px;
 		resize: none;
 		font-family: var(--font-mono);
 		font-size: 1.3rem;
@@ -237,19 +241,8 @@
 		padding: 0 0 0 4px;
 		height: auto;
 	}
-
-	.flex .loading {
-		display: none;
-	}
 </style>
 
-<!--
------------------------------------------------
-	syntax-highlighting [prism]
-	NOTE
-	- just started to transfer colors from prism to codemirror
------------------------------------------------
--->
 <div class='codemirror-container' class:flex bind:offsetWidth={w} bind:offsetHeight={h}>
 	<textarea
 		tabindex='2'
@@ -258,33 +251,12 @@
 		value={code}
 	></textarea>
 
-	{#if error}
-		<p class='error message'>
-			{#if error.loc}
-				<strong>
-					{#if error.filename}
-						<span
-							class='filename'
-							on:click="{() => dispatch('navigate', { filename: error.filename })}"
-						>{error.filename}</span>
-					{/if}
-
-					({error.loc.line}:{error.loc.column})
-				</strong>
-			{/if}
-
-			{error.message}
-		</p>
-	{:elseif warningCount > 0}
-		<p class='warning message'>
-			Compiled, but with {warningCount} {warningCount === 1 ? 'warning' : 'warnings'} — check the console for details
-		</p>
-	{/if}
-
 	{#if !CodeMirror}
 		<pre style="position: absolute; left: 0; top: 0"
 		>{code}</pre>
 
-		<p class='loading message'>loading editor...</p>
+		<div style="position: absolute; width: 100%; bottom: 0">
+			<Message kind='info'>loading editor...</Message>
+		</div>
 	{/if}
 </div>
\ No newline at end of file
diff --git a/site/src/routes/repl/_components/Input/ComponentSelector.svelte b/site/src/components/Repl/Input/ComponentSelector.svelte
similarity index 73%
rename from site/src/routes/repl/_components/Input/ComponentSelector.svelte
rename to site/src/components/Repl/Input/ComponentSelector.svelte
index bde0a280e5..02511c373d 100644
--- a/site/src/routes/repl/_components/Input/ComponentSelector.svelte
+++ b/site/src/components/Repl/Input/ComponentSelector.svelte
@@ -1,33 +1,31 @@
 <script>
-	import { createEventDispatcher } from 'svelte';
-	import Icon from '../../../../components/Icon.svelte';
-	import { enter } from '../events.js';
+	import { getContext, createEventDispatcher } from 'svelte';
+	import Icon from '../../Icon.svelte';
+	import { enter } from '../../../utils/events.js';
 
-	const dispatch = createEventDispatcher();
+	export let handle_select;
 
-	export let component_store;
-	export let selected_store;
+	const { components, selected } = getContext('REPL');
 
 	let editing = null;
 
 	function selectComponent(component) {
-		if ($selected_store != component) {
+		if ($selected !== component) {
 			editing = null;
+			handle_select(component);
 		}
-
-		selected_store.set(component);
 	}
 
 	function editTab(component) {
-		if ($selected_store === component) {
-			editing = $selected_store;
+		if ($selected === component) {
+			editing = $selected;
 		}
 	}
 
 	function closeEdit() {
-		const match = /(.+)\.(svelte|js)$/.exec($selected_store.name);
-		$selected_store.name = match ? match[1] : $selected_store.name;
-		if (match && match[2]) $selected_store.type = match[2];
+		const match = /(.+)\.(svelte|js)$/.exec($selected.name);
+		$selected.name = match ? match[1] : $selected.name;
+		if (match && match[2]) $selected.type = match[2];
 		editing = null;
 
 		components = components; // TODO necessary?
@@ -35,7 +33,18 @@
 
 	function remove(component) {
 		let result = confirm(`Are you sure you want to delete ${component.name}.${component.type}?`);
-		if (result) dispatch('remove');
+
+		if (result) {
+			const index = $components.indexOf(component);
+
+			if (~index) {
+				components.set($components.slice(0, index).concat($components.slice(index + 1)));
+			} else {
+				console.error(`Could not find component! That's... odd`);
+			}
+
+			selected.set($components[index] || $components[$components.length - 1]);
+		}
 	}
 
 	function selectInput(event) {
@@ -60,8 +69,8 @@
 			document.getElementById(component.name).scrollIntoView(false);
 		});
 
-		component_store.update(components => components.concat(component));
-		selected_store.set(component);
+		components.update(components => components.concat(component));
+		selected.set(component);
 	}
 </script>
 
@@ -171,10 +180,10 @@
 
 <div class="component-selector">
 	<div class="file-tabs" on:dblclick="{addNew}">
-		{#each $component_store as component}
+		{#each $components as component}
 			<button
 				id={component.name}
-				class:active="{component === $selected_store}"
+				class:active="{component === $selected}"
 				data-name={component.name}
 				on:click="{() => selectComponent(component)}"
 				on:dblclick="{e => e.stopPropagation()}"
@@ -185,11 +194,11 @@
 					</div>
 				{:else}
 					{#if component === editing}
-						<span class="input-sizer">{component.name + (/\./.test(component.name) ? '' : `.${component.type}`)}</span>
+						<span class="input-sizer">{editing.name + (/\./.test(editing.name) ? '' : `.${editing.type}`)}</span>
 
 						<input
 							autofocus
-							bind:value={component.name}
+							bind:value={editing.name}
 							on:focus={selectInput}
 							on:blur="{() => closeEdit()}"
 							use:enter="{e => e.target.blur()}"
@@ -213,7 +222,7 @@
 		{/each}
 	</div>
 
-	<button class="add-new" on:click="{addNew}" title="add new component">
+	<button class="add-new" on:click={addNew} title="add new component">
 		<Icon name="plus" />
 	</button>
 </div>
diff --git a/site/src/components/Repl/Input/ModuleEditor.svelte b/site/src/components/Repl/Input/ModuleEditor.svelte
new file mode 100644
index 0000000000..272066e84f
--- /dev/null
+++ b/site/src/components/Repl/Input/ModuleEditor.svelte
@@ -0,0 +1,59 @@
+<script>
+	import { getContext, onMount } from 'svelte';
+	import CodeMirror from '../CodeMirror.svelte';
+	import Message from '../Message.svelte';
+
+	const { bundle, selected, handle_change, navigate, register_module_editor } = getContext('REPL');
+
+	export let errorLoc;
+
+	let editor;
+	onMount(() => {
+		register_module_editor(editor);
+	});
+</script>
+
+<style>
+	.editor-wrapper {
+		z-index: 5;
+		background: var(--back-light);
+		display: flex;
+		flex-direction: column;
+	}
+
+	.editor {
+		height: 0;
+		flex: 1 1 auto;
+	}
+
+	@media (min-width: 600px) {
+		:global(.columns) .editor-wrapper {
+			/* make it easier to interact with scrollbar */
+			padding-right: 8px;
+			height: auto;
+			/* height: 100%; */
+		}
+	}
+</style>
+
+<div class="editor-wrapper">
+	<div class="editor">
+		<CodeMirror
+			bind:this={editor}
+			{errorLoc}
+			on:change={handle_change}
+		/>
+	</div>
+
+	<div class="info">
+		{#if $bundle}
+			{#if $bundle.error}
+				<Message kind="error" details={$bundle.error} filename="{$selected.name}.{$selected.type}"/>
+			{:else if $bundle.warnings.length > 0}
+				{#each $bundle.warnings as warning}
+					<Message kind="warning" details={warning} filename="{$selected.name}.{$selected.type}"/>
+				{/each}
+			{/if}
+		{/if}
+	</div>
+</div>
\ No newline at end of file
diff --git a/site/src/routes/repl/_components/InputOutputToggle.svelte b/site/src/components/Repl/InputOutputToggle.svelte
similarity index 100%
rename from site/src/routes/repl/_components/InputOutputToggle.svelte
rename to site/src/components/Repl/InputOutputToggle.svelte
diff --git a/site/src/components/Repl/Message.svelte b/site/src/components/Repl/Message.svelte
new file mode 100644
index 0000000000..6a9183dfb3
--- /dev/null
+++ b/site/src/components/Repl/Message.svelte
@@ -0,0 +1,80 @@
+<script>
+	import { getContext } from 'svelte';
+
+	const { navigate } = getContext('REPL');
+
+	export let kind;
+	export let details = null;
+	export let filename = null;
+
+	function message(details) {
+		let str = details.message || '[missing message]';
+
+		let loc = [];
+
+		if (details.filename && details.filename !== filename) {
+			loc.push(details.filename);
+		}
+
+		if (details.start) loc.push(details.start.line, details.start.column);
+
+		return str + (loc.length ? ` (${loc.join(':')})` : ``);
+	};
+</script>
+
+<style>
+	.message {
+		position: relative;
+		color: white;
+		padding: 1.2rem 1.6rem 1.2rem 4.4rem;
+		font: 400 1.2rem/1.7 var(--font);
+		margin: 0;
+		border-top: 1px solid white;
+	}
+
+	.navigable {
+		cursor: pointer;
+	}
+
+	.message::before {
+		content: '!';
+		position: absolute;
+		left: 1.2rem;
+		top: 1.1rem;
+		width: 1rem;
+		height: 1rem;
+		text-align: center;
+		line-height: 1;
+		padding: .4rem;
+		border-radius: 50%;
+		color: white;
+		border: .2rem solid white;
+	}
+
+	p {
+		margin: 0;
+	}
+
+	.info {
+		background-color: var(--second);
+	}
+
+	.error {
+		background-color: #da106e;
+	}
+
+	.warning {
+		background-color: #e47e0a;
+	}
+</style>
+
+<div class="message {kind}">
+	{#if details}
+		<p
+			class:navigable={details.filename}
+			on:click="{() => navigate(details)}"
+		>{message(details)}</p>
+	{:else}
+		<slot></slot>
+	{/if}
+</div>
\ No newline at end of file
diff --git a/site/src/components/Repl/Output/Compiler.js b/site/src/components/Repl/Output/Compiler.js
new file mode 100644
index 0000000000..b6d13e53bd
--- /dev/null
+++ b/site/src/components/Repl/Output/Compiler.js
@@ -0,0 +1,38 @@
+export default class Compiler {
+	constructor(version) {
+		this.worker = new Worker('/workers/compiler.js');
+		this.worker.postMessage({ type: 'init', version });
+
+		this.uid = 1;
+		this.handlers = new Map();
+
+		this.worker.onmessage = event => {
+			const handler = this.handlers.get(event.data.id);
+			handler(event.data.result);
+			this.handlers.delete(event.data.id);
+		};
+	}
+
+	compile(component, options) {
+		return new Promise(fulfil => {
+			const id = this.uid++;
+
+			this.handlers.set(id, fulfil);
+
+			this.worker.postMessage({
+				id,
+				type: 'compile',
+				source: component.source,
+				options: Object.assign({
+					name: component.name,
+					filename: `${component.name}.svelte`
+				}, options),
+				entry: component.name === 'App'
+			});
+		});
+	}
+
+	destroy() {
+		this.worker.terminate();
+	}
+}
\ No newline at end of file
diff --git a/site/src/routes/repl/_components/Output/CompilerOptions.svelte b/site/src/components/Repl/Output/CompilerOptions.svelte
similarity index 100%
rename from site/src/routes/repl/_components/Output/CompilerOptions.svelte
rename to site/src/components/Repl/Output/CompilerOptions.svelte
diff --git a/site/src/routes/repl/_components/Output/PropEditor.svelte b/site/src/components/Repl/Output/PropEditor.svelte
similarity index 100%
rename from site/src/routes/repl/_components/Output/PropEditor.svelte
rename to site/src/components/Repl/Output/PropEditor.svelte
diff --git a/site/src/components/Repl/Output/ReplProxy.js b/site/src/components/Repl/Output/ReplProxy.js
new file mode 100644
index 0000000000..44b77b84dd
--- /dev/null
+++ b/site/src/components/Repl/Output/ReplProxy.js
@@ -0,0 +1,89 @@
+export default class ReplProxy {
+	constructor(iframe, handlers) {
+		this.iframe = iframe;
+		this.handlers = handlers;
+
+		this.cmdId = 1;
+		this.pendingCmds = new Map();
+
+		this.handle_event = e => this.handleReplMessage(e);
+		window.addEventListener('message', this.handle_event, false);
+	}
+
+	destroy() {
+		window.removeEventListener('message', this.handle_event);
+	}
+
+	iframeCommand(command, args) {
+		return new Promise( (resolve, reject) => {
+			this.cmdId += 1;
+			this.pendingCmds.set(this.cmdId, { resolve, reject });
+
+			this.iframe.contentWindow.postMessage({
+				action: command,
+				cmdId: this.cmdId,
+				args
+			}, '*')
+		});
+	}
+
+	handleCommandMessage(cmdData) {
+		let action = cmdData.action;
+		let id = cmdData.cmdId;
+		let handler = this.pendingCmds.get(id);
+
+		if (handler) {
+			this.pendingCmds.delete(id);
+			if (action === 'cmdError') {
+				let { message, stack } = cmdData;
+				let e = new Error(message);
+				e.stack = stack;
+				console.log('repl cmd fail');
+				handler.reject(e)
+			}
+
+			if (action === 'cmdOk') {
+				handler.resolve(cmdData.args)
+			}
+		} else {
+			console.error('command not found', id, cmdData, [...this.pendingCmds.keys()]);
+		}
+	}
+
+	handleReplMessage(event) {
+		const { action, args } = event.data;
+
+		if (action === 'cmdError' || action === 'cmdOk') {
+			this.handleCommandMessage(event.data);
+		}
+
+		if (action === 'prop_update') {
+			const { prop, value } = args;
+			this.handlers.onPropUpdate(prop, value)
+		}
+
+		if (action === 'fetch_progress') {
+			this.handlers.onFetchProgress(args.remaining)
+		}
+	}
+
+	eval(script) {
+		return this.iframeCommand('eval', { script });
+	}
+
+	setProp(prop, value) {
+		return this.iframeCommand('set_prop', {prop, value})
+	}
+
+	bindProps(props) {
+		return this.iframeCommand('bind_props', { props })
+	}
+
+	handleLinks() {
+		return this.iframeCommand('catch_clicks', {});
+	}
+
+	fetchImports(imports, import_map) {
+		return this.iframeCommand('fetch_imports', { imports, import_map })
+	}
+}
\ No newline at end of file
diff --git a/site/src/components/Repl/Output/Viewer.svelte b/site/src/components/Repl/Output/Viewer.svelte
new file mode 100644
index 0000000000..42f3e31326
--- /dev/null
+++ b/site/src/components/Repl/Output/Viewer.svelte
@@ -0,0 +1,158 @@
+<script>
+	import { onMount, createEventDispatcher, getContext } from 'svelte';
+	import getLocationFromStack from './getLocationFromStack.js';
+	import ReplProxy from './ReplProxy.js';
+	import Message from '../Message.svelte';
+	import { decode } from 'sourcemap-codec';
+
+	const dispatch = createEventDispatcher();
+	const { bundle, values, navigate } = getContext('REPL');
+
+	export let props;
+	export let error; // TODO should this be exposed as a prop?
+
+	export function setProp(prop, value) {
+		if (!proxy) return;
+		proxy.setProp(prop, value);
+	}
+
+	let iframe;
+	let pending_imports = 0;
+	let pending = false;
+
+	let proxy = null;
+
+	let ready = false;
+
+	onMount(() => {
+		proxy = new ReplProxy(iframe, {
+			onPropUpdate: (prop, value) => {
+				dispatch('binding', { prop, value });
+				values.update(values => Object.assign({}, values, {
+					[prop]: value
+				}));
+			},
+
+			onFetchProgress: progress => {
+				pending_imports = progress;
+			}
+		});
+
+		iframe.addEventListener('load', () => {
+			proxy.handleLinks();
+			ready = true;
+		});
+
+		return () => {
+			proxy.destroy();
+		}
+	});
+
+	let current_token;
+
+	async function apply_bundle($bundle) {
+		if (!$bundle || $bundle.error) return;
+
+		const token = current_token = {};
+
+		try {
+			await proxy.fetchImports($bundle.imports, $bundle.import_map);
+			if (token !== current_token) return;
+
+			await proxy.eval(`
+				const styles = document.querySelectorAll('style.svelte');
+				let i = styles.length;
+				while (i--) styles[i].parentNode.removeChild(styles[i]);
+			`)
+
+			await proxy.eval(`${$bundle.dom.code}
+				if (window.component) {
+					try {
+						window.component.$destroy();
+					} catch (err) {
+						console.error(err);
+					}
+				}
+
+				document.body.innerHTML = '';
+				window.location.hash = '';
+				window._svelteTransitionManager = null;
+
+				window.component = new SvelteComponent({
+					target: document.body,
+					props: ${JSON.stringify($values)}
+				});
+			`);
+
+			await proxy.bindProps(props);
+
+			error = null;
+		} catch (e) {
+			const loc = getLocationFromStack(e.stack, $bundle.dom.map);
+			if (loc) {
+				e.filename = loc.source;
+				e.loc = { line: loc.line, column: loc.column };
+			}
+
+			error = e;
+		}
+	}
+
+	$: if (ready) apply_bundle($bundle);
+</script>
+
+<style>
+	.iframe-container {
+		position: absolute;
+		background-color: white;
+		border: none;
+		width: 100%;
+		height: 100%;
+	}
+
+	iframe {
+		width: 100%;
+		height: 100%;
+		/* height: calc(100vh - var(--nav-h)); */
+		border: none;
+		display: block;
+	}
+
+	.greyed-out {
+		filter: grayscale(50%) blur(1px);
+		opacity: .25;
+	}
+
+	.overlay {
+		position: absolute;
+		bottom: 0;
+		width: 100%;
+	}
+</style>
+
+<div class="iframe-container">
+	<iframe title="Result" bind:this={iframe} sandbox="allow-popups-to-escape-sandbox allow-scripts allow-popups allow-forms allow-pointer-lock allow-top-navigation allow-modals" class="{error || pending || pending_imports ? 'greyed-out' : ''}" srcdoc='
+		<!doctype html>
+		<html>
+			<head>
+				<link rel="stylesheet" href="/repl-viewer.css">
+			</head>
+			<body>
+				<script src="/curl.js"></script>
+				<script>curl.config(&#123; dontAddFileExt: /./ });</script>
+				<script src="/repl-runner.js"></script>
+			</body>
+		</html>
+	'></iframe>
+
+	<div class="overlay">
+		{#if error}
+			<Message kind="error" details={error}/>
+		{:else if !$bundle}
+			<Message kind="info">loading Svelte compiler...</Message>
+		{:else if pending_imports}
+			<Message kind="info">loading {pending_imports} {pending_imports === 1 ? 'dependency' : 'dependencies'} from
+			https://bundle.run</Message>
+		{/if}
+	</div>
+</div>
\ No newline at end of file
diff --git a/site/src/routes/repl/_utils/getLocationFromStack.js b/site/src/components/Repl/Output/getLocationFromStack.js
similarity index 100%
rename from site/src/routes/repl/_utils/getLocationFromStack.js
rename to site/src/components/Repl/Output/getLocationFromStack.js
diff --git a/site/src/components/Repl/Output/index.svelte b/site/src/components/Repl/Output/index.svelte
new file mode 100644
index 0000000000..d1b2bd344e
--- /dev/null
+++ b/site/src/components/Repl/Output/index.svelte
@@ -0,0 +1,246 @@
+<script>
+	import { getContext, onMount } from 'svelte';
+	import SplitPane from '../SplitPane.svelte';
+	import Viewer from './Viewer.svelte';
+	import CompilerOptions from './CompilerOptions.svelte';
+	import Compiler from './Compiler.js';
+	import PropEditor from './PropEditor.svelte';
+	import CodeMirror from '../CodeMirror.svelte';
+
+	const { values, register_output } = getContext('REPL');
+
+	export let version;
+	export let sourceErrorLoc;
+	export let runtimeError;
+	export let embedded;
+	export let show_props;
+
+	let props;
+
+	let compile_options = {
+		generate: 'dom',
+		dev: false,
+		css: false,
+		hydratable: false,
+		customElement: false,
+		immutable: false,
+		legacy: false
+	};
+
+	register_output({
+		set: async selected => {
+			if (selected.type === 'js') {
+				js_editor.set(`/* Select a component to see its compiled code */`);
+				css_editor.set(`/* Select a component to see its compiled code */`);
+				return;
+			}
+
+			const compiled = await compiler.compile(selected, compile_options);
+
+			js_editor.set(compiled.js, 'js');
+			css_editor.set(compiled.css, 'css');
+			if (compiled.props) props = compiled.props;
+		},
+
+		update: async selected => {
+			if (selected.type === 'js') return;
+
+			const compiled = await compiler.compile(selected, compile_options);
+
+			js_editor.update(compiled.js);
+			css_editor.update(compiled.css);
+			if (compiled.props) props = compiled.props;
+		}
+	});
+
+	let compiler;
+
+	onMount(() => {
+		compiler = new Compiler(version);
+		return () => compiler.destroy();
+	});
+
+	// refs
+	let viewer;
+	let js_editor;
+	let css_editor;
+	const setters = {};
+
+	let view = 'result';
+
+	function updateValues(prop, value) {
+		values.update(v => Object.assign({}, v, {
+			[prop]: value
+		}));
+	}
+
+	function setPropFromViewer(prop, value) {
+		// console.log(setters, prop, value);
+		// setters[prop](value);
+		updateValues(prop, value);
+	}
+
+	function setPropFromEditor(prop, value) {
+		viewer.setProp(prop, value);
+		updateValues(prop, value);
+	}
+</script>
+
+<style>
+	.view-toggle {
+		height: var(--pane-controls-h);
+		border-bottom: 1px solid #eee;
+		white-space: nowrap;
+	}
+
+	button {
+		/* width: 50%;
+		height: 100%; */
+		text-align: left;
+		position: relative;
+		font: 400 1.2rem/1.5 var(--font);
+		border-bottom: var(--border-w) solid transparent;
+		padding: 1.2rem 0.8rem 0.8rem 0.8rem;
+		color: #999;
+	}
+
+	button.active {
+		border-bottom: var(--border-w) solid var(--prime);
+		color: #333;
+	}
+
+	div[slot] {
+		height: 100%;
+	}
+
+	h3 {
+		font: 700 1.2rem/1.5 var(--font);
+		padding: 1.2rem 0 0.8rem 1rem;
+		color: var(--text);
+	}
+
+	.props {
+		display: grid;
+		padding: 0.5em;
+		grid-template-columns: auto 1fr;
+		grid-auto-rows: min-content;
+		grid-gap: 0.5em;
+		overflow-y: auto;
+	}
+
+	.props code {
+		top: .1rem;
+	}
+
+	.tab-content {
+		position: absolute;
+		width: 100%;
+		height: calc(100% - 4.2rem);
+		opacity: 0;
+		pointer-events: none;
+	}
+
+	.tab-content.visible {
+		/* can't use visibility due to a weird painting bug in Chrome */
+		opacity: 1;
+		pointer-events: all;
+	}
+</style>
+
+<div class="view-toggle">
+	<button
+		class:active="{view === 'result'}"
+		on:click="{() => view = 'result'}"
+	>Result</button>
+
+	<button
+		class:active="{view === 'js'}"
+		on:click="{() => view = 'js'}"
+	>JS output</button>
+
+	<button
+		class:active="{view === 'css'}"
+		on:click="{() => view = 'css'}"
+	>CSS output</button>
+</div>
+
+<!-- component viewer -->
+<div class="tab-content" class:visible="{view === 'result'}">
+	<SplitPane type="vertical" pos={67} fixed={!show_props} fixed_pos={100}>
+		<div slot="a">
+			<Viewer
+				bind:this={viewer}
+				{props}
+				bind:error={runtimeError}
+				on:binding="{e => setPropFromViewer(e.detail.prop, e.detail.value)}"
+			/>
+		</div>
+
+		<section slot="b">
+			{#if show_props}
+				<h3>Props editor</h3>
+
+				{#if props}
+					{#if props.length > 0}
+						<div class="props">
+							{#each props.sort() as prop (prop)}
+								<code style="display: block; whitespace: pre;">{prop}</code>
+
+								<!-- TODO `bind:this={propEditors[prop]}` — currently fails -->
+								<PropEditor
+									value={$values[prop]}
+									on:change="{e => setPropFromEditor(prop, e.detail.value)}"
+								/>
+							{/each}
+						</div>
+					{:else}
+						<div style="padding: 0.5em" class="linkify">
+							<!-- TODO explain distincion between logic-less and logic-ful components? -->
+							<!-- TODO style the <a> so it looks like a link -->
+							<p style="font-size: 1.3rem; color: var(--second)">This component has no props — <a href="guide#external-properties">declare props with the export keyword</a></p>
+						</div>
+					{/if}
+				{/if}
+			{/if}
+		</section>
+	</SplitPane>
+</div>
+
+<!-- js output -->
+<div class="tab-content" class:visible="{view === 'js'}">
+	{#if embedded}
+		<CodeMirror
+			bind:this={js_editor}
+			mode="js"
+			errorLoc={sourceErrorLoc}
+			readonly
+		/>
+	{:else}
+		<SplitPane type="vertical" pos={67}>
+			<div slot="a">
+				<CodeMirror
+					bind:this={js_editor}
+					mode="js"
+					errorLoc={sourceErrorLoc}
+					readonly
+				/>
+			</div>
+
+			<section slot="b">
+				<h3>Compiler options</h3>
+
+				<CompilerOptions bind:options={compile_options}/>
+			</section>
+		</SplitPane>
+	{/if}
+</div>
+
+<!-- css output -->
+<div class="tab-content" class:visible="{view === 'css'}">
+	<CodeMirror
+		bind:this={css_editor}
+		mode="css"
+		errorLoc={sourceErrorLoc}
+		readonly
+	/>
+</div>
\ No newline at end of file
diff --git a/site/src/routes/repl/_components/SplitPane.svelte b/site/src/components/Repl/SplitPane.svelte
similarity index 99%
rename from site/src/routes/repl/_components/SplitPane.svelte
rename to site/src/components/Repl/SplitPane.svelte
index a79ef8b775..d7106553f3 100644
--- a/site/src/routes/repl/_components/SplitPane.svelte
+++ b/site/src/components/Repl/SplitPane.svelte
@@ -71,6 +71,7 @@
 	}
 
 	.pane {
+		position: relative;
 		float: left;
 		width: 100%;
 		height: 100%;
diff --git a/site/src/routes/repl/_components/_codemirror.js b/site/src/components/Repl/_codemirror.js
similarity index 100%
rename from site/src/routes/repl/_components/_codemirror.js
rename to site/src/components/Repl/_codemirror.js
diff --git a/site/src/routes/repl/_components/codemirror.css b/site/src/components/Repl/codemirror.css
similarity index 100%
rename from site/src/routes/repl/_components/codemirror.css
rename to site/src/components/Repl/codemirror.css
diff --git a/site/src/components/Repl/index.svelte b/site/src/components/Repl/index.svelte
new file mode 100644
index 0000000000..128e6f639f
--- /dev/null
+++ b/site/src/components/Repl/index.svelte
@@ -0,0 +1,232 @@
+<script>
+	import { onMount, setContext, createEventDispatcher } from 'svelte';
+	import { writable } from 'svelte/store';
+	import SplitPane from './SplitPane.svelte';
+	import CodeMirror from './CodeMirror.svelte';
+	import ComponentSelector from './Input/ComponentSelector.svelte';
+	import ModuleEditor from './Input/ModuleEditor.svelte';
+	import Output from './Output/index.svelte';
+	import InputOutputToggle from './InputOutputToggle.svelte';
+
+	export let version = 'beta'; // TODO change this to latest when the time comes
+	export let embedded = false;
+	export let orientation = 'columns';
+	export let show_props = true;
+
+	export function toJSON() {
+		// TODO there's a bug here — Svelte hoists this function because
+		// it wrongly things that $components is global. Needs to
+		// factor in $ variables when determining hoistability
+
+		version; // workaround
+
+		return {
+			imports: $bundle.imports,
+			components: $components,
+			values: $values
+		};
+	}
+
+	export function set(data) {
+		components.set(data.components);
+		values.set(data.values);
+		selected.set(data.components[0]);
+
+		module_editor.set($selected.source, $selected.type);
+		output.set($selected);
+	}
+
+	export function update(data) {
+		const { name, type } = $selected || {};
+
+		components.set(data.components);
+		values.set(data.values);
+
+		const matched_component = data.components.find(file => file.name === name && file.type === type);
+		selected.set(matched_component || data.components[0]);
+
+		if (matched_component) {
+			module_editor.update(matched_component.source);
+			output.update(matched_component);
+		} else {
+			module_editor.set(matched_component.source, matched_component.type);
+			output.set(matched_component);
+		}
+	}
+
+	const dispatch = createEventDispatcher();
+
+	const components = writable([]);
+	const values = writable({});
+	const selected = writable(null);
+	const bundle = writable(null);
+
+	let module_editor;
+	let output;
+
+	setContext('REPL', {
+		components,
+		values,
+		selected,
+		bundle,
+
+		navigate: item => {
+			const match = /^(.+)\.(\w+)$/.exec(item.filename);
+			if (!match) return; // ???
+
+			const [, name, type] = match;
+			const component = $components.find(c => c.name === name && c.type === type);
+			selected.set(component);
+
+			output.set($selected);
+
+			// TODO select the line/column in question
+		},
+
+		handle_change: event => {
+			selected.update(component => {
+				// TODO this is a bit hacky — we're relying on mutability
+				// so that updating components works... might be better
+				// if a) components had unique IDs, b) we tracked selected
+				// *index* rather than component, and c) `selected` was
+				// derived from `components` and `index`
+				component.source = event.detail.value;
+				return component;
+			});
+
+			components.update(c => c);
+
+			// recompile selected component
+			output.update($selected);
+
+			// regenerate bundle (TODO do this in a separate worker?)
+			workers.bundler.postMessage({ type: 'bundle', components: $components });
+
+			dispatch('change', {
+				components: $components
+			});
+		},
+
+		register_module_editor(editor) {
+			module_editor = editor;
+		},
+
+		register_output(handlers) {
+			output = handlers;
+		}
+	});
+
+	function handle_select(component) {
+		selected.set(component);
+		module_editor.set(component.source, component.type);
+		output.set($selected);
+	}
+
+	let workers;
+
+	let input;
+	let sourceErrorLoc;
+	let runtimeErrorLoc; // TODO refactor this stuff — runtimeErrorLoc is unused
+
+	let width = typeof window !== 'undefined' ? window.innerWidth : 300;
+	let show_output = false;
+
+	onMount(async () => {
+		workers = {
+			bundler: new Worker('/workers/bundler.js')
+		};
+
+		workers.bundler.postMessage({ type: 'init', version });
+		workers.bundler.onmessage = event => {
+			bundle.set(event.data);
+		};
+
+		return () => {
+			workers.bundler.terminate();
+		};
+	});
+
+	$: if ($bundle && $bundle.error && $selected) {
+		sourceErrorLoc = $bundle.error.filename === `${$selected.name}.${$selected.type}`
+			? $bundle.error.start
+			: null;
+	}
+
+	$: if (workers && $components) {
+		workers.bundler.postMessage({ type: 'bundle', components: $components });
+	}
+</script>
+
+<style>
+	.container {
+		position: relative;
+		width: 100%;
+		height: calc(100% - 4.2rem);
+	}
+
+	.repl-inner {
+		width: 200%;
+		height: 100%;
+		transition: transform 0.3s;
+	}
+
+	.repl-inner :global(section) {
+		position: relative;
+		padding: 4.2rem 0 0 0;
+		height: 100%;
+	}
+
+	.repl-inner :global(section) > :global(*):first-child {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 4.2rem;
+	}
+
+	.repl-inner :global(section) > :global(*):last-child {
+		width: 100%;
+		height: 100%;
+	}
+
+	.offset {
+		transform: translate(-50%,0);
+	}
+
+	@media (min-width: 600px) {
+		.container {
+			height: 100%;
+		}
+
+		.repl-inner {
+			width: 100%;
+		}
+
+		.offset {
+			transition: none;
+			transform: none;
+		}
+	}
+</style>
+
+<div class="container" class:orientation bind:clientWidth={width}>
+	<div class="repl-inner" class:offset="{show_output}">
+		<SplitPane
+			type="{orientation === 'rows' ? 'vertical' : 'horizontal'}"
+			fixed="{600 > width}"
+			pos="{orientation === 'rows' ? 50 : 60}"
+			fixed_pos={50}
+		>
+			<section slot=a>
+				<ComponentSelector {handle_select}/>
+				<ModuleEditor bind:this={input} errorLoc="{sourceErrorLoc || runtimeErrorLoc}"/>
+			</section>
+
+			<section slot=b style='height: 100%;'>
+				<Output {version} {embedded} {show_props}/>
+			</section>
+		</SplitPane>
+	</div>
+</div>
+
+<InputOutputToggle bind:checked={show_output}/>
diff --git a/site/src/routes/api/blog/_posts.js b/site/src/routes/api/blog/_posts.js
index 8b70483cd1..33c033b517 100644
--- a/site/src/routes/api/blog/_posts.js
+++ b/site/src/routes/api/blog/_posts.js
@@ -1,19 +1,10 @@
 import fs from 'fs';
 import path from 'path';
-import process_markdown from '../../../utils/_process_markdown.js';
+import { extract_frontmatter, langs } from '../../../utils/markdown.js';
 import marked from 'marked';
-
 import PrismJS from 'prismjs';
 import 'prismjs/components/prism-bash';
 
-// map lang to prism-language-attr
-const prismLang = {
-	bash: 'bash',
-	html: 'markup',
-	js: 'javascript',
-	css: 'css',
-};
-
 export default function() {
 	return fs
 		.readdirSync('content/blog')
@@ -22,7 +13,7 @@ export default function() {
 
 			const markdown = fs.readFileSync(`content/blog/${file}`, 'utf-8');
 
-			const { content, metadata } = process_markdown(markdown);
+			const { content, metadata } = extract_frontmatter(markdown);
 
 			const date = new Date(`${metadata.pubdate} EDT`); // cheeky hack
 			metadata.dateString = date.toDateString();
@@ -30,7 +21,7 @@ export default function() {
 			const renderer = new marked.Renderer();
 
 			renderer.code = (source, lang) => {
-				const plang = prismLang[lang];
+				const plang = langs[lang];
 				const highlighted = PrismJS.highlight(
 					source,
 					PrismJS.languages[plang],
diff --git a/site/src/routes/guide/_sections.js b/site/src/routes/guide/_sections.js
index 59818bc464..0fd1382652 100644
--- a/site/src/routes/guide/_sections.js
+++ b/site/src/routes/guide/_sections.js
@@ -1,20 +1,10 @@
 import fs from 'fs';
 import path from 'path';
-import * as fleece from 'golden-fleece';
-import process_markdown from '../../utils/_process_markdown.js';
+import { extract_frontmatter, extract_metadata, langs } from '../../utils/markdown.js';
 import marked from 'marked';
-
 import PrismJS from 'prismjs';
 import 'prismjs/components/prism-bash';
 
-// map lang to prism-language-attr
-const prismLang = {
-	bash: 'bash',
-	html: 'markup',
-	js: 'javascript',
-	css: 'css',
-};
-
 const escaped = {
 	'"': '&quot;',
 	"'": '&#39;',
@@ -45,24 +35,6 @@ const blockTypes = [
 	'tablecell'
 ];
 
-function extractMeta(line, lang) {
-	try {
-		if (lang === 'html' && line.startsWith('<!--') && line.endsWith('-->')) {
-			return fleece.evaluate(line.slice(4, -3).trim());
-		}
-
-		if (
-			lang === 'js' ||
-			(lang === 'json' && line.startsWith('/*') && line.endsWith('*/'))
-		) {
-			return fleece.evaluate(line.slice(2, -2).trim());
-		}
-	} catch (err) {
-		// TODO report these errors, don't just squelch them
-		return null;
-	}
-}
-
 // https://github.com/darkskyapp/string-hash/blob/master/index.js
 function getHash(str) {
 	let hash = 5381;
@@ -81,7 +53,7 @@ export default function() {
 		.map(file => {
 			const markdown = fs.readFileSync(`content/guide/${file}`, 'utf-8');
 
-			const { content, metadata } = process_markdown(markdown);
+			const { content, metadata } = extract_frontmatter(markdown);
 
 			const subsections = [];
 			const groups = [];
@@ -97,7 +69,7 @@ export default function() {
 
 				const lines = source.split('\n');
 
-				const meta = extractMeta(lines[0], lang);
+				const meta = extract_metadata(lines[0], lang);
 
 				let prefix = '';
 				let className = 'code-block';
@@ -124,7 +96,7 @@ export default function() {
 
 				if (meta && meta.hidden) return '';
 
-				const plang = prismLang[lang];
+				const plang = langs[lang];
 				const highlighted = PrismJS.highlight(
 					source,
 					PrismJS.languages[plang],
diff --git a/site/src/routes/repl/_components/AppControls/index.svelte b/site/src/routes/repl/_components/AppControls/index.svelte
index af4a0cf2e8..9f1b6a47a7 100644
--- a/site/src/routes/repl/_components/AppControls/index.svelte
+++ b/site/src/routes/repl/_components/AppControls/index.svelte
@@ -6,7 +6,7 @@
 	import * as doNotZip from 'do-not-zip';
 	import downloadBlob from '../../_utils/downloadBlob.js';
 	import { user } from '../../../../user.js';
-	import { enter } from '../events.js';
+	import { enter } from '../../../../utils/events.js';
 
 	const dispatch = createEventDispatcher();
 
diff --git a/site/src/routes/repl/_components/Input/ModuleEditor.svelte b/site/src/routes/repl/_components/Input/ModuleEditor.svelte
deleted file mode 100644
index 1b72f3aa31..0000000000
--- a/site/src/routes/repl/_components/Input/ModuleEditor.svelte
+++ /dev/null
@@ -1,38 +0,0 @@
-<script>
-	import CodeMirror from '../CodeMirror.svelte';
-
-	export let component;
-	export let error;
-	export let errorLoc;
-	export let warningCount = 0;
-</script>
-
-<style>
-	.editor-wrapper {
-		z-index: 5;
-		background: var(--back-light);
-	}
-
-	@media (min-width: 600px) {
-		.editor-wrapper {
-			/* make it easier to interact with scrollbar */
-			padding-right: 8px;
-			height: auto;
-			/* height: 100%; */
-		}
-	}
-</style>
-
-<div class="editor-wrapper">
-	{#if component}
-		<CodeMirror
-			mode="{component.type === 'js' ? 'javascript' : 'handlebars'}"
-			code={component.source}
-			{error}
-			{errorLoc}
-			{warningCount}
-			on:change
-			on:navigate
-		/>
-	{/if}
-</div>
\ No newline at end of file
diff --git a/site/src/routes/repl/_components/Input/index.svelte b/site/src/routes/repl/_components/Input/index.svelte
deleted file mode 100644
index 0e824dd389..0000000000
--- a/site/src/routes/repl/_components/Input/index.svelte
+++ /dev/null
@@ -1,28 +0,0 @@
-<script>
-	import ComponentSelector from './ComponentSelector.svelte';
-	import ModuleEditor from './ModuleEditor.svelte';
-
-	export let selected_store;
-	export let component_store;
-	export let error;
-	export let errorLoc;
-	export let warningCount;
-</script>
-
-<!-- TODO would be nice if events bubbled -->
-<ComponentSelector
-	{component_store}
-	{selected_store}
-	on:create
-	on:remove
-	on:select
-/>
-
-<ModuleEditor
-	component={$selected_store}
-	{error}
-	{errorLoc}
-	{warningCount}
-	on:change
-	on:navigate
-/>
\ No newline at end of file
diff --git a/site/src/routes/repl/_components/Output/Viewer.svelte b/site/src/routes/repl/_components/Output/Viewer.svelte
deleted file mode 100644
index e204b3c79d..0000000000
--- a/site/src/routes/repl/_components/Output/Viewer.svelte
+++ /dev/null
@@ -1,325 +0,0 @@
-<script>
-	import { onMount, onDestroy, createEventDispatcher } from 'svelte';
-	import getLocationFromStack from '../../_utils/getLocationFromStack.js';
-	import ReplProxy from '../../_utils/replProxy.js';
-	import { decode } from 'sourcemap-codec';
-
-	const dispatch = createEventDispatcher();
-
-	export let values_store;
-	export let bundle;
-	export let dom;
-	export let ssr;
-	export let props;
-	export let sourceError;
-	export let error;
-
-	export function setProp(prop, value) {
-		if (!replProxy) return;
-		replProxy.setProp(prop, value);
-	}
-
-	let hasComponent = false;
-
-	const refs = {};
-	let pendingImports = 0;
-	let pending = false;
-
-	let replProxy = null;
-
-
-	const namespaceSpecifier = /\*\s+as\s+(\w+)/;
-	const namedSpecifiers = /\{(.+)\}/;
-
-	function parseSpecifiers(specifiers) {
-		specifiers = specifiers.trim();
-
-		let match = namespaceSpecifier.exec(specifiers);
-		if (match) {
-			return {
-				namespace: true,
-				name: match[1]
-			};
-		}
-
-		let names = [];
-
-		specifiers = specifiers.replace(namedSpecifiers, (match, str) => {
-			names = str.split(',').map(name => {
-				const split = name.split('as');
-				const exported = split[0].trim();
-				const local = (split[1] || exported).trim();
-
-				return { local, exported };
-			});
-
-			return '';
-		});
-
-		match = /\w+/.exec(specifiers);
-
-		return {
-			namespace: false,
-			names,
-			default: match ? match[0] : null
-		};
-	}
-
-	let createComponent;
-	let init;
-	onDestroy(() => {
-		if (replProxy) {
-			replProxy.destroy();
-		}
-	});
-	onMount(() => {
-		replProxy = new ReplProxy(refs.child);
-
-		refs.child.addEventListener('load', () => {
-
-			replProxy.onPropUpdate = (prop, value) => {
-				dispatch('binding', { prop, value });
-				values_store.update(values => Object.assign({}, values, {
-						[prop]: value
-				}));
-			};
-
-			replProxy.onFetchProgress = (progress) => {
-				pendingImports = progress
-			}
-
-			replProxy.handleLinks();
-
-			let promise = null;
-			let updating = false;
-
-			let toDestroy = null;
-
-			const init = () => {
-				if (sourceError) return;
-
-				const removeStyles = () => {
-					replProxy.eval(`
-						const styles = document.querySelectorAll('style.svelte');
-						let i = styles.length;
-						while (i--) styles[i].parentNode.removeChild(styles[i]);
-					`)
-				};
-
-				const destroyComponent = () => {
-					replProxy.eval(`if (window.component)
-										 window.component.\$destroy();
-									window.component = null`);
-				};
-
-				const ready = () => {
-					error = null;
-
-					if (toDestroy) {
-						removeStyles();
-						destroyComponent();
-						toDestroy = null;
-					}
-
-					if (ssr) { // this only gets generated if component uses lifecycle hooks
-						pending = true;
-						createHtml();
-					} else {
-						pending = false;
-						createComponent();
-					}
-				}
-
-				const createHtml = () => {
-					replProxy.eval(`${ssr.code}
-						var rendered = SvelteComponent.render(${JSON.stringify($values_store)});
-
-						if (rendered.css.code) {
-							var style = document.createElement('style');
-							style.className = 'svelte';
-							style.textContent = rendered.css.code;
-							document.head.appendChild(style);
-						}
-
-						document.body.innerHTML = rendered.html;
-					`)
-					.catch( e => {
-						const loc = getLocationFromStack(e.stack, ssr.map);
-						if (loc) {
-							e.filename = loc.source;
-							e.loc = { line: loc.line, column: loc.column };
-						}
-
-						error = e;
-					});
-				};
-
-				const createComponent = () => {
-					// remove leftover styles from SSR renderer
-					if (ssr) removeStyles();
-
-					replProxy.eval(`${dom.code}
-						document.body.innerHTML = '';
-						window.location.hash = '';
-						window._svelteTransitionManager = null;
-
-						window.component = new SvelteComponent({
-							target: document.body,
-							props: ${JSON.stringify($values_store)}
-						});
-					`)
-					.then(()=> {
-						replProxy.bindProps(props);
-					})
-					.catch(e => {
-						// TODO show in UI
-						hasComponent = false;
-
-						const loc = getLocationFromStack(e.stack, dom.map);
-						if (loc) {
-							e.filename = loc.source;
-							e.loc = { line: loc.line, column: loc.column };
-						}
-
-						error = e;
-					});
-				};
-
-				// Download the imports (sets them on iframe window when complete)
-			 	{
-					let cancelled = false;
-					promise = replProxy.fetchImports(bundle);
-					promise.cancel = () => { cancelled = true };
-					promise.then(() => {
-							if (cancelled) return;
-							ready()
-						}).catch(e => {
-							if (cancelled) return;
-							error = e;
-						});
-				}
-
-				run = () => {
-					pending = false;
-
-					// TODO do we need to clear out SSR HTML?
-					createComponent();
-					props_handler = props => {
-						replProxy.bindProps(props)
-					};
-					replProxy.bindProps(props);
-				};
-			}
-
-			bundle_handler = bundle => {
-				if (!bundle) return; // TODO can this ever happen?
-				if (promise) promise.cancel();
-
-				toDestroy = hasComponent;
-				hasComponent = false;
-
-				init();
-			};
-
-
-		});
-	});
-
-	function noop(){}
-	let run = noop;
-	let bundle_handler = noop;
-	let props_handler = noop;
-
-	$: bundle_handler(bundle);
-	$: props_handler(props);
-</script>
-
-<style>
-	.iframe-container {
-		background-color: white;
-		border: none;
-		height: 100%;
-	}
-
-	iframe {
-		width: 100%;
-		height: 100%;
-		/* height: calc(100vh - var(--nav-h)); */
-		border: none;
-		display: block;
-	}
-
-	.greyed-out {
-		filter: grayscale(50%) blur(1px);
-		opacity: .25;
-	}
-
-	.overlay {
-		position: absolute;
-		top: 0;
-		width: 100%;
-		height: 100%;
-		padding: 1em;
-		pointer-events: none;
-	}
-
-	.overlay p {
-		pointer-events: all;
-	}
-
-	.pending {
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		text-align: center;
-		pointer-events: all;
-	}
-
-	.pending button {
-		position: absolute;
-		margin-top: 6rem;
-	}
-</style>
-
-<div class="iframe-container">
-	<iframe title="Result" bind:this={refs.child} sandbox="allow-scripts allow-popups allow-forms allow-pointer-lock allow-top-navigation allow-modals" class="{error || pending || pendingImports ? 'greyed-out' : ''}" srcdoc='
-		<!doctype html>
-		<html>
-			<head>
-				<link rel="stylesheet" href="/repl-viewer.css">
-			</head>
-			<body>
-				<script src="/curl.js"></script>
-				<script>curl.config(&#123; dontAddFileExt: /./ });</script>
-				<script src="/repl-runner.js"></script>
-			</body>
-		</html>
-	'></iframe>
-</div>
-
-<div class="overlay">
-	{#if error}
-		<p class="error message">
-			{#if error.loc}
-			<strong>
-				{#if error.filename}
-					<span class="filename" on:click="{() => dispatch('navigate', { filename: error.filename })}">{error.filename}</span>
-				{/if}
-
-				({error.loc.line}:{error.loc.column})
-			</strong>
-			{/if}
-
-			{error.message}
-		</p>
-	{:elseif pending}
-		<div class="pending" on:click={run}>
-			<button class="bg-second white">Click to run</button>
-		</div>
-	{:elseif pendingImports}
-		<p class="info message">loading {pendingImports} {pendingImports === 1 ? 'dependency' : 'dependencies'} from
-		https://bundle.run</p>
-	{/if}
-</div>
\ No newline at end of file
diff --git a/site/src/routes/repl/_components/Output/index.svelte b/site/src/routes/repl/_components/Output/index.svelte
deleted file mode 100644
index aea23e51d1..0000000000
--- a/site/src/routes/repl/_components/Output/index.svelte
+++ /dev/null
@@ -1,197 +0,0 @@
-<script>
-	import SplitPane from '../SplitPane.svelte';
-	import Viewer from './Viewer.svelte';
-	import CompilerOptions from './CompilerOptions.svelte';
-	import PropEditor from './PropEditor.svelte';
-	import CodeMirror from '../CodeMirror.svelte';
-
-	export let values_store;
-
-	export let bundle;
-	export let js;
-	export let css;
-	export let dom;
-	export let ssr;
-	export let props;
-	export let json5;
-	export let sourceError;
-	export let sourceErrorLoc;
-	export let runtimeError;
-	export let compileOptions;
-	export let embedded;
-
-	// refs
-	let viewer;
-	const setters = {};
-
-	let view = 'result';
-
-	function updateValues(prop, value) {
-		values_store.update(v => Object.assign({}, v, {
-			[prop]: value
-		}));
-	}
-
-	function setPropFromViewer(prop, value) {
-		// console.log(setters, prop, value);
-		// setters[prop](value);
-		updateValues(prop, value);
-	}
-
-	function setPropFromEditor(prop, value) {
-		viewer.setProp(prop, value);
-		updateValues(prop, value);
-	}
-
-	function navigate(event) {
-		// TODO handle navigation from error messages
-	}
-</script>
-
-<style>
-	.view-toggle {
-		height: var(--pane-controls-h);
-		border-bottom: 1px solid #eee;
-		white-space: nowrap;
-	}
-
-	button {
-		/* width: 50%;
-		height: 100%; */
-		text-align: left;
-		position: relative;
-		font: 400 1.2rem/1.5 var(--font);
-		border-bottom: var(--border-w) solid transparent;
-		padding: 1.2rem 0.8rem 0.8rem 0.8rem;
-		color: #999;
-	}
-
-	button.active {
-		border-bottom: var(--border-w) solid var(--prime);
-		color: #333;
-	}
-
-	div[slot] {
-		height: 100%;
-	}
-
-	h3 {
-		font: 700 1.2rem/1.5 var(--font);
-		padding: 1.2rem 0 0.8rem 1rem;
-		color: var(--text);
-	}
-
-	.loading.message {
-		position: absolute !important;
-		background-color: #666;
-		top: 1em;
-		left: 50%;
-		transform: translate(-50%,0);
-	}
-
-	.props {
-		display: grid;
-		padding: 0.5em;
-		grid-template-columns: auto 1fr;
-		grid-auto-rows: min-content;
-		grid-gap: 0.5em;
-		overflow-y: auto;
-	}
-
-	.props code {
-		top: .1rem;
-	}
-</style>
-
-<div class="view-toggle">
-	<button
-		class:active="{view === 'result'}"
-		on:click="{() => view = 'result'}"
-	>Result</button>
-
-	<button
-		class:active="{view === 'js'}"
-		on:click="{() => view = 'js'}"
-	>JS output</button>
-
-	<button
-		class:active="{view === 'css'}"
-		on:click="{() => view = 'css'}"
-	>CSS output</button>
-</div>
-
-{#if view === 'result'}
-	<SplitPane type="vertical" pos={67}>
-		<div slot="a">
-			{#if bundle}
-				<Viewer
-					bind:this={viewer}
-					{bundle}
-					{dom}
-					{ssr}
-					{values_store}
-					{props}
-					{sourceError}
-					bind:error={runtimeError}
-					on:navigate={navigate}
-					on:binding="{e => setPropFromViewer(e.detail.prop, e.detail.value)}"
-				/>
-			{:else}
-				<!-- TODO componentise this -->
-				<p class="loading message">loading Svelte compiler...</p>
-			{/if}
-		</div>
-
-		<section slot="b">
-			<h3>Props editor</h3>
-
-			{#if props}
-				{#if props.length > 0}
-					<div class="props">
-						{#each props.sort() as prop (prop)}
-							<code style="display: block; whitespace: pre;">{prop}</code>
-
-							<!-- TODO `bind:this={propEditors[prop]}` — currently fails -->
-							<PropEditor
-								value={$values_store[prop]}
-								on:change="{e => setPropFromEditor(prop, e.detail.value)}"
-							/>
-						{/each}
-					</div>
-				{:else}
-					<div style="padding: 0.5em" class="linkify">
-						<!-- TODO explain distincion between logic-less and logic-ful components? -->
-						<!-- TODO style the <a> so it looks like a link -->
-						<p style="font-size: 1.3rem; color: var(--second)">This component has no props — <a href="guide#external-properties">declare props with the export keyword</a></p>
-					</div>
-				{/if}
-			{/if}
-		</section>
-	</SplitPane>
-{:elseif embedded}
-	<CodeMirror
-		mode="javascript"
-		code="{view === 'js' ? js : css}"
-		error={sourceError}
-		errorLoc={sourceErrorLoc}
-		readonly
-	/>
-{:else}
-	<SplitPane type="vertical" pos={67}>
-		<div slot="a">
-			<CodeMirror
-				mode="javascript"
-				code="{view === 'js' ? js : css}"
-				error={sourceError}
-				errorLoc={sourceErrorLoc}
-				readonly
-			/>
-		</div>
-
-		<section slot="b">
-			<h3>Compiler options</h3>
-
-			<CompilerOptions bind:options={compileOptions}/>
-		</section>
-	</SplitPane>
-{/if}
diff --git a/site/src/routes/repl/_components/Repl.svelte b/site/src/routes/repl/_components/Repl.svelte
deleted file mode 100644
index 318ba0d5e8..0000000000
--- a/site/src/routes/repl/_components/Repl.svelte
+++ /dev/null
@@ -1,321 +0,0 @@
-<script>
-	import { onMount } from 'svelte';
-	import { writable } from 'svelte/store';
-	import * as fleece from 'golden-fleece';
-	import SplitPane from './SplitPane.svelte';
-	import CodeMirror from './CodeMirror.svelte';
-	import Input from './Input/index.svelte';
-	import Output from './Output/index.svelte';
-	import InputOutputToggle from './InputOutputToggle.svelte';
-
-	export let version = 'beta'; // TODO change this to latest when the time comes
-	export let app;
-	export let embedded = false;
-
-	export function toJSON() {
-		// TODO there's a bug here — Svelte hoists this function because
-		// it wrongly things that $component_store is global. Needs to
-		// factor in $ variables when determining hoistability
-
-		version; // workaround
-
-		return {
-			imports: bundle && bundle.imports || [],
-			components: $component_store,
-			values: $values_store
-		};
-	}
-
-	let component_store = writable([]);
-	let values_store = writable({});
-	let selected_store = writable(null);
-
-	$: {
-		component_store.set(app.components);
-		values_store.set(app.values);
-		selected_store.set(app.components[0]);
-	}
-
-	$: {
-		// necessary pending https://github.com/sveltejs/svelte/issues/1889
-		$component_store;
-		$values_store;
-	}
-
-	let workers;
-
-	let bundle = null;
-	let dom;
-	let ssr;
-	let sourceError = null;
-	let runtimeError = null;
-	let warningCount = 0;
-	let js = '';
-	let css = '';
-	let uid = 0;
-	let props = [];
-	let sourceErrorLoc;
-	let runtimeErrorLoc;
-
-	let compileOptions = {
-		generate: 'dom',
-		dev: false,
-		css: false,
-		hydratable: false,
-		customElement: false,
-		immutable: false,
-		legacy: false
-	};
-
-	let width = typeof window !== 'undefined' ? window.innerWidth : 300;
-	let show_output = false;
-
-	onMount(async () => {
-		workers = {
-			compiler: new Worker('/workers/compiler.js'),
-			bundler: new Worker('/workers/bundler.js')
-		};
-
-		workers.compiler.postMessage({ type: 'init', version });
-		workers.compiler.onmessage = event => {
-			js = event.data.js;
-			css = event.data.css || `/* Add a <style> tag to see compiled CSS */`;
-			if (event.data.props) props = event.data.props;
-		};
-
-		workers.bundler.postMessage({ type: 'init', version });
-		workers.bundler.onmessage = event => {
-			({ bundle, dom, ssr, warningCount, error: sourceError } = event.data);
-			if (sourceError) console.error(sourceError);
-			runtimeError = null;
-		};
-
-		return () => {
-			workers.compiler.terminate();
-			workers.bundler.terminate();
-		};
-	});
-
-	function removeComponent() {
-		const selected = $selected_store;
-
-		if (selected.name === 'App') {
-			// App.svelte can't be removed
-			selected.source = '';
-			// $selected_store.set(selected);
-		} else {
-			const components = $component_store;
-			const index = components.indexOf(selected);
-
-			if (~index) {
-				component_store.set(components.slice(0, index).concat(components.slice(index + 1)));
-			} else {
-				console.error(`Could not find component! That's... odd`);
-			}
-
-			selected_store.set(components[index] || components[components.length - 1]);
-		}
-	}
-
-	function compile(component, options) {
-		if (component.type === 'svelte') {
-			workers.compiler.postMessage({
-				type: 'compile',
-				source: component.source,
-				options: Object.assign({
-					name: component.name,
-					filename: `${component.name}.svelte`
-				}, options),
-				entry: component === $component_store[0]
-			});
-		} else {
-			js = css = `/* Select a component to see its compiled code */`;
-		}
-	}
-
-	function handleChange(event) {
-		selected_store.update(component => {
-			// TODO this is a bit hacky — we're relying on mutability
-			// so that updating component_store works... might be better
-			// if a) components had unique IDs, b) we tracked selected
-			// *index* rather than component, and c) `selected` was
-			// derived from `components` and `index`
-			component.source = event.detail.value;
-			return component;
-		});
-
-		component_store.update(c => c);
-
-		// recompile selected component
-		compile($selected_store, compileOptions);
-
-		// regenerate bundle (TODO do this in a separate worker?)
-		workers.bundler.postMessage({ type: 'bundle', components: $component_store });
-	}
-
-	function navigate(filename) {
-		const name = filename.replace(/\.svelte$/, '');
-
-		console.error(`TODO navigate`);
-
-		// if (selected.name === name) return;
-		// selected = components.find(c => c.name === name);
-	}
-
-	$: if (sourceError && $selected_store) {
-		sourceErrorLoc = sourceError.filename === `${$selected_store.name}.${$selected_store.type}`
-			? sourceError.start
-			: null;
-	}
-
-	$: if (runtimeError && $selected_store) {
-		runtimeErrorLoc = runtimeError.filename === `${$selected_store.name}.${$selected_store.type}`
-			? runtimeError.start
-			: null;
-	}
-
-	$: if (workers && app.components) {
-		workers.bundler.postMessage({ type: 'bundle', components: app.components });
-	}
-
-	$: if (workers && $selected_store) {
-		compile($selected_store, compileOptions);
-	}
-</script>
-
-<style>
-	.container {
-		position: relative;
-		width: 100%;
-		height: calc(100% - 4.2rem);
-	}
-
-	.repl-inner {
-		width: 200%;
-		height: 100%;
-		transition: transform 0.3s;
-	}
-
-	.repl-inner :global(section) {
-		position: relative;
-		padding: 4.2rem 0 0 0;
-		height: 100%;
-	}
-
-	.repl-inner :global(section) > :global(*):first-child {
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 4.2rem;
-	}
-
-	.repl-inner :global(section) > :global(*):last-child {
-		width: 100%;
-		height: 100%;
-	}
-
-	.repl-inner :global(.message) {
-		position: relative;
-		border-radius: var(--border-r);
-		margin: 0;
-		padding: 1.2rem 1.6rem 1.2rem 4.4rem;
-		vertical-align: middle;
-		font: 400 1.2rem/1.7 var(--font);
-		color: white;
-	}
-
-	.repl-inner :global(.message::before) {
-		content: '!';
-		position: absolute;
-		left: 1.2rem;
-		top: 1.1rem;
-		width: 1rem;
-		height: 1rem;
-		text-align: center;
-		line-height: 1;
-		padding: .4rem;
-		border-radius: 50%;
-		color: white;
-		border: .2rem solid white;
-	}
-
-	.repl-inner :global(.error.message) {
-		background-color: #da106e;
-	}
-
-	.repl-inner :global(.warning.message) {
-		background-color: #e47e0a;
-	}
-
-	.repl-inner :global(.info.message) {
-		background-color: var(--second);
-		animation: fade-in .4s .2s both;
-	}
-
-	.repl-inner :global(.error) :global(.filename) {
-		cursor: pointer;
-	}
-
-	.offset {
-		transform: translate(-50%,0);
-	}
-
-	@media (min-width: 600px) {
-		.container {
-			height: 100%;
-		}
-
-		.repl-inner {
-			width: 100%;
-		}
-
-		.input-output-toggle {
-			display: none;
-		}
-
-		.offset {
-			transition: none;
-			transform: none;
-		}
-	}
-</style>
-
-<div class="container" bind:clientWidth={width}>
-	<div class="repl-inner" class:offset="{show_output}">
-		<SplitPane type="horizontal" fixed="{600 > width}" pos={60} fixed_pos={50}>
-			<section slot=a>
-				<Input
-					{component_store}
-					{selected_store}
-					{values_store}
-					error={sourceError}
-					errorLoc="{sourceErrorLoc || runtimeErrorLoc}"
-					{warningCount}
-					on:remove={removeComponent}
-					on:change="{handleChange}"
-				/>
-			</section>
-
-			<section slot=b style='height: 100%;'>
-				<Output
-					bind:compileOptions
-					{version}
-					{selected_store}
-					{js}
-					{css}
-					{bundle}
-					{ssr}
-					{dom}
-					{props}
-					{values_store}
-					{sourceError}
-					{runtimeError}
-					{embedded}
-				/>
-			</section>
-		</SplitPane>
-	</div>
-</div>
-
-<InputOutputToggle bind:checked={show_output}/>
diff --git a/site/src/routes/repl/_utils/replProxy.js b/site/src/routes/repl/_utils/replProxy.js
deleted file mode 100644
index 4025dffe6b..0000000000
--- a/site/src/routes/repl/_utils/replProxy.js
+++ /dev/null
@@ -1,90 +0,0 @@
-export default class ReplProxy {
-    constructor(iframe) {
-        this.iframe = iframe;
-        this.cmdId = 1;
-        this.pendingCmds = new Map();
-        this.onPropUpdate = null;
-        this.onFetchProgress = null;
-        this.handle_event = (ev) => this.handleReplMessage(ev);
-        window.addEventListener("message", this.handle_event, false);
-    }
-
-    destroy() {
-        window.removeEventListener("message", this.handle_event);
-    }
-  
-    iframeCommand(command, args) {
-        return new Promise( (resolve, reject) => {
-            this.cmdId = this.cmdId + 1; 
-            this.pendingCmds.set(this.cmdId, { resolve: resolve, reject: reject });
-            this.iframe.contentWindow.postMessage({
-                action: command,
-                cmdId: this.cmdId,
-                args: args
-            }, '*')
-        });
-    }
-
-    handleCommandMessage(cmdData) {
-        let action = cmdData.action;
-        let id = cmdData.cmdId;
-        let handler = this.pendingCmds.get(id);
-        if (handler) {
-           
-            this.pendingCmds.delete(id);
-            if (action == "cmdError") {
-                let { message, stack } = cmdData;
-                let e = new Error(message);
-                e.stack = stack;
-                console.log("repl cmd fail");
-                handler.reject(e)
-            }
-
-            if (action == "cmdOk") {
-                handler.resolve(cmdData.args)
-            }
-        } else {
-            console.error("command not found", id, cmdData, [...this.pendingCmds.keys()]);
-        } 
-    }
-
-    handleReplMessage(ev) {
-        
-        let action = ev.data.action;
-        if ( action == "cmdError" || action == "cmdOk" ) {
-           this.handleCommandMessage(ev.data);
-        }
-
-        if (action == "prop_update") {
-            let { prop, value } = ev.data.args;
-            if (this.onPropUpdate)
-                this.onPropUpdate(prop, value)
-        }
-        
-        if (action == "fetch_progress") {
-            if (this.onFetchProgress) 
-                this.onFetchProgress(ev.data.args.remaining)
-        }
-    }
-
-    eval(script) {
-        return this.iframeCommand("eval", { script: script });
-    }
-
-    setProp(prop, value) {
-        return this.iframeCommand("set_prop", {prop, value})
-    }
-
-    bindProps(props) {
-        return this.iframeCommand("bind_props", { props: props })
-    }
-
-    handleLinks() {
-        return this.iframeCommand("catch_clicks", {});
-    }
-
-    fetchImports(bundle) {
-       return this.iframeCommand("fetch_imports", { bundle })
-    }
-
-}
\ No newline at end of file
diff --git a/site/src/routes/repl/embed.svelte b/site/src/routes/repl/embed.svelte
index c9eb0a08ea..fc74d8df5f 100644
--- a/site/src/routes/repl/embed.svelte
+++ b/site/src/routes/repl/embed.svelte
@@ -11,15 +11,11 @@
 <script>
 	import { onMount } from 'svelte';
 	import * as fleece from 'golden-fleece';
-	import Repl from './_components/Repl.svelte';
+	import Repl from '../../components/Repl/index.svelte';
 
 	export let version, gist, demo;
 
-	let app = {
-		components: [],
-		values: {}
-	};
-
+	let repl;
 	let name = 'loading...';
 
 	onMount(() => {
@@ -67,7 +63,7 @@
 						return a.name < b.name ? -1 : 1;
 					});
 
-				app = { components, values };
+				repl.set({ components, values });
 			});
 		} else if (demo) {
 			const url = `api/examples/${demo}`;
@@ -76,10 +72,10 @@
 				if (response.ok) {
 					const data = await response.json();
 
-					app = {
+					repl.set({
 						values: tryParseData(data.json5) || {}, // TODO make this more error-resistant
 						components: data.components
-					};
+					});
 				}
 			});
 		}
@@ -114,6 +110,6 @@
 
 <div class="repl-outer">
 	{#if process.browser}
-		<Repl {version} {app} embedded={true}/>
+		<Repl bind:this={repl} {version} embedded={true}/>
 	{/if}
 </div>
diff --git a/site/src/routes/repl/index.svelte b/site/src/routes/repl/index.svelte
index 41ad39a739..4adf5368d0 100644
--- a/site/src/routes/repl/index.svelte
+++ b/site/src/routes/repl/index.svelte
@@ -13,21 +13,15 @@
 	import { locate } from 'locate-character';
 	import * as fleece from 'golden-fleece';
 	import AppControls from './_components/AppControls/index.svelte';
-	import Repl from './_components/Repl.svelte';
+	import Repl from '../../components/Repl/index.svelte';
 	import examples from '../../../content/examples/manifest.json';
 
 	export let version, demo, gist_id;
 
+	let repl;
 	let gist;
-
-	let app = {
-		components: [],
-		values: {}
-	};
-
 	let name = 'loading...';
 	let zen_mode = false;
-	let repl;
 
 	$: if (typeof history !== 'undefined') {
 		const params = [];
@@ -99,7 +93,7 @@
 						return a.name < b.name ? -1 : 1;
 					});
 
-				app = { components, values };
+				repl.set({ components, values });
 			});
 		}
 	});
@@ -115,10 +109,12 @@
 
 				name = data.title;
 
-				app = {
+				console.log(data.components);
+
+				repl.set({
 					values: tryParseData(data.json5) || {}, // TODO make this more error-resistant
 					components: data.components
-				};
+				});
 
 				gist = null;
 			}
@@ -196,7 +192,6 @@
 <div class="repl-outer {zen_mode ? 'zen-mode' : ''}">
 	<AppControls
 		{examples}
-		{app}
 		{name}
 		{gist}
 		{repl}
@@ -206,6 +201,6 @@
 	/>
 
 	{#if process.browser}
-		<Repl bind:this={repl} {version} {app}/>
+		<Repl bind:this={repl} {version}/>
 	{/if}
 </div>
diff --git a/site/src/utils/_process_markdown.js b/site/src/utils/_process_markdown.js
deleted file mode 100644
index f760018a3b..0000000000
--- a/site/src/utils/_process_markdown.js
+++ /dev/null
@@ -1,15 +0,0 @@
-export default function process_markdown(markdown) {
-	const match = /---\r?\n([\s\S]+?)\r?\n---/.exec(markdown);
-	const frontMatter = match[1];
-	const content = markdown.slice(match[0].length);
-
-	const metadata = {};
-	frontMatter.split('\n').forEach(pair => {
-		const colonIndex = pair.indexOf(':');
-		metadata[pair.slice(0, colonIndex).trim()] = pair
-			.slice(colonIndex + 1)
-			.trim();
-	});
-
-	return { metadata, content };
-}
\ No newline at end of file
diff --git a/site/src/routes/repl/_components/events.js b/site/src/utils/events.js
similarity index 100%
rename from site/src/routes/repl/_components/events.js
rename to site/src/utils/events.js
diff --git a/site/src/utils/markdown.js b/site/src/utils/markdown.js
new file mode 100644
index 0000000000..cbb4e3cbcc
--- /dev/null
+++ b/site/src/utils/markdown.js
@@ -0,0 +1,43 @@
+import * as fleece from 'golden-fleece';
+
+export function extract_frontmatter(markdown) {
+	const match = /---\r?\n([\s\S]+?)\r?\n---/.exec(markdown);
+	const frontMatter = match[1];
+	const content = markdown.slice(match[0].length);
+
+	const metadata = {};
+	frontMatter.split('\n').forEach(pair => {
+		const colonIndex = pair.indexOf(':');
+		metadata[pair.slice(0, colonIndex).trim()] = pair
+			.slice(colonIndex + 1)
+			.trim();
+	});
+
+	return { metadata, content };
+}
+
+export function extract_metadata(line, lang) {
+	try {
+		if (lang === 'html' && line.startsWith('<!--') && line.endsWith('-->')) {
+			return fleece.evaluate(line.slice(4, -3).trim());
+		}
+
+		if (
+			lang === 'js' ||
+			(lang === 'json' && line.startsWith('/*') && line.endsWith('*/'))
+		) {
+			return fleece.evaluate(line.slice(2, -2).trim());
+		}
+	} catch (err) {
+		// TODO report these errors, don't just squelch them
+		return null;
+	}
+}
+
+// map lang to prism-language-attr
+export const langs = {
+	bash: 'bash',
+	html: 'markup',
+	js: 'javascript',
+	css: 'css',
+};
\ No newline at end of file
diff --git a/site/static/repl-runner.js b/site/static/repl-runner.js
index 0d87322b2a..4e0194e726 100644
--- a/site/static/repl-runner.js
+++ b/site/static/repl-runner.js
@@ -3,143 +3,143 @@
 const importCache = {};
 
 function fetchImport(id) {
-    return new Promise((fulfil, reject) => {
-        curl([`https://bundle.run/${id}`]).then(module => {
-            importCache[id] = module;
-            fulfil(module);
-        }, err => {
-            console.error(err.stack);
-            reject(new Error(`Error loading ${id} from bundle.run`));
-        });
-    });
+	return new Promise((fulfil, reject) => {
+		curl([`https://bundle.run/${id}`]).then(module => {
+			importCache[id] = module;
+			fulfil(module);
+		}, err => {
+			console.error(err.stack);
+			reject(new Error(`Error loading ${id} from bundle.run`));
+		});
+	});
 }
 
-function fetchImports(bundle, progressFunc) {
-    const missingImports = bundle.imports.filter(x => !importCache[x]);
-    let pendingImports = missingImports.length;
-
-    if (missingImports.length) {
-        let promise = Promise.all(
-            missingImports.map(id => fetchImport(id).then(() => {
-                pendingImports -= 1;
-                if (progressFunc) progressFunc(pendingImports);
-            }))
-        );
-
-        return promise
-    } else {
-        return Promise.resolve();
-    }
+function fetchImports(imports, progressFunc) {
+	const missingImports = imports.filter(x => !importCache[x]);
+	let pendingImports = missingImports.length;
+
+	if (missingImports.length) {
+		let promise = Promise.all(
+			missingImports.map(id => fetchImport(id).then(() => {
+				pendingImports -= 1;
+				if (progressFunc) progressFunc(pendingImports);
+			}))
+		);
+
+		return promise
+	} else {
+		return Promise.resolve();
+	}
 }
 
 function handleMessage(ev) {
-    let { action, cmdId } = ev.data;
-    const sendMessage = (payload) => parent.postMessage( { ...payload }, ev.origin);
-    const sendReply = (payload) => sendMessage({ ...payload, cmdId })
-    const sendOk = () => sendReply({ action: "cmdOk" });
-    const sendError = (message, stack) => sendReply({ action: "cmdError", message, stack })
-    
-    
-    if (action == "eval") {
-        let { script } = ev.data.args;
-        try {
-            eval(script);
-            sendOk();
-        } catch (e) {
-            sendError(e.message, e.stack);
-        }
-    }
-
-    if (action == "bind_props") {
-        let { props } = ev.data.args
-        
-        if (!window.component) {
-            // TODO can this happen?
-            console.warn('no component to bind to');
-            sendOk();
-            return;
-        }
-
-        try {
-            props.forEach(prop => {
-                // TODO should there be a public API for binding?
-                // e.g. `component.$watch(prop, handler)`?
-                // (answer: probably)
-                window.component.$$.bound[prop] = value => {
-                    sendMessage({ action:"prop_update", args: { prop, value } })
-                };
-            });
-            sendOk();
-        } catch (e) {
-            
-            sendError(e.message, e.stack);
-        }
-    }
-
-    if (action == "set_prop") {
-        try {
-            if (!window.component) {
-                return;
-            }
-            let { prop, value } = ev.data.args;
-            component[prop] = value;
-            sendOk();
-        } catch (e) {
-            sendError(e.message, e.stack);
-        }
-    }
-    
-    if (action == "catch_clicks") {
-        try {
-            let topOrigin = ev.origin;
-            document.body.addEventListener('click', event => {
-                if (event.which !== 1) return;
-                if (event.metaKey || event.ctrlKey || event.shiftKey) return;
-                if (event.defaultPrevented) return;
-            
-                // ensure target is a link
-                let el = event.target;
-                while (el && el.nodeName !== 'A') el = el.parentNode;
-                if (!el || el.nodeName !== 'A') return;
-            
-                if (el.hasAttribute('download') || el.getAttribute('rel') === 'external' || el.target) return;
-            
-                event.preventDefault();
-            
-                if (el.href.startsWith(topOrigin)) {
-                    const url = new URL(el.href);
-                    if (url.hash[0] === '#') {
-                        window.location.hash = url.hash;
-                        return;
-                    }
-                }
-            
-                window.open(el.href, '_blank');
-            });
-            sendOk();
-        } catch(e) {
-            sendError(e.message, e.stack);
-        }
-    }
-
-
-    if (action == "fetch_imports") {
-        let { bundle } = ev.data.args;
-        fetchImports(bundle, (remaining) => {
-            sendMessage({action: "fetch_progress", args: { remaining }});
-        })
-        .then(() => {
-            bundle.imports.forEach(x=> {
-                const module = importCache[x];
-                const name = bundle.importMap.get(x);
-                window[name] = module;
-            });
-            sendOk();
-        })
-        .catch(e => {
-           sendError(e.message, e.stack);
-        })
-    }
+	let { action, cmdId } = ev.data;
+	const sendMessage = (payload) => parent.postMessage( { ...payload }, ev.origin);
+	const sendReply = (payload) => sendMessage({ ...payload, cmdId })
+	const sendOk = () => sendReply({ action: "cmdOk" });
+	const sendError = (message, stack) => sendReply({ action: "cmdError", message, stack })
+
+
+	if (action == "eval") {
+		let { script } = ev.data.args;
+		try {
+			eval(script);
+			sendOk();
+		} catch (e) {
+			sendError(e.message, e.stack);
+		}
+	}
+
+	if (action == "bind_props") {
+		let { props } = ev.data.args
+
+		if (!window.component) {
+			// TODO can this happen?
+			console.warn('no component to bind to');
+			sendOk();
+			return;
+		}
+
+		try {
+			props.forEach(prop => {
+				// TODO should there be a public API for binding?
+				// e.g. `component.$watch(prop, handler)`?
+				// (answer: probably)
+				window.component.$$.bound[prop] = value => {
+					sendMessage({ action:"prop_update", args: { prop, value } })
+				};
+			});
+			sendOk();
+		} catch (e) {
+
+			sendError(e.message, e.stack);
+		}
+	}
+
+	if (action == "set_prop") {
+		try {
+			if (!window.component) {
+				return;
+			}
+			let { prop, value } = ev.data.args;
+			component[prop] = value;
+			sendOk();
+		} catch (e) {
+			sendError(e.message, e.stack);
+		}
+	}
+
+	if (action == "catch_clicks") {
+		try {
+			let topOrigin = ev.origin;
+			document.body.addEventListener('click', event => {
+				if (event.which !== 1) return;
+				if (event.metaKey || event.ctrlKey || event.shiftKey) return;
+				if (event.defaultPrevented) return;
+
+				// ensure target is a link
+				let el = event.target;
+				while (el && el.nodeName !== 'A') el = el.parentNode;
+				if (!el || el.nodeName !== 'A') return;
+
+				if (el.hasAttribute('download') || el.getAttribute('rel') === 'external' || el.target) return;
+
+				event.preventDefault();
+
+				if (el.href.startsWith(topOrigin)) {
+					const url = new URL(el.href);
+					if (url.hash[0] === '#') {
+						window.location.hash = url.hash;
+						return;
+					}
+				}
+
+				window.open(el.href, '_blank');
+			});
+			sendOk();
+		} catch(e) {
+			sendError(e.message, e.stack);
+		}
+	}
+
+
+	if (action == "fetch_imports") {
+		let { imports, import_map } = ev.data.args;
+		fetchImports(imports, (remaining) => {
+			sendMessage({action: "fetch_progress", args: { remaining }});
+		})
+		.then(() => {
+			imports.forEach(x=> {
+				const module = importCache[x];
+				const name = import_map.get(x);
+				window[name] = module;
+			});
+			sendOk();
+		})
+		.catch(e => {
+			sendError(e.message, e.stack);
+		})
+	}
 }
 
 window.addEventListener("message", handleMessage, false)
diff --git a/site/static/workers/bundler.js b/site/static/workers/bundler.js
index de2152c19e..2874820529 100644
--- a/site/static/workers/bundler.js
+++ b/site/static/workers/bundler.js
@@ -38,8 +38,8 @@ const commonCompilerOptions = {
 };
 
 let cached = {
-	dom: null,
-	ssr: null
+	dom: {},
+	ssr: {}
 };
 
 let currentToken;
@@ -63,9 +63,9 @@ function fetch_if_uncached(url) {
 async function getBundle(mode, cache, lookup) {
 	let bundle;
 	let error;
-	let warningCount = 0;
+	const all_warnings = [];
 
-	const info = {};
+	const new_cache = {};
 
 	try {
 		bundle = await rollup.rollup({
@@ -99,33 +99,40 @@ async function getBundle(mode, cache, lookup) {
 
 					const name = id.replace(/^\.\//, '').replace(/\.svelte$/, '');
 
-					const { js, stats, warnings } = svelte.compile(code, Object.assign({
-						generate: mode,
-						format: 'esm',
-						name: name,
-						filename: name + '.svelte'
-					}, commonCompilerOptions));
-
-					(warnings || stats.warnings).forEach(warning => { // TODO remove stats post-launch
-						console.warn(warning.message);
-						console.log(warning.frame);
-						warningCount += 1;
+					const result = cache[id] && cache[id].code === code
+						? cache[id].result
+						: svelte.compile(code, Object.assign({
+							generate: mode,
+							format: 'esm',
+							name: name,
+							filename: name + '.svelte'
+						}, commonCompilerOptions));
+
+					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 js;
+					return result.js;
 				}
 			}],
 			onwarn(warning) {
-				console.warn(warning);
-				warningCount += 1;
-			},
-			cache
+				all_warnings.push({
+					message: warning.message
+				});
+			}
 		});
 	} catch (error) {
-		return { error, bundle: null, info: null, warningCount: null }
+		return { error, bundle: null, cache: new_cache, warnings: all_warnings }
 	}
 
-	return { bundle, info, error: null, warningCount };
+	return { bundle, cache: new_cache, error: null, warnings: all_warnings };
 }
 
 async function bundle(components) {
@@ -140,6 +147,7 @@ async function bundle(components) {
 		lookup[path] = component;
 	});
 
+	const import_map = new Map();
 	let dom;
 	let error;
 
@@ -154,17 +162,16 @@ async function bundle(components) {
 			return;
 		}
 
-		cached.dom = dom.bundle;
+		cached.dom = dom.cache;
 
 		let uid = 1;
-		const importMap = new Map();
 
-		const domResult = await dom.bundle.generate({
+		const dom_result = await dom.bundle.generate({
 			format: 'iife',
 			name: 'SvelteComponent',
 			globals: id => {
 				const name = `import_${uid++}`;
-				importMap.set(id, name);
+				import_map.set(id, name);
 				return name;
 			},
 			sourcemap: true
@@ -172,12 +179,12 @@ async function bundle(components) {
 
 		if (token !== currentToken) return;
 
-		const ssr = dom.info.usesHooks
+		const ssr = false // TODO how can we do SSR?
 			? await getBundle('ssr', cached.ssr, lookup)
 			: null;
 
 		if (ssr) {
-			cached.ssr = ssr.bundle;
+			cached.ssr = ssr.cache;
 			if (ssr.error) {
 				throw ssr.error;
 			}
@@ -185,23 +192,21 @@ async function bundle(components) {
 
 		if (token !== currentToken) return;
 
-		const ssrResult = ssr
+		const ssr_result = ssr
 			? await ssr.bundle.generate({
 				format: 'iife',
 				name: 'SvelteComponent',
-				globals: id => importMap.get(id),
+				globals: id => import_map.get(id),
 				sourcemap: true
 			})
 			: null;
 
 		return {
-			bundle: {
-				imports: dom.bundle.imports,
-				importMap
-			},
-			dom: domResult,
-			ssr: ssrResult,
-			warningCount: dom.warningCount,
+			imports: dom.bundle.imports,
+			import_map,
+			dom: dom_result,
+			ssr: ssr_result,
+			warnings: dom.warnings,
 			error: null
 		};
 	} catch (err) {
@@ -209,10 +214,11 @@ async function bundle(components) {
 		delete e.toString;
 
 		return {
-			bundle: null,
+			imports: [],
+			import_map,
 			dom: null,
 			ssr: null,
-			warningCount: dom.warningCount,
+			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
index 0583186dc7..d234c2a0bb 100644
--- a/site/static/workers/compiler.js
+++ b/site/static/workers/compiler.js
@@ -29,7 +29,7 @@ const commonCompilerOptions = {
 	css: false
 };
 
-function compile({ source, options, entry }) {
+function compile({ id, source, options, entry }) {
 	try {
 		const { js, css, stats, vars } = svelte.compile(
 			source,
@@ -40,11 +40,26 @@ function compile({ source, options, entry }) {
 			? (vars || stats.vars).map(v => v.writable && v.export_name).filter(Boolean) // TODO remove stats post-launch
 			: null;
 
-		return { js: js.code, css: css.code, props };
+		return {
+			id,
+			result: {
+				js: js.code,
+				css: css.code || `/* Add a <sty` + `le> tag to see compiled CSS */`,
+				props
+			}
+		};
 	} catch (err) {
-		let result = `/* Error compiling component\n\n${err.message}`;
-		if (err.frame) result += `\n${err.frame}`;
-		result += `\n\n*/`;
-		return { code: result, props: null };
+		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,
+				props: null
+			}
+		};
 	}
 }

From fc19749673d23294efe438ccca9b54af452ac95c Mon Sep 17 00:00:00 2001
From: John Chesley <github+jches@chesl.es>
Date: Wed, 6 Mar 2019 22:33:21 -0500
Subject: [PATCH 07/10] add test for #2165

---
 test/runtime/samples/mixed-let-export/_config.js  | 9 +++++++++
 test/runtime/samples/mixed-let-export/main.svelte | 7 +++++++
 2 files changed, 16 insertions(+)
 create mode 100644 test/runtime/samples/mixed-let-export/_config.js
 create mode 100644 test/runtime/samples/mixed-let-export/main.svelte

diff --git a/test/runtime/samples/mixed-let-export/_config.js b/test/runtime/samples/mixed-let-export/_config.js
new file mode 100644
index 0000000000..5ac8585742
--- /dev/null
+++ b/test/runtime/samples/mixed-let-export/_config.js
@@ -0,0 +1,9 @@
+export default {
+  props: {
+    a: 42
+  },
+
+  html: `
+    42
+  `
+}
diff --git a/test/runtime/samples/mixed-let-export/main.svelte b/test/runtime/samples/mixed-let-export/main.svelte
new file mode 100644
index 0000000000..659c73a860
--- /dev/null
+++ b/test/runtime/samples/mixed-let-export/main.svelte
@@ -0,0 +1,7 @@
+<script>
+  let a, b, c, d;
+
+  export { a, c }
+</script>
+
+{a}

From d6c160aade899771c284b549d2cfe606a190cc12 Mon Sep 17 00:00:00 2001
From: John Chesley <github+jches@chesl.es>
Date: Thu, 7 Mar 2019 00:25:32 -0500
Subject: [PATCH 08/10] create a new declaration for non-exported variables
 that follow an exported one (#2165)

---
 src/compile/Component.ts | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/compile/Component.ts b/src/compile/Component.ts
index 1b843e9ca2..1f640e1873 100644
--- a/src/compile/Component.ts
+++ b/src/compile/Component.ts
@@ -839,6 +839,14 @@ export default class Component {
 
 									current_group.declarators.push(declarator);
 								}
+
+								if (next) {
+									const next_variable = component.var_lookup.get(next.id.name)
+									if (next_variable && !next_variable.export_name) {
+										current_group = null
+										code.overwrite(declarator.end, next.start, ` ${node.kind} `);
+									}
+								}
 							} else {
 								current_group = null;
 

From 428165eb79d335e3eb380266112b4f855350a5c8 Mon Sep 17 00:00:00 2001
From: John Chesley <github+jches@chesl.es>
Date: Thu, 7 Mar 2019 00:36:20 -0500
Subject: [PATCH 09/10] woops, this is redundant

---
 src/compile/Component.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/compile/Component.ts b/src/compile/Component.ts
index 1f640e1873..ef3bb2357e 100644
--- a/src/compile/Component.ts
+++ b/src/compile/Component.ts
@@ -843,7 +843,6 @@ export default class Component {
 								if (next) {
 									const next_variable = component.var_lookup.get(next.id.name)
 									if (next_variable && !next_variable.export_name) {
-										current_group = null
 										code.overwrite(declarator.end, next.start, ` ${node.kind} `);
 									}
 								}

From 7ca4c408e2d0a2c6109495e25a979fad133a6a4d Mon Sep 17 00:00:00 2001
From: Conduitry <git@chor.date>
Date: Thu, 7 Mar 2019 08:53:18 -0500
Subject: [PATCH 10/10] site: deps

---
 site/package-lock.json | 8 ++++----
 site/package.json      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/site/package-lock.json b/site/package-lock.json
index 7a6dd94e70..af6bf7f090 100644
--- a/site/package-lock.json
+++ b/site/package-lock.json
@@ -1579,7 +1579,7 @@
       "dev": true
     },
     "eslint-plugin-svelte3": {
-      "version": "git+https://github.com/sveltejs/eslint-plugin-svelte3.git#5fc4861d4b191649b0badf4f9a4c2470f08b237e",
+      "version": "git+https://github.com/sveltejs/eslint-plugin-svelte3.git#a9e7c167484ff7ea5da775ae21b133e0ab5ddc85",
       "from": "git+https://github.com/sveltejs/eslint-plugin-svelte3.git#semver:*",
       "dev": true
     },
@@ -4759,9 +4759,9 @@
       }
     },
     "svelte": {
-      "version": "3.0.0-beta.8",
-      "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.0.0-beta.8.tgz",
-      "integrity": "sha512-9cJHYdEs5h/6TJPwY+vfzwrznCLDjfS1rlJQz8SzPKfUJHCPxnDCbIZ95iPzATkv8aLHGcn1a/nLthyG+xh2IQ==",
+      "version": "3.0.0-beta.10",
+      "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.0.0-beta.10.tgz",
+      "integrity": "sha512-PDA034OwoMwna9+L99QVN/g9fodfxne3+wWaKph4WmcDDn0cAYRzTgu1h8WfAKK7tyt1iTcOBxKP9y+jonJ0/g==",
       "dev": true
     },
     "tar": {
diff --git a/site/package.json b/site/package.json
index d5e5131e4b..605682db32 100644
--- a/site/package.json
+++ b/site/package.json
@@ -53,6 +53,6 @@
     "rollup-plugin-svelte": "^5.0.3",
     "rollup-plugin-terser": "^4.0.4",
     "sapper": "^0.26.0-alpha.10",
-    "svelte": "^3.0.0-beta.8"
+    "svelte": "^3.0.0-beta.10"
   }
 }