How do I ensure type safety for emitted events?

You can strongly type emitted events within the types property of the XState setup() function, allowing TypeScript to validate event names and payloads in actor.on() listeners.

What is the difference between emit() and sendParent() in XState?

emit() is used for outward-facing events to external listeners like UI components or logging services, whereas sendParent() is strictly for communication between a child actor and its parent actor.

Can I listen to every event emitted by an actor at once?

Yes, you can use a wildcard listener by calling actor.on('*', handler), which will trigger for every event the actor emits.

Which version of XState does this skill support?

This skill focuses on the event emitter patterns introduced and standardized in XState version 5.9.0 and later.

XState v5 Event Emitter

Name: XState v5 Event Emitter
Author: IlyaGulya

byIlyaGulya

0•

Developer Tools

Implements the XState v5 event emitter pattern for decoupled, outward-facing actor communications and side effects.

This skill provides specialized guidance for implementing the XState v5 event emitter pattern, a powerful feature available since version 5.9.0. It enables Claude to help you send events from within state machines to external listeners using the emit() action, facilitating clean decoupling between logic and UI side effects like toasts or analytics. You will receive patterns for subscribing to events via actor.on(), utilizing wildcard listeners, and ensuring full TypeScript safety for emitted event payloads across various actor logic types.

Key Features

01Configuration of external event subscriptions using actor.on()

02Setup for wildcard listeners to monitor all emitted actor events

03Implementation of the emit() action creator for state transitions

04Integration patterns for promise, callback, and observable actors

05Strong TypeScript typing for emitted events within the setup() function

060 GitHub stars

Use Cases

01Decoupling UI side effects like toasts and notifications from machine logic

02Bridging state machine events to legacy systems or global event buses

03Sending analytics and logging data to external monitoring services

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ilyagulya/claude-marketplace xstate-event-emitter

For use in Claude.ai and ChatGPT

Download Skill