Storybook 7.6

Storybook 7.6 来了！这是 Storybook 7 系列的最后一个次要版本。7.6 版本提升了 Storybook 的性能和用户体验，增强了我们与前端生态系统中各种工具的集成，并为我们的下一个主要版本 Storybook 8 铺平了道路。

• 🔥 改进的 SWC 支持
• 🧪 新的测试工具和快速构建模式
• 🔼 NextJS SWC + avif 支持和修复
• 🇸 SvelteKit 页面和导航模拟
• ⚛️ react-docgen 升级
• 🎨 背景主题、视口和改进的 Controls 可访问性
• 🩺 CLI: 使用 storybook-doctor 诊断错误！
• 🚫 插件：React 被移除作为 peer dependency
• 📚 全新改进的文档网站
• 🪦 Storyshots 和 Vue2 已弃用

改进的 SWC 支持

Storybook 7.6 将基于 Webpack 项目的启动时间缩短了 50% 或更多。我们通过从 Babel 切换到 Speedy Web Compiler (SWC) (#24805) 实现这一目标。从 7.6 开始，除了 Angular 之外的所有新的 Webpack 项目都将使用 SWC。我们还修复了 Preact 和 React fast-refresh 的 SWC 支持。

如果使用基于 Webpack 的框架，请更新 .storybook/main.js 中的 builder 配置

// .storybook/main.js

export default {
  framework: {
    name: '@storybook/your-framework', // react-webpack5|next|vue-webpack5|etc
    options: { builder: { useSWC: true } }
  }
};

在文档中了解更多.

NextJS: 添加了 SWC、avif 支持和其他修复

实验性的 SWC 支持为 Next.js 用户带来了显著的提升 (#24852)。它让 Storybook 变得更快，并且更贴近 Next.js 的行为。你可以通过编辑 .storybook/main.js 配置来启用此功能

// .storybook/main.js

export default {
  framework: {
    name: '@storybook/nextjs',
    options: { builder: { useSWC: true } }
  }
};

我们通过新的 avif 支持 (#24611)、修复 Image 组件的 ref forwarding (#24648)，以及恢复图像上下文 CJS 导出以兼容 Jest (#24885)，进一步增强了对 Next.js 的支持！

新的测试工具和更快的构建模式

Storybook 7.6 引入了一个性能更好的测试库和一个“测试构建模式”，该模式在测试时可大幅减少静态构建时间。

• @storybook/test：这个测试包从 Jest 切换到了 Vitest 的 expect 包，带来了用于监视组件、在浏览器中与其交互以及断言结果的一系列新工具。此外，它具有更好的性能和更小的体积。它还引入了改进的模式来在你的 stories 中编写 actions/spies，这有助于 stories 更快地加载并使其在其他工具中更易于重用。在我们的公告中了解更多。
• 测试模式：我们通过为 storybook build 引入新的 --test 标志，将测试速度提高了 2-4 倍。它绕过了在 Chromatic 或 Storybook 的 Test Runner 中进行测试时非必需的流程，例如运行 docgen 分析和编译文档。在文档中了解更多。

SvelteKit 页面和导航模拟

Storybook 7.6 引入了新的实验性 SvelteKit 模拟 (#24795)。你可以使用这些来安全地为任何导入 SvelteKit 特定模块（例如页面数据或导航函数）的组件编写 stories。现在，任何通过点击锚点或调用 goto() 引起的导航都会由 Storybook 处理并记录到 Actions 面板。

使用新的 sveltekit_experimental 参数为自定义页面数据提供 handlers 和 mock stories（可在 story、meta 或全局级别）。非常感谢 Paolo Ricciuti (@paoloricciuti) 贡献了这些更改。在 Paolo 的博客文章、相关 PR 或 Storybook for SvelteKit README 中了解更多。

最后，7.6 版本包含了 Svelte decorators 的关键 bug 修复——decorators 是包裹你的 stories 的可配置函数。Storybook 不再运行两次 decorators (#29421)。此外，它现在可以正确显示带有装饰器的 stories，而不会在源代码片段中出现烦人的 SlotDecorator (#24800)！

react-docgen 升级

Storybook 8 中的一项主要性能升级将是切换到使用 react-docgen 生成自动控件。这听起来可能微不足道，但它将把启动时间加快 2 倍或更多。例如：react-docgen 6 将我们基准测试项目 Mealdrop project （我们用于许多测试）的启动时间从 8.9 秒减少到 4.0 秒！

我们之前在 Storybook 7.5 中宣布了这一举动，当时升级到 react-docgen v6 极大地改善了其对 TypeScript 类型的处理。Storybook 7.6 将 docgen 升级到 v7 (#24530)，这是一个专门为解决 Storybook 反馈而发布的新版本。非常感谢 react-docgen 维护者 Daniel Tschinder (@danez) 如此迅速响应并促成了这一切！

要在你的 React 项目中启用 react-docgen，请更新 .storybook/main.js

// .storybook/main.js

export default {
  // ...
  typescript: { reactDocgen: 'react-docgen' },
}

背景主题、视口和改进的 Controls 可访问性

Storybook 的 UI 得到了一系列修复，以帮助你提高工作效率。

• 改进的 Controls 插件的可访问性：Storybook controls 允许你与组件进行交互式实验。它们在编写时考虑了可访问性 (a11y)，以便工具能够被最广泛的用户使用。7.6 版本改进了布尔控件的可访问性结构，以提供更好的屏幕阅读器体验 (#24418)。
• 背景主题：我们添加了一个新的主题变量 appPreviewBg，用于控制预览区域的背景颜色 (#24575)。由于多种原因，我们在 7.0 中将背景默认为白色，这破坏了暗模式测试。新变量重新支持了这一功能。
• 设备视口：就像你那还在使用过时手机的爸爸一样，Storybook 的 Viewports 插件已经落后时代几年了。7.6 版本通过为所有最新的 iPhone 提供视口定义来修复此问题 (#24777)。

通过 CLI 使用 storybook-doctor 诊断问题

多年来，我们支持了成千上万的用户升级他们的 Storybook。这促使我们创建了 automigrations——在每次升级时自动运行的 codemods，让你的生活更轻松。但有些检查并非针对特定升级，更适合监控项目的一般健康状况和排除故障。

这就是新的 storybook doctor 命令的用武之地 (#22236)。它会执行项目的一般健康检查，例如检查以下情况：

• 项目包含不匹配的 Storybook 版本
• 项目包含重复的依赖项
• 项目包含不兼容的插件

对于找到的每个问题，它都会描述问题并提供参考和可能的后续步骤。

插件：React 被移除作为 peer dependency

Storybook 7 的主要成就之一是正式支持了 pnpm，这是我们新的首选包管理器。但这也有代价，那就是我们要求用户在其项目中将 React 作为 peer dependency 安装。这理所当然地让非 React 用户感到不快。

现在，为了准备 Storybook 8，我们正在清理这个问题。Storybook 7.6 移除了所有 Storybook 包中对 React 的 peer dependency 要求 (#24676)，Storybook Docs (@storybook/addon-docs) 除外，我们计划在 8.0 中解决这个问题。如果你是插件作者，请参阅我们的迁移指南，了解如何从你的插件中移除 React peer dependency。

Vue、Angular、Web Components、Svelte、Ember、Solid 和 Qwik 用户：我们期待很快就能从你们的 package.json 中移除 React！

全新改进的文档网站

我们借着 7.6 发布的契机，让 Storybook 的文档网站更加有用和清晰。最大的变化是，我们现在会记住你偏好的 renderer（React、Vue、Angular、Web Components 等）、包管理器（npm、pnpm、yarn）和代码语言（TypeScript、TypeScript 4.9+、JavaScript）。这使得我们可以从 URL 中移除 renderer 信息，确保当你访问文档链接时（即使是包含 renderer 的旧链接），你的偏好始终会被记住。选择你的偏好也更加显眼，页面标题下方有标签，相关代码片段旁有菜单。

我们还添加或完善了一些设计元素，例如：

• 新增右侧边栏，包含“本页目录”
• 简化的头部和侧边栏导航
• 更清晰的代码片段设计，包括对 Vue 和 Svelte SFCs 的语法高亮支持

我们希望这些更新能为你学习 Storybook 提供更有帮助的体验。与 SB 7.6 版本的其余部分一样，这项工作也为未来更多改进奠定了基础。

Storyshots 和 Vue2 已弃用

最后，为了让 Storybook 不断向前发展，我们不得不放弃一些东西。

• Storyshots. Storyshots (@storybook/addon-storyshots) 是 Storybook 最初的测试解决方案。它提供了自动快照测试和丰富的可配置性。然而，它与 Storybook 7 的高性能 按需架构 从根本上不兼容，并且存在其他限制。因此，我们在 2021 年创建了它的继任者 Storybook test-runner。两年过去了，我们计划在 Storybook 8 中移除对 Storyshots 的支持。为此，并为了提前告知用户，我们在 7.6 版本中弃用了 Storyshots。我们还创建了迁移指南，帮助现有用户迁移到向前兼容的解决方案。
• Vue2. 同样，Storybook 8 将停止对 Vue2 的支持。此举与 Vue 核心团队决定在今年年底结束 Vue2 生命周期 (RFC: Discontinue Vue2 support in SB8) 的时间一致。有关此决定的更多信息，请参阅我们的 RFC。

8.0 – 我们来了！

Storybook 7.6 结束了 7.x 系列版本的发布，该系列见证了 Storybook 和我们的开发流程的诸多变化。

我们从季度发布变为每两周快速发布 7.2/3/4。这速度太快了，因此我们调整回每六周发布一次次要版本 7.5 和 7.6。

接下来，我们将把注意力转向 Storybook 8 (SB8)，这是我们年度的主要版本。SB8 将专注于性能和兼容性，这将是 7.x 系列数月准备工作的巅峰之作！

升级到 Storybook 7.6

要升级到 Storybook 7.6，运行

# Upgrade your Storybook to 7.6
npx storybook@latest upgrade

有关从 Storybook 7 之前的版本升级的指南，请参阅 Storybook 7 迁移指南。

或者，对于全新安装，使用以下命令将 Storybook 引导集成到现有应用程序中

# Install a fresh Storybook
npx storybook@latest init

致谢

向 Storybook 7.6 中提交了 PR 的 40 位贡献者致以崇高的敬意！包括：@cdedreuille, @dannyhw, @epreston, @halitiince, @henkerik, @ianvs, @integrayshaun, @joevaugh4n, @jonniebigodes, @jreinhold, @kasperpeulen, @kota-kamikawa, @kshmidt-digma, @kuriacka, @kylegach, @lucavazz, @maheshchandra10, @martinnabhan, @mickmcgrath13, @ndelangen, @nikospapcom, @paoloricciuti, @piratetaco, @samvv, @shilman, @speelbarrow, @taozhou-glean, @thapasusheel, @tmeasday, @tomo5524, @valentinpalkovic, @vanessayuenn, @wilson2k, @wjdtjdgns, @wouterk12, @wuzhuobin, @xueyawei, @yannbf, 和 @yoshi2no。