Storybook Code 插件

这个 Storybook 插件允许你显示组件的源代码。它使用 highlight.js 进行语法高亮。可用语言列表在此。

注意: 这个插件只能与 Storybook 5.2 中引入的新的 Component Story Format (CSF) 格式一起使用。

入门指南

npm i --save-dev @whitespace/storybook-addon-code

注册插件

在你的 storybook 配置中创建一个名为 addons.js 的文件，并添加以下内容

import registerAddonCode from '@whitespace/storybook-addon-code/register';

registerAddonCode({
  tabs: [
    { label: 'Twig', lang: 'twig' },
    { label: 'Sass', lang: 'scss' },
    { label: 'JavaScript', lang: 'javascript', matchFiles: 'js' },
  ],
});

tabs 应该是一个数组，包含你想要添加到插件面板的每个 tab 的对象。每个对象可以包含这些属性

• label: tab 上显示的标签。
• lang: highlight.js 定义的语言。可用语言列表在此
• matchFiles: 可选。默认为与 lang 相同的值。可以是表示应包含的文件扩展名的字符串。也可以是用于测试文件名的正则表达式。也可以是一个接收文件名并返回 true 或 false 的函数。

添加 Webpack 加载器

更新或创建 `.storybook` 目录下的 webpack.config.js 文件，通过将 require.resolve('@whitespace/storybook-addon-code/loader') 作为 .stories.js 文件的 pre-loader 添加，如下所示。

module.exports = async ({ config, mode }) => {
  // ...

  config.module.rules.push({
    test: /\.stories\.jsx?$/,
    loaders: [
      /*
      This loader should be first in the list unless you
      want tranfromations from other loaders to affect
      what’s shown in the code tabs
      */
      require.resolve('@whitespace/storybook-addon-code/loader'),
      // ...
    ],
    enforce: 'pre',
  });

  // ...

  // Return the altered config
  return config;
};

使用方法

匹配注册的 tabs 的 .stories.js 文件中导入的文件将被自动提取。安装并使用 null-loader 来包含实际 story 文件不需要的文件。

import Component from './button.twig';
import '!!null-loader!./button.scss';

export default {
  title: 'Example button',
};

export const withUrl = () =>
  Component({
    text: 'Lorem ipsum',
    url: '#',
  });

export const withoutUrl = () =>
  Component({
    text: 'Lorem ipsum',
  });