宣布 Storybook 3.4

各位，又到了这个时候了：我们很高兴宣布 Storybook 的最新迭代版本，这款屡获殊荣的软件用于在 React、React Native、Vue、Angular 和 Polymer 中开发、测试和文档化 UI 组件。🍾🥂😅

Storybook 3.4 已发布到 NPM registry，这是一个重要版本。它包括：

• 新增框架支持：Polymer！
• 组件测试：Storyshots 图像快照，Vue/Angular 支持
• UI 改进：多层级故事结构
• Storysource：用于组件代码文档的新插件

继续阅读以了解改进详情和简要状态更新！

🎁 Polymer 支持

我们很荣幸将 Polymer 添加到我们不断增长的支持框架列表中。这是继 3.2 版的 Vue 和 3.3 版的 Angular 之后自然的延续。Polymer 的支持由来自 Xebia 的 Stijn Koopal, Norbert de Langen, Teije van Sloten, 和 Léon Rodenburg 贡献。🙏

Storybook for Polymer 除了支持 Polymer，还支持原生的 custom elements 和纯 HTML。所以如果你想用 HTML 编写简单的示例，或者更专注于 CSS/SASS 组件，它也非常有用。

和往常一样，将 Storybook 添加到你的 Polymer 项目中非常容易

npm i -g @storybook/cli
cd my-polymer-project
getstorybook
npm run storybook

Stijn 写了一篇精彩的入门文章，详细介绍了如何使用 Storybook for Polymer，所以请查看一下！

📸 图像快照

3.4 版的第二个重大改进是 StoryShots 的 图像快照 功能，由 Thomas Bertet 无私贡献。🔥

在 3.4 版本之前，StoryShots 使用 Jest 的 DOM 快照功能来计算组件版本之间的差异，并在渲染发生变化时自动通知开发人员。DOM 差异比较可以捕获许多回归问题，但无法捕获纯视觉上的变化，例如 CSS 更新引起的变化。

在图像快照中，渲染后的图像被保存到磁盘上，这样任何类型的视觉变化（包括 DOM 变化以及 CSS 变化等）发生时都能被捕获。

要使用最简单的配置来使用图像快照，请调用带有自定义测试的 initStoryshots

import initStoryshots, { imageSnapshot } from '@storybook/addon-storyshots';

initStoryshots({ suite: 'Image storyshots', test: imageSnapshot() });

要了解更多信息并查看其他配置模式，请参阅 StoryShots 文档。目前所有平台都支持图像快照，React Native 除外。

✨ Vue/Angular 的 StoryShots

3.4 版本还改进了 StoryShots，增加了对 Vue 和 Angular 的支持。这项工作是由 Igor Davydkin 在他生日那天贡献的，这是送给 Storybook 社区的一份令人难以置信的礼物。🎁

StoryShots 会尝试根据你的项目依赖项推断项目类型，但你也可以使用 framework 选项手动指定，该选项当前可以取以下值之一：undefined, 'react', 'react-native', 'vue', 'angular'。例如：

import path from 'path';
import initStoryshots from '@storybook/addon-storyshots';

initStoryshots({
  framework: 'vue',
  configPath: path.join(__dirname, '.storybook'),
});

更多信息请参阅 StoryShots 文档。

🌿 多层级故事结构

Storybook UI 也通过多层级故事结构得到了改进。这项改进由 Max Meinders 贡献，允许你在 UI 中将故事分组到可视化的部分

要进行设置，有一个新的配置选项 hierarchyRootSeparator。例如，以下设置允许你创建故事组

import { setOptions } from '@storybook/addon-options';

setOptions({
  hierarchySeparator: /\//,
  hierarchyRootSeparator: /\|/,
});

storiesOf('Group1|path/to/component1')
  .add('one', () => ...)
  .add('another', () => ...)
  
storiesOf('Group1|path/to/component2')
  .add(...)
  
storiesOf('Group2|component3')
  .add(...)

更多信息请参阅 addon-options README。

📄 Storysource 插件

作为一个额外的福利，Igor Davydkin 还将他的 Storysource 插件 偷偷添加到了 3.4 版本中。Storysource 在 Storybook 的插件面板中显示你的故事代码，让观看者可以并排浏览组件的使用方式及其输出行为。

Storysource 是我们目前为止文档化组件最直接的方式，而且很容易添加到你的项目中。首先，安装插件：

