Open pinkboid opened 1 year ago
AFAIK running bun create vite
will just run https://github.com/vitejs/vite/tree/main/packages/create-vite and has nothing to do with this repo. Perhaps open an issue over there for better bun handling in vite *-ts
templates.
Adding "types": ["bun-types"]
to tsconfig.json – while needed for things like bun:test
– causes issues with browser globals like "document" (and others) used for example in react applications and vite.js.
How would you configure typescript in a mixed project with vite.js and the bun test runner?
I currently have a tsconfig.json
in the project root:
{
"compilerOptions": {
"target": "esnext",
"useDefineForClassFields": true,
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
"noFallthroughCasesInSwitch": true
},
"include": ["./src"],
"exclude": ["**/*.test.ts", "**/*.spec.ts", "**/*.test.tsx", "**/*.spec.tsx"]
}
…and a tsconfig.test.json
:
{
"extends": "./tsconfig.json",
"compilerOptions": {
"types": ["bun-types"]
},
"include": ["**/*.test.ts", "**/*.spec.ts", "**/*.test.tsx", "**/*.spec.tsx"]
}
While this seems to work when running vite bunx --bun vite
and the test runner bun test
– VS Code gets confused with it and doesn't respect the tsconfig.test.json
file at all.
How would you set that up correctly?
So, here is how I fixed it for me:
tsconfig.json
in vite.js project root (including bun-types
):
{
"compilerOptions": {
"target": "esnext",
"useDefineForClassFields": true,
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
"noFallthroughCasesInSwitch": true,
"types": ["bun-types"]
},
"include": ["./src"]
}
And then added a globals.d.ts
file to ./src
with the following content:
/// <reference lib="dom" />
/// <reference lib="dom.iterable" />
This way, both the bun-types and browser types are correctly recognized by typescript.
What is the problem this feature would solve?
Currently, when you create a vite project using
bun create vite
and selectTypeScript
, it does not include"bun-types"
in the"types"
field in the auto-generated tsconfig.json. Attempts to referenceBun.argv
or'bun:test'
give ts alerts. Fixing this requires manually adding"types": ["bun-types"]
, which is one extra step I'd like to not have to do to get a TS Bun project running out of the box. But, maybe the philosophy here is that we should not assume developers will ever use bun variables, keeping them as an opt-in, which I can respect as well.What is the feature you are proposing to solve the problem?
include the the line
"types": ["bun-types"]
inside"compilerOptions"
in the defaulttsconfig.json
on bun based typescript project templates like Vite.What alternatives have you considered?
No response