https://github.com/padcom/vue-ast-serializer
https://github.com/padcom/vue-ast-serializer
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/padcom/vue-ast-serializer
- Owner: padcom
- Created: 2024-02-15T08:21:32.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2024-02-15T08:55:22.000Z (over 2 years ago)
- Last Synced: 2025-05-03T15:02:16.975Z (about 1 year ago)
- Language: TypeScript
- Size: 95.7 KB
- Stars: 7
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Vue.js single file component (SFC) AST serializer
This library implements a serializer/stringifier for Vue.js SFC AST.
The main driver to implement something like that is to be able to add cross-cutting concerns to Vue through a Vite plugin
## Usage:
First you need to install a few dependencies:
```
npm install @vue/compiler-sfc @vue/compiler-core @padcom/vue-ast-serializer
```
Then you can parse and serialize the content like so:
```typescript
import { parse } from '@vue/compiler-sfc'
import { stringify } from '@padcom/vue-ast-serializer'
const code = '{ "de": { "hello": "Guten Tag!" } }'
console.log(stringify(parse(code)))
```
## Example Vite plugin
The skeleton of a simple Vite plugin is, well.. simple:
```typescript
function example() {
return {
name: 'example',
transform(code, id) {
if (!id.includes('node_modules') && id.endsWith('.vue')) {
const parsed = parse(code)
const transformed = transform(parsed) // this you need to implement
return stringify(result)
} else {
return code
}
},
},
}
```
## API
### `function stringify(ast: SFCParseResult): string`
This function takes the result of a call to `parse` and returns a stringified version of it
### `function serializeTemplate(template: SFCTemplateBlock): string`
This function takes the AST of a template block and returns a string.
Since this block is not parsed in any way by the `parse()` function from `@vue/compuler-sfc` it is just re-created as-is.
### `function serializeScript(script: SFCScriptBlock): string`
This function takes the AST of a script block and returns a string.
Since this block is not parsed in any way by the `parse()` function from `@vue/compuler-sfc` it is just re-created as-is.
### `function serializeStyle(style: SFCStyleBlock): string`
This function takes the AST of a style block and returns a string.
Since this block is not parsed in any way by the `parse()` function from `@vue/compuler-sfc` it is just re-created as-is.
### `function serializeStyles(styles: SFCStyleBlock[]): string`
This function takes the AST of style blocks and returns a string.
Since this block is not parsed in any way by the `parse()` function from `@vue/compuler-sfc` it is just re-created as-is.
### `function serializeCustomBlock(block: SFCBlock): string`
This function takes the AST of a custom block (like ``) and returns a string.
Since this block is not parsed in any way by the `parse()` function from `@vue/compuler-sfc` it is just re-created as-is.
### `function serializeCustomBlocks(blocks: SFCBlock[]): string`
This function takes the AST of custom blocks (like ``) and returns a string.
Since this block is not parsed in any way by the `parse()` function from `@vue/compuler-sfc` it is just re-created as-is.