配置和与插件通信

插件 API 专为自定义而设计。它为插件作者提供了与用户 Storybook 配置和通信的不同方式。让我们看看它们是什么以及建议的使用场景。

Presets

Presets 将配置的负担从用户转移到插件。Preset 选项是全局的，并且可以从 NodeJS 访问。它们非常适合预先配置 Webpack 加载器、Babel 插件以及其他特定于库或框架的配置。

例如，许多库要求应用程序由一个 Provider 包裹，该 Provider 向树下的组件提供数据。Presets 可以描述自动添加包装器的行为，而无需用户进行任何手动配置。如果用户安装了一个带有 Presets 的插件，该插件可以指示 Storybook 将所有故事包装在 Provider 中。这使得人们只需一行配置即可开始在 Storybook 中使用你的库！

有关 Presets 的更多信息，请参阅：编写 Preset 插件

包装每个故事的机制被称为 Storybook decorator。它们允许你通过额外的渲染功能或通过提供数据来增强故事。

参数

Parameters 在浏览器中可用，非常适合全局、组件级别或故事级别配置插件行为。

例如，Pseudo States 插件使用 Parameters 来启用各种伪状态。用户可以提供全局默认值，然后覆盖故事级别的默认值。

使用 useParameter hook 在你的插件中访问 Parameter 值。

export const Hover = {
  render: () => <Button>Label</Button>,
  parameters: { pseudo: { hover: true } },
};

Channels

Channels 使用与 NodeJS EventEmitter 兼容的 API，实现管理器和预览窗格之间的双向通信。你的插件可以接入特定的 channel 并响应这些事件。

例如，Actions 会捕获用户事件并在面板中显示其数据。

使用 useChannel hook 在你的插件中访问 channel 数据。

有关完整示例，请查看 storybookjs/addon-kit/withRoundTrip.ts