Open devanshj opened 2 years ago
And also that means that users would "need" the second argument of useMachine
too for changing things inside the component etc. – which I'm super strongly against – there's no point of reinventing functions people can just const createFooMachine = (foo: Foo) => createMachine(...)
. Not to mention the "named delegations" ie writing "foo"
in xstate are problematic for typing because we don't know their types, here we know the type it's Foo
so for us it's as if the user is writing the implementation there.
I love the idea but I don't think this is super-priority given that most use cases for this library (so far) are for small, in-component state machines.
Yeah I wouldn't call it "super priority" but it sure makes it impossible for it to be able to use it with React's context as the type isn't available outside the component (and you create the context via React.createContext()
outside the component)
Just putting this out because I had an idea long ago how to implement this without moving away from React or changing the implementation. It's something like this...
const createMachine = (definition) => () => {
// same implementation
}
const useMachine = (definitionOrHook) => {
if (typeof definitionOrHook === "function") {
return definitionOrHook()
}
return createMachine(definitionOrHook)()
}
Now the machine (or more precisely the hook to use it) can be created outside the component and hence we can get its type for context too...
const useMyMachine = createMachine(...)
type MyMachine = ReturnType<typeof useMyMachine>
const MyMachineContext = React.createContext<MyMachine>()
const SomeComponent = () => {
let machine = useMyMachine()
return <MyMachineContext.Provider value={machine}>
{/* ... */}
</MyMachineContext.Provider>
}
Would love to see this!
The fact that
useMachine
“creates” the machine means that we can only create a machine inside an component. This problematic because...createDefinition
solves 1 but doesn't solve 2 so we need something like xstate ielet m = createMachine(d);
then later in componentuseMachine(m)
. We could add an overload to douseMachine(d)
which saves users from writinguseMachine(createMachine(d))