feat: more efficient output for attributes in SSR (#11949)

* feat: more efficient output for attributes in SSR

* rename arg

Author: Rich-Harris

.changeset/spotty-crabs-give.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+feat: more efficient output for attributes in SSR

packages/svelte/src/compiler/phases/3-transform/server/transform-server.js

@@ -2059,7 +2059,7 @@ function serialize_element_attributes(node, context) {
 			);
 
 			context.state.template.push(
-				t_expression(b.call('$.attr', b.literal(name), value, b.literal(is_boolean)))
+				t_expression(b.call('$.attr', b.literal(name), value, is_boolean && b.literal(is_boolean)))
 			);
 		}
 	}

packages/svelte/src/internal/server/index.js

@@ -143,12 +143,12 @@ export function head(payload, fn) {
  * @template V
  * @param {string} name
  * @param {V} value
- * @param {boolean} boolean
+ * @param {boolean} [is_boolean]
  * @returns {string}
  */
-export function attr(name, value, boolean) {
-	if (value == null || (!value && boolean) || (value === '' && name === 'class')) return '';
-	const assignment = boolean ? '' : `="${escape_html(value, true)}"`;
+export function attr(name, value, is_boolean = false) {
+	if (value == null || (!value && is_boolean) || (value === '' && name === 'class')) return '';
+	const assignment = is_boolean ? '' : `="${escape_html(value, true)}"`;
 	return ` ${name}${assignment}`;
 }
 

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

@@ -5,5 +5,5 @@ export default function Main($$payload) {
 	let x = 'test';
 	let y = () => 'test';
 
-	$$payload.out += `<div${$.attr("foobar", x, false)}></div> <svg${$.attr("viewBox", x, false)}></svg> <custom-element${$.attr("foobar", x, false)}></custom-element> <div${$.attr("foobar", y(), false)}></div> <svg${$.attr("viewBox", y(), false)}></svg> <custom-element${$.attr("foobar", y(), false)}></custom-element>`;
+	$$payload.out += `<div${$.attr("foobar", x)}></div> <svg${$.attr("viewBox", x)}></svg> <custom-element${$.attr("foobar", x)}></custom-element> <div${$.attr("foobar", y())}></div> <svg${$.attr("viewBox", y())}></svg> <custom-element${$.attr("foobar", y())}></custom-element>`;
 }

packages/svelte/tests/snapshot/samples/state-proxy-literal/_expected/server/index.svelte.js

@@ -11,5 +11,5 @@ export default function State_proxy_literal($$payload) {
 		tpl = ``;
 	}
 
-	$$payload.out += `<input${$.attr("value", str, false)}> <input${$.attr("value", tpl, false)}> <button>reset</button>`;
+	$$payload.out += `<input${$.attr("value", str)}> <input${$.attr("value", tpl)}> <button>reset</button>`;
 }