Live_react - React inside Phoenix LiveView

Great work! I do wonder if there is some kind of shared abstraction these libraries could build on - if there was something like live_vite or live_frontend, or something like that, then have adaptors for each FE framework.

The LOC of each library is quite short but specific to Vite, Svelte, React.

Have a look at the hooks.js of each
https://github.com/Valian/live_vue/blob/main/assets/js/live_vue/hooks.js
https://github.com/woutdp/live_svelte/blob/master/assets/js/live_svelte/hooks.js
https://github.com/mrdotb/live_react/blob/main/assets/js/live_react/hooks.js

Great work! Thank you for live_react!

I’m not sure if it’s what @johnknott had in mind but have you looked at Komodo?

live_react has been picking up interest, as seen in projects like PhoenixAnalytics. Inspired by the Server-Side Rendering (SSR) features in live_svelte and live_vue, I’ve implemented it for live_react.

I released a 0.2.0-beta and will release 0.2.0 when I’m confident the SSR feature is production ready.

ssr demo

I released the stable v1.0.0
I have been using live_react in production for different project.

Breaking Changes:

• vitejs: switch from Mix Esbuild to Vite.js

Features:

• add tests based on the one from live_vue
• add SSR support
• support inner_block slot
• context provider for live_react
• add typescript support

Hello, I am new to the Elixir community, i think you have a great project. I went through the live example in the github project,i was hoping to find JSX related syntax in the example but i did not. i don’t know if its in there somewhere. which kept me wondering how does live_react workings like react itself. I will appreciate clarification. Also i want to suggest that it will be nice to have the configuration scaffold with a command to get everything setup instead on following the installation guide with a lot of configs. it makes its quiet easy to setup for use. thank you.

Hi! Welcome to the Elixir community, and thanks for your interest!

LiveReact isn’t a full React framework like inertia-phoenix —it lets you render React components inside LiveView / DeadView, not replace it. You can check out the demo to see it in action.

For internals, the source code is short and worth reading.

Regarding scaffolding

There’s already a Mix task to help with setup—see the [installation guide]

I released v2.0.0.

Almost everything in this release is a port of work that already existed in
live_vue - props diffing, stream support and
the encoder protocol. Claude did the bulk of the porting.
Big thanks to @Valian

Breaking Changes:

• data-props is now encoded through the new LiveReact.Encoder protocol instead of
  Jason.Encoder. Structs passed as props need @derive LiveReact.Encoder (or an
  explicit implementation); plain maps are unaffected. See
  Upgrading to 2.0.

Features:

• Props are diffed and sent incrementally over data-props-diff instead of the full
  props being re-sent on every update. On by default
  (config :live_react, enable_props_diff: true), opt out globally with false or per
  component with diff={false}.
• Phoenix.LiveView.stream/4 assigns are supported: a stream passed as a prop is diffed
  and delivered over data-streams-diff, arriving on the client as an array whose items
  carry their __dom_id.
• LiveReact.Encoder ships implementations for the structs you are most likely to pass
  as props: Phoenix.HTML.Form (including Ecto changeset values and errors),
  Phoenix.LiveView.AsyncResult, Phoenix.LiveView.UploadConfig,
  Phoenix.LiveView.UploadEntry, and Date, Time, NaiveDateTime and DateTime.

New guide: Props Diffing and Streams.

New examples site:

The demo app moved out of the library into its own repository and now lives at
https://live-react.mrdotb.com. Every example has Preview / LiveView / React tabs,
so you can read the server side and the client side of the same page side by side.

The 2.0 features have examples of their own:

• props-diffing — only the changed
  prop path travels over the wire, unless a component opts out
• streams — insert, replace, edit, delete
• encoder — what @derive LiveReact.Encoder
  sends to the client, and what it keeps on the server
• async — assign_async’s AsyncResult
  reaching React as loading, ok and failed