WIP

Author: Rich-Harris

packages/svelte/src/internal/client/dom/blocks/boundary.js

@@ -8,7 +8,13 @@ import {
 import { HYDRATION_START_ELSE } from '../../../../constants.js';
 import { component_context, set_component_context } from '../../context.js';
 import { handle_error, invoke_error_boundary } from '../../error-handling.js';
-import { block, branch, destroy_effect, pause_effect } from '../../reactivity/effects.js';
+import {
+	block,
+	branch,
+	destroy_effect,
+	move_effect,
+	pause_effect
+} from '../../reactivity/effects.js';
 import {
 	active_effect,
 	active_reaction,
@@ -425,24 +431,6 @@ export class Boundary {
 	}
 }
 
-/**
- *
- * @param {Effect} effect
- * @param {DocumentFragment} fragment
- */
-function move_effect(effect, fragment) {
-	var node = effect.nodes_start;
-	var end = effect.nodes_end;
-
-	while (node !== null) {
-		/** @type {TemplateNode | null} */
-		var next = node === end ? null : /** @type {TemplateNode} */ (get_next_sibling(node));
-
-		fragment.append(node);
-		node = next;
-	}
-}
-
 export function get_boundary() {
 	return /** @type {Boundary} */ (/** @type {Effect} */ (active_effect).b);
 }

packages/svelte/src/internal/client/dom/blocks/branches.js

@@ -1,6 +1,12 @@
 /** @import { Effect, TemplateNode } from '#client' */
 import { Batch, current_batch } from '../../reactivity/batch.js';
-import { branch, pause_effect, resume_effect } from '../../reactivity/effects.js';
+import {
+	branch,
+	destroy_effect,
+	move_effect,
+	pause_effect,
+	resume_effect
+} from '../../reactivity/effects.js';
 import { create_text, should_defer_append } from '../operations.js';
 
 /**
@@ -57,15 +63,30 @@ export class BranchManager {
 
 		this.#batches.delete(batch);
 
-		for (const [k, e] of this.#onscreen) {
+		for (const [k, effect] of this.#onscreen) {
 			if (k === key) continue;
 
-			pause_effect(e, () => {
-				// TODO if this needed by a pending batch, move the effect to
-				// a fragment and put it on this.#offscreen
+			pause_effect(
+				effect,
+				() => {
+					const keys = Array.from(this.#batches.values());
 
-				this.#onscreen.delete(k);
-			});
+					if (keys.includes(k)) {
+						// keep the effect offscreen, as another batch will need it
+						var fragment = document.createDocumentFragment();
+						move_effect(effect, fragment);
+
+						fragment.append(create_text()); // TODO can we avoid this?
+
+						this.#offscreen.set(k, { effect, fragment });
+					} else {
+						destroy_effect(effect);
+					}
+
+					this.#onscreen.delete(k);
+				},
+				false
+			);
 		}
 	};
 

packages/svelte/src/internal/client/dom/blocks/if.js

@@ -1,5 +1,4 @@
-/** @import { Effect, TemplateNode } from '#client' */
-/** @import { Batch } from '../../reactivity/batch.js'; */
+/** @import { TemplateNode } from '#client' */
 import { EFFECT_TRANSPARENT } from '#client/constants';
 import {
 	hydrate_next,
@@ -10,10 +9,8 @@ import {
 	set_hydrate_node,
 	set_hydrating
 } from '../hydration.js';
-import { block, branch, pause_effect, resume_effect } from '../../reactivity/effects.js';
+import { block } from '../../reactivity/effects.js';
 import { HYDRATION_START_ELSE, UNINITIALIZED } from '../../../../constants.js';
-import { create_text, should_defer_append } from '../operations.js';
-import { current_batch } from '../../reactivity/batch.js';
 import { BranchManager } from './branches.js';
 import { noop } from '../../../shared/utils.js';
 

packages/svelte/src/internal/client/reactivity/effects.js

@@ -553,15 +553,16 @@ export function unlink_effect(effect) {
  * A paused effect does not update, and the DOM subtree becomes inert.
  * @param {Effect} effect
  * @param {() => void} [callback]
+ * @param {boolean} [destroy]
  */
-export function pause_effect(effect, callback) {
+export function pause_effect(effect, callback, destroy = true) {
 	/** @type {TransitionManager[]} */
 	var transitions = [];
 
 	pause_children(effect, transitions, true);
 
 	run_out_transitions(transitions, () => {
-		destroy_effect(effect);
+		if (destroy) destroy_effect(effect);
 		if (callback) callback();
 	});
 }
@@ -662,3 +663,20 @@ function resume_children(effect, local) {
 export function aborted(effect = /** @type {Effect} */ (active_effect)) {
 	return (effect.f & DESTROYED) !== 0;
 }
+
+/**
+ * @param {Effect} effect
+ * @param {DocumentFragment} fragment
+ */
+export function move_effect(effect, fragment) {
+	var node = effect.nodes_start;
+	var end = effect.nodes_end;
+
+	while (node !== null) {
+		/** @type {TemplateNode | null} */
+		var next = node === end ? null : /** @type {TemplateNode} */ (get_next_sibling(node));
+
+		fragment.append(node);
+		node = next;
+	}
+}