BindDirective() — svelte Function Reference

Source Code

packages/svelte/src/compiler/phases/3-transform/client/visitors/BindDirective.js lines 15–290

export function BindDirective(node, context) {
	const expression = /** @type {Expression} */ (context.visit(node.expression));
	const property = binding_properties[node.name];

	const parent = /** @type {AST.SvelteNode} */ (context.path.at(-1));

	let get, set;

	if (expression.type === 'SequenceExpression') {
		[get, set] = expression.expressions;
	} else {
		if (
			dev &&
			context.state.analysis.runes &&
			expression.type === 'MemberExpression' &&
			(node.name !== 'this' ||
				context.path.some(
					({ type }) =>
						type === 'IfBlock' ||
						type === 'EachBlock' ||
						type === 'AwaitBlock' ||
						type === 'KeyBlock'
				)) &&
			!is_ignored(node, 'binding_property_non_reactive')
		) {
			validate_binding(context.state, node, expression);
		}

		const assignment = /** @type {Expression} */ (
			context.visit(b.assignment('=', /** @type {Pattern} */ (node.expression), b.id('$$value')))
		);

		if (dev) {
			// in dev, create named functions, so that `$inspect(...)` delivers
			// useful stack traces
			get = b.function(b.id('get', node.name_loc), [], b.block([b.return(expression)]));
			set = b.function(
				b.id('set', node.name_loc),
				[b.id('$$value')],
				b.block([b.stmt(assignment)])
			);
		} else {
			// in prod, optimise for brevity
			get = b.thunk(expression);

			/** @type {Expression | undefined} */
			set = b.unthunk(
				b.arrow(
					[b.id('$$value')],
					/** @type {Expression} */ (
						context.visit(
							b.assignment('=', /** @type {Pattern} */ (node.expression), b.id('$$value'))
						)
					)
				)
			);

			if (get === set) {
				set = undefined;
			}
		}
	}

	/** @type {CallExpression} */
	let call;

	if (property?.event) {
		call = b.call(
			'$.bind_property',
			b.literal(node.name),
			b.literal(property.event),
			context.state.node,
			set ?? get,
			property.bidirectional && get
		);
	} else {
		// special cases
		switch (node.name) {
			// window
			case 'online':
				call = b.call(`$.bind_online`, set ?? get);