Add native TS support for .vue files

[JessicaSachs]

Decide between ts-jest and babel-jest

[lmiller1990]

Let's go with ts-jest, release v4 and call it a day.

Anyone up for this? It should be trivial.

[lmiller1990]

For reference see the next branch, which works with Vue 3 and uses ts-jest. This one won't give errors in vue files though. I wonder what I missed.

[lmiller1990]

Actually, I do not think this is anything to do with ts-jest. We are using ts.transpileModule, which does not seem to do type checks. I will look at this today.

[lmiller1990]

Ok, so I figured out one way to do this. We can use this kind of thing to get errors. The downside is we must write the TS to a file to be consumed by this - not ideal for perf. But I will experiment. Most likely someone who works on Vetur has already solved this problem. I will ask them about it.

I will make a POC you can enable with a flag and we can release v4. Improving it can be a minor release.

I also fixed CI (I think). PR coming in the next day or so.

[lmiller1990]

Seems to work:

For now the test just runs anyway - should the test fail? Not sure the correct behavior here.

[JessicaSachs]

If we're going with ts-jest, it should not fail. You can write TS code that won't compile and it'll pass unit tests.

ts-jest doesn't use the typescript compiler. This was the difference between ts-jest and babel-jest's expected behavior

[JessicaSachs]

I think the dream is that we listen to the user's existing settings and use the ts-jest or babel-jest settings they have.

If TS users want their stuff to fail to compile during unit tests, then they want that for their SFCs, too

[lmiller1990]

Yep, I think we should just inherit the users' ts-jest settings. Eg, you can make your test run, despite TS errors using ts-jest, if you like, this is the main one I think we need to inherit. This one. I can make this change.

Anything else we will need to grab from their ts-jest settings?

[ahnpnl]

If we're going with ts-jest, it should not fail. You can write TS code that won't compile and it'll pass unit tests.

ts-jest doesn't use the typescript compiler. This was the difference between ts-jest and babel-jest's expected behavior

To be correct, ts-jest does use typescript compiler. It has 2 modes: isolatedModules: true which will use ts.transpileModule and isolatedModules: false will use LanguageService API.

There is one thing to use ts-jest is: since vue doesn't use ts or tsx extension, I don't know how internal ts-jest typescript compiler will handle compiling vue extension. But if just delivering ts to ts-jest, everything will just work normally.

[lmiller1990]

I got this working here @ahnpnl #239

not really ideal, but we just rip out the ts part of the Vue file and compile it manually using the typescript library. I don't have a good solution to "deliver" a ts file from a vue file.

Last thing I need to change is to inherit some settings from ts-jest - that is to use transpileModule or compile, depending what the user configured, then we can at least release this as experimental

[ahnpnl]

Just FYI from ts-jest side:

So I can see the approach you are using in #239 is similar to ts-jest 23.1.4, 23.10.5 is a rewritten version of ts-jest so most of stuffs are not the same anymore. For example:

• isolatedModules: true:

  • 23.1.4: this is the default mode of ts-jest and if user wants to have type checking, there is a flag to enable it which will trigger creating TypeScript Program like you are doing with feat: type check vue files #239.

  • After 23.10.5: this is no longer the default mode of ts-jest due to lack of supporting some features (see https://kulshekhar.github.io/ts-jest/user/config/isolatedModules). Also the type check possibility is removed for the most to ultilize the most of speed when running tests.

• isolatedModules: false (new feature):

  • This is the new default mode of ts-jest.

  • Run tests with TypeScript LanguageService API, which allows to ultilize full functionalities from TypeScript + type checking.

  • This mode is good, however there is a payoff for performance that the speed won't be as fast as isolatedModules: true, about 40-50% slower.

• Recently we ts-jest also added partial support TypeScript projectReferences, see for isolatedModules: true and for isolatedModules: false

From #239 I don't see anywhere using ts-jest APIs. However, I'm not so familiar with vue-jest codebase so I just share my opinion. But if anything ts-jest can help, feel free to discuss with us :)