likes
comments
collection
share

Storybook 7 来了：迄今为止最大的更新

作者站长头像
站长
· 阅读数 11

首发于公众号 前端从进阶到入院，欢迎关注。

Hi 大家好我是 ssh，在公司项目中，我们编写组件文档支持都是用的 Storybook，总体来说体验很好，当然我也遇到了一些问题，比如说依赖容易安装失败或编译失败，需要深度配置 webpack 等等，这两天看到 Storybook 宣布它们发布了 7.0 版本，而且据他们说是一次最重大的更新。看起来好像解决了很多我在使用过程中的痛点，下面我来和大家一起分享 Storybook 7.0 - Next-level component development and testing：

正文

Storybook 是高标准的 UI 工作套件。由于其无与伦比的框架兼容性和丰富的开发、文档和测试功能，它被广泛应用于许多行业中的团队，包括 Monday.com、The Guardian、Intuit 等等。

我很高兴地宣布 Storybook 7 的发布（SB7），这是我们两年多来的首个重大发布，也是迄今为止最大的更新。

新版本包括：

  • ⚡ 一流的 Vite 支持
  • 🧩 通过新的 Frameworks API，对 NextJS 和 SvelteKit 进行零配置支持
  • 🔖 Component Story Format 3，增强了类型安全性
  • 📝 文档大修：支持 MDX2 和简化的文档 block
  • 💅 全新的 UI 设计
  • ✅ 改进的交互测试和测试覆盖率
  • 🚥 通过预打包和生态系统 CI 增强稳定性
  • 💯 在各个层面上进行了数百项改进

请继续阅读，了解 Storybook 7 带来的所有改进。这些改进还在Storybook Day的演示中进行了总结分享。

Storybook：下一个篇章

Storybook 始于 2016 年。从那时起，我们开创了组件驱动开发、文档和测试的 UI 工作环境的概念。

在此期间，前端生态系统发生了巨大变化。IE11 终于退出了舞台。TypeScript 正在迅速占领 JavaScript 领域。Vite、Turbopack 和 Rspack 给 Webpack 带来了严峻的竞争。而 pnpm 现在成为了一个重要的 npm 替代品。

Storybook 随着这些变化不断发展，并长期支持主流惯例和新兴的最佳实践。例如，我们早在 2021 年中就开始支持 Vite，远早于它取得现在的成功。

然而，渐进式的适应是困难的。有时，你需要一个重大发布版本来清理桌面并现代化你的技术栈。Storybook 7 就是这样一个版本！

全新的 UI 设计

现在，通过 Storybook 7 简洁的用户界面，你可以比以往更轻松地构建出色的用户界面。画布尺寸已经扩展到边缘，为你的组件提供更多空间。我们通过改进间距和减弱菜单的方式增强了侧边栏，同时保持信息密度不变。此外，我们重新绘制了 200 多个自定义图标，使其具有更清晰的视觉效果和更快的加载速度。另外还有自动夜间模式！

Storybook 7 来了：迄今为止最大的更新

Storybook 7 来了：迄今为止最大的更新

预打包以加快启动速度和消除依赖冲突 Storybook 应用程序现在以预编译的代码库形式发布，无需你自己进行编译。这意味着启动速度更快，不再有依赖冲突的困扰。你再也不用为安装 Storybook 依赖项而困扰了。

对 Vite、NextJS 和 SvelteKit 的零配置支持

Storybook 7 来了：迄今为止最大的更新

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 来了：迄今为止最大的更新

Storybook 7 通过将 Component Story Format 3（CSF3）作为默认格式，对编写 stories 进行了重大改进。相比之前的版本，CSF3 有两个主要优点：简洁性和可重用性。它通过丢弃大量样板代码来简化你的代码，并自动化 stories 的各个方面，如标题和侧边栏位置。详细信息请阅读Component Story Format 3 已发布。

改进的类型安全性

我们在 CSF3 中改进了对 TypeScript 的支持。更严格的类型提供了更好的编辑器检查和自动补全，为 TypeScript 用户带来了巨大的提升。有关详细信息，请查看。

CSF3 迁移

我们提供了一个自动将现有 stories 转换为 CSF3 语法的代码转换工具，以节省你升级的时间。但是，SB7 完全向下兼容 - 因此，如果你还没有准备好升级，你不需要做任何更改。

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

具有 MDX2 支持的文档大修

Storybook 7 对 Storybook Docs 进行了大修，这是 SB7 中最大的改变，相比以前的 Storybook 有了显著的改进。

以组件为中心的自动文档生成

在 Storybook 7 中，你现在可以直接将文档附加到你的组件上。页面会出现在侧边栏中，与组件的 stories 一起显示，而不是以前的选项卡式用户界面。

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

Storybook 7 来了：迄今为止最大的更新

带有 MDX 2 加持的手动文档编写

Storybook 7 通过支持 MDX2 提供了增强的手动文档编写功能。它带来了许多好处——包括性能和编写体验的改进。新版本编译速度提高了 25%，生成的代码运行速度提高了两倍。此外，它对在 JSX 元素内嵌套 markdown 提供了更好的支持。

为了适应一些重大变化，Storybook 将在 7.x 时间范围内继续支持 MDX1 的选择性支持，以确保我们的用户平稳过渡。

使用 MDX 引用导入 stories

Storybook 7 来了：迄今为止最大的更新

