LetDirective() — svelte Function Reference

Architecture documentation for the LetDirective() function in LetDirective.js from the svelte codebase.

Function javascript Compiler Transformer calls 1

Entity Profile

Compiler→ Transformer→ LetDirective() — svelte Function Reference

Dependency Diagram

graph TD
  7d8fac83_70e0_3b11_8541_95dd419254b0["LetDirective()"]
  6db00b99_6c00_8c37_49e7_072e5c55ca92["LetDirective.js"]
  7d8fac83_70e0_3b11_8541_95dd419254b0 -->|defined in| 6db00b99_6c00_8c37_49e7_072e5c55ca92
  c6147fac_8ab6_4ed2_9c90_08e83553fb43["create_derived()"]
  7d8fac83_70e0_3b11_8541_95dd419254b0 -->|calls| c6147fac_8ab6_4ed2_9c90_08e83553fb43
  style 7d8fac83_70e0_3b11_8541_95dd419254b0 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/svelte/src/compiler/phases/3-transform/client/visitors/LetDirective.js lines 11–55

export function LetDirective(node, context) {
	// let:x        -->  const x = $.derived(() => $$slotProps.x);
	// let:x={{y, z}}  -->  const derived_x = $.derived(() => { const { y, z } = $$slotProps.x; return { y, z }));
	if (node.expression && node.expression.type !== 'Identifier') {
		const name = context.state.scope.generate(node.name);
		const bindings = context.state.scope.get_bindings(node);

		for (const binding of bindings) {
			context.state.transform[binding.node.name] = {
				read: (node) => b.member(b.call('$.get', b.id(name)), node)
			};
		}

		context.state.let_directives.push(
			b.const(
				name,
				b.call(
					'$.derived',
					b.thunk(
						b.block([
							b.let(
								/** @type {Expression} */ (node.expression).type === 'ObjectExpression'
									? // @ts-expect-error types don't match, but it can't contain spread elements and the structure is otherwise fine
										b.object_pattern(node.expression.properties)
									: // @ts-expect-error types don't match, but it can't contain spread elements and the structure is otherwise fine
										b.array_pattern(node.expression.elements),
								b.member(b.id('$$slotProps'), node.name)
							),
							b.return(b.object(bindings.map((binding) => b.init(binding.node.name, binding.node))))
						])
					)
				)
			)
		);
	} else {
		const name = node.expression === null ? node.name : node.expression.name;
		context.state.transform[name] = {
			read: (node) => b.call('$.get', node)
		};

		context.state.let_directives.push(
			b.const(name, create_derived(context.state, b.member(b.id('$$slotProps'), node.name)))
		);
	}
}