From 859f5873f0d5d258c2bd1c5f629619a3f318e249 Mon Sep 17 00:00:00 2001 From: Quang Phan Date: Fri, 17 May 2024 19:12:54 +0700 Subject: [PATCH] chore(preprocess-inline-svg): switch to modern Svetle AST --- .changeset/brave-tips-do.md | 5 + packages/preprocess-inline-svg/package.json | 12 +-- .../preprocess-inline-svg/src/internals.js | 22 +++-- pnpm-lock.yaml | 91 +++++++++++++++---- sites/v5-playground/package.json | 2 +- .../src/lib/assets/svg/phosphor/acorn.svg | 2 +- sites/v5-playground/src/routes/+page.svelte | 2 +- sites/v5-playground/svelte.config.js | 5 +- 8 files changed, 104 insertions(+), 37 deletions(-) create mode 100644 .changeset/brave-tips-do.md diff --git a/.changeset/brave-tips-do.md b/.changeset/brave-tips-do.md new file mode 100644 index 00000000..83697199 --- /dev/null +++ b/.changeset/brave-tips-do.md @@ -0,0 +1,5 @@ +--- +"@svelte-put/preprocess-inline-svg": major +--- + +switch to using modern Svelte AST diff --git a/packages/preprocess-inline-svg/package.json b/packages/preprocess-inline-svg/package.json index 910850c9..4ba44a95 100644 --- a/packages/preprocess-inline-svg/package.json +++ b/packages/preprocess-inline-svg/package.json @@ -51,16 +51,16 @@ }, "devDependencies": { "@internals/tsconfig": "workspace:*", - "@types/svg-parser": "^2.0.6", - "hast-util-to-html": "^9.0.1", - "svelte-parse-markup": "^0.1.2", - "svg-parser": "^2.0.4" + "@types/svg-parser": "^2.0.6" }, "peerDependencies": { "svelte": "^5.0.0-next.1" }, "dependencies": { - "estree-walker": "^3.0.3", - "magic-string": "^0.30.10" + "hast-util-to-html": "^9.0.1", + "magic-string": "^0.30.10", + "svelte-parse-markup": "^0.1.2", + "svg-parser": "^2.0.4", + "zimmerframe": "^1.1.2" } } diff --git a/packages/preprocess-inline-svg/src/internals.js b/packages/preprocess-inline-svg/src/internals.js index a62b4b92..747b516f 100644 --- a/packages/preprocess-inline-svg/src/internals.js +++ b/packages/preprocess-inline-svg/src/internals.js @@ -1,11 +1,11 @@ import fs from 'fs'; import path from 'path'; -import { walk } from 'estree-walker'; import { toHtml } from 'hast-util-to-html'; import MagicString from 'magic-string'; import { parse as parseSvelteMarkup } from 'svelte-parse-markup'; import { parse as parseSvg } from 'svg-parser'; +import { walk } from 'zimmerframe'; /** * @typedef {{ directories: string[]; attributes: Record }} ResolvedSourceConfig @@ -157,13 +157,15 @@ export function transform(code, filename, sources, config) { const { inlineSrcAttributeName, keepInlineSrcAttribute } = config; const s = new MagicString(code); - const ast = parseSvelteMarkup(code, { filename }); - - walk(ast.html, { - /** @param {any} _node */ - enter(_node) { - const node = /** @type {import('svelte/compiler').RegularElement} */(_node); - if (node.name !== 'svg') return; + const ast = parseSvelteMarkup(code, { filename, modern: true }); + + walk(ast.fragment, null, { + /** + * @param {import('svelte/compiler').RegularElement} node + * @returns {import('svelte/compiler').RegularElement} + */ + RegularElement(node) { + if (node.name !== 'svg') return node; let options = local; let inlineSrc = getAttribute(code, node, inlineSrcAttributeName); let svgSource = findSvgSrc(filename, options.directories, inlineSrc); @@ -176,7 +178,7 @@ export function transform(code, filename, sources, config) { } } - if (!inlineSrc) return; + if (!inlineSrc) return node; if (!svgSource) { throw new Error( `\n@svelte-put/preprocess-inline-svg: cannot find svg source for ${inlineSrc} at ${filename}`, @@ -218,6 +220,8 @@ export function transform(code, filename, sources, config) { allowDangerousCharacters: true, }); s.update(insertIndex, node.end, `>${content}`); + + return node; }, }); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5bafcf6c..0aaad241 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -275,15 +275,24 @@ importers: packages/preprocess-inline-svg: dependencies: - estree-walker: - specifier: ^3.0.3 - version: 3.0.3 + hast-util-to-html: + specifier: ^9.0.1 + version: 9.0.1 magic-string: specifier: ^0.30.10 version: 0.30.10 svelte: specifier: ^5.0.0-next.1 version: 5.0.0-next.136 + svelte-parse-markup: + specifier: ^0.1.2 + version: 0.1.2(svelte@5.0.0-next.136) + svg-parser: + specifier: ^2.0.4 + version: 2.0.4 + zimmerframe: + specifier: ^1.1.2 + version: 1.1.2 devDependencies: '@internals/tsconfig': specifier: workspace:* @@ -291,15 +300,6 @@ importers: '@types/svg-parser': specifier: ^2.0.6 version: 2.0.6 - hast-util-to-html: - specifier: ^9.0.1 - version: 9.0.1 - svelte-parse-markup: - specifier: ^0.1.2 - version: 0.1.2(svelte@5.0.0-next.136) - svg-parser: - specifier: ^2.0.4 - version: 2.0.4 packages/qr: dependencies: @@ -492,13 +492,13 @@ importers: version: link:../../packages/preprocess-inline-svg '@sveltejs/adapter-auto': specifier: ^3.0.0 - version: 3.2.0(@sveltejs/kit@2.5.5(@sveltejs/vite-plugin-svelte@3.0.2(svelte@5.0.0-next.136)(vite@5.2.8(@types/node@20.12.12)(sugarss@4.0.1(postcss@8.4.38))))(svelte@5.0.0-next.136)(vite@5.2.8(@types/node@20.12.12)(sugarss@4.0.1(postcss@8.4.38)))) + version: 3.2.0(@sveltejs/kit@2.5.5(@sveltejs/vite-plugin-svelte@4.0.0-next.1(svelte@5.0.0-next.136)(vite@5.2.8(@types/node@20.12.12)(sugarss@4.0.1(postcss@8.4.38))))(svelte@5.0.0-next.136)(vite@5.2.8(@types/node@20.12.12)(sugarss@4.0.1(postcss@8.4.38)))) '@sveltejs/kit': specifier: ^2.0.0 - version: 2.5.5(@sveltejs/vite-plugin-svelte@3.0.2(svelte@5.0.0-next.136)(vite@5.2.8(@types/node@20.12.12)(sugarss@4.0.1(postcss@8.4.38))))(svelte@5.0.0-next.136)(vite@5.2.8(@types/node@20.12.12)(sugarss@4.0.1(postcss@8.4.38))) + version: 2.5.5(@sveltejs/vite-plugin-svelte@4.0.0-next.1(svelte@5.0.0-next.136)(vite@5.2.8(@types/node@20.12.12)(sugarss@4.0.1(postcss@8.4.38))))(svelte@5.0.0-next.136)(vite@5.2.8(@types/node@20.12.12)(sugarss@4.0.1(postcss@8.4.38))) '@sveltejs/vite-plugin-svelte': - specifier: ^3.0.0 - version: 3.0.2(svelte@5.0.0-next.136)(vite@5.2.8(@types/node@20.12.12)(sugarss@4.0.1(postcss@8.4.38))) + specifier: ^4.0.0-next.1 + version: 4.0.0-next.1(svelte@5.0.0-next.136)(vite@5.2.8(@types/node@20.12.12)(sugarss@4.0.1(postcss@8.4.38))) '@types/eslint': specifier: ^8.56.0 version: 8.56.7 @@ -1590,6 +1590,14 @@ packages: svelte: ^4.0.0 || ^5.0.0-next.0 vite: ^5.0.0 + '@sveltejs/vite-plugin-svelte-inspector@3.0.0-next.1': + resolution: {integrity: sha512-slACwpEW8e/+I9MGjrdss4qJMobYtLrdu07m5BJ29rubm0lYXL3KKTqORYA5WTvRtpZfbYjsw1WfMOj9XasnJw==} + engines: {node: ^18.0.0 || ^20.0.0 || >=22} + peerDependencies: + '@sveltejs/vite-plugin-svelte': ^4.0.0-next.1 + svelte: ^5.0.0-next.96 || ^5.0.0 + vite: ^5.0.0 + '@sveltejs/vite-plugin-svelte@3.0.2': resolution: {integrity: sha512-MpmF/cju2HqUls50WyTHQBZUV3ovV/Uk8k66AN2gwHogNAG8wnW8xtZDhzNBsFJJuvmq1qnzA5kE7YfMJNFv2Q==} engines: {node: ^18.0.0 || >=20} @@ -1597,6 +1605,13 @@ packages: svelte: ^4.0.0 || ^5.0.0-next.0 vite: ^5.0.0 + '@sveltejs/vite-plugin-svelte@4.0.0-next.1': + resolution: {integrity: sha512-FJBcgRhzWnEvNy8eqHlHKl2oea3+2rA9WAMnZdXJjEMJBpl/6IkhgcCMd7qRw0Qbb1BA66qsSD36UcSngUwqgA==} + engines: {node: ^18.0.0 || ^20.0.0 || >=22} + peerDependencies: + svelte: ^5.0.0-next.96 || ^5.0.0 + vite: ^5.0.0 + '@sveltevietnam/ui@1.0.0-next.23': resolution: {integrity: sha512-Vc3i+3UJqHog2IBvnVmhyGyFTgLIv2Gw+1s/vbwlntA770KVcD0D0hAd3PgiTUUYFzTQ5wjsuOh2TVRfTTerXQ==} peerDependencies: @@ -5841,9 +5856,9 @@ snapshots: '@sveltejs/kit': 2.5.5(@sveltejs/vite-plugin-svelte@3.0.2(svelte@4.2.12)(vite@5.2.8(@types/node@20.12.12)(sugarss@4.0.1(postcss@8.4.38))))(svelte@4.2.12)(vite@5.2.8(@types/node@20.12.12)(sugarss@4.0.1(postcss@8.4.38))) import-meta-resolve: 4.0.0 - '@sveltejs/adapter-auto@3.2.0(@sveltejs/kit@2.5.5(@sveltejs/vite-plugin-svelte@3.0.2(svelte@5.0.0-next.136)(vite@5.2.8(@types/node@20.12.12)(sugarss@4.0.1(postcss@8.4.38))))(svelte@5.0.0-next.136)(vite@5.2.8(@types/node@20.12.12)(sugarss@4.0.1(postcss@8.4.38))))': + '@sveltejs/adapter-auto@3.2.0(@sveltejs/kit@2.5.5(@sveltejs/vite-plugin-svelte@4.0.0-next.1(svelte@5.0.0-next.136)(vite@5.2.8(@types/node@20.12.12)(sugarss@4.0.1(postcss@8.4.38))))(svelte@5.0.0-next.136)(vite@5.2.8(@types/node@20.12.12)(sugarss@4.0.1(postcss@8.4.38))))': dependencies: - '@sveltejs/kit': 2.5.5(@sveltejs/vite-plugin-svelte@3.0.2(svelte@5.0.0-next.136)(vite@5.2.8(@types/node@20.12.12)(sugarss@4.0.1(postcss@8.4.38))))(svelte@5.0.0-next.136)(vite@5.2.8(@types/node@20.12.12)(sugarss@4.0.1(postcss@8.4.38))) + '@sveltejs/kit': 2.5.5(@sveltejs/vite-plugin-svelte@4.0.0-next.1(svelte@5.0.0-next.136)(vite@5.2.8(@types/node@20.12.12)(sugarss@4.0.1(postcss@8.4.38))))(svelte@5.0.0-next.136)(vite@5.2.8(@types/node@20.12.12)(sugarss@4.0.1(postcss@8.4.38))) import-meta-resolve: 4.0.0 '@sveltejs/adapter-cloudflare@4.2.1(@sveltejs/kit@2.5.5(@sveltejs/vite-plugin-svelte@3.0.2(svelte@5.0.0-next.136)(vite@5.2.8(@types/node@20.12.12)(sugarss@4.0.1(postcss@8.4.38))))(svelte@5.0.0-next.136)(vite@5.2.8(@types/node@20.12.12)(sugarss@4.0.1(postcss@8.4.38))))(wrangler@3.57.0)': @@ -5899,6 +5914,24 @@ snapshots: tiny-glob: 0.2.9 vite: 5.2.8(@types/node@20.12.12)(sugarss@4.0.1(postcss@8.4.38)) + '@sveltejs/kit@2.5.5(@sveltejs/vite-plugin-svelte@4.0.0-next.1(svelte@5.0.0-next.136)(vite@5.2.8(@types/node@20.12.12)(sugarss@4.0.1(postcss@8.4.38))))(svelte@5.0.0-next.136)(vite@5.2.8(@types/node@20.12.12)(sugarss@4.0.1(postcss@8.4.38)))': + dependencies: + '@sveltejs/vite-plugin-svelte': 4.0.0-next.1(svelte@5.0.0-next.136)(vite@5.2.8(@types/node@20.12.12)(sugarss@4.0.1(postcss@8.4.38))) + '@types/cookie': 0.6.0 + cookie: 0.6.0 + devalue: 4.3.2 + esm-env: 1.0.0 + import-meta-resolve: 4.0.0 + kleur: 4.1.5 + magic-string: 0.30.9 + mrmime: 2.0.0 + sade: 1.8.1 + set-cookie-parser: 2.6.0 + sirv: 2.0.4 + svelte: 5.0.0-next.136 + tiny-glob: 0.2.9 + vite: 5.2.8(@types/node@20.12.12)(sugarss@4.0.1(postcss@8.4.38)) + '@sveltejs/package@2.3.1(svelte@4.2.12)(typescript@5.4.5)': dependencies: chokidar: 3.6.0 @@ -5928,6 +5961,15 @@ snapshots: transitivePeerDependencies: - supports-color + '@sveltejs/vite-plugin-svelte-inspector@3.0.0-next.1(@sveltejs/vite-plugin-svelte@4.0.0-next.1(svelte@5.0.0-next.136)(vite@5.2.8(@types/node@20.12.12)(sugarss@4.0.1(postcss@8.4.38))))(svelte@5.0.0-next.136)(vite@5.2.8(@types/node@20.12.12)(sugarss@4.0.1(postcss@8.4.38)))': + dependencies: + '@sveltejs/vite-plugin-svelte': 4.0.0-next.1(svelte@5.0.0-next.136)(vite@5.2.8(@types/node@20.12.12)(sugarss@4.0.1(postcss@8.4.38))) + debug: 4.3.4 + svelte: 5.0.0-next.136 + vite: 5.2.8(@types/node@20.12.12)(sugarss@4.0.1(postcss@8.4.38)) + transitivePeerDependencies: + - supports-color + '@sveltejs/vite-plugin-svelte@3.0.2(svelte@4.2.12)(vite@5.2.8(@types/node@20.12.12)(sugarss@4.0.1(postcss@8.4.38)))': dependencies: '@sveltejs/vite-plugin-svelte-inspector': 2.0.0(@sveltejs/vite-plugin-svelte@3.0.2(svelte@4.2.12)(vite@5.2.8(@types/node@20.12.12)(sugarss@4.0.1(postcss@8.4.38))))(svelte@4.2.12)(vite@5.2.8(@types/node@20.12.12)(sugarss@4.0.1(postcss@8.4.38))) @@ -5956,6 +5998,19 @@ snapshots: transitivePeerDependencies: - supports-color + '@sveltejs/vite-plugin-svelte@4.0.0-next.1(svelte@5.0.0-next.136)(vite@5.2.8(@types/node@20.12.12)(sugarss@4.0.1(postcss@8.4.38)))': + dependencies: + '@sveltejs/vite-plugin-svelte-inspector': 3.0.0-next.1(@sveltejs/vite-plugin-svelte@4.0.0-next.1(svelte@5.0.0-next.136)(vite@5.2.8(@types/node@20.12.12)(sugarss@4.0.1(postcss@8.4.38))))(svelte@5.0.0-next.136)(vite@5.2.8(@types/node@20.12.12)(sugarss@4.0.1(postcss@8.4.38))) + debug: 4.3.4 + deepmerge: 4.3.1 + kleur: 4.1.5 + magic-string: 0.30.10 + svelte: 5.0.0-next.136 + vite: 5.2.8(@types/node@20.12.12)(sugarss@4.0.1(postcss@8.4.38)) + vitefu: 0.2.5(vite@5.2.8(@types/node@20.12.12)(sugarss@4.0.1(postcss@8.4.38))) + transitivePeerDependencies: + - supports-color + '@sveltevietnam/ui@1.0.0-next.23(postcss@8.4.38)(svelte@5.0.0-next.136)(tailwindcss@3.4.3)': dependencies: '@svelte-put/copy': 3.0.0 diff --git a/sites/v5-playground/package.json b/sites/v5-playground/package.json index 8db473c8..aebead80 100644 --- a/sites/v5-playground/package.json +++ b/sites/v5-playground/package.json @@ -19,7 +19,7 @@ "@svelte-put/preprocess-inline-svg": "workspace:*", "@sveltejs/adapter-auto": "^3.0.0", "@sveltejs/kit": "^2.0.0", - "@sveltejs/vite-plugin-svelte": "^3.0.0", + "@sveltejs/vite-plugin-svelte": "^4.0.0-next.1", "@types/eslint": "^8.56.0", "@typescript-eslint/eslint-plugin": "^7.0.0", "@typescript-eslint/parser": "^7.0.0", diff --git a/sites/v5-playground/src/lib/assets/svg/phosphor/acorn.svg b/sites/v5-playground/src/lib/assets/svg/phosphor/acorn.svg index 705ed3ad..0d1d5438 100644 --- a/sites/v5-playground/src/lib/assets/svg/phosphor/acorn.svg +++ b/sites/v5-playground/src/lib/assets/svg/phosphor/acorn.svg @@ -1 +1 @@ - \ No newline at end of file + diff --git a/sites/v5-playground/src/routes/+page.svelte b/sites/v5-playground/src/routes/+page.svelte index 1597e697..b6632f87 100644 --- a/sites/v5-playground/src/routes/+page.svelte +++ b/sites/v5-playground/src/routes/+page.svelte @@ -1 +1 @@ - + diff --git a/sites/v5-playground/svelte.config.js b/sites/v5-playground/svelte.config.js index c9158716..dcec3ce6 100644 --- a/sites/v5-playground/svelte.config.js +++ b/sites/v5-playground/svelte.config.js @@ -31,7 +31,10 @@ const config = { // If your environment is not supported, or you settled on a specific environment, switch out the adapter. // See https://kit.svelte.dev/docs/adapters for more information about adapters. adapter: adapter() - } + }, + compilerOptions: { + modernAst: true, + }, }; export default config;