Storybook 8

Storybook 是构建、测试和文档化组件和页面的行业标准 UI 工具。全球有数千支团队在使用它，它集成了所有主要的 JavaScript 框架，并与大多数领先的设计和开发工具兼容。

今天，我非常激动地宣布 Storybook 8 的发布！ 这一最新版本的 Storybook 汇集了 218 位贡献者提交的 8,865 次提交和 773 个 PR。这些变更包括对 Storybook 测试和文档功能集的重大改进，同时加强了 React、Vue、Angular、Web Components、Svelte 等框架的兼容性和用户体验。请继续阅读，了解此次发布的主要亮点，包括：

📸 内置视觉测试
⚛️ React 服务器组件支持
🎛️ 升级的 Vue 和 React 控件自动生成
⚡️ 重构的 Vite 支持、Vitest 测试框架以及 Vite 5 支持
🧪 构建速度提升 2-4 倍
✨ 焕然一新的桌面 UI
📲 重建的移动端用户体验
🙅‍♀️ 为非 React 项目移除 React 依赖

内置视觉测试

Storybook 8 的主打功能是新的 Visual Tests 插件，它可以让您比以往更快、更轻松地捕捉 UI 错误。该插件首次将由 Storybook 维护者开发的视觉测试云服务Chromatic 集成到 Storybook 中。

只需点击一个按钮，您就可以同时测试所有 story，将每个 story 与先前版本进行比较，并准确找出任何视觉变化。然后，您可以过滤 Storybook 的侧边栏，只显示包含视觉差异的 story，并逐一验证这些更改。

这个过程与 Chromatic 的 CI 工作流程类似，但现在您可以在开发过程中直接在 Storybook 中完成所有操作，而无需提交 PR 甚至提交您的更改！

视觉测试是一项强大的功能，而 Visual Tests 插件使其比以往任何时候都更容易使用。

了解更多关于 Visual Tests 插件的入门信息，或者阅读该插件的发布公告。

React 服务器组件 (RSC) 支持

React 服务器组件是 React 的一个范式转变，组件仅在服务器端渲染。我们密切关注 React 核心团队对 RSC 的探索，以及我们友好的Next.js 团队在 RSC 应用开发方面处于领先地位。

自Storybook 7 发布以来，我们收到了许多关于何时推出 Storybook RSC 支持的疑问。实际上，这是我们最受欢迎的 GitHub issue 之一。

Storybook 8 听取了您的呼声，并推出了我们首次支持 React 服务器组件的实验性功能。我们将 RSC 解决方案归类为实验性，因为它目前仅兼容 Next.js。我们将继续在未来的版本中构建此功能。

要了解更多关于 Storybook 8 实验性 RSC 支持的信息，请参阅如何使用 Next.js、Mock Service Worker 和 Storybook 8 构建 RSC 应用。我们计划在完善最佳实践时分享更多内容。

改进的 React 和 Vue 控件自动生成

Storybook 的标志性功能之一是自动生成的 UI 控件，它允许您交互式地修改组件输入以探索新的组件状态。

对于 React 和 Vue 项目，Storybook 8 通过升级我们用于分析组件的库（也称为“docgen”）来改进控件的自动生成。

对于 React 用户，Storybook 8 切换到了一个显著更快的 docgen 库：`react-docgen`。与我们当前的基于 TypeScript 的解决方案不同，`react-docgen` 产生一个更浅的分析，速度更快，并且足以满足几乎所有组件的需求。在我们的测试中，使用 `react-docgen` 使 React Storybook 的启动时间缩短了 50%。对于需要它的用户，仍然提供完整的 TypeScript 解决方案作为回退。在我们的 React docgen 文档中了解更多信息。

对于 Vue 用户，Storybook 8 引入了对官方 Vue docgen 包的支持：`vue-component-meta`。该包由 Volar 提供支持，您可能认识它为官方 Vue VSCode 插件。升级到 `vue-component-meta` 改进了 Storybook 对类型的处理以及我们自动生成控件的能力。在我们的 Vue docgen 发布公告或我们的 Vue docgen 文档中了解更多关于 Storybook 8 Vue 变更的信息。

重构的 Vite 支持、Vitest 驱动的测试框架以及 Vite 5 兼容性

Storybook 7 最大的亮点之一是引入了Storybook 的零配置 Vite 支持。

此后，Vite 的使用量持续飙升。如今，Vite 占所有新 Storybook 项目的近一半。因此，我们不断加强和完善我们的 Vite 集成。

