Add prop typings to mount for Svelte and Vue3

[greptile-apps[bot]]

To add prop typings to the mount function for Svelte and Vue3, follow these steps:

1. Svelte:

   • Update the mount function in /code/renderers/svelte/src/mount.ts to include prop typings.

     
     import { type StoryContext, type SvelteRenderer } from './public-types';
     import { type BaseAnnotations } from '@storybook/types';

   interface SvelteProps { }

   export const mount: BaseAnnotations['mount'] = (context: StoryContext) => { return async (Component, options: { props?: SvelteProps }) => { if (Component) { context.originalStoryFn = () => ({ Component, props: options?.props, }); } await context.renderToCanvas(); return context.canvas; }; };

2. Vue3:

   • Update the mount function in the relevant Vue3 file to include prop typings. Refer to the existing prop definitions in /code/renderers/vue3/template/stories_vue3-vite-default-ts/component-meta/options-api/component.ts for guidance.

     
     import { defineComponent, h } from 'vue';

   interface VueProps { numberDefault?: number; objectDefault?: { foo: string }; arrayDefault?: number[]; complexDefault?: any[]; }

   export default defineComponent({ emits: { submit: ({ email, password }: SubmitPayload) => { if (email && password) { return true; } return false; }, }, props: { numberDefault: { type: Number, default: 42, }, objectDefault: { type: Object, default: () => ({ foo: 'bar' }), }, arrayDefault: { type: Array, default: () => [1, 2, 3], }, complexDefault: { type: Array, default: (props: any) => { if (props.arrayDefault.length > props.numberDefault) { return []; } return undefined; }, }, }, render() { return h('pre', JSON.stringify(this.$props, null, 2)); }, });

References

/code/renderers/svelte/src/mount.ts /code/renderers/vue3/template/stories_vue3-vite-default-ts/component-meta/options-api/component.ts /code/renderers/vue3/template/stories_vue3-vite-default-ts/component-meta/reference-type-props /code/renderers/vue3/template/stories_vue3-vite-default-ts/component-meta

#### About Greptile

This response provides a starting point for your research, not a precise solution. Help us improve! Please leave a 👍 if this is helpful and 👎 if it is irrelevant. [Ask Greptile](https://app.greptile.com/chat/github/storybookjs/storybook/next) · [Edit Issue Bot Settings](https://app.greptile.com/apps/github)