From bd54aa188df2a721ab7af311dab4e668958f16f5 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Tue, 16 Apr 2024 22:45:37 +0200
Subject: [PATCH] feat: add self-closing-tags migration (#12128)

* feat: add self-closing-tags migration

Companion to sveltejs/svelte#11114. This adds an npx svelte-migrate self-closing-tags migration that replaces all the self-closing non-void elements in your .svelte files.

* use local Svelte installation
---
 .changeset/sixty-walls-act.md                 |   5 +
 .../default/src/routes/sverdle/+page.svelte   |   2 +-
 .../anchor-afternavigate/+page.svelte         |   2 +-
 .../anchor-onmount/+page.svelte               |   2 +-
 .../data-sveltekit/noscroll/+page.svelte      |   2 +-
 .../noscroll/target/+page.svelte              |   2 +-
 .../routes/iframes/nested/parent/+page.svelte |   2 +-
 .../src/routes/no-ssr/margin/+page.svelte     |   2 +-
 .../basics/src/routes/routing/+page.svelte    |   2 +-
 .../scroll/cross-document/a/+page.svelte      |   2 +-
 .../migrations/self-closing-tags/index.js     |  56 +++++
 .../migrations/self-closing-tags/migrate.js   | 191 ++++++++++++++++++
 .../self-closing-tags/migrate.spec.js         |  31 +++
 packages/migrate/package.json                 |   5 +-
 pnpm-lock.yaml                                |  13 ++
 .../src/routes/home/Video.svelte              |   2 +-
 16 files changed, 310 insertions(+), 11 deletions(-)
 create mode 100644 .changeset/sixty-walls-act.md
 create mode 100644 packages/migrate/migrations/self-closing-tags/index.js
 create mode 100644 packages/migrate/migrations/self-closing-tags/migrate.js
 create mode 100644 packages/migrate/migrations/self-closing-tags/migrate.spec.js

diff --git a/.changeset/sixty-walls-act.md b/.changeset/sixty-walls-act.md
new file mode 100644
index 000000000000..f3271cbfd42b
--- /dev/null
+++ b/.changeset/sixty-walls-act.md
@@ -0,0 +1,5 @@
+---
+"svelte-migrate": minor
+---
+
+feat: add self-closing-tags migration
diff --git a/packages/create-svelte/templates/default/src/routes/sverdle/+page.svelte b/packages/create-svelte/templates/default/src/routes/sverdle/+page.svelte
index 68ab6400de82..42d987106d37 100644
--- a/packages/create-svelte/templates/default/src/routes/sverdle/+page.svelte
+++ b/packages/create-svelte/templates/default/src/routes/sverdle/+page.svelte
@@ -200,7 +200,7 @@
 			stageHeight: window.innerHeight,
 			colors: ['#ff3e00', '#40b3ff', '#676778']
 		}}
-	/>
+	></div>
 {/if}
 
 <style>
diff --git a/packages/kit/test/apps/basics/src/routes/anchor-with-manual-scroll/anchor-afternavigate/+page.svelte b/packages/kit/test/apps/basics/src/routes/anchor-with-manual-scroll/anchor-afternavigate/+page.svelte
index 7ea7c31a836a..7f0601b547b1 100644
--- a/packages/kit/test/apps/basics/src/routes/anchor-with-manual-scroll/anchor-afternavigate/+page.svelte
+++ b/packages/kit/test/apps/basics/src/routes/anchor-with-manual-scroll/anchor-afternavigate/+page.svelte
@@ -12,6 +12,6 @@
 	<p id="go-to-element">The browser scrolls to me</p>
 </div>
 <p id="abcde" style="height: 180vh; background-color: hotpink;">I take precedence</p>
-<div />
+<div></div>
 
 <a href="/anchor-with-manual-scroll/anchor-afternavigate?x=y#go-to-element">reload me</a>
