Merge branch 'main' into branch-manager

Author: Rich-Harris

.changeset/selfish-pets-teach.md

@@ -166,6 +166,21 @@ To take a static snapshot of a deeply reactive `$state` proxy, use `$state.snaps
 
 This is handy when you want to pass some state to an external library or API that doesn't expect a proxy, such as `structuredClone`.
 
+## `$state.eager`
+
+When state changes, it may not be reflected in the UI immediately if it is used by an `await` expression, because [updates are synchronized](await-expressions#Synchronized-updates).
+
+In some cases, you may want to update the UI as soon as the state changes. For example, you might want to update a navigation bar when the user clicks on a link, so that they get visual feedback while waiting for the new page to load. To do this, use `$state.eager(value)`:
+
+```svelte
+<nav>
+	<a href="/" aria-current={$state.eager(pathname) === '/' ? 'page' : null}>home</a>
+	<a href="/about" aria-current={$state.eager(pathname) === '/about' ? 'page' : null}>about</a>
+</nav>
+```
+
+Use this feature sparingly, and only to provide feedback in response to user action — in general, allowing Svelte to coordinate updates will provide a better user experience.
+
 ## Passing state into functions
 
 JavaScript is a _pass-by-value_ language — when you call a function, the arguments are the _values_ rather than the _variables_. In other words:

documentation/docs/02-runes/02-$state.md

@@ -199,7 +199,7 @@ Cyclical dependency detected: %cycle%
 ### const_tag_invalid_reference
 
 ```
-The `{@const %name% = ...}` declaration is not available in this snippet 
+The `{@const %name% = ...}` declaration is not available in this snippet
 ```
 
 The following is an error:
@@ -453,6 +453,12 @@ This turned out to be buggy and unpredictable, particularly when working with de
 {/each}
 ```
 
+### each_key_without_as
+
+```
+An `{#each ...}` block without an `as` clause cannot have a key
+```
+
 ### effect_invalid_placement
 
 ```

documentation/docs/98-reference/.generated/compile-errors.md

@@ -1,5 +1,19 @@
 # svelte
 
+## 5.41.0
+
+### Minor Changes
+
+- feat: add `$state.eager(value)` rune ([#16849](https://github.com/sveltejs/svelte/pull/16849))
+
+### Patch Changes
+
+- fix: preserve `<select>` state while focused ([#16958](https://github.com/sveltejs/svelte/pull/16958))
+
+- chore: run boundary async effects in the context of the current batch ([#16968](https://github.com/sveltejs/svelte/pull/16968))
+
+- fix: error if `each` block has `key` but no `as` clause ([#16966](https://github.com/sveltejs/svelte/pull/16966))
+
 ## 5.40.2
 
 ### Patch Changes

packages/svelte/CHANGELOG.md

@@ -126,7 +126,7 @@
 
 ## const_tag_invalid_reference
 
-> The `{@const %name% = ...}` declaration is not available in this snippet 
+> The `{@const %name% = ...}` declaration is not available in this snippet
 
 The following is an error:
 
@@ -179,6 +179,10 @@ The same applies to components:
 
 > `%type%` name cannot be empty
 
+## each_key_without_as
+
+> An `{#each ...}` block without an `as` clause cannot have a key
+
 ## element_invalid_closing_tag
 
 > `</%name%>` attempted to close an element that was not open

packages/svelte/messages/compile-errors/template.md

@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.40.2",
+  "version": "5.41.0",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {

packages/svelte/package.json

@@ -95,6 +95,18 @@ declare namespace $state {
 								: never
 							: never;
 
+	/**
+	 * Returns the latest `value`, even if the rest of the UI is suspending
+	 * while async work (such as data loading) completes.
+	 *
+	 * ```svelte
+	 * <nav>
+	 *   <a href="/" aria-current={$state.eager(pathname) === '/' ? 'page' : null}>home</a>
+	 *   <a href="/about" aria-current={$state.eager(pathname) === '/about' ? 'page' : null}>about</a>
+	 * </nav>
+	 * ```
+	 */
+	export function eager<T>(value: T): T;
 	/**
 	 * Declares state that is _not_ made deeply reactive — instead of mutating it,
 	 * you must reassign it.

packages/svelte/src/ambient.d.ts

@@ -986,13 +986,13 @@ export function const_tag_invalid_placement(node) {
 }
 
 /**
- * The `{@const %name% = ...}` declaration is not available in this snippet 
+ * The `{@const %name% = ...}` declaration is not available in this snippet
  * @param {null | number | NodeLike} node
  * @param {string} name
  * @returns {never}
  */
 export function const_tag_invalid_reference(node, name) {
-	e(node, 'const_tag_invalid_reference', `The \`{@const ${name} = ...}\` declaration is not available in this snippet \nhttps://svelte.dev/e/const_tag_invalid_reference`);
+	e(node, 'const_tag_invalid_reference', `The \`{@const ${name} = ...}\` declaration is not available in this snippet\nhttps://svelte.dev/e/const_tag_invalid_reference`);
 }
 
 /**
@@ -1023,6 +1023,15 @@ export function directive_missing_name(node, type) {
 	e(node, 'directive_missing_name', `\`${type}\` name cannot be empty\nhttps://svelte.dev/e/directive_missing_name`);
 }
 
+/**
+ * An `{#each ...}` block without an `as` clause cannot have a key
+ * @param {null | number | NodeLike} node
+ * @returns {never}
+ */
+export function each_key_without_as(node) {
+	e(node, 'each_key_without_as', `An \`{#each ...}\` block without an \`as\` clause cannot have a key\nhttps://svelte.dev/e/each_key_without_as`);
+}
+
 /**
  * `</%name%>` attempted to close an element that was not open
  * @param {null | number | NodeLike} node

packages/svelte/src/compiler/errors.js

@@ -226,6 +226,13 @@ export function CallExpression(node, context) {
 			break;
 		}
 
+		case '$state.eager':
+			if (node.arguments.length !== 1) {
+				e.rune_invalid_arguments_length(node, rune, 'exactly one argument');
+			}
+
+			break;
+
 		case '$state.snapshot':
 			if (node.arguments.length !== 1) {
 				e.rune_invalid_arguments_length(node, rune, 'exactly one argument');

packages/svelte/src/compiler/phases/2-analyze/visitors/CallExpression.js

@@ -28,6 +28,10 @@ export function EachBlock(node, context) {
 			node.key.type !== 'Identifier' || !node.index || node.key.name !== node.index;
 	}
 
+	if (node.metadata.keyed && !node.context) {
+		e.each_key_without_as(node);
+	}
+
 	// evaluate expression in parent scope
 	context.visit(node.expression, {
 		...context.state,