Any machine can be imported into xstate. Which allows access to their visualisation, React hooks, and other tooling.

• https://statecharts.github.io/glossary/parallel-state.html

Could support by returning an array of sub states rather than the initial state.

Before:

import { start } from "yieldmachine";

function TrafficLights() {
  function* Red() {
    yield on("timer", Green);
  }
  function* Green() {
    yield on("timer", Yellow);
  }
  function* Yellow() {
    yield on("timer", Red);
  }

  return Red;
}

const m = start(TrafficLights);
m.current; // { state: "Red", count: 0 }
m.next("timer");
m.current; // { state: "Green", count: 1 }
m.next("timer");
m.current; // { state: "Yellow", count: 2 }

After compiles to:

function* startTrafficLights() {
  let count = 0;
  let state = "Red";

  return {
    get current() {
      return Object.freeze({ count, state });
    }
    next(event) {
      if (event === "timer") {
        count++;
        if (state === "Red") {
          state = "Green";
        } else if (state === "Green") {
          state = "Yellow";
        } else if (state === "Yellow") {
          state = "Red";
        }
      }
      return { value: this.current, done: false };
    },
  };
}

const m = startTrafficLights();
m.current; // { state: "Red", count: 0 }
m.next("timer");
m.current; // { state: "Green", count: 1 }
m.next("timer");
m.current; // { state: "Yellow", count: 2 }

https://dev.to/mpocock1/xstate-should-this-be-an-action-or-a-service-2cp0

function reducer(previousState: State, event: React.FormEvent<HTMLFormElement> | React.MouseEvent<HTMLButtonElement>): State {
  return previousState.machine.next(event);
}

eventsReducer(machine)

It wouldn’t support side effects and listening/emitting to events (e.g. with listenTo()).

import { eventsReducer } from 'yieldmachine';

function useMachine(machine) {
  const [state, dispatch] = useReducer(eventsReducer(machine));
  return [state, dispatch];
}

• https://xstate.js.org/docs/guides/hierarchical.html

Declare state machines using components.

YieldMachine is an opinionated library for creating state machines and actors. JavaScript Generator functions allow rich behaviour to be declared and composed together. And its modular design lets plugins add new behaviour.

• Parse mini modules format
• Produce Wasm binary
• Benefit: Able to be run anywhere: browsers, cloud, locally
• Benefit: Sandboxed

Visualizer

• https://stately.ai/viz

Cloud rendered

• Collected Press but for JavaScript modules.
• Takes a .js file with a Generator Component from a Gist or GitHub repo, and allows running it online.
• Allows passing the current state.

• /viz/1/github/gist/RoyalIcing/e7d97cdf38a2907924ea12e4ebdf3c85 — See a visualizer for this Gist.
• /execute/1/github/gist/RoyalIcing/e7d97cdf38a2907924ea12e4ebdf3c85 — Run the machine in this Gist.
• /execute/1/github/gist/RoyalIcing/e7d97cdf38a2907924ea12e4ebdf3c85?current=loaded — Run the machine in this Gist from the loaded state.
• /execute/1/github/gist/RoyalIcing/e7d97cdf38a2907924ea12e4ebdf3c85?current=loaded&events[]=click&events[]=click — Run the machine in this Gist from the loaded state and receive two click events.

jsDelivr has a beta service to bundle a ESM JS file from GitHub: jsdelivr/jsdelivr#18263

• e.g. Analytics
• Show how to avoid duplication

• https://www.html5rocks.com/tutorials/eventsource/basics/

const machine = start(Machine);
const eventSource = new EventSource();

machine.receiveFrom(eventSource);

const messagesKey = Symbol("messages");

function* Machine() {
  yield listenTo(eventSource, "open");
  yield on(new Map([["type", "error"], ["readyState", EventSource.CLOSED]]), Closed);

  function* Open() {
    yield listenTo(eventSource, "message");
    yield accumulate("message", messagesKey);
  }
  function* Closed() {}
  
  return function* Initial() {
    yield listenTo(eventSource, "open");
    yield on("open", Open);
  }
}

Can be plugged into any machine.

Would support an assign event.

• https://egghead.io/lessons/express-course-overview-web-security-essentials

Add machines that demonstrate common attacks, and what they exploit.

Then show machines that protect against these attacks.

Also provide Playwright scripts that demonstrate the attacks.

https://twitter.com/_jonesian/status/1440101111684165632

