Storybook 7.6

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

• 🔥 改进的 SWC 支持
• 🧪 新的测试实用程序和快速构建模式
• 🔼 NextJS SWC + avif 支持和修复
• 🇸 SvelteKit 页面和导航模拟
• ⚛️ React-docgen 升级
• 🎨 背景主题、视口和改进的 Controls 可访问性
• 🩺 CLI：使用 storybook-doctor 诊断错误！
• 🚫 插件：React 已作为对等依赖项移除
• 📚 全新且改进的文档站点
• 🪦 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 中更新构建器配置

// .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 转发 (#24648) 以及恢复 Jest 兼容性的图像上下文 CJS 导出 (#24885) 进一步增强了 Next.js 的支持！

新的测试实用程序和更快的构建模式

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

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

SvelteKit 页面和导航模拟

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

使用新的 sveltekit_experimental 参数来为自定义页面数据（在故事、元数据或全局级别）提供处理程序和模拟故事。非常感谢 Paolo Ricciuti (@paoloricciuti) 贡献了这些更改。在 Paolo 的博客文章、PR 或 Storybook for SvelteKit readme 中了解更多信息。

最后，7.6 包含 Svelte 装饰器 的关键错误修复 - 用于包装故事的可配置函数。Storybook 不再运行两次装饰器 (#29421)。此外，它现在可以正确显示装饰后的故事，而不会在源代码片段中出现烦人的 SlotDecorator (#24800)！

react-docgen 升级

Storybook 8 中的一项主要性能升级将是切换到 react-docgen 以实现自动生成的控件。这听起来可能很小，但它将使启动时间加快 2 倍或更多。例如：react-docgen 6 将我们的基准 Mealdrop 项目 （我们将其用于许多测试）的启动时间从 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 控件允许您以交互方式试验您的组件。它们在编写时考虑了可访问性 (a11y)，以便最广泛的用户可以使用该工具。7.6 改进了布尔控件的可访问性结构，从而为屏幕阅读器带来了更好的体验 (#24418)。
• 背景主题：我们添加了一个新的主题变量 appPreviewBg，用于控制预览的背景颜色 (#24575)。由于多种原因，我们在 7.0 中将背景默认设置为白色，这破坏了暗模式测试。新变量将其恢复。
• 设备视口：就像您爸爸仍然使用过时的手机一样，Storybook 的 Viewports 插件也落后时代几年。7.6 通过为所有最新的 iPhone 提供视口定义修复了此问题 (#24777)。

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

多年来，我们支持了数千名用户升级他们的 Storybook。这促使我们创建了 自动迁移 – 在每次升级时自动运行的代码转换，让您的生活更轻松。但是，有些检查并非特定于特定升级，而更适合监控项目的总体健康状况和排除错误。

这就是新的 storybook doctor 命令的用武之地 (#22236)。它执行常规项目健康检查，例如：

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

对于它发现的每个问题，它都会描述问题并提供参考和可能的后续措施。

插件：React 已作为对等依赖项移除

Storybook 7 的主要胜利之一是正式支持 pnpm，我们最喜欢的新包管理器。但这需要付出代价，那就是我们要求用户将 React 作为对等依赖项安装到他们的项目中。这自然而然地给非 React 用户留下了不好的印象。

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

Vue、Angular、Web components、Svelte、Ember、Solid 和 Qwik 用户：我们期待不久的将来，您可以从 package.json 中删除 React！

全新且改进的文档站点

我们已将 7.6 发布视为一个契机，使 Storybook 的文档站点 更加有用和清晰。最大的变化是我们现在记住您首选的渲染器（React、Vue、Angular、Web Components 等）、包管理器 (npm、pnpm、yarn) 和代码语言（TypeScript、TypeScript 4.9+、JavaScript）。这使我们能够从 URL 中删除渲染器，确保当您访问文档链接时（即使是包含渲染器的旧链接），始终会记住您的首选项。选择您的首选项也更加明显，页面标题下方的药丸和附加到相关代码片段的菜单即可体现。

我们还添加或改进了许多设计元素，例如：

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

我们希望这些更新将在您了解 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：在 SB8 中停止对 Vue2 的支持。

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

鸣谢

衷心感谢 40 位贡献者，他们的 PR 出现在 Storybook 7.6 中！包括：@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。