append() — svelte Function Reference

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

Function javascript ClientRuntime Hydration calls 1 called by 3

Entity Profile

ClientRuntime→ Hydration→ append() — svelte Function Reference

Dependency Diagram

graph TD
  e3f9d623_9f97_2d01_0473_63e757414179["append()"]
  2ab7c579_f011_f472_7847_c9e9979c6b2a["template.js"]
  e3f9d623_9f97_2d01_0473_63e757414179 -->|defined in| 2ab7c579_f011_f472_7847_c9e9979c6b2a
  0ea8cc86_b858_f4aa_3e5d_68ffcb0df96a["element()"]
  0ea8cc86_b858_f4aa_3e5d_68ffcb0df96a -->|calls| e3f9d623_9f97_2d01_0473_63e757414179
  9377bbc7_f1f5_56f6_87e1_cfa79859a6b7["fragment_from_tree()"]
  9377bbc7_f1f5_56f6_87e1_cfa79859a6b7 -->|calls| e3f9d623_9f97_2d01_0473_63e757414179
  51b89fea_28f7_fbcf_548b_82970d1c16f9["comment()"]
  51b89fea_28f7_fbcf_548b_82970d1c16f9 -->|calls| e3f9d623_9f97_2d01_0473_63e757414179
  b31601aa_35ce_7827_5394_99fb97fa27d2["hydrate_next()"]
  e3f9d623_9f97_2d01_0473_63e757414179 -->|calls| b31601aa_35ce_7827_5394_99fb97fa27d2
  style e3f9d623_9f97_2d01_0473_63e757414179 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/svelte/src/internal/client/dom/template.js lines 349–370

export function append(anchor, dom) {
	if (hydrating) {
		var effect = /** @type {Effect & { nodes: EffectNodes }} */ (active_effect);

		// When hydrating and outer component and an inner component is async, i.e. blocked on a promise,
		// then by the time the inner resolves we have already advanced to the end of the hydrated nodes
		// of the parent component. Check for defined for that reason to avoid rewinding the parent's end marker.
		if ((effect.f & EFFECT_RAN) === 0 || effect.nodes.end === null) {
			effect.nodes.end = hydrate_node;
		}

		hydrate_next();
		return;
	}

	if (anchor === null) {
		// edge case — void `<svelte:element>` with content
		return;
	}

	anchor.before(/** @type {Node} */ (dom));
}