From c0c24047a28506f9cefc681baa01ac6d048dd103 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Wed, 10 Apr 2024 18:51:53 -0400 Subject: [PATCH 01/12] add self-closing-tags migration --- .changeset/cyan-snails-unite.md | 5 + .../migrations/self-closing-tags/index.js | 36 ++++++ .../migrations/self-closing-tags/migrate.js | 117 ++++++++++++++++++ .../self-closing-tags/migrate.spec.js | 21 ++++ 4 files changed, 179 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..31f42dff54d4 --- /dev/null +++ b/packages/migrate/migrations/self-closing-tags/index.js @@ -0,0 +1,36 @@ +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 { update_js_file, update_svelte_file } from '../../utils.js'; +// import { transform_code, transform_svelte_code } 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) { + // replace all occurrences of e.g. `
` with `
`, preserving attributes etc + 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')); +} 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..8b9f0bc6bc12 --- /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[^>]+?)?\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..772b380634a7 --- /dev/null +++ b/packages/migrate/migrations/self-closing-tags/migrate.spec.js @@ -0,0 +1,21 @@ +import { assert, test } from 'vitest'; +import { remove_self_closing_tags } from './migrate.js'; + +/** @type {Record} */ +const tests = { + '
': '
', + '
': '
', + '
': '
', + '
': '
', + '': '', + '': '', + '': '', + '': '' +}; + +for (const input in tests) { + test(input, () => { + const output = tests[input]; + assert.equal(remove_self_closing_tags(input), output); + }); +} From b289e650d6a52bf3d1ef72259e414c4245918fae Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Wed, 10 Apr 2024 18:52:27 -0400 Subject: [PATCH 02/12] apply 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/exports/vite/dev/index.js | 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 +- 86 files changed, 86 insertions(+), 86 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..9ef9177a570d 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}