Clean up machines (#1372)

* Update XState to v5.17.0

* Update all dependencies

* Reduce whitespace

* Reduce whitespace

* Clean up events from appMachine

* Reduce whitespace

* Increment patch version

Author: kevinmaes

package.json

@@ -15,9 +15,9 @@
     "lucide-react": "^0.471.1",
     "next": "15.1.4",
     "prettier": "^3.4.2",
-    "react": "19.0.0",
     "react-dom": "19.0.0",
     "react-is": "19.0.0",
+    "react": "19.0.0",
     "styled-components": "6.1.14",
     "url-loader": "^4.1.1",
     "use-sound": "^4.0.3",
@@ -28,16 +28,16 @@
     "@types/aria-query": "5.0.4",
     "@types/jest": "29.5.14",
     "@types/node": "^22.10.7",
-    "@types/react": "19.0.4",
     "@types/react-dom": "19.0.2",
+    "@types/react": "19.0.4",
     "@types/styled-components": "5.1.34",
     "@typescript-eslint/eslint-plugin": "8.19.1",
     "@typescript-eslint/parser": "8.19.1",
     "@typescript-eslint/typescript-estree": "8.19.1",
-    "eslint": "9.18.0",
     "eslint-config-next": "15.1.4",
-    "prettier": "^3.4.2",
+    "eslint": "9.18.0",
     "prettier-plugin-organize-imports": "^4.1.0",
+    "prettier": "^3.4.2",
     "typescript": "5.7.3"
   }
 }

src/components/Controls/Controls.tsx

@@ -1,14 +1,15 @@
 import React, { useState } from 'react';
 
 import { useSelector } from '@xstate/react';
+import { EventFrom } from 'xstate';
 import Pause from '../../assets/svg/controls/pause.svg';
 import Play from '../../assets/svg/controls/play.svg';
 import StartOver from '../../assets/svg/controls/start-over.svg';
 import StepForward from '../../assets/svg/controls/step-forward.svg';
 import Stop from '../../assets/svg/controls/stop.svg';
 import {
+  appMachine,
   AppMachineContext,
-  AppMachineEvent,
   ControlEvent,
 } from '../../statechart/app.machine';
 import { Keyboard } from '../Keyboard/Keyboard';
@@ -116,7 +117,7 @@ export function Controls() {
     if (event.detail === 0) {
       return;
     }
-    const eventObj = { type: id } as AppMachineEvent;
+    const eventObj = { type: id } as EventFrom<typeof appMachine>;
     actorRef.send(eventObj);
   }
 

src/statechart/app.machine.ts

@@ -1,5 +1,5 @@
 import { createActorContext } from '@xstate/react';
-import { EventFrom, StateFrom, assign, sendTo, setup } from 'xstate';
+import { assign, sendTo, setup } from 'xstate';
 import { IGrid } from '../components/generation/Grid';
 import { GenerationParams } from '../types';
 import { recursiveBacktrackerMachine } from './recursiveBacktracker.machine';
@@ -71,12 +71,7 @@ export const appMachine =
         }),
         on: {
           'grid.inject': {
-            actions: [
-              assign({
-                grid: ({ event }) => event.grid,
-              }),
-              'drawGrid',
-            ],
+            actions: [assign({ grid: ({ event }) => event.grid }), 'drawGrid'],
             target: 'Generating',
           },
         },
@@ -159,6 +154,3 @@ export const appMachine =
   });
 
 export const AppMachineContext = createActorContext(appMachine);
-
-export type AppMachineState = StateFrom<typeof appMachine>;
-export type AppMachineEvent = EventFrom<typeof appMachine>;

src/statechart/recursiveBacktracker.machine.ts

@@ -24,18 +24,10 @@ export const recursiveBacktrackerMachine =
         pathId: string;
       };
       events:
-        | {
-            type: 'generation.start';
-          }
-        | {
-            type: 'controls.play';
-          }
-        | {
-            type: 'controls.pause';
-          }
-        | {
-            type: 'controls.step.forward';
-          };
+        | { type: 'generation.start' }
+        | { type: 'controls.play' }
+        | { type: 'controls.pause' }
+        | { type: 'controls.step.forward' };
     },
     guards: {
       'can play': ({ context }) => context.canPlay,
@@ -105,9 +97,7 @@ export const recursiveBacktrackerMachine =
       },
       Seeking: {
         entry: ['findNeighbors', 'drawGrid'],
-        always: {
-          target: 'Advancing',
-        },
+        always: 'Advancing',
       },
       Advancing: {
         entry: ['pickNextCell', 'pushToStack'],
@@ -130,13 +120,8 @@ export const recursiveBacktrackerMachine =
           return { stack: [...stack], currentCell: prevCell };
         }),
         always: [
-          {
-            guard: 'back at the start',
-            target: 'Finished',
-          },
-          {
-            target: 'Seeking',
-          },
+          { guard: 'back at the start', target: 'Finished' },
+          { target: 'Seeking' },
         ],
       },
       Finished: {