feat: add migration-task for impossible to migrate slots

Author: paoloricciuti

.changeset/good-kings-try.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+feat: add `migration-task` for impossible to migrate slots

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

@@ -18,6 +18,7 @@ import {
 import { migrate_svelte_ignore } from '../utils/extract_svelte_ignore.js';
 import { validate_component_options } from '../validate-options.js';
 import { is_svg, is_void } from '../../utils.js';
+import { regex_is_valid_identifier } from '../phases/patterns.js';
 
 const regex_style_tags = /(<style[^>]+>)([\S\s]*?)(<\/style>)/g;
 const style_placeholder = '/*$$__STYLE_CONTENT__$$*/';
@@ -1045,6 +1046,13 @@ function migrate_slot_usage(node, path, state) {
 			is_text_attribute(attribute)
 		) {
 			snippet_name = attribute.value[0].data;
+			if (!regex_is_valid_identifier.test(snippet_name)) {
+				state.str.appendLeft(
+					node.start,
+					`<!-- @migration-task: migrate this slot by hand -->\n${state.indent}`
+				);
+				return;
+			}
 			state.str.remove(attribute.start, attribute.end);
 		}
 		if (attribute.type === 'LetDirective') {

packages/svelte/tests/migrate/samples/slot-non-identifier/input.svelte

@@ -0,0 +1,39 @@
+<script>
+	import Comp from "./Component.svelte";
+</script>
+
+<Comp>
+	<div slot="cool:stuff">
+		cool
+	</div>
+</Comp>
+
+<Comp>
+	<div slot="cool stuff">
+		cool
+	</div>
+</Comp>
+
+<Comp>
+	<div slot="stuff">
+		cool
+	</div>
+</Comp>
+
+<Comp>
+	<svelte:fragment slot="cool:stuff">
+		cool
+	</svelte:fragment>
+</Comp>
+
+<Comp>
+	<svelte:fragment slot="cool stuff">
+		cool
+	</svelte:fragment>
+</Comp>
+
+<Comp>
+	<svelte:fragment slot="stuff">
+		cool
+	</svelte:fragment>
+</Comp>

packages/svelte/tests/migrate/samples/slot-non-identifier/output.svelte

@@ -0,0 +1,47 @@
+<script>
+	import Comp from "./Component.svelte";
+</script>
+
+<Comp>
+	<!-- @migration-task: migrate this slot by hand -->
+	<div slot="cool:stuff">
+		cool
+	</div>
+</Comp>
+
+<Comp>
+	<!-- @migration-task: migrate this slot by hand -->
+	<div slot="cool stuff">
+		cool
+	</div>
+</Comp>
+
+<Comp>
+	{#snippet stuff()}
+		<div >
+			cool
+		</div>
+	{/snippet}
+</Comp>
+
+<Comp>
+	<!-- @migration-task: migrate this slot by hand -->
+	<svelte:fragment slot="cool:stuff">
+		cool
+	</svelte:fragment>
+</Comp>
+
+<Comp>
+	<!-- @migration-task: migrate this slot by hand -->
+	<svelte:fragment slot="cool stuff">
+		cool
+	</svelte:fragment>
+</Comp>
+
+<Comp>
+	{#snippet stuff()}
+	
+			cool
+		
+	{/snippet}
+</Comp>