fix: wire up embedded examples correctly (#286)

* fix: wire up embedded examples correctly

also cleans up some code in the embed Svelte component

* Apply suggestions from code review

Co-authored-by: Rich Harris <[email protected]>

---------

Co-authored-by: Rich Harris <[email protected]>

Author: dummdidumm

apps/svelte.dev/src/routes/(authed)/playground/[id]/embed/+page.svelte

@@ -1,39 +1,23 @@
 <script lang="ts">
 	import { browser } from '$app/environment';
-	import { afterNavigate } from '$app/navigation';
+	import { afterNavigate, replaceState } 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';
 
 	let { data } = $props();
 
-	let version = $state(data.version);
 	let repl = $state() as Repl;
 
-	function update_query_string(version: string) {
-		const params = [];
-
-		if (version !== 'latest') params.push(`version=${version}`);
-
-		const url =
-			params.length > 0
-				? `/playground/${data.gist.id}/embed?${params.join('&')}`
-				: `/playground/${data.gist.id}/embed`;
-
-		history.replaceState({}, 'x', url);
-	}
-
-	$effect(() => {
-		update_query_string(version);
-	});
-
 	onMount(() => {
 		if (data.version !== 'local') {
-			fetch(`https://unpkg.com/svelte@${data.version || 'next'}/package.json`)
+			fetch(`https://unpkg.com/svelte@${data.version}/package.json`)
 				.then((r) => r.json())
 				.then((pkg) => {
-					version = pkg.version;
+					if (pkg.version !== data.version) {
+						replaceState(`/playground/${data.gist.id}/embed?version=${pkg.version}`, {});
+					}
 				});
 		}
 	});
@@ -44,11 +28,10 @@
 		});
 	});
 
-	const svelteUrl = $derived(
-		browser && version === 'local'
+	const svelteUrl =
+		browser && data.version === 'local'
 			? `${location.origin}/playground/local`
-			: `https://unpkg.com/svelte@${version}`
-	);
+			: `https://unpkg.com/svelte@${data.version}`;
 
 	const relaxed = $derived(data.gist.relaxed || (data.user && data.user.id === data.gist.owner));
 </script>

apps/svelte.dev/src/routes/(authed)/playground/api/[id].json/+server.js

@@ -84,8 +84,6 @@ export async function GET({ params }) {
 }
 
 export async function entries() {
-	const { get_examples_list } = await import('$lib/server/examples/index.js');
-
 	return get_examples_list(examples_data)
 		.map(({ examples }) => examples)
 		.flatMap((val) => val.map(({ slug }) => ({ id: slug })));

apps/svelte.dev/src/routes/(authed)/playground/embed/+page.server.js

@@ -0,0 +1,17 @@
+import { redirect } from '@sveltejs/kit';
+
+export function load({ url }) {
+	if (url.searchParams.has('example')) {
+		redirect(308, construct_embed_url(url.searchParams, 'example'));
+	} else if (url.searchParams.has('gist')) {
+		redirect(308, construct_embed_url(url.searchParams, 'gist'));
+	} else {
+		redirect(308, '/playground/hello-world/embed');
+	}
+}
+
+function construct_embed_url(searchParams: URLSearchParams, param: string) {
+	const cleaned_params = new URLSearchParams(searchParams);
+	cleaned_params.delete(param);
+	return `/playground/${searchParams.get(param)}/embed?${cleaned_params.toString()}`;
+}