BindDirective.js — svelte Source File

Source Code

/** @import { CallExpression, Expression, Pattern } from 'estree' */
/** @import { AST } from '#compiler' */
/** @import { ComponentContext } from '../types' */
import { dev, is_ignored } from '../../../../state.js';
import { is_text_attribute } from '../../../../utils/ast.js';
import * as b from '#compiler/builders';
import { binding_properties } from '../../../bindings.js';
import { build_attribute_value } from './shared/element.js';
import { build_bind_this, validate_binding } from './shared/utils.js';

/**
 * @param {AST.BindDirective} node
 * @param {ComponentContext} context
 */
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} */
// ... (231 more lines)