Storybook 7.5

Next.js 改进、增强的 Angular 支持，以及 React TypeScript 项目启动速度提升 2.2 倍

Michael Shilman

2023 年 10 月 18 日 — @mshilman

最后更新 2023年10月20日

Storybook 是 UI 工作室环境的黄金标准。它被行业广泛使用，例如 Monday.com、The Guardian、Intuit 等团队，用于开发、记录和测试 UI。

今天，我们非常激动地推出 Storybook 的最新版本：Storybook 7.5！ 它带来了一系列新功能，增强了 Storybook 的体验。

让我们一探究竟！

⚡️ 支持 Vite 5 和 Lit 3.0
💨 React TypeScript 项目启动时间提速 2.2 倍
👻 `storiesOf` 和 `storyStoreV6` 正式弃用
✨ 许多 Angular 的改进：`argsToTemplate`、新的 CLI 调试选项、对独立指令的支持等。
🀄️ 支持 Next.js 的重命名字体导入
🔨 修复 Webpack5 构建错误未被传播的问题

Vite 5 支持

The Storybook and Vite logos, connected like jigsaw puzzle pieces.

Storybook 7.0 的主要亮点之一是正式引入了对 Vite 的零配置支持。由于其极具竞争力的速度，Vite 已迅速成为生态系统中最受欢迎的构建器之一。

在 Storybook 7.5 中，我们为与 Vite 的下一个版本：Vite 5.0 集成奠定了基础！Storybook 7.5 将 Vite 5 作为对等依赖项，并动态导入所有 Vite 函数以强制使用 ES 模块（因为 Vite 5 会弃用 CJS 方法）。

React TypeScript 项目启动时间提速 2.2 倍

Storybook 7.5 将 `react-docgen` 升级到 6 版本。此更改是使 `react-docgen` 成为 Storybook 8 中自动生成控件的默认设置的前奏。

此次升级极大地改善了 Storybook 对 TypeScript 类型的处理，并大幅缩短了大型 React Storybook 的启动时间。例如：`react-docgen 6` 将 Mealdrop 项目（我们用于许多测试的项目）的启动时间从 8.9 秒缩短到 4.0 秒！

`storiesOf` 和 `storyStoreV6` 正式弃用

`storiesOf` 是我们创建 Storybook 故事的原始 API。在 2019 年（Storybook 5.2），它被组件故事格式 (CSF) 取代——一种更简单、更便携、性能更好的继承者。

自推出 CSF 以来，新版本的 Storybook 一直支持 `storiesOf`。这给了 CSF 成熟的时间，并为 Storybook 用户提供了迁移的时间。

现在已经过去四年了。CSF 已经迭代到第三个版本，并且几乎被所有 Storybook 项目使用。因此，我们以此为契机，正式弃用对 `storiesOf` 和 `storyStoreV6` 的支持。

如果您仍在使用 `storiesOf`，可以使用以下两个脚本开始迁移：

# 1. Convert storiesOf to CSF
npx storybook@latest migrate storiesof-to-csf --glob="**/*.stories.tsx" --parser=tsx

# 2. Convert CSF 2 to CSF 3
npx storybook@latest migrate csf-2-to-3 --glob="**/*.stories.tsx" --parser=tsx

了解更多关于弃用的信息以及如何在 CSF 中继续动态生成故事.

改进的 Next.js 支持

我们在 Storybook 与 Next.js 的工作方式上做了一些改进。

首先，Next.js 用户现在可以将 `next/font/` 的导入语句别名为 Storybook。

// Place this import in any relevant file – even in your stories

import { Inter as FontSans } from 'next/font/google'

export const fontSans = FontSans({
  subsets: ['latin'],
  variable: '--font-sans'
})

我们还修复了 `next/font` 在 Windows 机器上无法正常工作的问题。

最后，我们为 Next.js 候选版本设置了监控。这会自动检查 Storybook 是否与最新的 Next.js 候选版本一起运行，这意味着我们可以更快地发现 bug 并进行修复！

通过 `argsToTemplate` 改进 Angular

Storybook 7.5 为 Angular 引入了 `argsToTemplate` 功能，旨在简化 Angular 组件模板的生成。此函数简化了 Storybook 故事中属性和事件绑定的处理。

