storybook-addon-recoil-flow

新增一個面板以監控您的 Story 的整個 recoil 狀態。

設定

方法 1：Recoil Root 由另一個裝飾器擴充功能提供

此擴充功能可以透過 npm/yarn 安裝，然後將 "storybook-addon-recoil-flow" 新增至 ./storybook/main.js 中的 addons 陣列。請確保此擴充功能和提供 RecoilRoot 的擴充功能以正確的順序排列。

方法 2：Recoil Root 由 Story 中的裝飾器提供

• 透過 npm/yarn 安裝
• 將 storybook-addon-recoil-flow/dist/register 新增至 addons 陣列
• 從 storybook-addon-recoil-flow/dist/decorator 匯入 withRecoilFlow 到您的 Story 中，並將其放入 decorators 陣列（以正確的順序）

方法 3：直接使用裝飾器提供的 RecoilRoot

• 透過 npm/yarn 安裝
• 裝飾器提供 overrides 設定為 false 的 RecoilRoot，因此方法 1 將在沒有其他裝飾器的情況下運作（但您將無法設定自訂的初始化器）

參數

recoilFlow 參數具有以下可選選項

  recoilFlow: {
    filter: {
      keys: ["AtomOne"],
      showConnected: true,
    },
  },

keys 陣列用於 .startsWith 以篩選節點，因此可以僅使用手動輸入的部分來匹配長的產生 SelectorFamilyKeys。

showConnected 也會顯示與 keys 陣列中的節點連接的節點（預設為 true）

已知問題

• 如果外掛程式面板在某些其他外掛程式（例如「互動」）之後，Storybook 的 CSS 中存在一個錯誤，這將導致此外掛程式無法正確渲染。