Storybook 7.0

下一代组件开发和测试

Michael Shilman

2023年4月3日 — @mshilman

上次更新 2023年4月12日

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

今天，我很高兴地宣布 Storybook 7 (SB7)，这是我们两年多以来的首次重大发布，也是有史以来最大的一次发布。

它包括

⚡ 一流的 Vite 支持
🧩 由新的 Frameworks API 驱动的 NextJS 和 SvelteKit 零配置支持
🔖 具有改进的类型安全性的组件故事格式 3
📝 文档大修：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。请在 SvelteKit 的 Storybook 中阅读更多内容。

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

具有改进的类型安全性的 CSF3

Storybook 7 通过使组件故事格式 3 (CSF3) 成为其默认格式，对编写故事进行了重大改进。CSF3 比早期版本具有两个主要优势：简洁性和可重用性。它通过丢弃大量样板代码来简化您的代码，并自动执行故事的各个方面，例如标题和侧边栏位置（基于磁盘位置）。请在组件故事格式 3 已问世中阅读更多内容。

改进的类型安全性

我们改进了 CSF3 中的 TypeScript 支持。更严格的类型提供了更好的编辑器内检查和自动完成功能，这代表了 TypeScript 用户生活质量的巨大提升。有关完整简报，请查看

CSF3 迁移

我们提供了一个代码模组，可以自动将您现有的故事转换为 CSF3 语法，从而节省您升级的时间。但 SB7 完全向后兼容 – 因此，如果您尚未准备好升级，则无需更改任何内容。

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

具有 MDX2 支持的文档大修

Storybook 7 对 Storybook 文档的全面改革是 SB7 中最大的变化，标志着相对于以前的 Storybook 来说，有了巨大的改进。

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

在 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"

新的文档块 API – 功能强大但简单

为了使您的文档更有效，我们正在引入一组更强大且更一致的文档块。这些 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 设置样式工具对许多开发人员来说是一个常见的挑战。虽然有很多相关文章（包括我们博客上的几篇），但这些文章并不总是最新的，导致令人头疼的问题和耗时的设置过程，其中充满了反复试验。

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

样式插件使您能够加载全局样式并将其应用于您的组件，以及使用主题提供程序包装故事。它甚至具有主题切换器，允许您轻松地在主题之间切换。或者，您可以使用参数在故事级别覆盖主题值。

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

数百项更多改进

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

pnpm 支持。 不再需要令人羞愧的提升！
Angular 改进。 更好的安装。修复了数十个错误。
Vue3 改进。 源代码片段、插槽支持。
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。我们将尽力帮助解答问题和修复错误。

未来的道路

Storybook 7 是一个重要的里程碑。整个团队都在全力以赴帮助您升级并解决我们在预发布期间遗漏的任何错误和用例。

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

年度重大版本发布
多年来积累的重大更改会造成很多痛苦。

等待重大更改的用户（放弃 Webpack4、MDX1 等）的痛苦
使用众多迁移步骤升级用户的痛苦（即使我们已经自动化了很多，仍然有很多地方可能出错）。
团队维护已弃用的 API 并协调像 v7 这样的超级版本的痛苦。

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

固化抽象
组件故事格式 3 是我们在六年内如何编写故事的第四次迭代。一路走来的每一步都是渐进式的，并且都有自动代码模组，但对于我们的用户来说，这都是一段坎坷的旅程。

我们认为 Storybook 7 在很多方面都做得对，并希望未来的重大版本更多地围绕支持各种工具的最新版本，而较少地围绕重新设计如何开发、记录和测试组件的基本原理。

除此之外，我们对 2023 年有宏伟的计划。

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

框架支持
Storybook 7 为框架支持设定了标准，为 Vite、NextJS 和 SvelteKit 提供了卓越的体验。我们将继续改进这些集成，并且随着我们继续与 Storybook 社区合作构建，将会出现更多集成。

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

测试
Storybook 的 play 函数和测试功能正在改变 UI 开发的游戏规则。SB7 的覆盖率报告填补了一个重要的空白，使其更加有用。我们在这里列出了一长串生活质量方面的改进，我们将在 7.x 中推出这些改进，尤其是在更好的模拟、全页测试和兼容性方面。

参与其中

专业的 UI 开发人员每天都依赖 Storybook。当您采用 Storybook 时，您将获得一套工具、强大的插件和开箱即用的集成，从而加快开发速度。

该项目由 1,600 多名开源贡献者维护，并由指导委员会指导。如果您有兴趣贡献力量，请在 GitHub 上查看 Storybook，创建 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 有史以来最大的更新 – 我们 2 年来的首次重大发布！
⚡️ @vite_js, @nextjs & @sveltejs 的零配置支持
💯 增强的测试、文档、UI、稳定性以及更多

继续阅读：https://#/L8zqHkilis pic.twitter.com/nbmq4jDW6e
— Storybook (@storybookjs) 2023年4月12日