Storybook 8

Storybook是业界用于构建、测试和记录组件与页面的标准UI工具。全球数千个团队正在使用它，它集成了所有主要的JavaScript框架，并与大多数领先的设计和开发工具相结合。

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

📸 内置视觉测试
⚛️ React Server Component 支持
🎛️ Vue 和 React 控件自动生成升级
⚡️ 重构的 Vite 支持、Vitest 测试和 Vite 5 支持
🧪 测试构建速度提升 2-4 倍
✨ 焕然一新的桌面 UI
📲 重塑移动端用户体验
🙅‍♀️ 非 React 项目不再需要 React 依赖

内置视觉测试

Storybook 8 的主打功能是全新的视觉测试插件，它让您比以往任何时候都能更快、更轻松地捕获 UI bug。该插件首次将由 Storybook 维护者开发的视觉测试云服务 Chromatic 集成到 Storybook 中。

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

这个过程模仿了 Chromatic 的 CI 工作流程，但现在您可以在工作中直接在 Storybook 内部完成所有操作，而无需提交 PR 甚至提交您的更改！

视觉测试是一项超能力，而视觉测试插件使其比以往任何时候都更容易使用。

了解更多关于开始使用视觉测试插件的信息，或 阅读该插件的发布公告。

React Server Component (RSC) 支持

React Server Components 是 React 的范式转变，其中组件仅在服务器上渲染。我们一直在密切关注 React 核心团队对 RSC 的探索，以及我们在 Next.js 的朋友在 RSC 应用开发方面取得的进展。

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

Storybook 8 回应了您的呼声，首次引入了对 React Server Components 的实验性支持。我们将我们的 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 提供支持，您可能认识 Volar 作为官方的 Vue VSCode 插件。升级到 vue-component-meta 改进了 Storybook 对类型的处理以及我们自动生成控件的能力。在我们的 Vue docgen 公告或我们的 Vue docgen 文档中了解更多关于 Storybook 8 对 Vue 的改变。

重构的 Vite 支持、由 Vitest 提供支持的测试框架以及 Vite 5 兼容性

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

自那时以来，Vite 的使用量持续飙升。如今，在所有新的 Storybook 项目中，Vite 占据了近一半。因此，我们一直在不断改进和优化我们的 Vite 集成。

首先，Storybook 8 添加了对 Vite 5 的支持，这是 Vite 的最新最佳版本。在引入 Vite 5 支持时，我们意识到 Storybook 代表您配置了太多东西，这使得我们难以支持不同的 Vite 版本。因此，Storybook 8 赋予您更多控制权来配置 plugin-react、plugin-vue 等 Vite 插件，同时将这些依赖项移到 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，以修复一个长期存在的响应性 bug，即当浏览器在桌面和移动状态之间调整大小时，Story 会重新挂载。在 Storybook 8 中，这种过渡极其流畅美观，并且搭配了更新的排版和一套新的图标。

非 React 项目不再需要 React

在 Storybook 7 中，我们做出了一个艰难的决定，将 React 作为所有框架项目的 peer dependency。虽然这一改变使得 Storybook 与 pnpm 和其他现代包管理器兼容，但这对于非 React 用户来说是一个难以接受的苦涩之处。

幸运的是，自那时以来，我们在依赖管理和包预打包方面学到了很多（感谢 tsup！），因此 Storybook 8 现在为非 React Storybook 项目移除了 React 的 peer dependency。Storybook 的 UI 仍然是用 React 编写的，但您可以告别 package.json 中的 react 和 react-dom 依赖了！

特定框架改进

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

React：React 获得了实验性的 React Server Component 支持，并使用 react-docgen 作为自动生成交互式控件的更快默认方式，这两点都在上面有所描述。

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

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

Web Components：Storybook 的 Web Component stories 是用 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 奖项！秉承这一精神，我们将在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