diff --git a/.changeset/honest-spoons-drum.md b/.changeset/honest-spoons-drum.md new file mode 100644 index 0000000000..16164c6979 --- /dev/null +++ b/.changeset/honest-spoons-drum.md @@ -0,0 +1,18 @@ +--- +'@xstate/react': patch +--- + +Options in `createActorContext` are now properly merged with provider options. Previously, provider options replaced the actor options. + +```tsx +const { inspect } = createBrowserInspector(); + +const SomeContext = createActorContext(someMachine, { inspect }); + +// ... +// Options are now merged: +// { inspect: inspect, input: 10 } + + {/* ... */} +; +``` diff --git a/packages/xstate-react/src/createActorContext.ts b/packages/xstate-react/src/createActorContext.ts index 697b5bf787..f5728d4743 100644 --- a/packages/xstate-react/src/createActorContext.ts +++ b/packages/xstate-react/src/createActorContext.ts @@ -5,7 +5,7 @@ import { useSelector as useSelectorUnbound } from './useSelector'; export function createActorContext( actorLogic: TLogic, - interpreterOptions?: ActorOptions + actorOptions?: ActorOptions ): { useSelector: ( selector: (snapshot: SnapshotFrom) => T, @@ -30,7 +30,7 @@ export function createActorContext( children, logic: providedLogic = actorLogic, machine, - options: providedOptions = interpreterOptions + options: providedOptions }: { children: React.ReactNode; logic: TLogic; @@ -46,7 +46,10 @@ export function createActorContext( ); } - const actor = useActorRef(providedLogic, providedOptions); + const actor = useActorRef(providedLogic, { + ...actorOptions, + ...providedOptions + }); return React.createElement(OriginalProvider, { value: actor, diff --git a/packages/xstate-react/test/createActorContext.test.tsx b/packages/xstate-react/test/createActorContext.test.tsx index 69d88860b8..cfa2a1c8b5 100644 --- a/packages/xstate-react/test/createActorContext.test.tsx +++ b/packages/xstate-react/test/createActorContext.test.tsx @@ -1,4 +1,10 @@ -import { createMachine, assign, fromPromise, Snapshot } from 'xstate'; +import { + createMachine, + assign, + fromPromise, + Snapshot, + InspectionEvent +} from 'xstate'; import { fireEvent, screen, render, waitFor } from '@testing-library/react'; import { useSelector, createActorContext, shallowEqual } from '../src'; @@ -470,4 +476,47 @@ describe('createActorContext', () => { expect(screen.getByTestId('value').textContent).toBe('84'); }); + + it('should merge createActorContext options with options passed to the provider', () => { + const events: InspectionEvent[] = []; + const SomeContext = createActorContext( + createMachine({ + types: { + context: {} as { count: number }, + input: {} as number + }, + context: ({ input }) => ({ count: input }) + }), + { + inspect: (ev) => { + events.push(ev); + } + } + ); + + const Component = () => { + const count = SomeContext.useSelector((state) => state.context.count); + + return
{count}
; + }; + + const App = () => { + return ( + + + + ); + }; + + render(); + + expect(events.length).toBeGreaterThan(0); + expect(events).toContainEqual( + expect.objectContaining({ + snapshot: expect.objectContaining({ + context: { count: 10 } + }) + }) + ); + }); });