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 nodeszimmerframe
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:
See Formatting section for examples.
[!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 });
const output = print(svelteAST);
fs.writeFileSync("src/App.svelte", output, { encoding: " utf-8" });
[!IMPORTANT]
When using parse
from svelte
, please remember about passing modern: true
to options (second argument).
This option is only available starting svelte@5
Example:
import { parse } from "svelte/compiler";
parse(code, { modern: true });
You can omit it from Svelte v6
- source.
Formatting
Until the package will support formatting feature option... below are the current and simplified workaround examples
on how to get printed output formatted to your needs.
Prettier
Two dependencies are required:
prettier
prettier-plugin-svelte
Follow prettier-plugin-svelte
Setup guide
on how to configure Prettier for Svelte.
Using Prettier API
import { format } from "prettier";
import { parse } from "svelte/compiler";
import { print } from "svelte-ast-print";
let code = "..."
let ast = parse(code, { modern: true });
const output = print(ast);
const formatted = await format(output {
filepath: "path/to/your/prettier/config/file",
parser: "svelte",
plugins: ["svelte-plugin-prettier"]
});
Using Prettier CLI
... and Node.js API.
import fs from "node:fs";
import childProcess from "node:child_process";
import { parse } from "svelte/compiler";
import { print } from "svelte-ast-print";
const code = fs.readFileSync("./Button.svelte", "utf-8");
let ast = parse(code, { modern: true });
const output = print(ast);
fs.writeFileSync("./Button.svelte", output, "utf-8");
childProcess.spawnSync("prettier", ["./Button.svelte", "--write"], {
stdio: "inherit",
encoding: "utf-8",
});
Biome
[!WARNING]
This sub-section is incomplete. Feel free to contribute!
Contributing
Take a look at contributing guide.
This project follows the all-contributors specification.
Contributions of any kind are welcome!
💌 to these people:
Support
If you don't have time, but you need this project to work, or resolve an existing issue, consider sponsorship.
Author
Mateusz "xeho91" Kadlubowski
License
This project is licensed under the MIT License.