`svelte-ast-print`

Print Svelte AST nodes as a string.
A.k.a. parse in reverse.

This is what you need to create codemods - e.g. for migration between Svelte versions syntaxes.

Documentation

https://xeho91.github.io/svelte-ast-print

Acknowledgements

This package depends on:

esrap for printing ESTree specification-compliant AST nodes
zimmerframe for walking on the AST nodes

Limitations

Warning

TypeScript isn't supported, yet.
See & subscribe to progress on issue #86 - Add support for TypeScript.

Important

It ignores any previous formatting.
The current focus is to be able to write codemods as soon as possible - because right now, there are no alternatives.

If you need to format modified and stringified Svelte AST, use available formatters for Svelte:

Biome - ⚠️ has partial support
Prettier with prettier-plugin-svelte

Note

This package is in beta stage.
See Roadmap

Getting started

Use the package manager of your choice to install this package:

npm

npm install svelte-ast-print

yarn

yarn add svelte-ast-print

pnpm

pnpm add svelte-ast-print

bun

bun add svelte-ast-print

Incorporate it into your project, for example using Node.js and with the Svelte parse method:

import fs from "node:fs";

import { print } from "svelte-ast-print";
import { parse } from "svelte/compiler";

const originalSvelteCode = fs.readFileSync("src/App.svelte", "utf-8");
let svelteAST = parse(originalSvelteCode, { modern: true });
//                                          👆 For now, only modern is supported.
//                                             By default is 'false'.
//                                             Is it planned to be 'true' from Svelte v6+

// ...
// Do some modifications on this AST...
// e.g. transform `<slot />` to `{@render children()}`
// ...

const output = print(svelteAST); // AST is now a stringified code output! 🎉

fs.writeFileSync("src/App.svelte", output, { encoding: " utf-8" });