首先，Storybook 8 支持 Vite 5，这是 Vite 的最新版本。在我们引入 Vite 5 支持的同时，我们意识到 Storybook 为您配置了过多的内容，这使得我们难以支持不同的 Vite 版本。因此，Storybook 8 为您提供了更多配置 Vite 插件（如 `plugin-react`、`plugin-vue`）的控制权，并将这些依赖项移出了 Storybook。几乎所有 Vite 项目都预装了这些插件——因此，除非您使用非标准配置，否则无需进行任何更改！

Storybook 8 还将 Vite 的测试包 Vitest 集成到我们新的框架 `@storybook/test` 中。这个新的测试框架取代了之前的两个包（`@storybook/jest` 和 `@storybook/testing-library`），支持使用 Vitest 的 `spy` 和 `expect`，并且安装包体积更小。在Storybook 8 的测试改进中了解更多信息。

构建速度提升 2-4 倍

Storybook 8 引入了新的“test mode”，使静态构建的 Storybook 速度提高 2-4 倍。

我们注意到，当您为 Storybook 的测试工具（如 Storybook Test Runner 或 Chromatic）构建 Storybook 时，您可能不需要 Storybook 的文档或自动生成控件等功能。

因此，Storybook 8 通过提供一个新的 `--test` CLI 标志来启用简化的测试工作流程，该标志会禁用 Storybook 的各种标准功能。使用此标志可以显著加快构建速度并减小构建输出。我们将在未来的每个版本中继续探索新的优化可能性！

更新的移动端和桌面 UI

Storybook 8 的 UI 带来了一系列改进和润色，如果您对设计有眼光，相信您会喜欢这些变化。

我们彻底重构了 Storybook 的移动端 UI。现在，导航侧边栏和插件面板都从页面底部弹出，方便在手机上用拇指触发。与之前的版本不同，这些面板与 Storybook 的主“Canvas”区域优雅地并存。

我们还重构了桌面 UI，以修复一个长期的响应式 bug，即当浏览器在桌面和移动状态之间调整大小时，story 会重新挂载。在 Storybook 8 中，这种过渡非常流畅且令人愉悦，并辅以更新的排版和一套新的图标。

非 React 项目不再需要 React

在 Storybook 7 中，我们做出了一个艰难的决定，让 React 成为所有框架项目的对等依赖。虽然这一改变使 Storybook 兼容 `pnpm` 和其他现代包管理器，但对于非 React 用户来说，这是一种苦涩的牺牲。

幸运的是，自那时以来，我们对依赖管理和包预打包（多亏了 `tsup`！）有了很多了解，因此 Storybook 8 现在为非 React Storybook 移除了 React 的对等依赖。Storybook 的 UI 仍然是用 React 编写的，但您可以告别 `package.json` 中那些 `react` 和 `react-dom` 的依赖项了！

特定框架的改进

得益于过去一年里扩展的核心团队的维护，Storybook 比以往任何时候都更快、更兼容、更稳定。以下是亮点！

React： React 获得了实验性的 React 服务器组件支持，以及更快的用于自动生成交互式控件的 `react-docgen`，这两者都在上面进行了描述。

Vue： Vue 获得了由 Volar 支持的自动生成控件，支持最新的 Vue 功能和 TypeScript 类型。它还获得了文档中的动态源代码片段，以及我们新维护者 Chakir 和 Lars 带来的众多 bug 修复。

Angular： Angular 获得了 Angular 16/17 支持、嵌套模块元数据、独立指令、更容易编写的 story，以及数十个 bug 修复。我们还与 Angular 核心团队合作，在未来的版本中支持新的高性能构建选项。

Web Components： Storybook 的 Web Component story 是用 Lit 编写的，我们已更新以支持 Lit3。此外，我们还修复了与自动生成控件和动态生成的源代码片段相关的问题。

Svelte： Storybook 的 Svelte 支持受到了 Storybook 核心团队、Svelte 核心团队以及广大社区的大力支持。主要改进包括 Svelte 5（预发布版）支持、SvelteKit 页面和导航模拟，以及对 Storybook “原生” Svelte story 格式的关键修复/改进。

开始上手

要全新安装 Storybook 8，请运行：

npx storybook@latest init

要将现有 Storybook 升级到 Storybook 8，请运行：

npx storybook@latest upgrade

有关升级帮助，请查阅我们的 Storybook 8 迁移指南，了解如何从 Storybook 7 升级到 Storybook 8，或如何从 Storybook 6 升级到 Storybook 8。或者，参考 GitHub 上的扩展 Storybook 迁移指南。

庆祝 Storybook 8 🥳

在 Storybook 7 和 Storybook 8 之间，Storybook 赢得了GitHub 2023 年全球盛大奖（Global Grandiose award），以表彰我们遍布全球的社区！本着同样的精神，我们将在 3 月 28 日举办两场见面会，您可以与当地的前端社区一起庆祝 Storybook 8 的发布。 加入我们在巴黎的活动，或加入我们在纽约的活动！

