Repository: sveltejs/svelte
File: packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js (JavaScript)

Code before:
 * @param {AST.RegularElement} element
 * @param {Identifier} node_id
 * @param {AST.Attribute} attribute
 * @param {ComponentContext} context
 * @returns {boolean}
 */
function build_element_attribute_update_assignment(element, node_id, attribute, context) {
	const state = context.state;
	const name = get_attribute_name(element, attribute);
	const is_svg = context.state.metadata.namespace === 'svg' || element.name === 'svg';
	const is_mathml = context.state.metadata.namespace === 'mathml';
	let { has_call, value } = build_attribute_value(attribute.value, context);

	if (name === 'autofocus') {
		state.init.push(b.stmt(b.call('$.autofocus', node_id, value)));
		return false;
	}

	/** @type {Statement} */
	let update;

	if (name === 'class') {
		if (attribute.metadata.expression.has_state && has_call) {
			const id = b.id(state.scope.generate('class_derived'));
			state.init.push(b.const(id, create_derived(state, b.thunk(value))));
			value = b.call('$.get', id);
			has_call = false;
		}
		update = b.stmt(
			b.call(
				is_svg ? '$.set_svg_class' : is_mathml ? '$.set_mathml_class' : '$.set_class',
				node_id,
				value
			)
		);
	} else if (name === 'value') {
		update = b.stmt(b.call('$.set_value', node_id, value));
	} else if (name === 'checked') {
		update = b.stmt(b.call('$.set_checked', node_id, value));
	} else if (is_dom_property(name)) {
		update = b.stmt(b.assignment('=', b.member(node_id, name), value));
	} else {
		if (name === 'style' && attribute.metadata.expression.has_state && has_call) {
			const id = b.id(state.scope.generate('style_derived'));
			state.init.push(b.const(id, create_derived(state, b.thunk(value))));
			value = b.call('$.get', id);
			has_call = false;
		}
		const callee = name.startsWith('xlink') ? '$.set_xlink_attribute' : '$.set_attribute';
		update = b.stmt(
			b.call(

Review comment (suggestion):
```suggestion
			// ensure we're not creating a separate template effect for this so that
			// potential class directives are added to the same effect and therefore always apply
			const id = b.id(state.scope.generate('class_derived'));
```

Code after:
 * @param {AST.RegularElement} element
 * @param {Identifier} node_id
 * @param {AST.Attribute} attribute
 * @param {ComponentContext} context
 * @returns {boolean}
 */
function build_element_attribute_update_assignment(element, node_id, attribute, context) {
	const state = context.state;
	const name = get_attribute_name(element, attribute);
	const is_svg = context.state.metadata.namespace === 'svg' || element.name === 'svg';
	const is_mathml = context.state.metadata.namespace === 'mathml';
	let { has_call, value } = build_attribute_value(attribute.value, context);

	if (name === 'autofocus') {
		state.init.push(b.stmt(b.call('$.autofocus', node_id, value)));
		return false;
	}

	/** @type {Statement} */
	let update;

	if (name === 'class') {
		if (attribute.metadata.expression.has_state && has_call) {
			// ensure we're not creating a separate template effect for this so that
			// potential class directives are added to the same effect and therefore always apply
			const id = b.id(state.scope.generate('class_derived'));
			state.init.push(b.const(id, create_derived(state, b.thunk(value))));
			value = b.call('$.get', id);
			has_call = false;
		}
		update = b.stmt(
			b.call(
				is_svg ? '$.set_svg_class' : is_mathml ? '$.set_mathml_class' : '$.set_class',
				node_id,
				value
			)
		);
	} else if (name === 'value') {
		update = b.stmt(b.call('$.set_value', node_id, value));
	} else if (name === 'checked') {
		update = b.stmt(b.call('$.set_checked', node_id, value));
	} else if (is_dom_property(name)) {
		update = b.stmt(b.assignment('=', b.member(node_id, name), value));
	} else {
		if (name === 'style' && attribute.metadata.expression.has_state && has_call) {
			// ensure we're not creating a separate template effect for this so that
			// potential style directives are added to the same effect and therefore always apply
			const id = b.id(state.scope.generate('style_derived'));
			state.init.push(b.const(id, create_derived(state, b.thunk(value))));
			value = b.call('$.get', id);
			has_call = false;