chore: use template_effect for html tags (#15779)

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

@@ -1,6 +1,6 @@
 /** @import { Effect, TemplateNode } from '#client' */
 import { FILENAME, HYDRATION_ERROR } from '../../../../constants.js';
-import { block, branch, destroy_effect } from '../../reactivity/effects.js';
+import { remove_effect_dom, template_effect } from '../../reactivity/effects.js';
 import { hydrate_next, hydrate_node, hydrating, set_hydrate_node } from '../hydration.js';
 import { create_fragment_from_html } from '../reconciler.js';
 import { assign_nodes } from '../template.js';
@@ -9,6 +9,7 @@ import { hash, sanitize_location } from '../../../../utils.js';
 import { DEV } from 'esm-env';
 import { dev_current_component_function } from '../../context.js';
 import { get_first_child, get_next_sibling } from '../operations.js';
+import { active_effect } from '../../runtime.js';
 
 /**
  * @param {Element} element
@@ -44,25 +45,21 @@ export function html(node, get_value, svg = false, mathml = false, skip_warning
 
 	var value = '';
 
-	/** @type {Effect | undefined} */
+	template_effect(() => {
-	var effect;
+		var effect = /** @type {Effect} */ (active_effect);
 
-	block(() => {
 		if (value === (value = get_value() ?? '')) {
-			if (hydrating) {
+			if (hydrating) hydrate_next();
-				hydrate_next();
-			}
 			return;
 		}
 
-		if (effect !== undefined) {
+		if (effect.nodes_start !== null) {
-			destroy_effect(effect);
+			remove_effect_dom(effect.nodes_start, /** @type {TemplateNode} */ (effect.nodes_end));
-			effect = undefined;
+			effect.nodes_start = effect.nodes_end = null;
 		}
 
 		if (value === '') return;
 
-		effect = branch(() => {
 		if (hydrating) {
 			// We're deliberately not trying to repair mismatches between server and client,
 			// as it's costly and error-prone (and it's an edge case to have a mismatch anyway)
@@ -70,10 +67,7 @@ export function html(node, get_value, svg = false, mathml = false, skip_warning
 			var next = hydrate_next();
 			var last = next;
 
-				while (
+			while (next !== null && (next.nodeType !== 8 || /** @type {Comment} */ (next).data !== '')) {
-					next !== null &&
-					(next.nodeType !== 8 || /** @type {Comment} */ (next).data !== '')
-				) {
 				last = next;
 				next = /** @type {TemplateNode} */ (get_next_sibling(next));
 			}
@@ -118,5 +112,4 @@ export function html(node, get_value, svg = false, mathml = false, skip_warning
 			anchor.before(node);
 		}
 	});
-	});
 }

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

@@ -427,18 +427,7 @@ export function destroy_effect(effect, remove_dom = true) {
 	var removed = false;
 
 	if ((remove_dom || (effect.f & HEAD_EFFECT) !== 0) && effect.nodes_start !== null) {
-		/** @type {TemplateNode | null} */
+		remove_effect_dom(effect.nodes_start, /** @type {TemplateNode} */ (effect.nodes_end));
-		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));
-
-			node.remove();
-			node = next;
-		}
-
 		removed = true;
 	}
 
@@ -480,6 +469,21 @@ export function destroy_effect(effect, remove_dom = true) {
 			null;
 }
 
+/**
+ *
+ * @param {TemplateNode | null} node
+ * @param {TemplateNode} end
+ */
+export function remove_effect_dom(node, end) {
+	while (node !== null) {
+		/** @type {TemplateNode | null} */
+		var next = node === end ? null : /** @type {TemplateNode} */ (get_next_sibling(node));
+
+		node.remove();
+		node = next;
+	}
+}
+
 /**
  * Detach an effect from the effect tree, freeing up memory and
  * reducing the amount of work that happens on subsequent traversals