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

SvelteElement.js — svelte Source File

Architecture documentation for SvelteElement.js, a javascript file in the svelte codebase. 13 imports, 1 dependents.

File javascript Compiler Transformer 13 imports 1 dependents 1 functions

Entity Profile

Dependency Diagram

graph LR
  1e080b62_b957_2cdd_1807_50b2a8298518["SvelteElement.js"]
  62f818c8_e890_17ed_5ec1_92f953d4a7a6["state.js"]
  1e080b62_b957_2cdd_1807_50b2a8298518 --> 62f818c8_e890_17ed_5ec1_92f953d4a7a6
  0c5c28a7_226d_4e7c_e75e_0853c0a9fc2c["ast.js"]
  1e080b62_b957_2cdd_1807_50b2a8298518 --> 0c5c28a7_226d_4e7c_e75e_0853c0a9fc2c
  653284b2_68fd_eee3_0064_918a4c065d4a["is_text_attribute"]
  1e080b62_b957_2cdd_1807_50b2a8298518 --> 653284b2_68fd_eee3_0064_918a4c065d4a
  f3fad5a9_6b91_ed4f_9331_7f9fc18491c3["utils.js"]
  1e080b62_b957_2cdd_1807_50b2a8298518 --> f3fad5a9_6b91_ed4f_9331_7f9fc18491c3
  a475d4d0_a1fa_71f2_13d3_ba42155a8763["determine_namespace_for_children"]
  1e080b62_b957_2cdd_1807_50b2a8298518 --> a475d4d0_a1fa_71f2_13d3_ba42155a8763
  7880f852_1b7b_9ea3_4e22_732f4a684bbe["element.js"]
  1e080b62_b957_2cdd_1807_50b2a8298518 --> 7880f852_1b7b_9ea3_4e22_732f4a684bbe
  e31bc2c2_91c1_b9a9_f78a_2832bddce6c5["build_attribute_value"]
  1e080b62_b957_2cdd_1807_50b2a8298518 --> e31bc2c2_91c1_b9a9_f78a_2832bddce6c5
  ef858948_a3b7_f31d_ad40_16743e642d00["build_attribute_effect"]
  1e080b62_b957_2cdd_1807_50b2a8298518 --> ef858948_a3b7_f31d_ad40_16743e642d00
  573f9041_7062_5e5d_80e6_7292990c13c5["build_set_class"]
  1e080b62_b957_2cdd_1807_50b2a8298518 --> 573f9041_7062_5e5d_80e6_7292990c13c5
  d04d7971_88df_542d_dd4f_26170ce6f581["utils.js"]
  1e080b62_b957_2cdd_1807_50b2a8298518 --> d04d7971_88df_542d_dd4f_26170ce6f581
  0b544eaa_6377_1ef6_ac35_e0b4cbde3fbc["build_render_statement"]
  1e080b62_b957_2cdd_1807_50b2a8298518 --> 0b544eaa_6377_1ef6_ac35_e0b4cbde3fbc
  be60a9d7_77eb_5ad3_ab7e_2f9bd93a3db1["Memoizer"]
  1e080b62_b957_2cdd_1807_50b2a8298518 --> be60a9d7_77eb_5ad3_ab7e_2f9bd93a3db1
  95c28355_f14c_c3cd_5a03_d5a53ca255bc["builders"]
  1e080b62_b957_2cdd_1807_50b2a8298518 --> 95c28355_f14c_c3cd_5a03_d5a53ca255bc
  7665e008_f37d_b860_a594_f2539a66af4e["transform-client.js"]
  7665e008_f37d_b860_a594_f2539a66af4e --> 1e080b62_b957_2cdd_1807_50b2a8298518
  style 1e080b62_b957_2cdd_1807_50b2a8298518 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

/** @import { BlockStatement, Expression, ExpressionStatement, Statement } from 'estree' */
/** @import { AST } from '#compiler' */
/** @import { ComponentContext } from '../types' */
import { dev, locator } from '../../../../state.js';
import { is_text_attribute } from '../../../../utils/ast.js';
import * as b from '#compiler/builders';
import { determine_namespace_for_children } from '../../utils.js';
import {
	build_attribute_value,
	build_attribute_effect,
	build_set_class
} from './shared/element.js';
import { build_render_statement, Memoizer } from './shared/utils.js';

/**
 * @param {AST.SvelteElement} node
 * @param {ComponentContext} context
 */
export function SvelteElement(node, context) {
	context.state.template.push_comment();

	/** @type {Array<AST.Attribute | AST.SpreadAttribute>} */
	const attributes = [];

	/** @type {AST.Attribute['value'] | undefined} */
	let dynamic_namespace = undefined;

	/** @type {AST.ClassDirective[]} */
	const class_directives = [];

	/** @type {AST.StyleDirective[]} */
	const style_directives = [];

	/** @type {ExpressionStatement[]} */
	const statements = [];

	// Create a temporary context which picks up the init/update statements.
	// They'll then be added to the function parameter of $.element
	const element_id = b.id(context.state.scope.generate('$$element'));

	/** @type {ComponentContext} */
	const inner_context = {
		...context,
		state: {
			...context.state,
			node: element_id,
			init: [],
			update: [],
			after_update: [],
			memoizer: new Memoizer()
		}
	};

	for (const attribute of node.attributes) {
		if (attribute.type === 'Attribute') {
			if (attribute.name === 'xmlns' && !is_text_attribute(attribute)) {
				dynamic_namespace = attribute.value;
			}
			attributes.push(attribute);
		} else if (attribute.type === 'SpreadAttribute') {
// ... (102 more lines)

Domain

Subdomains

Functions

Dependencies

Imported By

Source

Frequently Asked Questions

What does SvelteElement.js do?
SvelteElement.js is a source file in the svelte codebase, written in javascript. It belongs to the Compiler domain, Transformer subdomain.
What functions are defined in SvelteElement.js?
SvelteElement.js defines 1 function(s): SvelteElement.
What does SvelteElement.js depend on?
SvelteElement.js imports 13 module(s): Memoizer, ast.js, build_attribute_effect, build_attribute_value, build_render_statement, build_set_class, builders, determine_namespace_for_children, and 5 more.
What files import SvelteElement.js?
SvelteElement.js is imported by 1 file(s): transform-client.js.
Where is SvelteElement.js in the architecture?
SvelteElement.js is located at packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteElement.js (domain: Compiler, subdomain: Transformer, directory: packages/svelte/src/compiler/phases/3-transform/client/visitors).

Analyze Your Own Codebase

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

Try Supermodel Free