fix: show filename information in legacy_recursive_reactive_block (#13764)

Author: paoloricciuti

.changeset/witty-flies-impress.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: show filename information in `legacy_recursive_reactive_block`

documentation/docs/98-reference/.generated/client-warnings.md

@@ -59,7 +59,7 @@ The `render` function passed to `createRawSnippet` should return HTML for a sing
 ### legacy_recursive_reactive_block
 
 ```
-Detected a migrated `$:` reactive block that both accesses and updates the same reactive value. This may cause recursive updates when converted to an `$effect`.
+Detected a migrated `$:` reactive block in `%filename%` that both accesses and updates the same reactive value. This may cause recursive updates when converted to an `$effect`.
 ```
 
 ### lifecycle_double_unmount

packages/svelte/messages/client-warnings/warnings.md

@@ -38,7 +38,7 @@ The easiest way to log a value as it changes over time is to use the [`$inspect`
 
 ## legacy_recursive_reactive_block
 
-> Detected a migrated `$:` reactive block that both accesses and updates the same reactive value. This may cause recursive updates when converted to an `$effect`.
+> Detected a migrated `$:` reactive block in `%filename%` that both accesses and updates the same reactive value. This may cause recursive updates when converted to an `$effect`.
 
 ## lifecycle_double_unmount
 

packages/svelte/src/internal/client/warnings.js

@@ -100,11 +100,12 @@ export function invalid_raw_snippet_render() {
 }
 
 /**
- * Detected a migrated `$:` reactive block that both accesses and updates the same reactive value. This may cause recursive updates when converted to an `$effect`.
+ * Detected a migrated `$:` reactive block in `%filename%` that both accesses and updates the same reactive value. This may cause recursive updates when converted to an `$effect`.
+ * @param {string} filename
  */
-export function legacy_recursive_reactive_block() {
+export function legacy_recursive_reactive_block(filename) {
 	if (DEV) {
-		console.warn(`%c[svelte] legacy_recursive_reactive_block\n%cDetected a migrated \`$:\` reactive block that both accesses and updates the same reactive value. This may cause recursive updates when converted to an \`$effect\`.`, bold, normal);
+		console.warn(`%c[svelte] legacy_recursive_reactive_block\n%cDetected a migrated \`$:\` reactive block in \`${filename}\` that both accesses and updates the same reactive value. This may cause recursive updates when converted to an \`$effect\`.`, bold, normal);
 	} else {
 		// TODO print a link to the documentation
 		console.warn("legacy_recursive_reactive_block");

packages/svelte/src/legacy/legacy-client.js

@@ -6,13 +6,16 @@ import { hydrate, mount, unmount } from '../internal/client/render.js';
 import {
 	active_effect,
 	component_context,
+	dev_current_component_function,
 	flush_sync,
 	get,
 	set_signal_status
 } from '../internal/client/runtime.js';
 import { lifecycle_outside_component } from '../internal/shared/errors.js';
 import { define_property, is_array } from '../internal/shared/utils.js';
 import * as w from '../internal/client/warnings.js';
+import { DEV } from 'esm-env';
+import { FILENAME } from '../constants.js';
 
 /**
  * Takes the same options as a Svelte 4 component and the component function and returns a Svelte 4 compatible component.
@@ -182,7 +185,12 @@ export function run(fn) {
 		var effect = /** @type {import('#client').Effect} */ (active_effect);
 		// If the effect is immediately made dirty again, mark it as maybe dirty to emulate legacy behaviour
 		if ((effect.f & DIRTY) !== 0) {
-			w.legacy_recursive_reactive_block();
+			let filename = "a file (we can't know which one)";
+			if (DEV) {
+				// @ts-ignore
+				filename = dev_current_component_function?.[FILENAME] ?? filename;
+			}
+			w.legacy_recursive_reactive_block(filename);
 			set_signal_status(effect, MAYBE_DIRTY);
 		}
 	});

packages/svelte/tests/runtime-runes/samples/legacy-recursive-reactive-block/_config.js

@@ -0,0 +1,12 @@
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true
+	},
+	async test({ warnings, assert }) {
+		assert.deepEqual(warnings, [
+			'Detected a migrated `$:` reactive block in `main.svelte` that both accesses and updates the same reactive value. This may cause recursive updates when converted to an `$effect`.'
+		]);
+	}
+});

packages/svelte/tests/runtime-runes/samples/legacy-recursive-reactive-block/main.svelte

@@ -0,0 +1,11 @@
+<script>
+	import { run } from 'svelte/legacy';
+
+	let count = $state(0);
+
+	run(() => {
+		count = count+1;
+	});
+</script>
+
+{count}