VariableDeclaration() — svelte Function Reference
Architecture documentation for the VariableDeclaration() function in VariableDeclaration.js from the svelte codebase.
Entity Profile
Dependency Diagram
graph TD 007c3954_38c0_485d_f93d_2da7aa34f6bc["VariableDeclaration()"] 43cccc92_b6ec_71e7_dbb2_9db18fe66f68["VariableDeclaration.js"] 007c3954_38c0_485d_f93d_2da7aa34f6bc -->|defined in| 43cccc92_b6ec_71e7_dbb2_9db18fe66f68 bed91719_d047_2256_e199_ee875d5f49b9["get_rune()"] 007c3954_38c0_485d_f93d_2da7aa34f6bc -->|calls| bed91719_d047_2256_e199_ee875d5f49b9 1adb4ea4_d32e_0d06_3e3c_e359665c6f64["create_state_declarators()"] 007c3954_38c0_485d_f93d_2da7aa34f6bc -->|calls| 1adb4ea4_d32e_0d06_3e3c_e359665c6f64 620ed390_0877_e37c_0313_1a3448ba6a56["get_bindings()"] 007c3954_38c0_485d_f93d_2da7aa34f6bc -->|calls| 620ed390_0877_e37c_0313_1a3448ba6a56 8980dd2b_1c7a_2c03_2400_e31c60358534["generate()"] 007c3954_38c0_485d_f93d_2da7aa34f6bc -->|calls| 8980dd2b_1c7a_2c03_2400_e31c60358534 c254e734_2224_c309_f1f8_bb064e80b1af["extract_paths()"] 007c3954_38c0_485d_f93d_2da7aa34f6bc -->|calls| c254e734_2224_c309_f1f8_bb064e80b1af 627dc2f8_4dbc_5bb1_8f54_cee503e17098["get()"] 007c3954_38c0_485d_f93d_2da7aa34f6bc -->|calls| 627dc2f8_4dbc_5bb1_8f54_cee503e17098 84572b9b_9a21_09af_15ac_85b59b114603["build_fallback()"] 007c3954_38c0_485d_f93d_2da7aa34f6bc -->|calls| 84572b9b_9a21_09af_15ac_85b59b114603 style 007c3954_38c0_485d_f93d_2da7aa34f6bc fill:#6366f1,stroke:#818cf8,color:#fff
Relationship Graph
Source Code
packages/svelte/src/compiler/phases/3-transform/server/visitors/VariableDeclaration.js lines 15–186
export function VariableDeclaration(node, context) {
/** @type {VariableDeclarator[]} */
const declarations = [];
if (context.state.analysis.runes) {
for (const declarator of node.declarations) {
const init = declarator.init;
const rune = get_rune(init, context.state.scope);
if (!rune || rune === '$effect.tracking' || rune === '$inspect' || rune === '$effect.root') {
declarations.push(/** @type {VariableDeclarator} */ (context.visit(declarator)));
continue;
}
if (rune === '$props.id') {
// skip
continue;
}
if (rune === '$props') {
let has_rest = false;
// remove $bindable() from props declaration
let id = walk(declarator.id, null, {
RestElement(node, context) {
if (context.path.at(-1) === declarator.id) {
has_rest = true;
}
},
AssignmentPattern(node) {
if (
node.right.type === 'CallExpression' &&
get_rune(node.right, context.state.scope) === '$bindable'
) {
const right = node.right.arguments.length
? /** @type {Expression} */ (context.visit(node.right.arguments[0]))
: b.void0;
return b.assignment_pattern(node.left, right);
}
}
});
// if `$$slots` is declared separately, deconflict
const slots_name = /** @type {ComponentAnalysis} */ (context.state.analysis).uses_slots
? b.id('$$slots_')
: b.id('$$slots');
if (id.type === 'ObjectPattern' && has_rest) {
// If a rest pattern is used within an object pattern, we need to ensure we don't expose $$slots or $$events
id.properties.splice(
id.properties.length - 1,
0,
// @ts-ignore
b.prop('init', b.id('$$slots'), slots_name),
b.prop('init', b.id('$$events'), b.id('$$events'))
);
} else if (id.type === 'Identifier') {
// If $props is referenced as an identifier, we need to ensure we don't expose $$slots or $$events as properties
// on the identifier reference
id = b.object_pattern([
b.prop('init', b.id('$$slots'), slots_name),
b.prop('init', b.id('$$events'), b.id('$$events')),
b.rest(b.id(id.name))
]);
}
declarations.push(
b.declarator(/** @type {Pattern} */ (context.visit(id)), b.id('$$props'))
);
continue;
}
const args = /** @type {CallExpression} */ (init).arguments;
const value = args.length > 0 ? /** @type {Expression} */ (context.visit(args[0])) : b.void0;
if (rune === '$derived.by') {
declarations.push(
b.declarator(/** @type {Pattern} */ (context.visit(declarator.id)), b.call(value))
);
continue;
}
if (declarator.id.type === 'Identifier') {
declarations.push(b.declarator(declarator.id, value));
Domain
Subdomains
Calls
Source
Frequently Asked Questions
What does VariableDeclaration() do?
VariableDeclaration() is a function in the svelte codebase, defined in packages/svelte/src/compiler/phases/3-transform/server/visitors/VariableDeclaration.js.
Where is VariableDeclaration() defined?
VariableDeclaration() is defined in packages/svelte/src/compiler/phases/3-transform/server/visitors/VariableDeclaration.js at line 15.
What does VariableDeclaration() call?
VariableDeclaration() calls 7 function(s): build_fallback, create_state_declarators, extract_paths, generate, get, get_bindings, get_rune.
Analyze Your Own Codebase
Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.
Try Supermodel Free