Merge branch 'v5/interpret-all-behaviors' into v5/refactor-actions

.changeset/eighty-coins-tease.md

@@ -2,4 +2,4 @@
 'xstate': major
 ---
 
-Removed third parameter (context) from Machine's transition method. If you want to transition with a particular context value you should create appropriate `State` using `State.from`. So instead of this - `machine.transition('green', 'TIMER', { elapsed: 100 })`, you should do this - `machine.transition(State.from('green', { elapsed: 100 }), 'TIMER')`.
+Removed third parameter (context) from Machine's transition method. If you want to transition with a particular context value you should create appropriate `State` using `State.from`. So instead of this - `machine.transition('green', { type: 'TIMER' }, { elapsed: 100 })`, you should do this - `machine.transition(State.from('green', { elapsed: 100 }), { type: 'TIMER' })`.

.changeset/gold-buses-thank.md

@@ -0,0 +1,18 @@
+---
+'xstate': major
+---
+
+The `.send(...)` method on `interpreter.send(...)` now requires the first argument (the event to send) to be an _object_; that is, either:
+
+- an event object (e.g. `{ type: 'someEvent' }`)
+- an SCXML event object.
+
+The second argument (payload) is no longer supported, and should instead be included within the object:
+
+```diff
+-actor.send('SOME_EVENT')
++actor.send({ type: 'SOME_EVENT' })
+
+-actor.send('EVENT', { some: 'payload' })
++actor.send({ type: 'EVENT', some: 'payload' })
+```

.changeset/shy-walls-develop.md

@@ -2,4 +2,4 @@
 'xstate': major
 ---
 
-Support for compound string state values has been dropped from Machine's transition method. It's no longer allowed to call transition like this - `machine.transition('a.b', 'NEXT')`, instead it's required to use "state value" representation like this - `machine.transition({ a: 'b' }, 'NEXT')`.
+Support for compound string state values has been dropped from Machine's transition method. It's no longer allowed to call transition like this - `machine.transition('a.b', { type: 'NEXT' })`, instead it's required to use "state value" representation like this - `machine.transition({ a: 'b' }, { type: 'NEXT' })`.

.changeset/young-chefs-prove.md

@@ -0,0 +1,10 @@
+---
+'@xstate/fsm': major
+---
+
+The `.send(...)` method on `interpreter.send(...)` now requires the first argument (the event to send) to be an _object_, e.g. `{ type: 'someEvent' }`.
+
+```diff
+-actor.send('SOME_EVENT')
++actor.send({ type: 'SOME_EVENT' })
+```

README.md

@@ -75,10 +75,10 @@ const toggleService = interpret(toggleMachine)
   .start();
 // => 'inactive'
 
-toggleService.send('TOGGLE');
+toggleService.send({ type: 'TOGGLE' });
 // => 'active'
 
-toggleService.send('TOGGLE');
+toggleService.send({ type: 'TOGGLE' });
 // => 'inactive'
 ```
 
@@ -138,7 +138,7 @@ const dogService = interpret(fetchMachine)
   .onTransition((state) => console.log(state.value))
   .start();
 
-dogService.send('FETCH');
+dogService.send({ type: 'FETCH' });
 ```
 
 </details>
