設定並與插件溝通

插件 API 旨在提供客製化功能。它為插件作者提供了不同的方式來設定和與使用者的 Storybook 溝通。讓我們看看這些方式以及它們建議的使用案例。

預設配置

預設配置將設定的負擔從使用者轉移到插件。預設配置選項是全域性的，並且可以從 NodeJS 存取。它們非常適合預先設定 Webpack 加載器、Babel 插件和其他程式庫或框架特定的設定。

例如，許多程式庫要求應用程式被 Provider 包裹，以便將資料提供給元件樹中的下游元件。預設配置可以描述諸如自動新增包裝器的行為，而無需使用者進行任何手動設定。如果使用者安裝了具有預設配置的插件，則該插件可以指示 Storybook 將所有 stories 包裹在 Provider 中。這讓使用者只需一行設定即可開始將您的程式庫與 Storybook 一起使用！

有關預設配置的更多資訊，請參閱：撰寫預設配置插件

用於包裹每個 story 的機制稱為 Storybook 裝飾器。它們允許您通過額外的渲染功能或提供資料來擴充 stories。

參數

參數在瀏覽器中可用，非常適合全域性、元件層級或 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