From 99c0c48caf9065e66613eb2531c7ef43be6eb626 Mon Sep 17 00:00:00 2001 From: Dominic Gannaway Date: Thu, 17 Oct 2024 11:01:35 +0100 Subject: [PATCH 1/7] fix: ensure legacy run utility does not cause cycles --- .changeset/moody-pugs-tan.md | 5 +++++ packages/svelte/src/legacy/legacy-client.js | 18 ++++++++++++++++-- 2 files changed, 21 insertions(+), 2 deletions(-) create mode 100644 .changeset/moody-pugs-tan.md diff --git a/.changeset/moody-pugs-tan.md b/.changeset/moody-pugs-tan.md new file mode 100644 index 000000000000..3881ddb5cf1d --- /dev/null +++ b/.changeset/moody-pugs-tan.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: ensure legacy run utility does not cause cycles diff --git a/packages/svelte/src/legacy/legacy-client.js b/packages/svelte/src/legacy/legacy-client.js index 44f4e8c8fe5e..b4276b307776 100644 --- a/packages/svelte/src/legacy/legacy-client.js +++ b/packages/svelte/src/legacy/legacy-client.js @@ -1,8 +1,15 @@ /** @import { ComponentConstructorOptions, ComponentType, SvelteComponent, Component } from 'svelte' */ +import { DIRTY, MAYBE_DIRTY } from '../internal/client/constants.js'; import { user_pre_effect } from '../internal/client/reactivity/effects.js'; import { mutable_source, set } from '../internal/client/reactivity/sources.js'; import { hydrate, mount, unmount } from '../internal/client/render.js'; -import { component_context, flush_sync, get } from '../internal/client/runtime.js'; +import { + active_effect, + component_context, + 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'; @@ -169,7 +176,14 @@ class Svelte4Component { * @returns {void} */ export function run(fn) { - user_pre_effect(fn); + user_pre_effect(() => { + 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) { + set_signal_status(effect, MAYBE_DIRTY); + } + }); } /** From 8fbbd550135f7fb77ce0bf1402f56fb2964a7f52 Mon Sep 17 00:00:00 2001 From: Dominic Gannaway Date: Thu, 17 Oct 2024 11:27:18 +0100 Subject: [PATCH 2/7] add warning --- .../98-reference/.generated/legacy-warnings.md | 5 +++++ .../messages/legacy-warnings/warnings.md | 3 +++ .../svelte/scripts/process-messages/index.js | 1 + .../templates/legacy-warnings.js | 17 +++++++++++++++++ packages/svelte/src/legacy/legacy-client.js | 2 ++ packages/svelte/src/legacy/warnings.js | 18 ++++++++++++++++++ 6 files changed, 46 insertions(+) create mode 100644 documentation/docs/98-reference/.generated/legacy-warnings.md create mode 100644 packages/svelte/messages/legacy-warnings/warnings.md create mode 100644 packages/svelte/scripts/process-messages/templates/legacy-warnings.js create mode 100644 packages/svelte/src/legacy/warnings.js diff --git a/documentation/docs/98-reference/.generated/legacy-warnings.md b/documentation/docs/98-reference/.generated/legacy-warnings.md new file mode 100644 index 000000000000..d6150e2492ca --- /dev/null +++ b/documentation/docs/98-reference/.generated/legacy-warnings.md @@ -0,0 +1,5 @@ +### legacy_reactive_block_mutation + +``` +Detected a migrated `$:` reactive block that both accesses and updates the same reactive value. This may cause recursive updates when converted to an `$effect`. +``` diff --git a/packages/svelte/messages/legacy-warnings/warnings.md b/packages/svelte/messages/legacy-warnings/warnings.md new file mode 100644 index 000000000000..2ff423c71f0e --- /dev/null +++ b/packages/svelte/messages/legacy-warnings/warnings.md @@ -0,0 +1,3 @@ +## legacy_reactive_block_mutation + +> Detected a migrated `$:` reactive block that both accesses and updates the same reactive value. This may cause recursive updates when converted to an `$effect`. diff --git a/packages/svelte/scripts/process-messages/index.js b/packages/svelte/scripts/process-messages/index.js index 3a4e9d8a4df1..da9d99ca850a 100644 --- a/packages/svelte/scripts/process-messages/index.js +++ b/packages/svelte/scripts/process-messages/index.js @@ -404,3 +404,4 @@ transform('client-errors', 'src/internal/client/errors.js'); transform('server-errors', 'src/internal/server/errors.js'); transform('shared-errors', 'src/internal/shared/errors.js'); transform('shared-warnings', 'src/internal/shared/warnings.js'); +transform('legacy-warnings', 'src/legacy/warnings.js'); diff --git a/packages/svelte/scripts/process-messages/templates/legacy-warnings.js b/packages/svelte/scripts/process-messages/templates/legacy-warnings.js new file mode 100644 index 000000000000..d40a59ec0c8d --- /dev/null +++ b/packages/svelte/scripts/process-messages/templates/legacy-warnings.js @@ -0,0 +1,17 @@ +import { DEV } from 'esm-env'; + +var bold = 'font-weight: bold'; +var normal = 'font-weight: normal'; + +/** + * MESSAGE + * @param {string} PARAMETER + */ +export function CODE(PARAMETER) { + if (DEV) { + console.warn(`%c[svelte] ${'CODE'}\n%c${MESSAGE}`, bold, normal); + } else { + // TODO print a link to the documentation + console.warn('CODE'); + } +} diff --git a/packages/svelte/src/legacy/legacy-client.js b/packages/svelte/src/legacy/legacy-client.js index b4276b307776..2145b5d8364b 100644 --- a/packages/svelte/src/legacy/legacy-client.js +++ b/packages/svelte/src/legacy/legacy-client.js @@ -12,6 +12,7 @@ import { } 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 './warnings.js'; /** * Takes the same options as a Svelte 4 component and the component function and returns a Svelte 4 compatible component. @@ -181,6 +182,7 @@ 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_reactive_block_mutation(); set_signal_status(effect, MAYBE_DIRTY); } }); diff --git a/packages/svelte/src/legacy/warnings.js b/packages/svelte/src/legacy/warnings.js new file mode 100644 index 000000000000..bd621643aaba --- /dev/null +++ b/packages/svelte/src/legacy/warnings.js @@ -0,0 +1,18 @@ +/* This file is generated by scripts/process-messages/index.js. Do not edit! */ + +import { DEV } from 'esm-env'; + +var bold = 'font-weight: bold'; +var normal = 'font-weight: normal'; + +/** + * Detected a migrated `$:` reactive block that both accesses and updates the same reactive value. This may cause recursive updates when converted to an `$effect`. + */ +export function legacy_reactive_block_mutation() { + if (DEV) { + console.warn(`%c[svelte] legacy_reactive_block_mutation\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); + } else { + // TODO print a link to the documentation + console.warn("legacy_reactive_block_mutation"); + } +} \ No newline at end of file From 63718a172943236132434bef227594c4d3fc511d Mon Sep 17 00:00:00 2001 From: Dominic Gannaway Date: Thu, 17 Oct 2024 11:28:43 +0100 Subject: [PATCH 3/7] add warning --- .../docs/98-reference/.generated/legacy-warnings.md | 2 +- packages/svelte/messages/legacy-warnings/warnings.md | 2 +- packages/svelte/src/legacy/legacy-client.js | 2 +- packages/svelte/src/legacy/warnings.js | 6 +++--- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/documentation/docs/98-reference/.generated/legacy-warnings.md b/documentation/docs/98-reference/.generated/legacy-warnings.md index d6150e2492ca..43f176388f5d 100644 --- a/documentation/docs/98-reference/.generated/legacy-warnings.md +++ b/documentation/docs/98-reference/.generated/legacy-warnings.md @@ -1,4 +1,4 @@ -### legacy_reactive_block_mutation +### 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`. diff --git a/packages/svelte/messages/legacy-warnings/warnings.md b/packages/svelte/messages/legacy-warnings/warnings.md index 2ff423c71f0e..43e6201e8bb5 100644 --- a/packages/svelte/messages/legacy-warnings/warnings.md +++ b/packages/svelte/messages/legacy-warnings/warnings.md @@ -1,3 +1,3 @@ -## legacy_reactive_block_mutation +## 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`. diff --git a/packages/svelte/src/legacy/legacy-client.js b/packages/svelte/src/legacy/legacy-client.js index 2145b5d8364b..424f9b9bcdbc 100644 --- a/packages/svelte/src/legacy/legacy-client.js +++ b/packages/svelte/src/legacy/legacy-client.js @@ -182,7 +182,7 @@ 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_reactive_block_mutation(); + w.legacy_recursive_reactive_block(); set_signal_status(effect, MAYBE_DIRTY); } }); diff --git a/packages/svelte/src/legacy/warnings.js b/packages/svelte/src/legacy/warnings.js index bd621643aaba..a008908cb69f 100644 --- a/packages/svelte/src/legacy/warnings.js +++ b/packages/svelte/src/legacy/warnings.js @@ -8,11 +8,11 @@ var normal = 'font-weight: normal'; /** * Detected a migrated `$:` reactive block that both accesses and updates the same reactive value. This may cause recursive updates when converted to an `$effect`. */ -export function legacy_reactive_block_mutation() { +export function legacy_recursive_reactive_block() { if (DEV) { - console.warn(`%c[svelte] legacy_reactive_block_mutation\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 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_reactive_block_mutation"); + console.warn("legacy_recursive_reactive_block"); } } \ No newline at end of file From 5f713ac8123b1aed214a380618b7a4919e905e47 Mon Sep 17 00:00:00 2001 From: Dominic Gannaway Date: Thu, 17 Oct 2024 11:32:10 +0100 Subject: [PATCH 4/7] lint --- packages/svelte/src/legacy/warnings.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/svelte/src/legacy/warnings.js b/packages/svelte/src/legacy/warnings.js index a008908cb69f..9f72423fc50d 100644 --- a/packages/svelte/src/legacy/warnings.js +++ b/packages/svelte/src/legacy/warnings.js @@ -10,9 +10,13 @@ var normal = 'font-weight: normal'; */ export function legacy_recursive_reactive_block() { 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 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"); + console.warn('legacy_recursive_reactive_block'); } -} \ No newline at end of file +} From 985c43be07a7b2063f442792d03d54f692f8681f Mon Sep 17 00:00:00 2001 From: Dominic Gannaway Date: Thu, 17 Oct 2024 11:39:24 +0100 Subject: [PATCH 5/7] feedback --- .../98-reference/.generated/client-warnings.md | 6 ++++++ .../98-reference/.generated/legacy-warnings.md | 5 ----- .../svelte/messages/client-warnings/warnings.md | 4 ++++ .../svelte/messages/legacy-warnings/warnings.md | 3 --- .../svelte/scripts/process-messages/index.js | 1 - .../templates/legacy-warnings.js | 17 ----------------- packages/svelte/src/internal/client/warnings.js | 12 ++++++++++++ packages/svelte/src/legacy/legacy-client.js | 2 +- 8 files changed, 23 insertions(+), 27 deletions(-) delete mode 100644 documentation/docs/98-reference/.generated/legacy-warnings.md delete mode 100644 packages/svelte/messages/legacy-warnings/warnings.md delete mode 100644 packages/svelte/scripts/process-messages/templates/legacy-warnings.js diff --git a/documentation/docs/98-reference/.generated/client-warnings.md b/documentation/docs/98-reference/.generated/client-warnings.md index 7eb94df91248..a0e7c3dd4002 100644 --- a/documentation/docs/98-reference/.generated/client-warnings.md +++ b/documentation/docs/98-reference/.generated/client-warnings.md @@ -56,6 +56,12 @@ Hydration failed because the initial UI does not match what was rendered on the The `render` function passed to `createRawSnippet` should return HTML for a single element ``` +### 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`. +``` + ### lifecycle_double_unmount ``` diff --git a/documentation/docs/98-reference/.generated/legacy-warnings.md b/documentation/docs/98-reference/.generated/legacy-warnings.md deleted file mode 100644 index 43f176388f5d..000000000000 --- a/documentation/docs/98-reference/.generated/legacy-warnings.md +++ /dev/null @@ -1,5 +0,0 @@ -### 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`. -``` diff --git a/packages/svelte/messages/client-warnings/warnings.md b/packages/svelte/messages/client-warnings/warnings.md index 24355cae546e..699aa7e1806d 100644 --- a/packages/svelte/messages/client-warnings/warnings.md +++ b/packages/svelte/messages/client-warnings/warnings.md @@ -36,6 +36,10 @@ The easiest way to log a value as it changes over time is to use the [`$inspect` > The `render` function passed to `createRawSnippet` should return HTML for a single element +## 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`. + ## lifecycle_double_unmount > Tried to unmount a component that was not mounted diff --git a/packages/svelte/messages/legacy-warnings/warnings.md b/packages/svelte/messages/legacy-warnings/warnings.md deleted file mode 100644 index 43e6201e8bb5..000000000000 --- a/packages/svelte/messages/legacy-warnings/warnings.md +++ /dev/null @@ -1,3 +0,0 @@ -## 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`. diff --git a/packages/svelte/scripts/process-messages/index.js b/packages/svelte/scripts/process-messages/index.js index da9d99ca850a..3a4e9d8a4df1 100644 --- a/packages/svelte/scripts/process-messages/index.js +++ b/packages/svelte/scripts/process-messages/index.js @@ -404,4 +404,3 @@ transform('client-errors', 'src/internal/client/errors.js'); transform('server-errors', 'src/internal/server/errors.js'); transform('shared-errors', 'src/internal/shared/errors.js'); transform('shared-warnings', 'src/internal/shared/warnings.js'); -transform('legacy-warnings', 'src/legacy/warnings.js'); diff --git a/packages/svelte/scripts/process-messages/templates/legacy-warnings.js b/packages/svelte/scripts/process-messages/templates/legacy-warnings.js deleted file mode 100644 index d40a59ec0c8d..000000000000 --- a/packages/svelte/scripts/process-messages/templates/legacy-warnings.js +++ /dev/null @@ -1,17 +0,0 @@ -import { DEV } from 'esm-env'; - -var bold = 'font-weight: bold'; -var normal = 'font-weight: normal'; - -/** - * MESSAGE - * @param {string} PARAMETER - */ -export function CODE(PARAMETER) { - if (DEV) { - console.warn(`%c[svelte] ${'CODE'}\n%c${MESSAGE}`, bold, normal); - } else { - // TODO print a link to the documentation - console.warn('CODE'); - } -} diff --git a/packages/svelte/src/internal/client/warnings.js b/packages/svelte/src/internal/client/warnings.js index c45a92cdde95..d3d0d66a7111 100644 --- a/packages/svelte/src/internal/client/warnings.js +++ b/packages/svelte/src/internal/client/warnings.js @@ -151,4 +151,16 @@ export function state_proxy_equality_mismatch(operator) { // TODO print a link to the documentation console.warn("state_proxy_equality_mismatch"); } +} + +/** + * Detected a migrated `$:` reactive block that both accesses and updates the same reactive value. This may cause recursive updates when converted to an `$effect`. + */ +export function legacy_recursive_reactive_block() { + 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); + } else { + // TODO print a link to the documentation + console.warn("legacy_recursive_reactive_block"); + } } \ No newline at end of file diff --git a/packages/svelte/src/legacy/legacy-client.js b/packages/svelte/src/legacy/legacy-client.js index 424f9b9bcdbc..629b6c1c354d 100644 --- a/packages/svelte/src/legacy/legacy-client.js +++ b/packages/svelte/src/legacy/legacy-client.js @@ -12,7 +12,7 @@ import { } 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 './warnings.js'; +import * as w from '../internal/client/warnings.js'; /** * Takes the same options as a Svelte 4 component and the component function and returns a Svelte 4 compatible component. From 6259a7ef07ba0887dc569760f8329a09ab767c9b Mon Sep 17 00:00:00 2001 From: Dominic Gannaway Date: Thu, 17 Oct 2024 11:46:55 +0100 Subject: [PATCH 6/7] lint --- .../svelte/src/internal/client/warnings.js | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/packages/svelte/src/internal/client/warnings.js b/packages/svelte/src/internal/client/warnings.js index d3d0d66a7111..20e58aa1aa28 100644 --- a/packages/svelte/src/internal/client/warnings.js +++ b/packages/svelte/src/internal/client/warnings.js @@ -99,6 +99,18 @@ 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`. + */ +export function legacy_recursive_reactive_block() { + 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); + } else { + // TODO print a link to the documentation + console.warn("legacy_recursive_reactive_block"); + } +} + /** * Tried to unmount a component that was not mounted */ @@ -151,16 +163,4 @@ export function state_proxy_equality_mismatch(operator) { // TODO print a link to the documentation console.warn("state_proxy_equality_mismatch"); } -} - -/** - * Detected a migrated `$:` reactive block that both accesses and updates the same reactive value. This may cause recursive updates when converted to an `$effect`. - */ -export function legacy_recursive_reactive_block() { - 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); - } else { - // TODO print a link to the documentation - console.warn("legacy_recursive_reactive_block"); - } } \ No newline at end of file From e2530ca5df01b7e966c2729ae3d34f1d7001f194 Mon Sep 17 00:00:00 2001 From: Dominic Gannaway Date: Thu, 17 Oct 2024 11:51:43 +0100 Subject: [PATCH 7/7] lint --- packages/svelte/src/legacy/warnings.js | 22 ---------------------- 1 file changed, 22 deletions(-) delete mode 100644 packages/svelte/src/legacy/warnings.js diff --git a/packages/svelte/src/legacy/warnings.js b/packages/svelte/src/legacy/warnings.js deleted file mode 100644 index 9f72423fc50d..000000000000 --- a/packages/svelte/src/legacy/warnings.js +++ /dev/null @@ -1,22 +0,0 @@ -/* This file is generated by scripts/process-messages/index.js. Do not edit! */ - -import { DEV } from 'esm-env'; - -var bold = 'font-weight: bold'; -var normal = 'font-weight: normal'; - -/** - * Detected a migrated `$:` reactive block that both accesses and updates the same reactive value. This may cause recursive updates when converted to an `$effect`. - */ -export function legacy_recursive_reactive_block() { - 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 - ); - } else { - // TODO print a link to the documentation - console.warn('legacy_recursive_reactive_block'); - } -}