Comments (10)
Actually it's funny, my traditional means of doing this is nicer in that all aliases are resolved but considering the .d.ts
is a TS file I guess maybe TS's built in aliases should work?
from vite-plugin-dts.
Would you share your vite.config.ts
and tsconfig.ts
files?
I think this requires some testing with other plugins.
from vite-plugin-dts.
Hi @qmhc I was just coming back to this issue as I've confirmed that Microsoft has been asked many times about whether .d.ts
files should follow path aliases (since they are part of the TS spec) but their position is that it should not follow them and I guess there are likely good performance reasons for this stance. That said, it does make this that much more important to solve for.
The ts-patch
approach I've alluded to above does work perfectly when using tsc as the underlying engine for transforms. I use this in dozens of repos for this purpose but unfortunately it doesn't pair well with this plugin at the moment.
I had a look at your deps and i would appear you're passing the DTS generation over to tsup. I think anything from @egoist is worth building around and I've been meaning to use TSUP a lot more rather than rolling my own configuations but I'm not aware of how TSUP works under the hood and how to ensure that tsc's plugin API is enabled properly.
from vite-plugin-dts.
I do wonder if maybe this issue needs to be brought over to TSUP as the actual engine for building the declaration files needs to resolve these path aliases either by some means of it's own or by using the containing repo's instance of tsc (as my instance has been patched to use the Typescript plugin API).
from vite-plugin-dts.
Ok I ran TSUP locally in a repo which doesn't have any Vue components (aka, so the Vue loader isn't needed) and it transpiled perfectly down to a single typed file. However, when I then added this plugin to the same repo it created the types not in a single file but rather in a tree structure which mimics where the types are defined:
and then in the files which utilize the path alias it fails, as you can see in this screenshot:
from vite-plugin-dts.
My configuration files are:
vite.config.ts
import path from "path";
import { defineConfig, UserConfig } from "vite";
import Vue from "@vitejs/plugin-vue";
import WindiCSS from "vite-plugin-windicss";
import Icons from "unplugin-icons/vite";
import IconsResolver from "unplugin-icons/resolver";
import Inspect from "vite-plugin-inspect";
import Components from "unplugin-vue-components/vite";
import PC from "vite-plugin-particle-components";
import dts from "vite-plugin-dts";
export default defineConfig({
resolve: {
dedupe: ["vue"],
alias: {
"~/": `${path.resolve(__dirname, "src")}/`,
},
},
publicDir: false,
build: {
lib: {
name: "particle-components",
entry: path.resolve(__dirname, "src/known-components.ts"),
},
minify: "esbuild",
rollupOptions: {
external: ["vue"],
output: {
globals: {
vue: "Vue",
router: "VueRouter",
},
},
},
},
plugins: [
Vue(),
WindiCSS(),
Components({
resolvers: [IconsResolver()],
dts: true,
extensions: ["vue"],
}),
Icons(),
Inspect(),
dts(),
PC(),
],
} as UserConfig);
tsconfig.json
{
"compilerOptions": {
"module": "es2020",
"target": "es2020",
"lib": ["DOM", "ESNext"],
"strict": true,
"esModuleInterop": true,
"incremental": true,
"skipLibCheck": true,
"moduleResolution": "node",
"resolveJsonModule": true,
"noUnusedLocals": true,
"strictNullChecks": true,
"forceConsistentCasingInFileNames": true,
"baseUrl": ".",
"declaration": true,
"outDir": "dist",
"paths": {
"~/*": ["src/*"]
},
"types": ["vite/client"],
"plugins": [
// Transform paths in output .js files
{ "transform": "typescript-transform-paths" },
// Transform paths for declarations files
{ "transform": "typescript-transform-paths", "afterDeclarations": true }
]
},
"include": ["src"],
"exclude": ["dist", "node_modules", "**/*.spec.ts"]
}
from vite-plugin-dts.
I was digging around in your source code and realized that tsup is used to build this plugin but you aren't wrapping it's capabilities into this plugin. Guess that explains why they behave differently 😝
from vite-plugin-dts.
Thanks for your research first!
This plugin is using ts-morph
(you can find it in package.json -> dependencies
) to create typescript programs and source files, and using typescript LanguageService
to emit output files. Finally it using some regular expressions to further process the .d.ts
files in outputs.
After I did some debugging, I found there is a problem in judging whether a path is alias path when alias find
(is the key when using key-value config) ends with '/'.
Currently a workaround is to change the alias config in vite.config.ts
:
import path from 'path'
import { defineConfig } from 'vite'
export default defineConfig({
resolve: {
alias: {
'~': path.resolve(__dirname, 'src')
}
}
}
from vite-plugin-dts.
@qmhc many thanks for looking into this; i'll use the workaround for now. Any sense for when this will be fixed? No pressure, just aware that my own attention is spread quite thinly and want to keep an eye out for it if its relatively soon.
from vite-plugin-dts.
Great. Many thanks. I did a little reading on ts-morph last night ... looks really useful as my normal experience with AST's has been quite painful.
from vite-plugin-dts.
Related Issues (20)
- Cannot find name'DefineComponent'
- [docs] The parameter explanation for the afterBuild option in README.md is incorrect.
- Keep comments of the variable in d.ts HOT 3
- Trigger declaration generation in vite build watch mode when non-ts file changes
- bug: tsconfig.json's "files" option is ignored HOT 1
- build fails when using yarn 4 with pnp and rollupTypes: true HOT 1
- All typescript errors are being swallowed HOT 1
- TS-Errors when building with Vite `v5.3.1` HOT 1
- DTS not compatible with latest React Vite tsconfig structure HOT 9
- `"type": "module"` with `rollupTypes: true` results in error HOT 1
- Feature: Support ${configDir} template variable in tsconfig.json (added in typescript 5.5)
- Error: "Cannot find module 'vue'" after updating to 3.8.0 or up HOT 1
- 大神,我生成的类型文件是源文件的结构,这种模式下导入组件的时候 package.json 中 types 该如何指定 HOT 1
- Issue while installing the plugin HOT 7
- Modify .tsx files during the build process to include additional TypeScript interfaces HOT 2
- namespace declaration exports two times HOT 3
- Can the index file under the file be searched by default And How to handle getResolvedModule errors HOT 1
- Volar generated type been added HOT 3
- Vue vulnerability HOT 4
- Declaration map d.ts.map files do not match transformed d.ts files HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vite-plugin-dts.