From 8ff2af52d3381504c26feb6c00da9fa8281bfb1a Mon Sep 17 00:00:00 2001 From: Paolo Ricciuti Date: Mon, 21 Oct 2024 23:36:08 +0200 Subject: [PATCH] fix: show filename information in `legacy_recursive_reactive_block` (#13764) --- .changeset/witty-flies-impress.md | 5 +++++ .../docs/98-reference/.generated/client-warnings.md | 2 +- packages/svelte/messages/client-warnings/warnings.md | 2 +- packages/svelte/src/internal/client/warnings.js | 7 ++++--- packages/svelte/src/legacy/legacy-client.js | 10 +++++++++- .../legacy-recursive-reactive-block/_config.js | 12 ++++++++++++ .../legacy-recursive-reactive-block/main.svelte | 11 +++++++++++ 7 files changed, 43 insertions(+), 6 deletions(-) create mode 100644 .changeset/witty-flies-impress.md create mode 100644 packages/svelte/tests/runtime-runes/samples/legacy-recursive-reactive-block/_config.js create mode 100644 packages/svelte/tests/runtime-runes/samples/legacy-recursive-reactive-block/main.svelte diff --git a/.changeset/witty-flies-impress.md b/.changeset/witty-flies-impress.md new file mode 100644 index 0000000000..4ade81c67f --- /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 a0e7c3dd40..2eabff6958 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 699aa7e180..c6f1b0aae8 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 20e58aa1aa..0478313719 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 629b6c1c35..4148f3d1cd 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 0000000000..13185838d6 --- /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 0000000000..c7647a416a --- /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