Sveltekit typescript component bug

[gzimbron]

Describe the bug
Autogeneration of properties,events and slots doenst work when I user: "export let varName: string;"

Icon.stories.svelte:

<script>
  import Icon from '$components/Icon.svelte';
  import { Meta, Story, Template } from '@storybook/addon-svelte-csf';
</script>

<Meta component={Icon} />

<Template let:args>
  <Icon {...args} />
</Template>

<Story
  name="Person"
  args={{
    icon: 'person',
  }}
/>
<Story
  name="Arrow Left"
  args={{
    icon: 'arrow_left',
  }}
/>

Autogeneration working Component :
Icon.svelte

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

  export let icon = '';
  export let size = '';
  export let color = '';
  export let cursor = '';
  export let bold = false;

  const dispatch = createEventDispatcher();

  const click = () => {
    dispatch('click');
  };
</script>

<span
  class:material-icons={icon}
  style:cursor
  style:color
  style:font-weight={bold ? 'bold' : 'normal'}
  style:--icon-size={size}
  on:click={click}
>
  {icon}
</span>

<style>
  /* @import 'https://fonts.googleapis.com/icon?family=Material+Icons'; */

  @font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url('/MaterialIcons-Regular.ttf') format('truetype');
  }

  .material-icons {
    width: var(--icon-size);
    height: var(--icon-size);
    font-size: var(--icon-size);
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    display: inline-block;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;

    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;

    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;

    /* Support for IE. */
    font-feature-settings: 'liga';
  }
</style>

result:

Autogeneration NOT working Component:
Icon.svelte

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

  export let icon: string;
  export let size = '';
  export let color = '';
  export let cursor = '';
  export let bold = false;

  const dispatch = createEventDispatcher();

  const click = () => {
    dispatch('click');
  };
</script>

<span
  class:material-icons={icon}
  style:cursor
  style:color
  style:font-weight={bold ? 'bold' : 'normal'}
  style:--icon-size={size}
  on:click={click}
>
  {icon}
</span>

<style>
  /* @import 'https://fonts.googleapis.com/icon?family=Material+Icons'; */

  @font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url('/MaterialIcons-Regular.ttf') format('truetype');
  }

  .material-icons {
    width: var(--icon-size);
    height: var(--icon-size);
    font-size: var(--icon-size);
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    display: inline-block;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;

    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;

    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;

    /* Support for IE. */
    font-feature-settings: 'liga';
  }
</style>

result:

[analubarreto]

+1 I have a similar issue I'm using the latest prerelese version.

[j3rem1e]

Storybook uses sveltedoc-parser for extracting component docs and properties.
It doesn't support typescript now : KatChaotic/sveltedoc-parser#34

[IanVS]

Hi, we can track this issue in #15891.