配置并与插件通信

插件 API 专为定制而设计。它为插件作者提供了不同的方式来配置用户 Storybook 并与之通信。让我们看看这些方式及其建议的使用场景。

Preset

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

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

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

包裹每个 story 的机制被称为 Storybook 装饰器 (decorator)。它们允许你通过额外的渲染功能或提供数据来增强 stories。

Parameters

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

例如，伪类状态插件 (Pseudo States addon) 使用 parameters 来启用各种伪类状态。用户可以提供全局默认值，然后在 story 级别覆盖它们。

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

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

Channels

Channels 允许管理器和预览面板之间进行双向通信，使用与 NodeJS EventEmitter 兼容的 API。你的插件可以接入特定的频道并响应这些事件。

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

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

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