Merge branch 'main' of github.com:sveltejs/svelte.dev

Author: Rich-Harris

apps/svelte.dev/src/lib/tutorial/adapters/rollup/index.svelte.ts

@@ -45,7 +45,7 @@ export async function create(): Promise<Adapter> {
 				.filter((f): f is File => f.name.startsWith('/src/lib/') && f.type === 'file')
 				.map((f) => ({ ...f, name: f.name.slice(9) })),
 			{
-				runes: true
+				// TODO support Tailwind here?
 			}
 		);
 	}

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/editor/src/lib/Workspace.svelte.ts

@@ -113,6 +113,7 @@ export class Workspace {
 	#files = $state.raw<Item[]>([]);
 	#current = $state.raw() as File;
 	#vim = $state(false);
+	#tailwind = $state(false);
 
 	#handlers = {
 		hover: new Set<(pos: number | null) => void>(),
@@ -464,6 +465,15 @@ export class Workspace {
 		}
 	}
 
+	get tailwind() {
+		return this.#tailwind;
+	}
+
+	set tailwind(value) {
+		this.#tailwind = value;
+		this.#onreset(this.#files);
+	}
+
 	get vim() {
 		return this.#vim;
 	}

packages/repl/package.json

@@ -86,6 +86,7 @@
 		"marked": "^14.1.2",
 		"resolve.exports": "^2.0.2",
 		"svelte": "5.23.0",
+		"tailwindcss": "^4.0.15",
 		"tarparser": "^0.0.4",
 		"zimmerframe": "^1.1.2"
 	}

packages/repl/src/lib/Bundler.ts

@@ -58,7 +58,7 @@ export default class Bundler {
 		});
 	}
 
-	bundle(files: File[], options: CompileOptions = {}): Promise<BundleResult> {
+	bundle(files: File[], options: { tailwind?: boolean }): Promise<BundleResult> {
 		return new Promise<any>((fulfil) => {
 			this.handlers.set(uid, fulfil);
 			this.worker.postMessage({

packages/repl/src/lib/Input/ComponentSelector.svelte

@@ -170,6 +170,11 @@
 				<Checkbox bind:checked={workspace.vim}></Checkbox>
 			</label>
 
+			<label class="option">
+				<span>Toggle Tailwind</span>
+				<Checkbox bind:checked={workspace.tailwind}></Checkbox>
+			</label>
+
 			<button disabled={!can_migrate} onclick={migrate}>Migrate to Svelte 5, if possible</button>
 
 			{#if download}

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/Output/ReplProxy.ts

@@ -85,8 +85,8 @@ export default class ReplProxy {
 		}
 	}
 
-	eval(script: string) {
-		return this.iframe_command('eval', { script });
+	eval(script: string, style?: string) {
+		return this.iframe_command('eval', { script, style });
 	}
 
 	handle_links() {

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

@@ -8,6 +8,7 @@
 	import Console, { type Log } from './console/Console.svelte';
 	import getLocationFromStack from './get-location-from-stack';
 	import srcdoc from './srcdoc/index.html?raw';
+	import srcdoc_styles from './srcdoc/styles.css?raw';
 	import ErrorOverlay from './ErrorOverlay.svelte';
 	import type { CompileError } from 'svelte/compiler';
 	import type { Bundle } from '../types';
@@ -107,7 +108,8 @@
 			clear_logs();
 
 			if (!$bundle.error) {
-				await proxy?.eval(`
+				await proxy?.eval(
+					`
 					${injectedJS}
 
 					if (!window.__setup_focus_handling) {
@@ -183,7 +185,9 @@
 						}
 					}
 					//# sourceURL=playground:output
-				`);
+				`,
+					$bundle?.tailwind ?? srcdoc_styles
+				);
 				error = null;
 			}
 		} catch (e) {

packages/repl/src/lib/Output/srcdoc/index.html

@@ -1,72 +1,13 @@
 <!doctype html>
 <html>
 	<head>
-		<style>
-			body {
-				--bg-1: hsl(0, 0%, 100%);
-				--bg-2: hsl(206, 20%, 90%);
-				--bg-3: hsl(206, 20%, 80%);
-				--fg-1: hsl(0, 0%, 13%);
-				--fg-2: hsl(0, 0%, 20%);
-				--fg-2: hsl(0, 0%, 30%);
-				--link: hsl(208, 77%, 47%);
-				--link-hover: hsl(208, 77%, 55%);
-				--link-active: hsl(208, 77%, 40%);
-				--border-radius: 4px;
-				--font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
-					'Open Sans', 'Helvetica Neue', sans-serif;
-				--font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas,
-					'DejaVu Sans Mono', monospace;
-				color-scheme: light;
-				background: var(--bg-1);
-				color: var(--fg-1);
-				font-family: var(--font);
-				line-height: 1.5;
-				margin: 1rem;
-				height: calc(100vh - 2rem);
-				accent-color: var(--hover) !important;
-			}
-
-			a {
-				color: var(--link);
-			}
-
-			a:hover {
-				color: var(--link-hover);
-			}
-
-			a:active {
-				color: var(--link-active);
-			}
-
-			code {
-				background: var(--bg-2);
-				font-family: var(--font-mono);
-				font-size: 0.9em;
-				padding: 0.15rem 0.3rem;
-				border-radius: var(--border-radius);
-			}
-
-			ul.todos {
-				padding: 0;
-			}
-
-			body.dark {
-				color-scheme: dark;
-				--bg-1: hsl(0, 0%, 18%);
-				--bg-2: hsl(0, 0%, 30%);
-				--bg-3: hsl(0, 0%, 40%);
-				--fg-1: hsl(0, 0%, 90%);
-				--fg-2: hsl(0, 0%, 70%);
-				--fg-3: hsl(0, 0%, 60%);
-				--link: hsl(206, 96%, 72%);
-				--link-hover: hsl(206, 96%, 78%);
-				--link-active: hsl(206, 96%, 64%);
-			}
-		</style>
+		<style id="injected"></style>
 
 		<script>
 			(function () {
+				const style = document.querySelector('style#injected');
+				let styles = '';
+
 				function send(payload, origin = '*') {
 					if (payload.command === 'info' && payload.args[0] instanceof Error) {
 						const error = payload.args[0];
@@ -97,6 +38,10 @@
 						}
 
 						if (action === 'eval') {
+							if (data.args.style !== undefined && styles !== (styles = data.args.style)) {
+								style.textContent = styles;
+							}
+
 							(0, eval)(data.args.script);
 						}