better indentation for named slots

Author: dummdidumm

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

@@ -1043,8 +1043,17 @@ function migrate_slot_usage(node, path, state) {
 		}
 	} else {
 		// Named slot or `svelte:fragment`: wrap element itself in a snippet
-		state.str.prependRight(node.start, `{#snippet ${snippet_name}(${props})}`);
-		state.str.appendLeft(node.end, `{/snippet}`);
+		state.str.prependLeft(
+			node.start,
+			`{#snippet ${snippet_name}(${props})}\n${state.indent.repeat(path.length - 2)}`
+		);
+		state.str.indent(state.indent, {
+			exclude: [
+				[0, node.start],
+				[node.end, state.str.original.length]
+			]
+		});
+		state.str.appendLeft(node.end, `\n${state.indent.repeat(path.length - 2)}{/snippet}`);
 	}
 }
 

packages/svelte/tests/migrate/samples/slot-usages/_config.js

@@ -22,6 +22,13 @@
     <div slot="named">x</div>
 </Component>
 
+<Component>
+    <div slot="named">
+        <p>multi</p>
+        <p>line</p>
+    </div>
+</Component>
+
 <Component>
     <svelte:element this={'div'} slot="named">x</svelte:element>
 </Component>

packages/svelte/tests/migrate/samples/slot-usages/input.svelte

@@ -25,61 +25,100 @@
 </Component>
 
 <Component>
-    {#snippet named()}<div >x</div>{/snippet}
+    {#snippet named()}
+        <div >x</div>
+    {/snippet}
 </Component>
 
 <Component>
-    {#snippet named()}<svelte:element this={'div'} >x</svelte:element>{/snippet}
+    {#snippet named()}
+        <div >
+            <p>multi</p>
+            <p>line</p>
+        </div>
+    {/snippet}
 </Component>
 
 <Component>
-    {#snippet foo({ foo })}<div  >{foo}</div>{/snippet}
-    {#snippet bar({ foo: bar })}<div  >{bar}</div>{/snippet}
+    {#snippet named()}
+        <svelte:element this={'div'} >x</svelte:element>
+    {/snippet}
+</Component>
+
+<Component>
+    {#snippet foo({ foo })}
+        <div  >{foo}</div>
+    {/snippet}
+    {#snippet bar({ foo: bar })}
+        <div  >{bar}</div>
+    {/snippet}
 </Component>
 
 <Component >
     {#snippet children({ foo })}
         {foo}
         {/snippet}
-    {#snippet named()}<div >x</div>{/snippet}
+    {#snippet named()}
+        <div >x</div>
+    {/snippet}
 </Component>
 
 <Component>
-    {#snippet children({ foo })}{foo}{/snippet}
+    {#snippet children({ foo })}
+        {foo}
+    {/snippet}
 </Component>
 
 <Component>
-    {#snippet named({ foo })}{foo}{/snippet}
+    {#snippet named({ foo })}
+        {foo}
+    {/snippet}
 </Component>
 
 <Component>
-    {#snippet foo()}<div >foo</div>{/snippet}
+    {#snippet foo()}
+        <div >foo</div>
+    {/snippet}
     OMG WHY
-    {#snippet bar()}<div >bar</div>{/snippet}
+    {#snippet bar()}
+        <div >bar</div>
+    {/snippet}
 </Component>
 
 <Component>
     If you do mix slots like this
-    {#snippet foo()}<div >foo</div>{/snippet}
+    {#snippet foo()}
+        <div >foo</div>
+    {/snippet}
     you're a monster
-    {#snippet bar()}<div >bar</div>{/snippet}
+    {#snippet bar()}
+        <div >bar</div>
+    {/snippet}
 </Component>
 
 <Component >
-    {#snippet foo()}<div >foo</div>{/snippet}
+    {#snippet foo()}
+        <div >foo</div>
+    {/snippet}
     {#snippet children({ omg })}
         {omg} WHY
         {/snippet}
-    {#snippet bar()}<div >bar</div>{/snippet}
+    {#snippet bar()}
+        <div >bar</div>
+    {/snippet}
 </Component>
 
 <Component >{#snippet children({ monster })}
 
         If you do mix slots like this
 
     you're a {monster}{/snippet}
-    {#snippet foo()}<div >foo</div>{/snippet}
-    {#snippet bar()}<div >bar</div>{/snippet}
+    {#snippet foo()}
+        <div >foo</div>
+    {/snippet}
+    {#snippet bar()}
+        <div >bar</div>
+    {/snippet}
 </Component>
 
 <c-e>

packages/svelte/tests/migrate/samples/slot-usages/output.svelte

@@ -28,24 +28,30 @@
 </Component>
 
 <Component>
-	{#snippet x({ comp: stuff })}{@const SvelteComponent_2 = stuff}
+	{#snippet x({ comp: stuff })}
+		{@const SvelteComponent_2 = stuff}
 	<div  >
-		<SvelteComponent_2 />
-	</div>{/snippet}
+			<SvelteComponent_2 />
+		</div>
+	{/snippet}
 </Component>
 
 <Component>
-	{#snippet x({ comp: stuff })}{@const SvelteComponent_3 = stuff}
+	{#snippet x({ comp: stuff })}
+	{@const SvelteComponent_3 = stuff}
 
-		<SvelteComponent_3 />
+			<SvelteComponent_3 />
+		
 	{/snippet}
 </Component>
 
 <Component>
-	{#snippet x({ comp: stuff })}{@const SvelteComponent_4 = stuff}
+	{#snippet x({ comp: stuff })}
+		{@const SvelteComponent_4 = stuff}
 	<svelte:element this={"div"}  >
-		<SvelteComponent_4 />
-	</svelte:element>{/snippet}
+			<SvelteComponent_4 />
+		</svelte:element>
+	{/snippet}
 </Component>
 
 <Component >
@@ -69,24 +75,30 @@
 </Component>
 
 <Component>
-	{#snippet x({ comp: stuff })}{@const SvelteComponent_7 = stuff}
+	{#snippet x({ comp: stuff })}
+		{@const SvelteComponent_7 = stuff}
 	<div  >
-		<SvelteComponent_7 />
-	</div>{/snippet}
+			<SvelteComponent_7 />
+		</div>
+	{/snippet}
 </Component>
 
 <Component>
-	{#snippet x({ comp: stuff })}{@const SvelteComponent_8 = stuff}
+	{#snippet x({ comp: stuff })}
+	{@const SvelteComponent_8 = stuff}
 
-		<SvelteComponent_8 />
+			<SvelteComponent_8 />
+		
 	{/snippet}
 </Component>
 
 <Component>
-	{#snippet x({ comp: stuff })}{@const SvelteComponent_9 = stuff}
+	{#snippet x({ comp: stuff })}
+		{@const SvelteComponent_9 = stuff}
 	<svelte:element this={"div"}  >
-		<SvelteComponent_9 />
-	</svelte:element>{/snippet}
+			<SvelteComponent_9 />
+		</svelte:element>
+	{/snippet}
 </Component>
 
 <Component />