Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ktsn/vue-sfc-parser
Vue.js single file component parser for static analysis
https://github.com/ktsn/vue-sfc-parser
parser single-file-component static-analysis vue
Last synced: about 2 months ago
JSON representation
Vue.js single file component parser for static analysis
- Host: GitHub
- URL: https://github.com/ktsn/vue-sfc-parser
- Owner: ktsn
- License: mit
- Created: 2018-02-27T16:50:45.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2018-10-29T10:32:32.000Z (about 6 years ago)
- Last Synced: 2024-10-30T13:17:59.063Z (2 months ago)
- Topics: parser, single-file-component, static-analysis, vue
- Language: TypeScript
- Size: 63.5 KB
- Stars: 47
- Watchers: 3
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Vue SFC Parser
Vue.js single file component parser for static analysis.
## Usage
Vue SFC Parser is similar to [vue-template-compiler](https://www.npmjs.com/package/vue-template-compiler)'s `parseComponent` but has some useful helpers for code analysis.
```js
const { parseComponent } = require('vue-sfc-parser')
const code = `
Hi
export default {}
`
const res = parseComponent(code)
console.log(res.template.calcGlobalOffset(7))
console.log(res.script.calcGlobalOffset(5))
```
## References
### `parseComponent(code: string): SFCDescriptor`
This is almost same as `vue-template-compiler`'s `parseComponent`. `SFCDescriptor` is looks like following:
```ts
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.
### Additional Helpers of SFCBlock
* `calcGlobalOffset(offset: number): number`
* `calcGlobalRange(range: [number, number]): [number, number]`
These methods are for calcurating global position from block position. For example:
```vue
Test Docs
Hi
```
On the above SFC, if you provide `5` to `template.calcGlobalOffset` which indicates the position from the beggining of template block, it will return `38` which is the position from the beggining of the file.
### `createDiffWatcher(): SFCDiffWatcher`
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:
```js
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)
})
})
})
```
## License
MIT