From 777bc3efc3061de8a10005182f15f4f693626219 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Fri, 12 Apr 2024 17:50:31 -0400 Subject: [PATCH 1/3] add `npx svelte-migrate self-closing-tag` --- .changeset/cyan-snails-unite.md | 5 + .../migrations/self-closing-tags/index.js | 34 +++++ .../migrations/self-closing-tags/migrate.js | 117 ++++++++++++++++++ .../self-closing-tags/migrate.spec.js | 22 ++++ 4 files changed, 178 insertions(+) create mode 100644 .changeset/cyan-snails-unite.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/cyan-snails-unite.md b/.changeset/cyan-snails-unite.md new file mode 100644 index 000000000000..7315f82f197b --- /dev/null +++ b/.changeset/cyan-snails-unite.md @@ -0,0 +1,5 @@ +--- +'svelte-migrate': minor +--- + +feat: add self-closing-tags migration 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..a129cf8ab59d --- /dev/null +++ b/packages/migrate/migrations/self-closing-tags/index.js @@ -0,0 +1,34 @@ +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'; + +export async function migrate() { + 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) { + const code = remove_self_closing_tags(fs.readFileSync(file, 'utf-8')); + fs.writeFileSync(file, code); + } + + console.log(colors.bold().green('✔ Your project has been updated')); + console.log(' If using Prettier, please upgrade to the latest prettier-plugin-svelte version'); +} 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..60be9a672f40 --- /dev/null +++ b/packages/migrate/migrations/self-closing-tags/migrate.js @@ -0,0 +1,117 @@ +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 {string} code + */ +export function remove_self_closing_tags(code) { + return code.replace(/<([a-z-]+)(\s[^>]+?)? ?\/>/g, (match, name, attributes = '') => { + if (VoidElements.includes(name) || SVGElements.includes(name)) return match; + return `<${name}${attributes}>`; + }); +} 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..c85e20c371ac --- /dev/null +++ b/packages/migrate/migrations/self-closing-tags/migrate.spec.js @@ -0,0 +1,22 @@ +import { assert, test } from 'vitest'; +import { remove_self_closing_tags } from './migrate.js'; + +/** @type {Record} */ +const tests = { + '
': '
', + '
': '
', + '
': '
', + '
': '
', + '\t': '\t
', + '': '', + '': '', + '': '', + '': '' +}; + +for (const input in tests) { + test(input, () => { + const output = tests[input]; + assert.equal(remove_self_closing_tags(input), output); + }); +} From 4bd3a2da60c5a225017b591d5c8bf5fbdcc62395 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Fri, 12 Apr 2024 17:55:15 -0400 Subject: [PATCH 2/3] bump prettier-plugin-svelte --- packages/create-svelte/package.json | 2 +- packages/create-svelte/shared/+prettier/package.json | 2 +- pnpm-lock.yaml | 12 ++++++------ sites/kit.svelte.dev/package.json | 2 +- 4 files changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/create-svelte/package.json b/packages/create-svelte/package.json index 94a07347f49f..b91f56328240 100644 --- a/packages/create-svelte/package.json +++ b/packages/create-svelte/package.json @@ -20,7 +20,7 @@ "@types/gitignore-parser": "^0.0.3", "gitignore-parser": "^0.0.2", "prettier": "^3.1.1", - "prettier-plugin-svelte": "^3.1.2", + "prettier-plugin-svelte": "^3.2.3", "sucrase": "^3.34.0", "svelte": "^4.2.10", "tiny-glob": "^0.2.9", diff --git a/packages/create-svelte/shared/+prettier/package.json b/packages/create-svelte/shared/+prettier/package.json index e772fe047ced..7d2f27d4a660 100644 --- a/packages/create-svelte/shared/+prettier/package.json +++ b/packages/create-svelte/shared/+prettier/package.json @@ -1,6 +1,6 @@ { "devDependencies": { "prettier": "^3.1.1", - "prettier-plugin-svelte": "^3.1.2" + "prettier-plugin-svelte": "^3.2.3" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 988c6f20c559..0e02f8861eb5 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -319,8 +319,8 @@ importers: specifier: ^3.1.1 version: 3.2.5 prettier-plugin-svelte: - specifier: ^3.1.2 - version: 3.1.2(prettier@3.2.5)(svelte@4.2.10) + specifier: ^3.2.3 + version: 3.2.3(prettier@3.2.5)(svelte@4.2.10) sucrase: specifier: ^3.34.0 version: 3.35.0 @@ -1258,8 +1258,8 @@ importers: specifier: ^3.1.1 version: 3.2.5 prettier-plugin-svelte: - specifier: ^3.1.2 - version: 3.1.2(prettier@3.2.5)(svelte@4.2.10) + specifier: ^3.2.3 + version: 3.2.3(prettier@3.2.5)(svelte@4.2.10) prism-svelte: specifier: ^0.5.0 version: 0.5.0 @@ -5846,8 +5846,8 @@ packages: engines: {node: '>= 0.8.0'} dev: true - /prettier-plugin-svelte@3.1.2(prettier@3.2.5)(svelte@4.2.10): - resolution: {integrity: sha512-7xfMZtwgAWHMT0iZc8jN4o65zgbAQ3+O32V6W7pXrqNvKnHnkoyQCGCbKeUyXKZLbYE0YhFRnamfxfkEGxm8qA==} + /prettier-plugin-svelte@3.2.3(prettier@3.2.5)(svelte@4.2.10): + resolution: {integrity: sha512-wJq8RunyFlWco6U0WJV5wNCM7zpBFakS76UBSbmzMGpncpK98NZABaE+s7n8/APDCEVNHXC5Mpq+MLebQtsRlg==} peerDependencies: prettier: ^3.0.0 svelte: ^3.2.0 || ^4.0.0-next.0 || ^5.0.0-next.0 diff --git a/sites/kit.svelte.dev/package.json b/sites/kit.svelte.dev/package.json index a111a4b8e2e6..4d531bbe2ba3 100644 --- a/sites/kit.svelte.dev/package.json +++ b/sites/kit.svelte.dev/package.json @@ -26,7 +26,7 @@ "lightningcss": "^1.22.1", "marked": "^12.0.0", "prettier": "^3.1.1", - "prettier-plugin-svelte": "^3.1.2", + "prettier-plugin-svelte": "^3.2.3", "prism-svelte": "^0.5.0", "prismjs": "^1.29.0", "shiki-twoslash": "^3.1.2", From db6b295c3022ec1878368075a0e87e6faaa482fa Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Fri, 12 Apr 2024 17:56:17 -0400 Subject: [PATCH 3/3] run migration --- .../test/apps/prerendered/src/routes/+layout.svelte | 2 +- packages/adapter-static/test/apps/spa/src/routes/+layout.svelte | 2 +- .../create-svelte/templates/default/src/routes/+layout.svelte | 2 +- .../templates/default/src/routes/sverdle/+page.svelte | 2 +- packages/kit/src/runtime/components/layout.svelte | 2 +- packages/kit/test/apps/amp/src/routes/+layout.svelte | 2 +- packages/kit/test/apps/basics/src/routes/+layout.svelte | 2 +- .../test/apps/basics/src/routes/accessibility/+layout.svelte | 2 +- .../basics/src/routes/accessibility/autofocus/+layout.svelte | 2 +- .../anchor-with-manual-scroll/anchor-afternavigate/+page.svelte | 2 +- .../anchor-with-manual-scroll/anchor-onmount/+page.svelte | 2 +- .../apps/basics/src/routes/cookies/set-in-layout/+layout.svelte | 2 +- .../apps/basics/src/routes/data-sveltekit/noscroll/+page.svelte | 2 +- .../src/routes/data-sveltekit/noscroll/target/+page.svelte | 2 +- .../basics/src/routes/encoded/escape-sequences/+layout.svelte | 2 +- packages/kit/test/apps/basics/src/routes/errors/+layout.svelte | 2 +- .../apps/basics/src/routes/headers/set-cookie/+layout.svelte | 2 +- .../apps/basics/src/routes/iframes/nested/parent/+page.svelte | 2 +- .../apps/basics/src/routes/load/change-detection/+layout.svelte | 2 +- .../src/routes/load/invalidation/forced-goto/+layout.svelte | 2 +- .../basics/src/routes/load/invalidation/forced/+layout.svelte | 2 +- .../basics/src/routes/load/invalidation/multiple/+layout.svelte | 2 +- .../basics/src/routes/load/invalidation/params/+layout.svelte | 2 +- .../src/routes/load/invalidation/route/server/+layout.svelte | 2 +- .../src/routes/load/invalidation/route/shared/+layout.svelte | 2 +- .../apps/basics/src/routes/load/no-server-load/+layout.svelte | 2 +- .../apps/basics/src/routes/load/parent/server/+layout.svelte | 2 +- .../basics/src/routes/load/parent/server/[x]/+layout.svelte | 2 +- .../basics/src/routes/load/parent/server/[x]/[y]/+layout.svelte | 2 +- .../apps/basics/src/routes/load/parent/shared/+layout.svelte | 2 +- .../basics/src/routes/load/parent/shared/[x]/+layout.svelte | 2 +- .../basics/src/routes/load/parent/shared/[x]/[y]/+layout.svelte | 2 +- .../load/server-data-reuse/with-changing-parent/+layout.svelte | 2 +- .../apps/basics/src/routes/load/unchanged-parent/+layout.svelte | 2 +- .../test/apps/basics/src/routes/load/unchanged/+layout.svelte | 2 +- .../test/apps/basics/src/routes/nested-layout/+layout.svelte | 2 +- .../apps/basics/src/routes/nested-layout/foo/+layout.svelte | 2 +- .../apps/basics/src/routes/nested-layout/foo/bar/+layout.svelte | 2 +- .../apps/basics/src/routes/nested-layout/reset/+layout@.svelte | 2 +- packages/kit/test/apps/basics/src/routes/no-ssr/+layout.svelte | 2 +- .../kit/test/apps/basics/src/routes/no-ssr/margin/+page.svelte | 2 +- .../src/routes/no-ssr/ssr-page-config/layout/+layout.svelte | 2 +- .../test/apps/basics/src/routes/prerendering/env/+layout.svelte | 2 +- packages/kit/test/apps/basics/src/routes/routing/+page.svelte | 2 +- .../apps/basics/src/routes/routing/cancellation/+layout.svelte | 2 +- .../test/apps/basics/src/routes/routing/matched/+layout.svelte | 2 +- .../basics/src/routes/routing/rest/non-greedy/+layout.svelte | 2 +- .../apps/basics/src/routes/routing/rest/path/+layout.svelte | 2 +- .../src/routes/routing/trailing-slash-server/+layout.svelte | 2 +- .../basics/src/routes/routing/trailing-slash/+layout.svelte | 2 +- .../apps/basics/src/routes/scroll/cross-document/a/+page.svelte | 2 +- .../kit/test/apps/basics/src/routes/selection/+layout.svelte | 2 +- .../test/apps/basics/src/routes/shadowed/parent/+layout.svelte | 2 +- .../basics/src/routes/shallow-routing/push-state/+layout.svelte | 2 +- .../src/routes/shallow-routing/replace-state/+layout.svelte | 2 +- .../kit/test/apps/basics/src/routes/snapshot/+layout.svelte | 2 +- .../kit/test/apps/basics/src/routes/store/data/+layout.svelte | 2 +- .../basics/src/routes/store/data/store-update/+layout.svelte | 2 +- .../test/apps/basics/src/routes/store/navigating/+layout.svelte | 2 +- packages/kit/test/apps/dev-only/src/routes/+layout.svelte | 2 +- packages/kit/test/apps/embed/src/routes/+layout.svelte | 2 +- packages/kit/test/apps/no-ssr/src/routes/+layout.svelte | 2 +- packages/kit/test/apps/options-2/src/routes/+layout.svelte | 2 +- packages/kit/test/apps/options/source/pages/+layout.svelte | 2 +- .../apps/options/source/pages/custom-extensions/+layout.svelte | 2 +- packages/kit/test/apps/writes/src/routes/+layout.svelte | 2 +- packages/kit/test/prerendering/basics/src/routes/+layout.svelte | 2 +- .../basics/src/routes/trailing-slash/+layout.svelte | 2 +- .../kit/test/prerendering/options/src/routes/+layout.svelte | 2 +- .../kit/test/prerendering/paths-base/src/routes/+layout.svelte | 2 +- .../package/test/fixtures/emitTypes-false/expected/Test.svelte | 2 +- .../package/test/fixtures/emitTypes-false/src/lib/Test.svelte | 2 +- packages/package/test/fixtures/javascript/expected/Test.svelte | 2 +- packages/package/test/fixtures/javascript/src/lib/Test.svelte | 2 +- .../package/test/fixtures/svelte-3-types/expected/Test.svelte | 2 +- .../package/test/fixtures/svelte-3-types/src/lib/Test.svelte | 2 +- packages/package/test/fixtures/svelte-kit/expected/Test.svelte | 2 +- .../package/test/fixtures/svelte-kit/src/kitlib/Test.svelte | 2 +- .../test/fixtures/typescript-esnext/expected/Test.svelte | 2 +- .../package/test/fixtures/typescript-esnext/src/lib/Test.svelte | 2 +- .../test/fixtures/typescript-nodenext/expected/Test.svelte | 2 +- .../test/fixtures/typescript-nodenext/src/lib/Test.svelte | 2 +- sites/kit.svelte.dev/src/routes/+layout.svelte | 2 +- sites/kit.svelte.dev/src/routes/docs/+layout.svelte | 2 +- sites/kit.svelte.dev/src/routes/home/Video.svelte | 2 +- 85 files changed, 85 insertions(+), 85 deletions(-) diff --git a/packages/adapter-static/test/apps/prerendered/src/routes/+layout.svelte b/packages/adapter-static/test/apps/prerendered/src/routes/+layout.svelte index 4fa864ce7aa9..13e0e91ed627 100644 --- a/packages/adapter-static/test/apps/prerendered/src/routes/+layout.svelte +++ b/packages/adapter-static/test/apps/prerendered/src/routes/+layout.svelte @@ -1 +1 @@ - + diff --git a/packages/adapter-static/test/apps/spa/src/routes/+layout.svelte b/packages/adapter-static/test/apps/spa/src/routes/+layout.svelte index 439e52c54c97..23e8bfb4e719 100644 --- a/packages/adapter-static/test/apps/spa/src/routes/+layout.svelte +++ b/packages/adapter-static/test/apps/spa/src/routes/+layout.svelte @@ -3,4 +3,4 @@ about - + diff --git a/packages/create-svelte/templates/default/src/routes/+layout.svelte b/packages/create-svelte/templates/default/src/routes/+layout.svelte index 9c7445f55ec8..8bb03b6b4aec 100644 --- a/packages/create-svelte/templates/default/src/routes/+layout.svelte +++ b/packages/create-svelte/templates/default/src/routes/+layout.svelte @@ -7,7 +7,7 @@
- +
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'] }} - /> + >
{/if}