Vue.js single file component parser for static analysis.
Vue SFC Parser is similar to vue-template-compiler's parseComponent
but has some useful helpers for code analysis.
const { parseComponent } = require('vue-sfc-parser')
const code = `
<template>
<p>Hi</p>
</template>
<script lang="ts">
export default {}
</script>
`
const res = parseComponent(code)
console.log(res.template.calcGlobalOffset(7))
console.log(res.script.calcGlobalOffset(5))
This is almost same as vue-template-compiler
's parseComponent
. SFCDescriptor
is looks like following:
interface SFCDescriptor {
template: SFCBlock | null
script: SFCBlock | null
styles: SFCBlock[]
customBlocks: SFCBlock[]
}
The SFCBlock
is similar to vue-template-compiler
one too, but having additional helper methods.
-
calcGlobalOffset(offset: number): number
-
calcGlobalRange(range: [number, number]): [number, number]
These methods are for calcurating global position from block position. For example:
<docs>Test Docs</docs> <template> <p>Hi</p> </template>
On the above SFC, if you provide
5
totemplate.calcGlobalOffset
which indicates the position from the beggining of template block, it will return38
which is the position from the beggining of the file.
Create a watcher object which will detect each SFC block's diff. SFCDiffWatcher
has following methods:
add(filename: string, content: string): SFCDescriptor
remove(filename: string): void
diff(filename: string, content: string): SFCDiff
You can add/remove SFC file to the watcher by using add
/remove
methods. Then you obtain each SFC block's diff by using diff
method. It returns an object having some methods which you can register callbacks that will called when the corresponding blocks are changed.
Example:
const { createDiffWatcher } = require('vue-sfc-parser')
const fs = require('fs')
const chokidar = require('chokidar')
const watcher = createDiffWatcher()
chokidar
.watch('**/*.vue')
.on('add', filename => {
watcher.add(filename, fs.readFileSync(filename, 'utf8'))
})
.on('unlink', filename => {
watcher.add(filename)
})
.on('change', filename => {
watcher
.diff(filename, fs.readFileSync(filename, 'utf8'))
.template(template => {
console.log(template.content)
})
.script(script => {
console.log(script.content)
})
.styles(styles => {
styles.forEach(s => {
console.log(s.content)
})
})
.customBlocks('block-name', blocks => {
blocks.forEach(b => {
console.log(b.content)
})
})
})
MIT