elements

Author: Rich-Harris

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

@@ -8,6 +8,7 @@ import {
 	pause_effect,
 	resume_effect
 } from '../../reactivity/effects.js';
+import { set_should_intro, should_intro } from '../../render.js';
 import { hydrate_node, hydrating } from '../hydration.js';
 import { create_text, should_defer_append } from '../operations.js';
 
@@ -34,11 +35,18 @@ export class BranchManager {
 	#legacy = !is_runes();
 
 	/**
-	 *
+	 * Whether to pause (i.e. outro) on change, or destroy immediately.
+	 * This is necessary for `<svelte:element>`
+	 */
+	#transition = true;
+
+	/**
 	 * @param {TemplateNode} anchor
+	 * @param {boolean} transition
 	 */
-	constructor(anchor) {
+	constructor(anchor, transition = true) {
 		this.anchor = anchor;
+		this.#transition = transition;
 	}
 
 	#commit = () => {
@@ -67,6 +75,7 @@ export class BranchManager {
 
 				// ...and append the fragment
 				this.anchor.before(offscreen.fragment);
+				onscreen = offscreen.effect;
 			}
 		}
 
@@ -89,27 +98,29 @@ export class BranchManager {
 		for (const [k, effect] of this.#onscreen) {
 			if (k === key) continue;
 
-			pause_effect(
-				effect,
-				() => {
-					const keys = Array.from(this.#batches.values());
+			const on_destroy = () => {
+				const keys = Array.from(this.#batches.values());
 
-					if (keys.includes(k)) {
-						// keep the effect offscreen, as another batch will need it
-						var fragment = document.createDocumentFragment();
-						move_effect(effect, fragment);
+				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?
+					fragment.append(create_text()); // TODO can we avoid this?
 
-						this.#offscreen.set(k, { effect, fragment });
-					} else {
-						destroy_effect(effect);
-					}
+					this.#offscreen.set(k, { effect, fragment });
+				} else {
+					destroy_effect(effect);
+				}
 
-					this.#onscreen.delete(k);
-				},
-				false
-			);
+				this.#onscreen.delete(k);
+			};
+
+			if (this.#transition || !onscreen) {
+				pause_effect(effect, on_destroy, false);
+			} else {
+				on_destroy();
+			}
 		}
 	};
 
@@ -120,28 +131,35 @@ export class BranchManager {
 	 */
 	ensure(key, fn) {
 		var batch = /** @type {Batch} */ (current_batch);
+		var defer = should_defer_append();
 
 		// key blocks in Svelte <5 had stupid semantics
-		if (this.#legacy && typeof key === 'object') {
+		if (this.#legacy && key !== null && typeof key === 'object') {
 			key = {};
 		}
 
 		if (fn && !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
-			});
+			if (defer) {
+				var fragment = document.createDocumentFragment();
+				var target = create_text();
+
+				fragment.append(target);
+
+				this.#offscreen.set(key, {
+					effect: branch(() => fn(target)),
+					fragment
+				});
+			} else {
+				this.#onscreen.set(
+					key,
+					branch(() => fn(this.anchor))
+				);
+			}
 		}
 
 		this.#batches.set(batch, key);
 
