How does zagjs's machine differ with xstate's machine ?

[astahmer]

I think it would be nice to have an exhaustive comparison page in the documentation site with a list of differences, this might also help if you intend to contribute to @xstate/fsm, or to keep in sync with xstate futures updates

From what I found looking quickly at the source code:

• the core package use valtio inlined on the state to make it mutable (which means the context also is mutable !, this probably make actions easier to write)
• introduce is a computed context ! looks like this abandoned RFC
• introduce a watch property which invokes callbacks on context/computedContext changes
• Guard combinations (and, or, not) as mentioned here, that looks SO good
• Activities, that have been since deprecated in xstate's machine
• introduce every that looks like after but using a repeating interval
• renamed cond to guard
• the react package use valtio/react inlined for useMachine/useActor

(and it looks like valtio usage makes everything simpler 😅 )

[anubra266]

@astahmer At the time zag started, there were lots of parts of xstate that were not needed for zag, would have been a lot of unnecessary overhead for the zag ecosystem. @segunadebayo would be better suited to address this though.

[astahmer]

btw, is there a way to convert a @zag-js machine to an xstate machine ?
cause if not that means using zag components & my own xstate machines in the same project duplicates the js downloaded which is unfortunate for such related behavior 😢

EDIT: for the context, I just noticed there is no invoke property on state nodes, which I find a bit awkward ? how would you spawn another machine or listen to a callback/promise using @zag-js's createMachine ?

[anubra266]

@astahmer you can spawn machines in zag. An example is the toast machine

[astahmer]

also, can you invoke a @zag-js machine from an xstate machine ? or is the compatibility mostly limited to/for the visualizer ?

[anubra266]

@astahmer You can't do that. The visualizer uses xstate, we convert the zag syntax to xstate syntax, then xstate uses that in our visualizer.