Modernise playground

apps/svelte.dev/package.json

@@ -18,7 +18,6 @@
 	"dependencies": {
 		"@jridgewell/sourcemap-codec": "^1.4.15",
 		"@lezer/common": "^1.0.4",
-		"@lezer/highlight": "^1.1.6",
 		"@lezer/javascript": "^1.4.7",
 		"@lezer/lr": "^1.3.10",
 		"@rich_harris/svelte-split-pane": "^1.1.3",

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

@@ -44,11 +44,7 @@ export async function create(): Promise<Adapter> {
 			[...current_stubs.values()]
 				// TODO we can probably remove all the SvelteKit specific stuff from the tutorial content once this settles down
 				.filter((f): f is File => f.name.startsWith('/src/lib/') && f.type === 'file')
-				.map((f) => ({
-					name: f.name.slice(9).split('.').slice(0, -1).join('.'),
-					source: f.contents,
-					type: f.name.split('.').pop() ?? 'svelte'
-				}))
+				.map((f) => ({ ...f, name: f.name.slice(9) }))
 		);
 	}
 

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

@@ -2,7 +2,7 @@
 	import { browser } from '$app/environment';
 	import { afterNavigate, goto, replaceState } from '$app/navigation';
 	import type { Gist } from '$lib/db/types';
-	import { Repl, type File } from '@sveltejs/repl';
+	import { Repl } from '@sveltejs/repl';
 	import { theme } from '@sveltejs/site-kit/stores';
 	import { onMount } from 'svelte';
 	import { mapbox_setup } from '../../../../config.js';
@@ -50,9 +50,21 @@
 
 		if (!hash) {
 			repl?.set({
-				files: structuredClone(data.gist.components)
+				// TODO make this munging unnecessary
+				files: structuredClone(data.gist.components).map((file: any) => {
+					const basename = `${file.name}.${file.type}`;
+
+					return {
+						type: 'file',
+						name: basename,
+						basename,
+						contents: file.source,
+						text: true
+					};
+				})
 			});
 
+			modified = false;
 			return;
 		}
 
@@ -89,9 +101,9 @@
 		}, 500);
 	}
 