此外，感谢前端生态系统中所有社区合作伙伴帮助我们将 Storybook 8 推向世界！感谢 Chromatic、Figma、ViteConf、Omlet、DivRiots、story.to.design、StackBlitz、UXpin、Nx、Mock Service Worker、Anima、Zeplin、zeroheight、Storyblok、kickstartDS 和 Kendo UI。

鸣谢

核心团队

Michael Arestad，Yann Braga，João Cardoso，Michael Chan，Tom Coleman，Charles de Dreuille，Norbert de Langen，Shaun Evening，Kyle Gach，Gert Hengeveld，Dom Nguyen，Valentin Palkovic，Kasper Peulen，Chakir Qatab，Jeppe Reinhold，Lars Rickert，Kai Röder，Michael Shilman (我！)，Joe Vaughan，Varun Vachhar，Ian Van Schooten，Daniel Williams，Josh Wooding，以及Vanessa Yuen

贡献者

@0916dhkim，@1234tgk，@43081j，@aditya1，@adityakrmodak，@agriffis，@ai，@alitas，@almoghaimo，@amerlander，@andarist，@anneau，@artur93gev，@arunoda，@arup1221，@atreay，@auctumnus，@bashmish，@bdriguesdev，@benmccann，@bkfarnsworth，@bodograumann，@bryanjtc，@cdedreuille，@cgatian，@chakas3，@chocoscoding，@coliff，@cprecioso，@danez，@danielmarcano，@dannyhw，@dartess，@darth-koder007，@daves28，@decherneyge，@devanandb，@devazc，@diamondex，@domyen，@dotwoodmedia，@dprcoles，@drik98，@dschungelabenteuer，@dubbs，@edutoit，@efrenaragon96，@epreston，@felixrizzolli，@fezvrasta，@filiptammergard，@flambe，@francois2metz，@g-cappai，@githrdw，@gitstart，@gossi，@greut，@gufah，@halitiince，@hcvdhaar，@henkerik，@hobbes7878，@hoishin，@honzahruby，@iabu94，@ianvs，@idesigncode，@iqbalcodes6602，@irangarcia，@ivoilic，@j3rem1e，@jackw，@jared-christensen，@joaonunomota，@joekarow，@joevaugh4n，@joeycozza，@johnhunter，@jonniebigodes，@jonthenerd，@joriswitteman，@joshbolduc，@jpzwarte，@jreinhold，@json-betsec，@julien-deramond，@junghoe，@kaelig，@karolstawowski，@kasperpeulen，@kawokas，@kbazilio，@kkirby，@klescouar，@kolife01，@kota-kamikawa，@kripod，@kshmidt-digma，@ksugawara61，@kubijo，@kuriacka，@kylegach，@kylemeenehan，@kyletsang，@larsrickert，@legnaleurc，@leniwen，@literalpie，@lucavazz，@luk-z，@machycek，@maheshchandra10，@manbearwiz，@mandarini，@mariasimo，@mariocadenas，@marklb，@martinnabhan，@masaya48，@mastrzyz，@mattlewis92，@mauriciorobayo，@mdornseif，@medihack，@mh-ahs，@michens，@mickmcgrath13，@miily8310s，@mlazari，@mrzillagold，@mvarendorff，@naporin0624，@nasvillanueva，@natehouk，@ndelangen，@nikospapcom，@nilsjacobsen，@nkabrown，@nlepage，@notwoods，@noviceguru，@nsheaps，@nvitius，@omahs，@orangecms，@oruman，@osnoser1，@paoloricciuti，@pascalfiv，@piratetaco，@pruthvip15，@pure-js，@rashidshamloo，@re-taro，@redbugz，@reyronald，@roel-t，@rohanpoojary1107，@roottool，@rwaight，@samvv，@seriouz，@shaunevening，@sheriffmoose，@shilman，@showrin，@sidnioulz，@sitogi，@sjwilczynski，@smeagol74，@sookmax，@specialdoom，@speelbarrow，@spookyjelly，@stegano，@stilt0n，@stof，@stropitek，@subhajit20，@syabro，@t99，@taehyeon-envoi，@taozhou-glean，@tap-kim，@thapasusheel，@thisisanto，@thtliife，@tmeasday，@tolkadot，@tomo5524，@tsvanharen，@turtle601，@tusharwebd，@ubugnu，@unional，@usrrname，@valentinpalkovic，@vanessayuenn，@vmizg，@webblocksapp，@wesgro，@wilson2k，@wise-introvert，@wjdtjdgns，@wouterk12，@wuzhuobin，@xueyawei，@xyy94813，@yannbf，@ygkn，@yilun-sun，@yoshi2no，@yossisaadi，@youngboy，@zachtball，和@zmarkan