remove if blocks around attribute updates (#10917)

Author: Rich-Harris

.changeset/lovely-houses-own.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: reliably remove undefined attributes during hydration

.changeset/stale-fans-rest.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+feat: shorter compiler output for attribute updates

packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js

@@ -519,13 +519,11 @@ function serialize_element_attribute_update_assignment(element, node_id, attribu
 							b.thunk(singular)
 						)
 					),
-					grouped: b.stmt(b.call(is_svg ? '$.svg_class_name' : '$.class_name', node_id, singular)),
-					skip_condition: true
+					grouped: b.stmt(b.call(is_svg ? '$.svg_class_name' : '$.class_name', node_id, singular))
 				};
 			}
 			return {
-				grouped: b.stmt(b.call(is_svg ? '$.svg_class_name' : '$.class_name', node_id, value)),
-				skip_condition: true
+				grouped: b.stmt(b.call(is_svg ? '$.svg_class_name' : '$.class_name', node_id, value))
 			};
 		} else if (!DOMProperties.includes(name)) {
 			if (singular) {
@@ -564,15 +562,12 @@ function serialize_element_attribute_update_assignment(element, node_id, attribu
 	};
 
 	if (attribute.metadata.dynamic) {
-		const id = state.scope.generate(`${node_id.name}_${name}`);
-		serialize_update_assignment(
-			state,
-			id,
-			name === 'class' ? b.literal('') : undefined,
-			grouped_value,
-			assign(b.id(id), value),
-			contains_call_expression
-		);
+		const { grouped, singular } = assign(grouped_value, value);
+		if (contains_call_expression && singular) {
+			state.init.push(singular);
+		} else {
+			state.update.push({ singular, grouped });
+		}
 		return true;
 	} else {
 		state.init.push(assign(grouped_value).grouped);

packages/svelte/tests/hydration/samples/element-attribute-removed/_expected.html

@@ -1 +1 @@
-<!--ssr:0--><div></div><!--ssr:0-->
+<div></div><div></div><div></div>

packages/svelte/tests/hydration/samples/element-attribute-removed/main.svelte

@@ -2,4 +2,11 @@
 	export let id;
 </script>
 
+<!-- single update -->
 <div id={id}></div>
+
+{#if true}
+	<!-- grouped updates -->
+	<div id={id}></div>
+	<div id={id}></div>
+{/if}

packages/svelte/tests/snapshot/samples/dynamic-attributes-casing/_expected/client/main.svelte.js

@@ -13,9 +13,7 @@ export default function Main($$anchor, $$props) {
 	let y = () => 'test';
 	var fragment = $.open_frag($$anchor, frag, false);
 	var div = $.first_child(fragment);
-	var div_foobar;
 	var svg = $.sibling($.sibling(div, true));
-	var svg_viewBox;
 	var custom_element = $.sibling($.sibling(svg, true));
 	var custom_element_fooBar;
 	var div_1 = $.sibling($.sibling(custom_element, true));
@@ -31,13 +29,8 @@ export default function Main($$anchor, $$props) {
 	$.set_custom_element_data_effect(custom_element_1, "fooBar", y);
 
 	$.render_effect(() => {
-		if (div_foobar !== (div_foobar = x)) {
-			$.attr(div, "foobar", div_foobar);
-		}
-
-		if (svg_viewBox !== (svg_viewBox = x)) {
-			$.attr(svg, "viewBox", svg_viewBox);
-		}
+		$.attr(div, "foobar", x);
+		$.attr(svg, "viewBox", x);
 
 		if (custom_element_fooBar !== (custom_element_fooBar = x)) {
 			$.set_custom_element_data(custom_element, "fooBar", custom_element_fooBar);