Storybook 8.4

Storybook 是构建、测试和文档化 UI 组件的行业标准工作台。每周有成千上万的开发者使用它，包括 Volvo、Netflix 和 Chewy 的团队。

在 Storybook 8.4 中，我们为在浏览器中测试和调试前端测试创建了最佳的 DX（开发者体验）。它建立在我们与 Vitest 合作进行的组件测试工作之上。

• ▶️ 浏览器中一键组件测试
• 🫧 捆绑包大小缩小 50%，lockfile 缩小 75%
• 5️⃣ Svelte 5 和 Svelte CSF
• ⚛️ React Native Storybook 8
• 🏷️ 故事标记和筛选
• 💯 数百项更多改进

一键组件测试

Storybook Test 是我们对前端测试的愿景。通过测试组件而不是完整的应用程序，我们可以在端到端 (E2E) 的保真度和单元测试的速度和可靠性之间取得平衡。

这种体验的核心是 Storybook 中的 UI，它可以运行测试并实时显示结果。这正是我们在 Storybook 8.4 中交付的内容。

现在只需单击一个按钮，即可在 Vitest 中为您的所有故事运行组件测试

当测试失败时，您可以逐个浏览失败项，并在 Storybook 的时间旅行调试器中对其进行调试

它还支持观察模式，因此您可以在出现问题时收到通知

最后，测试栏是可扩展的，因此其他测试运行器（如 Chromatic 的可视化测试插件）也可以运行。要了解有关我们新的测试 UI 的更多信息，请参阅官方文档。

我们将捆绑包大小减少了一半

与 8.0 相比，8.4 将 Storybook 的总体安装大小减少了 50% 以上，并将 lockfile 的添加量减少了 75% 以上。尽管我们在2023 年 JavaScript 现状调查中表现出色，但最主要的要求之一是缩小尺寸。

在过去的 4 个版本中，我们与 Ecosystem Performance (e18e) 项目合作，使 Storybook 变得更小更快。我们的目标是以高效的尺寸提供超快响应的开发者体验。

我们是如何做到的？

• 已移除：fs-extra #29126, handlebars #29208, file-system-cache #29256
• 已替换： lodash ⇒ es-toolkit #28981, express ⇒ polka #29230,  chalk ⇒ picocolors #28262, qs ⇒ picoquery #28315
• 已优化： 使用生产模式的 react #29197, 可选的 prettier #29223
• 预捆绑： Vite 构建器 #29302, React 渲染器 #29298, Addon-docs #29301

除了所有这些之外，我们还为 Storybook 9 进行了仅 ESM 迁移的原型设计，以实现更小更紧凑的 Storybook 9。

Svelte 5 支持

Svelte 5 终于来了，Storybook 也随之而来。

• ✅ Runes 支持
• ✅ 用 Svelte CSF 编写您的故事
• ✅ 疯狂的、下一级的 Svelte TypeScript 支持
• ✅ 来自 Svelte CLI 的零配置设置

Svelte 版 Storybook 诞生于 2018 年，就在 Svelte 本身之后不久。它是一位贡献者的产物。多年来，它一直由一系列社区贡献者引导，但没有明确的所有者。这种情况在 2023 年发生了变化，当时 Jeppe Reinhold 加入了核心团队，并将改进 Svelte 集成作为他的使命。

最大的变化是新的 Svelte 故事语法，它来自新的 Svelte 5 安装，这要归功于维护者 Mateusz Kadlubowski。以下是它的样子

<!-- Button.stories.svelte -->
<script module>
  import { defineMeta } from '@storybook/addon-svelte-csf';
  import { fn } from '@storybook/test';
  import Button from './Button.svelte';

  const { Story } = defineMeta({
    component: Button,
    tags: ['autodocs'],
    args: {
      label: 'Click me',
      onclick: fn(),
    },
  });
</script>

<Story name="Primary" args={{ primary: true }} />

<Story name="Secondary" />

<Story name="Large" args={{ size: 'large' }} />

除了更熟悉的 Svelte 故事编写方式外，Storybook 8.4 还提供了出色的 TypeScript 和 JSDoc 支持，这要归功于 Taku Fukada 的出色贡献，它可以为您的 Svelte 组件自动生成高质量的 UI 控件

锦上添花的是，由于 Svelte 维护者 Ben McCann 负责整个项目，Storybook 现在已成为 Svelte CLI 入门体验的一部分

这意味着在您的 SvelteKit 应用程序中运行 Storybook 比以往任何时候都更容易。不仅如此，随着更多 Svelte 用户的加入，我们很高兴将 Svelte 支持提升到新的水平。

React Native Storybook 8

如果您将 Storybook 用于 React Native (RN)，那么停留在 7.x 版本，而 8.x 版本的改进不断发布，这会让人感到痛苦。这就是为什么我们发布了 React Native Storybook 8。其决定性功能是经过彻底改造的响应式 UI，该 UI 针对手机和平板电脑进行了优化，因为这是 RN 开发者花费最多时间的地方。更重要的是，RN 和 Web Storybook 现在共享了足够多的代码，我们计划在未来保持 RN 的更新。

有关所有详细信息，请参阅React Native Storybook 8 发布帖子。

故事标记和筛选

如果您认真对待文档化和测试您的组件，您的 Storybook 可以有数百甚至数千个故事。Storybook 的侧边栏层次结构和文本搜索有助于管理复杂性，但即便如此，大型 Storybook 仍然可能难以管理。

这就是为什么我们创建了一个灵活的标记机制来筛选故事，现在 Storybook 8.4 中已提供该机制

为了补充这一新功能，社区成员 Steve Dodier-Lazaro 创建了一个新的插件 storybook-addon-tag-badges，以在 Storybook 的侧边栏中显示标记信息。

有关更多详细信息，请参阅Storybook 的标记文档。

数百项更多改进

除了上述功能外，每个 Storybook 版本都包含数百项改进和错误修复，涵盖各个层面。以下是一些亮点

• ✅ Next.js v15 支持！#29587
• ✅ Storybook for Solid 已更新至 v8！#10
• ✅ Storybook ESLint 插件现在支持 v9 和扁平文件配置 #156
• ✅ Angular 源代码片段的重大改进 #29069

立即试用！

Storybook 8.4 今天发布了。在新项目中试用它

npx storybook@latest init

或升级现有项目

npx storybook@latest upgrade

如果您要从 7.x 升级，我们有指南可以帮助您。我们还有从旧版本迁移的指南。

下一步是什么

更多改进将在 8.5 中到来

1. 更好地控制在故事子集上运行测试
2. 从 UI 跨所有故事运行 A11y 检查
3. React Server Components (RSC) 模拟和测试
4. 用于测试后断言的 afterEach 钩子（RFC 可用）

要获得我们正在进行和考虑的工作的最新视图，请查看Storybook 的路线图。

致谢

衷心感谢在 Storybook 8.4 中贡献了 PR 的 38 位贡献者！

@3w36zj6 @43081j @andrasczeh @chudesnov @dannyhw @flexbox @ghengeveld @honcharenkozhenya @hyeongrok7874 @infinitexyy @javanpoirier @jonniebigodes @jreinhold @jsmike @k35o @kasperpeulen @kazuyainoue0124 @kylegach @mahdi-hazrati @ndelangen @pedrosousa13 @sentience @shilman @shreysinha02 @sidnioulz @stephenjason89 @strozw @tobiasdiez @valentinpalkovic @vanessayuenn @vctqs1 @webpro @yannbf @ziebam