Refactoring out some boilerplate? The vertically sliced MVC-widget.

[redbar0n]

I have the impression a fair amount of people like me want a good mental & architectural model for client side state management. But I also have the impression that thought leaders are holding off on recommending XState as the default go-to-option, due to the boilerplate it introduces. I think there's an opportunity to solve both problems, to increase the adoption of XState. So:

What if we could have vertically sliced MVC-widgets, that looked something like this?

Using React and XState.

//  A vertically sliced "MVC-widget"

//  VIEW:

export default function Users() {
  const [state, send] = useMachine(usersMachine);
  return (
    <div className="users">
      <button type="button" onClick={() => send("FETCH")}>
        Fetch users
      </button>
      {
        {
          success: state.context.data?.map((user) => (
            <div key={user.id}>{user.name}</div>
          )),
        }[state.value]
      }
    </div>
  );
}

// MODEL-CONTROLLER:

const usersMachine = Machine({
  id: "users",
  on: { FETCH: "loading" },
  states: {
    loading: fetchSome("users")
  }
});

I've played around with an XState example sandbox, and seen what opportunities presented itself for refactoring out some XState code, so it would look almost exactly like the above, and still work.

Would be curious to hear what you think of the general idea, and if it is possible to achieve in XState:

Here is the fairly well documented gist:

https://gist.github.com/redbar0n/545e94cc4e0ca1dfc922459251fd7c5a

Let me know if I should include more of the gist here, for discussion. The most important part for discussion here would be around XState refactoring/boilerplate-removal opportunities, which are located in boilerplate.js a bit further down on the page.