[@xstate/store] Event emitter

.changeset/silver-maps-grab.md

@@ -0,0 +1,56 @@
+---
+'@xstate/store': minor
+---
+
+You can now emit events from a store:
+
+```ts
+import { createStore } from '@xstate/store';
+
+const store = createStore({
+  context: {
+    count: 0
+  },
+  on: {
+    increment: (context, event, { emit }) => {
+      emit({ type: 'incremented' });
+      return { count: context.count + 1 };
+    }
+  }
+});
+
+store.on('incremented', () => {
+  console.log('incremented!');
+});
+```
+
+You can make emitted events type-safe via `createstore({ schema: { … } })` (with Zod) or `createStore({ types: { … } })` (with coerced types):
+
+```ts
+import { createStore } from '@xstate/store';
+import { z } from 'zod';
+
+const store = createStore({
+  schema: {
+    emitted: {
+      incremented: z.object({ by: z.number() })
+    }
+  },
+  context: {
+    count: 0
+  },
+  on: {
+    increment: (context, event, { emit }) => {
+      emit({ type: 'incremented', by: 1 });
+      return { count: context.count + 1 };
+    }
+  }
+});
+
+store.on('incremented', (event) => {
+  console.log('Incremented by', event.by);
+  // => "Incremented by 1"
+});
+
+store.send({ type: 'increment' });
+```

packages/xstate-store/package.json

@@ -64,7 +64,8 @@
     "react-dom": "^18.0.0",
     "solid-js": "^1.7.6",
     "solid-testing-library": "^0.3.0",
-    "xstate": "^5.18.0"
+    "xstate": "^5.18.0",
+    "zod": "^3.23.8"
   },
   "peerDependencies": {
     "react": "^18.2.0",

packages/xstate-store/src/fromStore.ts

@@ -1,11 +1,20 @@
-import { createStore, createStoreTransition } from './store';
+import { ActorLogic } from 'xstate';
+import { createStoreTransition, TransitionsFromEventPayloadMap } from './store';
 import {
   EventPayloadMap,
   StoreContext,
+  Snapshot,
   StoreSnapshot,
-  Snapshot
+  EventObject,
+  ExtractEventsFromPayloadMap
 } from './types';
 
+type StoreLogic<
+  TContext extends StoreContext,
+  TEvent extends EventObject,
+  TInput
+> = ActorLogic<StoreSnapshot<TContext>, TEvent, TInput, any, any>;
+
 /**
  * An actor logic creator which creates store [actor
  * logic](https://stately.ai/docs/actors#actor-logic) for use with XState.
@@ -22,15 +31,16 @@ export function fromStore<
   TInput
 >(
   initialContext: ((input: TInput) => TContext) | TContext,
-  transitions: Parameters<typeof createStore<TContext, TEventPayloadMap>>[1]
-) {
-  const transition = createStoreTransition<TContext, TEventPayloadMap>(
-    transitions
-  );
+  transitions: TransitionsFromEventPayloadMap<
+    TEventPayloadMap,
+    TContext,
+    EventObject
+  >
+): StoreLogic<TContext, ExtractEventsFromPayloadMap<TEventPayloadMap>, TInput> {
+  const transition = createStoreTransition(transitions);
   return {
     transition,
-    start: () => {},
-    getInitialSnapshot: (_: any, input: TInput) => {
+    getInitialSnapshot: (_, input: TInput) => {
       return {
         status: 'active',
         context:

packages/xstate-store/src/react.ts

@@ -1,11 +1,11 @@
 import { useCallback, useRef, useSyncExternalStore } from 'react';
-import { Store, SnapshotFromStore } from './types';
+import { Store, SnapshotFromStore, AnyStore } from './types';
 
 function defaultCompare<T>(a: T | undefined, b: T) {
   return a === b;
 }
 
-function useSelectorWithCompare<TStore extends Store<any, any>, T>(
+function useSelectorWithCompare<TStore extends AnyStore, T>(
   selector: (snapshot: SnapshotFromStore<TStore>) => T,
   compare: (a: T | undefined, b: T) => boolean
 ): (snapshot: SnapshotFromStore<TStore>) => T {
@@ -40,7 +40,7 @@ function useSelectorWithCompare<TStore extends Store<any, any>, T>(
  *   previous value
  * @returns The selected value
  */
-export function useSelector<TStore extends Store<any, any>, T>(
+export function useSelector<TStore extends AnyStore, T>(
   store: TStore,
   selector: (snapshot: SnapshotFromStore<TStore>) => T,
   compare: (a: T | undefined, b: T) => boolean = defaultCompare

packages/xstate-store/src/solid.ts

@@ -1,12 +1,12 @@
 /* @jsxImportSource solid-js */
 import { createEffect, createSignal, onCleanup } from 'solid-js';
-import type { Store, SnapshotFromStore } from './types';
+import type { Store, SnapshotFromStore, AnyStore } from './types';
 
 function defaultCompare<T>(a: T | undefined, b: T) {
   return a === b;
 }
 
-function useSelectorWithCompare<TStore extends Store<any, any>, T>(
+function useSelectorWithCompare<TStore extends AnyStore, T>(
   selector: (snapshot: SnapshotFromStore<TStore>) => T,
   compare: (a: T | undefined, b: T) => boolean
 ): (snapshot: SnapshotFromStore<TStore>) => T {
@@ -53,7 +53,7 @@ function useSelectorWithCompare<TStore extends Store<any, any>, T>(
  *   previously selected value
  * @returns A read-only signal of the selected value
  */
-export function useSelector<TStore extends Store<any, any>, T>(
+export function useSelector<TStore extends AnyStore, T>(
   store: TStore,
   selector: (snapshot: SnapshotFromStore<TStore>) => T,
   compare: (a: T | undefined, b: T) => boolean = defaultCompare