vue sfc parser

Vue SFC 파서

정적 분석을위한 vue.js 단일 파일 구성 요소 파서.

용법

Vue SFC Parser는 Vue-Template 컴파일러의 parseComponent 와 유사하지만 코드 분석에 유용한 도우미가 있습니다.

 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 ) ) 

참조

parseComponent(code: string): SFCDescriptor

이것은 vue-template-compiler 의 parseComponent 와 거의 동일합니다. SFCDescriptor 는 다음과 같습니다.

 interface SFCDescriptor {
  template : SFCBlock | null
  script : SFCBlock | null
  styles : SFCBlock [ ]
  customBlocks : SFCBlock [ ]
}

SFCBlock 은 vue-template-compiler 와 유사하지만 추가 도우미 방법이 있습니다.

sfcblock의 추가 도우미

• calcGlobalOffset(offset: number): number

• calcGlobalRange(range: [number, number]): [number, number]

  이 방법은 블록 위치에서 글로벌 위치를 석회하는 것입니다. 예를 들어:

  < docs >Test Docs</ docs >
  < template >
    < p >Hi</ p >
  </ template >

  위의 SFC에서 템플릿 블록의 구걸로부터의 위치를 ​​나타내는 Calcglobaloffset은 5 대 template.calcGlobalOffset 제공하는 경우 파일의 구걸로부터의 위치 인 38 반환합니다.

createDiffWatcher(): SFCDiffWatcher

각 SFC 블록의 차이를 감지하는 감시자 객체를 만듭니다. SFCDiffWatcher 다음과 같은 방법이 있습니다.

• add(filename: string, content: string): SFCDescriptor
• remove(filename: string): void
• diff(filename: string, content: string): SFCDiff

add / remove 메소드를 사용하여 감시자에게 SFC 파일을 추가 / 제거 할 수 있습니다. 그런 다음 diff 방법을 사용하여 각 SFC 블록의 DIFF를 얻습니다. 해당 블록이 변경 될 때 호출 할 콜백을 등록 할 수있는 몇 가지 메소드가있는 객체를 반환합니다.

예:

 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