Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kaisermann/svelte-markup-walker
A Svelte preprocessor that allows to walk through the AST generated by the svelte parser and modify the markup with MagicString.
https://github.com/kaisermann/svelte-markup-walker
ast markup preprocess svelte walk
Last synced: 11 days ago
JSON representation
A Svelte preprocessor that allows to walk through the AST generated by the svelte parser and modify the markup with MagicString.
- Host: GitHub
- URL: https://github.com/kaisermann/svelte-markup-walker
- Owner: kaisermann
- Created: 2019-11-01T02:18:51.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T12:55:36.000Z (almost 2 years ago)
- Last Synced: 2024-09-23T14:17:50.226Z (about 2 months ago)
- Topics: ast, markup, preprocess, svelte, walk
- Language: TypeScript
- Homepage:
- Size: 332 KB
- Stars: 9
- Watchers: 2
- Forks: 0
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Svelte Markup Walker
> A [Svelte](https://svelte.dev) preprocessor that allows to walk through the AST generated by the svelte parser and modify the markup with [MagicString](https://github.com/Rich-Harris/magic-string).
This library is a simple wrapper of svelte's exported `parse` and `walk` methods. Its default method accepts an option object of AST walker wrappers:
- `html({ content, filename })` for walking through the html AST;
- `instance({ content, filename })` for walking through the main `script` AST;
- `module({ content, filename })` for walking through the `context="module"` script AST;
- `css({ content, filename })` for walking through the `style` AST.
Each wrapper receives as arguments the current `filename` and the file `content` as a [MagicString](https://github.com/Rich-Harris/magic-string), which allows to easily modify/cut/overwrite/replace/etc its text.
```js
const markupWalker = require('svelte-markup-walker');
/**
* `preprocessor` is a svelte preprocessor,
* just add it to your `preprocess` array
*/
const preprocessor = markupWalker({
html({ content, filename }) {
return {
enter(node) { ... },
leave(node) { ... },
};
},
instance({ content, filename }) {
return {
enter(node) { ... },
leave(node) { ... },
};
},
module({ content, filename }) {
return {
enter(node) { ... },
leave(node) { ... },
};
},
css({ content, filename }) {
return {
enter(node) { ... },
leave(node) { ... },
};
},
});
```
## Example
> TODO