diff --git a/packages/svelte/src/internal/client/reactivity/effects.js b/packages/svelte/src/internal/client/reactivity/effects.js index c62c75628623..fc1d196f5461 100644 --- a/packages/svelte/src/internal/client/reactivity/effects.js +++ b/packages/svelte/src/internal/client/reactivity/effects.js @@ -244,11 +244,24 @@ export function inspect_effect(fn) { /** * Internal representation of `$effect.root(...)` * @param {() => void | (() => void)} fn - * @returns {(options?: { outro?: boolean }) => void} + * @returns {() => void} */ export function effect_root(fn) { const effect = create_effect(ROOT_EFFECT, fn, true); + return () => { + destroy_effect(effect); + }; +} + +/** + * An effect root whose children can transition out + * @param {() => void} fn + * @returns {(options?: { outro?: boolean }) => void} + */ +export function component_root(fn) { + const effect = create_effect(ROOT_EFFECT, fn, true); + return (options = {}) => { if (options.outro) { pause_effect(effect, () => { diff --git a/packages/svelte/src/internal/client/render.js b/packages/svelte/src/internal/client/render.js index 1ac63046aae7..be58880a64cd 100644 --- a/packages/svelte/src/internal/client/render.js +++ b/packages/svelte/src/internal/client/render.js @@ -10,7 +10,7 @@ import { } from './dom/operations.js'; import { HYDRATION_END, HYDRATION_ERROR, HYDRATION_START } from '../../constants.js'; import { push, pop, component_context, active_effect } from './runtime.js'; -import { effect_root, branch } from './reactivity/effects.js'; +import { component_root, branch } from './reactivity/effects.js'; import { hydrate_next, hydrate_node, @@ -204,7 +204,7 @@ function _mount(Component, { target, anchor, props = {}, events, context, intro // @ts-expect-error will be defined because the render effect runs synchronously var component = undefined; - var unmount = effect_root(() => { + var unmount = component_root(() => { var anchor_node = anchor ?? target.appendChild(create_text()); branch(() => {