# vue-sfc-parser

> Vue.js single file component parser for static analysis

Latest version **0.1.2** (published 2018-03-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-sfc-parser
pnpm add vue-sfc-parser
yarn add vue-sfc-parser
bun add vue-sfc-parser
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.2 |
| Published | 2018-03-11 |
| First published | 2018-02-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 27.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 47 |
| Author | katashin |
| Maintainers | ktsn |
| Keywords | Vue.js, component, parser, single file component, static analysis |

## Links

- npm: https://www.npmjs.com/package/vue-sfc-parser
- Repository: https://github.com/ktsn/vue-sfc-parser
- Issues: https://github.com/ktsn/vue-sfc-parser/issues
- npm.io page: https://npm.io/package/vue-sfc-parser

## Dependencies (1)

- [lodash.mapvalues](https://npm.io/package/lodash.mapvalues.md) ^4.6.0

## Alternatives

- [babylon](https://npm.io/package/babylon.md) — 5.1M weekly downloads
- [csscolorparser](https://npm.io/package/csscolorparser.md) — 3.7M weekly downloads
- [expr-eval-fork](https://npm.io/package/expr-eval-fork.md) — 1.5M weekly downloads
- [@leeoniya/ufuzzy](https://npm.io/package/@leeoniya/ufuzzy.md) — 247.7K weekly downloads
- [xml-parser](https://npm.io/package/xml-parser.md) — 78.4K weekly downloads

## Recent versions

- 0.1.2 (latest) — 2018-03-11
- 0.1.1 — 2018-03-11
- 0.1.0 — 2018-02-27

## 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 = `
<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))
```

## 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 `SFCBlcok` 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
  <docs>Test Docs</docs>
  <template>
    <p>Hi</p>
  </template>
  ```

  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): void`
* `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

---
_Source: https://npm.io/package/vue-sfc-parser · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._