stryker-javascript-mutator ignores Vue files

The stryker-javascript-mutator plugin ignores .vue files as they are not a part of the known extensions. There should be a new plugin called stryker-vue-mutator 🎉

---

Features

The vue mutator will be able to mutate <script> blocks in vue files as long as they are either JavaScript or TypeScript. The vue mutator will be able to mutate JavaScript or TypeScript files that are also part of your application.

Usage

The vue mutator cannot work on its own. Either the javascript or the typescript mutator should also be installed to do the actual mutating.

If your vue file contains <script lang="ts"></script> the typescript mutator will be used. If your vue file contains <script></script> or <script lang="js"></script> the javascript mutator will be used. If you have other files that should be mutated, the typescript mutator will be used unless it is not installed. In that case the javascript mutator will be used.

So as an end user you will install multiple mutator plugins and define your config to point to the vue mutator: mutator: 'vue'.

Internal working

The vue-loader uses a module called vue-template-compiler which does the trick.

With the following code I can find the exact position of the script:

const compiler = require('vue-template-compiler')

const component = 
`<template>
<span id="msg">{{ message }}</span>
</template>

<script>
export default {
  data () {
    return {
      message: 'hello!'
    }
  },
  doMath () {
    return 1 - 2;
  }
}
</script>

<msg>
#app {
text-align: center;
}
</msg>`;

var result = compiler.parseComponent(component).script;
console.log('The result is:', result);
console.log('The substring is:', component.substring(result.start, result.end));

This outputs:

The result is: { type: 'script',
  content: '\nexport default {\n  data () {\n    return {\n      message: \'hello!\'\n    }\n  },\n  doMath () {\n    return 1 - 2;\n  }\n}\n',
  start: 68,
  attrs: {},
  end: 184 }
The substring is: 
export default {
  data () {
    return {
      message: 'hello!'
    }
  },
  doMath () {
    return 1 - 2;
  }
}

Note the linebreak on the substring console log at the start and the end. The vue-template-compiler literally extracts the script block!

Pseudocode

for each file to mutate
  is the file a vue file?
     yes:
      extract the content of the script block
      determine which mutator should be used
        lang = js or undefined: stryker-javascript-mutator
        lang = ts : stryker-typescript-mutator
        else: throw an error
      mutate the content of the script block using the underlying mutator
      wrap the rest of the vue file around the mutant
    no:
      determine which mutator should be used
         stryker-typescript-mutator present: use the stryker-typescript mutator
         else: use the stryker-javascript-mutator
      pass the file to the underlying mutator
return all generated mutants

[nicojs]

Good question, @sir-code-a-lot, is it common to have other file extensions as well as the .vue extension in vue projects?

@simondel shall we update the description of this issue so it describes our conclusion?

[simondel]

@nicojs I have updated the description of this issue.