feat: add migration-task comment after errors (#13659)

Author: paoloricciuti

.changeset/slimy-garlics-beg.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+feat: add `migration-task` comment after errors

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

@@ -301,8 +301,11 @@ export function migrate(source, { filename } = {}) {
 		return { code: str.toString() };
 	} catch (e) {
 		// eslint-disable-next-line no-console
-		console.error('Error while migrating Svelte code');
-		throw e;
+		console.error('Error while migrating Svelte code', e);
+
+		return {
+			code: `<!-- @migration-task Error while migrating Svelte code: ${/** @type {any} */ (e).message} -->\n${source}`
+		};
 	}
 }
 
@@ -348,6 +351,40 @@ const instance_script = {
 	},
 	ImportDeclaration(node, { state }) {
 		state.props_insertion_point = node.end ?? state.props_insertion_point;
+		if (node.source.value === 'svelte') {
+			let illegal_specifiers = [];
+			let removed_specifiers = 0;
+			for (let specifier of node.specifiers) {
+				if (
+					specifier.type === 'ImportSpecifier' &&
+					['beforeUpdate', 'afterUpdate'].includes(specifier.imported.name)
+				) {
+					const references = state.scope.references.get(specifier.local.name);
+					if (!references) {
+						let end = /** @type {number} */ (
+							state.str.original.indexOf(',', specifier.end) !== -1 &&
+							state.str.original.indexOf(',', specifier.end) <
+								state.str.original.indexOf('}', specifier.end)
+								? state.str.original.indexOf(',', specifier.end) + 1
+								: specifier.end
+						);
+						while (state.str.original[end].trim() === '') end++;
+						state.str.remove(/** @type {number} */ (specifier.start), end);
+						removed_specifiers++;
+						continue;
+					}
+					illegal_specifiers.push(specifier.imported.name);
+				}
+			}
+			if (removed_specifiers === node.specifiers.length) {
+				state.str.remove(/** @type {number} */ (node.start), /** @type {number} */ (node.end));
+			}
+			if (illegal_specifiers.length > 0) {
+				throw new Error(
+					`Can't migrate code with ${illegal_specifiers.join(' and ')}. Please migrate by hand.`
+				);
+			}
+		}
 	},
 	ExportNamedDeclaration(node, { state, next }) {
 		if (node.declaration) {

packages/svelte/tests/migrate/samples/impossible-migrate-beforeUpdate-afterUpdate/input.svelte

@@ -0,0 +1,11 @@
+<script>
+	import { beforeUpdate, afterUpdate } from "svelte";
+
+	beforeUpdate(()=>{
+
+	});
+
+	afterUpdate(()=>{
+
+	});
+</script>

packages/svelte/tests/migrate/samples/impossible-migrate-beforeUpdate-afterUpdate/output.svelte

@@ -0,0 +1,12 @@
+<!-- @migration-task Error while migrating Svelte code: Can't migrate code with beforeUpdate and afterUpdate. Please migrate by hand. -->
+<script>
+	import { beforeUpdate, afterUpdate } from "svelte";
+
+	beforeUpdate(()=>{
+
+	});
+
+	afterUpdate(()=>{
+
+	});
+</script>

packages/svelte/tests/migrate/samples/impossible-migrate-prop-and-$$props/input.svelte

@@ -0,0 +1,5 @@
+<script>
+	export let value = 42;
+</script>
+
+{$$props}

packages/svelte/tests/migrate/samples/impossible-migrate-prop-and-$$props/output.svelte

@@ -0,0 +1,6 @@
+<!-- @migration-task Error while migrating Svelte code: $$props is used together with named props in a way that cannot be automatically migrated. -->
+<script>
+	export let value = 42;
+</script>
+
+{$$props}

packages/svelte/tests/migrate/samples/impossible-migrate-prop-non-identifier/input.svelte

@@ -0,0 +1,5 @@
+<script>
+	let props = { value: 42 };
+
+	export let { value } = props;
+</script>

packages/svelte/tests/migrate/samples/impossible-migrate-prop-non-identifier/output.svelte

@@ -0,0 +1,6 @@
+<!-- @migration-task Error while migrating Svelte code: Encountered an export declaration pattern that is not supported for automigration. -->
+<script>
+	let props = { value: 42 };
+
+	export let { value } = props;
+</script>

packages/svelte/tests/migrate/samples/unused-beforeUpdate-afterUpdate-extra-imports/input.svelte

@@ -0,0 +1,11 @@
+<script>
+	import { beforeUpdate, afterUpdate, onMount } from "svelte";
+
+	let count = 0;
+
+	onMount(()=>{
+		console.log(count);
+	})
+</script>
+
+<button on:click={()=> count++}></button>

packages/svelte/tests/migrate/samples/unused-beforeUpdate-afterUpdate-extra-imports/output.svelte

@@ -0,0 +1,11 @@
+<script>
+	import { onMount } from "svelte";
+
+	let count = $state(0);
+
+	onMount(()=>{
+		console.log(count);
+	})
+</script>
+
+<button onclick={()=> count++}></button>