-	function handle_change({ files }: { files: File[] }) {
+	function handle_change() {
 		const was_modified = modified;
-		modified = files.some((c) => c.modified);
+		modified = true;
 
 		if (
 			!was_modified &&
@@ -142,27 +154,28 @@
 	/>
 
 	{#if browser}
-		<Repl
-			bind:this={repl}
-			{svelteUrl}
-			{relaxed}
-			{can_escape}
-			vim={data.vim}
-			injectedJS={mapbox_setup}
-			showModified
-			showAst
-			change={handle_change}
-			add={handle_change}
-			remove={handle_change}
-			blur={() => {
+		<div
+			style="display: contents"
+			onfocusout={() => {
 				// Only change hash on editor blur to not pollute everyone's browser history
 				if (modified) {
 					const json = JSON.stringify({ files: repl.toJSON().files });
 					change_hash(json);
 				}
 			}}
-			previewTheme={$theme.current}
-		/>
+		>
+			<Repl
+				bind:this={repl}
+				{svelteUrl}
+				{relaxed}
+				{can_escape}
+				injectedJS={mapbox_setup}
+				change={handle_change}
+				add={handle_change}
+				remove={handle_change}
+				previewTheme={$theme.current}
+			/>
+		</div>
 	{/if}
 </div>
 
@@ -192,14 +205,6 @@
 		visibility: visible;
 	}
 
-	.zen-mode {
-		position: fixed;
-		width: 100%;
-		height: 100%;
-		top: 0;
-		z-index: 111;
-	}
-
 	@keyframes fade-in {
 		0% {
 			opacity: 0;

apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte

@@ -4,19 +4,18 @@
 	import { Icon } from '@sveltejs/site-kit/components';
 	import { enter } from '$lib/utils/events';
 	import { isMac } from '$lib/utils/compat.js';
-	import { Repl } from '@sveltejs/repl';
 	import { get_app_context } from '../../app-context';
 	import type { Gist, User } from '$lib/db/types';
-	import type { File } from '@sveltejs/repl';
 	import { browser } from '$app/environment';
 	import SelectIcon from '$lib/components/SelectIcon.svelte';
 	import { untrack } from 'svelte';
 	import SecondaryNav from '$lib/components/SecondaryNav.svelte';
+	import type { File } from 'editor';
 
 	interface Props {
 		examples: Array<{ title: string; examples: any[] }>;
 		user: User | null;
-		repl: Repl;
+		repl: any; // TODO
 		gist: Gist;
 		name: string;
 		modified: boolean;
@@ -70,8 +69,8 @@
 				body: JSON.stringify({
 					name,
 					files: files.map((file) => ({
-						name: `${file.name}.${file.type}`,
-						source: file.source
+						name: file.name,
+						source: file.contents
 					}))
 				})
 			});
@@ -135,8 +134,8 @@
 				body: JSON.stringify({
 					name,
 					files: files.map((file) => ({
-						name: `${file.name}.${file.type}`,
-						source: file.source
+						name: file.name,
+						source: file.contents
 					}))
 				})
 			});

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

@@ -52,11 +52,8 @@
 			{relaxed}
 			can_escape
 			injectedJS={mapbox_setup}
-			showModified
-			showAst
 			previewTheme={$theme.current}
 			embedded
-			vim={false}
 		/>
 	{/if}
 </div>

packages/editor/package.json

@@ -38,11 +38,11 @@
 		"@codemirror/lang-css": "^6.2.1",
 		"@codemirror/lang-html": "^6.4.6",
 		"@codemirror/lang-javascript": "^6.2.1",
-		"@codemirror/language": "^6.9.0",
-		"@codemirror/lint": "^6.4.1",
-		"@codemirror/search": "^6.5.2",
-		"@codemirror/state": "^6.2.1",
-		"@codemirror/view": "^6.17.1",
+		"@codemirror/language": "^6.10.3",
+		"@codemirror/lint": "^6.8.2",
+		"@codemirror/search": "^6.5.6",
+		"@codemirror/state": "^6.4.1",
+		"@codemirror/view": "^6.34.1",
 		"@replit/codemirror-lang-svelte": "^6.0.0",
 		"@replit/codemirror-vim": "^6.0.14",
 		"@sveltejs/adapter-auto": "^3.0.0",
@@ -62,6 +62,7 @@
 	},
 	"type": "module",
 	"dependencies": {
+		"@lezer/highlight": "^1.2.1",
 		"esm-env": "^1.0.0"
 	}
 }

packages/editor/src/lib/Editor.svelte

@@ -9,7 +9,7 @@
 	import { EditorState } from '@codemirror/state';
 	import { EditorView, keymap } from '@codemirror/view';
 	import { svelte } from '@replit/codemirror-lang-svelte';
-	import { svelteTheme } from '@sveltejs/repl/theme';
+	import { theme } from './theme';
 	import { basicSetup } from 'codemirror';
 	import { autocomplete_for_svelte } from '@sveltejs/site-kit/codemirror';
 	import type { Diagnostic } from '@codemirror/lint';
@@ -18,11 +18,12 @@
 
 	interface Props {
 		workspace: Workspace;
-		onchange: (file: File, contents: string) => void;
+		readonly?: boolean;
+		onchange?: (file: File, contents: string) => void;
 		autocomplete_filter?: (file: File) => boolean;
 	}
 
-	let { workspace, onchange, autocomplete_filter = () => true }: Props = $props();
+	let { workspace, readonly = false, onchange, autocomplete_filter = () => true }: Props = $props();
 
 	let container: HTMLDivElement;
 
@@ -39,7 +40,7 @@
 		EditorState.tabSize.of(2),
 		keymap.of([{ key: 'Tab', run: acceptCompletion }, indentWithTab]),
 		indentUnit.of('\t'),
-		svelteTheme
+		theme
 	];
 
 	let installed_vim = false;
@@ -108,7 +109,12 @@
 
 				state = EditorState.create({
 					doc: file.contents,
-					extensions: lang ? [...extensions, ...lang] : extensions
+					extensions: [
+						...extensions,
+						...(lang || []),
+						EditorState.readOnly.of(readonly),
+						EditorView.editable.of(!readonly)
+					]
 				});
 
 				editor_states.set(file.name, state);
@@ -146,7 +152,7 @@
 				editor_view.update([transaction]);
 
 				if (transaction.docChanged && workspace.selected_file) {
-					onchange(workspace.selected_file, editor_view.state.doc.toString());
+					onchange?.(workspace.selected_file, editor_view.state.doc.toString());
 
 					// keep `editor_states` updated so that undo/redo history is preserved for files independently
 					editor_states.set(workspace.selected_file.name, editor_view.state);
@@ -164,12 +170,18 @@
 	});
 
 	$effect(() => {
-		if (!editor_view || !workspace.selected_name) return;
+		// TODO we end up back here when we edit inside this component,
+		// which is... fine but would be nice to avoid
+		update_files(workspace.files);
+	});
+
+	$effect(() => {
+		if (!workspace.selected_name) return;
 
 		const diagnostics: Diagnostic[] = [];
 
-		const error = workspace.diagnostics[workspace.selected_name]?.error;
-		const current_warnings = workspace.diagnostics[workspace.selected_name]?.warnings ?? [];
+		const error = workspace.compiled[workspace.selected_name]?.error;
+		const current_warnings = workspace.compiled[workspace.selected_name]?.result?.warnings ?? [];
 
 		if (error) {
 			diagnostics.push({