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
