WIP

Author: Rich-Harris

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

@@ -0,0 +1,103 @@
+/** @import { Effect, TemplateNode } from '#client' */
+import { Batch, current_batch } from '../../reactivity/batch.js';
+import { branch, pause_effect, resume_effect } from '../../reactivity/effects.js';
+import { create_text, should_defer_append } from '../operations.js';
+
+/**
+ * @typedef {{ effect: Effect, fragment: DocumentFragment }} Branch
+ */
+
+/**
+ * @template Key
+ */
+export class BranchManager {
+	/** @type {TemplateNode} */
+	#anchor;
+
+	/** @type {Map<Batch, Key>} */
+	#batches = new Map();
+
+	/** @type {Map<Key, Effect>} */
+	#onscreen = new Map();
+
+	/** @type {Map<Key, Branch>} */
+	#offscreen = new Map();
+
+	/**
+	 *
+	 * @param {TemplateNode} anchor
+	 */
+	constructor(anchor) {
+		this.#anchor = anchor;
+	}
+
+	#commit = () => {
+		var batch = /** @type {Batch} */ (current_batch);
+		var key = /** @type {Key} */ (this.#batches.get(batch));
+
+		var onscreen = this.#onscreen.get(key);
+
+		if (onscreen) {
+			// effect is already in the DOM — abort any current outro
+			resume_effect(onscreen);
+		} else {
+			// effect is currently offscreen. put it in the DOM
+			var offscreen = this.#offscreen.get(key);
+			if (!offscreen) throw new Error('This should never happen!');
+
+			this.#onscreen.set(key, offscreen.effect);
+			this.#offscreen.delete(key);
+
+			// remove the anchor...
+			/** @type {TemplateNode} */ (offscreen.fragment.lastChild).remove();
+
+			// ...and append the fragment
+			this.#anchor.before(offscreen.fragment);
+		}
+
+		this.#batches.delete(batch);
+
+		for (const [k, e] 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
+
+				this.#onscreen.delete(k);
+			});
+		}
+	};
+
+	/**
+	 *
+	 * @param {any} key
+	 * @param {(target: TemplateNode) => void} fn
+	 */
+	ensure(key, fn) {
+		if (should_defer_append()) {
+			var batch = /** @type {Batch} */ (current_batch);
+
+			if (!this.#onscreen.has(key) && !this.#offscreen.has(key)) {
+				var fragment = document.createDocumentFragment();
+				var target = create_text();
+
+				fragment.append(target);
+
+				this.#offscreen.set(key, {
+					effect: branch(() => fn(target)),
+					fragment
+				});
+			}
+
+			this.#batches.set(batch, key);
+
+			batch.add_callback(this.#commit);
+		} else {
+			this.#onscreen.set(
+				key,
+				branch(() => fn(this.#anchor))
+			);
+		}
+	}
+}

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

@@ -14,6 +14,8 @@ import { block, branch, pause_effect, resume_effect } from '../../reactivity/eff
 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';
 
 // TODO reinstate https://github.com/sveltejs/svelte/pull/15250
 
@@ -30,12 +32,6 @@ export function if_block(node, fn, elseif = false) {
 
 	var anchor = node;
 
-	/** @type {Effect | null} */
-	var consequent_effect = null;
-
-	/** @type {Effect | null} */
-	var alternate_effect = null;
-
 	/** @type {typeof UNINITIALIZED | boolean | null} */
 	var condition = UNINITIALIZED;
 
@@ -48,42 +44,12 @@ export function if_block(node, fn, elseif = false) {
 		update_branch(flag, fn);
 	};
 
-	/** @type {DocumentFragment | null} */
-	var offscreen_fragment = null;
-
-	function commit() {
-		if (offscreen_fragment !== null) {
-			// remove the anchor
-			/** @type {Text} */ (offscreen_fragment.lastChild).remove();
-
-			anchor.before(offscreen_fragment);
-			offscreen_fragment = null;
-		}
-
-		var active = condition ? consequent_effect : alternate_effect;
-		var inactive = condition ? alternate_effect : consequent_effect;
-
-		if (active) {
-			resume_effect(active);
-		}
-
-		if (inactive) {
-			pause_effect(inactive, () => {
-				if (condition) {
-					alternate_effect = null;
-				} else {
-					consequent_effect = null;
-				}
-			});
-		}
-	}
+	var branches = new BranchManager(anchor);
 
 	const update_branch = (
 		/** @type {boolean | null} */ new_condition,
 		/** @type {null | ((anchor: Node) => void)} */ fn
 	) => {
-		if (condition === (condition = new_condition)) return;
-
 		/** Whether or not there was a hydration mismatch. Needs to be a `let` or else it isn't treeshaken out */
 		let mismatch = false;
 
@@ -101,33 +67,7 @@ export function if_block(node, fn, elseif = false) {
 			}
 		}
 
-		var defer = should_defer_append();
-		var target = anchor;
-
-		if (defer) {
-			offscreen_fragment = document.createDocumentFragment();
-			offscreen_fragment.append((target = create_text()));
-		}
-
-		if (condition) {
-			consequent_effect ??= fn && branch(() => fn(target));
-		} else {
-			alternate_effect ??= fn && branch(() => fn(target));
-		}
-
-		if (defer) {
-			var batch = /** @type {Batch} */ (current_batch);
-
-			var active = condition ? consequent_effect : alternate_effect;
-			var inactive = condition ? alternate_effect : consequent_effect;
-
-			if (active) batch.skipped_effects.delete(active);
-			if (inactive) batch.skipped_effects.add(inactive);
-
-			batch.add_callback(commit);
-		} else {
-			commit();
-		}
+		branches.ensure(new_condition, fn ?? noop);
 
 		if (mismatch) {
 			// continue in hydration mode