npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vite-plugin-dts-svelte

v2.0.0

Published

<h1 align="center">vite-plugin-dts</h1>

Downloads

20

Readme

English | 中文

Install

pnpm i vite-plugin-dts -D

Usage

In vite.config.ts:

import { resolve } from 'path'
import { defineConfig } from 'vite'
import dts from 'vite-plugin-dts'

export default defineConfig({
  build: {
    lib: {
      entry: resolve(__dirname, 'src/index.ts'),
      name: 'MyLib',
      formats: ['es'],
      fileName: 'my-lib'
    }
  },
  plugins: [dts()]
})

In your component:

<template>
  <div></div>
</template>

<script lang="ts">
// using defineComponent for inferring types
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'Component'
})
</script>
<script setup lang="ts">
defineProps<{
  color: 'blue' | 'red'
}>()
</script>

<template>
  <div>{{ color }}</div>
</template>

FAQ

Here are some FAQ's and solutions.

Missing some declaration files after build (before 1.7.0)

By default, the skipDiagnostics option is set to true which means type diagnostic will be skipped during the build process (some projects may have diagnostic tools such as vue-tsc). If there are some files with type errors which interrupt the build process, these files will not be emitted (declaration files won't be generated).

If your project doesn't use type diagnostic tools, you can set skipDiagnostics: false and logDiagnostics: true to turn on diagnostic and logging features of this plugin. It will help you check the type errors during build and log error information to the terminal.

Type error when using both script and setup-script in Vue component (before 3.0.0)

This is usually caused by using the defineComponent function in both script and setup-script. When vue/compiler-sfc compiles these files, the default export result from script gets merged with the parameter object of defineComponent from setup-script. This is incompatible with parameters and types returned from defineComponent, which results in a type error.

Here is a simple example. You should remove the defineComponent which in script and export a native object directly.

Type errors that are unable to infer types from packages in node_modules

This is an existing issue when TypeScript infers types from packages located in node_modules through soft links (pnpm). Please refer to this TypeScript issue. The current workaround is to add baseUrl to your tsconfig.json and specify the paths for these packages:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "third-lib": ["node_modules/third-lib"]
    }
  }
}

Options

import type ts from 'typescript'
import type { LogLevel } from 'vite'

interface TransformWriteFile {
  filePath?: string
  content?: string
}

export interface PluginOptions {
  /**
   * Specify root directory
   *
   * By Default it base on 'root' of your Vite config, or `process.cwd()` if using Rollup
   */
  root?: string

  /**
   * Specify declaration files output directory
   *
   * Can be specified a array to output to multiple directories
   *
   * By Default it base on 'build.outDir' of your Vite config, or `outDir` of tsconfig.json if using Rollup
   */
  outDir?: string | string[]

  /**
   * Manually set the root path of the entry files, useful in monorepo
   *
   * The output path of each file will be calculated base on it
   *
   * By Default it is the smallest public path for all files
   */
  entryRoot?: string

  /**
   * Strictly restrict declaration files output inside `outDir`
   *
   * Because if `entryRoot` is specified, declaration files maybe outside `outDir`
   *
   * @default true
   */
  strictOutput?: boolean

  /**
   * Specify a CompilerOptions to override
   *
   * @default null
   */
  compilerOptions?: ts.CompilerOptions | null

  /**
   * Specify tsconfig.json path
   *
   * Plugin also resolve include and exclude files from tsconfig.json
   *
   * By default plugin will find config form root if not specify
   */
  tsconfigPath?: string

  /**
   * Set which paths should exclude when transform aliases
   *
   * If it's regexp, it will test the original import path directly
   *
   * @default []
   */
  aliasesExclude?: (string | RegExp)[]

  /**
   * Whether transform file name '.vue.d.ts' to '.d.ts'
   *
   * @default false
   */
  cleanVueFileName?: boolean

  /**
   * Whether transform dynamic import to static
   *
   * Force `true` when `rollupTypes` is effective
   *
   * eg. `import('vue').DefineComponent` to `import { DefineComponent } from 'vue'`
   *
   * @default false
   */
  staticImport?: boolean

  /**
   * Manual set include glob
   *
   * By Default it base on `include` option of the tsconfig.json
   */
  include?: string | string[]

  /**
   * Manual set exclude glob
   *
   * By Default it base on `exclude` option of the tsconfig.json, be `'node_module/**'` when empty
   */
  exclude?: string | string[]

  /**
   * Whether remove those `import 'xxx'`
   *
   * @default true
   */
  clearPureImport?: boolean

  /**
   * Whether generate types entry file
   *
   * When `true` will from package.json types field if exists or `${outDir}/index.d.ts`
   *
   * Force `true` when `rollupTypes` is effective
   *
   * @default false
   */
  insertTypesEntry?: boolean

  /**
   * Set whether rollup declaration files after emit
   *
   * Power by `@microsoft/api-extractor`, it will start a new program which takes some time
   *
   * @default false
   */
  rollupTypes?: boolean

  /**
   * Bundled packages for `@microsoft/api-extractor`
   *
   * @default []
   * @see https://api-extractor.com/pages/configs/api-extractor_json/#bundledpackages
   */
  bundledPackages?: string[]

  /**
   * Whether copy .d.ts source files into `outDir`
   *
   * @default false
   * @remarks Before 2.0 it defaults to true
   */
  copyDtsFiles?: boolean

  /**
   * Specify the log level of plugin
   *
   * By Default it base on 'logLevel' option of your Vite config
   */
  logLevel?: LogLevel

  /**
   * Hook after diagnostic emitted
   *
   * According to the length to judge whether there is any type error
   *
   * @default () => {}
   */
  afterDiagnostic?: (diagnostics: readonly ts.Diagnostic[]) => void | Promise<void>

  /**
   * Hook before each declaration file is written
   *
   * You can transform declaration file's path and content through it
   *
   * The file will be skipped when return exact `false`
   *
   * @default () => {}
   */
  beforeWriteFile?: (filePath: string, content: string) => void | false | TransformWriteFile

  /**
   * Hook after built
   *
   * It wil be called after all declaration files are written
   *
   * @default () => {}
   */
  afterBuild?: () => void | Promise<void>
}

Contributors

Thanks for all the contributions!

Example

Clone and run the following script:

pnpm run test:ts

Then check examples/ts/types.

Also Vue and React cases under examples.

A real project using this plugin: Vexip UI.

License

MIT License.