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
📲 重建的移动 UX
🙅‍♀️ 移除了非 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 问题之一。

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 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 引入了一种新的“测试模式”，使 Storybook 的静态构建速度提高了 2-4 倍。

我们观察到，当您构建 Storybook 以与 Storybook 的 Test Runner 或 Chromatic 等测试工具一起使用时，您可能不需要 Storybook 的文档或自动生成的控件等功能。

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

更新的移动和桌面 UI

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

我们完全彻底修改了 Storybook 的移动 UI。现在，导航侧边栏和插件面板都从页面底部弹出，使您可以轻松地用拇指在手机上触发它们。与以前的版本不同，这些面板与 Storybook 的主要“画布”区域优雅地共存。

我们还重新架构了桌面 UI，以修复长期存在的响应式错误，即当浏览器在桌面和移动状态之间调整大小时，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 的大量错误修复。

Angular: Angular 获得了 Angular 16/17 支持、嵌套模块元数据、独立指令、更易于编写的 story 以及数十个错误修复。我们还与 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 全球宏大奖，以表彰我们的全球社区！本着同样的精神，我们将在 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, and @zmarkan