Merge branch 'main' into order-contributors

Author: Rich-Harris

apps/svelte.dev/content/blog/2024-04-01-whats-new-in-svelte-april-2024.md

@@ -28,7 +28,7 @@ Also, this month, a ton of new features have been merged into Svelte 5 to make i
 - `adapter-vercel` now has Skew Protection which ensures that the client and server stay in sync for any particular deployment (**@sveltejs/adapter-vercel@5.2.0**, [Docs](https://vercel.com/docs/deployments/skew-protection), [#11987](https://github.com/sveltejs/kit/pull/11987))
 - `adapter-vercel`'s build output files now include framework metadata - improving observability on the platform (**@sveltejs/adapter-vercel@5.2.0**, [#11800](https://github.com/sveltejs/kit/pull/11800))
 - `adapter-cloudflare` and `adapter-cloudflare-workers` now implement `adapter.emulate` which allows the adapter to emulate the Cloudflare platform during dev and preview ([#11732](https://github.com/sveltejs/kit/pull/11732))
-- **Breaking:** `adapter-node` now shuts down gracefully and supports the new `IDLE_TIMEOUT` and `SHUTDOWN_TIMEOUT` environment variables (**@sveltejs/adapter-node@5.0.1**, [Docs](/docs/kit/adapter-node#Environment-variables-SHUTDOWN-TIMEOUT), [#11653](https://github.com/sveltejs/kit/pull/11653))
+- **Breaking:** `adapter-node` now shuts down gracefully and supports the new `IDLE_TIMEOUT` and `SHUTDOWN_TIMEOUT` environment variables (**@sveltejs/adapter-node@5.0.1**, [Docs](/docs/kit/adapter-node#Environment-variables-SHUTDOWN_TIMEOUT), [#11653](https://github.com/sveltejs/kit/pull/11653))
 - **Breaking:** The default value of `precompress` in `adapter-node` is now `true` - making sites faster by default (**@sveltejs/adapter-node@5.0.0**, [Docs](/docs/kit/adapter-node#Options-precompress), [#11945](https://github.com/sveltejs/kit/pull/11945))
 - Google Cloud is now supported in `adapter-auto` without any additional configuration (**@sveltejs/adapter-auto@3.2.0**, [Docs](/docs/kit/adapter-auto), [#12015](https://github.com/sveltejs/kit/pull/12015))
 

apps/svelte.dev/content/blog/2024-07-01-whats-new-in-svelte-july-2024.md

@@ -24,7 +24,7 @@ Below, you'll find the highlights from the Svelte 5 release notes (now in [Relea
 
 The node and Cloudflare adapters got a few upgrades this month:
 
-- The `BODY_SIZE_LIMIT` environment variable adds unit suffixes support to the adapter-node - making it easier to write and comprehend large byte values (**[email protected]**, [Docs](/docs/kit/adapter-node#Environment-variables-BODYSIZELIMIT), [#11680](https://github.com/sveltejs/kit/pull/11680))
+- The `BODY_SIZE_LIMIT` environment variable adds unit suffixes support to the adapter-node - making it easier to write and comprehend large byte values (**[email protected]**, [Docs](/docs/kit/adapter-node#Environment-variables-BODY_SIZE_LIMIT), [#11680](https://github.com/sveltejs/kit/pull/11680))
 - Node servers can now listen to the `sveltekit:shutdown` event (replacing the more abrupt `exit`) that is emitted after the HTTP server has closed all connections (**[email protected]**, [Docs](/docs/kit/adapter-node#Graceful-shutdown), [#12153](https://github.com/sveltejs/kit/pull/12153))
 - The Cloudflare adapter will now only throw a `_routes.json` error when the file exists but there are no configured routes in svelte.config (**[email protected]**, [#12360](https://github.com/sveltejs/kit/pull/12360))
 

apps/svelte.dev/content/docs/kit/25-build-and-deploy/40-adapter-node.md

@@ -187,7 +187,7 @@ By default `adapter-node` gracefully shuts down the HTTP server when a `SIGTERM`
 
 1. reject new requests ([`server.close`](https://nodejs.org/api/http.html#serverclosecallback))
 2. wait for requests that have already been made but not received a response yet to finish and close connections once they become idle ([`server.closeIdleConnections`](https://nodejs.org/api/http.html#servercloseidleconnections))
-3. and finally, close any remaining connections that are still active after [`SHUTDOWN_TIMEOUT`](#Environment-variables-SHUTDOWN-TIMEOUT) seconds. ([`server.closeAllConnections`](https://nodejs.org/api/http.html#servercloseallconnections))
+3. and finally, close any remaining connections that are still active after [`SHUTDOWN_TIMEOUT`](#Environment-variables-SHUTDOWN_TIMEOUT) seconds. ([`server.closeAllConnections`](https://nodejs.org/api/http.html#servercloseallconnections))
 
 > [!NOTE] If you want to customize this behaviour you can use a [custom server](#Custom-server).
 
@@ -205,7 +205,7 @@ The parameter `reason` has one of the following values:
 
 - `SIGINT` - shutdown was triggered by a `SIGINT` signal
 - `SIGTERM` - shutdown was triggered by a `SIGTERM` signal
-- `IDLE` - shutdown was triggered by [`IDLE_TIMEOUT`](#Environment-variables-IDLE-TIMEOUT)
+- `IDLE` - shutdown was triggered by [`IDLE_TIMEOUT`](#Environment-variables-IDLE_TIMEOUT)
 
 ## Socket activation
 
@@ -215,7 +215,7 @@ Most Linux operating systems today use a modern process manager called systemd t
 
 To take advantage of socket activation follow these steps.
 
-1. Run your app as a [systemd service](https://www.freedesktop.org/software/systemd/man/latest/systemd.service.html). It can either run directly on the host system or inside a container (using Docker or a systemd portable service for example). If you additionally pass an [`IDLE_TIMEOUT`](#Environment-variables-IDLE-TIMEOUT) environment variable to your app it will gracefully shutdown if there are no requests for `IDLE_TIMEOUT` seconds. systemd will automatically start your app again when new requests are coming in.
+1. Run your app as a [systemd service](https://www.freedesktop.org/software/systemd/man/latest/systemd.service.html). It can either run directly on the host system or inside a container (using Docker or a systemd portable service for example). If you additionally pass an [`IDLE_TIMEOUT`](#Environment-variables-IDLE_TIMEOUT) environment variable to your app it will gracefully shutdown if there are no requests for `IDLE_TIMEOUT` seconds. systemd will automatically start your app again when new requests are coming in.
 
 ```ini
 /// file: /etc/systemd/system/myapp.service

apps/svelte.dev/src/lib/icons/theme-dark.svg

@@ -206,7 +206,7 @@
 
 	<div class="buttons">
 		<button
-			class="raised icon"
+			class="raised icon tooltip"
 			disabled={saving || !user}
 			onclick={() => fork(false)}
 			aria-label={user ? 'fork' : 'log in to fork'}
@@ -219,7 +219,7 @@
 		</button>
 
 		<button
-			class="raised icon"
+			class="raised icon tooltip"
 			disabled={saving || !user}
 			onclick={save}
 			aria-label={user
@@ -267,26 +267,6 @@
 		background-size: 1.8rem;
 		z-index: 999;
 
-		&[aria-label]:hover::before {
-			content: '';
-			width: 1rem;
-			height: 1rem;
-			position: absolute;
-			background: var(--sk-text-3);
-			top: calc(100% + 0.5rem);
-			rotate: 45deg;
-		}
-
-		&[aria-label]:hover::after {
-			content: attr(aria-label);
-			position: absolute;
-			top: calc(100% + 1rem);
-			background: var(--sk-text-3);
-			color: var(--sk-back-4);
-			padding: 0.5em 0.5em;
-			border-radius: var(--sk-border-radius);
-		}
-
 		&.login {
 			width: auto;
 			background-image: url($lib/icons/user-light.svg);

apps/svelte.dev/src/lib/icons/theme-light.svg

@@ -37,7 +37,11 @@
 		<source srcset={MachineMobile.sources.avif} width="2208" height="936" type="image/avif" />
 		<source srcset={MachineMobile.sources.webp} width="2208" height="936" type="image/webp" />
 		<source srcset={MachineMobile.sources.png} width="2208" height="936" type="image/png" />
-		<img alt="The Svelte compiler packaging up your component code" src={MachineMobile.img.src} />
+		<img
+			alt="The Svelte compiler packaging up your component code"
+			src={MachineMobile.img.src}
+			fetchpriority="high"
+		/>
 	</picture>
 </div>
 

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

@@ -52,14 +52,25 @@
 	}}
 />
 
+<!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
 	class="container"
 	bind:this={container}
-	onfocusin={() => {
+	onpointerdown={() => {
+		workspace.enable_tab_indent();
+	}}
+	onkeydown={(e) => {
+		if (e.key !== 'Tab') {
+			workspace.enable_tab_indent();
+		}
+	}}
+	onfocusin={(e) => {
 		clearTimeout(remove_focus_timeout);
 		preserve_editor_focus = true;
 	}}
 	onfocusout={() => {
+		workspace.disable_tab_indent();
+
 		// Heuristic: user did refocus themmselves if iframe_took_focus
 		// doesn't happen in the next few miliseconds. Needed
 		// because else navigations inside the iframe refocus the editor.

apps/svelte.dev/src/routes/_home/Hero.svelte

@@ -1,5 +1,5 @@
 import type { CompileError, CompileOptions, CompileResult } from 'svelte/compiler';
-import { EditorState } from '@codemirror/state';
+import { Compartment, EditorState } from '@codemirror/state';
 import { compile_file } from './compile-worker';
 import { BROWSER } from 'esm-env';
 import { basicSetup, EditorView } from 'codemirror';
@@ -51,10 +51,12 @@ function file_type(file: Item) {
 	return file.name.split('.').pop();
 }
 
+const tab_behaviour = new Compartment();
+
 const default_extensions = [
 	basicSetup,
 	EditorState.tabSize.of(2),
-	keymap.of([{ key: 'Tab', run: acceptCompletion }, indentWithTab]),
+	tab_behaviour.of(keymap.of([{ key: 'Tab', run: acceptCompletion }])),
 	indentUnit.of('\t'),
 	theme
 ];
@@ -209,6 +211,20 @@ export class Workspace {
 		return item;
 	}
 
+	disable_tab_indent() {
+		this.#view?.dispatch({
+			effects: tab_behaviour.reconfigure(keymap.of([{ key: 'Tab', run: acceptCompletion }]))
+		});
+	}
+
+	enable_tab_indent() {
+		this.#view?.dispatch({
+			effects: tab_behaviour.reconfigure(
+				keymap.of([{ key: 'Tab', run: acceptCompletion }, indentWithTab])
+			)
+		});
+	}
+
 	focus() {
 		setTimeout(() => {
 			this.#view?.focus();

packages/editor/src/lib/Editor.svelte

@@ -7,10 +7,10 @@
 </script>
 
 <button
-	class="raised"
+	class="raised tooltip-left"
 	disabled={!can_migrate}
 	onclick={migrate}
-	title="Migrate this component towards the new syntax"
+	aria-label="Convert syntax from Svelte 4 to 5 if possible"
 >
 	migrate
 </button>