my biggest challenge is with data dependencies inside of context. like do i assume the data is there in the initial context or do i have an idle state in each of my machines with an initialize method to report the data.
it’s challenging with typescript when everything can possibly be undefined. then using those machines in react becomes challenging because you can’t pass undefined to a hook. so maybe i’m answering my question here haha

See: https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/formdata_event

const formElem = document.querySelector('form');

// submit handler

formElem.addEventListener('submit', (e) => {
  // on form submission, prevent default
  e.preventDefault();

  console.log(form.querySelector('input[name="field1"]')); // FOO
  console.log(form.querySelector('input[name="field2"]')); // BAR

  // construct a FormData object, which fires the formdata event
  const formData = new FormData(formElem);
  // formdata gets modified by the formdata event
  console.log(formData.get('field1')); // foo
  console.log(formData.get('field2')); // bar
});

// formdata handler to retrieve data

formElem.addEventListener('formdata', (e) => {
  console.log('formdata fired');

  // modifies the form data
  const formData = e.formData; 
  // formdata gets modified by the formdata event
  formData.set('field1', formData.get('field1').toLowerCase());
  formData.set('field2', formData.get('field2').toLowerCase());
});

See: statelyai/xstate#2178 (comment)

https://eugenkiss.github.io/7guis/tasks/

https://blog.axlight.com/posts/learning-react-state-manager-jotai-with-7guis-tasks/

• https://twitter.com/chrisshank23/status/1442029809408745476

https://github.com/statelyai/xstate/releases/tag/%40xstate%2Freact%401.5.0

• Show the states that a widget can be in.
• Support dynamic numbers of states e.g. multiple tabs
• Model focus states. e.g. menu button should focus after closing.
• Make available as a test suite package with Testing Library.

Instead of context we have WebAssembly.Memory

Instead of props we have imports.

Instead of "current state" we have exports.

Perhaps multiple wasm instances (or other state machines) can be synced by replicating input events.

https://twitter.com/kettlecorn/status/1614141123231891458

https://twitter.com/chriscoyier/status/1438260193175932939

"Lucy compiles to XState"

https://github.com/andyjakubowski/statechart-watch

• https://webreflection.medium.com/dom-handleevent-a-cross-platform-standard-since-year-2000-5bf17287fd38

• Immer: https://github.com/immerjs/immer
• Shoalmate: https://github.com/RoyalIcing/shoalmate
• Vanilla JavaScript object/array copies Redux-style

Can derive from one to the other. e.g. Have generator functions internally that become Arrays publicly.

https://thatjdanisso.cool/functions-that-go-backwards

• https://github.com/react-hookz/web
• https://react-hookz.github.io/web/?path=/docs/navigator-usenetwork--example & https://developer.mozilla.org/en-US/docs/Web/API/Navigator/onLine
• https://react-hookz.github.io/web/?path=/docs/sensor-useintersectionobserver--example
• https://react-hookz.github.io/web/?path=/docs/navigator-usepermission--example
• https://react-hookz.github.io/web/?path=/docs/dom-useeventlistener--example
• https://react-hookz.github.io/web/?path=/docs/dom-usekeyboardevent--example
• https://react-hookz.github.io/web/?path=/docs/sensor-usemeasure--example

  function* loading() {
    yield entry(fetchData);
  }

Currently:

const machine = …
machine.next("FETCH");
machine.values.then(values => values[0]);

Future:

const machine = …
machine.next("FETCH");
machine.values.then(values => values.fetchData);

• Could be used to order events.
• Attach a logical clock to every event.
• https://en.wikipedia.org/wiki/Lamport_timestamp

• http://beam-wisdoms.clau.se/en/latest/eli5-processes.html
• https://stephenbussey.com/2021/07/02/what-is-a-genserver.html?utm_medium=email&utm_source=elixir-radar

https://github.com/aws-amplify/amplify-ui/tree/main/packages/ui/src/machines

Useful for hydration, testing, etc

https://buttondown.email/htmhell/archive/issue-21-closing-dialogs/

https://twitter.com/mpocock1/status/1440356513332162575

XState API proposal: 'input'

• Use props and compose other hooks in a totally natural way.
• No more useEffect's - prop changes get flushed to XState via events natively.

https://twitter.com/_jonesian/status/1440366408152481793

This has been my biggest contention with xstate. how to get initialization data into the machine when Im getting it from somewhere else