Vue support about dts-bundle-generator

[timocov]

Hi @f-lawe, do you have a repo that I can use as a repro?

[f-lawe]

I've started a new and very simple one: https://github.com/f-lawe/dts-bundle-generator-vue

For some reason, I'm stuck to Cannot find module './MyComponent.vue' or its corresponding type declarations, while on the project I'm currently working on, Vue files are just ignored.

It's set up with Vite if that can help you.

[timocov]

Please read this #232, looks like this is exactly what you're experiencing.

[f-lawe]

Thanks for replying so fast!

I've updated the project using triple-slash directives, but I still face the same issue. Declaration bundle is built, but it's wrong. Regular build is ok, so it's only a Typescript thing.

[f-lawe]

I keep looking what's different on my other project.

[timocov]

It seems that if you do the following it helps a bit:

• remove https://github.com/f-lawe/dts-bundle-generator-vue/blob/cb3c7e4e55f6e11ad5fc9ff92f0c7aa118b36002/src/shims.d.ts#L5 line (I'll try to address this problem soon)
• change *.vue to ./*.vue at https://github.com/f-lawe/dts-bundle-generator-vue/blob/cb3c7e4e55f6e11ad5fc9ff92f0c7aa118b36002/src/shims.d.ts#L3

At least it generates correct file now. But the problem that I see right now is your components would have {} props which I don't think is right. Sorry, I'm not that familiar with vuejs, not sure what's the best solution here and how it is done in other libraries.

[timocov]

I'll try to address this problem soon

As for this, please add declare keyword to a constant here: declare const component: DefineComponent<{}, {}, any>;.

[f-lawe]

Ok, it works with your changes, thanks. And indeed, Vue components are empty.

I'm not familiar with Typescript declarations from my side. But I know that vue-tsc is able to generate a valid output. There may be a way to leverage something from it?

[f-lawe]

Project updated with a new script: npm run vue-tsc generates a full output.

[timocov]

@f-lawe it seems vue-tsc already generates everything you need in 1 file and you don't need to use dts-bundle-generator?

[f-lawe]

I gave it a try, but the bundled output is not ok. I'm still investigating a bit and checking first if I'm not the one making a mistake. The regular output works, and this is what I use for the moment.

It just would be awesome to have one single package handling both regular JS and Vue. It's not a strong need.

[timocov]

It just would be awesome to have one single package handling both regular JS and Vue

Can you provide what exactly you'd like to get eventually as an output? I'm not quite understand tbh

[f-lawe]

I updated the dts-bundle-generator-vue project so you can have a look.

npm run dst:bundle-generator -> Bundled declarations with your project, ok with regular Typescript, but missing details with Vue files

npm run dts:vue-tsc -> Declarations generated with vue-tsc, each file gets its own declaration file, but output is ok when using the lib within an other project

npm run dts-vue-tsc-bundle -> Bundled declarations with vue-tsc, not ok because every declaration is embedded into a module named after the original file

Ideally, the output should be bundled like your project and populated with the correct Vue declarations like vue-tsc.

[timocov]

not ok because every declaration is embedded into a module named after the original file

@f-lawe is it the only problem with that output from your perspective? It feels like a feature request for vue-tsc tbh (e.g. they can generate random names or so). But also I suppose you can run dts:vue-tsc and then run dts-bundle-generator with dts:vue-tsc's output file as an input, but it fails right now as the tool doesn't support renaming (it is a known limitation), see #116 and #130. I'm closing this issue in favor of these.