[Performance]: .vue.d.ts are not used in TypeScript Project References

[vidal7]

Hello.

What I want to do

I want to better organize my codebase. So I began to introduce TypeScript Project References to help cope with performance problems in vscode and also separating tests from implementation thus it was not possible for the implementation files to import the test files. I was inspired by the official TypeScript Project References documentation on https://www.typescriptlang.org/docs/handbook/project-references.html#an-example-project.

What is my problem

However, I keep getting this TypeScript error in vscode and vue-tsc

vue/main.unit.ts:1:18 - error TS6307: File 'vue/main.vue.ts' is not listed within the file list of project 'vue/tsconfig.unit.json'. Projects must list all files or use an 'include' pattern.
  The file is in the program because:
    Imported via './main.vue' from file 'vue/main.unit.ts'
    Imported via './main.vue' from file 'vue/main.vue.ts'

1 import Main from './main.vue';
                   ~~~~~~~~~~~~

  vue/main.vue.ts:42:45
    42 let __VLS_internalComponent!: typeof import('./main.vue')['default'];
                                                   ~~~~~~~~~~~~
    File is included via import here.


Found 1 error.

What I expect to get No errors in vscode, npm script build:vue is working the same way as build:ts

To reproduce

• Clone https://github.com/vidal7/volar-issue-project-references
• npm install
• npm run build:ts => works
• npm run build:vue => doesn't work

Details before reproducing

• build:ts is building a test files project that is referring to a implementation project that contains only a ts file and it works
• build:vue is building a tests files project that is referring to a implementation project that contains only a vue file and it doesn't work.

Is this a bug? Am I missing something?

Thank you.

[so1ve]

Add *.vue to the include pattern in your tsconfig.unit.json file

[vidal7]

Add *.vue to the include pattern in your tsconfig.unit.json file

It works but I don't think it is an acceptable solution. My understanding is that it defeats the purpose of separating tests from implementation. Your solution merge the test files with the implementation thus implementation can now depends on test files.

Am I right or I am missing something? Also, why I don't have to do it with ts/tsconfig.unit.json that build:ts is using?

[so1ve]

Ugh! Thanks for your clarification. This is likely a bug in volar.

[vidal7]

@so1ve, I tried the official vue scaffolding npm create vue@latest with typescript, vitest options and they are using your solution too... But I can't wrap my head around the following question :

Why I don't have to do it with ts/tsconfig.unit.json that build:ts is using? build:ts is not building any vue files with vue-tsc and I don't have to include any implementation files in the tsconfig include option just refer them with the references tsconfig option.

[vidal7]

Continuing my investigation, with your solution that seems to works, I am afraid that there is a performance hit. Here is the out dir content

npm run build:ts

npm run build:vue

So far so good, every files get compiled in .d.ts files correctly.

Here's the interesting part. If you look closely inside the *.tsbuildinfo files and in the fileNames field, here's what we have. I intentionnaly cut down the list with a value of '...' for brevity.

ts-out/tsconfig.src.tsbuildinfo

ts-out/tsconfig.unit.tsbuildinfo

vue-out/tsconfig.src.tsbuildinfo

vue-out/tsconfig.unit.tsbuildinfo

My conclusion, TypeScript project ts-out/tsconfig.unit.json is using main.d.ts and TypeScript project vue-out/tsconfig.unit.json is using main.vue.ts and not main.vue.d.ts. So I am afraid that there is a performance hit.

[vidal7]

To prove that there is a performance hit, I did something silly but funny with only `tsc'

If you checkout the performance-test branch, I found that build:performant has always 25% less build time than build:non-performant

So I think vue-tsc / volar should do the same thing as tsc since using *.vue.d.ts files in a project instead of using *.vue files will boost the performance.

[vidal7]

Also, if you use the cli option --dry, the .vue.d.ts files are not removed enforcing the idea that these files are generated but not used by referencing projects.

[vidal7]

Update when trying version 2.0.11 with typescript version 5.1.6. Error messages in the console has dissapeared but build:vue doesn't seem to do anything at all. There is no vue-out directory created.

[vidal7]

Update when trying version 2.0.11 with typescript version 5.4.4, there is now a error message in the console.

vue/main.unit.ts(1,18): error TS6305: Output file './vue-out/main.vue' has not been built from source file './vue/main.vue'.