# svelte-dts

> Typescript declaration generator for svelte with typescript

Latest version **0.3.7** (published 2022-04-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install svelte-dts
pnpm add svelte-dts
yarn add svelte-dts
bun add svelte-dts
```

Provides the command `svelte-dts`.

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.7 |
| Published | 2022-04-06 |
| First published | 2021-02-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 34.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 27 |
| Author | André Lins |
| Maintainers | andrelmlins |
| Keywords | svelte, dts, typescript, generator |

## Links

- npm: https://www.npmjs.com/package/svelte-dts
- Repository: https://github.com/andrelmlins/svelte-dts
- Issues: https://github.com/andrelmlins/svelte-dts/issues
- npm.io page: https://npm.io/package/svelte-dts

## Dependencies (3)

- [tmp](https://npm.io/package/tmp.md) ^0.2.1
- [commander](https://npm.io/package/commander.md) ^7.1.0
- [recursive-readdir](https://npm.io/package/recursive-readdir.md) ^2.2.2

## Alternatives

- [@openai/codex-sdk](https://npm.io/package/@openai/codex-sdk.md) — 731.4K weekly downloads
- [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) — 565.0K weekly downloads
- [babel-helper-remove-or-void](https://npm.io/package/babel-helper-remove-or-void.md) — 508.5K weekly downloads
- [@pnpm/store-controller-types](https://npm.io/package/@pnpm/store-controller-types.md) — 186.9K weekly downloads
- [react-native-signature-canvas](https://npm.io/package/react-native-signature-canvas.md) — 155.6K weekly downloads

## Recent versions

- 0.3.7 (latest) — 2022-04-06
- 0.3.6 — 2021-10-12
- 0.3.5 — 2021-08-25
- 0.3.4 — 2021-08-11
- 0.3.3 — 2021-08-06
- 0.3.2 — 2021-02-23
- 0.3.1 — 2021-02-22
- 0.3.0 — 2021-02-22
- 0.2.2 — 2021-02-21
- 0.2.1 — 2021-02-21
- 0.2.0 — 2021-02-21
- 0.1.1 — 2021-02-21
- 0.1.0 — 2021-02-20

## README

# Svelte dts

[![npm version](https://badge.fury.io/js/svelte-dts.svg)](https://www.npmjs.com/package/svelte-dts) • [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://github.com/andrelmlins/svelte-dts/blob/master/LICENSE) • [![Node.js CI](https://github.com/andrelmlins/svelte-dts/workflows/Node.js%20CI/badge.svg)](https://github.com/andrelmlins/svelte-dts/actions?query=workflow%3A%22Node.js+CI%22)

Typescript declaration generator for svelte with typescript. Create the declaration files for your library and project. These are the main characteristics of this library:

✨ CLI(Command-line interface)
<br />
✨ Rollup plugin
<br />
✨ Svelte and typescript files

## How it works?

The `svelte-dts` interpret the properties, events and slot properties in the svelte code, using typescript and svelte compiler. The `svelte-dts` too interpret typescript and declaration typescript code, and create default declarations for javascript code.

Observe the code of the `click-counter-button` library that has the `ClickCounterButton` component:

```html
<script lang="ts">
  import { createEventDispatcher } from 'svelte';

  export let initialNumber: number = 0;

  let dispatch = createEventDispatcher<{ change: number }>();
  let number = initialNumber;

  $: dispatch('change', number);
</script>

<button on:click={() => (number += 1)}>Cliques: {number}</button>
```

The result is the generated typescript declarations. Please note below:

```ts
import { SvelteComponentTyped } from 'svelte';

declare module 'click-counter-button' {
  interface ClickCounterButtonProps {
    initialNumber: number;
  }

  class ClickCounterButton extends SvelteComponentTyped<ClickCounterButtonProps, { change: CustomEvent<number> }, {}> {}

  export default ClickCounterButton;
}
```

## Installation

```
npm i svelte-dts
// OR
yarn add svelte-dts
```

## Using with rollup

```js
import typescript from '@rollup/plugin-typescript';
import svelte from 'rollup-plugin-svelte';
import autoPreprocess from 'svelte-preprocess';
import svelteDts from 'svelte-dts';

export default [
  {
    input: 'src/lib/App.svelte',
    external: ['svelte/internal'],
    plugins: [svelteDts(), svelte({ preprocess: autoPreprocess() }), typescript()],
  },
];
```

### Options

| Option       | Type       | Description              | Default                  |
| ------------ | ---------- | ------------------------ | ------------------------ |
| `output`     | `string`   | Declarations output file | The value of `pkg.types` |
| `extensions` | `string[]` | Valid Extensions         | .svelte, .ts, .js        |

## Using with cli

```sh
svelte-dts -i src/index.ts -o dist/index.d.ts
```

### Options

| Option                                 | Alias           | Description              |
| -------------------------------------- | --------------- | ------------------------ |
| <code>--input [input]</code>           | <code>-i</code> | App input file           |
| <code>--output [output]</code>         | <code>-o</code> | Declarations output file |
| <code>--extensions [extensions]</code> | <code>-e</code> | Valid Extensions         |

## NPM Statistics

Download stats for this NPM package

[![NPM](https://nodei.co/npm/svelte-dts.png)](https://nodei.co/npm/svelte-dts/)

## License

Svelte dts is open source software [licensed as MIT](https://github.com/andrelmlins/svelte-dts/blob/master/LICENSE).

---
_Source: https://npm.io/package/svelte-dts · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._