Storybook 7.0

下一代组件开发与测试

Michael Shilman

Apr 03, 2023 — @mshilman

上次更新 Apr 12, 2023

Storybook 是 UI 工作室环境的黄金标准。由于其无与伦比的框架兼容性以及丰富的开发、文档和测试功能，业界的许多团队都在使用它，例如 Monday.com、The Guardian、Intuit 等。

今天，我很高兴地宣布 Storybook 7 (SB7) 发布，这是我们两年多来的第一个主要版本，也是迄今为止最大的一次更新。

其中包括

⚡ 一流的 Vite 支持
🧩 由新的 Frameworks API 支持，为 NextJS 和 SvelteKit 提供零配置支持
🔖 组件故事格式 3 (CSF3)，改进了类型安全
📝 文档全面改进：支持 MDX2 并简化了文档块
💅 UI 设计焕然一新
✅ 改进了交互测试和测试覆盖率
🚥 通过预打包和生态系统 CI 增强了稳定性
💯 在各个层面进行了数百项改进

继续阅读以了解 Storybook 7 的所有新特性。这些改进也在 Storybook Day 分享的演示文稿中进行了总结。

Storybook：新的篇章

Storybook 始于 2016 年。自那时起，我们率先提出了将 UI 工作室环境用于组件驱动开发、文档和测试的理念。

在此期间，前端生态系统发生了巨大变化。IE11 终于淡出了历史舞台。TypeScript 正在迅速普及 JavaScript 领域。Vite、Turbopack 和 Rspack 对 Webpack 构成了严重竞争。而 pnpm 现在是 npm 的一个主要替代品。

Storybook 随着这些变化一同发展，我们长期以来一直支持主流规范和新兴最佳实践。例如，Storybook 早在 2021 年年中就首次支持 Vite，远在其取得目前成功之前。

然而，增量适应很难。有时，你需要一个主要版本来清理旧物并使技术栈现代化。Storybook 7 就是这样一个版本！

UI 设计焕然一新

借助 Storybook 7 流线型的 UI，现在比以往任何时候都更容易交付出色的 UI。Canvas 区域已扩展至边缘，为你的组件提供了更多空间。我们改进了侧边栏的间距和菜单，使其更精细，同时保持了信息密度。此外，我们重绘了 200 多个自定义图标，以提供更清晰的视觉效果和更快的加载速度。别忘了还有自动深色模式！

预打包，启动更快，零依赖冲突
Storybook 应用程序现在作为预编译的代码库发布，无需你自己编译。这意味着更快的启动时间和不再有依赖性问题。预打包消除了在你的代码库中安装 Storybook 依赖项的需要。

为 Vite、NextJS 和 SvelteKit 提供零配置支持

Storybook 7 引入了 Vite、NextJS 和 SvelteKit 的零配置支持。我们新的 Framework API 根据你的应用设置配置 Storybook，包括你选择的构建器（Webpack 和 Vite）、渲染器（React、Vue、Angular、Svelte、HTML）等等！

对于 Vite，Webpack 现在不再是必需的了。Storybook 会根据你的应用的 Vite 设置自动配置，从而减小安装大小并缩短启动时间。在Storybook 中的一流 Vite 支持中了解更多信息。

对于 NextJS，Storybook 现在会自动模拟路由器。还内置了对包括 next/font、next/image 和绝对路径导入在内的工具的支持。在自动集成 Next.js 和 Storybook 中了解更多信息。

对于 SvelteKit，这意味着框架特定的设置会自动配置，例如使用 $app/paths 安全检索资产路径，支持 $app/stores 和特殊的 $lib 导入别名，以及使组件能够访问 $app/environment。在Storybook for SvelteKit 中了解更多信息。

要了解有关 Framework API 的更多信息，请查看：NextJS、SvelteKit、Remix 以及 Storybook 的未来。

CSF3 改进了类型安全

Storybook 7 通过将组件故事格式 3 (CSF3) 作为其默认格式，在编写故事方面带来了重大改进。CSF3 相对于早期版本有两个主要优势：简洁性和可重用性。它通过消除大量样板代码来简化你的代码，并自动化了故事的某些方面，例如它们的标题和侧边栏位置（基于磁盘位置）。在组件故事格式 3 发布了中了解更多信息。

改进的类型安全

我们改进了 CSF3 中的 TypeScript 支持。更严格的类型提供了更好的编辑器内检查和自动完成功能，这对于 TypeScript 用户来说是巨大的体验提升。要获取完整详情，请查看

CSF3 迁移

我们提供了一个 codemod 工具，可以自动将你现有的故事转换为 CSF3 语法，从而节省你的升级时间。但 SB7 完全向后兼容——所以如果你还没准备好升级，无需更改任何东西。

