svelte/site/src/routes/repl/embed.html

<script>
	import { onMount } from 'svelte';
	import * as fleece from 'golden-fleece';
	import Repl from './_components/Repl.html';

	export let query;

	let version = query.version;
	let gist_id = query.gist;

	let gist;

	let app = {
		components: [],
		values: {}
	};

	let name = 'loading...';

	onMount(() => {
		fetch(`https://unpkg.com/svelte@${version || 'alpha'}/package.json`)
			.then(r => r.json())
			.then(pkg => {
				version = pkg.version;
			});

		if (gist_id) {
			fetch(`gist/${gist_id}`).then(r => r.json()).then(data => {
				gist = data;
				const { id, description, files } = data;

				name = description;

				let values = {};

				const components = Object.keys(files)
					.map(file => {
						const dot = file.lastIndexOf('.');
						if (!~dot) return;

						const source = files[file].content;

						// while we're here...
						if (file === 'data.json' || file === 'data.json5') {
							values = tryParseData(source) || {};
						}

						return {
							name: file.slice(0, dot),
							type: file.slice(dot + 1),
							source
						};
					})
					.filter(x => x.type === 'html' || x.type === 'js')
					.sort((a, b) => {
						if (a.name === 'App' && a.type === 'html') return -1;
						if (b.name === 'App' && b.type === 'html') return 1;

						if (a.type !== b.type) return a.type === 'html' ? -1 : 1;

						return a.name < b.name ? -1 : 1;
					});

				app = { components, values };
			});
		} else {
			// TODO err...
		}
	});

	function tryParseData(json5) {
		try {
			return fleece.evaluate(json5);
		} catch (err) {
			return null;
		}
	}
</script>

<style>
	.repl-outer {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		--pane-controls-h: 4.2rem;
	}

	@media (min-width: 768px) {
		.repl-outer {
			background-color: var(--back);
			overflow: hidden;
			box-sizing: border-box;
		}
	}
</style>

<svelte:head>
	<title>{name} • Svelte REPL</title>
</svelte:head>

<div class="repl-outer">
	{#if process.browser}
		<Repl {version} {app}/>
	{/if}
</div>