yarn add --dev @storybook/addon-storysource

然后，将库导入到你的 addons.js 文件中：

import '@storybook/addon-storysource/register';

最后，向自定义的 webpack.config 添加一个钩子，这将允许插件自动处理你的所有故事：

module.exports = {
  module: {
    rules: [
      {
        test: /\.stories\.jsx?$/,
        loaders: [require.resolve('@storybook/addon-storysource/loader')],
        enforce: 'pre',
      },
    ],
  },
};

更多 Storysource 的使用选项请参阅 包的 README。关于技术细节，Igor 写了一篇精彩的文章，解释了它在底层是如何工作的。

💥 还有更多！

Storybook 3.4 包含了数百项其他改进。从诸如向 addon-info 添加代码示例“复制按钮”之类的良好细节（#2713）到基于用户在 3.3 版本中反馈的众多 Angular 改进（#2690, #2669, #2735）。完整列表请参阅我们的 CHANGELOG。

底层最大的变化之一是一次重大的重构，我们添加了一个与框架无关的核心库，以支持 React、Vue、Angular、Polymer 以及未来更多框架（#2241）。这使得向 Storybook 添加新框架以及维护我们不断增长的框架集合变得更加容易。如果你想为你喜欢的框架添加支持，请在 Twitter、Slack 或 Github 上与我们联系，我们将在下个版本中帮助你实现它！

📈 不断向前，向上发展

Storybook 3.4 继续了由社区驱动的一系列出色版本。我们已经超越了

• GitHub 上 2.2 万+ 星标和 400+ 贡献者
• NPM 上每周 20 万+ 下载量

Storybook 最近还在 2018 年 React Amsterdam 大会上获得了“对社区最有影响力的贡献”奖。在这里阅读相关信息！

如果 Storybook 为你的 UI 开发过程带来了愉悦和效率，请考虑帮助改进 Storybook。无论是贡献本篇文章中描述的新功能，修复 bug（我们也确实有 bug），还是帮助改进文档，每个版本的发布都涉及大量工作。请在 Slack 上加入我们，在 Open Collective 上给予我们财务支持，或者直接参与 Github 上的贡献。

非常感谢为这个版本做出贡献的杰出社区成员：@9034725985 @aaronfullerton @abrahamgnz @adrukh @alexandermikuta @alfredo-delgado@alterx @anescobar1991 @arty-name @aseeto @avol-io @aymeric-duchein @benbakhar @chentsulin @christiandavis @clehnert-psl @cliedeman @cshell7 @danawhite @dangreenisrael @danielduan @davidkwan95@dependencies-bot @derekshull @dfdeagle47 @ersel @felipedeboni @fredyc @getsetbro @godban @gongreg @guylivni @hswolff @hypnosphi @igor-dv @javidjamae @jayandcatchfire @jdonor @jeffcarey @jonrimmer@juristr @kazupon @kevinsuttle @kiwka @kn0ll @kt3k @lachlanjc @m10l @markelog @matissjanis @mehandes @meros @metronom72 @mloughry @mnicole @mshaaban088 @mynnx @nblackburn @ndelangen @outspaced @pascalduez @paul42 @playfulcorgi @preya @primigenus @psimyn @punitgr @quramy @rhalff @richardbray @seberik @sec0ndhand @shilman @simon360 @sixmen @superol3g @sw-yx @telichkin @theneva@thomasbertet @tmeasday @tniezg @tsiq-swyx @vcarl @wuweiweiwu @x1c0 @yjcxy12 @zajn

🙌 立即获取

立即试用 Storybook 3.4。如果你已经在用 Storybook，升级只需一分钟。如果你还没用过，现在就开始体验开发 React、React Native、Vue、Angular 和 Polymer 组件 UI 的最佳方式吧！

npm i -g @storybook/cli
cd my-vue-react-rn-angular-or-polymer-project
getstorybook
npm run storybook

如果你对新版本有疑问、问题、鼓励，或者只是想表达喜悦，请在 Twitter、Slack、Github 上或在下方评论中联系我们！

最后，要及时了解 Storybook 相关新闻，请在 Medium 上关注我们或在 Twitter 上查看我们。如果你喜欢 Storybook，请为本文点赞并分享，以帮助更多人发现它。

Storybook 团队献上 ❤️。