svelte Architecture Docs
Home / Function/ hydrate() — svelte Function Reference

hydrate() — svelte Function Reference

Architecture documentation for the hydrate() function in render.js from the svelte codebase.

Function javascript ClientRuntime Hydration calls 9

Entity Profile

Dependency Diagram

graph TD
  e6912e2f_bd46_b7e4_ae8b_8a5955a81c03["hydrate()"]
  deb813bb_c5d2_3dfd_2554_606359abaa83["render.js"]
  e6912e2f_bd46_b7e4_ae8b_8a5955a81c03 -->|defined in| deb813bb_c5d2_3dfd_2554_606359abaa83
  a413fb77_0391_6be3_509e_911e3ab4e488["init_operations()"]
  e6912e2f_bd46_b7e4_ae8b_8a5955a81c03 -->|calls| a413fb77_0391_6be3_509e_911e3ab4e488
  f3bd5a62_2879_ccbe_7046_712cbf9eeaab["get_first_child()"]
  e6912e2f_bd46_b7e4_ae8b_8a5955a81c03 -->|calls| f3bd5a62_2879_ccbe_7046_712cbf9eeaab
  4776c976_30bb_448d_921d_ee70a7fa0135["get_next_sibling()"]
  e6912e2f_bd46_b7e4_ae8b_8a5955a81c03 -->|calls| 4776c976_30bb_448d_921d_ee70a7fa0135
  f5b61c69_d41c_bdb7_b931_5b8b3374332c["set_hydrating()"]
  e6912e2f_bd46_b7e4_ae8b_8a5955a81c03 -->|calls| f5b61c69_d41c_bdb7_b931_5b8b3374332c
  40f27ad3_30bb_8f2a_3fb3_757088cf7428["set_hydrate_node()"]
  e6912e2f_bd46_b7e4_ae8b_8a5955a81c03 -->|calls| 40f27ad3_30bb_8f2a_3fb3_757088cf7428
  95c17f0f_1042_263c_3de2_f8ab899408b0["_mount()"]
  e6912e2f_bd46_b7e4_ae8b_8a5955a81c03 -->|calls| 95c17f0f_1042_263c_3de2_f8ab899408b0
  ec86ea58_f605_b2e0_e8f9_0733d8c8355e["hydration_failed()"]
  e6912e2f_bd46_b7e4_ae8b_8a5955a81c03 -->|calls| ec86ea58_f605_b2e0_e8f9_0733d8c8355e
  7bff6ec5_15bb_4289_1bd5_99cb794400ed["clear_text_content()"]
  e6912e2f_bd46_b7e4_ae8b_8a5955a81c03 -->|calls| 7bff6ec5_15bb_4289_1bd5_99cb794400ed
  855d318b_fb8d_deea_1877_351d93513f13["mount()"]
  e6912e2f_bd46_b7e4_ae8b_8a5955a81c03 -->|calls| 855d318b_fb8d_deea_1877_351d93513f13
  style e6912e2f_bd46_b7e4_ae8b_8a5955a81c03 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/svelte/src/internal/client/render.js lines 94–150

export function hydrate(component, options) {
	init_operations();
	options.intro = options.intro ?? false;
	const target = options.target;
	const was_hydrating = hydrating;
	const previous_hydrate_node = hydrate_node;

	try {
		var anchor = get_first_child(target);

		while (
			anchor &&
			(anchor.nodeType !== COMMENT_NODE || /** @type {Comment} */ (anchor).data !== HYDRATION_START)
		) {
			anchor = get_next_sibling(anchor);
		}

		if (!anchor) {
			throw HYDRATION_ERROR;
		}

		set_hydrating(true);
		set_hydrate_node(/** @type {Comment} */ (anchor));

		const instance = _mount(component, { ...options, anchor });

		set_hydrating(false);

		return /**  @type {Exports} */ (instance);
	} catch (error) {
		// re-throw Svelte errors - they are certainly not related to hydration
		if (
			error instanceof Error &&
			error.message.split('\n').some((line) => line.startsWith('https://svelte.dev/e/'))
		) {
			throw error;
		}
		if (error !== HYDRATION_ERROR) {
			// eslint-disable-next-line no-console
			console.warn('Failed to hydrate: ', error);
		}

		if (options.recover === false) {
			e.hydration_failed();
		}

		// If an error occurred above, the operations might not yet have been initialised.
		init_operations();
		clear_text_content(target);

		set_hydrating(false);
		return mount(component, options);
	} finally {
		set_hydrating(was_hydrating);
		set_hydrate_node(previous_hydrate_node);
	}
}

Domain

Subdomains

Defined In

Calls

Source

Frequently Asked Questions

What does hydrate() do?
hydrate() is a function in the svelte codebase, defined in packages/svelte/src/internal/client/render.js.
Where is hydrate() defined?
hydrate() is defined in packages/svelte/src/internal/client/render.js at line 94.
What does hydrate() call?
hydrate() calls 9 function(s): _mount, clear_text_content, get_first_child, get_next_sibling, hydration_failed, init_operations, mount, set_hydrate_node, and 1 more.

Analyze Your Own Codebase

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

Try Supermodel Free