From c29b74669d226b6d7fe0684122b17868d69e799e Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 16 May 2024 14:09:50 -0400
Subject: [PATCH] feat: migrate `<svelte:element this="div">` (#11659)

---
 .changeset/thin-years-rhyme.md                |  5 +++++
 packages/svelte/src/compiler/migrate/index.js | 20 +++++++++++++++++++
 .../compiler/phases/1-parse/state/element.js  |  8 +++++++-
 .../samples/svelte-element/input.svelte       |  6 ++++++
 .../samples/svelte-element/output.svelte      |  6 ++++++
 packages/svelte/tests/migrate/test.ts         |  2 +-
 6 files changed, 45 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/thin-years-rhyme.md
 create mode 100644 packages/svelte/tests/migrate/samples/svelte-element/input.svelte
 create mode 100644 packages/svelte/tests/migrate/samples/svelte-element/output.svelte

diff --git a/.changeset/thin-years-rhyme.md b/.changeset/thin-years-rhyme.md
new file mode 100644
index 000000000000..14faa1a9a285
--- /dev/null
+++ b/.changeset/thin-years-rhyme.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+feat: migrate `<svelte:element this="div">`
diff --git a/packages/svelte/src/compiler/migrate/index.js b/packages/svelte/src/compiler/migrate/index.js
index 8d1392f821f3..0a64088c5a9e 100644
--- a/packages/svelte/src/compiler/migrate/index.js
+++ b/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();
 	},
diff --git a/packages/svelte/src/compiler/phases/1-parse/state/element.js b/packages/svelte/src/compiler/phases/1-parse/state/element.js
index 5a2dccb551fa..cb6f24f86856 100644
--- a/packages/svelte/src/compiler/phases/1-parse/state/element.js
+++ b/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;
diff --git a/packages/svelte/tests/migrate/samples/svelte-element/input.svelte b/packages/svelte/tests/migrate/samples/svelte-element/input.svelte
new file mode 100644
index 000000000000..234ca717afee
--- /dev/null
+++ b/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}" />
diff --git a/packages/svelte/tests/migrate/samples/svelte-element/output.svelte b/packages/svelte/tests/migrate/samples/svelte-element/output.svelte
new file mode 100644
index 000000000000..09a9960f56ad
--- /dev/null
+++ b/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}" />
diff --git a/packages/svelte/tests/migrate/test.ts b/packages/svelte/tests/migrate/test.ts
index a3c247245cf2..5aa86a194f0f 100644
--- a/packages/svelte/tests/migrate/test.ts
+++ b/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());
 	}
 });