Merge branch 'main' into pkg-pr-new-version

Author: Rich-Harris

apps/svelte.dev/content/docs/svelte/06-runtime/03-lifecycle-hooks.md

@@ -84,9 +84,9 @@ While there's no "after update" hook, you can use `tick` to ensure that the UI i
 
 	$effect.pre(() => {
 		console.log('the component is about to update');
-		tick().then(
+		tick().then(() => {
 				console.log('the component just updated');
-		);
+		});
 	});
 </script>
 ```

apps/svelte.dev/src/lib/icons/chevron.svg

@@ -129,7 +129,7 @@
 					background-size: 2rem;
 					top: 0.4rem;
 					right: 0.2rem;
-					rotate: -90deg;
+					rotate: 0deg;
 					transition: rotate 0.2s;
 					transition: rotate 0.2s;
 				}
@@ -153,7 +153,7 @@
 
 			label:has(:checked) {
 				&::after {
-					rotate: 90deg;
+					rotate: 180deg;
 				}
 
 				/* TODO remove :global once https://github.com/sveltejs/svelte/issues/13779 is fixed */

apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte

@@ -1,41 +1,33 @@
 <!-- @component
      A context menu for the tutorial's file tree
 -->
-<script module>
-	import { writable } from 'svelte/store';
+<script module lang="ts">
+	import type { MenuItem } from '$lib/tutorial';
 
-	/**
-	 * @type {import("svelte/store").Writable<{x: number; y: number; items: import('$lib/tutorial').MenuItem[]} | null>}
-	 */
-	let menu_items = writable(null);
+	let menu_items: { x: number; y: number; items: MenuItem[] } | null = $state(null);
 
-	/**
-	 * @param {number} x
-	 * @param {number} y
-	 * @param {import('$lib/tutorial').MenuItem[]} items
-	 */
-	export function open(x, y, items) {
+	export function open(x: number, y: number, items: MenuItem[]) {
 		if (items.length > 0) {
-			menu_items.set({ x, y, items });
+			menu_items = { x, y, items };
 		}
 	}
 </script>
 
-{#if $menu_items}
-	<nav style="position: fixed; z-index: 5; top:{$menu_items.y}px; left:{$menu_items.x}px">
+{#if menu_items}
+	<nav style="position: fixed; z-index: 5; top:{menu_items.y}px; left:{menu_items.x}px">
 		<div class="context-menu">
 			<ul>
-				{#each $menu_items.items as item}
+				{#each menu_items.items as item}
 					<li>
-						<button on:click={item.fn}>{item.label}</button>
+						<button onclick={item.fn}>{item.label}</button>
 					</li>
 				{/each}
 			</ul>
 		</div>
 	</nav>
 {/if}
 
-<svelte:window on:click={() => menu_items.set(null)} />
+<svelte:window onclick={() => (menu_items = null)} />
 
 <style>
 	.context-menu {

apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/ContextMenu.svelte

@@ -2,6 +2,7 @@
 	import { tick } from 'svelte';
 	import { open } from './ContextMenu.svelte';
 	import type { MenuItem } from '$lib/tutorial';
+	import { forcefocus } from '@sveltejs/site-kit/actions';
 
 	interface Props {
 		basename?: string;
@@ -63,7 +64,7 @@
 		<!-- svelte-ignore a11y_autofocus -->
 		<input
 			type="text"
-			autofocus
+			use:forcefocus
 			autocomplete="off"
 			spellcheck="false"
 			value={basename}
@@ -135,7 +136,7 @@
 	}
 
 	input {
-		background: var(--sk-bg-1);
+		background: var(--sk-bg-3);
 		margin: 0 0.5rem 0 calc(0.5rem + var(--inset));
 		border: 2px solid transparent;
 		padding: 0 0.5rem;

apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Item.svelte

@@ -105,26 +105,20 @@
 		display: grid;
 		grid-template-columns: 4rem 1fr;
 		grid-gap: 1rem;
-		padding: 1rem 0;
-		font: var(--sk-font-mono);
+		padding: 0.4rem 0;
 	}
 
 	.fake * {
-		color: #ccc;
+		color: var(--sk-fg-4);
+		font: var(--sk-font-mono);
 	}
 
 	.fake-gutter {
 		text-align: right;
-		padding-right: 3px;
+		padding-right: 0.7rem;
 	}
 
 	.fake-content {
 		padding: 0 1rem;
 	}
-
-	@media (prefers-color-scheme: dark) {
-		.fake * {
-			color: #666;
-		}
-	}
 </style>

packages/editor/src/lib/Editor.svelte

@@ -1,4 +1,4 @@
-import type { CompileError, CompileOptions, CompileResult } from 'svelte/compiler';
+import type { CompileError, CompileResult } from 'svelte/compiler';
 import { Compartment, EditorState } from '@codemirror/state';
 import { compile_file } from './compile-worker';
 import { BROWSER } from 'esm-env';
@@ -77,7 +77,7 @@ const default_extensions = [
 // 	extensions.push(vim());
 // }
 
-interface ExposedCompilerOptions {
+export interface ExposedCompilerOptions {
 	generate: 'client' | 'server';
 	dev: boolean;
 	modernAst: boolean;
@@ -124,7 +124,10 @@ export class Workspace {
 					span.innerHTML = `${error.message
 						.replace(/&/g, '&')
 						.replace(/</g, '&lt;')
-						.replace(/`(.+?)`/g, `<code>$1</code>`)} <strong>(${error.code})</strong>`;
+						.replace(
+							/`(.+?)`/g,
+							`<code>$1</code>`
+						)} (<a href="/docs/svelte/compiler-errors#${error.code}">${error.code}</a>)`;
 
 					return span;
 				}
