Needlessly Postulating Minds

    svelte-type-generator

    1.1.0 • Public • Published

    svelte-type-generator

    Repository Version Downloads/week License

    A tool to generate Typescript-Declarations for your svelte-components.

    Limitations

    • this only supports lang=ts components

    Installation

    pnpm

    pnpm install --dev svelte-type-generator

    yarn

    yarn add --dev svelte-type-generator

    npm

    npm install --save-dev svelte-type-generator

    Usage

    Just configure typescript in tsconfig.json as you normally would, eg:

    {
      /* ... */
      "compilerOptions": {
        "declarations": true,
        "declarationDir": "types"
      },
      "include": ["src/***/*.svelte"]
      /* ... */
    }

    Then run svelte-type-generator eg. in a package.json-script

    Examples

    Button.svelte:

    <script context="module" lang="ts">
      export type ButtonSize = 'small' | 'medium' | 'large';
    </script>
    
    <script lang="ts">
      /** button size */
      export let size: ButtonSize = 'small';
      /** whether the button is disabled */
      export let disabled = false;
    
      let clickCount: number = 0;
    
      function handleClick() {
        clickCount += 1;
      }
    </script>
    
    <button class="size-{size}" class:disabled on:click={handleClick} on:click>
      <slot />
      <slot name="named-slot" {clickCount} />
    </button>

    Resulting Button.svelte.d.ts:

    import { SvelteComponentTyped } from 'svelte';
    export declare type ButtonSize = 'small' | 'medium' | 'large';
    export default class Button extends SvelteComponentTyped<
      ButtonProps,
      ButtonEvents,
      ButtonSlots
    > {}
    declare const propDef: {
      props?: {
        /** button size */ size?: ButtonSize;
        /** whether the button is disabled */ disabled?: boolean;
      };
      events?: {
        click: MouseEvent;
      } & {
        [evt: string]: CustomEvent<any>;
      };
      slots?: {
        default: {};
        'named-slot': {
          clickCount: number;
        };
      };
    };
    export declare type ButtonProps = typeof propDef.props;
    export declare type ButtonEvents = typeof propDef.events;
    export declare type ButtonSlots = typeof propDef.slots;
    export {};

    Related Work

    Install

    npm i svelte-type-generator

    DownloadsWeekly Downloads

    7

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    16.6 kB

    Total Files

    6

    Last publish

    Collaborators

    • material-svelte-bot