From a51b3df4aa4184c6c025f9f20fb51ff11791b398 Mon Sep 17 00:00:00 2001
From: Paolo Ricciuti <ricciutipaolo@gmail.com>
Date: Thu, 3 Oct 2024 12:55:53 +0200
Subject: [PATCH] feat: support migration of self closing tags (#13479)

---
 .changeset/real-camels-pay.md                          |  5 +++++
 packages/svelte/src/compiler/migrate/index.js          | 10 ++++++++++
 .../migrate/samples/self-closing-elements/input.svelte |  5 +++++
 .../samples/self-closing-elements/output.svelte        |  5 +++++
 4 files changed, 25 insertions(+)
 create mode 100644 .changeset/real-camels-pay.md
 create mode 100644 packages/svelte/tests/migrate/samples/self-closing-elements/input.svelte
 create mode 100644 packages/svelte/tests/migrate/samples/self-closing-elements/output.svelte

diff --git a/.changeset/real-camels-pay.md b/.changeset/real-camels-pay.md
new file mode 100644
index 0000000000..12dd086a9a
--- /dev/null
+++ b/.changeset/real-camels-pay.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+feat: support migration of self closing tags
diff --git a/packages/svelte/src/compiler/migrate/index.js b/packages/svelte/src/compiler/migrate/index.js
index 0f397265a0..95724ad807 100644
--- a/packages/svelte/src/compiler/migrate/index.js
+++ b/packages/svelte/src/compiler/migrate/index.js
@@ -14,6 +14,7 @@ import { extract_identifiers } from '../utils/ast.js';
 import { migrate_svelte_ignore } from '../utils/extract_svelte_ignore.js';
 import { determine_slot } from '../utils/slot.js';
 import { validate_component_options } from '../validate-options.js';
+import { is_svg, is_void } from '../../utils.js';
 
 const regex_style_tags = /(<style[^>]+>)([\S\s]*?)(<\/style>)/g;
 const style_placeholder = '/*$$__STYLE_CONTENT__$$*/';
@@ -580,6 +581,15 @@ const template = {
 	},
 	RegularElement(node, { state, next }) {
 		handle_events(node, state);
+		// Strip off any namespace from the beginning of the node name.
+		const node_name = node.name.replace(/[a-zA-Z-]*:/g, '');
+
+		if (state.analysis.source[node.end - 2] === '/' && !is_void(node_name) && !is_svg(node_name)) {
+			let trimmed_position = node.end - 2;
+			while (state.str.original.charAt(trimmed_position - 1) === ' ') trimmed_position--;
+			state.str.remove(trimmed_position, node.end - 1);
+			state.str.appendRight(node.end, `</${node.name}>`);
+		}
 		next();
 	},
 	SvelteElement(node, { state, next }) {
diff --git a/packages/svelte/tests/migrate/samples/self-closing-elements/input.svelte b/packages/svelte/tests/migrate/samples/self-closing-elements/input.svelte
new file mode 100644
index 0000000000..edceffe277
--- /dev/null
+++ b/packages/svelte/tests/migrate/samples/self-closing-elements/input.svelte
@@ -0,0 +1,5 @@
+<div />
+<div title="preserve" />
+<input type="text" />
+<hr />
+<f:table />
diff --git a/packages/svelte/tests/migrate/samples/self-closing-elements/output.svelte b/packages/svelte/tests/migrate/samples/self-closing-elements/output.svelte
new file mode 100644
index 0000000000..6aee688bb8
--- /dev/null
+++ b/packages/svelte/tests/migrate/samples/self-closing-elements/output.svelte
@@ -0,0 +1,5 @@
+<div></div>
+<div title="preserve"></div>
+<input type="text" />
+<hr />
+<f:table></f:table>