
2024 年 Storybook 的未来展望
2023 年亮点回顾及未来展望

自 2016 年成立以来,Storybook 经历了飞速发展。尽管我们尽力“边走边清理”,但项目仍然变得庞大而复杂。因此,我们在 2023 年的大部分时间都在偿还技术债务。这不会产生引人注目的头条新闻,但在这一年中,我们极大地改进了产品,同时也为 2024 年下一代改进 奠定了基础。
Storybook 7.0
我们以 Storybook 7.0 开启了新的一年,这是自 2020 年以来的首次重大版本发布。此版本包含了大量的基础性改进
- ⚡ 一流的 Vite 和 pnpm 支持
- 🧩 对 NextJS 的零配置支持 & SvelteKit,由 Frameworks API 提供支持
- 🔖 组件故事格式 3,具有改进的类型安全性
- 📝 文档全面改进:MDX2 支持和简化的文档块
- 💅 UI 设计焕新
- ✅ 改进的交互测试和测试覆盖率
- 🚥 通过预捆绑和生态系统 CI 增强稳定性
加快步伐
7.0 是一个重要的里程碑,但我们并没有止步于此。为了提高迭代能力,我们开始更频繁地发布 7.x 版本。在九个月的时间里,我们发布了六个小版本(最近的是 Storybook 7.6)。这些版本包括
- 🏄♀️ 应用内引导 帮助新用户学习 Storybook
- 💅 对 Tailwind、MUI、 styled-components 和 Emotion 的零配置样式支持
- 📗 Vue 3 源代码片段 和响应式改进
- 🎨 Figma Design 插件 官方支持
- 👻 storiesOf 和 storyStoreV6 已弃用
- ⚡️ Vite 5 支持 和 Lit 3.0 支持
- 🔥 使用 SWC 和 react-docgen 提升性能
- 🧪 新的测试实用程序
- 🇸 SvelteKit 页面和导航模拟
- 🩺 CLI:使用 storybook-doctor 诊断错误
自动捕获 UI 错误
我们还一直在努力将 Storybook 变成一个强大的测试工具,使您能够在开发组件时捕获意外的更改和回归。Chromatic Visual Test Addon 现已推出私有 Beta 版。注册加入超过 1,000 名开发者的早期访问。

构建社区

我们不仅在网上掀起了波澜,在线下也是如此!在我们的首次系列聚会上,我们在全球各地会见了数百名 Storybook 开发者,包括在西雅图、伦敦、巴黎、浦那和多伦多的活动!我们计划在 2024 年举办更多活动,敬请关注。
在热心志愿者的帮助下,我们还改进了 Storybook 的支持社区。在此向我们 Discord 帮助者俱乐部的所有成员致敬,包括
Ahmadreza Shamimi, Belle, Burton, CuddleBunny, Danny HW, foxhoundn, Frog, George, Jen C, literalpie, María Simó, MarkB, dkwoody, hinogi, 和 unpunnyfuns!
对于在 2023 年帮助解决其他用户问题的任何人:我们非常感谢您的贡献以及您在我们社区中扮演的角色。
文档万岁!
现在是学习 Storybook 的最佳时机,因为今年我们对文档站点进行了一系列改进。
我们为许多用户最常要求的主题创建了文档。这包括 主配置、ArgTypes、组件故事格式 (CSF)、框架、CLI 选项 和 文档块 的 API 页面。
同时,我们还显著升级了文档站点的用户体验
- 🧑💻 代码片段现在默认以 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 年转变方向,构建新的产品领域。我们将有三个核心重点
- 应用程序开发
- 增强对非 React 框架的支持
- 改进故事生成
应用程序开发
我们 2024 年的重大押注是应用程序开发。Storybook 以其用于隔离组件开发和设计系统的工具而闻名,但它也可以用于开发 连接的组件 甚至 全栈应用程序。
我们正在从测试的角度对这些场景进行更多投资。这为开发人员提供了一种强大的方式来执行完整的应用程序用户流程,但具有 Storybook 隔离环境的速度和可靠性。

非 React 框架
我们还在投资非 React 框架。这是一项长期努力,但在 2024 年之前发生变化的是,我们已开始与框架维护者合作,以提供尽可能一致的 Storybook 体验。
Angular: 我们一直在与 Angular 核心团队合作,以确保跨主要版本升级的兼容性。明年,我们计划与其他 Angular 用户的生活质量改进措施一起,与 Angular 新的高性能 构建系统 集成。
Svelte: 我们与 Svelte 的维护者合作发布了一流的 SvelteKit 支持,并在 7.x 中继续改进集成。在此过程中,他们敦促我们用户应该使用 Svelte 语法编写故事。明年,我们计划在其他关键的 Svelte 改进措施中正式支持 Svelte CSF。
故事生成
最后但同样重要的是,我们希望使编写故事更容易。
2023 年最令人兴奋的社区发展之一是 StorybookGPT,这是一种使用大型语言模型为您的组件自动生成故事的方法。这是由我们在 Netlify 的朋友 Kaelig Deloumeau-Prigent 开发的。我们以 Kaelig 的创作为基础,编写了关于如何试验将此概念应用于您选择的任何框架的说明。

参与进来
Storybook 由 1,800 多名开源贡献者维护,并由指导委员会指导。如果您有兴趣贡献力量,请在 GitHub 上查看 Storybook,创建 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。
2023 年对于 Storybook 社区来说是意义非凡的一年!以下是我们今年发布的所有内容以及对未来的展望 👉
— Storybook (@storybookjs) 2023 年 12 月 27 日
🎊 我们有史以来<0xE6><0x9C><0x80>大的版本发布
🌎 三大洲的聚会
🌐 RSC 支持
🔮 Storybook 8 及未来
👏 305 位开发者贡献了 1,961 次https://#/gcSPcfrfo6