fix

Author: Rich-Harris

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

@@ -57,16 +57,17 @@ export class BranchManager {
 		} 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);
+			if (offscreen) {
+				this.#onscreen.set(key, offscreen.effect);
+				this.#offscreen.delete(key);
 
-			// remove the anchor...
-			/** @type {TemplateNode} */ (offscreen.fragment.lastChild).remove();
+				// remove the anchor...
+				/** @type {TemplateNode} */ (offscreen.fragment.lastChild).remove();
 
-			// ...and append the fragment
-			this.anchor.before(offscreen.fragment);
+				// ...and append the fragment
+				this.anchor.before(offscreen.fragment);
+			}
 		}
 
 		this.#batches.delete(batch);
@@ -115,7 +116,7 @@ export class BranchManager {
 	/**
 	 *
 	 * @param {any} key
-	 * @param {(target: TemplateNode) => void} fn
+	 * @param {null | ((target: TemplateNode) => void)} fn
 	 */
 	ensure(key, fn) {
 		var batch = /** @type {Batch} */ (current_batch);
@@ -125,7 +126,7 @@ export class BranchManager {
 			key = {};
 		}
 
-		if (!this.#onscreen.has(key) && !this.#offscreen.has(key)) {
+		if (fn && !this.#onscreen.has(key) && !this.#offscreen.has(key)) {
 			var fragment = document.createDocumentFragment();
 			var target = create_text();
 

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

@@ -31,7 +31,7 @@ export function if_block(node, fn, elseif = false) {
 
 	/**
 	 * @param {boolean} condition,
-	 * @param {((anchor: Node) => void)} fn
+	 * @param {null | ((anchor: Node) => void)} fn
 	 */
 	function update_branch(condition, fn) {
 		if (hydrating) {
@@ -65,7 +65,7 @@ export function if_block(node, fn, elseif = false) {
 		});
 
 		if (!has_branch) {
-			update_branch(false, noop);
+			update_branch(false, null);
 		}
 	}, flags);
 }

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

@@ -28,13 +28,13 @@ export function snippet(node, get_snippet, ...args) {
 	var branches = new BranchManager(node);
 
 	block(() => {
-		const snippet = get_snippet();
+		const snippet = get_snippet() ?? null;
 
-		if (snippet == null) {
+		if (DEV && snippet == null) {
 			e.invalid_snippet();
 		}
 
-		branches.ensure(snippet, (anchor) => snippet(anchor, ...args));
+		branches.ensure(snippet, snippet && ((anchor) => snippet(anchor, ...args)));
 	}, EFFECT_TRANSPARENT);
 }
 

packages/svelte/src/internal/client/dom/blocks/svelte-component.js

@@ -5,6 +5,8 @@ import { block, branch, pause_effect } from '../../reactivity/effects.js';
 import { current_batch } from '../../reactivity/batch.js';
 import { hydrate_next, hydrate_node, hydrating } from '../hydration.js';
 import { create_text, should_defer_append } from '../operations.js';
+import { BranchManager } from './branches.js';
+import { noop } from '../../../shared/utils.js';
 
 /**
  * @template P
@@ -19,64 +21,10 @@ export function component(node, get_component, render_fn) {
 		hydrate_next();
 	}
 
-	var anchor = node;
-
-	/** @type {C} */
-	var component;
-
-	/** @type {Effect | null} */
-	var effect;
-
-	/** @type {DocumentFragment | null} */
-	var offscreen_fragment = null;
-
-	/** @type {Effect | null} */
-	var pending_effect = null;
-
-	function commit() {
-		if (effect) {
-			pause_effect(effect);
-			effect = null;
-		}
-
-		if (offscreen_fragment) {
-			// remove the anchor
-			/** @type {Text} */ (offscreen_fragment.lastChild).remove();
-
-			anchor.before(offscreen_fragment);
-			offscreen_fragment = null;
-		}
-
-		effect = pending_effect;
-		pending_effect = null;
-	}
+	var branches = new BranchManager(node);
 
 	block(() => {
-		if (component === (component = get_component())) return;
-
-		var defer = should_defer_append();
-
-		if (component) {
-			var target = anchor;
-
-			if (defer) {
-				offscreen_fragment = document.createDocumentFragment();
-				offscreen_fragment.append((target = create_text()));
-				if (effect) {
-					/** @type {Batch} */ (current_batch).skipped_effects.add(effect);
-				}
-			}
-			pending_effect = branch(() => render_fn(target, component));
-		}
-
-		if (defer) {
-			/** @type {Batch} */ (current_batch).add_callback(commit);
-		} else {
-			commit();
-		}
+		var component = get_component() ?? null;
+		branches.ensure(component, component && ((target) => render_fn(target, component)));
 	}, EFFECT_TRANSPARENT);
-
-	if (hydrating) {
-		anchor = hydrate_node;
-	}
 }