https://github.com/andrelmlins/svelte-dts

Typescript declaration generator for svelte with typescript
https://github.com/andrelmlins/svelte-dts

cli declaration-typescript generator rollup svelte transpiler typscript

Last synced: about 2 hours ago
JSON representation

Typescript declaration generator for svelte with typescript

• Host: GitHub
• URL: https://github.com/andrelmlins/svelte-dts
• Owner: andrelmlins
• License: mit
• Created: 2021-02-20T23:46:22.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2022-04-06T01:37:22.000Z (over 2 years ago)
• Last Synced: 2024-10-29T00:59:14.522Z (19 days ago)
• Topics: cli, declaration-typescript, generator, rollup, svelte, transpiler, typscript
• Language: TypeScript
• Homepage:
• Size: 93.8 KB
• Stars: 28
• Watchers: 2
• Forks: 3
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

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)




✨ Rollup plugin




✨ 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

  import { createEventDispatcher } from 'svelte';

  export let initialNumber: number = 0;

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

  let number = initialNumber;

  $: dispatch('change', number);

 (number += 1)}>Cliques: {number}

```

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 }, {}> {}

  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              |

| -------------------------------------- | --------------- | ------------------------ |

| --input [input]           | -i | App input file           |

| --output [output]         | -o | Declarations output file |

| --extensions [extensions] | -e | 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).