自 2016 年成立以来，Storybook 取得了长足进步。尽管我们尽最大努力“边做边清理”，但项目已经变得庞大。这就是为什么我们将 2023 年的大部分时间花在偿还技术债务上。这虽然不会产生 flashy headlines（引人注目的头条），但我们在这一年里显著改进了产品，同时也为 2024 年下一代改进奠定了基础。

Storybook 7.0

我们以 Storybook 7.0 作为开端，这是自 2020 年以来的第一个主要版本。其中包含了许多基础性改进

• ⚡ 一流的 Vite 和 pnpm 支持
• 🧩 零配置支持 NextJS 和 SvelteKit，由 框架 API 提供支持
• 🔖 组件 Story Format 3 (CSF) 并改进了类型安全
• 📝 文档大修：支持 MDX2 并简化了 Doc Blocks
• 💅 UI 设计更新
• ✅ 改进的交互测试和测试覆盖率
• 🚥 通过预打包和 Ecosystem CI 增强稳定性

加快步伐

7.0 是一个重要的里程碑，但我们并未止步。为了提高迭代能力，我们开始更频繁地发布 7.x 版本。在九个月的时间里，我们发布了六个小版本（最近的是 Storybook 7.6）。其中包括

• 🏄‍♀️ 应用内引导 帮助新用户学习 Storybook
• 💅 零配置样式 支持 Tailwind、MUI、styled-components 和 Emotion
• 📗 Vue 3 源码片段 和响应性改进
• 🎨 Figma 设计插件 官方支持
• 👻 storiesOf 和 storyStoreV6 正式废弃
• ⚡️ 支持 Vite 5 和 支持 Lit 3.0
• 🔥 通过 SWC 和 react-docgen 获得性能提升
• 🧪 新测试工具
• 🇸 SvelteKit 页面和导航模拟
• 🩺 CLI：使用 storybook-doctor 诊断错误

自动捕获 UI bug

我们一直在努力将 Storybook 打造成一个强大的测试工具，让您在开发组件时自动捕获意外更改和回归。 Chromatic Visual Test Addon 现已在私人 Beta 版中可用。立即注册，加入超过 1,000 名开发者的先行体验。

建设社区

我们不仅在线上，而且在线下也引起了轰动！在我们有史以来第一次的系列聚会中，我们在全球范围内见到了数百名 Storybook 开发者，包括在西雅图、伦敦、巴黎、普纳和多伦多举办的活动！我们将在 2024 年计划更多活动，敬请关注。

在我们出色的志愿者的帮助下，我们还改进了 Storybook 的支持社区。特别感谢我们 Discord Helpers Club 中的所有人，包括

Ahmadreza Shamimi, Belle, Burton, CuddleBunny, Danny HW, foxhoundn, Frog, George, Jen C, literalpie, María Simó, MarkB, dkwoody, hinogi, and unpunnyfuns!

感谢所有在 2023 年帮助解决其他用户问题的人：我们非常感谢您的贡献以及您在社区中的作用。

文档改进！

现在是学习 Storybook 的最佳时机，因为今年我们对文档站点进行了一系列改进。

我们为许多用户最常请求的主题创建了文档。这包括以下内容的 API 页面：主配置 (Main configuration)、ArgTypes、组件 Story Format (CSF)、框架 (Frameworks)、CLI 选项和 Doc Blocks。

与此同时，我们显著升级了文档站点的用户体验 (UX)

• 🧑‍💻 代码片段默认显示为 TypeScript
• 📚 侧边栏中索引了目录
• 🤝 代码语言 (TypeScript 或 JavaScript)、渲染器 (React, Vue 等) 和包管理器 (NPM, Yarn 等) 现在可以在会话之间记住
• 📝 新增小部件，无需离开站点即可将反馈分享到 GitHub Discussions

锦上添花：Storybook 8.0

我们的下一个主要版本 Storybook 8.0 将为每个项目带来显著的性能提升。

• 💨 测试构建速度提高 2-4 倍、React docgen 速度提高 25-50%，以及 支持 Webpack 项目的 SWC
• ✨ 改进的框架支持：在使用非 React 渲染器时，您不再需要将 React 作为对等依赖项安装
• 🌐 支持 React Server Components (RSC)：我们的实验性解决方案可在浏览器中渲染异步 RSC 并模拟 Node 代码
• ➕ 还有更多更多

我们计划在 2024 年初发布 Storybook 8.0。查看完整发布时间表。

2024 年展望

在将 2023 年的大部分时间投入维护后，我们很高兴能在 2024 年转换方向，开辟新的产品领域。我们将有三个核心重点

1. 应用开发
2. 增强对非 React 框架的支持
3. 改进 story 生成

应用开发

我们 2024 年的主要投入是应用开发。Storybook 以作为隔离组件开发和设计系统的工具而闻名，但它也可用于开发连接组件，甚至全栈应用。

从测试角度来看，我们正在更多地投资于这些场景。这为开发者提供了一种强大的方式来演练完整的应用用户流程，同时兼具 Storybook 隔离环境的速度和可靠性。

非 React 框架

我们也在投资于非 React 框架。这是一项长期努力，但 2024 年即将到来的变化是，我们已开始与框架维护者合作，以提供最契合的 Storybook 体验。

Angular：我们一直与 Angular 核心团队合作，确保主要版本升级的兼容性。明年，我们计划集成 Angular 新的高性能构建系统，以及为 Angular 用户带来的其他主要生活质量改进。

Svelte：我们与 Svelte 的维护者合作发布了一流的 SvelteKit 支持，并在 7.x 版本中持续改进集成。在此过程中，他们敦促我们，用户应该使用 Svelte 语法编写 stories。明年我们计划正式支持Svelte CSF，以及其他重要的 Svelte 改进。

