key blocks

Author: Rich-Harris

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

@@ -1,4 +1,5 @@
 /** @import { Effect, TemplateNode } from '#client' */
+import { is_runes } from '../../context.js';
 import { Batch, current_batch } from '../../reactivity/batch.js';
 import {
 	branch,
@@ -30,6 +31,8 @@ export class BranchManager {
 	/** @type {Map<Key, Branch>} */
 	#offscreen = new Map();
 
+	#legacy = !is_runes();
+
 	/**
 	 *
 	 * @param {TemplateNode} anchor
@@ -117,6 +120,11 @@ export class BranchManager {
 	ensure(key, fn) {
 		var batch = /** @type {Batch} */ (current_batch);
 
+		// key blocks in Svelte <5 had stupid semantics
+		if (this.#legacy && typeof key === 'object') {
+			key = {};
+		}
+
 		if (!this.#onscreen.has(key) && !this.#offscreen.has(key)) {
 			var fragment = document.createDocumentFragment();
 			var target = create_text();

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

@@ -1,12 +1,7 @@
-/** @import { Effect, TemplateNode } from '#client' */
-/** @import { Batch } from '../../reactivity/batch.js'; */
-import { UNINITIALIZED } from '../../../../constants.js';
-import { block, branch, pause_effect } from '../../reactivity/effects.js';
-import { not_equal, safe_not_equal } from '../../reactivity/equality.js';
-import { is_runes } from '../../context.js';
-import { hydrate_next, hydrate_node, hydrating } from '../hydration.js';
-import { create_text, should_defer_append } from '../operations.js';
-import { current_batch } from '../../reactivity/batch.js';
+/** @import { TemplateNode } from '#client' */
+import { block } from '../../reactivity/effects.js';
+import { hydrate_next, hydrating } from '../hydration.js';
+import { BranchManager } from './branches.js';
 
 /**
  * @template V
@@ -20,60 +15,9 @@ export function key(node, get_key, render_fn) {
 		hydrate_next();
 	}
 
-	var anchor = node;
-
-	/** @type {V | typeof UNINITIALIZED} */
-	var key = UNINITIALIZED;
-
-	/** @type {Effect} */
-	var effect;
-
-	/** @type {Effect} */
-	var pending_effect;
-
-	/** @type {DocumentFragment | null} */
-	var offscreen_fragment = null;
-
-	var changed = is_runes() ? not_equal : safe_not_equal;
-
-	function commit() {
-		if (effect) {
-			pause_effect(effect);
-		}
-
-		if (offscreen_fragment !== null) {
-			// remove the anchor
-			/** @type {Text} */ (offscreen_fragment.lastChild).remove();
-
-			anchor.before(offscreen_fragment);
-			offscreen_fragment = null;
-		}
-
-		effect = pending_effect;
-	}
+	var branches = new BranchManager(node);
 
 	block(() => {
-		if (changed(key, (key = get_key()))) {
-			var target = anchor;
-
-			var defer = should_defer_append();
-
-			if (defer) {
-				offscreen_fragment = document.createDocumentFragment();
-				offscreen_fragment.append((target = create_text()));
-			}
-
-			pending_effect = branch(() => render_fn(target));
-
-			if (defer) {
-				/** @type {Batch} */ (current_batch).add_callback(commit);
-			} else {
-				commit();
-			}
-		}
+		branches.ensure(get_key(), render_fn);
 	});
-
-	if (hydrating) {
-		anchor = hydrate_node;
-	}
 }