main.svelte

<script>
	import { beforeUpdate } from 'svelte';

	import Editor from './Editor.svelte';
	import ComponentSelector from './ComponentSelector.svelte';

	export let components;
	export let selectedComponent;
	export let compiled;

	let previouslySelectedComponent;

	beforeUpdate(() => {
		components.forEach(component => {
			if (component === selectedComponent) return;
			component.compiled = component.source.toUpperCase();
		});

		if (selectedComponent !== previouslySelectedComponent) {
			selectedComponent.compiled = selectedComponent.source.toUpperCase();
			updateBundle();

			previouslySelectedComponent = selectedComponent;
		}
	});

	function updateBundle() {
		compiled = components.map(component => component.compiled).join('\n');
	}
</script>

<ComponentSelector {components} bind:selectedComponent/>
<Editor bind:code={selectedComponent.source} />

<pre>
{compiled}
</pre>