build_bind_this() — svelte Function Reference

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

Function javascript Compiler Transformer called by 2

Entity Profile

Compiler→ Transformer→ build_bind_this() — svelte Function Reference

Dependency Diagram

graph TD
  8027aa4e_4fda_68d8_71fa_0a45b97acb64["build_bind_this()"]
  d04d7971_88df_542d_dd4f_26170ce6f581["utils.js"]
  8027aa4e_4fda_68d8_71fa_0a45b97acb64 -->|defined in| d04d7971_88df_542d_dd4f_26170ce6f581
  059abfac_6785_3551_13a8_b20c40ff070b["BindDirective()"]
  059abfac_6785_3551_13a8_b20c40ff070b -->|calls| 8027aa4e_4fda_68d8_71fa_0a45b97acb64
  2b6a1e4d_7060_eb43_d939_71517fa01ad9["build_component()"]
  2b6a1e4d_7060_eb43_d939_71517fa01ad9 -->|calls| 8027aa4e_4fda_68d8_71fa_0a45b97acb64
  style 8027aa4e_4fda_68d8_71fa_0a45b97acb64 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js lines 241–333

export function build_bind_this(expression, value, { state, visit }) {
	const [getter, setter] =
		expression.type === 'SequenceExpression' ? expression.expressions : [null, null];

	/** @type {Identifier[]} */
	const ids = [];

	/** @type {Expression[]} */
	const values = [];

	/** @type {string[]} */
	const seen = [];

	const transform = { ...state.transform };

	// Pass in each context variables to the get/set functions, so that we can null out old values on teardown.
	// Note that we only do this for each context variables, the consequence is that the value might be stale in
	// some scenarios where the value is a member expression with changing computed parts or using a combination of multiple
	// variables, but that was the same case in Svelte 4, too. Once legacy mode is gone completely, we can revisit this.
	walk(getter ?? expression, null, {
		Identifier(node, { path }) {
			if (seen.includes(node.name)) return;
			seen.push(node.name);

			const parent = /** @type {Expression} */ (path.at(-1));
			if (!is_reference(node, parent)) return;

			const binding = state.scope.get(node.name);
			if (!binding) return;

			for (const [owner, scope] of state.scopes) {
				if (owner.type === 'EachBlock' && scope === binding.scope) {
					ids.push(node);
					values.push(/** @type {Expression} */ (visit(node)));

					if (transform[node.name]) {
						transform[node.name] = {
							...transform[node.name],
							read: (node) => node
						};
					}

					break;
				}
			}
		}
	});

	const child_state = { ...state, transform };

	let get = /** @type {Expression} */ (visit(getter ?? expression, child_state));
	let set = /** @type {Expression} */ (
		visit(
			setter ??
				b.assignment(
					'=',
					/** @type {Identifier | MemberExpression} */ (expression),
					b.id('$$value')
				),
			child_state
		)
	);

	// If we're mutating a property, then it might already be non-existent.
	// If we make all the object nodes optional, then it avoids any runtime exceptions.
	/** @type {Expression | Super} */
	let node = get;

	while (node.type === 'MemberExpression') {
		node.optional = true;
		node = node.object;
	}

	get =
		get.type === 'ArrowFunctionExpression'
			? b.arrow([...ids], get.body)
			: get.type === 'FunctionExpression'
				? b.function(null, [...ids], get.body)
				: getter
					? get
					: b.arrow([...ids], get);