diff --git a/packages/kit/test/apps/basics/src/routes/anchor-with-manual-scroll/anchor-onmount/+page.svelte b/packages/kit/test/apps/basics/src/routes/anchor-with-manual-scroll/anchor-onmount/+page.svelte
index be660c5859b2..99386edf895b 100644
--- a/packages/kit/test/apps/basics/src/routes/anchor-with-manual-scroll/anchor-onmount/+page.svelte
+++ b/packages/kit/test/apps/basics/src/routes/anchor-with-manual-scroll/anchor-onmount/+page.svelte
@@ -13,4 +13,4 @@
 	<p id="go-to-element">The browser scrolls to me</p>
 </div>
 <p id="abcde" style="height: 180vh; background-color: hotpink;">I take precedence</p>
-<div />
+<div></div>
diff --git a/packages/kit/test/apps/basics/src/routes/data-sveltekit/noscroll/+page.svelte b/packages/kit/test/apps/basics/src/routes/data-sveltekit/noscroll/+page.svelte
index e9ad0b2d6b0d..55e457aebfdf 100644
--- a/packages/kit/test/apps/basics/src/routes/data-sveltekit/noscroll/+page.svelte
+++ b/packages/kit/test/apps/basics/src/routes/data-sveltekit/noscroll/+page.svelte
@@ -1,4 +1,4 @@
-<div style="height: 2000px; background: palegoldenrod" />
+<div style="height: 2000px; background: palegoldenrod"></div>
 
 <a id="one" href="/data-sveltekit/noscroll/target" data-sveltekit-noscroll>one</a>
 
diff --git a/packages/kit/test/apps/basics/src/routes/data-sveltekit/noscroll/target/+page.svelte b/packages/kit/test/apps/basics/src/routes/data-sveltekit/noscroll/target/+page.svelte
index a0c3426c8a59..4089ce715737 100644
--- a/packages/kit/test/apps/basics/src/routes/data-sveltekit/noscroll/target/+page.svelte
+++ b/packages/kit/test/apps/basics/src/routes/data-sveltekit/noscroll/target/+page.svelte
@@ -1,3 +1,3 @@
-<div style="height: 2000px; background: palegoldenrod" />
+<div style="height: 2000px; background: palegoldenrod"></div>
 
 <h1>target</h1>
diff --git a/packages/kit/test/apps/basics/src/routes/iframes/nested/parent/+page.svelte b/packages/kit/test/apps/basics/src/routes/iframes/nested/parent/+page.svelte
index 90cc91d81d6c..bc6abe33cf83 100644
--- a/packages/kit/test/apps/basics/src/routes/iframes/nested/parent/+page.svelte
+++ b/packages/kit/test/apps/basics/src/routes/iframes/nested/parent/+page.svelte
@@ -1 +1 @@
-<iframe title="Child content" src="./child" />
+<iframe title="Child content" src="./child"></iframe>
diff --git a/packages/kit/test/apps/basics/src/routes/no-ssr/margin/+page.svelte b/packages/kit/test/apps/basics/src/routes/no-ssr/margin/+page.svelte
index 982a04c9defb..cc72f72fbda4 100644
--- a/packages/kit/test/apps/basics/src/routes/no-ssr/margin/+page.svelte
+++ b/packages/kit/test/apps/basics/src/routes/no-ssr/margin/+page.svelte
@@ -1,6 +1,6 @@
 <div class="container">
 	<span> ^this is not the top of the screen</span>
-	<div class="spacer" />
+	<div class="spacer"></div>
 </div>
 
 <style>
diff --git a/packages/kit/test/apps/basics/src/routes/routing/+page.svelte b/packages/kit/test/apps/basics/src/routes/routing/+page.svelte
index 1d300bf63df1..ed56fb4855eb 100644
--- a/packages/kit/test/apps/basics/src/routes/routing/+page.svelte
+++ b/packages/kit/test/apps/basics/src/routes/routing/+page.svelte
@@ -12,4 +12,4 @@
 
 <a href="/routing/b" data-sveltekit-reload>b</a>
 
-<div class="hydrate-test" />
+<div class="hydrate-test"></div>
diff --git a/packages/kit/test/apps/basics/src/routes/scroll/cross-document/a/+page.svelte b/packages/kit/test/apps/basics/src/routes/scroll/cross-document/a/+page.svelte
index 356bf895e9d4..d7d6ddccf205 100644
--- a/packages/kit/test/apps/basics/src/routes/scroll/cross-document/a/+page.svelte
+++ b/packages/kit/test/apps/basics/src/routes/scroll/cross-document/a/+page.svelte
@@ -1,5 +1,5 @@
 <h1>a</h1>
 
