設定擴充功能並與其通訊

擴充功能 API 專為自訂設計。它為擴充功能作者提供不同的方式來設定 Storybook 並與使用者的 Storybook 通訊。讓我們看看這些是什麼以及它們建議的使用案例。

預設設定

預設設定將設定的負擔從使用者轉移到擴充功能。預設設定選項是全域的，可以從 NodeJS 存取。它們非常適合預先設定 Webpack 載入器、Babel 外掛程式和其他程式庫或框架特定的設定。

例如，許多程式庫要求應用程式被一個 Provider 包裹，該 Provider 向樹狀結構下方的元件提供資料。預設設定可以描述諸如自動新增包裝器之類的行為，而無需使用者進行任何手動設定。如果使用者安裝了具有預設設定的擴充功能，則該擴充功能可以指示 Storybook 將所有 story 包裹在 Provider 中。這讓使用者只需一行設定即可開始在 Storybook 中使用您的程式庫！

有關預設設定的更多資訊，請參閱：撰寫預設設定擴充功能

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

參數

參數在瀏覽器中可用，非常適合在全域、元件層級或 story 層級設定擴充功能行為。

例如，Pseudo States 擴充功能使用參數來啟用各種虛擬狀態。使用者可以提供全域預設值，然後在 story 層級覆寫它們。

使用 useParameter 勾子來存取擴充功能內的參數值。

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

通道

通道使用與 NodeJS EventEmitter 相容的 API，啟用管理器和預覽窗格之間的雙向通訊。您的擴充功能可以插入特定通道並回應這些事件。

例如，Actions 擴充功能會捕獲使用者事件並在面板中顯示其資料。

使用 useChannel 勾子來存取擴充功能內的通道資料。

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