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 原生语法。

现在，Svelte 在 Storybook 中的支持真正达到了第一梯队水平，因此采用率也有所提高。@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 生态系统的其余部分完全兼容。

自动生成控件和文档

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

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

它还无需额外工作即可生成组件文档，其中包括所有关键状态，并从组件源代码中提取了 props：

你的组件的控件和文档始终是最新的，因为它们是根据源代码**自动生成**的。你无需在组件 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 文档支持由Ernie Francis添加。Svelte 支持最初由Gavin King贡献，并由Cameron Stitt升级到 Svelte 3。

要深入了解 Svelte，请查阅Mark Volkmann 的指南以及他篇幅更长、以 Storybook 为特色的书。

如果你有兴趣贡献，请访问 Storybook 的 GitHub，创建 issue 或提交 pull request。在Open Collective上捐赠。在Discord中与我们聊天——通常会有维护者在线。通过Twitter或订阅下方的邮件列表，及时了解 Storybook 的新闻。