Storybook 7.5

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

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 story 的原始 API。2019 年（Storybook 5.2），它被 组件 Story 格式 (CSF) 取代——一个更简单、更易移植、性能更好的后继者。

自从引入 CSF 以来，Storybook 的新版本一直支持 storiesOf。这给了 CSF 成熟的时间，也给了 Storybook 用户进行迁移的时间。

四年过去了。CSF 已发展到第三个版本，几乎所有 Storybook 项目都在使用它。因此，我们借此机会正式弃用对 storiesOf 和 storyStoreV6 的支持。

如果您仍在 A 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 版本一起运行，这意味着我们可以更快地发现错误并进行修复！

带有 argsToTemplate 的 Angular 改进

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

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 中，Webpack 编译错误在 Storybook 处于开发模式时不会传播到终端。而这在 Storybook 6.5 中是正常工作的。由于对 webpack-dev-middleware 库进行了更改，它停止了工作。

Storybook 7.5 修复了该错误，并且该行为现已恢复。这意味着您现在可能会看到以前没有的更多警告。修复它们可能有助于使您的 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 由 1000 多名社区贡献者和 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 贡献代码，请访问 Storybook 的 GitHub 页面——创建议题或提交拉取请求。
• 在 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日