`argsToTemplate` 的一个显著好处是它解决了 Angular 在属性绑定中如何处理未定义值的问题，这常常导致误解。有了这个实用工具，现在对 Storybook 控件有了增强的支持，确保它们与 Angular 的标准行为更好地对齐。

尝试 `argsToTemplate`

在您的故事中，将 `argsToTemplate` 集成到模板字符串中，如下所示：

import { argsToTemplate } from '@storybook/angular';

export const Default: Story = {
  render: (args) => ({
    props: args,
    template: `<app-template ${argsToTemplate(args)}></app-template>`,
  }),
};

您的参数将正确地映射到属性和事件绑定！

其他 Angular 亮点

为 Angular Storybook 构建器添加了更多构建器选项：debugWebpack、webpackStatsJson 和 previewUrl（#24388）
现在可以在 Storybook 中使用独立指令（#24448）
添加了 zone.js v0.14.x 支持（#24367）

修复 Webpack 5 构建错误未被传播

在 Storybook 7 中，当 Storybook 处于开发模式时，Webpack 编译错误不会传播到终端。在 Storybook 6.5 中是这种情况。由于 `webpack-dev-middleware` 库的更改，它停止工作了。

Storybook 7.5 修复了该 bug，并且该行为已恢复。这意味着您现在可能会看到以前不存在的更多警告。修复它们可能有助于提高 Storybook 的性能！

如果您想自定义 Storybook 提供的日志级别，可以在 `storybook/main.ts` 文件中配置 logLevel 选项。

Lit 3.0 支持

最后，Storybook 7.5 还带来了对 Lit 3.0 的支持！

Lit 是开发 Web 组件的领先库之一。新的 Lit 3.0 是 Lit 团队自 2021 年初以来的第一个主要版本。

要继续在您的 Lit 3 项目中使用 Storybook，请立即升级到 Storybook 7.5！

升级到 Storybook 7.5

要将您的 Storybook 升级到 7.5，请运行：

# Upgrade your Storybook to 7.5
npx storybook@latest upgrade

有关从早于 Storybook 7 的版本升级的指南，请查看 Storybook 7 迁移指南。

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

# Install a fresh Storybook
npx storybook@latest init

鸣谢

Storybook 由 1,000 多名社区贡献者和 Chromatic 的核心 Storybook 团队构建。我们非常感谢所有为此版本做出贡献的人！包括：

@almoghaimo, @anneau, @arup1221, @atreay, @bkfarnsworth, @bryanjtc, @cdedreuille, @chocoscoding, @decherneyge, @greut, @ianvs, @integrayshaun, @irangarcia, @j3rem1e, @johnhunter, @jonniebigodes, @jonthenerd, @jreinhold, @json-betsec, @julien-deramond, @kasperpeulen, @kbazilio, @kylegach, @legnaleurc, @martinnabhan, @masaya48, @mastrzyz, @mrzillagold, @natehouk, @ndelangen, @nsheaps, @omahs, @oruman, @osnoser1, @pure-js, @rohanpoojary1107, @roottool, @seriouz, @shilman, @sidnioulz, @stropitek, @tmeasday, @valentinpalkovic, @vanessayuenn, @wesgro, @yannbf, @yoshi2no, @yossisaadi

参与进来

有很多方式可以参与到 Storybook 社区中！

如果您有兴趣为 Storybook 做贡献，请在 GitHub 上查看 Storybook — 提出一个 issue，或提交一个 pull request。
在 Discord 上与我们聊天，分享您的技能，并帮助其他用户学习 Storybook。
请在 Twitter、LinkedIn 或通过我们的邮件列表保持与 Storybook 新闻的同步。

Storybook 7.5 现已发布！它带来了大量改进，增强了 Storybook 的体验。

⚡️ Vite 5.0 + Lit 3.0 支持
💨 React TypeScript 启动时间提速 2.2 倍
`storiesOf` 已弃用
🅰️ 许多 Angular 改进
🀄️ 重命名 @nextjs 字体导入https://#/aNbgrbIwHs pic.twitter.com/6Lmml325KZ
— Storybook (@storybookjs) 2023年10月19日