npx storybook@latest migrate csf-2-to-3 --glob="**/*.stories.js"

文档全面改进，支持 MDX2

Storybook 7 对 Storybook Docs 的全面改进是 SB7 中最大的变化，标志着相比之前的 Storybook 版本有了巨大提升。

自动文档 (Autodocs) 现在以组件为中心

在 Storybook 7 中，你现在可以将文档直接附加到组件上。页面会出现在侧边栏中，与组件的故事并列，而不是像之前那样在标签页式 UI 中显示。

你可以通过添加 autodocs 标签，为组件启用自动生成的文档页面。

使用 MDX 2 改进手动文档编写

Storybook 7 通过支持 MDX2 增强了手动文档编写能力。它带来了诸多好处——包括性能和人体工程学的改进。新版本编译速度提升 25%，生成的代码运行速度提升一倍。此外，它还为在 JSX 元素中嵌套 markdown 提供了更好的支持。

为了适应一些破坏性变更，Storybook 在 7.x 版本周期内将保留对 MDX1 的可选支持，以确保用户平稳过渡。

使用 MDX 通过引用导入故事

Storybook 7 鼓励所有用户在 CSF3 中定义故事，然后在 MDX 中引用它们。这让你两全其美：在编写故事时获得类型检查和自动完成，同时享受使用 markdown 轻松创作的便利。你可以使用下面的 Storybook 7 迁移脚本将现有的 MDX 故事文件拆分为独立的 MDX 和 CSF 文件。

npx storybook@latest migrate mdx-to-csf --glob "**/*.stories.mdx"

新的文档块 (Docs Blocks) API – 强大而简单

为了让你的文档更有效，我们引入了一套更强大且一致的文档块 (Doc Blocks)。这些 UI 块负责从渲染故事到显示源代码和生成 args 表的所有事情。它们可以使用 of={} 语法引用故事，这比引用故事 ID 字符串更安全、更简洁。此外，我们还包含了 useOf hook，用于创建自定义文档块，让你可以根据具体要求调整文档页面。

了解有关这些变化的更多信息

改进的交互测试和代码覆盖率

Storybook 已迅速成为测试组件的最佳选择。你可以通过为其附加一个 play 函数，将一个故事转换为一个测试。然后，使用 Testing-Library 和 Jest 的熟悉语法来模拟事件并断言 DOM 结构。

这在测试复杂的 UI 交互时特别有用，例如表单控件或其他有状态组件。你可以在浏览器中调试事件流，并使用我们的测试运行器从命令行并行执行所有测试。

覆盖率报告

在 Storybook 7 中，我们通过添加代码覆盖率改进了测试支持，它可以扫描你的代码以查找未测试的边缘情况。它有助于你编写更全面的测试，并增强对所交付 UI 的信心。在使用 Storybook 测试运行器进行代码覆盖率测试中了解更多信息。

分组步骤

为了让你能够将交互组合成易于理解的组，我们在 Storybook 的 play 函数中添加了一个名为 step 的新构造。这提高了可读性和可重用性。

// SignupForm.stories.ts

// Replace your-framework with the name of your framework
import type { Meta, StoryObj } from '@storybook/your-framework';
import { userEvent, within } from '@storybook/testing-library';
import { SignupForm } from './SignupForm';

const meta: Meta<typeof SignupForm> = {
  title: 'SignupForm',
  component: SignupForm,
};
export default meta;
type Story = StoryObj<typeof SignupForm>;

export const Submitted: Story = {
  play: async ({ args, canvasElement, step }) => {
    const canvas = within(canvasElement);

    await step('Enter email and password', async () => {
      await userEvent.type(canvas.getByTestId('email'), 'hi@example.com');
      await userEvent.type(canvas.getByTestId('password'), 'supersecret');
    });

    await step('Submit form', async () => {
      await userEvent.click(canvas.getByRole('button'));
    });
  },
};

生态系统 CI，提供更好的稳定性和更顺畅的升级

在快速变化的前端生态系统中支持数十个框架、渲染器和构建器是一个挑战。为了提高 Storybook 的稳定性，我们开始将 Storybook 视为一项服务，并希望在这个不断变化的环境中最大限度地提高其“正常运行时间”。

为了实现这一目标，我们创建了 Storybook 生态系统 CI。此功能会针对大量标准项目配置矩阵测试 Storybook 的 PR。这一切都在公开的状态页面中可视化，该页面显示每日结果并提供 Storybook 稳定性的快照。如果你发现有什么看起来坏了，可以查看此页面了解 Storybook 的运行状况。

在Storybook 生态系统 CI 中了解更多信息。

样式插件，配置更轻松

