merge

Author: Rich-Harris

.changeset/dry-mails-return.md

@@ -71,6 +71,18 @@ The user of this component has the same flexibility to use a mixture of objects,
 </Button>
 ```
 
+Svelte also exposes the `ClassValue` type, which is the type of value that the `class` attribute on elements accept. This is useful if you want to use a type-safe class name in component props:
+
+```svelte
+<script lang="ts">
+	import type { ClassValue } from 'svelte/elements';
+
+	const props: { class: ClassValue } = $props();
+</script>
+
+<div class={['original', props.class]}>...</div>
+```
+
 ## The `class:` directive
 
 Prior to Svelte 5.16, the `class:` directive was the most convenient way to set classes on elements conditionally.

.changeset/lemon-llamas-reflect.md

@@ -1,5 +1,31 @@
 # svelte
 
+## 5.19.0
+
+### Minor Changes
+
+- feat: Expose `ClassValue` from `svelte/elements` ([#15035](https://github.com/sveltejs/svelte/pull/15035))
+
+### Patch Changes
+
+- fix: create fewer deriveds for concatenated strings ([#15041](https://github.com/sveltejs/svelte/pull/15041))
+
+- fix: correctly parse leading comments in function binding ([#15020](https://github.com/sveltejs/svelte/pull/15020))
+
+## 5.18.0
+
+### Minor Changes
+
+- feat: allow `<template>` elements to contain any child ([#15007](https://github.com/sveltejs/svelte/pull/15007))
+
+### Patch Changes
+
+- fix: ensure resume effects are scheduled in topological order ([#15012](https://github.com/sveltejs/svelte/pull/15012))
+
+- fix: bump esrap ([#15015](https://github.com/sveltejs/svelte/pull/15015))
+
+- fix: remove listener on `bind_current_time` teardown ([#15013](https://github.com/sveltejs/svelte/pull/15013))
+
 ## 5.17.5
 
 ### Patch Changes

.changeset/sour-pots-wonder.md

@@ -741,7 +741,7 @@ export interface HTMLAttributes<T extends EventTarget> extends AriaAttributes, D
 	accesskey?: string | undefined | null;
 	autocapitalize?: 'characters' | 'off' | 'on' | 'none' | 'sentences' | 'words' | undefined | null;
 	autofocus?: boolean | undefined | null;
-	class?: string | import('clsx').ClassArray | import('clsx').ClassDictionary | undefined | null;
+	class?: ClassValue | undefined | null;
 	contenteditable?: Booleanish | 'inherit' | 'plaintext-only' | undefined | null;
 	contextmenu?: string | undefined | null;
 	dir?: 'ltr' | 'rtl' | 'auto' | undefined | null;
@@ -1522,7 +1522,7 @@ export interface SvelteWindowAttributes extends HTMLAttributes<Window> {
 export interface SVGAttributes<T extends EventTarget> extends AriaAttributes, DOMAttributes<T> {
 	// Attributes which also defined in HTMLAttributes
 	className?: string | undefined | null;
-	class?: string | import('clsx').ClassArray | import('clsx').ClassDictionary | undefined | null;
+	class?: ClassValue | undefined | null;
 	color?: string | undefined | null;
 	height?: number | string | undefined | null;
 	id?: string | undefined | null;
@@ -2059,3 +2059,5 @@ export interface SvelteHTMLElements {
 
 	[name: string]: { [name: string]: any };
 }
+
+export type ClassValue = string | import('clsx').ClassArray | import('clsx').ClassDictionary;

documentation/docs/03-template-syntax/18-class.md

@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.17.5",
+  "version": "5.19.0",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
@@ -155,7 +155,7 @@
     "axobject-query": "^4.1.0",
     "clsx": "^2.1.1",
     "esm-env": "^1.2.1",
-    "esrap": "^1.4.2",
+    "esrap": "^1.4.3",
     "is-reference": "^3.0.3",
     "locate-character": "^3.0.0",
     "magic-string": "^0.30.11",

packages/svelte/CHANGELOG.md

@@ -38,6 +38,10 @@ export default function read_expression(parser, opening_token, disallow_loose) {
 
 		let num_parens = 0;
 
+		if (node.leadingComments !== undefined && node.leadingComments.length > 0) {
+			parser.index = node.leadingComments.at(-1).end;
+		}
+
 		for (let i = parser.index; i < /** @type {number} */ (node.start); i += 1) {
 			if (parser.template[i] === '(') num_parens += 1;
 		}

packages/svelte/elements.d.ts

@@ -132,8 +132,19 @@ export function BindDirective(node, context) {
 		}
 
 		let i = /** @type {number} */ (node.expression.start);
+		let leading_comments_start = /**@type {any}*/ (node.expression.leadingComments?.at(0))?.start;
+		let leading_comments_end = /**@type {any}*/ (node.expression.leadingComments?.at(-1))?.end;
 		while (context.state.analysis.source[--i] !== '{') {
-			if (context.state.analysis.source[i] === '(') {
+			if (
+				context.state.analysis.source[i] === '(' &&
+				// if the parenthesis is in a leading comment we don't need to throw the error
+				!(
+					leading_comments_start &&
+					leading_comments_end &&
+					i <= leading_comments_end &&
+					i >= leading_comments_start
+				)
+			) {
 				e.bind_invalid_parens(node, node.name);
 			}
 		}

packages/svelte/package.json

@@ -4,5 +4,5 @@
  * The current version, as set in package.json.
  * @type {string}
  */
-export const VERSION = '5.17.5';
+export const VERSION = '5.19.0';
 export const PUBLIC_VERSION = '5';

packages/svelte/src/compiler/phases/1-parse/read/expression.js

@@ -0,0 +1,10 @@
+<script>
+	let value = '';
+</script>
+
+<input bind:value={
+	/** ( */
+	() => value,
+	(v) => value = v.toLowerCase()
+}
+/>