fix: trim whitespace while migrating blocks (#13941)

Co-authored-by: Oscar Dominguez <[email protected]>

Author: paoloricciuti

.changeset/tasty-frogs-boil.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: trim whitespace while migrating blocks

packages/svelte/src/compiler/migrate/index.js

@@ -853,6 +853,20 @@ const instance_script = {
 	}
 };
 
+/**
+ *
+ * @param {State} state
+ * @param {number} start
+ * @param {number} end
+ */
+function trim_block(state, start, end) {
+	const original = state.str.snip(start, end).toString();
+	const without_parens = original.substring(1, original.length - 1);
+	if (without_parens.trim().length !== without_parens.length) {
+		state.str.update(start + 1, end - 1, without_parens.trim());
+	}
+}
+
 /** @type {Visitors<SvelteNode, State>} */
 const template = {
 	Identifier(node, { state, path }) {
@@ -1119,6 +1133,46 @@ const template = {
 		if (migrated !== node.data) {
 			state.str.overwrite(node.start + '<!--'.length, node.end - '-->'.length, migrated);
 		}
+	},
+	HtmlTag(node, { state, next }) {
+		trim_block(state, node.start, node.end);
+		next();
+	},
+	ConstTag(node, { state, next }) {
+		trim_block(state, node.start, node.end);
+		next();
+	},
+	IfBlock(node, { state, next }) {
+		const start = node.start;
+		const end = state.str.original.indexOf('}', node.test.end) + 1;
+		trim_block(state, start, end);
+		next();
+	},
+	AwaitBlock(node, { state, next }) {
+		const start = node.start;
+		const end =
+			state.str.original.indexOf(
+				'}',
+				node.pending !== null ? node.expression.end : node.value?.end
+			) + 1;
+		trim_block(state, start, end);
+		if (node.pending !== null) {
+			const start = state.str.original.lastIndexOf('{', node.value?.start);
+			const end = state.str.original.indexOf('}', node.value?.end) + 1;
+			trim_block(state, start, end);
+		}
+		if (node.catch !== null) {
+			const start = state.str.original.lastIndexOf('{', node.error?.start);
+			const end = state.str.original.indexOf('}', node.error?.end) + 1;
+			trim_block(state, start, end);
+		}
+		next();
+	},
+	KeyBlock(node, { state, next }) {
+		const start = node.start;
+		const end = state.str.original.indexOf('}', node.expression.end) + 1;
+		trim_block(state, start, end);
+		next();
 	}
 };
 

packages/svelte/tests/migrate/samples/remove-blocks-whitespace/input.svelte

@@ -0,0 +1,27 @@
+{  @html "some html"   }
+
+{     #if false && {
+	
+}.x === 34    }
+	true
+{    :else if false  }
+	false
+{/if}
+
+{     #await []    }
+	{   @const x = 43   }
+	{x}
+{   :then i   }
+	{i}
+{  :catch e  }
+	dlkdj
+{/await}
+
+{   #await [] then i   }
+stuff
+{/await}
+
+{      #key count    }
+	dlkdj
+{/key}
+

packages/svelte/tests/migrate/samples/remove-blocks-whitespace/output.svelte

@@ -0,0 +1,26 @@
+{@html "some html"}
+
+{#if false && {
+	
+}.x === 34}
+	true
+{:else if false}
+	false
+{/if}
+
+{#await []}
+	{@const x = 43}
+	{x}
+{:then i}
+	{i}
+{:catch e}
+	dlkdj
+{/await}
+
+{#await [] then i}
+stuff
+{/await}
+
+{#key count}
+	dlkdj
+{/key}