qmhc / vite-plugin-dts Goto Github PK

View Code? Open in Web Editor NEW

1.1K 8.0 76.0 3.21 MB

A Vite plugin for generating `.d.ts` files.

License: MIT License

JavaScript 1.97% Shell 0.51% TypeScript 97.52%

dts react typescript vite vite-plugin vue tsc volar vue-tsc

vite-plugin-dts's Issues

Doesn't support script setup ?

The library is great. But it fails with the script setup rfc. There are couple of errors.

src/components/lib/FAlert.vue.ts:11:3 - error TS2769: No overload matches this call.
  The last overload gave the following error.
    Type 'undefined' is not assignable to type 'Readonly<ComponentPropsOptions<Data>> & ThisType<void>'.
      Type '(this: void, __props: { icon?: string | undefined; message: string; id: string; type: "success" | "danger" | "warning"; }) => { props: { icon?: string | undefined; message: string; id: string; type: "success" | ... 1 more ... | "warning"; }; bgColor: ComputedRef<...>; iconName: ComputedRef<...>; computed: { ...; }; ...' is not assignable to type '(this: void, props: Readonly<LooseRequired<Readonly<{ [x: number]: string; } & { [iterator]?: IterableIterator<string> | undefined; toString?: string | undefined; toLocaleString?: string | undefined; concat?: string[] | undefined; ... 19 more ...; flat?: unknown[] | undefined; }> | Readonly<...>>>, ctx: SetupContext...'.
        Types of parameters '__props' and 'props' are incompatible.
          Type 'Readonly<LooseRequired<Readonly<{ [x: number]: string; } & { [iterator]?: IterableIterator<string> | undefined; toString?: string | undefined; toLocaleString?: string | undefined; concat?: string[] | undefined; ... 19 more ...; flat?: unknown[] | undefined; }> | Readonly<...>>>' is missing the following properties from type '{ icon?: string | undefined; message: string; id: string; type: "success" | "danger" | "warning"; }': message, id, type

