配置和插件通信

插件 API 专为自定义而设计。它为插件作者提供了不同的方式来配置和与其用户的 Storybook 通信。让我们看看这些方式以及它们建议的用例。

预设

预设减轻了用户配置插件的负担。预设选项是全局性的，可以从 NodeJS 访问。它们非常适合预配置 Webpack 加载器、Babel 插件和其他库或框架特定的配置。

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

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

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

参数

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

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

使用 useParameter hook 来访问插件中的参数值。

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

通道

通道启用管理器和预览窗格之间的双向通信，使用 NodeJS EventEmitter 兼容的 API。您的插件可以插入到特定的通道并响应这些事件。

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

使用 useChannel hook 来访问插件内的通道数据。

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