Storybook 7.5

Storybook 是 UI 工作坊环境的黄金标准。行业内的团队，如 across the industry 的团队，如 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 重命名字体导入
• 🔨 修复 Webpack 5 构建错误未被传播的问题

Vite 5 支持

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 将 the Mealdrop project （我们将其用于许多测试）的启动时间从 8.9 秒缩短到 4.0 秒！

storiesOf 和 storyStoreV6 已正式弃用

storiesOf 是我们最初用于创建 Storybook stories 的 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 中继续动态生成 stories 的更多信息.

改进的 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 Canary 版本设置了监控。这会自动检查 Storybook 是否与最新的 Next.js Canary 版本一起运行，这意味着我们可以更快地发现错误并进行修复！

Angular 改进：argsToTemplate

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

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

尝试 argsToTemplate

在您的 story 中，将 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 修复了该错误，并且该行为现已恢复。这意味着您现在可能会看到更多以前没有的警告。修复它们可能有助于提高 Storybook 的性能！

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

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 版本升级的指南，请查看 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://127.0.0.1/aNbgrbIwHs pic.twitter.com/6Lmml325KZ

— Storybook (@storybookjs) October 19, 2023