Home / File/ elements.js — svelte Source File

elements.js — svelte Source File

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

File javascript ClientRuntime Hydration 4 imports 3 functions

Entity Profile

Dependency Diagram

graph LR
  3ab252dc_d6ce_1bc4_5889_915271359ea9["elements.js"]
  73865c3c_2786_c9ac_d34f_b51d28b3a29e["constants.js"]
  3ab252dc_d6ce_1bc4_5889_915271359ea9 --> 73865c3c_2786_c9ac_d34f_b51d28b3a29e
  f3948b0d_b92a_0767_ba6c_832767f4e2bb["hydration.js"]
  3ab252dc_d6ce_1bc4_5889_915271359ea9 --> f3948b0d_b92a_0767_ba6c_832767f4e2bb
  48cf26f8_bf34_fd7a_3d52_cc963051e167["context.js"]
  3ab252dc_d6ce_1bc4_5889_915271359ea9 --> 48cf26f8_bf34_fd7a_3d52_cc963051e167
  54c2bfce_50b6_b8cc_4371_e1e14f283fb3["constants"]
  3ab252dc_d6ce_1bc4_5889_915271359ea9 --> 54c2bfce_50b6_b8cc_4371_e1e14f283fb3
  style 3ab252dc_d6ce_1bc4_5889_915271359ea9 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

/** @import { SourceLocation } from '#client' */
import { COMMENT_NODE, DOCUMENT_FRAGMENT_NODE, ELEMENT_NODE } from '#client/constants';
import { HYDRATION_END, HYDRATION_START, HYDRATION_START_ELSE } from '../../../constants.js';
import { hydrating } from '../dom/hydration.js';
import { dev_stack } from '../context.js';

/**
 * @param {any} fn
 * @param {string} filename
 * @param {SourceLocation[]} locations
 * @returns {any}
 */
export function add_locations(fn, filename, locations) {
	return (/** @type {any[]} */ ...args) => {
		const dom = fn(...args);

		var node = hydrating ? dom : dom.nodeType === DOCUMENT_FRAGMENT_NODE ? dom.firstChild : dom;
		assign_locations(node, filename, locations);

		return dom;
	};
}

/**
 * @param {Element} element
 * @param {string} filename
 * @param {SourceLocation} location
 */
function assign_location(element, filename, location) {
	// @ts-expect-error
	element.__svelte_meta = {
		parent: dev_stack,
		loc: { file: filename, line: location[0], column: location[1] }
	};

	if (location[2]) {
		assign_locations(element.firstChild, filename, location[2]);
	}
}

/**
 * @param {Node | null} node
 * @param {string} filename
 * @param {SourceLocation[]} locations
 */
function assign_locations(node, filename, locations) {
	var i = 0;
	var depth = 0;

	while (node && i < locations.length) {
		if (hydrating && node.nodeType === COMMENT_NODE) {
			var comment = /** @type {Comment} */ (node);
			if (comment.data === HYDRATION_START || comment.data === HYDRATION_START_ELSE) depth += 1;
			else if (comment.data[0] === HYDRATION_END) depth -= 1;
		}

		if (depth === 0 && node.nodeType === ELEMENT_NODE) {
			assign_location(/** @type {Element} */ (node), filename, locations[i++]);
		}

		node = node.nextSibling;
	}
}

Domain

Subdomains

Dependencies

Frequently Asked Questions

What does elements.js do?
elements.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 elements.js?
elements.js defines 3 function(s): add_locations, assign_location, assign_locations.
What does elements.js depend on?
elements.js imports 4 module(s): constants, constants.js, context.js, hydration.js.
Where is elements.js in the architecture?
elements.js is located at packages/svelte/src/internal/client/dev/elements.js (domain: ClientRuntime, subdomain: Hydration, directory: packages/svelte/src/internal/client/dev).

Analyze Your Own Codebase

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

Try Supermodel Free