Portable stories - Create compose functions for Svelte

[yannbf]

Currently there are testing APIs (composeStory, composeStories, setProjectAnnotations) for React and Vue3, but not for Svelte.

Here's a reference on how it's done for Vue3:
https://github.com/storybookjs/storybook/blob/4a6df46b1ab32fa9f8c2b82703a235b158460b14/code/renderers/vue3/src/testing-api.ts

And React:
https://github.com/storybookjs/storybook/blob/645439adfbb543b5dadb28a471f2da7166c1c6b1/code/renderers/react/src/testing-api.ts

[theetrain]

Hello, I saw this in the docs and I'm confused about this part in the example:

import { test, expect } from 'vitest';
import { screen } from '@testing-library/svelte';
import { composeStories } from '@storybook/svelte';
 
// Import all stories and the component annotations from the stories file
import * as stories from './Button.stories';
 
// Every component that is returned maps 1:1 with the stories,
// but they already contain all annotations from story, meta, and project levels
const { Primary, Secondary } = composeStories(stories);

What does Primary look like in this example's Button.stories.svelte? Also is the .svelte extension needed as part of the import?

– https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#composestories

[JReinhold]

This feature is currently only supported with .stories.ts files (even in Svelte), and not with .stories.svelte from the Svelte CSF addon. Were hoping to tackle that in the next minor release. See storybookjs/addon-svelte-csf#213