Storybook 7 鼓励所有用户在 CSF3 中定义 stories，然后在 MDX 中引用它们。这样，你既可以在编写 stories 时进行类型检查和自动完成，又可以使用 markdown 方便地编写内容。你可以使用下面的 Storybook 7 迁移脚本将现有的 MDX story 文件拆分为单独的 MDX 和 CSF 文件。

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

新的文档 Blocks API - 强大而简单

为了使你的文档更加高效，我们引入了一组更强大和一致的文档 Blocks。这些 UI Blocks 负责从渲染 stories 到显示源代码和生成参数表格的所有工作。它们可以使用of={}语法引用 stories，这比引用 story ID 字符串更安全和更简洁。此外，我们还提供了一个useOf 钩子，用于创建自定义文档 Blocks，让你根据特定要求自定义文档页面。

在官方文档里可以了解更多有关这些变化的信息。

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

Storybook 7 来了：迄今为止最大的更新

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

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

覆盖率报告

在 Storybook 7 中，我们通过添加代码覆盖率来改进测试支持，以扫描代码中未经测试的 edge case。它帮助你编写更全面的测试，并增强你对所发布的 UI 的信心。详细信息请阅读使用 Storybook 测试运行器进行代码覆盖率。

Storybook 7 来了：迄今为止最大的更新

组合步骤

为了使你能够将测试交互变成易读的组合，我们为 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"));
    });
  },
};

Storybook 7 来了：迄今为止最大的更新

生态系统 CI，实现更好的稳定性和平滑升级

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

为了实现这一目标，我们创建了 Storybook 生态系统 CI。这个功能会对 Storybook 的 PR 进行大量标准项目配置的矩阵测试。这些测试结果在一个公共的状态页面上进行可视化展示，显示 Storybook 的每日结果，并提供了 Storybook 稳定性的快照。如果你注意到某些功能似乎存在问题，请查看此页面查看 Storybook 的状态。

详细信息请阅读Storybook 生态系统 CI。

Storybook 7 来了：迄今为止最大的更新

更容易配置的样式插件

Storybook 7 来了：迄今为止最大的更新

使用 Storybook 设置样式工具对许多开发人员来说是一个常见的挑战。虽然有很多文章介绍了这个过程（包括我们的博客上的几篇文章），但这些文章并不总是及时更新，带来了很多的困扰。

为了让这个过程更加简单和直观，我们创建了一个新的样式插件。这是一个与常用工具（如 Tailwind、Material UI、Chakra、Emotion、Styled-components、SASS 和 PostCSS）无缝配合的框架无关的解决方案。

样式插件使你能够加载和应用全局样式到你的组件上，以及使用主题 Providers 包装 stories。甚至还提供了一个主题切换器，让你轻松切换主题。或者，你可以使用参数在 story 级别覆盖主题值。

简单上手，请查看：样式插件：在 Storybook 中配置样式和主题

数以百计的其他改进

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

请浏览完整的更新日志，了解 Storybook 7 中的所有改进和变化。

现在就升级吧！

要升级你的 Storybook，请运行以下命令：

npx storybook@latest upgrade

这将更新 Storybook 的依赖项到最新版本。它还会运行自动迁移工具。在升级过程中，你将被提示允许升级任务，并提供有关任何必要更改的信息。

为了减少各种问题，我们编写了一个迁移指南，以帮助你成功地从 Storybook 6.x 升级到 Storybook 7.0！

插件升级

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

这对你有何影响？

对于插件用户：所有 Storybook 的核心插件都已经更新，并可以在 Storybook 7 中使用。

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

当出现这种情况时，请在插件的 GitHub 存储库上开一个 Issue，并友好地要求作者将其插件更新为与 SB7 兼容。此外，请在Storybook 仓库上创建一个问题，通知 Storybook 团队，特别是如果这是一个导致关键故障的热门插件。

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

获取支持

如果在迁移过程中遇到问题，请在 Discord 的#support频道中与维护人员进行交流。我们将尽力解答问题并修复错误。

未来计划

Storybook 7 是一个重要的里程碑。整个团队都在努力帮助你升级，并解决在预发布期间可能遗漏的任何错误和使用情况。

在这个过程中，我们学到了很多东西，未来，我们计划以不同的方式开发和发布 Storybook。

年度重大版本发布 堆积多年的重大变更会带来很多困扰。

  • 对于等待重大变更的用户来说是痛苦的（例如放弃 Webpack4、MDX1 等）。
  • 对于升级的用户来说是痛苦的，需要进行许多迁移步骤（即使我们已经自动化了很多操作，仍然可能出现很多问题）。
  • 对于团队来说，维护已弃用的 API 并协调像 v7 这样的大版本发布也是一种痛苦。

将变更打包到更小、更频繁的发布中，应该能够使未来的升级对所有人来说更加平滑。同时，自动迁移的改进将大大减少额外的麻烦。

巩固抽象概念 Component Story Format 3 是我们在六年内撰写 stories 的第四个迭代版本。每一步都是渐进的，并且有自动化的代码转换，但对于我们的用户来说，这一路走得并不顺畅。

我们认为 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，创建问题或提交拉取请求。在Open Collective上进行捐赠。在Discord与我们进行交流 ——通常都有维护人员在线。通过Twitter或通过在下方邮件列表上注册，了解 Storybook 的最新消息。

首发于公众号 前端从进阶到入院，分享 Vue 源码 / React / TS / 浏览器 / 工程化等各个前端领域，我的文章帮助了很多小伙伴进入大厂，欢迎关注。

转载自:https://juejin.cn/post/7253841547165696061
评论
请登录