Self closing elements break v-if rules

Self-closing elements break the following rules:

• vue/no-invalid-template-root
• vue/no-invalid-v-else-if
• vue/no-invalid-v-else

Expected

This should not be reported:

<template>
  <c1 v-if="1" />
  <c2 v-else-if="1" />
  <c3 v-else />
</template>

Happening

This works:

<template>
  <c1 v-if="1"></c1>
  <c2 v-else-if="1"></c2>
  <c3 v-else></c3>
</template>

This doesn’t:

<template>
  <c1 v-if="1" />
  <c2 v-else-if="1" />
  <c3 v-else />
</template>

Here are the report messages:

  26:3  error  The template root requires the next element which has 'v-else' directives if it has 'v-if' directives     vue/no-invalid-template-root
  27:7  error  'v-else-if' directives require being preceded by the element which has a 'v-if' or 'v-else-if' directive  vue/no-invalid-v-else-if
  28:7  error  'v-else' directives require being preceded by the element which has a 'v-if' or 'v-else' directive        vue/no-invalid-v-else

[kazupon]

Though it may be related to these, we might as well try to design plugin architecture of vue-template-compiler.

https://github.com/vuejs/vue/issues/5703 https://github.com/vuejs/vue/pull/5857

[yyx990803]

@mysticatea have you thought of building the new parser on top of Vue’s parser? I can expose the parse method in vue-template-compiler and you should be able to pretty easily transform the AST to the format suitable for ESLint. It would also be more accurate and kept up-to-date with Vue core updates.