stately
https://stately.ai/
状態遷移図、state machineのvisualizeができるツール
例
以下のようなコードを入力として
code:ts
import { createMachine, assign } from 'xstate';
interface Context {
retries: number;
}
const fetchMachine = createMachine<Context>({
id: 'fetch',
initial: 'idle',
context: {
retries: 0
},
states: {
idle: {
on: {
FETCH: 'loading'
}
},
loading: {
on: {
RESOLVE: 'success',
REJECT: 'failure'
}
},
success: {
type: 'final'
},
failure: {
on: {
RETRY: {
target: 'loading',
actions: assign({
retries: (context, event) => context.retries + 1
})
}
}
}
}
});
インタラクティブな状態遷移図を生成できる
https://gyazo.com/d177fa4b40b54caba6405d842f837730