为 Storybook 设置样式工具是许多开发者面临的常见挑战。虽然有很多相关文章（包括我们博客上的几篇），但这些文章并非总是最新的，这导致了麻烦和耗时且充满试错的设置过程。

为了使这个过程更简单、更直接，我们创建了一个新的样式插件 (Styling Addon)。这是一个与框架无关的解决方案，可以与 Tailwind、Material UI、Chakra、Emotion、Styled-components、SASS 和 PostCSS 等流行工具无缝协作。

样式插件使你能够加载全局样式并将其应用于组件，以及使用主题提供程序包裹故事。它甚至还有一个主题切换器，让你可以在主题之间轻松切换。或者，你也可以使用参数在故事层面覆盖主题值。

入门非常简单，请查看：样式插件：在 Storybook 中配置样式和主题

数百项其他改进

除了上述所有内容，Storybook 7 还包含无数其他改进和错误修复。重点包括

pnpm 支持。不再需要可耻的 hoisting 了！
Angular 改进。更好的安装。数十个 bug 修复。
Vue3 改进。源码片段，slots 支持。
默认导出在 SB main/preview 配置中，带有TypeScript 类型。
SolidJS 集成。社区驱动的SolidJS Vite 支持。
Qwik 集成。社区驱动的Qwik 支持。
Rspack 集成。社区驱动的 Rspack (Webpack 的 Rust 端口) 概念验证构建器。

浏览完整的更新日志以获取所有更改列表。

立即升级！

要升级你的 Storybook，运行

npx storybook@latest upgrade

这将把 Storybook 依赖项更新到最新版本。它还将运行自动迁移。在升级任务期间，你会被提示批准，并获得有关任何必要更改的信息。

为了减轻任何破坏性变更的影响，我们整理了一份迁移指南，帮助你成功地从 Storybook 6.x 升级到 Storybook 7.0！

插件升级

虽然 Storybook 的插件 API 在过去几年里基本保持不变，但 Storybook 7 对插件 API 进行了少量更新，并简化了插件的注册方式。register.js 在 SB 6.5 中已被弃用，现在在 SB7 中已完全移除。

这对你有什么影响？

对于插件用户：所有 Storybook 的核心插件都已更新，并准备好与 Storybook 7 一同使用。

我们正在与社区合作更新最受欢迎的插件。但是，如果你正在使用的插件尚未更新，它可能无法工作，或者 Storybook 可能完全无法启动。

发生这种情况时，请在该插件的 GitHub 仓库中提交一个 issue，并请作者更新其插件以兼容 SB7。此外，请通过在Storybook 仓库中创建 issue 来通知 Storybook 团队，特别是如果它是导致严重故障的热门插件。

对于插件作者：如果你是插件创建者，你需要更新你的插件以使用新的 API。为了帮助你的插件兼容 SB7，我们创建了插件迁移指南。我们在此跟踪社区插件的升级进度

获取支持

如果在迁移过程中遇到问题，请在 Discord 🤝#support 中与维护者聊天。我们正尽最大努力帮助解决问题和修复 bug。

未来的道路

Storybook 7 是一个重要的里程碑。整个团队随时待命，帮助你升级并解决我们在预发布期间遗漏的任何 bug 和用例。

我们一路学到了很多，并且展望未来，我们计划以不同的方式开发和发布 Storybook。

年度主要版本发布
堆积多年的破坏性变更会带来很多痛苦。

用户等待破坏性变更（如放弃 Webpack4、MDX1 等）的痛苦
用户通过众多迁移步骤升级的痛苦（即使我们已经自动化了很多，仍然有很多地方可能出错）。
团队维护废弃 API 和协调像 v7 这样的大型版本发布的痛苦。

将我们的变更打包成更小、更频繁的版本发布应该会使未来的升级对每个人都更顺畅。同时，自动迁移的改进将大大减少额外的麻烦。

巩固抽象
组件故事格式 3 是我们六年内如何编写故事的第四次迭代。每一步都曾是增量式的，并带有自动化的 codemod，但这对于我们的用户来说是一段坎坷的旅程。

我们认为 Storybook 7 在很多方面都做对了，并打算未来的主要版本将更多地围绕支持各种工具的最新版本，而不是重构组件开发、文档和测试的基础方式。

除此之外，我们对 2023 年有重大计划。

性能和稳定性
作为 Storybook 7 的一部分，我们在这两个领域都取得了巨大进展，尤其是在一流的 Vite 支持方面。但我们将在 2023 年继续努力，并且已经有一些突破性的进展正在进行中，我们很高兴在未来几个月内发布。

框架支持
Storybook 7 为框架支持设定了标准，为 Vite、NextJS 和 SvelteKit 提供了第一流的体验。我们将继续改进这些集成，并随着我们与 Storybook 社区的共同建设，将会有更多集成问世。

