#Svelte/TypeScript with args/autocomplete

4 messages · Page 1 of 1 (latest)

soft pelican
#

Hii, I am trying to get Storybook working with my Svelte components nicely, but I can't seem to get props inferred properly for using with args. I've tried multiple different examples I've found from googling but this is what I have atm.

My problems are:

  • in the render function, args is inferred as any
  • I get no autocomplete on args in the meta or story def

(I also tried satisfies Meta<typeof Toast> as per some docs, though I get an error saying that id isn't assignable to args at all)

Toast.stories.ts

import { action } from "@storybook/addon-actions";
import type { Meta, StoryObj } from "@storybook/svelte";
import Toast from "./Toast.svelte";

const meta = {
  component: Toast,
  tags: ["autodocs"],
  args: {
    id: "1",
  },
  render: (args) => ({
    Component: Toast,
    props: args,
    on: {
      close: action("close"),
    },
  }),
} satisfies Meta<Toast>;

export default meta;

type Story = StoryObj<typeof meta>;

export const Error = {
  args: {
    type: "error",
  },
} satisfies Story;```

and Toast.svelte:
```html
<script lang="ts">
  import { createEventDispatcher } from "svelte";
  import { fade } from "svelte/transition";
  import HappyBeamingIcon from "../icons/HappyBeaming.svelte";
  import LoadingAltIcon from "../icons/LoadingAlt.svelte";
  import SadIcon from "../icons/Sad.svelte";
  import ShockedIcon from "../icons/Shocked.svelte";
  import XIcon from "../icons/X.svelte";

  const dispatch = createEventDispatcher();

  export let id: string;
  export let type: "error" | "success" | "warning" | "loading";

  const close = () => {
    dispatch("close", id);
  };
</script>
soft pelican
#

I have set up a repro here because I thought it might be more helpful to click around and see what I'm seeing 😄 https://stackblitz.com/edit/github-aekucg?file=src%2Fstories%2FButton.stories.ts

so this is based on the svelte/typescript setup from storybook.new - I added the render fn and if you hover over args there you should be able to see it inferred as any and I also changed the label arg on the Primary story to be a boolean and it doesn't error or anything (I was expecting it to error)

simple remnant
#

It's a known limitation of the svelte docgen parser. It doesn't support typescript, only jsdoc

#

Oh sorry you're talking about the "render" function