Svelte 的 Storybook

Storybook，最受欢迎的组件工坊，即将迎来其 Svelte 有史以来最大的升级。Svelte 的 Storybook 已经完全重新设计，从您编写故事的方式到底层实现，都改进了用户体验的方方面面。

新版本在 Storybook 6.2 中提供，包括

• 🎁 零配置设置，内置 TypeScript 支持
• 📝 用于捕获组件状态的 Svelte 原生故事格式
• 🎛 自动生成的控件和文档
• 📚 更新的教程和文档

除了已经提供给 Svelte 用户的庞大的开发、测试和文档插件生态系统之外，所有这些都包含在内。请继续阅读以全面了解新功能！

押注 Svelte

Svelte 的 Storybook (SB Svelte) 于 2018 年首次发布，并于 2019 年针对 Svelte 3 进行了更新。它一直在稳步增长，但直到最近才在 Storybook 中获得基本支持。

这一切都在改变。首先，Ernie Francis 在 SB6.1 中添加了自动文档支持。然后 Jérémie Brébec 全面改进了整个软件包，记录了它，并发布了用于组件示例的原生 Svelte 语法。

现在 Storybook 中的 Svelte 支持真正成为一流，因此采用率也随之增长。现在，@storybook/svelte 的 NPM 下载量占 Svelte 总用量的 10% 以上。Svelte 非常出色，我们很自豪能押注其持续成功。

零配置设置

要开始使用，请在现有 Svelte 项目的根目录中运行以下命令

npx sb init

这会检测项目类型，安装 @storybook/svelte，并添加一些示例文件来演示 Storybook 的基本知识。运行 yarn storybook 会为您提供以下零配置设置

当您在本地导航到 Storybook 时，您将看到如何编写 Svelte 故事的示例，常见配置的链接，以及随 Storybook 提供的“基本”插件。内置 TypeScript 支持。在官方文档中了解更多信息。

Svelte 原生格式

在 Storybook 中，故事是代码片段，用于呈现特定状态下组件的示例。Storybook 现在为 Svelte 用户提供了一种原生故事格式，这意味着您可以使用您习惯的相同风格化的 Svelte SFC 语法编写故事。

<script>
  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
  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}}/>

在底层，这些原生格式的故事被编译为组件故事格式 (CSF)，这是一种基于 ESM 的标准，用于可移植、可重用的组件示例。这意味着新故事与 Storybook 生态系统的其余部分 100% 兼容。

自动生成的控件和文档

Storybook 从 Svelte 编译器读取 docgen 信息，以根据您的故事和组件自动生成控件和文档。

上一节中的示例可能会生成以下 UI，用于交互式探索您的组件状态

它还在无需额外工作的情况下生成组件文档，其中包括使用从组件源代码中提取的属性布局的所有关键状态

您的组件的控件和文档始终是最新的，因为它们是从源代码自动生成的。您无需在组件的 API 发生更改时跟踪 UI 文档，Storybook 会为您完成这项工作。

非常适合 UI 测试

当您在 Storybook 中构建 UI 时，您可以免费获得测试。Storybook 围绕故事的概念展开，这些故事捕获了 UI 组件的受支持状态。

在开发中，您可以手动确认您的故事“看起来正确”，并使用一套插件在其他维度（如可访问性和移动设备友好性）中测试您的故事。

在持续集成中，您可以使用快照和可视化测试分别自动检测故事中的结构和视觉变化。

测试您的故事非常有用，以至于多家商业服务与 Storybook 集成，以在云端和跨浏览器运行测试。值得注意的是，由 Storybook 维护者创建的Chromatic与 Storybook 紧密集成，并提供免费的自动化发布和可视化差异。

更重要的是，您的故事可以在各种工具之间移植。Storybook 开创了组件故事格式，这是一种基于 JavaScript ES6 模块的组件示例开放标准。这允许您为单元测试和端到端测试重用故事 – 无需锁定。

200 多个插件可供选择

多年来，Storybook 一直在改进其跨框架兼容性。这意味着几乎所有 Storybook 的数百个插件都可供 Svelte 用户使用。插件解锁了诸如可访问性测试、设计交付集成、样式实用程序和模拟网络请求等超能力。

下一步

Svelte 的 Storybook 现在在 6.2 版本中可用。通过在项目根目录中运行以下命令来安装它。然后查看更新的教程和参考文档。

npx sb init

要升级现有项目

npx sb upgrade

Svelte 原生格式自动包含在全新安装中，但对于升级，您需要手动安装它。

我们已经为 Svelte 计划了重大改进，包括

• 使用可插拔构建器与 Svelte 构建工具更紧密的集成
• 一旦 MDX v2 发布，即可提供原生 Svelte MDX 支持

参与进来

Storybook 由 1,250 多名开源贡献者维护，并由顶级维护者的指导委员会指导。

Svelte 的 Storybook 由 Jérémie Brébec 维护，他负责本文中描述的大部分升级。Svelte 原生语法最初由 rixo 提出。Storybook Docs 支持由 Ernie Francis 添加。Svelte 支持最初由 Gavin King 贡献，并由 Cameron Stitt 升级到 Svelte 3。

要深入了解 Svelte，请查看 Mark Volkmann 的指南以及他的更长的著作，其中介绍了 Storybook。

如果您有兴趣贡献，请在 GitHub 上查看 Storybook，创建 issue 或提交 pull request。在 Open Collective 上捐款。在 Discord 中与我们聊天 — 通常有一位维护人员在线。在 Twitter 上并注册我们的邮件列表，以随时了解 Storybook 的新闻。