chore(preprocess-inline-svg): switch to modern Svetle AST

.changeset/brave-tips-do.md

@@ -0,0 +1,5 @@
+---
+"@svelte-put/preprocess-inline-svg": major
+---
+
+switch to using modern Svelte AST

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"
 	}
 }

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<string, string> }} 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}</svg>`);
+
+			return node;
 		},
 	});
 

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",

sites/v5-playground/src/routes/+page.svelte

@@ -1 +1 @@
-<svg data-inline-src="phosphor/acorn" width="500" height="500"></svg>
+<svg data-inline-src="phosphor/acorn" width="500" height="500" class="text-blue-500"></svg>

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;