diff --git a/packages/svelte/src/internal/client/reactivity/effects.js b/packages/svelte/src/internal/client/reactivity/effects.js index 54c8a17d79..6139e22438 100644 --- a/packages/svelte/src/internal/client/reactivity/effects.js +++ b/packages/svelte/src/internal/client/reactivity/effects.js @@ -40,12 +40,13 @@ import { import * as e from '../errors.js'; import { DEV } from 'esm-env'; import { define_property } from '../../shared/utils.js'; -import { get_next_sibling } from '../dom/operations.js'; +import { get_next_sibling, remove_node, append_child } from '../dom/operations.js'; import { component_context, dev_current_component_function, dev_stack } from '../context.js'; import { Batch, collected_effects } from './batch.js'; import { flatten, increment_pending } from './async.js'; import { without_reactive_context } from '../dom/elements/bindings/shared.js'; import { set_signal_status } from './status.js'; +import { renderer } from '../custom-renderer/state.js'; /** * @param {'$effect' | '$effect.pre' | '$inspect'} rune @@ -113,7 +114,8 @@ function create_effect(type, fn) { prev: null, teardown: null, wv: 0, - ac: null + ac: null, + r: renderer }; if (DEV) { @@ -560,6 +562,7 @@ export function destroy_effect(effect, remove_dom = true) { effect.nodes = effect.ac = effect.b = + effect.r = null; } @@ -573,7 +576,7 @@ export function remove_effect_dom(node, end) { /** @type {TemplateNode | null} */ var next = node === end ? null : get_next_sibling(node); - node.remove(); + remove_node(/** @type {ChildNode} */ (node)); node = next; } } @@ -734,7 +737,7 @@ export function move_effect(effect, fragment) { /** @type {TemplateNode | null} */ var next = node === end ? null : get_next_sibling(node); - fragment.append(node); + append_child(fragment, node); node = next; } } diff --git a/packages/svelte/src/internal/client/reactivity/types.d.ts b/packages/svelte/src/internal/client/reactivity/types.d.ts index 8477917991..025527e897 100644 --- a/packages/svelte/src/internal/client/reactivity/types.d.ts +++ b/packages/svelte/src/internal/client/reactivity/types.d.ts @@ -7,6 +7,7 @@ import type { TransitionManager } from '#client'; import type { Boundary } from '../dom/blocks/boundary'; +import type { Renderer } from '../custom-renderer/index'; export interface Signal { /** Flags bitmask */ @@ -94,6 +95,8 @@ export interface Effect extends Reaction { parent: Effect | null; /** The boundary this effect belongs to */ b: Boundary | null; + /** The renderer this effect was created with */ + r: Renderer | null; /** Dev only */ component_function?: any; /** Dev only. Only set for certain block effects. Contains a reference to the stack that represents the render tree */ diff --git a/packages/svelte/src/internal/client/runtime.js b/packages/svelte/src/internal/client/runtime.js index 906d68fbf0..3d9f1d684b 100644 --- a/packages/svelte/src/internal/client/runtime.js +++ b/packages/svelte/src/internal/client/runtime.js @@ -59,6 +59,7 @@ import { captured_signals } from './legacy.js'; import { without_reactive_context } from './dom/elements/bindings/shared.js'; import { set_signal_status, update_derived_status } from './reactivity/status.js'; import * as w from './warnings.js'; +import { push_renderer } from './custom-renderer/state.js'; let is_updating_effect = false; @@ -442,6 +443,8 @@ export function update_effect(effect) { active_effect = effect; is_updating_effect = true; + var pop_renderer = effect.r !== null ? push_renderer(effect.r) : null; + if (DEV) { var previous_component_fn = dev_current_component_function; set_dev_current_component_function(effect.component_function); @@ -476,6 +479,8 @@ export function update_effect(effect) { is_updating_effect = was_updating_effect; active_effect = previous_effect; + pop_renderer?.(); + if (DEV) { set_dev_current_component_function(previous_component_fn); set_dev_stack(previous_stack);