Svelte 版 Storybook

Storybook，最流行的组件工作空间，即将迎来史上最大的一次 Svelte 升级。Storybook for Svelte 已被完全重构，并改进了体验的各个方面，从您编写 stories 的方式到底层实现。

新版本（Storybook 6.2）包含：

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

所有这些都是 Svelte 用户已经可用的庞大开发、测试和文档插件生态系统的补充。请继续阅读以了解新功能的完整介绍！

押注 Svelte

Storybook for Svelte (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 stories 的示例、常见配置的链接，以及与 Storybook 一起提供的“核心”插件。TypeScript 支持已内置。在官方文档中了解更多信息。

Svelte 原生格式

在 Storybook 中，story 是一个代码片段，用于在特定状态下渲染组件的示例。Storybook 现在为 Svelte 用户提供了一种原生的 story 格式，这意味着您可以使用您熟悉的、风格化的 Svelte SFC 语法来编写您的 stories。

<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}}/>

在底层，这些原生格式的 stories 会被编译成组件 story 格式 (CSF)，这是一种基于 ESM 的标准，用于便携、可重用的组件示例。这意味着新的 stories 与 Storybook 生态系统的其他部分 100% 兼容。

自动生成的控件和文档

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

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

它还产生了无需额外工作的组件文档，其中包含所有关键状态，以及从组件源提取的 props。

由于您的组件的控件和文档是自动生成的，因此它们始终是最新的，并且是根据源代码生成的。当组件的 API 发生变化时，您无需跟踪 UI 文档，Storybook 会为您完成。

非常适合 UI 测试

当你在 Storybook 中构建 UI 时，你就免费获得了测试。Storybook 围绕 stories 的概念展开，这些 stories 捕获了你的 UI 组件的支持状态。

在开发过程中，您可以手动确认您的 stories “看起来正确”，并使用一套插件在可访问性和移动友好性等方面测试您的 story。

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

测试你的 stories 非常有用，以至于多个商业服务集成了 Storybook 以在云端和跨浏览器运行测试。特别值得一提的是，由 Storybook 维护者创建的 Chromatic 与 Storybook 紧密集成，并提供免费的自动化发布和视觉差异比较。

更重要的是，你的 stories 可以跨工具移植。Storybook 开创了 Component Story Format，这是一个基于 JavaScript ES6 模块的组件示例开放标准。这允许你重复使用 stories 进行单元测试和端到端测试——无锁定。

200 多个插件可供选择

Storybook 多年来一直在改进其跨框架兼容性。这意味着 Storybook 的数百个插件几乎全部可供 Svelte 用户使用。插件可以解锁超能力，例如可访问性测试、设计交接集成、样式实用工具和网络请求模拟。

后续步骤

Storybook for Svelte 现已在 6.2 版本中提供。在项目的根目录中运行以下命令进行安装。然后查看更新的教程和参考文档。

npx sb init

升级现有项目

npx sb upgrade

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

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

• 通过可插拔构建器与 Svelte 构建工具更紧密的集成。
• MDX v2 发布后，将支持原生 Svelte MDX。

参与进来

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

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

要深入了解 Svelte，请查看 Mark Volkmann 的指南以及他包含 Storybook 的更长篇的图书。

如果您有兴趣贡献，请在 GitHub 上查看 Storybook，创建问题或提交拉取请求。在 Open Collective 上捐款。在 Discord 上与我们聊天 — 通常会有维护者在线。通过在 Twitter 和下方注册我们的邮件列表，及时了解 Storybook 的最新消息。