svelte 5.46.0 → 5.46.1

package/package.json

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

package/src/compiler/phases/3-transform/client/transform-client.js

@@ -519,14 +519,9 @@ export function client_component(analysis, options) {
 
 	if (options.hmr) {
 		const id = b.id(analysis.name);
-		const HMR = b.id('$.HMR');
-
-		const existing = b.member(id, HMR, true);
-		const incoming = b.member(b.id('module.default'), HMR, true);
 
 		const accept_fn_body = [
-			b.stmt(b.assignment('=', b.member(incoming, 'source'), b.member(existing, 'source'))),
-			b.stmt(b.call('$.set', b.member(existing, 'source'), b.member(incoming, 'original')))
+			b.stmt(b.call(b.member(b.member(id, b.id('$.HMR'), true), 'update'), b.id('module.default')))
 		];
 
 		if (analysis.css.hash) {
@@ -535,8 +530,7 @@ export function client_component(analysis, options) {
 		}
 
 		const hmr = b.block([
-			b.stmt(b.assignment('=', id, b.call('$.hmr', id, b.thunk(b.member(existing, 'source'))))),
-
+			b.stmt(b.assignment('=', id, b.call('$.hmr', id))),
 			b.stmt(b.call('import.meta.hot.accept', b.arrow([b.id('module')], b.block(accept_fn_body))))
 		]);
 

package/src/compiler/phases/3-transform/client/visitors/RegularElement.js

@@ -336,7 +336,9 @@ export function RegularElement(node, context) {
 		trimmed.every(
 			(node) =>
 				node.type === 'Text' ||
-				(!node.metadata.expression.has_state && !node.metadata.expression.has_await)
+				(!node.metadata.expression.has_state &&
+					!node.metadata.expression.has_await &&
+					!node.metadata.expression.has_blockers())
 		) &&
 		trimmed.some((node) => node.type === 'ExpressionTag');
 

package/src/compiler/phases/3-transform/client/visitors/shared/utils.js

@@ -134,7 +134,7 @@ export function build_template_chunk(
 
 			const evaluated = state.scope.evaluate(value);
 
-			has_await ||= node.metadata.expression.has_await;
+			has_await ||= node.metadata.expression.has_await || node.metadata.expression.has_blockers();
 			has_state ||= has_await || (node.metadata.expression.has_state && !evaluated.is_known);
 
 			if (values.length === 1) {

package/src/internal/client/dev/hmr.js

@@ -1,23 +1,25 @@
-/** @import { Source, Effect, TemplateNode } from '#client' */
+/** @import { Effect, TemplateNode } from '#client' */
 import { FILENAME, HMR } from '../../../constants.js';
 import { EFFECT_TRANSPARENT } from '#client/constants';
 import { hydrate_node, hydrating } from '../dom/hydration.js';
 import { block, branch, destroy_effect } from '../reactivity/effects.js';
-import { source } from '../reactivity/sources.js';
+import { set, source } from '../reactivity/sources.js';
 import { set_should_intro } from '../render.js';
 import { get } from '../runtime.js';
 
 /**
  * @template {(anchor: Comment, props: any) => any} Component
- * @param {Component} original
- * @param {() => Source<Component>} get_source
+ * @param {Component} fn
  */
-export function hmr(original, get_source) {
+export function hmr(fn) {
+	const current = source(fn);
+
 	/**
 	 * @param {TemplateNode} anchor
 	 * @param {any} props
 	 */
 	function wrapper(anchor, props) {
+		let component = {};
 		let instance = {};
 
 		/** @type {Effect} */
@@ -26,8 +28,9 @@ export function hmr(original, get_source) {
 		let ran = false;
 
 		block(() => {
-			const source = get_source();
-			const component = get(source);
+			if (component === (component = get(current))) {
+				return;
+			}
 
 			if (effect) {
 				// @ts-ignore
@@ -62,16 +65,24 @@ export function hmr(original, get_source) {
 	}
 
 	// @ts-expect-error
-	wrapper[FILENAME] = original[FILENAME];
+	wrapper[FILENAME] = fn[FILENAME];
 
 	// @ts-ignore
 	wrapper[HMR] = {
-		// When we accept an update, we set the original source to the new component
-		original,
-		// The `get_source` parameter reads `wrapper[HMR].source`, but in the `accept`
-		// function we always replace it with `previous[HMR].source`, which in practice
-		// means we only ever update the original
-		source: source(original)
+		fn,
+		current,
+		update: (/** @type {any} */ incoming) => {
+			// This logic ensures that the first version of the component is the one
+			// whose update function and therefore block effect is preserved across updates.
+			// If we don't do this dance and instead just use `incoming` as the new component
+			// and then update, we'll create an ever-growing stack of block effects.
+
+			// Trigger the original block effect
+			set(wrapper[HMR].current, incoming[HMR].fn);
+
+			// Replace the incoming source with the original one
+			incoming[HMR].current = wrapper[HMR].current;
+		}
 	};
 
 	return wrapper;

package/src/version.js

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

package/types/index.d.ts

@@ -2810,7 +2810,7 @@ declare module 'svelte/events' {
 	export function on<Type extends keyof WindowEventMap>(
 		window: Window,
 		type: Type,
-		handler: (this: Window, event: WindowEventMap[Type]) => any,
+		handler: (this: Window, event: WindowEventMap[Type] & { currentTarget: Window }) => any,
 		options?: AddEventListenerOptions | undefined
 	): () => void;
 	/**
@@ -2821,7 +2821,7 @@ declare module 'svelte/events' {
 	export function on<Type extends keyof DocumentEventMap>(
 		document: Document,
 		type: Type,
-		handler: (this: Document, event: DocumentEventMap[Type]) => any,
+		handler: (this: Document, event: DocumentEventMap[Type] & { currentTarget: Document }) => any,
 		options?: AddEventListenerOptions | undefined
 	): () => void;
 	/**
@@ -2832,7 +2832,7 @@ declare module 'svelte/events' {
 	export function on<Element extends HTMLElement, Type extends keyof HTMLElementEventMap>(
 		element: Element,
 		type: Type,
-		handler: (this: Element, event: HTMLElementEventMap[Type]) => any,
+		handler: (this: Element, event: HTMLElementEventMap[Type] & { currentTarget: Element }) => any,
 		options?: AddEventListenerOptions | undefined
 	): () => void;
 	/**
@@ -2843,7 +2843,7 @@ declare module 'svelte/events' {
 	export function on<Element extends MediaQueryList, Type extends keyof MediaQueryListEventMap>(
 		element: Element,
 		type: Type,
-		handler: (this: Element, event: MediaQueryListEventMap[Type]) => any,
+		handler: (this: Element, event: MediaQueryListEventMap[Type] & { currentTarget: Element }) => any,
 		options?: AddEventListenerOptions | undefined
 	): () => void;
 	/**