A codegen tool for 100% TS type-safety in XState
xstate-codegengives you 100% type-safe usage of XState in Typescript. Try it out at this codesandbox!
You get type safety on:
on: {EVENT: 'deep.nested.state'}
initialattribute
state.matches('deep.nested.state')
This works by introspecting your machine in situ in your code. With this Thanos-level power, we can click our fingers and give you 100% type safety in your state machines.
xstate-codegen "src/**/**.machine.ts"
Instead of importing
createMachineor
Machinefrom
xstate, import them from
@xstate/compiled:
import { createMachine } from '@xstate/compiled';const machine = createMachine();
You must pass three type options to
createMachine/Machine:
type Event = { type: 'GO' } | { type: 'STOP' };)
For instance:
import { Machine } from '@xstate/compiled';interface Context {}
type Event = { type: 'DUMMY_TYPE' };
const machine = Machine({});
import { useMachine } from '@xstate/compiled/react'; import { machine } from './myMachine.machine'const [state, dispatch] = useMachine(machine, { // all options in here will be type checked })
import { interpret } from '@xstate/compiled'; import { machine } from './myMachine.machine'const service = interpret(machine, { // all options in here will be type checked })
xstate-codegen "src/**/**.machine.ts" --once
By default, the CLI watches for changes in your files. Running
--onceruns the CLI only once.
xstate-codegen "src/**/**.machine.ts" --outDir="src"
By default, the CLI adds the required declaration files inside nodemodules at `nodemodules/@xstate/compiled`. This writes the declaration files to a specified directory.
Note, this only writes the declaration files to the directory. The
.jsfiles still get written tonode_modules/@xstate/compiled.