start moving REPL widgets out of iframes (#2216)

site/src/components/Repl/ReplWidget.svelte

@@ -0,0 +1,89 @@
+<script>
+	import { onMount } from 'svelte';
+	import { process_example } from './process_example.js';
+	import Repl from '../../components/Repl/index.svelte';
+
+	export let version = 'beta';
+	export let gist;
+	export let 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)
+					});
+				}
+			});
+		}
+	});
+</script>
+
+<style>
+	.repl-outer {
+		position: relative;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		background-color: var(--back);
+		overflow: hidden;
+		box-sizing: border-box;
+		--pane-controls-h: 4.2rem;
+	}
+</style>
+
+<svelte:head>
+	<title>{name} • Svelte REPL</title>
+</svelte:head>
+
+<div class="repl-outer">
+	{#if process.browser}
+		<Repl bind:this={repl} {version} embedded={true}/>
+	{/if}
+</div>

site/src/routes/index.svelte

@@ -1,6 +1,7 @@
 <script>
 	import Icon from '../components/Icon.svelte';
 	import Logo from '../components/Logo.svelte';
+	import ReplWidget from '../components/Repl/ReplWidget.svelte'; // TODO lazyload?
 	import contributors from './_contributors.js';
 
 	let sy = 0;
@@ -120,6 +121,9 @@
 		color: white;
 		padding: 0.8rem;
 		border-radius: var(--border-r); */
+		width: 100%;
+		height: 420px;
+		border-radius: var(--border-r);
 	}
 
 	.example > div:first-child {
@@ -240,11 +244,7 @@ npm run dev & open http://localhost:5000
 			<p>Svelte components are written in HTML files. Just add data.</p>
 		</div>
 
-		<iframe
+		<ReplWidget example="hello-world"/>
-			title="Hello world example"
-			src="/repl/embed?example=hello-world"
-			scrolling="no"
-		></iframe>
 	</section>
 
 	<section class="container example linkify">
@@ -252,11 +252,7 @@ npm run dev & open http://localhost:5000
 			<p>CSS is component-scoped by default — no more style collisions or specificity wars. Or you can <a href="TODO-blog-post-on-css-in-js">use your favourite CSS-in-JS library</a>.</p>
 		</div>
 
-		<iframe
+		<ReplWidget example="nested-components"/>
-			title="Scope styles example"
-			src="/repl/embed?example=nested-components"
-			scrolling="no"
-		></iframe>
 	</section>
 
 	<section class="container example linkify">
@@ -264,11 +260,7 @@ npm run dev & open http://localhost:5000
 			<p>Trigger efficient, granular updates by assigning to local variables. The compiler does the rest.</p>
 		</div>
 
-		<iframe
+		<ReplWidget example="reactive-assignments"/>
-			title="Reactivity example"
-			src="/repl/embed?example=reactive-assignments"
-			scrolling="no"
-		></iframe>
 	</section>
 
 	<section class="container example linkify">
@@ -276,11 +268,7 @@ npm run dev & open http://localhost:5000
 			<p>Build beautiful UIs with a powerful, performant transition engine built right into the framework.</p>
 		</div>
 
-		<iframe
+		<ReplWidget example="svg-transitions"/>
-			title="Transitions example"
-			src="/repl/embed?example=svg-transitions"
-			scrolling="no"
-		></iframe>
 	</section>
 </div>
 

site/src/routes/repl/embed.svelte

@@ -10,7 +10,7 @@
 
 <script>
 	import { onMount } from 'svelte';
-	import { process_example } from './_utils/process_example.js';
+	import { process_example } from '../../components/Repl/process_example.js';
 	import Repl from '../../components/Repl/index.svelte';
 
 	export let version, gist, example;

site/src/routes/repl/index.svelte

@@ -11,7 +11,7 @@
 <script>
 	import { onMount } from 'svelte';
 	import { locate } from 'locate-character';
-	import { process_example } from './_utils/process_example.js';
+	import { process_example } from '../../components/Repl/process_example.js';
 	import AppControls from './_components/AppControls/index.svelte';
 	import Repl from '../../components/Repl/index.svelte';