svelte Architecture Docs
Home / File/ key.js — svelte Source File

key.js — svelte Source File

Architecture documentation for key.js, a javascript file in the svelte codebase. 8 imports, 0 dependents.

File javascript ClientRuntime Hydration 8 imports 1 functions

Entity Profile

Dependency Diagram

graph LR
  bd26e691_6923_66a9_e681_a0f9ca8ce88b["key.js"]
  48cf26f8_bf34_fd7a_3d52_cc963051e167["context.js"]
  bd26e691_6923_66a9_e681_a0f9ca8ce88b --> 48cf26f8_bf34_fd7a_3d52_cc963051e167
  ad360ec3_c98b_ac47_212b_923d0363a0ce["is_runes"]
  bd26e691_6923_66a9_e681_a0f9ca8ce88b --> ad360ec3_c98b_ac47_212b_923d0363a0ce
  1ae6fa4e_16ee_acdf_5e28_17eb0819fddb["effects.js"]
  bd26e691_6923_66a9_e681_a0f9ca8ce88b --> 1ae6fa4e_16ee_acdf_5e28_17eb0819fddb
  1bd7dd6f_4c22_6f44_9747_fc5ea0deaa7b["block"]
  bd26e691_6923_66a9_e681_a0f9ca8ce88b --> 1bd7dd6f_4c22_6f44_9747_fc5ea0deaa7b
  f3948b0d_b92a_0767_ba6c_832767f4e2bb["hydration.js"]
  bd26e691_6923_66a9_e681_a0f9ca8ce88b --> f3948b0d_b92a_0767_ba6c_832767f4e2bb
  b31601aa_35ce_7827_5394_99fb97fa27d2["hydrate_next"]
  bd26e691_6923_66a9_e681_a0f9ca8ce88b --> b31601aa_35ce_7827_5394_99fb97fa27d2
  ee9aaeee_d18b_8f23_1c50_ace68f975516["branches.js"]
  bd26e691_6923_66a9_e681_a0f9ca8ce88b --> ee9aaeee_d18b_8f23_1c50_ace68f975516
  60ab4ae8_779f_562b_010b_c2c26a4235d8["BranchManager"]
  bd26e691_6923_66a9_e681_a0f9ca8ce88b --> 60ab4ae8_779f_562b_010b_c2c26a4235d8
  style bd26e691_6923_66a9_e681_a0f9ca8ce88b fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

/** @import { TemplateNode } from '#client' */
import { is_runes } from '../../context.js';
import { block } from '../../reactivity/effects.js';
import { hydrate_next, hydrating } from '../hydration.js';
import { BranchManager } from './branches.js';

const NAN = Symbol('NaN');

/**
 * @template V
 * @param {TemplateNode} node
 * @param {() => V} get_key
 * @param {(anchor: Node) => TemplateNode | void} render_fn
 * @returns {void}
 */
export function key(node, get_key, render_fn) {
	if (hydrating) {
		hydrate_next();
	}

	var branches = new BranchManager(node);

	var legacy = !is_runes();

	block(() => {
		var key = get_key();

		// NaN !== NaN, hence we do this workaround to not trigger remounts unnecessarily
		if (key !== key) {
			key = /** @type {any} */ (NAN);
		}

		// key blocks in Svelte <5 had stupid semantics
		if (legacy && key !== null && typeof key === 'object') {
			key = /** @type {V} */ ({});
		}

		branches.ensure(key, render_fn);
	});
}

Domain

Subdomains

Functions

Dependencies

Source

Frequently Asked Questions

What does key.js do?
key.js is a source file in the svelte codebase, written in javascript. It belongs to the ClientRuntime domain, Hydration subdomain.
What functions are defined in key.js?
key.js defines 1 function(s): key.
What does key.js depend on?
key.js imports 8 module(s): BranchManager, block, branches.js, context.js, effects.js, hydrate_next, hydration.js, is_runes.
Where is key.js in the architecture?
key.js is located at packages/svelte/src/internal/client/dom/blocks/key.js (domain: ClientRuntime, subdomain: Hydration, directory: packages/svelte/src/internal/client/dom/blocks).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free