Story 生成

最后但同样重要的是，我们希望让编写 stories 变得更容易。

2023 年最激动人心的社区进展之一是StorybookGPT，这是一种使用大型语言模型自动为您的组件生成 stories 的方法。这是由我们在 Netlify 的朋友 Kaelig Deloumeau-Prigent 开发的。我们基于 Kaelig 的创建，编写了如何将这一概念改编到您选择的任何框架的实验指南。

构建您自己的 Storybook GPT

自动为您的组件生成 stories

Storybook 博客Joe Vaughan

参与进来

Storybook 由 1,800 多名开源贡献者维护，并由一个指导委员会指导。如果您有兴趣贡献，请访问 Storybook 的 GitHub，创建 issue 或提交 pull request。在 Open Collective 上捐赠。在 Discord 中与我们聊天 — 通常会有维护者在线。通过 Twitter 及时了解 Storybook 的新闻，或通过下方订阅我们的 邮件列表。

致谢

Storybook 8 核心团队

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, Kai Röder, Michael Shilman (我!), Joe Vaughan, Varun Vachhar, Ian Van Schooten, Daniel Williams, Josh Wooding, Vanessa Yuen

Storybook 8 贡献者

@0916dhkim, @1234tgk, @42shadow42, @aditya1, @adityakrmodak, @agriffis, @akarachen, @alex-ahumada, @alexandertrefz, @almoghaimo, @amerlander, @andarist, @anneau, @artur93gev, @arup1221, @atreay, @auctumnus, @autoboxer, @barsheshet, @bartlangelaan, @bashmish, @bdriguesdev, @benmccann, @bkfarnsworth, @bodograumann, @bryanjtc, @cdedreuille, @cgatian, @chakas3, @chocoscoding, @coliff, @cprecioso, @d-koppenhagen, @danez, @danielmarcano, @dannyhw, @darleendenno, @dartess, @darth-koder007, @daves28, @decherneyge, @diamondex, @dobesv, @domyen, @dotwoodmedia, @dprcoles, @dschungelabenteuer, @dubbs, @dxb-story, @edutoit, @efrenaragon96, @eltociear, @enterframe, @epreston, @esilverm, @ethanmick, @fazulk, @felixrizzolli, @fezvrasta, @filiptammergard, @flynnfc, @foxhoundn, @francois2metz, @g-cappai, @ghidersamihaela, @gipoezcan, @github-actions[bot], @gitstart, @gitstart-storybook, @gossi, @greut, @gufah, @halitiince, @hcvdhaar, @henkerik, @hobbes7878, @hoishin, @honzahruby, @iabu94, @ianvs, @idesigncode, @imccausl, @integrayshaun, @iqbalcodes6602, @irangarcia, @j3rem1e, @jackw, @jared-christensen, @jd-oconnor, @jnschrag, @joaonunomota, @joevaugh4n, @joeycozza, @johnhunter, @jonniebigodes, @jonthenerd, @joriswitteman, @joshbolduc, @joshwooding, @jpzwarte, @jreinhold, @jrencz, @json-betsec, @julien-deramond, @junghoe, @jungpaeng, @justineloff, @justineloffbbd, @kaelig, @kasperpeulen, @kawokas, @kbazilio, @kkirby, @klescouar, @kolife01, @konsalex, @kota-kamikawa, @kripod, @krofdrakula, @kshmidt-digma, @kubijo, @kuriacka, @kylegach, @kylemeenehan, @kyletsang, @legnaleurc, @literalpie, @liwn9527, @lucavazz, @luk-z, @machycek, @madarauchiha-314, @magicismight, @maheshchandra10, @manbearwiz, @mandarini, @marcelckp, @mariasimo, @marioarnt, @mariocadenas, @marklb, @martinnabhan, @masaya48, @mastrzyz, @mattlewis92, @mauriciorobayo, @mayank99, @mdornseif, @medihack, @michaelarestad, @michens, @mickmcgrath13, @miily8310s, @mnigh, @mrb1nary, @mrzillagold, @mvarendorff, @mz8i, @nasvillanueva, @natehouk, @ndelangen, @neretin-trike, @nikospapcom, @nlepage, @noltron000, @notwoods, @noviceguru, @nsheaps, @nvitius, @okuramasafumi, @omahs, @orangecms, @orisomething, @oruman, @osnoser1, @oxcened, @paoloricciuti, @pascalfiv, @piratetaco, @pratikkarad, @programmarchy, @pruthvip15, @pure-js, @rashidshamloo, @re-taro, @redbugz, @roel-t, @rohanpoojary1107, @roottool, @samvv, @sebastiankapunkt, @seriouz, @sheriffmoose, @shilman, @showrin, @sidnioulz, @simenb, @sitogi, @sjwilczynski, @smeagol74, @sookmax, @sorakumo001, @specialdoom, @speelbarrow, @spookyjelly, @stilt0n, @stof, @storybook-bot, @stropitek, @subhajit20, @syabro, @t99, @ta1m1kam, @taehyeon-envoi, @taozhou-glean, @thapasusheel, @thtliife, @tmeasday, @tobiasdiez, @tolkadot, @tomo5524, @tyankatsu0105, @ubugnu, @usrrname, @valentinpalkovic, @vanessayuenn, @webblocksapp, @wesgro, @wilson2k, @wise-introvert, @wjdtjdgns, @wouterk12, @wuzhuobin, @xueyawei, @xyy94813, @yamanoku, @yannbf, @ygkn, @yilun-sun, @yoshi2no, @yossisaadi, @youngboy, @zachtball, @zhyd1997, @zigang93, and @zmarkan.