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.

#svelte #javascript #user interface #development #news