Skip to content

Commit

Permalink
chore(preprocess-inline-svg): switch to modern Svetle AST
Browse files Browse the repository at this point in the history
  • Loading branch information
vnphanquang committed May 17, 2024
1 parent 702bdf3 commit 859f587
Show file tree
Hide file tree
Showing 8 changed files with 104 additions and 37 deletions.
5 changes: 5 additions & 0 deletions .changeset/brave-tips-do.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@svelte-put/preprocess-inline-svg": major
---

switch to using modern Svelte AST
12 changes: 6 additions & 6 deletions packages/preprocess-inline-svg/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
}
22 changes: 13 additions & 9 deletions packages/preprocess-inline-svg/src/internals.js
Original file line number Diff line number Diff line change
@@ -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
Expand Down Expand Up @@ -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);
Expand All @@ -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}`,
Expand Down Expand Up @@ -218,6 +220,8 @@ export function transform(code, filename, sources, config) {
allowDangerousCharacters: true,
});
s.update(insertIndex, node.end, `>${content}</svg>`);

return node;
},
});

Expand Down
91 changes: 73 additions & 18 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion sites/v5-playground/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
2 changes: 1 addition & 1 deletion sites/v5-playground/src/lib/assets/svg/phosphor/acorn.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion sites/v5-playground/src/routes/+page.svelte
Original file line number Diff line number Diff line change
@@ -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>
5 changes: 4 additions & 1 deletion sites/v5-playground/svelte.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;

0 comments on commit 859f587

Please sign in to comment.