Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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

Print Svelte AST nodes as string. Aka parse in reverse.
https://github.com/xeho91/svelte-ast-print

ast print svelte

Last synced: about 1 month ago
JSON representation

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

Host: GitHub
URL: https://github.com/xeho91/svelte-ast-print
Owner: xeho91
License: mit
Created: 2024-06-29T02:19:00.000Z (7 months ago)
Default Branch: main
Last Pushed: 2024-10-25T07:15:36.000Z (3 months ago)
Last Synced: 2024-10-29T09:07:54.927Z (2 months ago)
Topics: ast, print, svelte
Language: TypeScript
Homepage: https://xeho91.github.io/svelte-ast-print/
Size: 3.43 MB
Stars: 7
Watchers: 3
Forks: 2
Open Issues: 2
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
- Code of conduct: .github/CODE_OF_CONDUCT.md
- Security: .github/SECURITY.md

Awesome Lists containing this project

README

        # `svelte-ast-print`

![NPM Version](https://img.shields.io/npm/v/svelte-ast-print?style=for-the-badge&logo=npm)

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

## Acknowledgements

This package depends on:

1. [`esrap`] for printing [ESTree] specification-compliant [AST] nodes

1. [`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](https://github.com/xeho91/svelte-ast-print/issues/86).

---

> [!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](https://github.com/biomejs/biome) - _⚠️ has partial support_

> - [Prettier](https://github.com/prettier/prettier) with [`prettier-plugin-svelte`](https://github.com/sveltejs/prettier-plugin-svelte)

>

> See [Formatting](#formatting) section for examples.

---

> [!NOTE]

> **This package is in beta stage.**\

> See [Roadmap](https://github.com/xeho91/svelte-ast-print/discussions/2)

## Getting started

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

   

       npm

   ```sh

   npm install svelte-ast-print

   ```

   

   

       yarn

   ```sh

   yarn add svelte-ast-print

   ```

   

   

       pnpm

   ```sh

   pnpm add svelte-ast-print

   ```

   

   

       bun

   ```sh

   bun add svelte-ast-print

   ```

   

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

   ```ts

   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 `` 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:

>

> ```js

> import { parse } from "svelte/compiler";

>

> parse(code, { modern: true });

> //          👆 Don't forget about this

> ```

>

> You can omit it from Svelte `v6` - [source](https://github.com/sveltejs/svelte/blob/5a05f6371a994286626a44168cb2c02f8a2ad567/packages/svelte/src/compiler/index.js#L99-L100).

---

## 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:

1. [`prettier`](https://github.com/prettier/prettier)

1. [`prettier-plugin-svelte`](https://github.com/sveltejs/prettier-plugin-svelte)

Follow `prettier-plugin-svelte` [Setup guide](https://github.com/sveltejs/prettier-plugin-svelte?tab=readme-ov-file#setup)

on how to configure Prettier for Svelte.

#### Using Prettier API

```js

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.

```js

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",

});

```

### Biome

> [!WARNING]

> This sub-section is incomplete. Feel free to contribute!

---

## Contributing

Take a look at [contributing guide](./.github/CONTRIBUTING.md).

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification.

**Contributions of any kind are welcome!**

💌 to these people:

  

    
_{Mateusz Kadlubowski}
💻 🚧 📖 🚇 ⚠️

    
_Manuel
📖

    
_{Jeppe Reinhold}
💻

  

## Support

If you don't have time, but you need this project to work, or resolve an existing issue, consider sponsorship.

## Author

Mateusz "[xeho91](https://github.com/xeho91)" Kadlubowski

## License

![Project License](https://img.shields.io/github/license/xeho91/svelte-ast-print?style=for-the-badge)

This project is licensed under the [MIT License](./LICENSE.md).

[`esrap`]: https://github.com/rich-harris/esrap

[`zimmerframe`]: https://github.com/rich-harris/zimmerframe

[ESTree]: https://github.com/estree/estree

[codemods]: https://codemod.com/blog/what-are-codemods#ill-find-replace-whats-the-issue-hint-a-lot

[`parse`]: https://svelte.dev/docs/svelte-compiler#parse

[AST]: https://en.wikipedia.org/wiki/Abstract_syntax_tree