svelte-markup-walker Svelte Themes

Svelte Markup Walker

A Svelte preprocessor that allows to walk through the AST generated by the svelte parser and modify the markup with MagicString.

Svelte Markup Walker

A Svelte preprocessor that allows to walk through the AST generated by the svelte parser and modify the markup with MagicString.

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, which allows to easily modify/cut/overwrite/replace/etc its text.

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

Top categories

Loading Svelte Themes