Props diff and streams - #54
Merged
Merged
Conversation
Ports live_vue's incremental props-diffing and Phoenix.LiveView stream
support into live_react. Structs now flow through a new LiveReact.Encoder
protocol (replacing raw Jason.Encoder) so they can be safely diffed;
Jsonpatch computes minimal prop diffs and a hand-rolled algorithm reads
Phoenix.LiveView.LiveStream inserts/deletes directly, delivering both as
compact patch operations over data-props-diff/data-streams-diff instead of
re-sending full props on every update. The client applies patches
copy-on-write so React.memo'd components correctly skip re-rendering
untouched data and re-render changed data.
- LiveReact.Patch: compact wire-format codec shared by both diff channels
- LiveReact.Encoder: struct -> map protocol (AsyncResult, UploadConfig,
UploadEntry, Phoenix.HTML.Form)
- react/1: LiveStream classification, props_diff via Jsonpatch.diff/3,
streams_diff computed from stream inserts/deletes/resets, diff={false}
per-component opt-out, enable_props_diff config (default true)
- Client: compactPatch.js/jsonPatch.js (copy-on-write patch application),
hooks.js persistent props/streams state across mounted/updated/
reconnected/destroyed
- New Vitest+jsdom test infrastructure for the client library
- Example stream-demo LiveView + React component (add/update/delete) for
manual verification
BREAKING CHANGE: data-props is now encoded via LiveReact.Encoder instead
of Jason.Encoder. Struct props must now `@derive LiveReact.Encoder` (or
implement it explicitly); plain maps are unaffected.
1 task
Split LiveReact.react/1 into render_flags/1, prepare_assigns/2, put_ssr_render/2 and mark_computed_changed/3 to bring its cyclomatic complexity under the limit. In the encoder, flatten the nested cases by extracting data_field_value/2, data_field_values/2, put_relation_errors/4 and nilify_empty_errors/1. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
- Pin `bytes` in the bitstring size of LiveReact.Patch.take_js_string/4, it is defined outside of the match. - Drop the unused `require Logger` from LiveReact and LiveReact.SSR. - Remove the deprecated default argument from the LiveReact.Encoder protocol; it also made the protocol define an implemented encode/1. Call sites now pass the options explicitly. Note: LiveReact.Encoder.encode/1 is gone, use encode/2 instead. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
The demo now exercises every stream operation LiveReact patches: - `add` appends a message typed in the React composer - `edit` opens an inline form and patches the message in place with `stream_insert(..., update_only: true)` - `delete` removes it - `replace_all` starts a new conversation with `stream(..., reset: true)` Messages are picked from a list of chatter instead of "Message N". Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
The layout called `<.demo {LiveReactExamples.demo(@demo)}>`. A spread
makes the attributes opaque to LiveView, so the whole `demo/1` subtree
was re-rendered with every assign marked as changed each time
`@inner_content` changed, which is every event.
That re-sent all of both GithubCode elements' attributes on every push,
and since `LiveReact.react/1` derives its id from a per-process counter
when none is given, their ids kept changing. A new id on a
`phx-update="ignore"` element makes LiveView recreate it, so the hook
remounted and both files were fetched from Github again.
`demo/1` now takes the demo name and derives everything from it, so
change tracking skips the subtree when only the slot changes, and both
components get an explicit id. `LiveReactExamples.demo/1` fills in the
defaults that the component attributes used to provide.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.