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

component.js — svelte Source File

Architecture documentation for component.js, a javascript file in the svelte codebase. 17 imports, 3 dependents.

File javascript Compiler Transformer 17 imports 3 dependents 1 functions

Entity Profile

Dependency Diagram

graph LR
  be3a40b1_7e88_8a0c_e231_56c97bd7899f["component.js"]
  62f818c8_e890_17ed_5ec1_92f953d4a7a6["state.js"]
  be3a40b1_7e88_8a0c_e231_56c97bd7899f --> 62f818c8_e890_17ed_5ec1_92f953d4a7a6
  7a7783f8_ffa6_0cc3_61b0_031882649535["is_ignored"]
  be3a40b1_7e88_8a0c_e231_56c97bd7899f --> 7a7783f8_ffa6_0cc3_61b0_031882649535
  0c5c28a7_226d_4e7c_e75e_0853c0a9fc2c["ast.js"]
  be3a40b1_7e88_8a0c_e231_56c97bd7899f --> 0c5c28a7_226d_4e7c_e75e_0853c0a9fc2c
  f6625393_617b_8f3b_aaa5_b87527fde52f["get_attribute_chunks"]
  be3a40b1_7e88_8a0c_e231_56c97bd7899f --> f6625393_617b_8f3b_aaa5_b87527fde52f
  804afe56_25d1_9f41_dafe_adc75e952134["object"]
  be3a40b1_7e88_8a0c_e231_56c97bd7899f --> 804afe56_25d1_9f41_dafe_adc75e952134
  d04d7971_88df_542d_dd4f_26170ce6f581["utils.js"]
  be3a40b1_7e88_8a0c_e231_56c97bd7899f --> d04d7971_88df_542d_dd4f_26170ce6f581
  575bfb79_8777_5076_eda3_be015882482a["add_svelte_meta"]
  be3a40b1_7e88_8a0c_e231_56c97bd7899f --> 575bfb79_8777_5076_eda3_be015882482a
  8027aa4e_4fda_68d8_71fa_0a45b97acb64["build_bind_this"]
  be3a40b1_7e88_8a0c_e231_56c97bd7899f --> 8027aa4e_4fda_68d8_71fa_0a45b97acb64
  be60a9d7_77eb_5ad3_ab7e_2f9bd93a3db1["Memoizer"]
  be3a40b1_7e88_8a0c_e231_56c97bd7899f --> be60a9d7_77eb_5ad3_ab7e_2f9bd93a3db1
  6922c44b_14fe_b017_d157_304290a82a06["validate_binding"]
  be3a40b1_7e88_8a0c_e231_56c97bd7899f --> 6922c44b_14fe_b017_d157_304290a82a06
  7880f852_1b7b_9ea3_4e22_732f4a684bbe["element.js"]
  be3a40b1_7e88_8a0c_e231_56c97bd7899f --> 7880f852_1b7b_9ea3_4e22_732f4a684bbe
  e31bc2c2_91c1_b9a9_f78a_2832bddce6c5["build_attribute_value"]
  be3a40b1_7e88_8a0c_e231_56c97bd7899f --> e31bc2c2_91c1_b9a9_f78a_2832bddce6c5
  c5a9d025_4aac_a689_1a38_c0fce5e694c0["events.js"]
  be3a40b1_7e88_8a0c_e231_56c97bd7899f --> c5a9d025_4aac_a689_1a38_c0fce5e694c0
  cd53dd1a_8bd9_06e2_6bfe_ed90344d0b28["build_event_handler"]
  be3a40b1_7e88_8a0c_e231_56c97bd7899f --> cd53dd1a_8bd9_06e2_6bfe_ed90344d0b28
  style be3a40b1_7e88_8a0c_e231_56c97bd7899f fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

/** @import { BlockStatement, Expression, ExpressionStatement, Identifier, MemberExpression, Pattern, Property, SequenceExpression, SourceLocation, Statement } from 'estree' */
/** @import { AST } from '#compiler' */
/** @import { ComponentContext } from '../../types.js' */
import { dev, is_ignored } from '../../../../../state.js';
import { get_attribute_chunks, object } from '../../../../../utils/ast.js';
import * as b from '#compiler/builders';
import { add_svelte_meta, build_bind_this, Memoizer, validate_binding } from '../shared/utils.js';
import { build_attribute_value } from '../shared/element.js';
import { build_event_handler } from './events.js';
import { determine_slot } from '../../../../../utils/slot.js';

/**
 * @param {AST.Component | AST.SvelteComponent | AST.SvelteSelf} node
 * @param {string} component_name
 * @param {SourceLocation | null} loc
 * @param {ComponentContext} context
 * @returns {Statement}
 */
export function build_component(node, component_name, loc, context) {
	/** @type {Expression} */
	const anchor = context.state.node;

	/** @type {Array<Property[] | Expression>} */
	const props_and_spreads = [];

	/** @type {Array<() => void>} */
	const delayed_props = [];

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

	/** @type {Record<string, typeof context.state>} */
	const states = {
		default: {
			...context.state,
			scope: node.metadata.scopes.default,
			transform: { ...context.state.transform }
		}
	};

	/** @type {Record<string, AST.TemplateNode[]>} */
	const children = {};

	/** @type {Record<string, Expression[]>} */
	const events = {};

	const memoizer = new Memoizer();

	/** @type {Property[]} */
	const custom_css_props = [];

	/** @type {Identifier | MemberExpression | SequenceExpression | null} */
	let bind_this = null;

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

	const is_component_dynamic =
		node.type === 'SvelteComponent' || (node.type === 'Component' && node.metadata.dynamic);

// ... (477 more lines)

Domain

Subdomains

Functions

Dependencies

Imported By

Source

Frequently Asked Questions

What does component.js do?
component.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 component.js?
component.js defines 1 function(s): build_component.
What does component.js depend on?
component.js imports 17 module(s): Memoizer, add_svelte_meta, ast.js, build_attribute_value, build_bind_this, build_event_handler, builders, determine_slot, and 9 more.
What files import component.js?
component.js is imported by 3 file(s): Component.js, SvelteComponent.js, SvelteSelf.js.
Where is component.js in the architecture?
component.js is located at packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js (domain: Compiler, subdomain: Transformer, directory: packages/svelte/src/compiler/phases/3-transform/client/visitors/shared).

Analyze Your Own Codebase

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

Try Supermodel Free