Expected declaration extensions for vue components

[cjpearson]

Describe the feature

Follow-up discussion from #268 (comment)

Currently the declaration files for Vue components are named component.vue.d.ts. According the TypeScript docs, it seems component.vue.d.ts will work for CommonJS resolution, but for ESM they should follow the pattern component.d.vue.ts and enable allowArbitraryExtensions.

Note that historically, a similar effect has often been achievable by adding a declaration file named app.css.d.ts instead of app.d.css.ts - however, this just worked through Node’s require resolution rules for CommonJS. Strictly speaking, the former is interpreted as a declaration file for a JavaScript file named app.css.js. Because relative files imports need to include extensions in Node’s ESM support, TypeScript would error on our example in an ESM file under --moduleResolution node16 or nodenext.

How should mkdist handle this? It seems that using component.d.vue.ts might be more correct, but would require consumers to enable allowArbitraryExtensions. It would also depend on if the Vue component is compiled to a Vue or JS file since the declaration extension should match the output extension.

Input	Output Code	Output Declaration
component.vue	component.vue.js	component.d.ts
component.vue	component.vue.mjs	component.d.mts
component.vue	component.vue.cjs	component.d.cts
component.vue	component.vue	component.d.vue.ts

Additional information

• Would you be willing to help implement this feature?

[Teages]

I think we need to generate both because vuejs/core#13301 is merged but volar.js need a lot of work to support .d.vue.ts.

Currently vue runtime only support infer types from .d.vue.ts while the language-tools only support .vue.d.ts

we can do it in #268

[Teages]

update: now we only need .d.vue.ts for .vue files volarjs/volar.js#277