feat: add self-closing-tags migration (#12128)

dummdidumm · web-flow · commit bd54aa188df2 · 2024-04-16T16:45:37.000-04:00
* 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
diff --git a/.changeset/sixty-walls-act.md 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
diff --git a/sites/kit.svelte.dev/src/routes/home/Video.svelte b/sites/kit.svelte.dev/src/routes/home/Video.svelte

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"svelte-migrate": minor
 +---
++
 +feat: add self-closing-tags migration
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-<div style="height: 2000px; background: palegoldenrod" />`
	`1`	`+<div style="height: 2000px; background: palegoldenrod"></div>`
`2`	`2`
`3`	`3`	`<a id="one" href="/data-sveltekit/noscroll/target" data-sveltekit-noscroll>one</a>`
`4`	`4`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,3 @@`
`1`		`-<div style="height: 2000px; background: palegoldenrod" />`
	`1`	`+<div style="height: 2000px; background: palegoldenrod"></div>`
`2`	`2`
`3`	`3`	`<h1>target</h1>`
Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-<iframe title="Child content" src="./child" />`
	`1`	`+<iframe title="Child content" src="./child"></iframe>`
Original file line number	Diff line number	Diff line change
`@@ -12,4 +12,4 @@`
`12`	`12`
`13`	`13`	`<a href="/routing/b" data-sveltekit-reload>b</a>`
`14`	`14`
`15`		`-<div class="hydrate-test" />`
	`15`	`+<div class="hydrate-test"></div>`