-<div style="height: 200vh; background: teal" />
+<div style="height: 200vh; background: teal"></div>
 
 <a data-sveltekit-reload href="/scroll/cross-document/b">b</a>
diff --git a/packages/migrate/migrations/self-closing-tags/index.js b/packages/migrate/migrations/self-closing-tags/index.js
new file mode 100644
index 000000000000..692c2012a35e
--- /dev/null
+++ b/packages/migrate/migrations/self-closing-tags/index.js
@@ -0,0 +1,56 @@
+import colors from 'kleur';
+import fs from 'node:fs';
+import prompts from 'prompts';
+import glob from 'tiny-glob/sync.js';
+import { remove_self_closing_tags } from './migrate.js';
+import { pathToFileURL } from 'node:url';
+import { resolve } from 'import-meta-resolve';
+
+export async function migrate() {
+	let compiler;
+	try {
+		compiler = await import_from_cwd('svelte/compiler');
+	} catch (e) {
+		console.log(colors.bold().red('❌ Could not find a local Svelte installation.'));
+		return;
+	}
+
+	console.log(
+		colors.bold().yellow('\nThis will update .svelte files inside the current directory\n')
+	);
+
+	const response = await prompts({
+		type: 'confirm',
+		name: 'value',
+		message: 'Continue?',
+		initial: false
+	});
+
+	if (!response.value) {
+		process.exit(1);
+	}
+
+	const files = glob('**/*.svelte')
+		.map((file) => file.replace(/\\/g, '/'))
+		.filter((file) => !file.includes('/node_modules/'));
+
+	for (const file of files) {
+		try {
+			const code = await remove_self_closing_tags(compiler, fs.readFileSync(file, 'utf-8'));
+			fs.writeFileSync(file, code);
+		} catch (e) {
+			// continue
+		}
+	}
+
+	console.log(colors.bold().green('✔ Your project has been updated'));
+	console.log('  If using Prettier, please upgrade to the latest prettier-plugin-svelte version');
+}
+
+/** @param {string} name */
+async function import_from_cwd(name) {
+	const cwd = pathToFileURL(process.cwd()).href;
+	const url = await resolve(name, cwd + '/x.js');
+
+	return import(url);
+}
diff --git a/packages/migrate/migrations/self-closing-tags/migrate.js b/packages/migrate/migrations/self-closing-tags/migrate.js
new file mode 100644
index 000000000000..8145b199079b
--- /dev/null
+++ b/packages/migrate/migrations/self-closing-tags/migrate.js
@@ -0,0 +1,191 @@
+import MagicString from 'magic-string';
+import { walk } from 'zimmerframe';
+
+const VoidElements = [
+	'area',
+	'base',
+	'br',
+	'col',
+	'embed',
+	'hr',
+	'img',
+	'input',
+	'keygen',
+	'link',
+	'menuitem',
+	'meta',
+	'param',
+	'source',
+	'track',
+	'wbr'
+];
+
+const SVGElements = [
+	'altGlyph',
+	'altGlyphDef',
+	'altGlyphItem',
+	'animate',
+	'animateColor',
+	'animateMotion',
+	'animateTransform',
+	'circle',
+	'clipPath',
+	'color-profile',
+	'cursor',
+	'defs',
+	'desc',
+	'discard',
+	'ellipse',
+	'feBlend',
+	'feColorMatrix',
+	'feComponentTransfer',
+	'feComposite',
+	'feConvolveMatrix',
+	'feDiffuseLighting',
+	'feDisplacementMap',
+	'feDistantLight',
+	'feDropShadow',
+	'feFlood',
+	'feFuncA',
+	'feFuncB',
+	'feFuncG',
+	'feFuncR',
+	'feGaussianBlur',
+	'feImage',
+	'feMerge',
+	'feMergeNode',
+	'feMorphology',
+	'feOffset',
+	'fePointLight',
+	'feSpecularLighting',
+	'feSpotLight',
+	'feTile',
+	'feTurbulence',
+	'filter',
+	'font',
+	'font-face',
+	'font-face-format',
+	'font-face-name',
+	'font-face-src',
+	'font-face-uri',
+	'foreignObject',
+	'g',
+	'glyph',
+	'glyphRef',
+	'hatch',
+	'hatchpath',
+	'hkern',
+	'image',
+	'line',
+	'linearGradient',
+	'marker',
+	'mask',
+	'mesh',
+	'meshgradient',
+	'meshpatch',
+	'meshrow',
+	'metadata',
+	'missing-glyph',
+	'mpath',
+	'path',
+	'pattern',
+	'polygon',
+	'polyline',
+	'radialGradient',
+	'rect',
+	'set',
+	'solidcolor',
+	'stop',
+	'svg',
+	'switch',
+	'symbol',
+	'text',
+	'textPath',
+	'tref',
+	'tspan',
+	'unknown',
+	'use',
+	'view',
+	'vkern'
+];
+
+/**
+ * @param {{ preprocess: any, parse: any }} svelte_compiler
+ * @param {string} source
+ */
+export async function remove_self_closing_tags({ preprocess, parse }, source) {
+	const preprocessed = await preprocess(source, {
+		/** @param {{ content: string }} input */
+		script: ({ content }) => ({
+			code: content
+				.split('\n')
+				.map((line) => ' '.repeat(line.length))
+				.join('\n')
+		}),
+		/** @param {{ content: string }} input */
+		style: ({ content }) => ({
+			code: content
+				.split('\n')
+				.map((line) => ' '.repeat(line.length))
+				.join('\n')
+		})
+	});
+	const ast = parse(preprocessed.code);
+	const ms = new MagicString(source);
+	/** @type {Array<() => void>} */
+	const updates = [];
+	let is_foreign = false;
+	let is_custom_element = false;
+
+	walk(ast.html, null, {
+		_(node, { next, stop }) {
+			if (node.type === 'Options') {
+				const namespace = node.attributes.find(
+					/** @param {any} a */
+					(a) => a.type === 'Attribute' && a.name === 'namespace'
+				);
+				if (namespace?.value[0].data === 'foreign') {
+					is_foreign = true;
+					stop();
+					return;
+				}
+
+				is_custom_element = node.attributes.some(
+					/** @param {any} a */
+					(a) => a.type === 'Attribute' && (a.name === 'customElement' || a.name === 'tag')
+				);
+			}
+
+			if (node.type === 'Element' || node.type === 'Slot') {
+				const is_self_closing = source[node.end - 2] === '/';
+				if (
+					!is_self_closing ||
+					VoidElements.includes(node.name) ||
+					SVGElements.includes(node.name) ||
+					!/^[a-z0-9_-]+$/.test(node.name)
+				) {
+					return;
+				}
+
+				let start = node.end - 2;
+				if (source[start - 1] === ' ') {
+					start--;
+				}
+				updates.push(() => {
+					if (node.type === 'Element' || is_custom_element) {
+						ms.update(start, node.end, `></${node.name}>`);
+					}
+				});
+			}
+
+			next();
+		}
+	});
+
+	if (is_foreign) {
+		return source;
+	}
+
+	updates.forEach((update) => update());
+	return ms.toString();
+}
diff --git a/packages/migrate/migrations/self-closing-tags/migrate.spec.js b/packages/migrate/migrations/self-closing-tags/migrate.spec.js
new file mode 100644
index 000000000000..d45d04991d16
--- /dev/null
+++ b/packages/migrate/migrations/self-closing-tags/migrate.spec.js
@@ -0,0 +1,31 @@
+import { assert, test } from 'vitest';
+import * as compiler from 'svelte/compiler';
+import { remove_self_closing_tags } from './migrate.js';
+
+/** @type {Record<string, string>} */
+const tests = {
+	'<div/>': '<div></div>',
+	'<div />': '<div></div>',
+	'<custom-element />': '<custom-element></custom-element>',
+	'<div class="foo"/>': '<div class="foo"></div>',
+	'<div class="foo" />': '<div class="foo"></div>',
+	'\t<div\n\t\tonclick={blah}\n\t/>': '\t<div\n\t\tonclick={blah}\n\t></div>',
+	'<foo-bar/>': '<foo-bar></foo-bar>',
+	'<link/>': '<link/>',
+	'<link />': '<link />',
+	'<svg><g /></svg>': '<svg><g /></svg>',
+	'<slot />': '<slot />',
+	'<svelte:options customElement="my-element" /><slot />':
+		'<svelte:options customElement="my-element" /><slot></slot>',
+	'<svelte:options namespace="foreign" /><foo />': '<svelte:options namespace="foreign" /><foo />',
+	'<script>console.log("<div />")</script>': '<script>console.log("<div />")</script>',
+	'<script lang="ts">let a: string = ""</script><div />':
+		'<script lang="ts">let a: string = ""</script><div></div>'
+};
+
+for (const input in tests) {
+	test(input, async () => {
+		const output = tests[input];
+		assert.equal(await remove_self_closing_tags(compiler, input), output);
+	});
+}
diff --git a/packages/migrate/package.json b/packages/migrate/package.json
index fa1dbfdf4aea..1957bdfb09cd 100644
--- a/packages/migrate/package.json
+++ b/packages/migrate/package.json
@@ -24,19 +24,22 @@
 		"!migrations/**/samples.md"
 	],
 	"dependencies": {
+		"import-meta-resolve": "^4.0.0",
 		"kleur": "^4.1.5",
 		"magic-string": "^0.30.5",
 		"prompts": "^2.4.2",
 		"semver": "^7.5.4",
 		"tiny-glob": "^0.2.9",
 		"ts-morph": "^22.0.0",
-		"typescript": "^5.3.3"
+		"typescript": "^5.3.3",
+		"zimmerframe": "^1.1.2"
 	},
 	"devDependencies": {
 		"@types/node": "^18.19.3",
 		"@types/prompts": "^2.4.9",
 		"@types/semver": "^7.5.6",
 		"prettier": "^3.1.1",
+		"svelte": "^4.2.10",
 		"vitest": "^1.5.0"
 	},
 	"scripts": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9294e2127afb..c420992d9b78 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1077,6 +1077,9 @@ importers:
 
   packages/migrate:
     dependencies:
