Integrating legend state into headless component libraries

[DawidWraga]

The core observable of legend state is completely framework agnostic and provides highly performant reactivity.

This means that a headless component library built in legend state would be fast and work across all web frameworks.

If my understanding is correct, then there is a massive opporunity here.

Perhaps a good way of making this into a reality would be to integrate observables into exisiting headless ui logic.

In particular, zag.js is built on x state machines, which are fundementally framework agnostic too. However, to consume the state and make it reactive, zag uses framework specific state handlers.

Here is an example to clarify:

import * as toggle from "@zag-js/toggle" //FRAMEWORK AGNOSTIC
import { normalizeProps, useMachine } from "@zag-js/react" //FRAMEWORK SPECIFIC

function Example() {
  // if you need access to `state` or `send` from machine
  const [state, send] = useMachine(toggle.machine({ id: "2" })) 

  // convert machine details into `DOM` props
  const api = toggle.connect(state, send, normalizeProps)

  // consume into components
  return <button {...api.buttonProps}>Toggle me</button>
}

Would it be possible to integrate legend state with zag (or other) to create a super performant & super flexible headless ui library?

[jmeistrich]

Yes, I'd think it should be pretty easy to do that. There's already a legend-xstate project: https://github.com/GoldingAustin/store-xstate/