Storybook 插件代码

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

注意：此插件只能与 Storybook 5.2 中引入的新的 组件故事格式 (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 应该是一个数组，其中包含要添加到插件面板的每个选项卡的对象。每个对象可以包含以下属性

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

添加 Webpack 加载器

更新或创建 .storybook 目录中的 webpack.config.js，方法是将 require.resolve('@whitespace/storybook-addon-code/loader') 作为预加载器添加到 .stories.js 文件中，如下所示。

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;
};

用法

.stories.js 文件中导入的文件（与已注册的选项卡匹配）将自动提取。安装并使用 null-loader 来包含实际故事文件不需要的文件。

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',
  });