Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Request: typescript usage examples #162

Open
Masstronaut opened this issue Dec 21, 2023 · 2 comments
Open

Request: typescript usage examples #162

Masstronaut opened this issue Dec 21, 2023 · 2 comments
Labels
enhancement New feature or request

Comments

@Masstronaut
Copy link

Masstronaut commented Dec 21, 2023

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.

@Masstronaut Masstronaut added the bug Something isn't working label Dec 21, 2023
@JReinhold JReinhold added enhancement New feature or request and removed bug Something isn't working labels Jan 23, 2024
@sacrosanctic
Copy link

<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
Copy link
Collaborator

xeho91 commented May 25, 2024

<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>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

4 participants