sveltyper

A tool to generate declaration files for Svelte component.

Usage no npm install needed!

<script type="module">
  import sveltyper from 'https://cdn.skypack.dev/sveltyper';
</script>

README

sveltyper

Version Documentation Maintenance License: MIT Twitter: TheComputerM

A tool to generate declaration files for Svelte component.

🏠 Homepage

Install

npm i -D sveltyper

Features

  • Lightweight
  • Can handle any type of CSS (like SASS,SCSS)
  • Can use export {prop1 as prop2} syntax
  • Can use export function doSomething() {} syntax
  • Can extract:
    • props
    • slots
    • forwarded events
    • dispatched events
    • $restProps
    • type definitions

Usage

JS API

const sveltyper = require("sveltyper");

sveltyper({
  // provide either the full path to the svelte file
  file: "full/path/to/file.svelte",

  // or provide string content and the filename,
  content: "<script> ... </script> Svelte file",
  filename: "App.svelte",
});

CLI

Make sure your package.json has an entrypoint in the svelte field and then run this command to generate type definitions in the types folder. This CLI is only optimized for simple packages, if you have a more complex usecase, please use the JS API to generate types.

sveltyper types

API Reference

It is just like sveld, but typedef can be shared across multiple files.

@type

Without a @type annotation, sveld will infer the primitive type for a prop:

export let kind = "primary";
// inferred type: "string"

Use the @type tag to explicitly document the type. In the following example, the kind property has an enumerated (enum) type.

Signature:

/**
 * Optional description
 * @type {Type}
 */

Example:

/**
 * Specify the kind of button
 * @type {"primary" | "secondary" | "tertiary"}
 */
export let kind = "primary";

@slot

Use the @slot tag for typing component slots.

Signature:

/**
 * @slot {Type} [slot name]
 */

Example:

<script>
  /**
   * @slot {{ prop: number; doubled: number; }}
   * @slot {{ props: { class?: string; } }} description
   */

  export let prop = 0;
</script>

<h1>
  <slot {prop} doubled={prop * 2} />
</h1>

<p>
  <slot name="description" props={{ class: $props.class }} />
</p>

@event

Use the @event tag for typing dispatched events. An event name must be specified.

Signature:

/**
 * @event {EventDetail} eventname
 */

Example:

/**
 * @event {{ key: string }} button:key
 */

export let key = "";

import { createEventDispatcher } from "svelte";

const dispatch = createEventDispatcher();

$: dispatch("button:key", { key });

@restProps

sveld can pick up inline HTML elements that $restProps is forwarded to. However, it cannot infer the underlying element for instantiated components.

You can use the @restProps tag to explicitly define element tags that $restProps is forwarded to.

Signature:

/**
 * Single element
 * @restProps {tagname}
 *
 * Multiple elements
 * @restProps {tagname-1 | tagname-2 | tagname-3}
 */

Example:

<script>
  /** @restProps {h1 | button} */
  export let edit = false;

  import Button from "../";
</script>

{#if edit}
  <Button {...$restProps} />
{:else}
  <h1 {...$restProps}><slot /></h1>
{/if}

@typedef

The @typedef tag can be used to define a common type that is used multiple times within a your component and can be shared with multiple files.

Signature:

/**
 * @typedef {Type} TypeName
 */

Example:

A.svelte

/**
 * @typedef {string} AuthorName
 * @typedef {{ name?: AuthorName; dob?: string; }} Author
 */

/** @type {Author} */
export let author = 'Oda';

/** @type {Author[]} */
export let authors = [];

B.svelte

/** @type {Author} */
export let whoIsAuthor = 'Murata';

Run tests

npm t

Author

👤 TheComputerM

🤝 Contributing

Contributions, issues and feature requests are welcome!
Feel free to check issues page. You can also take a look at the contributing guide.

Show your support

Give a ⭐️ if this project helped you!

📝 License

Copyright © 2021 TheComputerM.
This project is MIT licensed.

This README was generated with ❤️ by readme-md-generator