run_scripts() — svelte Function Reference

Architecture documentation for the run_scripts() function in template.js from the svelte codebase.

Function javascript ClientRuntime Hydration called by 1

Entity Profile

ClientRuntime→ Hydration→ run_scripts() — svelte Function Reference

Dependency Diagram

graph TD
  2e32902e_b976_516f_5891_e983434bba5e["run_scripts()"]
  2ab7c579_f011_f472_7847_c9e9979c6b2a["template.js"]
  2e32902e_b976_516f_5891_e983434bba5e -->|defined in| 2ab7c579_f011_f472_7847_c9e9979c6b2a
  2fdb27bb_b258_ccd4_0845_eaace2376731["with_script()"]
  2fdb27bb_b258_ccd4_0845_eaace2376731 -->|calls| 2e32902e_b976_516f_5891_e983434bba5e
  style 2e32902e_b976_516f_5891_e983434bba5e fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/svelte/src/internal/client/dom/template.js lines 265–296

function run_scripts(node) {
	// scripts were SSR'd, in which case they will run
	if (hydrating) return node;

	const is_fragment = node.nodeType === DOCUMENT_FRAGMENT_NODE;
	const scripts =
		/** @type {HTMLElement} */ (node).tagName === 'SCRIPT'
			? [/** @type {HTMLScriptElement} */ (node)]
			: node.querySelectorAll('script');

	const effect = /** @type {Effect & { nodes: EffectNodes }} */ (active_effect);

	for (const script of scripts) {
		const clone = document.createElement('script');
		for (var attribute of script.attributes) {
			clone.setAttribute(attribute.name, attribute.value);
		}

		clone.textContent = script.textContent;

		// 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) {
			effect.nodes.start = clone;
		}
		if (is_fragment ? node.lastChild === script : node === script) {
			effect.nodes.end = clone;
		}

		script.replaceWith(clone);
	}
	return node;
}