run_scripts return the new node

Author: adiguba

packages/svelte/src/internal/client/dom/template.js

@@ -82,7 +82,7 @@ export function template_with_script(content, flags) {
 
 		if (first) {
 			first = false;
-			run_scripts(node);
+			node = run_scripts(node);
 		}
 
 		return node;
@@ -161,7 +161,7 @@ export function svg_template_with_script(content, flags) {
 
 		if (first) {
 			first = false;
-			run_scripts(node);
+			node = run_scripts(node);
 		}
 
 		return node;
@@ -178,52 +178,62 @@ export function mathml_template(content, flags) {
 	return ns_template(content, flags, 'math');
 }
 
+/**
+ * Clone a SCRIPT
+ * @param {HTMLScriptElement} script
+ * @returns {HTMLScriptElement}
+ */
+function clone_script(script) {
+	const clone = document.createElement('script');
+	for (var attribute of script.attributes) {
+		clone.setAttribute(attribute.name, attribute.value);
+	}
+	clone.textContent = script.textContent;
+	return clone;
+}
+
 /**
  * Creating a document fragment from HTML that contains script tags will not execute
  * the scripts. We need to replace the script tags with new ones so that they are executed.
  * @param {Element | DocumentFragment} node
+ * @returns {Element | DocumentFragment}
  */
 function run_scripts(node) {
 	// scripts were SSR'd, in which case they will run
-	if (hydrating) return;
+	if (hydrating) return node;
 
-	const is_fragment = node.nodeType === 11;
-	const scripts =
-		/** @type {HTMLElement} */ (node).tagName === 'SCRIPT'
-			? [/** @type {HTMLScriptElement} */ (node)]
-			: node.querySelectorAll('script');
 	const effect = /** @type {Effect} */ (current_effect);
 
-	for (const script of scripts) {
-		const clone = document.createElement('script');
-		for (var attribute of script.attributes) {
-			clone.setAttribute(attribute.name, attribute.value);
-		}
+	if (/** @type {HTMLElement} */ (node).tagName === 'SCRIPT') {
+		const clone = clone_script(/** @type {HTMLScriptElement} */ (node));
 
-		clone.textContent = script.textContent;
+		// The script has changed - if it's at the edges, the effect now points at dead nodes
+		effect.nodes_start = clone;
+		effect.nodes_end = clone;
+
+		// return the cloned script
+		return clone;
+	}
+
+	if (node.nodeType === 11) {
+		// fragment
+		const scripts = node.querySelectorAll('script');
+
+		for (const script of scripts) {
+			const clone = clone_script(script);
 
-		const replace = () => {
 			// The script has changed - if it's at the edges, the effect now points at dead nodes
-			if (is_fragment ? node.firstChild === script : node === script) {
+			if (node.firstChild === script) {
 				effect.nodes_start = clone;
 			}
-			if (is_fragment ? node.lastChild === script : node === script) {
+			if (node.lastChild === script) {
 				effect.nodes_end = clone;
 			}
 
 			script.replaceWith(clone);
-		};
-
-		// If node === script tag, replaceWith will do nothing because there's no parent yet,
-		// waiting until that's the case using an effect solves this.
-		// Don't do it in other circumstances or we could accidentally execute scripts
-		// in an adjacent @html tag that was instantiated in the meantime.
-		if (script === node) {
-			queue_micro_task(replace);
-		} else {
-			replace();
 		}
 	}
+	return node;
 }
 
 /**