recompile when options change

site/src/components/Repl/Output/CompilerOptions.svelte

@@ -1,5 +1,7 @@
 <script>
-	export let options;
+	import { getContext } from 'svelte';
+
+	const { compile_options } = getContext('REPL');
 </script>
 
 <style>
@@ -104,41 +106,41 @@
 	<div class="option">
 		<span class="key">generate:</span>
 
-		<input id="dom-input" type="radio" bind:group={options.generate} value="dom">
+		<input id="dom-input" type="radio" bind:group={$compile_options.generate} value="dom">
 		<label for="dom-input"><span class="string">"dom"</span></label>
 
-		<input id="ssr-input" type="radio" bind:group={options.generate} value="ssr">
+		<input id="ssr-input" type="radio" bind:group={$compile_options.generate} value="ssr">
 		<label for="ssr-input"><span class="string">"ssr"</span>,</label>
 	</div>
 
 	<label class="option">
 		<span class="key">dev:</span>
-		<input type="checkbox" bind:checked={options.dev}> <span class="boolean">{options.dev}</span>,
+		<input type="checkbox" bind:checked={$compile_options.dev}> <span class="boolean">{$compile_options.dev}</span>,
 	</label>
 
 	<label class="option">
 		<span class="key">css:</span>
-		<input type="checkbox" bind:checked={options.css}> <span class="boolean">{options.css}</span>,
+		<input type="checkbox" bind:checked={$compile_options.css}> <span class="boolean">{$compile_options.css}</span>,
 	</label>
 
 	<label class="option">
 		<span class="key">hydratable:</span>
-		<input type="checkbox" bind:checked={options.hydratable}> <span class="boolean">{options.hydratable}</span>,
+		<input type="checkbox" bind:checked={$compile_options.hydratable}> <span class="boolean">{$compile_options.hydratable}</span>,
 	</label>
 
 	<label class="option">
 		<span class="key">customElement:</span>
-		<input type="checkbox" bind:checked={options.customElement}> <span class="boolean">{options.customElement}</span>,
+		<input type="checkbox" bind:checked={$compile_options.customElement}> <span class="boolean">{$compile_options.customElement}</span>,
 	</label>
 
 	<label class="option">
 		<span class="key">immutable:</span>
-		<input type="checkbox" bind:checked={options.immutable}> <span class="boolean">{options.immutable}</span>,
+		<input type="checkbox" bind:checked={$compile_options.immutable}> <span class="boolean">{$compile_options.immutable}</span>,
 	</label>
 
 	<label class="option">
 		<span class="key">legacy:</span>
-		<input type="checkbox" bind:checked={options.legacy}> <span class="boolean">{options.legacy}</span>
+		<input type="checkbox" bind:checked={$compile_options.legacy}> <span class="boolean">{$compile_options.legacy}</span>
 	</label>
 	});
 </div>

site/src/components/Repl/Output/index.svelte

@@ -13,34 +13,26 @@
 	export let runtimeError;
 	export let embedded;
 
-	let compile_options = {
+	let foo; // TODO workaround for https://github.com/sveltejs/svelte/issues/2122
-		generate: 'dom',
-		dev: false,
-		css: false,
-		hydratable: false,
-		customElement: false,
-		immutable: false,
-		legacy: false
-	};
 
 	register_output({
-		set: async selected => {
+		set: async (selected, options) => {
 			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);
+			const compiled = await compiler.compile(selected, options);
 
 			js_editor.set(compiled.js, 'js');
 			css_editor.set(compiled.css, 'css');
 		},
 
-		update: async selected => {
+		update: async (selected, options) => {
 			if (selected.type === 'js') return;
 
-			const compiled = await compiler.compile(selected, compile_options);
+			const compiled = await compiler.compile(selected, options);
 
 			js_editor.update(compiled.js);
 			css_editor.update(compiled.css);
@@ -160,7 +152,7 @@
 			<section slot="b">
 				<h3>Compiler options</h3>
 
-				<CompilerOptions bind:options={compile_options}/>
+				<CompilerOptions bind:foo={foo}/>
 			</section>
 		</SplitPane>
 	{/if}

site/src/components/Repl/index.svelte

@@ -30,7 +30,7 @@
 		selected.set(data.components[0]);
 
 		module_editor.set($selected.source, $selected.type);
-		output.set($selected);
+		output.set($selected, $compile_options);
 	}
 
 	export function update(data) {
@@ -43,10 +43,10 @@
 
 		if (matched_component) {
 			module_editor.update(matched_component.source);
-			output.update(matched_component);
+			output.update(matched_component, $compile_options);
 		} else {
 			module_editor.set(matched_component.source, matched_component.type);
-			output.set(matched_component);
+			output.set(matched_component, $compile_options);
 		}
 	}
 
@@ -56,6 +56,16 @@
 	const selected = writable(null);
 	const bundle = writable(null);
 
+	const compile_options = writable({
+		generate: 'dom',
+		dev: false,
+		css: false,
+		hydratable: false,
+		customElement: false,
+		immutable: false,
+		legacy: false
+	});
+
 	let module_editor;
 	let output;
 
@@ -67,6 +77,7 @@
 		components,
 		selected,
 		bundle,
+		compile_options,
 
 		rebundle,
 
@@ -78,7 +89,7 @@
 			const component = $components.find(c => c.name === name && c.type === type);
 			selected.set(component);
 
-			output.set($selected);
+			output.set($selected, $compile_options);
 
 			// TODO select the line/column in question
 		},
@@ -97,7 +108,7 @@
 			components.update(c => c);
 
 			// recompile selected component
-			output.update($selected);
+			output.update($selected, $compile_options);
 
 			rebundle();
 
@@ -122,7 +133,7 @@
 	function handle_select(component) {
 		selected.set(component);
 		module_editor.set(component.source, component.type);
-		output.set($selected);
+		output.set($selected, $compile_options);
 	}
 
 	let workers;
@@ -158,6 +169,10 @@
 	$: if (workers && $components) {
 		workers.bundler.postMessage({ type: 'bundle', components: $components });
 	}
+
+	$: if (output && $selected) {
+		output.update($selected, $compile_options);
+	}
 </script>
 
 <style>