fix: allow `@debug` tags to reference awaited variables (#18138)

Fixes #18137

.changeset/small-tools-walk.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: allow `@debug` tags to reference awaited variables

packages/svelte/src/compiler/phases/3-transform/client/visitors/DebugTag.js

@@ -8,6 +8,10 @@ import * as b from '#compiler/builders';
  * @param {ComponentContext} context
  */
 export function DebugTag(node, context) {
+	const blockers = node.identifiers
+		.map((identifier) => context.state.scope.get(identifier.name)?.blocker)
+		.filter((blocker) => blocker != null);
+
 	const object = b.object(
 		node.identifiers.map((identifier) => {
 			const visited = b.call('$.snapshot', /** @type {Expression} */ (context.visit(identifier)));
@@ -20,9 +24,11 @@ export function DebugTag(node, context) {
 		})
 	);
 
-	const call = b.call('console.log', object);
+	const args = [b.thunk(b.block([b.stmt(b.call('console.log', object)), b.debugger]))];
 
-	context.state.init.push(
+	if (blockers.length > 0) {
-		b.stmt(b.call('$.template_effect', b.thunk(b.block([b.stmt(call), b.debugger]))))
+		args.push(b.array([]), b.array([]), b.array(blockers));
-	);
+	}
+
+	context.state.init.push(b.stmt(b.call('$.template_effect', ...args)));
 }

packages/svelte/src/compiler/phases/3-transform/server/visitors/DebugTag.js

@@ -2,23 +2,34 @@
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types.js' */
 import * as b from '#compiler/builders';
+import { create_child_block } from './shared/utils.js';
 
 /**
  * @param {AST.DebugTag} node
  * @param {ComponentContext} context
  */
 export function DebugTag(node, context) {
+	const blockers = node.identifiers
+		.map((identifier) => context.state.scope.get(identifier.name)?.blocker)
+		.filter((blocker) => blocker != null);
+
 	context.state.template.push(
-		b.stmt(
+		...create_child_block(
-			b.call(
+			[
-				'console.log',
+				b.stmt(
-				b.object(
+					b.call(
-					node.identifiers.map((identifier) =>
+						'console.log',
-						b.prop('init', identifier, /** @type {Expression} */ (context.visit(identifier)))
+						b.object(
+							node.identifiers.map((identifier) =>
+								b.prop('init', identifier, /** @type {Expression} */ (context.visit(identifier)))
+							)
+						)
 					)
-				)
+				),
-			)
+				b.debugger
-		),
+			],
-		b.debugger
+			b.array(blockers),
+			false
+		)
 	);
 }

packages/svelte/tests/runtime-runes/samples/async-debug-awaited-expression/_config.js

@@ -0,0 +1,18 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true
+	},
+	mode: ['client', 'async-server'],
+
+	async test({ assert, logs }) {
+		await tick();
+
+		assert.deepEqual(logs, [{ data: 'works' }]);
+	},
+	test_ssr({ assert, logs }) {
+		assert.deepEqual(logs, [{ data: 'works' }]);
+	}
+});

packages/svelte/tests/runtime-runes/samples/async-debug-awaited-expression/main.svelte

@@ -0,0 +1,4 @@
+<svelte:boundary>
+	{@const data = await Promise.resolve("works")}
+	{@debug data}
+</svelte:boundary>