build_element_special_value_attribute() — svelte Function Reference

Source Code

packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js lines 730–788

function build_element_special_value_attribute(
	element,
	node_id,
	attribute,
	context,
	synthetic = false
) {
	const state = context.state;
	const is_select_with_value =
		// attribute.metadata.dynamic would give false negatives because even if the value does not change,
		// the inner options could still change, so we need to always treat it as reactive
		element === 'select' && attribute.value !== true && !is_text_attribute(attribute);

	const { value, has_state } = build_attribute_value(attribute.value, context, (value, metadata) =>
		state.memoizer.add(value, metadata)
	);

	const evaluated = context.state.scope.evaluate(value);
	const assignment = b.assignment('=', b.member(node_id, '__value'), value);

	const set_value_assignment = b.assignment(
		'=',
		b.member(node_id, 'value'),
		evaluated.is_defined ? assignment : b.logical('??', assignment, b.literal(''))
	);

	const update = b.stmt(
		is_select_with_value
			? b.sequence([
					set_value_assignment,
					// This ensures a one-way street to the DOM in case it's <select {value}>
					// and not <select bind:value>. We need it in addition to $.init_select
					// because the select value is not reflected as an attribute, so the
					// mutation observer wouldn't notice.
					b.call('$.select_option', node_id, value)
				])
			: synthetic
				? assignment
				: set_value_assignment
	);

	if (has_state) {
		const id = b.id(state.scope.generate(`${node_id.name}_value`));

		// `<option>` is a special case: The value property reflects to the DOM. If the value is set to undefined,
		// that means the value should be set to the empty string. To be able to do that when the value is
		// initially undefined, we need to set a value that is guaranteed to be different.
		const init = element === 'option' ? b.object([]) : undefined;

		state.init.push(b.var(id, init));
		state.update.push(b.if(b.binary('!==', id, b.assignment('=', id, value)), b.block([update])));
	} else {
		state.init.push(update);
	}

	if (is_select_with_value) {
		state.init.push(b.stmt(b.call('$.init_select', node_id)));
	}
}