feat: migrate <svelte:element this="div"> (#11659)

Author: Rich-Harris

.changeset/thin-years-rhyme.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+feat: migrate `<svelte:element this="div">`

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

@@ -427,6 +427,26 @@ const template = {
 		next();
 	},
 	SvelteElement(node, { state, next }) {
+		if (node.tag.type === 'Literal') {
+			let is_static = true;
+
+			let a = /** @type {number} */ (node.tag.start);
+			let b = /** @type {number} */ (node.tag.end);
+			let quote_mark = state.str.original[a - 1];
+
+			while (state.str.original[--a] !== '=') {
+				if (state.str.original[a] === '{') {
+					is_static = false;
+					break;
+				}
+			}
+
+			if (is_static && state.str.original[b] === quote_mark) {
+				state.str.prependLeft(a + 1, '{');
+				state.str.appendRight(/** @type {number} */ (node.tag.end) + 1, '}');
+			}
+		}
+
 		handle_events(node, state);
 		next();
 	},

packages/svelte/src/compiler/phases/1-parse/state/element.js

@@ -280,7 +280,13 @@ export default function tag(parser) {
 			// TODO in 6.0, error
 			element.tag =
 				chunk.type === 'Text'
-					? { type: 'Literal', value: chunk.data, raw: `'${chunk.raw}'` }
+					? {
+							type: 'Literal',
+							value: chunk.data,
+							raw: `'${chunk.raw}'`,
+							start: chunk.start,
+							end: chunk.end
+						}
 					: chunk.expression;
 		} else {
 			element.tag = chunk.expression;

packages/svelte/tests/migrate/samples/svelte-element/input.svelte

@@ -0,0 +1,6 @@
+<svelte:element this="div" />
+<svelte:element this='div' />
+<svelte:element this={"div"} />
+
+<!-- we don't try to fix this bug, we just leave it as-is -->
+<svelte:element this="h{n}" />

packages/svelte/tests/migrate/samples/svelte-element/output.svelte

@@ -0,0 +1,6 @@
+<svelte:element this={"div"} />
+<svelte:element this={'div'} />
+<svelte:element this={"div"} />
+
+<!-- we don't try to fix this bug, we just leave it as-is -->
+<svelte:element this="h{n}" />

packages/svelte/tests/migrate/test.ts

@@ -21,7 +21,7 @@ const { test, run } = suite<ParserTest>(async (config, cwd) => {
 		fs.writeFileSync(`${cwd}/_actual.svelte`, actual);
 
 		const expected = try_read_file(`${cwd}/output.svelte`);
-		assert.deepEqual(actual, expected);
+		assert.deepEqual(actual.trim(), expected?.trim());
 	}
 });