-		// TODO in the no-defer case, we could skip the offscreen step
-		if (should_defer_append()) {
+		if (defer) {
 			for (const [k, effect] of this.#onscreen) {
 				if (k === key) {
 					batch.skipped_effects.delete(effect);

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

@@ -8,13 +8,7 @@ import {
 	set_hydrating
 } from '../hydration.js';
 import { create_text, get_first_child } from '../operations.js';
-import {
-	block,
-	branch,
-	destroy_effect,
-	pause_effect,
-	resume_effect
-} from '../../reactivity/effects.js';
+import { block, teardown } from '../../reactivity/effects.js';
 import { set_should_intro } from '../../render.js';
 import { current_each_item, set_current_each_item } from './each.js';
 import { active_effect } from '../../runtime.js';
@@ -23,6 +17,7 @@ import { DEV } from 'esm-env';
 import { EFFECT_TRANSPARENT, ELEMENT_NODE } from '#client/constants';
 import { assign_nodes } from '../template.js';
 import { is_raw_text_element } from '../../../../utils.js';
+import { BranchManager } from './branches.js';
 
 /**
  * @param {Comment | Element} node
@@ -42,12 +37,6 @@ export function element(node, get_tag, is_svg, render_fn, get_namespace, locatio
 
 	var filename = DEV && location && component_context?.function[FILENAME];
 
-	/** @type {string | null} */
-	var tag;
-
-	/** @type {string | null} */
-	var current_tag;
-
 	/** @type {null | Element} */
 	var element = null;
 
@@ -58,46 +47,31 @@ export function element(node, get_tag, is_svg, render_fn, get_namespace, locatio
 
 	var anchor = /** @type {TemplateNode} */ (hydrating ? hydrate_node : node);
 
-	/** @type {Effect | null} */
-	var effect;
-
 	/**
 	 * The keyed `{#each ...}` item block, if any, that this element is inside.
 	 * We track this so we can set it when changing the element, allowing any
 	 * `animate:` directive to bind itself to the correct block
 	 */
 	var each_item_block = current_each_item;
 
+	var branches = new BranchManager(anchor, false);
+
 	block(() => {
 		const next_tag = get_tag() || null;
 		var ns = get_namespace ? get_namespace() : is_svg || next_tag === 'svg' ? NAMESPACE_SVG : null;
 
-		// Assumption: Noone changes the namespace but not the tag (what would that even mean?)
-		if (next_tag === tag) return;
-
-		// See explanation of `each_item_block` above
-		var previous_each_item = current_each_item;
-		set_current_each_item(each_item_block);
-
-		if (effect) {
-			if (next_tag === null) {
-				// start outro
-				pause_effect(effect, () => {
-					effect = null;
-					current_tag = null;
-				});
-			} else if (next_tag === current_tag) {
-				// same tag as is currently rendered — abort outro
-				resume_effect(effect);
-			} else {
-				// tag is changing — destroy immediately, render contents without intro transitions
-				destroy_effect(effect);
-				set_should_intro(false);
-			}
+		if (next_tag === null) {
+			branches.ensure(null, null);
+			set_should_intro(true);
+			return;
 		}
 
-		if (next_tag && next_tag !== current_tag) {
-			effect = branch(() => {
+		branches.ensure(next_tag, (anchor) => {
+			// See explanation of `each_item_block` above
+			var previous_each_item = current_each_item;
+			set_current_each_item(each_item_block);
+
+			if (next_tag) {
 				element = hydrating
 					? /** @type {Element} */ (element)
 					: ns
@@ -149,16 +123,31 @@ export function element(node, get_tag, is_svg, render_fn, get_namespace, locatio
 				/** @type {Effect} */ (active_effect).nodes_end = element;
 
 				anchor.before(element);
-			});
-		}
+			}
+
+			set_current_each_item(previous_each_item);
+
+			if (hydrating) {
+				set_hydrate_node(anchor);
+			}
+		});
 
-		tag = next_tag;
-		if (tag) current_tag = tag;
+		// revert to the default state after the effect has been created
 		set_should_intro(true);
 
-		set_current_each_item(previous_each_item);
+		return () => {
+			if (next_tag) {
+				// if we're in this callback because we're re-running the effect,
+				// disable intros (unless no element is currently displayed)
+				set_should_intro(false);
+			}
+		};
 	}, EFFECT_TRANSPARENT);
 
+	teardown(() => {
+		set_should_intro(true);
+	});
+
 	if (was_hydrating) {
 		set_hydrating(true);
 		set_hydrate_node(anchor);

packages/svelte/src/internal/client/render.js

@@ -137,6 +137,7 @@ export function hydrate(component, options) {
 		if (error !== HYDRATION_ERROR) {
 			// eslint-disable-next-line no-console
 			console.warn('Failed to hydrate: ', error);
+			console.error(error);
 		}
 
 		if (options.recover === false) {