Using nested states in xstate

Question

I am working on a home automation project with two bulbs. Please refer to the following state chart I created using xstate. I also have the gist so you can see it in the visualizer also.

https://xstate.js.org/viz/?gist=119995cdff639c5b99df55278a32cf57

You can see that I need to be in the autoInactive state so I can turn the bulbs on and off, this works fine. The problem is in the autoActive state I wanted to still turn the bulbs on and off but using a motion sensor.

So here is what i'm trying to do.

• autoInactive - user can use UI to turn bulbs on and off.
• autoActive - user cannot operate bulbs, but a motion sensor turns them on and off.

How can you achieve this using xstate?

Answer 1

I know you've said you already solved the problem, but I was just playing around to see how I would solve this - so maybe it helps you or someone else.

I basically approached the problem slightly differently (and that might not work in your context). I thought the conditions of the lights (on or off) are actually quite independent from the mode you are in (automatic or manual). So I ended up with two parallel states, one for purely controlling the state of the lights, and one management interface state which allows for managing the lights differently based on the mode you are in:

https://xstate.js.org/viz/?gist=4b815be2cc42e6e51b15ba39c99d53dc