When you use the trackpad for scrolling, arrows are disconnected ...

Great project, thank you!

Just throwing out an idea that it could be useful to see slight permutations of the same machine adding additional functionality. A simple example would be to permute the “ Simple Data Fetch” machine to use the AbortController to actual cancel the request.

This would allow use to start with trivial examples and build up more complex, intricate examples while allowing someone new to start from an easy to understand example.

I think there are some examples in the catalogue where we are implicitly doing this, but i suspect modifying the current design could help make it more explicit that a group of example build on each other.

Description

When viewing any machine src on mobile, the Copy to Clipboard button covers content in the code block, making it difficult to see the first few lines of the machine src.

I'm creating a finite state machine for handling the audio player component of the new version of Podhouse and I'd like to contribute to this project.

Here's the link for the visualizer of the Audio player machine

There's a lot of space for improvement here but so far I think this is a good starter.

I few ideas as next steps for this state machine:

• Use the Web Audio API and set the audio element on context.
• Set the properties such as volume, rate, seek (this one might be complex), mute, and loop on context.

As a XState newbie, I'm a bit confused when finding the simpleDataFetch example -
there is no hint at all about how to actually implement actual (real or mock) data fetching:

• where should the fetch code live? (In the empty services: fetchData method, I guess...)
• how should I notify the machine about a sucessful fetch request? (sending an RECEIVE_DATA event together with the associated data:Data field back to the machine, I guess...)
• how should I notify the machine about a data loading error? (No idea, there is no error type event...)
• how can the Variables type be used? (No idea...)

At least, the simpleDataFetch example should have some commented out implementation example lines to give the user (me!) an idea about how to get some actual data flowing.

Best! / Jonas

Hi @mattpocock, thanks for this project, really cool! 🙌 So amazing to see high quality examples of state machines - great for learners like our bootcamp students at @upleveled.

I'm not sure if you're accepting suggestions for new state machines, but I wanted to open an issue just in case.

It would be cool to have a state machine in the catalogue that would represent a quiz or test, including features such as:

• start screen with start button
• "answering single-answer question" state during quiz (also with the number of the question?)
• "answering multi-answer question" state during quiz (also with the number of the question?)
• end screen with restart button (also with the results of the quiz questions?)

I'm kind of new to designing state machines, so the parts in parentheses above may be better implemented in a different way.

The focused button doesn’t interact with mouse click or keyboard. Other uses of 'RECEIVED_DATA' work on the page as expected.

Just wanted to say that this is one of the most well put together and useful community projects I have ever seen:

• bravo 👏
• thank you so much for the hard work
• I will use it very frequently

Hi,

Tried this

https://xstate-catalogue.com/machines/debounce

in chrome, clicking the yellow GO event multiple times - then it goes to debouncing.... if I stop pressing the GO then it doesn't seem to advance.

Maybe I am doing it wrong ?

While using a Windows 10 machine [version 19042.906], user attempts to open the "search machines" modal with the ctrl + k chord trigger the Focus Address bar for Web Search (writes "? " there) search shortcut in Firefox (Version 87.0 (64-bit))[1] and the Search from anywhere on the page address bar shortcut in Chrome (version 89.0.4389.114) [2]

macOS users do not appear to have a similar conflict.

[1] - https://support.mozilla.org/en-US/kb/keyboard-shortcuts-perform-firefox-tasks-quickly
[2] - https://support.google.com/chrome/answer/157179?co=GENIE.Platform%3DDesktop&hl=en#zippy=%2Caddress-bar-shortcuts

Chrome Result	Firefox Result

Chrome Shortcuts	Firefox Shortcuts

Machines should have 'tags' relating to different XState advanced concepts, like 'nested states', 'actor spawning', 'invoked callback', 'guards'.

The tags should be shown on the machine's page, as well as in search results and on the home page.

While working in #13 I stumbled upon a problem with the current eventPayloads implementation.

The events in this Statechart are parametrized with the respective index that is either dragged (PICK_UP) or reaches an intersection (DRAG_REACHED_INTERSECTION). This works pretty well here:

## Test cases

### Swapping items 1 and 2

Pick up first item: <Event index={0}>PICK_UP</Event>.

Cross over second item: <Event index={1}>DRAG_REACHED_INTERSECTION</Event>.

Drop item: <Event>DROP</Event>.

Numbers one and two of the data list should have swapped places.

### Swapping items 1 and 3

Pick up first item: <Event index={0}>PICK_UP</Event>.

Cross over third item: <Event index={3}>DRAG_REACHED_INTERSECTION</Event>.

Drop item: <Event>DROP</Event>.

The first item should now be at the end.

