diff --git a/.changeset/modern-moles-greet.md b/.changeset/modern-moles-greet.md new file mode 100644 index 0000000000..a1e17caed4 --- /dev/null +++ b/.changeset/modern-moles-greet.md @@ -0,0 +1,20 @@ +--- +'xstate': major +--- + +Removed the ability to define delayed transitions using an array. Only object variant is supported now: + +```ts +createMachine({ + initial: 'a', + states: { + a: { + after: { + 10000: 'b', + noon: 'c' + } + } + // ... + } +}); +``` diff --git a/packages/core/src/stateUtils.ts b/packages/core/src/stateUtils.ts index 854ca982de..2afd557af6 100644 --- a/packages/core/src/stateUtils.ts +++ b/packages/core/src/stateUtils.ts @@ -326,25 +326,20 @@ export function getDelayedTransitions( return eventType; }; - const delayedTransitions = isArray(afterConfig) - ? afterConfig.map((transition, i) => { - const eventType = mutateEntryExit(transition.delay, i); - return { ...transition, event: eventType }; - }) - : Object.keys(afterConfig).flatMap((delay, i) => { - const configTransition = afterConfig[delay]; - const resolvedTransition = - typeof configTransition === 'string' - ? { target: configTransition } - : configTransition; - const resolvedDelay = !isNaN(+delay) ? +delay : delay; - const eventType = mutateEntryExit(resolvedDelay, i); - return toArray(resolvedTransition).map((transition) => ({ - ...transition, - event: eventType, - delay: resolvedDelay - })); - }); + const delayedTransitions = Object.keys(afterConfig).flatMap((delay, i) => { + const configTransition = afterConfig[delay]; + const resolvedTransition = + typeof configTransition === 'string' + ? { target: configTransition } + : configTransition; + const resolvedDelay = !isNaN(+delay) ? +delay : delay; + const eventType = mutateEntryExit(resolvedDelay, i); + return toArray(resolvedTransition).map((transition) => ({ + ...transition, + event: eventType, + delay: resolvedDelay + })); + }); return delayedTransitions.map((delayedTransition) => { const { delay } = delayedTransition; return { diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts index 999e173e46..e6d28433d5 100644 --- a/packages/core/src/types.ts +++ b/packages/core/src/types.ts @@ -442,22 +442,7 @@ export type DelayedTransitions< TDelay > >; - } - | Array< - TransitionConfig< - TContext, - TEvent, - TEvent, - TActor, - TAction, - TGuard, - TDelay - > & { - delay: - | Delay - | ((args: UnifiedArg) => Delay); - } - >; + }; export type StateTypes = | 'atomic' diff --git a/packages/core/test/after.test.ts b/packages/core/test/after.test.ts index 52a4191cf8..7cfa899024 100644 --- a/packages/core/test/after.test.ts +++ b/packages/core/test/after.test.ts @@ -18,7 +18,9 @@ const lightMachine = createMachine({ } }, red: { - after: [{ delay: 1000, target: 'green' }] + after: { + 1000: 'green' + } } } }); @@ -229,24 +231,26 @@ describe('delayed transitions', () => { const context = { delay: 500 }; - const machine = createMachine({ - initial: 'inactive', - context, - states: { - inactive: { - after: [ - { - delay: ({ context }) => { - spy(context); - return context.delay; - }, - target: 'active' - } - ] - }, - active: {} + const machine = createMachine( + { + initial: 'inactive', + context, + states: { + inactive: { + after: { myDelay: 'active' } + }, + active: {} + } + }, + { + delays: { + myDelay: ({ context }) => { + spy(context); + return context.delay; + } + } } - }); + ); const actor = createActor(machine).start(); @@ -273,12 +277,9 @@ describe('delayed transitions', () => { } }, active: { - after: [ - { - delay: 'someDelay', - target: 'inactive' - } - ] + after: { + someDelay: 'inactive' + } } } }, diff --git a/packages/core/test/interpreter.test.ts b/packages/core/test/interpreter.test.ts index ae1d0b7a2e..d13669a157 100644 --- a/packages/core/test/interpreter.test.ts +++ b/packages/core/test/interpreter.test.ts @@ -382,6 +382,9 @@ describe('interpreter', () => { const clock = new SimulatedClock(); const letterMachine = createMachine( { + types: {} as { + events: { type: 'FIRE_DELAY'; value: number }; + }, id: 'letter', context: { delay: 100 @@ -389,12 +392,9 @@ describe('interpreter', () => { initial: 'a', states: { a: { - after: [ - { - delay: ({ context }) => context.delay, - target: 'b' - } - ] + after: { + delayA: 'b' + } }, b: { after: { @@ -408,21 +408,12 @@ describe('interpreter', () => { } }, d: { - after: [ - { - delay: ({ context, event }) => - context.delay + (event as any).value, - target: 'e' - } - ] + after: { + delayD: 'e' + } }, e: { - after: [ - { - delay: 'someDelay', - target: 'f' - } - ] + after: { someDelay: 'f' } }, f: { type: 'final' @@ -433,7 +424,9 @@ describe('interpreter', () => { delays: { someDelay: ({ context }) => { return context.delay + 50; - } + }, + delayA: ({ context }) => context.delay, + delayD: ({ context, event }) => context.delay + (event as any).value } } ); diff --git a/packages/core/test/smoke.test.ts b/packages/core/test/smoke.test.ts deleted file mode 100644 index c157ae1700..0000000000 --- a/packages/core/test/smoke.test.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { createMachine } from '../src/index.ts'; - -describe('smoke test', () => { - it('should work with built files', () => { - expect(() => { - return createMachine({ - id: 'light', - initial: 'green', - context: { - canTurnGreen: true - }, - states: { - green: { - after: { - 1000: 'yellow' - } - }, - yellow: { - after: { - 1000: [{ target: 'red' }] - } - }, - red: { - after: [{ delay: 1000, target: 'green' }] - } - } - }); - }).not.toThrow(); - }); -});