dry out /repl/embed

site/content/examples/00-introduction/00-hello-world/meta.json

@@ -1,3 +1,3 @@
 {
-	"title": "Adding data"
+	"title": "Hello world"
 }

site/src/components/Repl/ReplWidget.svelte

@@ -6,6 +6,7 @@
 	export let version = 'beta';
 	export let gist = null;
 	export let example = null;
+	export let embedded = false;
 
 	let repl;
 	let name = 'loading...';
@@ -62,6 +63,8 @@
 			});
 		}
 	});
+
+	$: if (embedded) document.title = `${name} • Svelte REPL`;
 </script>
 
 <style>

site/src/routes/index.svelte

@@ -2,7 +2,7 @@
 	import Icon from '../components/Icon.svelte';
 	import Logo from '../components/Logo.svelte';
 	import IntersectionObserver from '../components/IntersectionObserver.svelte';
-	import Lazy from '../components/Lazy.svelte';
+	// import Lazy from '../components/Lazy.svelte';
 	import ReplWidget from '../components/Repl/ReplWidget.svelte';
 	import contributors from './_contributors.js';
 

site/src/routes/repl/embed.svelte

@@ -1,7 +1,7 @@
 <script context="module">
 	export function preload({ query }) {
 		return {
-			version: query.version || 'beta',
+			version: query.version,
 			gist: query.gist,
 			example: query.example
 		};
@@ -9,67 +9,11 @@
 </script>
 
 <script>
-	import { onMount } from 'svelte';
-	import { process_example } from '../../components/Repl/process_example.js';
-	import Repl from '../../components/Repl/index.svelte';
+	import ReplWidget from '../../components/Repl/ReplWidget.svelte';
 
-	export let version, gist, example;
-
-	let repl;
-	let name = 'loading...';
-
-	onMount(() => {
-		if (version !== 'local') {
-			fetch(`https://unpkg.com/svelte@${version}/package.json`)
-				.then(r => r.json())
-				.then(pkg => {
-					version = pkg.version;
-				});
-		}
-
-		if (gist) {
-			fetch(`gist/${gist}`).then(r => r.json()).then(data => {
-				const { id, description, files } = data;
-
-				name = description;
-
-				const components = Object.keys(files)
-					.map(file => {
-						const dot = file.lastIndexOf('.');
-						if (!~dot) return;
-
-						const source = files[file].content;
-
-						return {
-							name: file.slice(0, dot),
-							type: file.slice(dot + 1),
-							source
-						};
-					})
-					.filter(x => x.type === 'svelte' || x.type === 'js')
-					.sort((a, b) => {
-						if (a.name === 'App' && a.type === 'svelte') return -1;
-						if (b.name === 'App' && b.type === 'svelte') return 1;
-
-						if (a.type !== b.type) return a.type === 'svelte' ? -1 : 1;
-
-						return a.name < b.name ? -1 : 1;
-					});
-
-				repl.set({ components });
-			});
-		} else if (example) {
-			fetch(`examples/${example}.json`).then(async response => {
-				if (response.ok) {
-					const data = await response.json();
-
-					repl.set({
-						components: process_example(data.files)
-					});
-				}
-			});
-		}
-	});
+	export let version = 'beta';
+	export let gist;
+	export let example;
 </script>
 
 <style>
@@ -86,12 +30,8 @@
 	}
 </style>
 
-<svelte:head>
-	<title>{name} • Svelte REPL</title>
-</svelte:head>
-
 <div class="repl-outer">
 	{#if process.browser}
-		<Repl bind:this={repl} {version} embedded={true}/>
+		<ReplWidget {version} {gist} {example} embedded={true}/>
 	{/if}
 </div>