drmikecrowe

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions

drmikecrowe

Base code/idea comes from this blog post

The output:

Testing vanilla:      4.1ms
Testing lodash:      25.4ms -- 518% slower
Testing es6-for-of:   7.3ms --  78% slower
Testing forEach:      6.1ms --  48% slower
Testing map: 9.2ms -- 125% slower

drmikecrowe

For anyone else coming across this and wondering how this works, here's a summary.

NOTE: I'm still learning xstate, so there may be better ways to do this!

Step #1, install debug

debug is a small debugging library that can be used in the console or browser. In the screenshot above, each of the different colors comes from a different debug instance. For example, I instatiate the following in my console application:

const dbgM: debug.Debugger = require('debug')("fsm:master");

drmikecrowe

const targets = ["#top-header", "#main-header"];

const config = {
  attributes: true,
  attributeOldValue: true,
  subtree: true,
  childList: true,
};

function logAllEvents(target, myElement) {

drmikecrowe

#!/home/mcrowe/Programming/Personal/imdb/.direnv/python-3.7.5/bin/python3

import sys
import imdb
import click

from os import listdir, system, rename
from os.path import isfile, join, getctime, basename

from lxml.builder import E

drmikecrowe

// Available variables:
// - Machine
// - interpret
// - assign
// - send
// - sendParent
// - spawn
// - raise
// - actions

drmikecrowe

const RETRY_INTERVAL = 2000;
const MAX_RETRIES = 3;

const initHardwareState = "initHardware";
const connectNetworkState = "connectNetwork";
const provisionState = "provision";
const retryState = "retry";
const fatalState = "fatal";
const connectedState = "connected";

drmikecrowe

const RETRY_INTERVAL = 2000;
const MAX_RETRIES = 3;

const initHardwareState = "initHardware";
const connectNetworkState = "connectNetwork";
const provisionState = "provision";
const retryState = "retry";
const fatalState = "fatal";
const connectedState = "connected";

drmikecrowe

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions

drmikecrowe

// Available variables:
// - Machine
// - interpret
// - assign
// - send
// - sendParent
// - spawn
// - raise
// - actions
// - XState (all XState exports)