[dannote]

PhoenixVapor's hybrid replay checked against PhoenixReplay 0.6.2 for the first time with both installed, by recording real sessions of the demo in Chromium and replaying them in PhoenixReplay's player. That found four PhoenixVapor bugs, fixed here, then a first-paint comparison with Vue's server renderer found two more. Ends with the 0.6.1 release commit.

Includes #22's commit (phoenix_test_playwright 0.18, Playwright 1.63), which PhoenixReplay 0.6.x needs through playwright_ex ~> 0.14; merging this supersedes #22.

Replay fixes

• Every step of a replay showed the session's first moment. The player renders each moment with __changed__: nil and diffs it with change tracking. The renderer then called Map.keys(nil), the frame crashed and restarted at the start. __changed__: nil now renders every slot, as in LiveView.
• Recorded state named nowhere in Elixir code failed to replay on a server that didn't compile the component. useClipboard's copied is an example: its atom was made only while compiling. The render spec now carries every declared name's atom as a literal of the module. Tested in a fresh VM that never compiled the component.
• A server action reached the recording before the state it was sent from. A name typed just before Save was recorded after the save. The bridge now flushes pending reports first.
• Reports could catch a word halfway typed. They went out once per flush interval, and disagreed with PhoenixReplay's own record of the same input. They now wait for the replayer's debounce, as it records form controls, with flush as a ceiling. Re-recorded: both report the same value at the same moment.
• Removed: translate_changed, the replay-only translation of __changed__, since PhoenixReplay renders replays in full.

First paint, compared with @vue/server-renderer

• Reserved attributes: a static ref or key rendered as an attribute. vize 0.17.2 leaves both out.
• <select v-model> showed no option selected. With vize 0.17.2's option slot, the option whose value, bound :value or text matches is now selected, or each one among them for multiple.
• Still different: is="vue:name" isn't resolved to a component; that's upstream, is="vue:name" on a native element isn't resolved to a component ubugeeei-prod/vize#8328.

Demo

• Setup: PhoenixReplay 0.6.2 as its README describes, with the recorder on :demo, /dev/replay in dev, PhoenixReplay.Plug, and replayRecorder in app.ts.
• Test: a browser test records a session on /contacts and checks that the player's replay shows the typed search.
• README: a section on what a replay shows and what it doesn't.

Also

• A hybrid LiveView's client module is written again when it's missing. Compiling writes it, so a build restored from CI's cache beside a fresh checkout never wrote it, and building the demo's assets failed; this PR's own CI run found it. The LiveView defines __mix_recompile__?/0, true while the file is missing, and the demo's assets.build compiles first, as Phoenix's does.
• The demo's test recordings go to tmp/replay_recordings, by a relative path.
• CI: installs npm packages from the lock with --frozen. Plain mix npm.install re-resolves everything (mix npm.install re-resolves and rewrites npm.lock even when package.json is unchanged npm_ex#6), and moved Playwright to 1.64 mid-check.
• Docs: the Hybrid guide's Session replay section, ARCHITECTURE and the CHANGELOG are updated for PhoenixReplay 0.6.
• Upstream reports: PhoenixReplay #40 (a LiveView's layout) and #41 (charlists), both fixed in 0.6.2.

Release

Requires vize ~> 0.17.2. Release PhoenixVapor 0.6.1 sets the version and dates the CHANGELOG section; tagging and publishing follow the merge.

Checks: mix lint clean; mix test --include e2e 383 passed; demo mix ci lint clean, 23 passed.