Skip to main content
xstate-event-emitter Covers XState v5 event emitter pattern for outward-facing events.
Use when emitting events to external handlers via emit() action, subscribing to emitted events with actor.on(), or typing emitted events. Available since XState 5.9.0.
Ir a la instalación Skills Marketplace Descubre y explora habilidades de IA creadas por la comunidad.
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Mostrar detalles del prompt Un comando directo omite el prompt de revisión. Revisa el origen antes de ejecutarlo.
npx skills add https://github.com/IlyaGulya/claude-marketplace --skill xstate-event-emitterEl comando permanece en una sola línea. Desplázate horizontalmente para revisarlo antes de copiarlo.
¿Prefieres una copia local? Descarga los archivos que SkillsMP tiene disponibles ahora.
Descargar Zip Descargando... Ocupaciones relacionadas SOC
Basado en la clasificación ocupacional SOC
name xstate-event-emitter description Covers XState v5 event emitter pattern for outward-facing events.
Use when emitting events to external handlers via emit() action, subscribing to emitted events with actor.on(), or typing emitted events. Available since XState 5.9.0.
XState v5 Event Emitter
Emitted events go outward from the actor to external listeners — the opposite of actor.send() which sends events inward .
emit() Action Creator
Emit events from state machine transitions:
import { setup, emit, createActor } from 'xstate' ;
const machine = setup ({
types : {
emitted : {} as
| { type : 'notification' ; message : string }
| { type : 'error' ; code : number },
},
}).createMachine ({
on : {
submit : {
actions : emit ({ type : 'notification' , message : 'Submitted!' }),
},
},
});
const actor = createActor (machine);
on
'notification'
(event ) =>
console
log
message
start
send
type
'submit'
Static vs Dynamic emit setup ({
actions : {
emitStatic : emit ({
type : 'notification' ,
message : 'Hello' ,
}),
emitDynamic : emit (({ context } ) => ({
type : 'notification' ,
message : 'Count is ' + context.count ,
})),
},
}).createMachine ({ });
Listening for Emitted Events
actor.on(eventType, handler) Returns a subscription object:
const actor = createActor (machine);
const sub = actor.on ('notification' , (event ) => {
console .log (event.message );
});
actor.start ();
sub.unsubscribe ();
Wildcard Listener Listen to all emitted events with '*':
actor.on ('*' , (emitted ) => {
console .log (emitted);
});
Emitting from Actor Logic Types All actor logic creators support emit:
Promise Actors const logic = fromPromise (async ({ emit }) => {
emit ({ type : 'progress' , percent : 50 });
const result = await doWork ();
emit ({ type : 'progress' , percent : 100 });
return result;
});
Callback Actors const logic = fromCallback (({ emit } ) => {
const interval = setInterval (() => {
emit ({ type : 'tick' });
}, 1000 );
return () => clearInterval (interval);
});
Observable Actors const logic = fromObservable (({ emit } ) => {
emit ({ type : 'started' });
return interval (1000 );
});
Transition Actors const logic = fromTransition ((state, event, { emit } ) => {
if (event.type === 'INCREMENT' ) {
emit ({ type : 'changed' , value : state.count + 1 });
return { count : state.count + 1 };
}
return state;
}, { count : 0 });
TypeScript Strongly type emitted events in setup():
const machine = setup ({
types : {
emitted : {} as
| { type : 'notification' ; message : string }
| { type : 'error' ; error : Error },
},
}).createMachine ({ });
const actor = createActor (machine);
actor.on ('notification' , (event ) => {
console .log (event.message );
});
Use Cases
Decoupling UI Effects from Machine Logic const formMachine = setup ({
types : {
emitted : {} as
| { type : 'toast' ; message : string ; variant : 'success' | 'error' }
| { type : 'analytics' ; event : string },
},
}).createMachine ({
states : {
submitting : {
invoke : {
src : 'submitForm' ,
onDone : {
target : 'success' ,
actions : [
emit ({ type : 'toast' , message : 'Saved!' , variant : 'success' }),
emit (({ context } ) => ({
type : 'analytics' ,
event : 'form_submitted' ,
})),
],
},
onError : {
target : 'error' ,
actions : emit ({ type : 'toast' , message : 'Failed' , variant : 'error' }),
},
},
},
success : {},
error : {},
},
});
const actor = createActor (formMachine);
actor.on ('toast' , ({ message, variant } ) => showToast (message, variant));
actor.on ('analytics' , ({ event } ) => analytics.track (event));
vs sendParent / vs context Pattern When to Use emit()External side effects (toasts, analytics, logging) sendTo(parentRef)Parent-child actor communication assign()Data that the machine needs to track internally
emit() is best when the machine shouldn't know or care about what happens with the event.
Más de este repositorio Build frontend interfaces with externally randomized style direction. Use when the user asks to build web components, pages, or applications with high design diversity. Produces distinctive, production-grade UI that avoids repetitive AI aesthetics.
Analyzes CLAUDE.md, AGENTS.md, and similar repository context files for effectiveness based on peer-reviewed research. Identifies instructions that hurt agent performance, redundant content, and unnecessary requirements. Use when reviewing a CLAUDE.md, auditing an AGENTS.md, optimizing context files, or when the user says "lint my CLAUDE.md", "review my AGENTS.md", "is my context file good", "optimize my context file", or "check my CLAUDE.md".
skill-creator-frontmatter Complete reference for Claude Code skill YAML frontmatter fields, their values, and best practices. Use when writing frontmatter for SKILL.md, configuring skill invocation, setting allowed-tools, or deciding on skill metadata fields.
