Official way to generate Vue components .d.ts as a Vite plugin

[segevfiner]

You can currently get .d.ts files by either:

1. Manually invoking vue-tsc
2. Using vite-plugin-dts, which unfortunately doesn't use the same transformation/way to extract types the Vue language services does, and as such has compatibility issues (Many remain unresolved ATM as the other is unresponsive).
3. Using vite-dts which requires shipping sources and is also unmaintained and doesn't work with newer Vite versions.

This is not ideal, it would be nice to have an official way to generate .d.ts files for Vite built libraries. It's kind of an essential part for any TypeScript built component library.

It would be cool to have an official plugin to generate types during build time based on the Vue language tools. The standard way in Rollup is using rollup-plugin-typescript2 but that doesn't know about Vue. So one way would be to extend it to support Vue. Otherwise any approach which works as a plugin to Vite and works well in build --watch mode will be very very helpful.

Due to not having a proper solution for this we are currently stuck on Vue 3.2 and cannot upgrade to Vue 3.3. qmhc/unplugin-dts#220

[VividLemon]

I have mixed feelings about complaining about the slowness of a library, vite-plugin-dts's progress has been slow recently. But since their progress has been rather slow, it would be interesting to see if vite-plugin-dts transitioned to use vue-tsc under the hood. In a perfect world, I would still prefer vite-plugin-dts as an external library, as the plugin wrapper makes it a bit easy and organized into vite.config.ts file. The only real thing that I need to get vue-tsc declaration to work is #3321 . But overall, I think a proper official solution would be nice. If the resources from vite-plugin-dts were combined with vue-tsc and moved into an official repository, that would be very nice to see.

[segevfiner]

Yeah. An option is to promote vite-plugin-dts as an official solution assuming it can/will be stabilized. Using Volar/vue-tsc, fixing the crash in build --watch, etc.

[johnsoncodehk]

• Manually invoking vue-tsc

You can definitely choose this approach, and it's also the way vue repl uses.

https://github.com/vuejs/repl/blob/main/package.json#L35

[segevfiner]

Problem is, I wanted it triggered with vite build --watch in library project.

[VividLemon]

• Manually invoking vue-tsc

You can definitely choose this approach, and it's also the way vue repl uses.

https://github.com/vuejs/repl/blob/main/package.json#L35

I agree that vue-tsc is an approach that can be used, but I think the idea is that, vue-tsc is nice for generating types, but it lacks some of the features and flexibilities that a dedicated vite plugin has. Particularly those that vite plugin DTS has... In addition to this, the api for emitting using vue tsc is a bit bare, so even if it has some features, it can be hard to know if it does.

[johnsoncodehk]

@segevfiner You can run vue-tsc watch in separate progress.

{
	"scripts": {
		"watch": "npm run watch:vite & npm run watch:tsc",
		"watch:vite": "vite build --watch",
		"watch:tsc": "vue-tsc -p -w"
	}
}

[segevfiner]

@segevfiner You can run vue-tsc watch in separate progress.

{
	"scripts": {
		"watch": "npm run watch:vite & npm run watch:tsc",
		"watch:vite": "vite build --watch",
		"watch:tsc": "vue-tsc -p -w"
	}
}

Might result in a bit of garbled output, so might need npm-run-all or `concurrently. Another benefit is that this probably also supports declaration maps?

But it is two processes, as in, two file watchers running at once, so will likely need to split the output directory of the compiled code and types so they won't try to clobber each other.

I need to try this approach.

[segevfiner]

Seems like @qmhc stepped up to the plate and practically rewrote vite-plugin-dts so it now uses Volar and fixed most of the issues I had. Nice job 👍

[posti85]

Seems like @qmhc stepped up to the plate and practically rewrote vite-plugin-dts so it now uses Volar and fixed most of the issues I had. Nice job 👍

Does it mean vite-plugin-dts now uses vue-tsc to generate *.d.ts files?

I'm confused, because I read old comments saying vite-tsc is the better way to generate this files, rather than vite-plugin-dts... but I want to ensure now it's the same.