create_item() — svelte Function Reference

Architecture documentation for the create_item() function in each.js from the svelte codebase.

Function javascript ClientRuntime Hydration calls 3 called by 1

Entity Profile

ClientRuntime→ Hydration→ create_item() — svelte Function Reference

Dependency Diagram

graph TD
  a433c00f_4d97_9041_6d87_ef0086b2aea7["create_item()"]
  ca0d28d0_c4b0_db5c_32c9_bdad64d5deaa["each.js"]
  a433c00f_4d97_9041_6d87_ef0086b2aea7 -->|defined in| ca0d28d0_c4b0_db5c_32c9_bdad64d5deaa
  7f76e82e_4ed8_1525_9136_2ae67868d44e["each()"]
  7f76e82e_4ed8_1525_9136_2ae67868d44e -->|calls| a433c00f_4d97_9041_6d87_ef0086b2aea7
  03788141_01d2_5299_6e22_4211e661afe4["mutable_source()"]
  a433c00f_4d97_9041_6d87_ef0086b2aea7 -->|calls| 03788141_01d2_5299_6e22_4211e661afe4
  1e2f7428_6050_5cb7_69db_bf5db719f6d1["source()"]
  a433c00f_4d97_9041_6d87_ef0086b2aea7 -->|calls| 1e2f7428_6050_5cb7_69db_bf5db719f6d1
  4ca1b5f2_087e_afec_72d9_534a30fbfe1f["branch()"]
  a433c00f_4d97_9041_6d87_ef0086b2aea7 -->|calls| 4ca1b5f2_087e_afec_72d9_534a30fbfe1f
  style a433c00f_4d97_9041_6d87_ef0086b2aea7 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/svelte/src/internal/client/dom/blocks/each.js lines 611–641

function create_item(items, anchor, value, key, index, render_fn, flags, get_collection) {
	var v =
		(flags & EACH_ITEM_REACTIVE) !== 0
			? (flags & EACH_ITEM_IMMUTABLE) === 0
				? mutable_source(value, false, false)
				: source(value)
			: null;

	var i = (flags & EACH_INDEX_REACTIVE) !== 0 ? source(index) : null;

	if (DEV && v) {
		// For tracing purposes, we need to link the source signal we create with the
		// collection + index so that tracing works as intended
		v.trace = () => {
			// eslint-disable-next-line @typescript-eslint/no-unused-expressions
			get_collection()[i?.v ?? index];
		};
	}

	return {
		v,
		i,
		e: branch(() => {
			render_fn(anchor, v ?? value, i ?? index, get_collection);

			return () => {
				items.delete(key);
			};
		})
	};
}