mrdotb/live_react

LiveReact is an Elixir library that enables rendering React components within Phoenix LiveView templates. It facilitates seamless integration by handling server-side rendering, client-side hydration, and efficient incremental prop diffing to minimize network payload. The system supports real-time updates via LiveView streams and provides utilities for navigation and slot management, backed by a modern Vite.js build pipeline.

The assets/copy/react-components directory now provides a set of React components for Phoenix LiveView integration. This includes a re-exported Link component from the live\_react library, a simple 'Hello world' demo component, and a comprehensive LinkExample component that demonstrates various navigation modes (external, patch, navigate, and history replace) within LiveView.

assets/copy/react-components · high confidence

LiveReact now supports Server-Side Rendering via a new Vite.js integration. This change introduces the \LiveReact.SSR.ViteJS\ module, which handles SSR by making POST requests to a Vite plugin endpoint (\/ssr\_render\). Users must configure the Vite host in their application config and add the \liveReactPlugin\ to their \vite.config.js\ to enable this rendering mode, replacing the previous Esbuild-based approach.

_lib/live\react/ssr · high confidence

A new server-side rendering entry point has been added at \assets/copy/js/server.js\. This file imports the \getRender\ function from \live\_react/server\ and the local \react-components\ collection to export a \render\ function, enabling the Node.js worker to perform server-side rendering for the application.

assets/copy/js · high confidence

The application now includes a configuration file that sets up the \git\_ops\ tool for development environments. This configuration enables automatic management of the Mix project version and updates the README.md file to reflect the current version, using a 'v' prefix for version tags.

config · high confidence

Introduces the LiveReact library, enabling developers to render React components directly within Phoenix LiveView templates. The core \LiveReact.react/1\ component supports server-side rendering (SSR) for the initial dead render, followed by client-side hydration. It features optimized prop diffing to send only changed props as JSON patches, support for LiveView streams, and the ability to pass inner block slots as children. A \Mix.Tasks.LiveReact.Setup\ task is included to copy necessary frontend assets to the Phoenix project.

lib · high confidence

This change adds the core JavaScript runtime for integrating React components with Phoenix LiveView. It introduces a compact patch encoding/decoding system to efficiently transmit state changes, enabling props diffing (via the \data-use-diff\ attribute) and real-time LiveView stream updates without full component re-renders. The integration includes a React context provider (\LiveReactProvider\) and hooks (\useLiveReact\) to expose LiveView capabilities like \pushEvent\, \handleEvent\, and \removeHandleEvent\ to React components. Additionally, it provides a \Link\ component for LiveView-aware navigation (patch/redirect) and supports Server-Side Rendering (SSR) via a dedicated Vite plugin and hydration logic.

assets/js · high confidence

This change introduces several new internal modules in lib/live\_react that enable props diffing, LiveView streams support, and server-side rendering (SSR). LiveReact.Encoder provides a protocol to safely transform Elixir structs into plain maps for JSON patch calculations, preventing accidental exposure of sensitive data. LiveReact.Patch handles the serialization and deserialization of compact patch operations into a wire format used by data-props-diff and data-streams-diff attributes. LiveReact.SSR defines a behavior for rendering React components server-side, allowing custom renderers via configuration. LiveReact.Reload adds utilities for Vite integration in development, including hot module replacement support. LiveReact.Slots handles the encoding of slot content, specifically supporting inner\_block as React children. LiveReact.Test provides helpers for testing LiveReact components, extracting component info, props, handlers, and diffs from rendered HTML.

_lib/live\react · high confidence

LiveReact v2.0.0 introduces incremental prop updates, sending only changed keys over \data-props-diff\ instead of the full payload, and adds support for \Phoenix.LiveView.stream/4\ assigns which are now automatically diffed and delivered as arrays with \\_\_dom\_id\. Struct props must now derive or implement the new \LiveReact.Encoder\ protocol (replacing \Jason.Encoder\), with built-in support for \Phoenix.HTML.Form\, \AsyncResult\, and upload-related structs. A bug fix ensures props diffing works correctly without requiring a \socket\ at the call site by deriving dead state only on initial render. The library also ships with Elixir 1.20.4 tooling, a new logo, and an MIT license.

(repo-wide) · high confidence

The asset build system has switched from Mix Esbuild to Vite.js, introducing new configuration files (vite.config.js, postcss.config.js, tsconfig.json) to manage the build process. This change enables the use of TailwindCSS v4 via the Vite plugin, integrates React 19 support, and configures TypeScript compilation with specific module resolution and path aliases. Users will now benefit from Vite's development experience and modern bundling capabilities, with assets still emitted to the standard Phoenix static directory.

assets/copy · high confidence

Added a new suite of ExUnit tests covering the library's core capabilities, including the \LiveReact.Encoder\ protocol for serializing structs and forms, the \LiveReact.Patch\ module for JSON patch serialization, and the \props\_diff\ and \streams\_diff\ logic for incremental LiveView updates. The tests verify correct handling of primitive types, nested structs, Ecto changesets, LiveStream operations (upsert, remove, limit), and the integration with Phoenix LiveView's rendering pipeline.

test · high confidence

This release updates the LiveReact library to version 2.0.0, upgrading the core React dependency from version 18 to 19.1.0 and switching the JavaScript build tooling from Mix Esbuild to Vite.js (v7.2.7). The Elixir package dependencies have been updated to require Phoenix \>= 1.7.0, Phoenix LiveView \>= 0.18.0, and Phoenix HTML \>= 3.3.1, while the Node.js dependency is now optional. The project also introduces a new \assets/copy\ directory containing a Vite-based development environment with TailwindCSS v4 and TypeScript support.

(dependencies) · high confidence

Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.

• First survey — no prior run to compare against. CAI 64.

• Code Health 66
• Architecture 69
• Maturity 66
• Readiness 60
• Security 90

• 86 commits — 73 feature/other, 13 fixes

• (root) — 36 commits
• live_react_examples/lib — 15 commits
• live_react_examples/assets — 14 commits
• lib/live_react — 4 commits
• (repo) — 3 commits
• assets/js — 3 commits
• assets/copy — 2 commits
• guides/installation.md — 2 commits
• .github/workflows — 1 commit
• guides/ssr.md — 1 commit
• lib/live_react.ex — 1 commit
• live_react_examples/.gitignore — 1 commit
• live_react_examples/Dockerfile — 1 commit
• live_react_examples/mix.exs — 1 commit
• live_react_examples/rel — 1 commit

• fix: Fixed import in readme
• fix: chore: fix demo header remove border
• fix: chore: fix installation guide
• fix: fix(ssr): remove compiler warning when using live_react without SSR
• fix: fix(vitejs): bugs in copy files
• fix: fix: Ensure app.ts entrypoints can be used with @react-refresh
• fix: fix: add missing useLiveReact type
• fix: fix: build-server script template
• fix: fix: clear Elixir 1.20 compiler warnings
• fix: fix: derive dead render state without requiring socket
• fix: fix: missing files in mix.exs to ship the js
• fix: fix: rename react folder to react-components to prevent Vite error
• fix: fix: stop re-rendering the GithubCode components on every update
• change: Add Logo
• change: Add MIT LICENSE
• change: Add doc
• change: Add docs on LiveReact
• change: Add flash with sonner example
• change: Add handy esbuild debug metafile
• change: Add lazy component example
• …and 66 more

Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.

mrdotb/live_react was measured the same way every project in this corpus was: the same rubric, at a pinned commit, with the result published in full. Point a surveyor at a repository you know and see whether you agree with it.