chore: output-only embedded mode (#1217)

Embed mode, but with hash support and a new query param that makes it so only the output is shown, nothing else

Author: dummdidumm

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

@@ -5,6 +5,8 @@
 	import { Repl } from '@sveltejs/repl';
 	import { mapbox_setup } from '../../../../../config.js';
 	import { page } from '$app/state';
+	import { decode_and_decompress_text } from '../gzip.js';
+	import type { File } from 'editor';
 
 	let { data } = $props();
 
@@ -25,10 +27,40 @@
 		});
 	}
 
+	// TODO make this munging unnecessary
+	function munge(data: any): File {
+		const basename = `${data.name}.${data.type}`;
+
+		return {
+			type: 'file',
+			name: basename,
+			basename,
+			contents: data.source,
+			text: true
+		};
+	}
+
+	async function set_files() {
+		const hash = location.hash.slice(1);
+
+		if (!hash) {
+			repl?.set({
+				files: data.gist.components.map(munge)
+			});
+
+			return;
+		}
+
+		try {
+			const recovered = JSON.parse(await decode_and_decompress_text(hash));
+			repl.set({ files: recovered.files });
+		} catch {
+			alert(`Couldn't load the code from the URL. Make sure you copied the link correctly.`);
+		}
+	}
+
 	afterNavigate(() => {
-		repl?.set({
-			files: data.gist.components
-		});
+		set_files();
 	});
 
 	const relaxed = $derived(data.gist.relaxed || (data.user && data.user.id === data.gist.owner));
@@ -51,7 +83,7 @@
 			can_escape
 			injectedJS={mapbox_setup}
 			previewTheme={theme.current}
-			embedded
+			embedded={page.url.searchParams.has('output-only') ? 'output-only' : true}
 		/>
 	{/if}
 </div>

packages/repl/src/lib/Output/Output.svelte

@@ -12,7 +12,7 @@
 	interface Props {
 		status: string | null;
 		runtimeError?: Error | null;
-		embedded?: boolean;
+		embedded?: boolean | 'output-only';
 		relaxed?: boolean;
 		can_escape?: boolean;
 		injectedJS: string;
@@ -182,16 +182,18 @@
 	});
 </script>
 
-<div class="view-toggle">
-	{#if workspace.current.name.endsWith('.md')}
-		<button class="active">Markdown</button>
-	{:else}
-		<button aria-current={view === 'result'} onclick={() => (view = 'result')}>Result</button>
-		<button aria-current={view === 'js'} onclick={() => (view = 'js')}>JS output</button>
-		<button aria-current={view === 'css'} onclick={() => (view = 'css')}>CSS output</button>
-		<button aria-current={view === 'ast'} onclick={() => (view = 'ast')}>AST output</button>
-	{/if}
-</div>
+{#if embedded !== 'output-only'}
+	<div class="view-toggle">
+		{#if workspace.current.name.endsWith('.md')}
+			<button class="active">Markdown</button>
+		{:else}
+			<button aria-current={view === 'result'} onclick={() => (view = 'result')}>Result</button>
+			<button aria-current={view === 'js'} onclick={() => (view = 'js')}>JS output</button>
+			<button aria-current={view === 'css'} onclick={() => (view = 'css')}>CSS output</button>
+			<button aria-current={view === 'ast'} onclick={() => (view = 'ast')}>AST output</button>
+		{/if}
+	</div>
+{/if}
 
 <!-- component viewer -->
 <div class="tab-content" class:visible={!is_markdown && view === 'result'}>
@@ -202,6 +204,7 @@
 		{can_escape}
 		{injectedJS}
 		{injectedCSS}
+		onLog={embedded === 'output-only' ? () => {} : undefined}
 		theme={previewTheme}
 	/>
 </div>

packages/repl/src/lib/Repl.svelte

@@ -13,7 +13,7 @@
 	interface Props {
 		packagesUrl?: string;
 		svelteVersion?: string;
-		embedded?: boolean;
+		embedded?: boolean | 'output-only';
 		orientation?: 'columns' | 'rows';
 		relaxed?: boolean;
 		can_escape?: boolean;
@@ -152,7 +152,7 @@
 	let mobile = $derived(width < 540);
 
 	$effect(() => {
-		$toggleable = mobile && orientation === 'columns';
+		$toggleable = mobile && orientation === 'columns' && embedded !== 'output-only';
 	});
 
 	let runes = $derived(
@@ -166,13 +166,24 @@
 
 <svelte:window onbeforeunload={before_unload} />
 
-<div class="container" class:embedded class:toggleable={$toggleable} bind:clientWidth={width}>
+<div
+	class="container {embedded === 'output-only' ? '' : 'container-normal'}"
+	class:embedded
+	class:toggleable={$toggleable}
+	bind:clientWidth={width}
+>
 	<div class="viewport" class:output={show_output}>
 		<SplitPane
 			id="main"
 			type={orientation === 'rows' ? 'vertical' : 'horizontal'}
-			pos="{mobile || fixed ? fixedPos : orientation === 'rows' ? 60 : 50}%"
-			min="100px"
+			pos="{embedded === 'output-only'
+				? 0
+				: mobile || fixed
+					? fixedPos
+					: orientation === 'rows'
+						? 60
+						: 50}%"
+			min={embedded === 'output-only' ? '0px' : '100px'}
 			max="-4.1rem"
 		>
 			{#snippet a()}
@@ -264,7 +275,7 @@
 
 	/* on mobile, override the <SplitPane> controls */
 	@media (max-width: 799px) {
-		:global {
+		.container-normal :global {
 			[data-pane='main'] {
 				--pos: 50% !important;
 			}