diff --git a/.changeset/witty-flies-impress.md b/.changeset/witty-flies-impress.md new file mode 100644 index 000000000000..4ade81c67f19 --- /dev/null +++ b/.changeset/witty-flies-impress.md @@ -0,0 +1,5 @@ +--- +"svelte": patch +--- + +fix: show filename information in `legacy_recursive_reactive_block` diff --git a/documentation/docs/98-reference/.generated/client-warnings.md b/documentation/docs/98-reference/.generated/client-warnings.md index a0e7c3dd4002..2eabff6958b4 100644 --- a/documentation/docs/98-reference/.generated/client-warnings.md +++ b/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 diff --git a/packages/svelte/messages/client-warnings/warnings.md b/packages/svelte/messages/client-warnings/warnings.md index 699aa7e1806d..c6f1b0aae897 100644 --- a/packages/svelte/messages/client-warnings/warnings.md +++ b/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 diff --git a/packages/svelte/src/internal/client/warnings.js b/packages/svelte/src/internal/client/warnings.js index 20e58aa1aa28..047831371912 100644 --- a/packages/svelte/src/internal/client/warnings.js +++ b/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"); diff --git a/packages/svelte/src/legacy/legacy-client.js b/packages/svelte/src/legacy/legacy-client.js index 629b6c1c354d..4148f3d1cd59 100644 --- a/packages/svelte/src/legacy/legacy-client.js +++ b/packages/svelte/src/legacy/legacy-client.js @@ -6,6 +6,7 @@ import { hydrate, mount, unmount } from '../internal/client/render.js'; import { active_effect, component_context, + dev_current_component_function, flush_sync, get, set_signal_status @@ -13,6 +14,8 @@ import { 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); } }); diff --git a/packages/svelte/tests/runtime-runes/samples/legacy-recursive-reactive-block/_config.js b/packages/svelte/tests/runtime-runes/samples/legacy-recursive-reactive-block/_config.js new file mode 100644 index 000000000000..13185838d608 --- /dev/null +++ b/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`.' + ]); + } +}); diff --git a/packages/svelte/tests/runtime-runes/samples/legacy-recursive-reactive-block/main.svelte b/packages/svelte/tests/runtime-runes/samples/legacy-recursive-reactive-block/main.svelte new file mode 100644 index 000000000000..c7647a416aee --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/legacy-recursive-reactive-block/main.svelte @@ -0,0 +1,11 @@ + + +{count} \ No newline at end of file