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

html.js — svelte Source File

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

File javascript ClientRuntime Hydration 22 imports 2 functions

Entity Profile

Dependency Diagram

graph LR
  9c9641c6_8e9b_282d_184f_5515feedb7b5["html.js"]
  73865c3c_2786_c9ac_d34f_b51d28b3a29e["constants.js"]
  9c9641c6_8e9b_282d_184f_5515feedb7b5 --> 73865c3c_2786_c9ac_d34f_b51d28b3a29e
  1ae6fa4e_16ee_acdf_5e28_17eb0819fddb["effects.js"]
  9c9641c6_8e9b_282d_184f_5515feedb7b5 --> 1ae6fa4e_16ee_acdf_5e28_17eb0819fddb
  7eefb76e_3c72_e728_fb79_d79d39793729["remove_effect_dom"]
  9c9641c6_8e9b_282d_184f_5515feedb7b5 --> 7eefb76e_3c72_e728_fb79_d79d39793729
  cb33ef2f_2e6e_0042_436d_4ff6a84c5836["template_effect"]
  9c9641c6_8e9b_282d_184f_5515feedb7b5 --> cb33ef2f_2e6e_0042_436d_4ff6a84c5836
  f3948b0d_b92a_0767_ba6c_832767f4e2bb["hydration.js"]
  9c9641c6_8e9b_282d_184f_5515feedb7b5 --> f3948b0d_b92a_0767_ba6c_832767f4e2bb
  b31601aa_35ce_7827_5394_99fb97fa27d2["hydrate_next"]
  9c9641c6_8e9b_282d_184f_5515feedb7b5 --> b31601aa_35ce_7827_5394_99fb97fa27d2
  40f27ad3_30bb_8f2a_3fb3_757088cf7428["set_hydrate_node"]
  9c9641c6_8e9b_282d_184f_5515feedb7b5 --> 40f27ad3_30bb_8f2a_3fb3_757088cf7428
  a156992a_4c74_fff0_8871_1aae7581b781["reconciler.js"]
  9c9641c6_8e9b_282d_184f_5515feedb7b5 --> a156992a_4c74_fff0_8871_1aae7581b781
  0fd60e7d_ad18_dc03_875d_13156cdee4b4["create_fragment_from_html"]
  9c9641c6_8e9b_282d_184f_5515feedb7b5 --> 0fd60e7d_ad18_dc03_875d_13156cdee4b4
  2ab7c579_f011_f472_7847_c9e9979c6b2a["template.js"]
  9c9641c6_8e9b_282d_184f_5515feedb7b5 --> 2ab7c579_f011_f472_7847_c9e9979c6b2a
  e23e5c5c_05b1_afa5_e280_5c89012b55a7["assign_nodes"]
  9c9641c6_8e9b_282d_184f_5515feedb7b5 --> e23e5c5c_05b1_afa5_e280_5c89012b55a7
  df278ca2_0a6c_fefe_09f2_b397500fe3c2["warnings.js"]
  9c9641c6_8e9b_282d_184f_5515feedb7b5 --> df278ca2_0a6c_fefe_09f2_b397500fe3c2
  2aa63f4e_82c9_33e3_ac6c_5f3d46250522["utils.js"]
  9c9641c6_8e9b_282d_184f_5515feedb7b5 --> 2aa63f4e_82c9_33e3_ac6c_5f3d46250522
  d203a90b_640a_13eb_ea6d_b1a9df120247["hash"]
  9c9641c6_8e9b_282d_184f_5515feedb7b5 --> d203a90b_640a_13eb_ea6d_b1a9df120247
  style 9c9641c6_8e9b_282d_184f_5515feedb7b5 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

/** @import { Effect, TemplateNode } from '#client' */
import { FILENAME, HYDRATION_ERROR } from '../../../../constants.js';
import { remove_effect_dom, template_effect } from '../../reactivity/effects.js';
import { hydrate_next, hydrate_node, hydrating, set_hydrate_node } from '../hydration.js';
import { create_fragment_from_html } from '../reconciler.js';
import { assign_nodes } from '../template.js';
import * as w from '../../warnings.js';
import { hash, sanitize_location } from '../../../../utils.js';
import { DEV } from 'esm-env';
import { dev_current_component_function } from '../../context.js';
import { get_first_child, get_next_sibling } from '../operations.js';
import { active_effect } from '../../runtime.js';
import { COMMENT_NODE } from '#client/constants';

/**
 * @param {Element} element
 * @param {string | null} server_hash
 * @param {string} value
 */
function check_hash(element, server_hash, value) {
	if (!server_hash || server_hash === hash(String(value ?? ''))) return;

	let location;

	// @ts-expect-error
	const loc = element.__svelte_meta?.loc;
	if (loc) {
		location = `near ${loc.file}:${loc.line}:${loc.column}`;
	} else if (dev_current_component_function?.[FILENAME]) {
		location = `in ${dev_current_component_function[FILENAME]}`;
	}

	w.hydration_html_changed(sanitize_location(location));
}

/**
 * @param {Element | Text | Comment} node
 * @param {() => string} get_value
 * @param {boolean} [svg]
 * @param {boolean} [mathml]
 * @param {boolean} [skip_warning]
 * @returns {void}
 */
export function html(node, get_value, svg = false, mathml = false, skip_warning = false) {
	var anchor = node;

	var value = '';

	template_effect(() => {
		var effect = /** @type {Effect} */ (active_effect);

		if (value === (value = get_value() ?? '')) {
			if (hydrating) hydrate_next();
			return;
		}

		if (effect.nodes !== null) {
			remove_effect_dom(effect.nodes.start, /** @type {TemplateNode} */ (effect.nodes.end));
			effect.nodes = null;
		}
// ... (62 more lines)

Domain

Subdomains

Functions

Dependencies

Source

Frequently Asked Questions

What does html.js do?
html.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 html.js?
html.js defines 2 function(s): check_hash, html.
What does html.js depend on?
html.js imports 22 module(s): assign_nodes, constants, constants.js, context.js, create_fragment_from_html, effects.js, esm-env, get_first_child, and 14 more.
Where is html.js in the architecture?
html.js is located at packages/svelte/src/internal/client/dom/blocks/html.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