Live_react - React inside Phoenix LiveView

News Announcing
, , , ,
9

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
1 Like