[POC] @xstate/component

[ChrisShank]

Hi everyone! I have been exploring a proof of concept that I hope can eventually become @xstate/component. I'm exploring what it would look like to use xstate as the core reactivity/state management system of a component rather than integrating xstate into other component libraries. Its sort of unmaintainable to continue creating separate packages that integrates xstate into component libraries (e.g. @xstate/react @xstate/vue) and also does not help out smaller libraries either. Its also interesting to think about how making xstate the primitive state management system would change how we think about creating components.

So what if @xstate/component would let someone define framework-agnostic components using xstate so they could just import that component into their application? Under the hood, we would use Web Components to stay framework agnostic. Now even if xstate is the reactivity system and Web components provide allow us to hook into the component's lifecycle we still need a way to declaratively render our component. I think that tagged template literal libraries such as lit-html, uhtml, ect. could solution because they have the flexibility of JSX with the static analysis possible with template. We can even design this package to be agnostic to the the rendering library similar to how htm lets you bind your own render function.

I'm looking for any feedback/discussion to further develop this idea and see if it is something that developers would want to use!

Some other thoughts:

• An important trend in component frameworks has become logic composition. I think that it would be quite interesting to explore how xstate can be used to accomplish this.
• Exploring how to integrate the visualizer right into this package.
• You should be able to choose between using xstate and @xstate/fsm (for a smaller bundle).
• How do we integrate props and the machine's stateas they both seem to be separate sources of truth. Does it makes sense to keep them separate or should props be part of the machines context for example?
• How would lifecycle hooks be incorporated into the machine? For example, if a component unmounts what should we do?

[iliasbhal]

cool idea 😎
how is that different than creating a xstate/stenciljs package?
stencil is already well documented, has some adoption, and does exactly that ( aka framework-agnostic components ).