设置和配置
我们将大力投入新用户的安装和配置流程。这些改进中的许多方面——例如更好的错误处理和文档——也应该为现有用户创造更好的体验。

测试
Storybook 的 play 函数和测试功能对 UI 开发具有颠覆性意义。SB7 的覆盖率报告填补了一个重要空白，使其更加实用。我们有一长串生活质量方面的改进，将在 7.x 版本中推出，特别是在更好的模拟、全页面测试和兼容性方面。

参与其中

专业的 UI 开发者每天都依赖 Storybook。当你采用 Storybook 时，你会获得一套工具、强大的插件和开箱即用的集成，这些都能加快开发速度。

该项目由 1600 多名开源贡献者维护，并由指导委员会指导。如果你有兴趣做出贡献，请查看 Storybook 的 GitHub，创建 issue 或提交 pull request。在 Open Collective 上捐赠。在 Discord 中与我们聊天——通常有维护者在线。在 Twitter 上或通过订阅下面的邮件列表，随时了解 Storybook 的最新消息。

鸣谢

Storybook Day 是对 Storybook 7 改进和社区用例的庆祝。非常感谢所有参与者。与我们的用户一起享受直播是维护 Storybook 以来最精彩的时刻之一。

Storybook 7 核心团队

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

Storybook 7 贡献者

@abrahambrookes @acdr @acusti @agarun @agriffis @akarachen @alex-ahumada @alexandertrefz @alexguja @all-self-taught @andarist @ariperkkio @armujahid @b2y4n @barsheshet @bartlangelaan @benmccann @blackthread @blakegearin @bodograumann @bovandersteene @bryanjtc @bytrangle @ccatterina @chakas3 @clintandrewhall @coofzilla @d-koppenhagen @danielamram @dannyhw @darenbt @darleendenno @dartess @ ddalpange @delagen @domyen @donotlb @donskelle @dschungelabenteuer @duncan-c @edo-san @eirslett @eltociear @enterframe @esilverm @estebanfelipep @ethanmick @ethriel3695 @evad1n @ezmnysniper7 @fazulk @flynnfc @ganhinglong0423 @geisterfurz007 @georgialoper @geromegrignon @ghengeveld @ghidersamihaela @gipoezcan @gitstart @greglahaye @halkeye @hayawata3626 @huyenltnguyen @ianvs @imgbotapp @integrayshaun @interphased @jacob-mns @jahrock @javier-arango @jeangregorfonrose @jeroenhabets @jnschrag @johnalbin @jonathankolnik @jonniebigodes @josh-the-dev @joshbolduc @joshwooding @joycebrum @jpzwarte @jreinhold @jrencz @jsflor @julo01 @jungpaeng @justineloff @justineloffbbd @kasperpeulen @kingdutch @kk3939 @konsalex @kqito @kroeder @krofdrakula @kylegach @kylemeenehan @lalanthawi @lbbo @lifeiscontent @literalpie @liwn9527 @lubnafathima @luciana-mendonca @madarauchiha-314 @magicismight @mandarini @marcelckp @mariasimo @marioarnt @marklb @mattevenson @matthew-smith @mayank99 @merceyz @messenjer @michaelarestad @mihkeleidast @minimalsm @mnigh @mrb1nary @mrhappyma @mz8i @ndelangen @neogeek @nightvision53 @nix6839 @noahnu @noltron000 @nxtivision @nxtpge @ohana54 @okuramasafumi @orisomething @pankali @paulaxisabel @petermakowski @platiplus @pocka @prashantpalikhe @pratikkarad @programmarchy @projektgopher @raptor0929 @redbugz @reech-florian @rendez @richardnorton @rmariuzzo @roottool @ropereralk @rvrvrv @sabrinajess @saunved @sebastiankapunkt @shariqx5 @sheriffmoose @shilman @simenb @smores @sorakumo001 @sosensible @spaceribs @sriram-km @sruthigithub @ssams @sterashima78 @stijnvn @sueperstar @sun0day @ta1m1kam @tadavid-cae @thebuilder @timur-svoboda @tmeasday @tobiasdiez @tomastomaslol @valentinpalkovic @vanessayuenn @webblocksapp @winkervsbecks @yamanoku @yannbf @youngboy @yuisato1025 @yuri-scarbaci-lenio @zhyd1997 @zigang93

Storybook 7，Storybook 的新篇章，来了！

🚀 Storybook 有史以来最大更新 – 两年来的第一个主要版本！
⚡️ 为 @vite_js, @nextjs 和 @sveltejs 提供零配置支持
💯 增强的测试、文档、UI、稳定性和更多功能

继续阅读：https://#/L8zqHkilis pic.twitter.com/nbmq4jDW6e
— Storybook (@storybookjs) April 12, 2023