Type checking for template expressions #681

ktsn · 2018-02-05T14:58:30Z

This is work in progress PR which enables Vetur to type check template expressions.

The approach is the same as I wrote in #209 - transforming template html to TypeScript AST, then type checking it. I use vue-eslint-parser to transform HTML string to AST as it considers vue specific things like directives. I wrote the transformer that converts ESLint AST to TypeScript AST. Note that the output TypeScript AST does not make sense in runtime to simplify the implementation as it is meant to be used for extracting type info from template expression.

With this feature, we may also able to provide completion in template and component props type checking but I would like to leave them for another PR since this PR is already large without them 😅

BTW, should we disable this feature in default and let the users enable it by configuration?

TODO for this PR

A overall good structure
Good test coverage
Update diagnostics when script block is updated
Add a new option vetur.experimental.templateTypeCheck

Remaining Tasks (after this PR)

Check other directives expression. (currently only works in v-bind/v-on)
Support filter
Support scoped slot
Suppress An object literal cannot have multiple properties with the same name in strict mode. error.
- e.g. <div class="foo" :class="bar"></div> provides this error.
Support type narrowing by v-if
- https://next.angular.io/guide/aot-compiler#type-narrowing

fix #209

ktsn · 2018-02-05T15:09:50Z

😄

ktsn · 2018-02-05T15:16:15Z

It probably be better to see diff via https://github.com/vuejs/vetur/pull/681/files?w=1 when looking into serviceHost.ts since there is an indentation change.

HerringtonDarkholme · 2018-02-06T03:20:09Z

server/src/modes/script/preprocess.ts

@@ -1,65 +1,111 @@
 import * as ts from 'typescript';
 import * as path from 'path';
+import { parse } from 'vue-eslint-parser';


We can implement parsing in VLS at all, so no additional dependency/script is needed. Actually template completion needs it too.

But I don't have time to implement Vue specific elements 😞 . For now eslint-parser is the only option.

Yes. I actually tried to extend the parser in VLS on the first time but I ended up using vue-eslint-parser because I would like to focus finishing essential implementation of template type checking at first.
In that case, I can work on the VSL template parser after this PR is finished 🙂

HerringtonDarkholme · 2018-02-06T03:36:11Z

server/src/modes/script/transformTemplate.ts

+import * as ts from 'typescript';
+import { AST } from 'vue-eslint-parser';
+
+export const renderHelperName = '__veturRenderHelper';


Renaming it to __vlsRenderHelper is better since vue-language-server is designed to be client agnostic.

HerringtonDarkholme · 2018-02-06T03:56:22Z

Also https://next.angular.io/guide/aot-compiler#phase-3-binding-expression-validation is a good reference.

HerringtonDarkholme · 2018-02-06T04:02:23Z

Road Test list:

https://github.com/gitlabhq/gitlabhq
https://github.com/bootstrap-vue/bootstrap-vue
https://github.com/ElemeFE/element/
https://github.com/algolia/vue-instantsearch
https://github.com/vuetifyjs/vuetify
https://github.com/samiheikki/javascript-guessing-game
https://github.com/phanan/koel
https://bitbucket.org/sellvana/core/src/4231c995aff9785ca60a550b0ee06c286f4bf619?at=sn1
https://github.com/search?utf8=%E2%9C%93&q=language%3AVue+stars%3A%3E1000&type=Repositories&ref=advsearch&l=Vue&l=

octref · 2018-02-07T06:21:09Z

First -- great work! Thanks for pushing this forward! 🎉

BTW, should we disable this feature in default and let the users enable it by configuration?

Yes. We should put an option like vetur.experimental.templateTypeCheck before it.

But I think currently the biggest problem is that there is no longer a clean separation of mode, as the type checking exists on both template/script modes. If we want to do suggestion/hovering and other LS features, it makes sense to create a templateInterpolation mode.

TODO

Let's aim for a MVP, where we have:

A overall good structure
Good test coverage
Update diagnostics when script block is updated

Can you add me to your fork so I can push changes? I'll have some time to look deeper into this PR this weekend. Before that I'll spend some time looking into some other smaller, long-standing bugs...

@HerringtonDarkholme Yeah I agree we should start adding some integration tests running VLS against real-world repos. This is one of the things I plan to look into this month.

octref · 2019-04-10T23:07:34Z

I fixed some tests related to upgrading Vue types.
There are 2 more failing tests which I believe is caused by TS Server trying to resolve the .vue.template files for definition and references.

octref · 2019-04-10T23:17:21Z

I see, the problem is you try to set zero pos for all the template-script code, so TS resolved them to invalid locations and throws there.

I think we can try maybe appending these lines to the end of file and map them back? This way we can get other features such as hover, jump to definition (from template), etc working as well. I'll give it a try.

ktsn · 2019-04-13T15:05:32Z

Fix the todos in transformTemplate. Especially the ones concerning VExpressionContainer | VIdentifier

Fix the crash on v-on.vue.

Fixed them.

I also tweaked template transformer a bit to avoid false-positive diagnostics about v-slot value 2923e08. While it just ignore the v-slot but we should include the declared variables into scope. I'll work on it a later PR.

octref · 2019-04-13T19:02:42Z

Never mind about the above comment. If I quit all VSCode process, the test works.

Yeah, if you are testing against VS Code stable, having another VS Code stable open would cause issues. I should have surfaced the error though.

octref · 2019-04-15T17:23:25Z

Merged. @ktsn Congratulations 🎉 👍

Do you mind creating a new issue to track what you plan to do? I can add to that issue my side of things.

From my perspective I'd like to see if I can make completion work from the .template files, and I'd want to implement a mapping between the .template files and the Vue templates in SFC so we get hover, jump to definition, find references etc working.

