Remove the ability to define delayed transitions using an array (#4216)

* Remove the ability to define delayed transitions using an array

* Add a changeset

.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'
+      }
+    }
+    // ...
+  }
+});
+```

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 {

packages/core/src/types.ts

@@ -442,22 +442,7 @@ export type DelayedTransitions<
               TDelay
             >
           >;
-    }
-  | Array<
-      TransitionConfig<
-        TContext,
-        TEvent,
-        TEvent,
-        TActor,
-        TAction,
-        TGuard,
-        TDelay
-      > & {
-        delay:
-          | Delay<TDelay>
-          | ((args: UnifiedArg<TContext, TEvent, TEvent>) => Delay<TDelay>);
-      }
-    >;
+    };
 
 export type StateTypes =
   | 'atomic'

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'
+              }
             }
           }
         },

packages/core/test/interpreter.test.ts

@@ -382,19 +382,19 @@ describe('interpreter', () => {
       const clock = new SimulatedClock();
       const letterMachine = createMachine(
         {
+          types: {} as {
+            events: { type: 'FIRE_DELAY'; value: number };
+          },
           id: 'letter',
           context: {
             delay: 100
           },
           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
           }
         }
       );