f-of-xstate: run some logic on your logic
Tags: webdev, javascript, opensource, logicapps
Published: 2022-11-22 15:33:23

Introducing f-of-xstate: free the insight and knowledge you worked so hard to build.

Every day as programmers and engineers, we write logic. If this, then that. When this, do that. Etc.

But with too few exceptions, we write that logic as text in a format that's so hard to glean real semantic meaning from that we've all probably taken at least one full undergraduate course about how to extract information from program text, transform it, and write it out again in a format more conducive to execution.

The closest most of us come to real, automated inspection or modification of logic tends to be in the form of macros or evals and the general advice on both counts is, most charitably, to use them as a last resort.

**But does that really make sense?**

We spend the vast majority of our time thinking about our program logic and then codifying all of that understanding about our problem domains, esoteric edge cases, and easy-to-miss implementation gotchas into a prison of text. And should we ever want to break free those gems of insight in the future, we will almost certainly need a human to read through everything we've written.

Our logic encodes some of the most important intellectual property we produce. It is the synthesis of everything we've learned. And we lock it up in text.

**There is a better way.**

We'd like to introduce [f-of-xstate](https://github.com/simplystated/f-of-xstate), our recently-open-sourced library for querying and modifying your app logic.

First of all, we can express our logic in [statecharts](https://statecharts.dev/). If you're working in javascript, [XState](https://github.com/statelyai/xstate) is a great choice for writing and executing your app logic as a statechart. Just by moving your logic from text to datastructures, specifically statecharts, you'll already have gained clearer insight into your own understanding of your problem space.

Next, we can query the structure of our statechart to derive new meta-facts about our logic. This is where f-of-xstate comes in. We aim to make it easier to programmatically introspect your statecharts. We'll see an example below.

That's not all, we can also use f-of-xstate to easily modify our logic, layering on generic functionality or enforcing important invariants.

**Show me the code!**

Let's see an example of querying our logic. Let's imagine that we have some set of destructive actions that should always be guarded by user confirmation. In <20 lines of code, we can write a function that checks our logic to ensure that property holds. You could also imagine building something more involved like a tool to show users step-by-step instructions from wherever they are in your app to any goal state they want to reach.

{% codesandbox x5bizd %}

Let's check out one more example. This time, instead of just detecting dangerous states, we'll fix them! Given any "dangerous" machine that might delete a user's data without confirmation, we'll convert it into a "safe" machine that always prompts for confirmation.

{% codesandbox f4uk5l %}

Head over to [simplystated/f-of-xstate](https://github.com/simplystated/f-of-xstate) to see more examples (and star the repo for later).

> Once in a while, you get shown the light  
> In the strangest of places if you look at it right  
> \- [Scarlet Begonias](https://www.youtube.com/watch?v=Kj_kK1j3CV0), Grateful Dead

Follow us [@abrgrBuilds](https://www.twitter.com/abrgrBuilds) and join [our newsletter](https://www.simplystated.dev).

- Adam Berger
Founder, Simply Stated