Home / File/ svelte-element.js — svelte Source File

svelte-element.js — svelte Source File

Architecture documentation for svelte-element.js, a javascript file in the svelte codebase. 25 imports, 0 dependents.

File javascript ClientRuntime DOMOperations 25 imports 1 functions

Entity Profile

Dependency Diagram

graph LR
  d44c164a_8773_0ccd_b05e_92f2db5172c5["svelte-element.js"]
  73865c3c_2786_c9ac_d34f_b51d28b3a29e["constants.js"]
  d44c164a_8773_0ccd_b05e_92f2db5172c5 --> 73865c3c_2786_c9ac_d34f_b51d28b3a29e
  f3948b0d_b92a_0767_ba6c_832767f4e2bb["hydration.js"]
  d44c164a_8773_0ccd_b05e_92f2db5172c5 --> f3948b0d_b92a_0767_ba6c_832767f4e2bb
  b31601aa_35ce_7827_5394_99fb97fa27d2["hydrate_next"]
  d44c164a_8773_0ccd_b05e_92f2db5172c5 --> b31601aa_35ce_7827_5394_99fb97fa27d2
  40f27ad3_30bb_8f2a_3fb3_757088cf7428["set_hydrate_node"]
  d44c164a_8773_0ccd_b05e_92f2db5172c5 --> 40f27ad3_30bb_8f2a_3fb3_757088cf7428
  f5b61c69_d41c_bdb7_b931_5b8b3374332c["set_hydrating"]
  d44c164a_8773_0ccd_b05e_92f2db5172c5 --> f5b61c69_d41c_bdb7_b931_5b8b3374332c
  9a9bbc27_46b6_021c_6d77_f736ed4b40f0["operations.js"]
  d44c164a_8773_0ccd_b05e_92f2db5172c5 --> 9a9bbc27_46b6_021c_6d77_f736ed4b40f0
  ec54e18a_a454_5d8c_9e00_7bc16e4f49c4["create_text"]
  d44c164a_8773_0ccd_b05e_92f2db5172c5 --> ec54e18a_a454_5d8c_9e00_7bc16e4f49c4
  f3bd5a62_2879_ccbe_7046_712cbf9eeaab["get_first_child"]
  d44c164a_8773_0ccd_b05e_92f2db5172c5 --> f3bd5a62_2879_ccbe_7046_712cbf9eeaab
  1ae6fa4e_16ee_acdf_5e28_17eb0819fddb["effects.js"]
  d44c164a_8773_0ccd_b05e_92f2db5172c5 --> 1ae6fa4e_16ee_acdf_5e28_17eb0819fddb
  1bd7dd6f_4c22_6f44_9747_fc5ea0deaa7b["block"]
  d44c164a_8773_0ccd_b05e_92f2db5172c5 --> 1bd7dd6f_4c22_6f44_9747_fc5ea0deaa7b
  20340432_01a2_6741_abf4_60ccab51cdb3["teardown"]
  d44c164a_8773_0ccd_b05e_92f2db5172c5 --> 20340432_01a2_6741_abf4_60ccab51cdb3
  deb813bb_c5d2_3dfd_2554_606359abaa83["render.js"]
  d44c164a_8773_0ccd_b05e_92f2db5172c5 --> deb813bb_c5d2_3dfd_2554_606359abaa83
  d4f2071b_0f08_019b_a9cb_af73d3474607["set_should_intro"]
  d44c164a_8773_0ccd_b05e_92f2db5172c5 --> d4f2071b_0f08_019b_a9cb_af73d3474607
  bde4209f_8ffc_1594_4024_b1835a44bcf6["runtime.js"]
  d44c164a_8773_0ccd_b05e_92f2db5172c5 --> bde4209f_8ffc_1594_4024_b1835a44bcf6
  style d44c164a_8773_0ccd_b05e_92f2db5172c5 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

/** @import { Effect, EffectNodes, TemplateNode } from '#client' */
import { FILENAME, NAMESPACE_SVG } from '../../../../constants.js';
import {
	hydrate_next,
	hydrate_node,
	hydrating,
	set_hydrate_node,
	set_hydrating
} from '../hydration.js';
import { create_text, get_first_child } from '../operations.js';
import { block, teardown } from '../../reactivity/effects.js';
import { set_should_intro } from '../../render.js';
import { active_effect } from '../../runtime.js';
import { component_context, dev_stack } from '../../context.js';
import { DEV } from 'esm-env';
import { EFFECT_TRANSPARENT, ELEMENT_NODE } from '#client/constants';
import { assign_nodes } from '../template.js';
import { is_raw_text_element } from '../../../../utils.js';
import { BranchManager } from './branches.js';
import { set_animation_effect_override } from '../elements/transitions.js';

/**
 * @param {Comment | Element} node
 * @param {() => string} get_tag
 * @param {boolean} is_svg
 * @param {undefined | ((element: Element, anchor: Node | null) => void)} render_fn,
 * @param {undefined | (() => string)} get_namespace
 * @param {undefined | [number, number]} location
 * @returns {void}
 */
export function element(node, get_tag, is_svg, render_fn, get_namespace, location) {
	let was_hydrating = hydrating;

	if (hydrating) {
		hydrate_next();
	}

	var filename = DEV && location && component_context?.function[FILENAME];

	/** @type {null | Element} */
	var element = null;

	if (hydrating && hydrate_node.nodeType === ELEMENT_NODE) {
		element = /** @type {Element} */ (hydrate_node);
		hydrate_next();
	}

	var anchor = /** @type {TemplateNode} */ (hydrating ? hydrate_node : node);

	/**
	 * We track this so we can set it when changing the element, allowing any
	 * `animate:` directive to bind itself to the correct block
	 */
	var parent_effect = /** @type {Effect} */ (active_effect);

	var branches = new BranchManager(anchor, false);

	block(() => {
		const next_tag = get_tag() || null;
		var ns = get_namespace ? get_namespace() : is_svg || next_tag === 'svg' ? NAMESPACE_SVG : null;
// ... (93 more lines)

Domain

Subdomains

Functions

Frequently Asked Questions

What does svelte-element.js do?
svelte-element.js is a source file in the svelte codebase, written in javascript. It belongs to the ClientRuntime domain, DOMOperations subdomain.
What functions are defined in svelte-element.js?
svelte-element.js defines 1 function(s): element.
What does svelte-element.js depend on?
svelte-element.js imports 25 module(s): BranchManager, assign_nodes, block, branches.js, constants, constants.js, context.js, create_text, and 17 more.
Where is svelte-element.js in the architecture?
svelte-element.js is located at packages/svelte/src/internal/client/dom/blocks/svelte-element.js (domain: ClientRuntime, subdomain: DOMOperations, 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