Support Vue.js single component

[vilchik-elena]

https://medium.com/chuckblog/using-typescript-with-vue-js-single-file-components-aaf51cbf5603

<template>
  <p>hello times: {{ helloTimes }}</p>
</template>

<script lang="ts">
  import Vue from 'vue'
  import Component from '../lib/index'

  var x: number = 1;
  
  @Component
  export default class Hello extends Vue {
    helloTimes: number = 0

    sayHello () {
      this.helloTimes++
    }
  }
</script>

[ghost]

@vilchik-elena Hi! Is this feature going to be included anytime soon? In my company we're currently working on a heavy usage of vue single file components with TS scripts, so it would be really useful to have support on SonarQube for this use case :)

[vilchik-elena]

@jf-ravelo-inova good to know it's useful for you! We were not sure how usable it is, so didn't yet consider implementing it.

[vilchik-elena]

https://johnpapa.net/vue-typescript/
palantir/tslint#2099
https://vuejs.org/v2/guide/typescript.html

[vilchik-elena]

I was trying to investigate how we can provide support for Vue SFC.

I think we should take inspiration from this code:

https://github.com/vuejs/vue-cli/blob/53509e115fae1d99b52508a97ed6caa2c4e557e9/packages/%40vue/cli-plugin-typescript/lib/tslint.js#L44-L70

vue-template-compiler is used to extract script part of file, and then ts.Program.getSourceFile is patched to return a new SourceFile created from script

[vilchik-elena]

https://jira.sonarsource.com/browse/MMF-1441

[anymost]

My company also need to check typescript code in vue single file component, so I want to know when sonarTS will support this feature. Thanks a lot.

[sahbi-ktifa]

I tried analyzing a Vue.js project and my "npm test" coverage differs from Sonar analysis. All my SFC components are built like this (with externalized TS file) :

<template>
  <p>hello times: {{ helloTimes }}</p>
</template>

<script lang="ts"  src="./dummy.component.ts">
</script>

Whereas coverage using Jest is properly shown, Sonar shows coverage on *.vue files AND on *.component.ts. *.vue files have template part covered but TS files are shown with a 0% coverage.

Will this feature support this ?

[vilchik-elena]

@sahbi-ktifa Could you attach a small reproducer project (with coverage report in it)?
it's confusing to see in your comment empty script in SFC and then some coverage on this file (75% in SQ), there is some inconsistency.

[sahbi-ktifa]

@vilchik-elena, here you can find a sample project with coverage results : https://github.com/sahbi-ktifa/simple-sample. You can clone this repo and use :

# To launch client tests
npm test 

Build and deploy automatically coverage to a local SQ instance (set to localhost:9001 by default) :

./mvnw -Pprod clean test sonar:sonar

It might be a misconfiguration ending into this situation, but I may be wrong.

[theMK2k]

I'd also like to vote for a proper .vue SonarTS support :)

[albernhagen]

I'd also like to vote for this.

[shmaram]

Hi @vilchik-elena
I found this thread as my company also uses Vue files with external TS file and i'm not able to see the coverage properly for both TS and Vue files.

Any chance we can get an estimation for this?

[vilchik-elena]

@shmaram not yet, sorry

[saberduck]

TypeScript analysis was migrated to SonarJS plugin. I am closing this issue, you can follow SonarSource/SonarJS#1281 and https://jira.sonarsource.com/browse/MMF-1441 on this topic.