+      import-meta-resolve:
+        specifier: ^4.0.0
+        version: 4.0.0
       kleur:
         specifier: ^4.1.5
         version: 4.1.5
@@ -1098,6 +1101,9 @@ importers:
       typescript:
         specifier: ^5.3.3
         version: 5.4.5
+      zimmerframe:
+        specifier: ^1.1.2
+        version: 1.1.2
     devDependencies:
       '@types/node':
         specifier: ^18.19.3
@@ -1111,6 +1117,9 @@ importers:
       prettier:
         specifier: ^3.1.1
         version: 3.2.5
+      svelte:
+        specifier: ^4.2.10
+        version: 4.2.14
       vitest:
         specifier: ^1.5.0
         version: 1.5.0(@types/node@18.19.31)(lightningcss@1.24.1)
@@ -7457,6 +7466,10 @@ packages:
       stacktracey: 2.1.8
     dev: false
 
+  /zimmerframe@1.1.2:
+    resolution: {integrity: sha512-rAbqEGa8ovJy4pyBxZM70hg4pE6gDgaQ0Sl9M3enG3I0d6H4XSAM3GeNGLKnsBpuijUow064sf7ww1nutC5/3w==}
+    dev: false
+
   /zod@3.22.4:
     resolution: {integrity: sha512-iC+8Io04lddc+mVqQ9AZ7OQ2MrUKGN+oIQyq1vemgt46jwCwLfhq7/pwnBnNXXXZb8VTVLKwp9EDkx+ryxIWmg==}
     dev: false
diff --git a/sites/kit.svelte.dev/src/routes/home/Video.svelte b/sites/kit.svelte.dev/src/routes/home/Video.svelte
index 6426d2636424..057e118794c5 100644
--- a/sites/kit.svelte.dev/src/routes/home/Video.svelte
+++ b/sites/kit.svelte.dev/src/routes/home/Video.svelte
@@ -120,7 +120,7 @@
 	</video>
 
 	{#if d}
-		<div class="progress-bar" style={`width: ${(t / d) * 100}%`} />
+		<div class="progress-bar" style={`width: ${(t / d) * 100}%`}></div>
 	{/if}
 
 	<div class="top-controls">