Svelte Ast Print

Print Svelte AST nodes as string. Aka parse in reverse.

#ast #print #svelte

Demo Download

`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

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 });
//                                          👆 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" });

[!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 });
//          👆 Don't forget about this
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:

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 = "..." // 👈 Raw Svelte code
let ast = parse(code, { modern: true });
//                    👆 Don't forget about this, you can omit in Svelte v6

// .. work with AST - transformations, etc. ...

const output = print(ast);
const formatted = await format(output {
    // Two ways to provide options:

    // 1. provide file path to prettier config
    filepath: "path/to/your/prettier/config/file",

    // or..

    // 2. See `prettier-plugin-svelte` Setup guide for more info
    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 });
//                    👆 Don't forget about this, you can omit in Svelte v6

// .. work with AST - transformations, etc. ...

const output = print(ast);

fs.writeFileSync("./Button.svelte", output, "utf-8");
childProcess.spawnSync("prettier", ["./Button.svelte", "--write"], {
    stdio: "inherit",
    encoding: "utf-8",
});