@@ -142,7 +145,10 @@ export class Workspace {
 					span.innerHTML = `${warning.message
 						.replace(/&/g, '&amp;')
 						.replace(/</g, '&lt;')
-						.replace(/`(.+?)`/g, `<code>$1</code>`)} <strong>(${warning.code})</strong>`;
+						.replace(
+							/`(.+?)`/g,
+							`<code>$1</code>`
+						)} (<a href="/docs/svelte/compiler-warnings#${warning.code}">${warning.code}</a>)`;
 
 					return span;
 				}
@@ -206,6 +212,8 @@ export class Workspace {
 		if (is_file(item)) {
 			this.#select(item);
 			this.#onreset?.(this.#files);
+
+			this.modified[item.name] = true;
 		}
 
 		return item;
@@ -320,6 +328,11 @@ export class Workspace {
 			this.#select(new_item as File);
 		}
 
+		if (this.modified[previous.name]) {
+			delete this.modified[previous.name];
+			this.modified[name] = true;
+		}
+
 		this.#onreset?.(this.#files);
 	}
 

packages/editor/src/lib/Workspace.svelte.ts

@@ -8,6 +8,8 @@
 	height: 100%;
 
 	&.cm-focused {
+		outline: none;
+
 		.cm-cursor {
 			border-left-color: var(--sk-fg-3);
 		}
@@ -36,6 +38,14 @@
 	}
 
 	.cm-activeLine {
+		background: inherit;
+	}
+
+	.cm-foldGutter {
+		width: 1.4rem;
+	}
+
+	.cm-activeLineGutter {
 		/* this must be translucent, or it will obscure the selection */
 		background: hsl(0, 0%, 0%, 0.04);
 
@@ -44,8 +54,29 @@
 		}
 	}
 
-	.cm-activeLineGutter {
-		background-color: var(--sk-bg-3);
+	.cm-gutterElement {
+		position: relative;
+
+		&:where(:has([title='Fold line']), :has([title='Unfold line']))::after {
+			content: '';
+			position: absolute;
+			width: 100%;
+			right: 0;
+			top: 0;
+			height: 2.4rem;
+			background: url($lib/icons/chevron.svg) no-repeat 50% 50%;
+			background-size: contain;
+			transition: transform 0.2s;
+			cursor: pointer;
+		}
+
+		&:has([title='Unfold line'])::after {
+			transform: rotate(-90deg);
+		}
+
+		span {
+			color: transparent;
+		}
 	}
 
 	.cm-lineNumbers {
@@ -58,10 +89,6 @@
 		}
 	}
 
-	.cm-foldGutter {
-		width: 1rem;
-	}
-
 	.cm-foldPlaceholder {
 		background-color: transparent;
 		border: none;
@@ -83,17 +110,7 @@
 	}
 
 	.cm-content {
-		/* ensure no gap between top of editor and highlighted first/last line */
-		padding-top: 0;
-		padding-bottom: 0;
-
-		.cm-line:first-child {
-			padding-top: 4px;
-		}
-
-		.cm-line:last-child {
-			padding-bottom: 4px;
-		}
+		padding: 0.4rem 0;
 	}
 
 	.cm-line {
@@ -275,21 +292,15 @@
 						padding: 0.2rem 0.4rem;
 					}
 
-					strong {
+					a {
 						font: var(--sk-font-mono);
+						color: inherit;
 						font-size: 1em;
-						opacity: 0.7;
+						/* opacity: 0.7; */
+						text-decoration: underline;
 					}
 				}
 			}
 		}
-
-		&.cm-tooltip-below .cm-tooltip-section {
-			/* top: 1rem; */
-		}
-
-		&.cm-tooltip-above .cm-tooltip-section {
-			/* bottom: 1rem; */
-		}
 	}
 }

packages/editor/src/lib/codemirror.css

@@ -1,5 +1,6 @@
-import type { File } from '../Workspace.svelte';
 import { parseTar } from 'tarparser';
+import type { CompileResult } from 'svelte/compiler';
+import type { ExposedCompilerOptions, File } from '../Workspace.svelte';
 
 // hack for magic-string and Svelte 4 compiler
 // do not put this into a separate module and import it, would be treeshaken in prod
@@ -68,12 +69,10 @@ addEventListener('message', async (event) => {
 	const { id, file, options } = event.data as {
 		id: number;
 		file: File;
-		options: { generate: 'client' | 'server'; dev: boolean };
+		options: ExposedCompilerOptions;
 	};
 
-	const fn = file.name.endsWith('.svelte') ? self.svelte.compile : self.svelte.compileModule;
-
-	if (!fn) {
+	if (!file.name.endsWith('.svelte') && !self.svelte.compileModule) {
 		// .svelte.js file compiled with Svelte 3/4 compiler
 		postMessage({
 			id,
@@ -98,7 +97,22 @@ addEventListener('message', async (event) => {
 	}
 
 	try {
-		const result = fn(file.contents, { ...options, filename: file.name });
+		let result: CompileResult;
+
+		if (file.name.endsWith('.svelte')) {
+			result = self.svelte.compile(file.contents, {
+				generate: options.generate, // TODO do we need to adjust this for 3/4?
+				dev: options.dev,
+				modernAst: options.modernAst,
+				filename: file.name
+			});
+		} else {
+			result = self.svelte.compileModule(file.contents, {
+				generate: options.generate,
+				dev: options.dev,
+				filename: file.name
+			});
+		}
 
 		postMessage({
 			id,