fix(repl): update broken embed repl to work like regular one, remove obsolete ReplWidget.svelte (#10180)

Author: zusorio

sites/svelte.dev/src/lib/components/ReplWidget.svelte

@@ -0,0 +1,16 @@
+import { error } from '@sveltejs/kit';
+
+export async function load({ fetch, params, url }) {
+	const res = await fetch(`/repl/api/${params.id}.json`);
+
+	if (!res.ok) {
+		throw error(res.status);
+	}
+
+	const gist = await res.json();
+
+	return {
+		gist,
+		version: url.searchParams.get('version') || '4'
+	};
+}

sites/svelte.dev/src/routes/(authed)/repl/[id]/embed/+page.server.js

@@ -0,0 +1,92 @@
+<script>
+	import { browser } from '$app/environment';
+	import { afterNavigate } from '$app/navigation';
+	import { theme } from '@sveltejs/site-kit/stores';
+	import Repl from '@sveltejs/repl';
+	import { mapbox_setup } from '../../../../../config.js';
+	import { onMount } from 'svelte';
+
+	export let data;
+
+	let version = data.version;
+
+	/** @type {import('@sveltejs/repl').default} */
+	let repl;
+
+	function update_query_string(version) {
+		const params = [];
+
+		if (version !== 'latest') params.push(`version=${version}`);
+
+		const url =
+			params.length > 0
+				? `/repl/${data.gist.id}/embed?${params.join('&')}`
+				: `/repl/${data.gist.id}/embed`;
+
+		history.replaceState({}, 'x', url);
+	}
+
+	$: if (typeof history !== 'undefined') update_query_string(version);
+
+	onMount(() => {
+		if (data.version !== 'local') {
+			fetch(`https://unpkg.com/svelte@${data.version || '4'}/package.json`)
+				.then((r) => r.json())
+				.then((pkg) => {
+					version = pkg.version;
+				});
+		}
+	});
+
+	afterNavigate(() => {
+		repl?.set({
+			files: data.gist.components
+		});
+	});
+
+	$: svelteUrl =
+		browser && version === 'local'
+			? `${location.origin}/repl/local`
+			: `https://unpkg.com/svelte@${version}`;
+
+	$: relaxed = data.gist.relaxed || (data.user && data.user.id === data.gist.owner);
+</script>
+
+<svelte:head>
+	<title>{data.gist.name} • REPL • Svelte</title>
+
+	<meta name="twitter:title" content="{data.gist.name} • REPL • Svelte" />
+	<meta name="twitter:description" content="Cybernetically enhanced web apps" />
+	<meta name="Description" content="Interactive Svelte playground" />
+</svelte:head>
+
+<div class="repl-outer">
+	{#if browser}
+		<Repl
+			bind:this={repl}
+			{svelteUrl}
+			{relaxed}
+			injectedJS={mapbox_setup}
+			showModified
+			showAst
+			previewTheme={$theme.current}
+			embedded
+		/>
+	{/if}
+</div>
+
+<style>
+	.repl-outer {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		background-color: var(--sk-back-1);
+		overflow: hidden;
+		box-sizing: border-box;
+		--pane-controls-h: 4.2rem;
+		display: flex;
+		flex-direction: column;
+	}
+</style>

sites/svelte.dev/src/routes/(authed)/repl/[id]/embed/+page.svelte

@@ -0,0 +1,14 @@
+import { redirect } from '@sveltejs/kit';
+
+export function load({ url }) {
+	if (!url.searchParams.has('gist')) {
+		throw redirect(301, '/repl/hello-world/embed');
+	} else {
+		const searchParamsWithoutGist = new URLSearchParams(url.searchParams);
+		searchParamsWithoutGist.delete('gist');
+		throw redirect(
+			301,
+			`/repl/${url.searchParams.get('gist')}/embed?${searchParamsWithoutGist.toString()}`
+		);
+	}
+}

sites/svelte.dev/src/routes/(authed)/repl/embed/+page.js

@@ -33,7 +33,10 @@
 </svelte:head>
 
 <div style:display={$page.url.pathname !== '/docs' ? 'contents' : 'none'}>
-	<Shell nav_visible={$page.url.pathname !== '/repl/embed'} bind:snapshot={shell_snapshot}>
+	<Shell
+		nav_visible={$page.route.id !== '/(authed)/repl/[id]/embed'}
+		bind:snapshot={shell_snapshot}
+	>
 		<Nav slot="top-nav" title={data.nav_title} links={data.nav_links}>
 			<svelte:fragment slot="home-large">
 				<strong>svelte</strong>.dev

sites/svelte.dev/src/routes/(authed)/repl/embed/+page.server.js

@@ -1,14 +1,38 @@
 <script>
 	import IntersectionObserver from '$lib/components/IntersectionObserver.svelte';
-	import ReplWidget from '$lib/components/ReplWidget.svelte';
+	import { process_example } from '$lib/utils/examples';
+	import Repl from '@sveltejs/repl';
+	import { theme } from '@sveltejs/site-kit/stores';
 
 	export let id;
+
+	/** @type {import('@sveltejs/repl').default} */
+	let repl;
+
+	$: {
+		if (repl) {
+			fetch(`/examples/api/${id}.json`)
+				.then((r) => r.json())
+				.then((data) => process_example(data.files))
+				.then((files) => {
+					repl.set({
+						files
+					});
+				});
+		}
+	}
 </script>
 
 <div class="repl-container">
 	<IntersectionObserver once let:intersecting top={400}>
 		{#if intersecting}
-			<ReplWidget example={id} />
+			<Repl
+				bind:this={repl}
+				svelteUrl="https://unpkg.com/svelte@4"
+				relaxed
+				showAst
+				previewTheme={$theme.current}
+			/>
 		{/if}
 	</IntersectionObserver>
 </div>