Hi there!

I’ve created a small library, Komodo, that allows easy use of JS framework components from Phoenix LiveView.

Each framework just needs a small piece of easy-to-write Javascript adapter code to work with it (this is already provided for React, Svelte, Vue and Web Components).

Rationale

There are a few libraries already out there for rendering JS components (for React, Svelte, etc.) from LiveView, however I personally wanted a few things which they all seemed to be missing:

• A standard interface for interacting with different frameworks
• To be truly reusable, JS components should have no knowledge of LiveView (many other libraries require them to know about pushEvent) - with this separation it’s now easy to drop in third-party reusable components without needing to wrap them in a LiveView-aware wrapper
• separation between a) compiling the component into JS and b) actually using the component (other libraries do both things for you) - you may not even want to compile, say, Svelte components if you’re only pulling in third-party ones
• easily use components from different frameworks in the same app

This is a fairly simple first pass, but to be honest I’m not sure if anything more complicated is needed.
For example, currently all props are sent down the wire when a prop is changed, but to send only the prop that changed down the wire we’d need to keep more state in memory in the LiveView process, which may be a worse trade-off if there are many users. Something to think about for the future anyway.

Please let me know if you have any feedback!
Links below - thanks!

Mark