Self closing elements break v-if rules about eslint-plugin-vue HOT 13 CLOSED

Vue's template parser actually allows self closing components (when using string templates directly). Is there anyway to relax these rules?

from eslint-plugin-vue.

@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.

from eslint-plugin-vue.

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

vuejs/vue#5703
vuejs/vue#5857

from eslint-plugin-vue.

^ I can think of two ways of doing this:

1. Fork vue-template-compiler (or start from scratch) and maintain a parallel parser. This would be easier to implement, but keeping both parsers in sync could be extra maintenance burden.

2. Improve the parser directly in Vue itself. The concern here is how much extra code this requires, because the compiler will be included in the full build so size is still a concern. Maybe we can implement it in a way that all the token range information logic is nested inside conditional blocks (similar to process.env.NODE_ENV) so that they can be stripped away in the browser oriented build?

from eslint-plugin-vue.

Thank you for this issue.

However, this is working correctly. HTML just ignores self-closing sign.

from eslint-plugin-vue.

I got it.
Could you point the source code which transforms self-closing elements?

from eslint-plugin-vue.

There's no transform, but in https://github.com/vuejs/vue/blob/dev/src/compiler/parser/html-parser.js we just treat self closing tags as if they have a closing tag.

from eslint-plugin-vue.

Thank you.

Hmm.
It seems to be hard that I implement it since I'm using a general HTML parser library. It might be realizable if I transform HTML text by regular expressions before parsing, but it's not safe. I will try to support self-closing after I make new HTML parser.

from eslint-plugin-vue.

@mysticatea I would like to integrate eslint-vue into https://github.com/octref/vetur, a editor tool for Vue.

If we can base eslint-vue and vetur on the same template parser, one additional parsing can be saved in editor! Also, fewer parsing incompatibility will be present.

@yyx990803 Currently vue-template-compiler will be both too much and too little for tooling. On one hand, generating render function string is unnecessary for tool. On the other, tools will need AST node range and location for traversal.

Let's see how can we improve.

from eslint-plugin-vue.

@yyx990803 It would be best if we use the same parser between Vue.js and eslint-plugin-vue. However, eslint-plugin-vue needs more information to lint than Vue.js; locations, tokens of AST nodes, comments, etc... vue-template-compiler looks to not provide those information.

@HerringtonDarkholme The parser that eslint-plugin-vue@3 is using is vue-eslint-parser, an independent package.

from eslint-plugin-vue.

@mysticatea oh yeah that's right...

In that case, is it possible to build the separate parser on top of Vue's own parser, enhancing it with Node location information? If that's possible, we can even use it to produce source maps for compiled render functions.

from eslint-plugin-vue.

Maybe we can implement it in a way that all the token range information logic is nested inside conditional blocks (similar to process.env.NODE_ENV) so that they can be stripped away in the browser oriented build?

Was about to suggest just that! 😄

from eslint-plugin-vue.

@kazupon Thank you for the information.

After I re-thought this, I got idea to implement self-closing on the current parser, then I made it: #34.

from eslint-plugin-vue.