feat(create-vite): tsconfig support vite.config.ts

[poyoho]

Description

fix #6311

Additional context

Should we distinguish between build and editor configuration files?

---

What is the purpose of this pull request?

• Bug fix
• New Feature
• Documentation update
• Other

Before submitting the PR, please make sure you do the following

• Read the Contributing Guidelines.
• Read the Pull Request Guidelines and follow the Commit Convention.
• Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
• Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).
• Ideally, include relevant tests that fail without this PR but pass with it.

[bluwy]

I think we can cover template-svelte-ts too. We might've forgot to rename the config to vite.config.ts.

[bluwy]

LGTM. Might want to fix the typo in the PR title too 👀

[poyoho]

hahahaha

[ydcjeff]

I think PR title should be feat(create-vite): ...

[NMinhNguyen]

Hm, I just tried this in my project and if you import something in vite.config.ts that happens to include @types/node, then you can inadvertently make Node globals available in the browser code like global, etc. so this might not be a good idea after all?

[poyoho]

you mean is you need to install "@types/node" in the project, and the "@types/node" will make the browser had error type?

[NMinhNguyen]

you mean is you need to install "@types/node" in the project, and the "@types/node" will make the browser had error type?

Sorry, I wasn't very clear. Basically if you import another package and that package has a dependency on @types/node. If you add @types/node to your app yourself, then I don't think you can easily avoid those types from being available (unless you use types tsconfig option or something).

In the former case, if you don't include vite.config.ts in your tsconfig, then type-checking your Vite app shouldn't introduce Node globals (or at least it doesn't if you use Yarn PnP).

[poyoho]

thanks @NMinhNguyen.

yes, your editor typescript project will no load the vite.config.ts and no aload the @types/node in the typescript project.

I think only add the vite/client reference in the vite.config.ts better 😀

[NMinhNguyen]

Yeah but the thing is that vite.config.ts is run in a Node.js context, so it's likely that you'd need to reference Node-specific things 😅

[poyoho]

just add vite/client and @types/node but @types/node is not default deps

[NMinhNguyen]

just add vite/client and @types/node but @types/node is not default deps

That would introduce Node globals in the browser code, right?

[poyoho]

no, because tsconfig.json will no include vite.config.ts, just add reference in the vite.config.ts

[NMinhNguyen]

no, because tsconfig.json will no include vite.config.ts, just add reference in the vite.config.ts

How? Do you mean /// <reference types="node" />? That doesn't work if you don't have @types/node installed, and installing them makes them available in the browser code too.

[poyoho]

but it can't make the vite.config.ts support module=esnext 😢

[poyoho]

I find the tsconfig.json had lib config, will ignore @types/node by default?

[NMinhNguyen]

I haven't tried this but types might help. At the same time, this issue isn't like a blocker so maybe it's okay to see some squiggly lines in the editor after all? 😁

[poyoho]

use tsconfig option reference to split browser and node env, that will no load @types/node in browser env.

[NMinhNguyen]

use tsconfig option reference to split browser and node env, that will no load @types/node in browser env.

Interesting! I'm on my phone atm so can't check but will check later tonight

[NMinhNguyen]

@poyoho I've verified and it seems to work as intended! Great work!

[bluwy]

This seems to complicate the setup a bit, but LGTM if it's something the end-user would eventually need to solve.

[patak-dev]

@poyoho we talked about this PR too :)

This is a good approach, looks like the vue cli starter will also use the same scheme moving forward. Before merging, it would be good to try to simplify the .node.json. Would it be possible to review and make them as minimal as possible? Thanks again!