ktsn · 2019-04-15T17:45:30Z

@octref Finally 🎉 Thank you for cooperating on this!
Sure, I'll create new issues for remaining tasks.

hover, jump to definition, find references etc working

Yeah, they are also promising features. I'm so excited we will have them 😄

mpvosseller · 2019-04-25T17:01:20Z

This is great! Is there any way to integrate this work into command line builds to get the same errors/warnings there?

octref · 2019-04-26T02:38:42Z

@mpvosseller I updated #1149, you can subscribe to it.

trusktr · 2019-07-24T21:10:38Z

Hello, slightly off topic, but I'm interested in making my own template system. F.e. I'd like to use @if="" instead of v-if="", or something.

What would be involved in order to make this type checking system work with my own (but similar) syntax?

octref · 2019-08-07T17:07:46Z

There are some more details in http://blog.matsu.io/generic-vue-template-interpolation-language-features.

ktsn added 23 commits February 3, 2018 13:31

Move script mode integration test

e98740d

Provide diagnostics for template by using type info

e4b1549

[wip] template diagnostics

dc9d8c1

Use vue-eslint-parser

912b134

transform vue-eslint-parser ast to ts ast

a68726e

format codes

a66b78c

template diagnostics provide correct error positions

a10d492

Inject this expression for template identifiers

6865c30

check v-for expression

34a58dc

remove global scope test of injectThis

3b852e4

fix the position of v-for expression

de2e859

rewrite template render function

c6a38a0

Avoid parsing error of script block

b90f96a

Handle object literal expression properly

1f02005

Move template type checking fixtures

deaa8a7

Process template code as JS to avoid unnecessary errors

68b8200

Handle v-on statement properly

6fc1e52

Extract common logic of template checking test

60562ef

Refactoring transformTemplate

3138243

Remove unused @types/estree

7696040

Use component constructor directly in generated template ts code

b7a805b

Bump Vue typings for testing

a8ef51e

Remove unused packages

0c97e75

HerringtonDarkholme reviewed Feb 6, 2018

View reviewed changes

Fix some failing tests

ef7978a

octref closed this Apr 10, 2019

octref reopened this Apr 10, 2019

handle VExpressionContainer of dynamic directive argument

c143dfa

This comment has been minimized.

Sign in to view

ktsn added 5 commits April 13, 2019 21:15

Support dynamic argument of directive

d0713d1

Fix broken v-on template diagnostic test

eff560a

Simplify special attribute check

f428765

Skip v-slot check to avoid false-positive error

2923e08

Fix typo

96797c0

ktsn changed the title ~~[WIP] Type checking for template expressions~~ Type checking for template expressions Apr 13, 2019

octref and others added 3 commits April 13, 2019 13:07

Merge remote-tracking branch 'origin/master' into template-type-checking

de998c6

Update comment

532074a

Fix createLiteral argument to correct value

ab4a5cc

octref merged commit 782d5b6 into vuejs:master Apr 15, 2019

ktsn deleted the template-type-checking branch April 15, 2019 17:41

octref added this to the April 2019 milestone Apr 16, 2019

octref mentioned this pull request Apr 19, 2019

Fix find reference integration test error #1213

Closed

guyguy2001 mentioned this pull request May 2, 2019

Typescript template intellisense not working #1269

Closed

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Type checking for template expressions #681

Type checking for template expressions #681

ktsn commented Feb 5, 2018 •

edited

Loading

ktsn commented Feb 5, 2018

ktsn commented Feb 5, 2018

HerringtonDarkholme Feb 6, 2018

ktsn Feb 7, 2018

HerringtonDarkholme Feb 6, 2018

HerringtonDarkholme commented Feb 6, 2018

HerringtonDarkholme commented Feb 6, 2018

octref commented Feb 7, 2018

octref commented Apr 10, 2019 •

edited

Loading

octref commented Apr 10, 2019

This comment has been minimized.

This comment has been minimized.

ktsn commented Apr 13, 2019 •

edited

Loading

octref commented Apr 13, 2019

octref commented Apr 15, 2019

ktsn commented Apr 15, 2019

mpvosseller commented Apr 25, 2019

octref commented Apr 26, 2019

trusktr commented Jul 24, 2019 •

edited

Loading

octref commented Aug 7, 2019

Type checking for template expressions #681

Type checking for template expressions #681

Conversation

ktsn commented Feb 5, 2018 • edited Loading

TODO for this PR

Remaining Tasks (after this PR)

ktsn commented Feb 5, 2018

ktsn commented Feb 5, 2018

HerringtonDarkholme Feb 6, 2018

Choose a reason for hiding this comment

ktsn Feb 7, 2018

Choose a reason for hiding this comment

HerringtonDarkholme Feb 6, 2018

Choose a reason for hiding this comment

HerringtonDarkholme commented Feb 6, 2018

HerringtonDarkholme commented Feb 6, 2018

octref commented Feb 7, 2018

octref commented Apr 10, 2019 • edited Loading

octref commented Apr 10, 2019

This comment has been minimized.

This comment has been minimized.

ktsn commented Apr 13, 2019 • edited Loading

octref commented Apr 13, 2019

octref commented Apr 15, 2019

ktsn commented Apr 15, 2019

mpvosseller commented Apr 25, 2019

octref commented Apr 26, 2019

trusktr commented Jul 24, 2019 • edited Loading

octref commented Aug 7, 2019

ktsn commented Feb 5, 2018 •

edited

Loading

octref commented Apr 10, 2019 •

edited

Loading

ktsn commented Apr 13, 2019 •

edited

Loading

trusktr commented Jul 24, 2019 •

edited

Loading