bug: Unable to use TS Project References

[ivancuric]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Stencil Version

2.20

Current Behavior

Enabling Typescript project references using:

  "compilerOptions": {
    "composite": true,
    "declaration": true,
    "declarationMap": true
  }

does not work properly as the emit doesn't change.

Expected Behavior

Stencil should output declaration maps and a .tsbuildinfo file.

System Info

No response

Steps to Reproduce

Just run npm run build

Code Reproduction URL

https://github.com/ivancuric/stencil-test

Additional Information

No response

[tanner-reits]

Hey @ivancuric 👋 Thanks for submitting this issue!

Before the team dives into diagnosing what's happening. I'd like to get a little more context into what the actual problem your facing is, or what you're expecting to happen with those config flags. Is the problem that an project references aren't "mapping" correctly, or that Stencil isn't respecting the declaration/declarationMap flags to trace back to the original declarations across references?

[ivancuric]

There are multiple issues, and here's what I tried:

1. The .map files and project files aren't emitted in the /dist/types directory.
2. If I use a separate tsconfig which I only use to generate the types using tsc --build in /types I am then missing the autogenerated dist/types/components.d.ts file.
3. I can generate both (using Stencil's compiler and tsc) and then copy the generated components.d.ts to the tsc's generated types folder. However Stencil's compiler is throwing me an error that I need to link my package.json's types field to dist/types, and not my own folder (/types). This can be mitigated by moving tsc's types over to dist/types, overwriting them.
4. The main issue appears here — since the components.d.ts is autogenerated it doesn't actually map to its source definitions and is a dead-end.

So the end result is that when inspecting files which consume the components.d.ts like the web components themselves or the React wrapper component if using the React output plugin, you can only get to the d.ts file. For the actual implementation you need to fall back to editor search.

One additional issue: the JSdoc comments inside the components.d.ts are formatted to a single line which destroys the formatting of the source comment, especially when using code blocks.

[tanner-reits]

@ivancuric Thanks for the additional information. I apologize for the delay responding here!

I'll go ahead and get this labeled so the team can investigate further! We'll post any updates here once we're able to start looking into this. Stay tuned!

Thanks again for reporting this!

[irontitan76]

Any updates on this? Nx has moved to project references and custom conditions, and my team is looking to move to Stencil for its design system.