@@ -213,7 +213,8 @@ const lightMachine = createMachine({
 
 const currentState = 'green';
 
-const nextState = lightMachine.transition(currentState, 'TIMER').value;
+const nextState = lightMachine.transition(currentState, { type: 'TIMER' })
+  .value;
 
 // => 'yellow'
 ```
@@ -272,12 +273,13 @@ const lightMachine = createMachine({
 
 const currentState = 'yellow';
 
-const nextState = lightMachine.transition(currentState, 'TIMER').value;
+const nextState = lightMachine.transition(currentState, { type: 'TIMER' })
+  .value;
 // => {
 //   red: 'walk'
 // }
 
-lightMachine.transition('red.walk', 'PED_TIMER').value;
+lightMachine.transition('red.walk', { type: 'PED_TIMER' }).value;
 // => {
 //   red: 'wait'
 // }
@@ -287,15 +289,18 @@ lightMachine.transition('red.walk', 'PED_TIMER').value;
 
 ```js
 // ...
-const waitState = lightMachine.transition({ red: 'walk' }, 'PED_TIMER').value;
+const waitState = lightMachine.transition(
+  { red: 'walk' },
+  { type: 'PED_TIMER' }
+).value;
 
 // => { red: 'wait' }
 
-lightMachine.transition(waitState, 'PED_TIMER').value;
+lightMachine.transition(waitState, { type: 'PED_TIMER' }).value;
 
 // => { red: 'stop' }
 
-lightMachine.transition({ red: 'stop' }, 'TIMER').value;
+lightMachine.transition({ red: 'stop' }, { type: 'TIMER' }).value;
 
 // => 'green'
 ```
@@ -364,7 +369,8 @@ const wordMachine = createMachine({
   }
 });
 
-const boldState = wordMachine.transition('bold.off', 'TOGGLE_BOLD').value;
+const boldState = wordMachine.transition('bold.off', { type: 'TOGGLE_BOLD' })
+  .value;
 
 // {
 //   bold: 'on',
@@ -380,7 +386,7 @@ const nextState = wordMachine.transition(
     underline: 'on',
     list: 'bullets'
   },
-  'TOGGLE_ITALICS'
+  { type: 'TOGGLE_ITALICS' }
 ).value;
 
 // {
@@ -420,21 +426,25 @@ const paymentMachine = createMachine({
   }
 });
 
-const checkState = paymentMachine.transition('method.cash', 'SWITCH_CHECK');
+const checkState = paymentMachine.transition('method.cash', {
+  type: 'SWITCH_CHECK'
+});
 
 // => State {
 //   value: { method: 'check' },
 //   history: State { ... }
 // }
 
-const reviewState = paymentMachine.transition(checkState, 'NEXT');
+const reviewState = paymentMachine.transition(checkState, { type: 'NEXT' });
 
 // => State {
 //   value: 'review',
 //   history: State { ... }
 // }
 
-const previousState = paymentMachine.transition(reviewState, 'PREVIOUS').value;
+const previousState = paymentMachine.transition(reviewState, {
+  type: 'PREVIOUS'
+}).value;
 
 // => { method: 'check' }
 ```

docs/examples/counter.md

@@ -33,13 +33,13 @@ const counterService = interpret(counterMachine)
   .start();
 // => 0
 
-counterService.send('INC');
+counterService.send({ type: 'INC' });
 // => 1
 
-counterService.send('INC');
+counterService.send({ type: 'INC' });
 // => 2
 
-counterService.send('DEC');
+counterService.send({ type: 'DEC' });
 // => 1
 ```
 
@@ -77,9 +77,9 @@ const counterMachine = createMachine({
 // ...
 
 // assume context is { count: 9 }
-counterService.send('INC');
+counterService.send({ type: 'INC' });
 // => 10
 
-counterService.send('INC'); // no transition taken!
+counterService.send({ type: 'INC' }); // no transition taken!
 // => 10
 ```

docs/fr/examples/counter.md

@@ -33,13 +33,13 @@ const counterService = interpret(counterMachine)
   .start();
 // => 0
 
-counterService.send('INC');
+counterService.send({ type: 'INC' });
 // => 1
 
-counterService.send('INC');
+counterService.send({ type: 'INC' });
 // => 2
 
-counterService.send('DEC');
+counterService.send({ type: 'DEC' });
 // => 1
 ```
 
@@ -77,9 +77,9 @@ const counterMachine = createMachine({
 // ...
 
 // Supposons que le valeur du contexte était { count: 9 }
-counterService.send('INC');
+counterService.send({ type: 'INC' });
 // => 10
 
-counterService.send('INC'); // Pas de transition !
+counterService.send({ type: 'INC' }); // Pas de transition !
 // => 10
 ```

docs/fr/guides/actions.md

@@ -355,7 +355,7 @@ const raiseActionDemo = createMachine({
         RAISE: {
           target: 'middle',
           // immediately invoke the NEXT event for 'middle'
-          actions: raise('NEXT')
+          actions: raise({ type: 'NEXT' })
         }
       }
     },
@@ -542,7 +542,7 @@ const loggingMachine = createMachine({
   }
 });
 
-const endState = loggingMachine.transition('start', 'FINISH');
+const endState = loggingMachine.transition('start', { type: 'FINISH' });
 
 endState.actions;
 // [

docs/fr/guides/actors.md

@@ -315,7 +315,7 @@ const remoteMachine = createMachine({
     online: {
       after: {
         1000: {
-          actions: sendParent('REMOTE.ONLINE')
+          actions: sendParent({ type: 'REMOTE.ONLINE' })
         }
       }
     }

docs/fr/guides/communication.md

@@ -539,9 +539,12 @@ const pongMachine = createMachine({
       on: {
         PING: {
           // Sends 'PONG' event to parent machine
-          actions: sendParent('PONG', {
-            delay: 1000
-          })
+          actions: sendParent(
+            { type: 'PONG' },
+            {
+              delay: 1000
+            }
+          )
         }
       }
     }

docs/fr/guides/delays.md

@@ -311,8 +311,8 @@ The `after: ...` property does not introduce anything new to statechart semantic
 states: {
   green: {
     entry: [
-      send(after(1000, 'light.green'), { delay: 1000 }),
-      send(after(2000, 'light.green'), { delay: 2000 })
+      send({ type: after(1000, 'light.green') }, { delay: 1000 }),
+      send({ type: after(2000, 'light.green') }, { delay: 2000 })
     ],
     onExit: [
       cancel(after(1000, 'light.green')),

docs/fr/guides/events.md

@@ -41,11 +41,11 @@ const lightMachine = createMachine({
 
 const { initialState } = lightMachine;
 
-let nextState = lightMachine.transition(initialState, 'TIMER'); // string event
+let nextState = lightMachine.transition(initialState, { type: 'TIMER' }); // string event
 console.log(nextState.value);
 // => 'yellow'
 
-nextState = lightMachine.transition(nextState, { type: 'TIMER' }); // event object
+nextState = lightMachine.transition(nextState, { type: { type: 'TIMER' } }); // event object
 console.log(nextState.value);
 // => 'red'
 ```
@@ -104,7 +104,7 @@ const skipMachine = createMachine({
 });
 
 const { initialState } = skipMachine;
-const nextState = skipMachine.transition(initialState, 'CLICK');
+const nextState = skipMachine.transition(initialState, { type: 'CLICK' });
 
 console.log(nextState.value);
 // => 'three'

docs/fr/guides/interpretation.md

@@ -50,23 +50,10 @@ service.start();
 
 // As an object (preferred):
 service.send({ type: 'CLICK', x: 40, y: 21 });
-
-// As a string:
-// (same as service.send({ type: 'CLICK' }))
-service.send('CLICK');
-
-// As a string with an object payload:
-// (same as service.send({ type: 'CLICK', x: 40, y: 21 }))
-service.send('CLICK', { x: 40, y: 21 });
 ```
 
 - As an event object (e.g., `.send({ type: 'CLICK', x: 40, y: 21 })`)
   - The event object must have a `type: ...` string property.
-- As a string (e.g., `.send('CLICK')`, which resolves to sending `{ type: 'CLICK' }`)
-  - The string represents the event type.
-- As a string followed by an object payload (e.g., `.send('CLICK', { x: 40, y: 21 })`) <Badge text="4.5+"/>
-  - The first string argument represents the event type.
-  - The second argument must be an object without a `type: ...` property.
 
 ::: warning
 If the service is not initialized (that is, if `service.start()` wasn't called yet), events will be **deferred** until the service is started. This means that the events won't be processed until `service.start()` is called, and then they will all be sequentially processed.

docs/fr/guides/statenodes.md

@@ -305,6 +305,6 @@ const machine = createMachine({
 machine.initialState.hasTag('loading');
 // => false
 
-machine.transition(machine.initialState, 'FETCH').hasTag('loading');
+machine.transition(machine.initialState, { type: 'FETCH' }).hasTag('loading');
 // => true
 ```

docs/fr/guides/states.md

@@ -248,19 +248,19 @@ const machine = createMachine({
 
 const inactiveState = machine.initialState;
 
-inactiveState.can('TOGGLE'); // true
-inactiveState.can('DO_SOMETHING'); // false
+inactiveState.can({ type: 'TOGGLE' }); // true
+inactiveState.can({ type: 'DO_SOMETHING' }); // false
 
 // Also takes in full event objects:
 inactiveState.can({
   type: 'DO_SOMETHING',
   data: 42
 }); // false
 
-const activeState = machine.transition(inactiveState, 'TOGGLE');
+const activeState = machine.transition(inactiveState, { type: 'TOGGLE' });
 
-activeState.can('TOGGLE'); // false
-activeState.can('DO_SOMETHING'); // true, since an action will be executed
+activeState.can({ type: 'TOGGLE' }); // false
+activeState.can({ type: 'DO_SOMETHING' }); // true, since an action will be executed
 ```
 
 A state is considered “changed” if [`state.changed`](#state-changed) is `true` and if any of the following are true:

docs/fr/guides/transitions.md

@@ -327,7 +327,7 @@ const gameService = interpret(gameMachine)
 // When 'AWARD_POINTS' is sent, a self-transition to 'PLAYING' occurs.
 // The transient transition to 'win' is taken because the 'didPlayerWin'
 // condition is satisfied.
-gameService.send('AWARD_POINTS');
+gameService.send({ type: 'AWARD_POINTS' });
 // => 'win'
 ```