[@xstate/store] Add examples + update createStoreWithProducer(…)

[davidkpiano]

The createStoreWithProducer(…) function now uses the new configuration API:

import { createStoreWithProducer } from '@xstate/store';
// DEPRECATED API
// const store = createStoreWithProducer(
//   producer,
//   {
//     count: 0
//   },
//   {
//     inc: (context, event) => {
//       context.count++;
//     }
//   }
// );

const store = createStoreWithProducer(producer, {
  context: {
    count: 0
  },
  on: {
    inc: (context, event) => {
      context.count++;
    }
  }
});

---

Also, an example directory and simple example was added.

[changeset-bot]

🦋 Changeset detected

Latest commit: ee56fe1

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 7 packages

Name	Type
xstate	Patch
@xstate/store	Minor
@xstate/graph	Patch
@xstate/react	Patch
@xstate/solid	Patch
@xstate/svelte	Patch
@xstate/vue	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[davidkpiano]

@Andarist The ...args: never part doesn't work with this:

const { inspect } = createBrowserInspector();

// ...

store.inspect(inspect); // fails on actorRef.send(…)

[Andarist]

You could also fix it like this:

Alternative patch

diff --git a/packages/core/src/inspection.ts b/packages/core/src/inspection.ts
index ec61c3aa1b..1e3114d4d5 100644
--- a/packages/core/src/inspection.ts
+++ b/packages/core/src/inspection.ts
@@ -35,7 +35,7 @@ interface InspectedMicrostepEvent extends BaseInspectionEventProperties {
   type: '@xstate.microstep';
   event: AnyEventObject; // { type: string, ... }
   snapshot: Snapshot<unknown>;
-  _transitions: AnyTransitionDefinition[];
+  _transitions: unknown[];
 }
 
 export interface InspectedActionEvent extends BaseInspectionEventProperties {
@@ -51,7 +51,7 @@ export interface InspectedEventEvent extends BaseInspectionEventProperties {
   // The source might not exist, e.g. when:
   // - root init events
   // - events sent from external (non-actor) sources
-  sourceRef: AnyActorRef | undefined;
+  sourceRef: ActorRefLike | undefined;
   event: AnyEventObject; // { type: string, ... }
 }
 
diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts
index c84c91281d..463897aff2 100644
--- a/packages/core/src/types.ts
+++ b/packages/core/src/types.ts
@@ -1981,10 +1981,9 @@ export interface ActorRef<
 
 export type AnyActorRef = ActorRef<any, any, any>;
 
-export type ActorRefLike = Pick<
-  AnyActorRef,
-  'sessionId' | 'send' | 'getSnapshot'
->;
+export type ActorRefLike = Pick<AnyActorRef, 'sessionId' | 'getSnapshot'> & {
+  send: (...args: never) => void;
+};
 
 export type UnknownActorRef = ActorRef<Snapshot<unknown>, EventObject>;
 
diff --git a/packages/xstate-store/src/types.ts b/packages/xstate-store/src/types.ts
index 0ee864a93c..4aaed3491e 100644
--- a/packages/xstate-store/src/types.ts
+++ b/packages/xstate-store/src/types.ts
@@ -298,7 +298,7 @@ export interface InspectedActorEvent extends BaseInspectionEventProperties {
 export type ActorRefLike = {
   sessionId: string;
   // https://github.com/statelyai/xstate/pull/5037/files#r1717036732
-  send: (event: any) => void;
+  send: (...args: never) => void;
   getSnapshot: () => any;
 };

I don't mind either solution... although I really like how the ...args: never approach discovered here further inconsistencies in types. Something that any didn't 😉

[Andarist]

btw. let's add a type test for this combination of things

[Andarist]

technically this is a breaking change as you have renamed a public export, the same applied to other renamed exports in this file

[davidkpiano]

Added a deprecation instead

[davidkpiano]

ee56fe1

[Andarist]

u might want to add some changeset for this change as without it u wont release xstate package and @xstore/store won't be able to utilize this improvement

[davidkpiano]

a32f1e8

[boneskull]

Should type changes like this be considered breaking? It does break my build

[davidkpiano]

Should type changes like this be considered breaking? It does break my build

We try to minimize breaking type changes but they are considered minor changes for XState, just like in TS: https://github.com/statelyai/xstate?tab=readme-ov-file#typescript-changes