Optimizing XState for production environments

[christoph-fricke]

I searched around the issues and discussions and could not find an answer to few questions I have around devTools: true and production environments.

I already wrapped the new inspect method conditionally so the inspector does not pop-up and isn't even bundled in a production build:

import { inspect } from "@xstate/inspect";

if (process.env.NODE_ENV !== "production") {
  inspect({ iframe: false });
}

With the new inspector I don't see many reasons why one would not want to set devTools: true for interpreted machines.
So I was wondering if devTools: true has performance implications which would suggest to turn them off in production? Something like devTools: process.env.NODE_ENV !== "production".

One further idea I have around this topic I would love to hear your opinion about:

I think it would be useful to have a global configuration ability to configure devTools and a logger for all interpreted services. The global config can be partially overwritten by local configurations.

[davidkpiano]

So I was wondering if devTools: true has performance implications which would suggest to turn them off in production?

It probably has a minimal impact; what it does is notify listeners that services have been registered on a global window.__xstate__ object, if it exists. If it doesn't exist, it does nothing. Still, it's better to set it to false in production, especially for security purposes.

I think it would be useful to have a global configuration ability to configure devTools and a logger for all interpreted services. The global config can be partially overwritten by local configurations.

I thought this at first too, but what if you're using 3rd-party components that are using XState? Enabling this globally (and having to opt-out) is not a good idea for this reason, and it's less explicit. The only benefit this would give is a very slightly improved developer experience, and for that, you can easily have a wrapper like this in userland:

const interpretDev = machine => interpret(machine, { devTools: true })
  .start();

// Replace:
// const service = interpret(machine);
// With:
const service = interpretDev(machine);