Storybook 8.4

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

在 Storybook 8.4 中，我们创造了在浏览器中测试和调试前端测试的最佳开发者体验 (DX)。它基于我们与 Vitest 合作在组件测试方面的工作。

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

一键组件测试

Storybook Test 是我们对前端测试的愿景。通过测试组件而非整个应用，我们可以平衡端到端 (E2E) 测试的保真度与单元测试的速度和可靠性。

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

只需点击一个按钮，现在就可以在 Vitest 中对所有故事运行组件测试

当测试失败时，你可以在 Storybook 的时空穿梭调试器中逐个检查并调试它们

它还支持监视模式，这样你就可以在出现问题时收到通知

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

我们将 bundle 大小减半

与 8.0 相比，8.4 将 Storybook 的整体安装大小减少了 50% 以上，lockfile 增加量减少了 75% 以上。虽然我们在 State of JavaScript 2023 调查中表现出色，但最主要的请求之一就是瘦身。

在过去的 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 builder #29302, React renderer #29298, Addon-docs #29301

除了所有这些，我们还原型化了一个仅支持 ESM 的迁移，以打造一个更小、更紧凑的 Storybook 9。

Svelte 5 支持

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

• ✅ Runes 支持
• ✅ 用 Svelte CSF 编写你的故事
• ✅ 超棒的下一代 Svelte TypeScript 支持
• ✅ 通过 Svelte CLI 零配置设置

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

最大的变化是新的 Svelte 故事语法，这得益于维护者 Mateusz Kadlubowski，它随新的 Svelte 5 安装一同提供。以下是它的样子：

<!-- 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 支持，可以自动为你的 Svelte 组件生成高质量的 UI 控件，这得益于 Taku Fukada 的杰出贡献

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

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

React Native Storybook 8

如果你使用 React Native (RN) 版 Storybook，那么在 7.x 版本停滞不前，而 8.x 的改进却不断发布，会很痛苦。这就是我们发布 React Native Storybook 8 的原因。它的标志性特性是经过全面改进的响应式 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 版本都包含数百项各层面的改进和 bug 修复。部分亮点：

• ✅ 支持 Next.js v15！#29587
• ✅ Solid 版 Storybook 已更新至 v8！#10
• ✅ Storybook ESLint 插件现已支持 v9 和 flat file config #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 hook (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