Apply formatting to all files

Author: kevinmaes

blog/2023-1-27-making-state-machines-global-in-react/index.mdx

@@ -59,7 +59,9 @@ function SomeComponent() {
   return (
     <div>
       <p>Count: {count}</p>
-      <button onClick={() => actorRef.send({ type: 'INCREMENT' })}>Increment</button>
+      <button onClick={() => actorRef.send({ type: 'INCREMENT' })}>
+        Increment
+      </button>
     </div>
   );
 }

blog/2023-11-23-stately-studio-2-0-changelog/index.mdx

@@ -66,4 +66,4 @@ This is an excellent time to mention that annotations are now called notes! Note
 
 In the machine’s bottom bar, you can now find undo/redo, zoom options and the help button on the bottom right. And managing machine versions, including switching and creating new versions, can now be done from the bottom left. While viewing a version, the buttons for restoring or duplicating the machine are still in the top bar.
 
-When you import code into the editor without a project, We’ll now automatically create a new project for you.
+When you import code into the editor without a project, We’ll now automatically create a new project for you.

blog/2023-11-28-koordinates-and-stately-case-study/index.mdx

@@ -2,7 +2,17 @@
 title: 'Koordinates x Stately: geospatial data management case study'
 description: Making geographic information systems accessible and collaborative. A Stately and Koordinates case study.
 authors: [gavin]
-tags: [case study, study, koordinates, stately, state machines, machines, gis, geospatial]
+tags:
+  [
+    case study,
+    study,
+    koordinates,
+    stately,
+    state machines,
+    machines,
+    gis,
+    geospatial,
+  ]
 date: 2023-11-28
 slug: 2023-11-28-koordinates-and-stately-case-study
 image: /blog/2023-11-28-koordinates-and-stately-case-study.png
@@ -11,16 +21,15 @@ image: /blog/2023-11-28-koordinates-and-stately-case-study.png
 When it came to navigating the complexities of business context and application state, Koordinates found their solution in Stately's tools, reshaping their coding practices and ensuring a seamless user experience.
 {/* truncate */}
 
