Lib mode should export types

[nihalgonsalves]

Clear and concise description of the problem

Previous issues: #2049, #2989

To provide a better experience for our users, lib mode should automatically generate TypeScript definitions, and not require additional setup.

Suggested solution

Alternative

Workarounds:

• @keelii https://github.com/vitejs/vite/issues/2989#issuecomment-820914375

  {
  "build:types": "tsc -m amd -t ESNext -d --isolatedModules false  --moduleResolution node --esModuleInterop --jsx react --outFile dist/index.js src/main.ts && rm -rf dist/index.js "
  }

• @sanjade https://github.com/vitejs/vite/issues/2989#issuecomment-826064324

  {
  "build": "tsup index.ts --format esm,cjs,iife --dts --minify"
  }

Additional context

[colgin]

@nihalgonsalves both workarounds doesn't work with .vue file. Add rollup-plugin-typescript2 to vite.config.js can generate type with .ts and .vue files.

import path from 'path'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import ts2 from 'rollup-plugin-typescript2'

export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
    {
      ...ts2({
        check: true,
        tsconfig: path.resolve(__dirname, `tsconfig.json`), // your tsconfig.json path
        tsconfigOverride: {
          compilerOptions: {
            sourceMap: false,
            declaration: true,
            declarationMap: false
          },
        }
      }),
      enforce: 'pre'
    }
  ],
  // ... other config
})

[harrytran998]

@nihalgonsalves both workarounds doesn't work with .vue file. Add rollup-plugin-typescript2 to vite.config.js can generate type with .ts and .vue files.

import path from 'path'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import ts2 from 'rollup-plugin-typescript2'

export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
    {
      ...ts2({
        check: true,
        tsconfig: path.resolve(__dirname, `tsconfig.json`), // your tsconfig.json path
        tsconfigOverride: {
          compilerOptions: {
            sourceMap: false,
            declaration: true,
            declarationMap: false
          },
        }
      }),
      enforce: 'pre'
    }
  ],
  // ... other config
})

Its doesn't work bro :(. I tried and ... Its my github repo link --> https://github.com/harrytran998/rep-vite-bunlder-vue-ts

[colgin]

repo

1. Move the tsPlugin from rollupOptions.plugin to plugins, and specify enfore as 'pre'
2. There are some issues with rollup-plugin-typescript2 and pnpm, use npm or yarn instead

[Shinigami92]

We decided that we don't want to support emitting declaration files, due to we would need to rely/depend on typescript, and we don't want that dependency. So we need to find at least a workaround for everyone and we may create some helping documentations.

But it would not be an out-of-the-box solution.

[aleclarson]

due to we would need to rely/depend on typescript, and we don't want that dependency.

A direct dependency isn't required, since we can use resolve to find typescript from the project root. Regardless, we still think this use case should be handled in a userland plugin, if anything. We'd like to avoid the maintenance burden and subtle complexities introduced by declaration bundling. Someone in the community will hopefully create a plugin if the mentioned workarounds are insufficient.

[qmhc]

I made a plugin vite-plugin-dts to generate d.ts for lib.

[vvo]

I was building a custom React component and wanted to:

• use vite for local dev: great environment
• publish the library to be consumed in a Next.js application
• export types
• even develop locally (yarn link)

Here's how I solved it:

package.json

{
  "type": "module",
  "files": [
    "dist"
  ],
  "types": "./dist/index.d.ts",
  "main": "./dist/index.js",
  "scripts": {
    "dev": "vite",
    "build": "tsup src/index.tsx --dts --legacy-output",
    "serve": "vite preview"
  },
}

And then:

npm run build
npm run build -- --watch

TADA! 🎉

Few notes:

• tsup is the only way that was super fast/reliable/working first hand, all other solutions (tsc, tsconfig changes, ...) were not working or were generating weird stuff. I would have loved for vite to have a complete TypeScript library mode that would output the only necessary right types has tsup is doing.

[aleclarson]

@vvo Did you try using the Vite plugin that @qmhc made?

I made a plugin vite-plugin-dts to generate d.ts for lib.

[vvo]

@aleclarson I had a look at the plugin but saw that the options were related to Vue. Since I am writing a React application I stopped there.

From the README:

A vite plugin that generate .d.ts file from containing .vue files base on ts-morph.

[qmhc]

@vvo My engilsh is not good, may be some vague in my description. I mean these files can including .vue files, is optional.

Now I am thinking about whether I need to make some special for react in the plugin, because I rarely use react in recent, I am uncertain.

I would appreciate if you can take a try in your project and give me some feedback.

[aleclarson]

Introducing vite-dts

I've just published vite-dts, which works on the assumption that you publish your ./src folder to NPM. For this reason, it has zero impact on build performance. See the demo for more info.

[tsanyqudsi]

@aleclarson I had a look at the plugin but saw that the options were related to Vue. Since I am writing a React application I stopped there.

From the README:

A vite plugin that generate .d.ts file from containing .vue files base on ts-morph.

I'm currently using it for publishing an npm package and it works flawlessly, kudos to @qmhc ...

[github-actions[bot]]

This issue has been locked since it has been closed for more than 14 days.

If you have found a concrete bug or regression related to it, please open a new bug report with a reproduction against the latest Vite version. If you have any other comments you should join the chat at Vite Land or create a new discussion.