11   props: {
     ~~~~~

  node_modules/@vue/runtime-core/dist/runtime-core.d.ts:420:5
    420     props: PropsOptions & ThisType<void>;
            ~~~~~
    The expected type comes from property 'props' which is declared here on type 'ComponentOptionsWithObjectProps<Readonly<ComponentPropsOptions<Data>>, { props: { icon?: string | undefined; message: string; id: string; type: "success" | "danger" | "warning"; }; bgColor: ComputedRef<...>; iconName: ComputedRef<...>; computed: { ...; }; FIcon: DefineComponent<...>; }, ... 8 more ..., { ...; } | {}>'
  node_modules/@vue/runtime-core/dist/runtime-core.d.ts:585:25
    585 export declare function defineComponent<PropsOptions extends Readonly<ComponentPropsOptions>, RawBindings, D, C extends ComputedOptions = {}, M extends MethodOptions = {}, Mixin extends ComponentOptionsMixin = ComponentOptionsMixin, Extends extends ComponentOptionsMixin = ComponentOptionsMixin, E extends EmitsOptions = Record<string, any>, EE extends string = string>(options: ComponentOptionsWithObjectProps<PropsOptions, RawBindings, D, C, M, Mixin, Extends, E, EE>): DefineComponent<PropsOptions, RawBindings, D, C, M, Mixin, Extends, E, EE>;
                                ~~~~~~~~~~~~~~~
    The last overload is declared here.
src/components/lib/FAlert.vue.ts:17:3 - error TS2769: No overload matches this call.
  The last overload gave the following error.
    Type 'undefined' is not assignable to type 'Readonly<ComponentPropsOptions<Data>> & ThisType<void>'.
      Type '(this: void, __props: { icon?: string | undefined; message: string; id: string; type: "success" | "danger" | "warning"; }) => { props: { icon?: string | undefined; message: string; id: string; type: "success" | ... 1 more ... | "warning"; }; bgColor: ComputedRef<...>; iconName: ComputedRef<...>; computed: { ...; }; ...' is not assignable to type '(this: void, props: Readonly<LooseRequired<Readonly<{ [x: number]: string; } & { [iterator]?: IterableIterator<string> | undefined; toString?: string | undefined; toLocaleString?: string | undefined; concat?: string[] | undefined; ... 19 more ...; flat?: unknown[] | undefined; }> | Readonly<...>>>, ctx: SetupContext...'.
        Types of parameters '__props' and 'props' are incompatible.
          Type 'Readonly<LooseRequired<Readonly<{ [x: number]: string; } & { [iterator]?: IterableIterator<string> | undefined; toString?: string | undefined; toLocaleString?: string | undefined; concat?: string[] | undefined; ... 19 more ...; flat?: unknown[] | undefined; }> | Readonly<...>>>' is missing the following properties from type '{ icon?: string | undefined; message: string; id: string; type: "success" | "danger" | "warning"; }': message, id, type

17   setup(__props: {
     ~~~~~

  node_modules/@vue/runtime-core/dist/runtime-core.d.ts:389:5
    389     setup?: (this: void, props: Readonly<LooseRequired<Props & UnionToIntersection<ExtractOptionProp<Mixin>> & UnionToIntersection<ExtractOptionProp<Extends>>>>, ctx: SetupContext<E>) => Promise<RawBindings> | RawBindings | RenderFunction | void;
            ~~~~~
    The expected type comes from property 'setup' which is declared here on type 'ComponentOptionsWithObjectProps<Readonly<ComponentPropsOptions<Data>>, { props: { icon?: string | undefined; message: string; id: string; type: "success" | "danger" | "warning"; }; bgColor: ComputedRef<...>; iconName: ComputedRef<...>; computed: { ...; }; FIcon: DefineComponent<...>; }, ... 8 more ..., { ...; } | {}>'
  node_modules/@vue/runtime-core/dist/runtime-core.d.ts:585:25
    585 export declare function defineComponent<PropsOptions extends Readonly<ComponentPropsOptions>, RawBindings, D, C extends ComputedOptions = {}, M extends MethodOptions = {}, Mixin extends ComponentOptionsMixin = ComponentOptionsMixin, Extends extends ComponentOptionsMixin = ComponentOptionsMixin, E extends EmitsOptions = Record<string, any>, EE extends string = string>(options: ComponentOptionsWithObjectProps<PropsOptions, RawBindings, D, C, M, Mixin, Extends, E, EE>): DefineComponent<PropsOptions, RawBindings, D, C, M, Mixin, Extends, E, EE>;
                                ~~~~~~~~~~~~~~~
    The last overload is declared here.
src/components/lib/FMenu.vue.ts:8:3 - error TS2769: No overload matches this call.
  The last overload gave the following error.
    Type 'undefined' is not assignable to type 'Readonly<ComponentPropsOptions<Data>> & ThisType<void>'.
      Type '(this: void, __props: { options: string[] | Record<"label" | "value", any>[]; modelValue?: string | undefined; optionKey?: "label" | "value" | undefined; label?: string | undefined; icon?: string | undefined; size?: string | undefined; sm?: boolean | undefined; }, { emit }: SetupContext<...>) => { ...; }' is not assignable to type '(this: void, props: Readonly<LooseRequired<Readonly<{ [x: number]: string; } & { [iterator]?: IterableIterator<string> | undefined; toString?: string | undefined; toLocaleString?: string | undefined; concat?: string[] | undefined; ... 19 more ...; flat?: unknown[] | undefined; }> | Readonly<...>>>, ctx: SetupContext...'.
        Types of parameters '__props' and 'props' are incompatible.
          Property 'options' is missing in type 'Readonly<LooseRequired<Readonly<{ [x: number]: string; } & { [iterator]?: IterableIterator<string> | undefined; toString?: string | undefined; toLocaleString?: string | undefined; concat?: string[] | undefined; ... 19 more ...; flat?: unknown[] | undefined; }> | Readonly<...>>>' but required in type '{ options: string[] | Record<"label" | "value", any>[]; modelValue?: string | undefined; optionKey?: "label" | "value" | undefined; label?: string | undefined; icon?: string | undefined; size?: string | undefined; sm?: boolean | undefined; }'.

8   props: {
    ~~~~~

  node_modules/@vue/runtime-core/dist/runtime-core.d.ts:420:5
    420     props: PropsOptions & ThisType<void>;
            ~~~~~
    The expected type comes from property 'props' which is declared here on type 'ComponentOptionsWithObjectProps<Readonly<ComponentPropsOptions<Data>>, { emit: (event: "input" | "update:modelValue", ...args: any[]) => void; isMenu: Ref<boolean>; ... 6 more ...; FButton: DefineComponent<...>; }, ... 8 more ..., { ...; } | {}>'
  node_modules/@vue/runtime-core/dist/runtime-core.d.ts:585:25
    585 export declare function defineComponent<PropsOptions extends Readonly<ComponentPropsOptions>, RawBindings, D, C extends ComputedOptions = {}, M extends MethodOptions = {}, Mixin extends ComponentOptionsMixin = ComponentOptionsMixin, Extends extends ComponentOptionsMixin = ComponentOptionsMixin, E extends EmitsOptions = Record<string, any>, EE extends string = string>(options: ComponentOptionsWithObjectProps<PropsOptions, RawBindings, D, C, M, Mixin, Extends, E, EE>): DefineComponent<PropsOptions, RawBindings, D, C, M, Mixin, Extends, E, EE>;
                                ~~~~~~~~~~~~~~~
    The last overload is declared here.
src/components/lib/FMenu.vue.ts:18:3 - error TS2769: No overload matches this call.
  The last overload gave the following error.
    Type 'undefined' is not assignable to type 'Readonly<ComponentPropsOptions<Data>> & ThisType<void>'.
      Type '(this: void, __props: { options: string[] | Record<"label" | "value", any>[]; modelValue?: string | undefined; optionKey?: "label" | "value" | undefined; label?: string | undefined; icon?: string | undefined; size?: string | undefined; sm?: boolean | undefined; }, { emit }: SetupContext<...>) => { ...; }' is not assignable to type '(this: void, props: Readonly<LooseRequired<Readonly<{ [x: number]: string; } & { [iterator]?: IterableIterator<string> | undefined; toString?: string | undefined; toLocaleString?: string | undefined; concat?: string[] | undefined; ... 19 more ...; flat?: unknown[] | undefined; }> | Readonly<...>>>, ctx: SetupContext...'.
        Types of parameters '__props' and 'props' are incompatible.
          Property 'options' is missing in type 'Readonly<LooseRequired<Readonly<{ [x: number]: string; } & { [iterator]?: IterableIterator<string> | undefined; toString?: string | undefined; toLocaleString?: string | undefined; concat?: string[] | undefined; ... 19 more ...; flat?: unknown[] | undefined; }> | Readonly<...>>>' but required in type '{ options: string[] | Record<"label" | "value", any>[]; modelValue?: string | undefined; optionKey?: "label" | "value" | undefined; label?: string | undefined; icon?: string | undefined; size?: string | undefined; sm?: boolean | undefined; }'.

18   setup(__props: {
     ~~~~~

  src/components/lib/FMenu.vue.ts:19:3
    19   options: string[] | Record<'label' | 'value', any>[];
         ~~~~~~~
    'options' is declared here.
  node_modules/@vue/runtime-core/dist/runtime-core.d.ts:389:5
    389     setup?: (this: void, props: Readonly<LooseRequired<Props & UnionToIntersection<ExtractOptionProp<Mixin>> & UnionToIntersection<ExtractOptionProp<Extends>>>>, ctx: SetupContext<E>) => Promise<RawBindings> | RawBindings | RenderFunction | void;
            ~~~~~
    The expected type comes from property 'setup' which is declared here on type 'ComponentOptionsWithObjectProps<Readonly<ComponentPropsOptions<Data>>, { emit: (event: "input" | "update:modelValue", ...args: any[]) => void; isMenu: Ref<boolean>; ... 6 more ...; FButton: DefineComponent<...>; }, ... 8 more ..., { ...; } | {}>'
  node_modules/@vue/runtime-core/dist/runtime-core.d.ts:585:25
    585 export declare function defineComponent<PropsOptions extends Readonly<ComponentPropsOptions>, RawBindings, D, C extends ComputedOptions = {}, M extends MethodOptions = {}, Mixin extends ComponentOptionsMixin = ComponentOptionsMixin, Extends extends ComponentOptionsMixin = ComponentOptionsMixin, E extends EmitsOptions = Record<string, any>, EE extends string = string>(options: ComponentOptionsWithObjectProps<PropsOptions, RawBindings, D, C, M, Mixin, Extends, E, EE>): DefineComponent<PropsOptions, RawBindings, D, C, M, Mixin, Extends, E, EE>;
                                ~~~~~~~~~~~~~~~
    The last overload is declared here.

I think this is due to the chunks that vite build produces for the script setup syntax.

Cannot infer types from `node_modules` when using symlink link (pnpm)

在设置exclude之后，好像并没有生效

demo

运行 pnpm run build:vc-naive 在控制台中可以看到错误日志

`preserveModulesRoot` is invalid in windows

https://github.com/ckpack/v-ui

Generated types stay primitives

Hello,

First of all thank you for your lib.
I'm encountering an issue with the generated types. I have a Button.vue component like this :

<script setup lang="ts">
type Props = {
  color: "blue" | "red";
};

defineProps<Props>();
</script>

<template>
  <button>Test</button>
</template>

The prop color is a String that only accepts 2 defined words blue and red.
But this is the result of the generated Button.vue.d.ts file :

As you can see, the color prop is now a StringConstructor and accepts every string. I'm losing the initial typing which is more strict.

This is my vite.config.ts file :

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { resolve } from "path";
import dts from "vite-plugin-dts";

export default defineConfig({
  plugins: [vue(), dts()],
  build: {
    lib: {
      entry: resolve(__dirname, "src/main.ts"),
      name: "uikit",
    },
    rollupOptions: {
      external: ["vue"],
      output: {
        globals: {
          vue: "Vue",
        },
      },
    },
  },
});

Am I doing something wrong or the lib can't just be more precise with the types ?

How to use `root` correctly?

Thanks for building this and sharing it!

My directory structure looks like this

My-Component/
    dist/
    lib/
    some-other-stuff/
    tsconfig.json

My vitejs build options are

 build: {
    lib: {
      entry: path.resolve(__dirname, 'lib/index.ts'),
      name: 'my-component',
      fileName: (format) => `my-component.${format}.js`,
    }
  },

If I use the plugin with the default options, vite-plugin-dts creates the files:

dist/
    lib/
        <stuff>.d.ts

That's good. But what I want to achieve is

dist/
    typings/
        <stuff>.d.ts

So I tried this

dts({
      root: 'lib',
      outputDir: 'dist/typings',
      tsConfigFilePath: '../tsconfig.json',
    }),

This runs without any errors:

[vite:dts] Start generate declaration files...
[vite:dts] Declaration files built in 5776ms.

However, now my dist directory does contain any output from the plugin. Setting logDiagnostics:true does not cause the plugin to tell me what it is doing or where it is putting the files.

So my question is, how do I set the options so that I can get the output structure I need?
Thanks!

Usage with TSX

I am trying to use it with react typescript i.e TSX but it is not generating types

用脚本去手动打包，脚本文件存放项目中不同路径下生成的文件结果不一样

我在使用dts()生成.d.ts文件时发现。
如果我写的脚本文件放于根目录下，也就是project/下。则打包能生成如下的文件(注意红框中的生成文件)

但是，如果把该脚本放于project/script下，则只会生成index.d.ts. 如下（与上图对比，少了两）

因为console也没有提示相关错误，所以不好排查。下面是这个demo的地址
demo

我希望的是，两者生成的结果，应该都是第一次的结果。：(

Compiled components lib VSCode Volar intellisense

Hello!
First of all I would like to thank and express my gratitude to @qmhc for this library. Was struggling a lot how to generate compiled library types before saw vite-plugin-dts.

I'm currently building a component library which should be published and distributed in npm and used in multiple projects. vite-plugin-dts seems to generate all the component types, but one thing that cough my eye is that the template intelisense is missing when importing compiled lib.

Imported compiled components (generated types seems ok)

Component intellisense not working inside template files

So I was wondering is this a Volar limitation or me not having the correct TS configs.
Thanks!

P.s. Sorry if this question isn't related to this project

[Bug] The argument 'path' must be a string or Uint8Array without null bytes

Hi, thanks you @qmhc for great library! But today I had an error when I use this lib with yarn 3 pnp!

[vite:dts] The argument 'path' must be a string or Uint8Array without null bytes. Received '/home/techmely/techmely/packages/utils/\x00commonjsHelpers.js'
file: commonjsHelpers.js
error during build:
TypeError [PLUGIN_ERROR]: The argument 'path' must be a string or Uint8Array without null bytes. Received '/home/techmely/techmely/packages/utils/\x00commonjsHelpers.js'
    at Object.openSync (node:fs:577:10)
    at NodeFS.openSync (/home/techmely/techmely/.pnp.cjs:14347:24)
    at makeCallSync.subPath.subPath (/home/techmely/techmely/.pnp.cjs:17033:26)
    at ZipOpenFS.makeCallSync (/home/techmely/techmely/.pnp.cjs:17789:26)
    at ZipOpenFS.openSync (/home/techmely/techmely/.pnp.cjs:17032:17)
    at VirtualFS.openSync (/home/techmely/techmely/.pnp.cjs:14785:24)
    at PosixFS.openSync (/home/techmely/techmely/.pnp.cjs:14785:24)
    at URLFS.openSync (/home/techmely/techmely/.pnp.cjs:14785:24)
    at Object.readFileSync (node:fs:453:35)
    at NodeFS.readFileSync (/home/techmely/techmely/.pnp.cjs:14693:24)

Reproduction:
The repo https://github.com/techmely/techmely/blob/main/packages/utils/vite.config.ts

You can check the error with the command: yarn build:utils

Hope you or someone can fix that <3

not work with withDefaults

In Vue3's <script setup> syntax, withDefaults allows setting default values of props and make definition of property -?-able, here's a example:

<script setup>
import { withDefaults } from 'vue'

const props: withDefaults(defineProps<{
  foo?: string
}>(), {
  foo: 'bar',
})
/**
 * type of `props`:
 * props: {
 *   foo: string
 * }
 */
</script>

But when vite build with this plugin, compiler reports with:

index.vue.ts:10:3 - error TS2769: No overload matches this call.
  The last overload gave the following error.
    Type 'undefined' is not assignable to type 'Readonly<ComponentPropsOptions<Data>> & ThisType<void>'.
      Type '(this: void, __props: { foo?: string | undefined }' is not assignable to type '(this: void, props: Readonly<LooseRequired<Readonly<readonly unknown[] & { [x: number]: string; } & { [iterator]?: IterableIterator<string> | undefined; toString?: string | undefined; toLocaleString?: string | undefined; concat?: string[] | undefined; ... 19 more ...; flat?: unknown[] | undefined; }> | Readonly<...>...'.
        Types of parameters '__props' and 'props' are incompatible.
          Property 'foo' is missing in type 'Readonly<LooseRequired<Readonly<readonly unknown[] & { [x: number]: string; } & { [iterator]?: IterableIterator<string> | undefined; toString?: string | undefined; toLocaleString?: string | undefined; concat?: string[] | undefined; ... 19 more ...; flat?: unknown[] | undefined; }> | Readonly<...>>>' but required in type '{ foo: string; }'.

10   props: {
     ~~~~~

Merge all d.ts files into a single d.ts file?

Is it possible to merge all d.ts files into a single d.ts file?

setup script支持问题

如上图
因为 setup script 支持了 export interface Props {}
所以我准备在setup script中声明类型，再导出去，这样类型只用定义一次。但是发现使用dts生成.d.ts时报错

Can not resolve alias when using default import

source: import VContainer from '@components/layout/container/VContainer.vue'

outputs: import VContainer from '@components/layout/container/VContainer.vue'

correct outputs: import VContainer from './components/layout/container/VContainer.vue'

vite config:

{
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
      '@components': path.resolve(__dirname, 'src/components'),
    },
  }
}

Another issue:
~~When an alias is included by another alias and is in front of the another alias, can not resolve aliases correctly.~~
When an alias real dir path is using by a file which includes the alias real dir path, can not resolve aliases correctly.

origin: #19 (comment)

Should filter vite virtual files when transform

为某个使用了 devextreme-vue 的组件生成 dts 时报错，内容如下：

[vite:dts] Start generate declaration files...
transforming (12) node_modules/devextreme/esm/ui/data_grid/ui.data_grid.base.js[vite:dts] Declaration files built in 2987ms.

[vite:dts] The argument 'path' must be a string or Uint8Array without null bytes. Received '/path-to-develop/test/vite-plugin-dts-test/\x00commonjsHelpers.js'
file: commonjsHelpers.js
error during build:
TypeError [PLUGIN_ERROR]: The argument 'path' must be a string or Uint8Array without null bytes. Received '/path-to-develop/test/vite-plugin-dts-test/\x00commonjsHelpers.js'
    at Object.openSync (node:fs:577:10)
    at Object.readFileSync (node:fs:453:35)
    at NodeRuntimeFileSystem.readFileSync (/path-to-develop/test/vite-plugin-dts-test/node_modules/@ts-morph/common/dist/ts-morph-common.js:1191:30)
    at RealFileSystemHost.readFileSync (/path-to-develop/test/vite-plugin-dts-test/node_modules/@ts-morph/common/dist/ts-morph-common.js:1894:23)
    at TransactionalFileSystem.readFileSync (/path-to-develop/test/vite-plugin-dts-test/node_modules/@ts-morph/common/dist/ts-morph-common.js:2431:32)
    at TransactionalFileSystem.readFileIfExistsSync (/path-to-develop/test/vite-plugin-dts-test/node_modules/@ts-morph/common/dist/ts-morph-common.js:2420:25)
    at CompilerFactory.addOrGetSourceFileFromFilePath (/path-to-develop/test/vite-plugin-dts-test/node_modules/ts-morph/dist/ts-morph.js:19160:61)
    at DirectoryCoordinator.addSourceFileAtPathIfExists (/path-to-develop/test/vite-plugin-dts-test/node_modules/ts-morph/dist/ts-morph.js:18633:37)
    at DirectoryCoordinator.addSourceFileAtPath (/path-to-develop/test/vite-plugin-dts-test/node_modules/ts-morph/dist/ts-morph.js:18639:33)
    at Project.addSourceFileAtPath (/path-to-develop/test/vite-plugin-dts-test/node_modules/ts-morph/dist/ts-morph.js:20086:51)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

但其实 dts 已经生成出来了。
报错的根源不知道。我跟踪出来的是 \x00commonjsHelpers.js 这个"文件"存在于 vite 里，包含在某个 vite/dist/node/chunks/dep-xxx.js 中，仅仅是个声明：

const HELPERS_ID = '\0commonjsHelpers.js';

我修改了一下 dts 插件，简单过滤了一下，不添加这些 \0 开头的文件。

must set include in tsconfig.json?

this is repo: https://codesandbox.io/s/ep58hx?file=/tsconfig.json

when i remove include setting, after yarn build , dist directory has no d.ts file

我对ts不是很熟悉，我看源码：

vite-plugin-dts/src/plugin.ts

Line 326 in 173dfe7

!includedFileSet.has(isMapFile ? filePath.slice(0, -4) : filePath) ||

对includedFileSet进行了校验，但是includedFileSet只有配置了include才会被设置。

How to infer component emitted event types?

我这里的onAdd应该是(value: number) => void，但生成的结果确是((...args: any[]) => any) | undefined，我想知道这是插件的问题还是vite打包的配置问题，应该怎么解决呢

默认配置输出的文件为何多了一层"src"目录

如图，默认配置。

Error: File not found: commonjsHelpers.js

at DirectoryCoordinator.addSourceFileAtPath (./node_modules/ts-morph/dist/ts-morph.js:18117:19)
at Project.addSourceFileAtPath (./node_modules/ts-morph/dist/ts-morph.js:19567:51)
at Object.transform (./node_modules/vite-plugin-dts/dist/index.js:138846:17)
at ./node_modules/rollup/dist/shared/rollup.js:22620:25

declarationDir配置后无法生成d.ts文件

支持react吗

目前不能支持vue的script setup模式

script setup模式可以有两个scirpt标签,这个目前打包会报错

`copyDtsFiles` option has no effect

When the plugin is used with the copyDtsFiles option set to false, the src/env.d.ts file finds its way into the dist directory.

By looking at the code, I see that the option default value is never defined, nor used.
I'll send a quick pull requests to fix that as soon as possible 🙂

A new update is breaking bundling of SSR application

Hello,

on update to 1.0.0 the DTS is breaking bundling of chalk,

failed to load config from /home/sionzee/projects/censured/editor/packages/editor/vite.config.ts
error when starting dev server:
Error [ERR_REQUIRE_ESM]: require() of ES Module /home/sionzee/projects/censured/editor/node_modules/.pnpm/[email protected]/node_modules/chalk/source/index.js from /home/sionzee/projects/censured/editor/node_modules/.pnpm/[email protected][email protected]/node_modules/vite-plugin-dts/dist/index.js not supported.
Instead change the require of /home/sionzee/projects/censured/editor/node_modules/.pnpm/[email protected]/node_modules/chalk/source/index.js in /home/sionzee/projects/censured/editor/node_modules/.pnpm/[email protected][email protected]/node_modules/vite-plugin-dts/dist/index.js to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (/home/sionzee/projects/censured/editor/node_modules/.pnpm/[email protected][email protected]/node_modules/vite-plugin-dts/dist/index.js:34:28)
    at async Promise.all (index 0)
    at async loadConfigFromFile (/home/sionzee/projects/censured/editor/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-9c153816.js:71326:31)
    at async resolveConfig (/home/sionzee/projects/censured/editor/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-9c153816.js:70873:28)
    at async createServer (/home/sionzee/projects/censured/editor/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-9c153816.js:56425:20)
    at async CAC.<anonymous> (/home/sionzee/projects/censured/editor/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/cli.js:688:24)
undefined

Returning back to ^0.9.10 fixes the error.

This looks like an include issue, because it is visiting node_modules of other packages in monorepo.
I'm using chalk in package where vite-plugin-dts is not included.

In the config I have:

    plugins: [
      dts({
        include: ['./index.ts', './src'],
      })
    ],

Unfortunately I cannot provide source code due NDA.

读取 tsconfig.json 的方式优化

通过 typescript 自动生成的 tsconfig.json 会包含注释，所以这里可否优化一下，不通过 JSON.parse() 读取配置？

dts() doesn't support multiple default exports when using new sfc `<script setup>`

Recently i changed from the default vue 3 boilerplate of using setup() for the recently out of experimental <script setup>, but when type gen with dts plugin comes in i found an issue when the sfc need to describe more than one default export at the same time, like is described here.

With out the secondary default export the dts plugin works well as far as i know.

Relevant output of the failing build:

error TS2528: A module cannot have multiple default exports

for reproduction:

clone this repo at branch 'development'
npm install
open the component located under src/components/layout/VContainer.vue
add the following line of code at the bottom of the component:
<script lang="ts"> import { defineComponent } from 'vue'; export default defineComponent({ name: 'VuestrapedContainer', }); </script>
npm run build
Examine the output

Output files is out of the `include` bounds

Hello, is it possible to override value of specific properties in tsconfig.json?

Say you have this in your tsconfig:

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"]
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue", "lib/index.ts"]
}

and in your vite.config.ts

defineConfig({
  build: {
    lib: {
      entry: resolvePath('lib/index.ts'),
      name: 'sixty-nine',
      fileName: (format) => `sixty-nine.${format}.js`,
    },
    rollupOptions: {
      external: ['vue'],
      output: {
        globals: {
          vue: 'Vue'
        },
      },
    },
  },
  plugins: [
    dts({
      compilerOptions: {
        rootDir: resolvePath('lib'),
        exclude: resolvePath('node_modules/**'),
      },
    })
  ],
});

When building the library, I want to change

"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue", "lib/index.ts"]

"include": ["lib/index.ts"]

Is that possible? Thanks!

Publish v0.3.4

Hello and thank you for the library, which fixes a pain point of mine. You have released v0.3.4 but haven't published to npm since v0.3.1. I'm sure that's just an accident by your part. :)

resolve.alias doesn't work is this plugin

Hello !

It looks like aliases are not correctly transformed in d.ts files.. All the JavaScript code is ok. It's just my d.ts files.

Here my vite config :

import { defineConfig } from 'vitest/config'
import tsconfigPaths from 'vite-tsconfig-paths'
import react from '@vitejs/plugin-react'
import peerDepsExternal from 'rollup-plugin-peer-deps-external'
import dts from 'vite-plugin-dts'

const path = require('path')

// https://vitejs.dev/config/
export default defineConfig({
  test: {
    environment: 'jsdom',
    globals: true
  },
  build: {
    sourcemap: true,
    target: 'esnext',
    minify: false,
    lib: {
      entry: path.resolve(__dirname, 'src/index.tsx'),
      name: 'Mui-phone-number',
      fileName: format => `mui-phone-number.${format}.js`
    },
    rollupOptions: {
      output: {
        sourcemapExcludeSources: true,
        globals: {
          react: 'React',
          '@mui/material/InputAdornment': 'InputAdornment',
          '@mui/material/TextField': 'TextField',
          '@mui/material/IconButton': 'IconButton',
          '@mui/material/styles': 'styles',
          'react/jsx-runtime': 'jsxRuntime',
          '@mui/material/Menu': 'Menu',
          '@mui/material/MenuItem': 'MenuItem',
          '@mui/material/Typography': 'Typography',
          '@mui/material/ListItemIcon': 'ListItemIcon',
          '@mui/material/ListItemText': 'ListItemText'
        }
      }
    }
  },
  plugins: [
    peerDepsExternal(),
    react(),
    tsconfigPaths(),
    dts({
      insertTypesEntry: true
    })
  ]
})

Is anyone has the same issue ?

feat: work during --watch

Not sure if this is possible with how vite's --watch is set up, but would be great if this plugin worked during watch mode.

This would be helpful for building a library and testing it out (i.e. with yarn link) in a separate app at the same time. Right now, in watch mode the types are removed from the output after reloading.

打包提示[vite:dts] The argument 'path' must be a string or Uint8Array without null bytes. commonjsHelpers.js

Supporting non-primitives in generated types

Hello again :)

I'm developing a component, and one thing I've noticed that props are converted to primitives.

So this

Outputs

So seems that property with an interface

 someObjectProp: {
      boolProp: boolean
      stringProp: 'one' | 'two' | 'three'
 }

Gets compiled to

someObjectProp: {
       type: ObjectConstructor;
       required: true;
};

Wondering if this can be improved or is this vue/compiler-sfc limitation?
Thanks

设置 `insertTypesEntry: true` 后无法修改生成的类型入口文件的内容

在设置 insertTypesEntry：true后
我在beforeWriteFile 钩子中修改了生成目录结构。
然后默认生成的类型入口文件的内容无法修改，因为它不会进入到beforeWriteFile钩子里面

Typescript's type aliases are not resolved in Vue components

In my tsconfig.json file I specify the following path alias:

{
    "paths": {
      "~/*": ["src/*"]
    },
}

And then in a VueJS component I might import a dependencies like so:

import { TrueFalse, icon, isTrue } from "~/components/shared";

Vite compiles the source without issue and vite-plugin-dts also creates declaration files but as you can see below, the ~/ type alias is still present in the type which makes it unusable as an exported type file.

Historically, when using Rollup directly I have used a combination of the ts-patch npm module and the typescript-transform-paths module:

ts-patch - patches Typescript's tsc to allow it to use the Typescript plugin API
typescript-transform-paths addresses converting type aliases back to full file paths

With this done, you just add the plugins to your tsconfig.json file like so:

{
    "plugins": [
      // Transform paths in output .js files
      { "transform": "typescript-transform-paths" },

      // Transform paths for declarations files
      { "transform": "typescript-transform-paths", "afterDeclarations": true }
    ]
}

This works and I've never found a way to get TYPES to export using the alias Rollup plugin (which is what ViteJS uses I believe). In any case, I'd really like to run everything in ViteJS and your plugin "almost" works ... hoping we can get path aliases incorporated.

vue template: `<script lang="tsx">` generated `.js` source id, will trigger emitToMemory errors.

for .vue template file:

<script lang="tsx">
 ...
</script>

transform(code, id) generated .js source id, but source file should be .tsx/.jsx.

fixed by pull request #29

Warning js vue component

if there's at least one js vue component referenced, it would cause error when building.

maybe it should warn user check the type, or just ask user change "allowJs" option to true in tsconfig.json?

test:e2e error

SyntaxError: Unexpected token '.'
at wrapSafe (internal/modules/cjs/loader.js:1054:16)

读取tsconfig.json出错了

对应的tsconfig.json配置为

生成.d.ts时部分文件丢失

emm. 我又来了，如图

当前有这两个文件，且在对外暴露的index.ts文件中有引入

但构建之后丢失

composables/useForm.ts
types/form.ts

这两个文件。结果如下

demo

Exit process with non-0 exit code on error

Is it possible to somehow exit process with non-0 exit code when there's a type error? Worth doing it in CI for example

Unable to use in a monorepo (yarn workspaces)

The following line breaks the package in a monorepo setup:

https://github.com/qmhc/vite-plugin-dts/blob/main/src/index.ts#L162

Yarn (workspaces) puts the dependencies at the project root, and not besides each package (to reduce duplications).

I was able to "fix" this for our setup via the nohoist option in yarn.

Is there a reason for using resolve and not just a plain require('@vue/compiler-sfc)?

Cheers!

在`beforeWriteFile`改变生成路径后内部引用不正确

当项目结构如下

生成的项目中去掉packages 和src一层。生成的结果如下

而内部内容实际没有发生变化

Q：这个是否也需要在beforeWriteFile中自己修改对应文件的content中的内容？

由于没有找到讨论的地方，想问下支持vue3的tsx文件吗？

因为我需要做二次封装，可能有些组件要用到tsx

Couple of typescript related issues

I'm using vite for my vanilla typescript project along with this plugin. I found few bugs with this library,

When I build the project with this plugin, it leaves the converted javascript files in the disk as you can see in the project.

If I use a non relative path like /@/, then the emitted declarations includes incorrect path. For example,

I have constants.ts,

export enum Color {
    Red,
    Blue,
    Green
}

export const colors = new Array<Color>(Color.Red, Color.Blue, Color.Green)

And in main.ts I have following,

import { Color } from "/@/constants"

export default function viteProject(): Color {
    console.log(Color.Red)
    return Color.Red
}

Then the emitted declaration file has src/constants which is an incorrect path,

import { Color } from 'src/constants';
export default function viteProject(): Color;

Here's the source code: https://github.com/sanjade/js-bug

Types are being dropped if <script lang="ts"> is using defineComponent

Was struggling a lot to understand why at some points the types were gone. Then found out that is related to using defineComponents inside the script without setup.

This works as expected (as in example)

<script lang="ts">
  export default {
    name: 'BaseButton',
  }
</script>

However types are gone if the script without setup uses defineComponent

<script lang="ts">
  import { defineComponent } from 'vue'
  
  export default defineComponent({
    name: 'BaseButton',
  })
</script>

`.d.ts` source files don't through the `beforeWriteFile` hook

我想去掉一层= =

does not support Node.js 12

fs/promise is only available on Node.js 14 and above.

The engine verison requirment in package.json is not correct.

12 is still a supported version. I think it’s better to target 12 and above.

Thanks for great plug-in, anyway

Plugin not honouring `sourcemap: false`

It appears that the generated types files are still trying to create a source map link:

No .map files actually exist though, as I have chosen not to include source maps.

使用cjs导入dts组件报错，是还没有支持吗？

eg:
// build.js

const { defineConfig, build } = require('vite')
const dts = require('vite-plugin-dts')

const baseConfig = defineConfig({
    plugins: [ vue(), vueJsx(), dts() ]
})

then

dts doesn't resolve typescript paths on dts generation and wrong dts dist structure

Hello I'm trying to generate the .d.ts for my vite vue lib, but at the time that i inspect my dist folder i identify 2 problems so far:

the .ts based .d.ts such as index.d.ts doesn't resolve correctly the typescript paths. eg. '@/' path. So module not found problem raises at the import and export of anything.
The dist folder gets the intended declaration dir (in my case @types/), but have an incorrect folder structure for d.ts of my components. like copying the src/ dir inside. This maybe works alongside a correr path resolution buy i have no clue about it.

i have no idea if I'm misunderstanding something, or i have a wrong configuration for proper generation of types of my lib, so any advice is appreciated

For reproduction :

clone the repo: https://github.com/D4RKAR117/vuestraped at branch 'development'
npm install
npm run build
verify the generated dist directory and its inner structure

qmhc / vite-plugin-dts Goto Github PK

vite-plugin-dts's Issues

Recommend Projects

Recommend Topics

Recommend Org