Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
📝 Description
This is a PR to start migrating machines to XState 5. I start with the Accordion machine.
⛳️ Current behavior (updates)
Currently, the Accordion machine uses a custom XState-ish implementation for its state machine.
🚀 New behavior
Here, I use XState 5 and @xstate/react.
💣 Is this a breaking change (Yes/No):
No
📝 Additional Information
This is a first pass on the problem. I directly coded on the page of the Accordion machine.
Here are things that we can improve or should discuss:
value
andmultiple
properties from the context are listened to run thecoarseValue
function, which prevents thevalue
from reaching an invalid state. Instead of relying on a watcher, I run thecorseValue
function every time I assign a new value to thevalue
property, including when the machine starts (replacing thecreated
hook).setup
function from XState to strongly type the machine without needing the help of Typegen.CONTEXT.SYNC
which is sent from auseEffect
that listens to changes tocontrols.context
. ThecoarseValue
function is applied before merging the following context.getComputedContext
to resolve the computed properties. I searched but was unsure if these properties should be made available to the end user. They are only internal and resolved in theaccordionConnect
function.contextFakelyAugmented
as a trick to avoid being obliged to send computed properties to the dom functions, as it didn't seem required.assertEvent
function from XState to narrow the type of events in actions and guards. We might want to reimplement it so there isn't a cost in production.onValueChange
andonFocusChange
in the assign actions to update thevalue
andfocusedValue
properties. I would have preferred to call these functions in a separate action rather than inside theassign
action, but it would have caused more headaches than necessary.