Storybook for Svelte, the Svelte version of the Storybook component explorer, recently announced major upgrades that strive to improve the developer experience around authoring, maintaining, and documenting components’ stories. The new beta release auto-generates controls and documentation from a new Svelte-native story format that captures component states.
Storybook now has a Svelte-native story format that allows showcasing a component in a series of states:
<script>
import { Meta, Template, Story } from '@storybook/svelte';
import Button from './Button.svelte';
</script>
<Meta title="Button" component={Button}/>
<Template let:args>
<Button {...args}/>
</Template>
<Story name=”Primary” args={{primary: true}}/>
<Story name=”Secondary” args={{primary: false}}/>
The previous code sample provided by the release note illustrates that the story syntax follows Svelte single-file component syntax closely. Specific storybook add-ons are imported to declaratively describe a component and its associated stories. The previous code sample has two stories (Primary and Secondary) for a button component (component={Button}) that will appear with the Button descriptor in the Storybook interface (title="Button"). The Svelte-native story format is compiled down to the common Component Story Format (CSF) promoted by Storybook for portable, reusable component examples.
The compiler additionally generates an interactive playground and documentation that are automatically imported into the component Storybook. The release note provides the following example of an automatically generated interactive playground:
The new release also strives to provide easier and faster onboarding with zero-config setups, and updated tutorials and documentation. The new productivity-oriented features appear in line with the write less code Svelte mantra. The automatic generation of component documentation may result in components and their documentation being kept in sync with little or no effort from developers. The Storybook team explained the value of automatically generated interactive component playgrounds as follows:
Components are complicated. It’s hard to predict how a component will react to different values and write stories for all meaningful combinations. So it’s super useful to be able to explore the state space interactively.
The first release of Storybook for Svelte occurred in 2018, with a subsequent upgrade to Svelte 3 in 2019. With the increase of popularity of Svelte, members of the Svelte community set out to extend the previous basic support with productivity-oriented features.
Storybook is available under the MIT open-source license. Contributions are welcome via the Storybook GitHub project and should follow Storybook’s contribution guidelines and code of conduct.
