xState Storybook 擴充套件

安裝

npm install -D @storybook/addons storybook-xstate-addon @xstate/inspect @xstate/react

用法

要在 Storybook 中使用此擴充套件，只需將 addons: ["storybook-xstate-addon/preset"] 添加到您的 Storybook 設定。

如果您想在所有 Story 中啟用 Inspector，請在您的 /.storybook/preview.js 檔案中設定以下內容。啟用此設定後，您可以在某些 Story 中停用 Inspector

export const parameters = {
  xstate: true,
};

若要在單個 Story 或 Story 檔案中啟用 Inspector，請將 xstate 參數設定為 true 或選項物件。

// this will turn on the inspector for all stories in the current file
export default {
  title: "Example",
  parameters: {
    xstate: true,
    // this option is passed to the inspect function
    xstateInspectOptions: {
      url: 'https://stately.ai/viz?inspect',
      serialize: null
    }
  },
};

// this turns the inspector on for only a single story
StoryComponent.parameters = {
  xstate: true,
};

為了協助檢視較大的狀態圖，您可以在 xstate 參數中傳遞 height 選項，以強制 Inspector 的高度。

StoryComponent.parameters = {
  xstate: {
    height: "1000px",
  },
};

此外，您可以透過新增 xstate 參數，在機器註冊時向其發送事件（依 ID）。

如需更多範例用法，請參閱 [./stories/Button.stories.tsx] 和 [./stories/Machines.stories.tsx]。

StoryComponent.parameters = {
  xstate: {
    machine_id1: {
      events: "event",
    },
    machine_id2: {
      events: { type: "event" },
    },
    machine_id3: {
      events: [{ type: "event1" }, { type: "event2" }],
    },
    machine_id4: {
      events: (state) => "event",
    },
    machine_id5: {
      events: ["event1", "event2"],
      delay: 2.5e3, // milliseconds to delay before sending the next event
      shouldRepeatEvents: true, // for looping event sequences
    },
  },
};

如果您希望將 Inspector 作為主要的 Story 本身使用，只需使用以下程式碼片段 (使用 React)。

import { RenderMachine } from 'storybook-xstate-addon/RenderMachine';

export const MachinePreview = () => <RenderMachine machine={confirmMachine.withConfig({ ... })} events={[...events]} />;