-
-
 For more than 15 years, the team at [Koordinates](https://koordinates.com/) has been hard at work reimagining and building streamlined and equitable ways for customers to manage geospatial data. Koordinates have built a massively scaled GIS (Geographic Information Systems) platform for users to upload their own data, query over 18,000 open datasets, and securely merge openly available data with proprietary information.
 Unlike competing products that require vendor lock-in and lack compatibility across the entire GIS stack, Koordinates’ offerings are modular: users may use as much or as little of the tooling as they like, and the tooling is interoperable with existing GIS environments.
 
 <p>
   <ThemedImage
     alt="Koordinates logo"
     sources={{
-      light: '/blog/2023-11-28-koordinates-and-stately-case-study/koordinates_logo_black.png',
+      light:
+        '/blog/2023-11-28-koordinates-and-stately-case-study/koordinates_logo_black.png',
       dark: '/blog/2023-11-28-koordinates-and-stately-case-study/koordinates_logo_white.png',
     }}
   />
@@ -48,36 +57,36 @@ In the case of Kart, many of these operations can be long-running and have sever
 
 ## Breaking complex UI’s into manageable components
 
-In the case of both their products, Koordinates was able to use Stately’s tooling to break their “big” problems down into several, distinct smaller ones. Taylor Lodge, an engineer on the core team, explained that with Sta tely’s visual editor and simulation tooling, they were able to break their application logic into several small, testable state machines. For example, the UI for Koordinates Cloud has several components, but the logic for loading elements in their list view is represented rather succinctly in this state machine: 
-
+In the case of both their products, Koordinates was able to use Stately’s tooling to break their “big” problems down into several, distinct smaller ones. Taylor Lodge, an engineer on the core team, explained that with Sta tely’s visual editor and simulation tooling, they were able to break their application logic into several small, testable state machines. For example, the UI for Koordinates Cloud has several components, but the logic for loading elements in their list view is represented rather succinctly in this state machine:
 
 <EmbedMachine
   name="Koordinates List View Machine"
-  embedURL="https://stately.ai/registry/editor/embed/1b48bbf1-6f7a-4847-b1e0-47ee5c283371?machineId=68b835cc-49fc-4b9c-972e-a63c01465c1f"/>
+  embedURL="https://stately.ai/registry/editor/embed/1b48bbf1-6f7a-4847-b1e0-47ee5c283371?machineId=68b835cc-49fc-4b9c-972e-a63c01465c1f"
+/>
 
 There are several potential events that _can_ happen, but the core states are relatively few to model this behavior. Instead of representing their entire app state in a monolith, the team decided to go with a more modular approach, making use of the [actor model](https://en.wikipedia.org/wiki/Actor_model). This makes maintaining and testing individual components much easier, and it allows for extensibility down the line as project complexity grows.
 
 Handling several logical components does come with some considerations, however. Taylor noted that now that the team had several small components, they needed a way to orchestrate and communicate between them in a cohesive manner. Thankfully, the [XState](https://github.com/statelyai/xstate) framework for composing machines is open source, and the team used it as their base for [`xstate-tree`, an open source framework](https://github.com/koordinates/xstate-tree) for modeling complex UIs as a tree of XState machines. `xstate-tree` couples React views with state machines and composes them as actors in “slots”, allowing them to be exposed to their respective React views. Learn more about all the features `xstate-tree` provides in their [well-documented GitHub repo](https://github.com/koordinates/xstate-tree).
 
-While there are other state management platforms for developers, the team at Koordinates also wanted the ability to co-locate their implementation logic alongside their machines’ definitions, or “blueprints”. This reduces the surface area developers when revisions need to made to their machines. From Taylor: 
+While there are other state management platforms for developers, the team at Koordinates also wanted the ability to co-locate their implementation logic alongside their machines’ definitions, or “blueprints”. This reduces the surface area developers when revisions need to made to their machines. From Taylor:
 
 > “I love the first class support in XState for side effects. That the side effects can be co-located with my code that triggers it and uses it, instead of having to put them _somewhere else_ like with Redux”
 
-
 ## Handling complex, long-running tasks and edge cases
 
 Being a source control solution for complex datasets, Kart has a naturally complex set of problems to solve as well. Merging, cloning, and loading data all have plenty of considerations, edge cases, and possible failure scenarios, so the team had to take care to address all of them. The ability to map this logic using the Stately Editor proved to be extremely useful.
 
 <EmbedMachine
   name="Koordinates List View Machine"
-  embedURL="https://stately.ai/registry/editor/embed/1b48bbf1-6f7a-4847-b1e0-47ee5c283371?machineId=afa23e5f-11c7-460d-bd98-ff7de694a41d"/>
+  embedURL="https://stately.ai/registry/editor/embed/1b48bbf1-6f7a-4847-b1e0-47ee5c283371?machineId=afa23e5f-11c7-460d-bd98-ff7de694a41d"
+/>
 
-Stately tooling isn’t just for managing UI state. In fact, the logic representing Kart repos is all managed using an XState actor. That actor then watches the filesystem to execute Kart-specific commands and update its own in-memory state. 
+Stately tooling isn’t just for managing UI state. In fact, the logic representing Kart repos is all managed using an XState actor. That actor then watches the filesystem to execute Kart-specific commands and update its own in-memory state.
 
 Taylor and the team love Stately’s visual editor. Even without domain knowledge of their core product, the logic is still human readable and understandable. Questions like “what happens when a user cancels a clone operation?” and “when is the data model for branches updated?” are easily answered by reading the diagram. Diagramming logic in this way ensured the team was able to build Kart’s functionality in a way that is inherently less prone to bugs and plan for potential errors where possible without wasting time over-engineering for cases that could never occur.
 
 ## Moving forward with Stately
 
-By building with Stately’s tooling, the Koordinates team not only simplified their UI and repository state management, but they in turn gave back to the technical community with `xstate-tree`, allowing React developers to better wrangle hosts of machines. Koordinates and Stately are aligned on many core goals: enhancing productivity for their users, strongly committing to open source, and facilitating team collaboration. Naturally, the Stately team was eager for feedback and have committed to the development of features that enhance collaboration without compromise. This includes GitHub synchronization to maintain the repo as the authoritative source and system-wide statechart visualization to facilitate deeper interdisciplinary communication and understanding. 
+By building with Stately’s tooling, the Koordinates team not only simplified their UI and repository state management, but they in turn gave back to the technical community with `xstate-tree`, allowing React developers to better wrangle hosts of machines. Koordinates and Stately are aligned on many core goals: enhancing productivity for their users, strongly committing to open source, and facilitating team collaboration. Naturally, the Stately team was eager for feedback and have committed to the development of features that enhance collaboration without compromise. This includes GitHub synchronization to maintain the repo as the authoritative source and system-wide statechart visualization to facilitate deeper interdisciplinary communication and understanding.
 
-Koordinates saw a significant leap in efficiency and team collaboration with Stately's tools. [Book a demo with us today](https://calendly.com/d/yc8-3hq-rpc/request-a-demo) to learn how Stately can empower your team to build better software, faster.
+Koordinates saw a significant leap in efficiency and team collaboration with Stately's tools. [Book a demo with us today](https://calendly.com/d/yc8-3hq-rpc/request-a-demo) to learn how Stately can empower your team to build better software, faster.

blog/2023-12-01-xstate-v5/index.mdx

@@ -71,11 +71,16 @@ const promiseLogic = fromPromise(async ({ input }) => {
 ```jsx
 import { fromTransition } from 'xstate';
 
-const transitionLogic = fromTransition((state, event) => {
-  switch (event.type) {
-    // reducer logic; you know the drill
-  }
-}, { count: 0 });
+const transitionLogic = fromTransition(
+  (state, event) => {
+    switch (
+      event.type
+      // reducer logic; you know the drill
+    ) {
+    }
+  },
+  { count: 0 },
+);
 ```
 
 **Observable actor logic**
@@ -95,11 +100,13 @@ import { fromCallback } from 'xstate';
 const callbackLogic = fromCallback(({ sendBack, receive }) => {
   const handler = (event) => {
     sendBack(event);
-  }
-  
+  };
+
   window.addEventListener('message', handler);
 
-  return () => { window.removeEventListener('message', handler); }
+  return () => {
+    window.removeEventListener('message', handler);
+  };
 });
 ```
 
@@ -112,7 +119,7 @@ import { createActor } from 'xstate';
 
 const actor = createActor(someLogic);
 
-actor.subscribe(snapshot => {
+actor.subscribe((snapshot) => {
   console.log(snapshot);
 });
 
@@ -130,8 +137,8 @@ function withLogging(actorLogic) {
     transition: (state, event, actorScope) => {
       console.log('State:', state);
       return actorLogic.transition(state, event, actorScope);
-    }
-  }
+    },
+  };
 }
 
 const actor = createActor(withLogging(someLogic));
@@ -156,7 +163,7 @@ const actor = createActor(machine, {
     // type: '@xstate.snapshot' or
     // type: '@xstate.event'
     console.log(inspectionEvent);
-  }
+  },
 });
 ```
 
@@ -175,8 +182,8 @@ import { setup, createActor } from 'xstate';
 
 const machine = setup({
   actors: {
-    counter: fromTransition(/* ... */)
-  }
+    counter: fromTransition(/* ... */),
+  },
 }).createMachine({
   invoke: {
     // This will also be persisted!
@@ -293,15 +300,15 @@ const promiseActor = createActor(promiseLogic, {
 
 // From a machine
 const machine = setup({
-  actors: { promiseLogic }
+  actors: { promiseLogic },
 }).createMachine({
   invoke: {
     src: 'promiseLogic',
     input: {
       id: 42,
     },
-  }
-})
+  },
+});
 ```
 
 Actors can also have [output](/docs/output), which represents their “done data” when they have reached their final state. It’s not just state machines that can have output; promise logic naturally resolves with output, and it may be possible to specify output for other actor logic types in the future.
@@ -385,20 +392,30 @@ const machine = setup({
 }).createMachine({
   initial: 'green',
   states: {
-    green: {/* ... */},
-    yellow: {/* ... */},
+    green: {
+      /* ... */
+    },
+    yellow: {
+      /* ... */
+    },
     red: {
       initial: 'walk',
       states: {
-        walk: {/* ... */},
-        run: {/* ... */},
-        stop: {/* ... */}
-      }
-    }
-  }
+        walk: {
+          /* ... */
+        },
+        run: {
+          /* ... */
+        },
+        stop: {
+          /* ... */
+        },
+      },
+    },
+  },
 });
 
-const actor = createActor(machine)
+const actor = createActor(machine);
 actor.start();
 
 // Strongly-typed state values!
@@ -423,24 +440,24 @@ const machine = setup({
   actions: {
     greet: (_, params: { name: string }) => {
       console.log(`Hello, ${params.name}!`);
-    }
+    },
   },
   guards: {
     isGreaterThan: (_, params: { value: number; min: number }) => {
       return params.value > params.min;
-    }
-  }
+    },
+  },
 }).createMachine({
   context: ({ input }) => ({
     user: input.user,
-    count: 0
+    count: 0,
   }),
   entry: {
     type: 'greet',
     // highlight-start
     params: ({ context }) => ({
-      name: context.user.name
-    })
+      name: context.user.name,
+    }),
     // highlight-end
   },
   on: {
@@ -450,12 +467,12 @@ const machine = setup({
         // highlight-start
         params: ({ context, event }) => ({
           value: context.count,
-          min: 0
-        })
+          min: 0,
+        }),
         // highlight-end
-      }
-    }
-  }
+      },
+    },
+  },
 });
 ```
 
@@ -471,7 +488,7 @@ const machine = createMachine({
   entry: enqueueActions(({ context, event, enqueue, check }) => {
     // assign action
     enqueue.assign({
-      count: context.count + 1
+      count: context.count + 1,
     });
 
     // Conditional actions (replaces choose(...))
@@ -495,7 +512,7 @@ const machine = createMachine({
     }
 
     // no return
-  })
+  }),
 });
 ```
 
@@ -543,7 +560,7 @@ const userMachine = setup({
     isAuthenticated: ({ context }) => context.user !== undefined,
     isAdmin: ({ context }) => context.user.role === 'admin',
     isBanned: ({ context }) => context.user.status === 'banned',
-  }
+  },
 }).createMachine({
   // ...
   on: {

blog/2023-12-07-tidefi-and-stately-case-study/index.mdx

@@ -59,10 +59,16 @@ I was able to showcase the machine visualizer to the rest of the company, which
 
 Several months down the road, our team was running into some challenges of transmitting data between pages. Most pages had a machine that controlled the flow, and then there were other machines meant for data subscriptions, connection handling, etc. I decided to model a traditional hub-and-spoke actor system by:
 
-<ol style={{'list-style-type': 'lower-alpha'}}>
-<li>nesting actors underneath a root actor</li>
-<li>broadcasting an INIT event to register actors and facilitate storing references</li>
-<li>handle some communication via broadcasts, and others as direct events or data queries</li>
+<ol style={{ 'list-style-type': 'lower-alpha' }}>
+  <li>nesting actors underneath a root actor</li>
+  <li>
+    broadcasting an INIT event to register actors and facilitate storing
+    references
+  </li>
+  <li>
+    handle some communication via broadcasts, and others as direct events or
+    data queries
+  </li>
 </ol>
 
 In the [XState Discord](https://discord.stately.ai), this concept came up several times, and my implementation was tweaked until it was fairly easy to reason with, and performant. To my delight, the XState team created an RFC to introduce actor systems and the “receptionist” pattern! It was a joy to have real-world experience to contribute to the discussion and prove or challenge parts of the API. Now it is a built-in part of XState v5! I can remove dozens of lines of code and instead utilize my root actor as a system with individually named actors in a tree underneath.

blog/2023-12-29-end-of-year-changelog/index.mdx

@@ -22,7 +22,7 @@ Your machine’s context is now displayed on the canvas. You can add your contex
 
 ## Add transition
 
-When a transition selected, you can now use the arrow icon button to add another transition for quick conditional logic. Using the button will add a transition from the same source state, making the original transition into an *if* transition and the new transition into an *else* transition, where you can then add your [guard logic](/docs/guards).
+When a transition selected, you can now use the arrow icon button to add another transition for quick conditional logic. Using the button will add a transition from the same source state, making the original transition into an _if_ transition and the new transition into an _else_ transition, where you can then add your [guard logic](/docs/guards).
 
 ![A selected transition with the next label. Using the arrow icon button adds a new transition from the same source state. The first transition is then labeled 1 next IF new guard. The second transition is labeled 2 next ELSE.](add-transition.gif)
 
@@ -45,4 +45,4 @@ You can now use the **Show/hide effects on canvas** option in the editor menu vi
 - We fixed a bug where you could sometimes be redirected to the Project settings page when creating a new machine.
 - You can now remove [state and event descriptions](/docs/descriptions) without any issues. To delete a description, remove its text. To remove the description area from a state or event, delete its text from the details panel.
 - We fixed a bug with the CodeSandbox and StackBlitz exports when using XState V5.
-- You can now undo when you use the **Clear** button on a machine at [state.new](https://state.new).
+- You can now undo when you use the **Clear** button on a machine at [state.new](https://state.new).

blog/2024-01-02-office-hours/index.mdx

@@ -11,7 +11,7 @@ tags:
     stately inspect,
     github sync,
     sources,
-    roadmap
+    roadmap,
   ]
 authors: [laura]
 date: 2024-01-02
@@ -43,5 +43,4 @@ Watch the video to find out about our new features and plans for 2024. Use the l
 - [47:04 Can guards assign new data to the machine state?](https://youtube.com/watch?v=x-F1TPjz_lI&t=2824s)
 - [50:52 How to stay updated with the Stately team](https://youtube.com/watch?v=x-F1TPjz_lI&t=3052s)
 
-
-Be the first to find out about our next office hours by subscribing to [our YouTube channel](https://www.youtube.com/@Statelyai), [Twitch channel](https://www.twitch.tv/statelyai), or [following us on LinkedIn](https://www.linkedin.com/company/statelyai/).
+Be the first to find out about our next office hours by subscribing to [our YouTube channel](https://www.youtube.com/@Statelyai), [Twitch channel](https://www.twitch.tv/statelyai), or [following us on LinkedIn](https://www.linkedin.com/company/statelyai/).