but sadly does not work in the Sidebar. (because of the way events are distinct by their name only)

Result

The interactive documentation is one of the best features I have seen lately, maybe we can find a way with great UX to provide an event's payload, or David is already working/has already done this (😉). 🚀

Affected Machines

• Drag and Drop
• Pagination
• Offline Queue

edits:

• added Affected Machines

I was thinking about adding a notifications / alert machine.

Do you think that would fit in?

In my vscode, the section "authentication.machine.ts" show an error with

(property) clearUserDetailsFromContext: AssignAction<{
    userDetails: undefined;
}, EventObject>
Type 'AssignAction<{ userDetails: undefined; }, AuthenticationMachineEvent>' is not assignable to type 'ActionObject<AuthenticationMachineContext, AuthenticationMachineEvent> | ActionFunction<AuthenticationMachineContext, AuthenticationMachineEvent>'.
  Type 'AssignAction<{ userDetails: undefined; }, AuthenticationMachineEvent>' is not assignable to type 'ActionObject<AuthenticationMachineContext, AuthenticationMachineEvent>'.

my ts config as below:

{
  "extends": "./node_modules/gts/tsconfig-google.json",
  "compilerOptions": {
    "rootDir": ".",
    "outDir": "build"
  },
  "include": [
    "src/**/*.ts",
    "test/**/*.ts"
  ]
}

ts version:

    "typescript": "^4.0.3"

Hi there,

@mattpocock as we spoke yesterday on twitter, I can't click on the received_data. I can only trigger the error.

I've tried on chrome on a windows and mac os machine.

And thank you very much for this project! :)

Found a small issue in the catalogue, it looks like the debounce machine the catalogue, has 2 type errors. I'm using typescript 4.3.2.

src/machines/debounceMachine.tsx:46:7 - error TS2322: Type 'AssignAction<{ action: undefined; }, DebounceMachineEvent>' is not assignable to type 'ActionObject<DebounceMachineContext, DebounceMachineEvent> | ActionFunction<DebounceMachineContext, DebounceMachineEvent>'.
  Type 'AssignAction<{ action: undefined; }, DebounceMachineEvent>' is not assignable to type 'ActionObject<DebounceMachineContext, DebounceMachineEvent>'.
    Types of property 'exec' are incompatible.
      Type 'ActionFunction<{ action: undefined; }, DebounceMachineEvent> | undefined' is not assignable to type 'ActionFunction<DebounceMachineContext, DebounceMachineEvent> | undefined'.
        Type 'ActionFunction<{ action: undefined; }, DebounceMachineEvent>' is not assignable to type 'ActionFunction<DebounceMachineContext, DebounceMachineEvent>'.
          Types of parameters 'context' and 'context' are incompatible.
            Type 'DebounceMachineContext' is not assignable to type '{ action: undefined; }'.

46       clearAction: assign({
         ~~~~~~~~~~~

src/machines/debounceMachine.tsx:55:16 - error TS2722: Cannot invoke an object which is possibly 'undefined'.

55         return context.action();
                  ~~~~~~~~~~~~~~


Found 2 errors.

I have some examples which I want to contribute. They use Actor model to connect multiple machines together.

What would be the best way to show this in the catalogue?

License seems to be missing, not clear on what terms code in this repo can be used.
Other than that - that is an amazing project, thank you so much!

I'm seeing an issue where the whole page scrolls as well when scrolling inside the visualiser. The recording is in Brave but this also happened in Safari and Chrome.

https://www.loom.com/share/d13e871bddcc44abb6b77160798192ea

expected: move the whole diagram while using the trackpad (two finger slide). works ok in Chrome.
actual: only the arrows are moved while the boxes are fixed

browser: Safari/macOS

Right now the searcher can only be navigated using tab, which feels unexpected for that type of interaction. Most sites with an Alogolia UI or similar support arrow keys.

Obviously not the highest priority, but it's a nice bit of polish that would make search feel extra special. Plus this would probably add enough unique functionality to make the searcher machine a good one to include in the catalogue itself, while also driving the search experience. That's my kind of dogfooding!

I implemented syntax highlighting for the "whole context" block (c.f. #18) and I am wondering if it'd make sense to also implement it for inline context. It could look something like this:

Thoughts?

Unfortunately we're unable to scroll in this section

Navigating the examples using the mouse wheel as a scroll method, when I start to scroll with the mouse hover the inspector with the default layout (hamburger with 4 lines), the visualization moves out; especially while scrolling up.

I did try to solve the problem, but without success.

I'm using Firefox 89.0.2 (64-bit).

https://www.loom.com/share/0bd9a82276c04bcc844e8f6e8b54e78d