New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

[WIP] Type checking for template expressions #681

Open
wants to merge 27 commits into
base: master
from

Conversation

Projects
None yet
5 participants
@ktsn
Member

ktsn commented Feb 5, 2018

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

fix #209

@ktsn

This comment has been minimized.

Member

ktsn commented Feb 5, 2018

馃槃
template-type-checking

@ktsn

This comment has been minimized.

Member

ktsn commented Feb 5, 2018

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.

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

This comment has been minimized.

@HerringtonDarkholme

HerringtonDarkholme Feb 6, 2018

Member

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.

This comment has been minimized.

@ktsn

ktsn Feb 7, 2018

Member

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 馃檪

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

This comment has been minimized.

@HerringtonDarkholme

HerringtonDarkholme Feb 6, 2018

Member

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

@HerringtonDarkholme

This comment has been minimized.

@octref

This comment has been minimized.

Member

octref commented Feb 7, 2018

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.

@ktsn

This comment has been minimized.

Member

ktsn commented Feb 7, 2018

@octref @HerringtonDarkholme I just added you as collaborators of my fork. Also I've updated the TODO list.

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.

Yeah, that is I'm concerning but I didn't find a clean way to implement this. Do you mean creating a new mode templateInterpolation and separate it with template/script mode?

@kieferrm kieferrm referenced this pull request Feb 13, 2018

Closed

Iteration Plan for February 2018 #43361

37 of 45 tasks complete
@HerringtonDarkholme

This comment has been minimized.

Member

HerringtonDarkholme commented Feb 23, 2018

I'm working on a branch to parse interpolation in VLS.

https://github.com/HerringtonDarkholme/vetur/tree/template

@bobmoff

This comment has been minimized.

bobmoff commented Apr 15, 2018

Weho! Just wanted say that it makes me very happy that this feature is being worked on.

Vetur is great!

@yringler

This comment has been minimized.

yringler commented May 7, 2018

Very cool. @ktsn, would this work with vue-class-component and vue-property-decorator?

@yringler

This comment has been minimized.

yringler commented May 11, 2018

I compiled from your branch, and... this works with vue-class-component and freinds! So cool. I would love to help out with this.
In the meantime, perhaps this branch should be available in the vs code extension repository, as a beta or something? because this is super useful.
Here's a link to the vsix file (note that it's 0.11.7, not 0.11.8).
I have this installed alongside vetur e, and if I want type checking I enable this one.

@yringler

This comment has been minimized.

yringler commented May 11, 2018

RE the "An object literal cannot have multiple properties with the same name in strict mode.":
@ktsn , would you happen to know of a way to suppress the error? A setting somewhere?

@octref octref referenced this pull request Aug 13, 2018

Open

Vetur 1.0 Roadmap #873

2 of 16 tasks complete
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment