storybookjs / addon-svelte-csf

[Incubation] CSF using Svelte components.
MIT License
98 stars 29 forks source link

Request: typescript usage examples #162

Open Masstronaut opened 6 months ago

Masstronaut commented 6 months ago

The docs don't have great examples demonstrating how to use the svelte CSF with typescript support. as an example, with <Meta> now deprecated in favor of

<script context="module">
export const meta = { //... 
}
</script>

It would be great to have an example of how to correctly type this (and possibly add the necessary typescript typings as well). I would imagine it should look something like this, but as far as I can tell there is only MetaProps which is not a generic so isn't really type safe for a specific component (ie args):

<script context="module" lang="ts">
import type {MetaProps} from "@storybookjs/addon-svelte-csf"
import MyComponent from "./MyComponent.svelte"
export const meta = ({
 // ...
}) satisfies MetaArgs<MyComponent>;
</script>

If someone can point me to the right type I'm happy to make a PR for the docs changes myself.

Similarly, it would be great to have a generic typing for StoryProps for the same reason.

sacrosanctic commented 5 months ago
<script context="module" lang="ts">
import type { Meta } from '@storybook/svelte'
import MyComponent from './MyComponent.svelte'

export const meta: Meta = {
  // ...
}
</script>

Is this the same thing?

xeho91 commented 1 month ago
<script   context="module" lang="ts">
import type { Meta } from '@storybook/svelte'
import MyComponent from './MyComponent.svelte'

export const meta: Meta = {
  // ...
}
</script>

Is this the same thing?

Late to the party, but the correct usage would be:

<script context="module" lang="ts">
import type { Meta } from '@storybook/svelte'
import MyComponent from './MyComponent.svelte'

- export const meta: Meta = {
+ export const meta = {
  // ...
- }
+ } satisfies Meta<MyComponent>;
</script>