Svelte CSF

允许使用 Svelte 语法编写故事

在 Github 上查看

35k

每周下载量

Svelte 故事格式

允许你使用 .svelte 语法而不是 .js 语法来编写你的故事。

它支持

带参数的故事和不带参数的故事；
参数故事的 "模板" 模式，与 Svelte 语法兼容；
故事源代码的提取，并与 addon-sources 兼容
装饰器
旋钮、动作、控件
Storyshots（使用 @storybook/addon-svelte-csf/jest-transform 下提供的特殊 Jest 转换）

示例

有一个基本的按钮组件

<script>
  export let rounded = true;
</script>

<style>
  .rounded {
    border-radius: 35px;
  }

  button {
    border: 3px solid;
    padding: 10px 20px;
    background-color: white;
    outline: none;
  }
</style>

<button class="button" class:rounded on:click={onClick}>
  <slot />
</button>

以及一个 button.stories.svelte 文件

<script context="module">
  import Button from './Button.svelte';

  export const meta = {
    title: "Button",
    component: Button
  }
</script>

<script>
  import { Story, Template } from '@storybook/addon-svelte-csf';

  let count = 0;
  function handleClick() {
    count += 1;
  }
</script>

<Template let:args>
  <!--👇 'on:click' allows to forward event to addon-actions  -->
  <Button {...args} 
    on:click
    on:click={handleClick}>
    You clicked: {count}
  </Button>
</Template>

<Story name="Rounded" args={{rounded: true}}/>

<Story name="Square" source args={{rounded: false}}/>

<!-- Dynamic snippet should be disabled for this story -->
<Story name="Button No Args">
  <Button>Label</Button>
</Story>

动作会由 Storybook 自动注册。要使用此插件，你只需转发事件（在上面的示例中为 on:click）。

入门

npm install --save-dev @storybook/addon-svelte-csf 或 yarn add --dev @storybook/addon-svelte-csf
在 .storybook/main.js 中，将 @storybook/addon-svelte-csf 添加到插件数组中
在 .storybook/main.js 中，将 .stories.svelte 文件包含在你的故事模式中，例如，将模式更改为 '../src/**/*.stories.@(js|jsx|ts|tsx|svelte)'

一个 main.js 配置示例可能如下所示

module.exports = {
  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|svelte)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    '@storybook/addon-svelte-csf',
  ],
  framework: '@storybook/svelte-vite',
};