Storysource

此插件用于在插件面板中显示故事源代码。

框架支持

• 入门
  • 使用预设安装
• 主题
• 显示完整源代码

入门

首先，安装插件

yarn add @storybook/addon-storysource --dev

您可以使用预设或使用带有 webpack 的插件配置来添加此插件的配置

使用预设安装

将以下内容添加到您的 .storybook/main.js 导出中

export default {
  addons: ['@storybook/addon-storysource'],
};

您可以在 .storybook/main.js 文件中将配置传递到 addon-storysource 加载器中，例如：

export default {
  addons: [
    {
      name: '@storybook/addon-storysource',
      options: {
        rule: {
          // test: [/\.stories\.jsx?$/], This is default
          include: [path.resolve(__dirname, '../src')], // You can specify directories
        },
        loaderOptions: {
          prettierConfig: { printWidth: 80, singleQuote: false },
        },
      },
    },
  ],
};

要自定义 source-loader，请传递 loaderOptions。有效配置在 source-loader 自述文件 中有说明。

主题

Storysource 会根据您的 Storybook 主题自动使用浅色或深色语法主题。有关更多信息，请参阅 Storybook 主题。

显示完整源代码

Storybook 6.0 引入了对 source-loader 的意外更改，其中仅在插件中显示选定故事的源代码。要恢复旧行为，请传递 injectStoryParameters: false 选项。

如果您正在使用 addon-docs

export default {
  addons: [
    {
      name: '@storybook/addon-docs',
      options: {
        sourceLoaderOptions: {
          injectStoryParameters: false,
        },
      },
    },
  ],
};

如果不是

export default {
  addons: [
    {
      name: '@storybook/addon-storysource',
      options: {
        loaderOptions: {
          injectStoryParameters: false,
        },
      },
    },
  ],
};

此错误将在插件的未来版本中解决。