fix(microprints): fix source viewer showing stale content when switching files
The source_viewer component used static DOM IDs (id='source-viewer') with phx-update='ignore'. When switching expanded files, LiveView reused the same DOM element but phx-update='ignore' prevented content from being updated, showing the previous file's source. - Override source_viewer/1 in MicroprintsLive with unique per-file IDs generated via :erlang.phash2(file_path) - Add test verifying expand-switch shows correct source content - Add test for highlight/expand coupling (collapse when highlighting a different file) - All 160 tests pass
This commit is contained in:
@@ -76,12 +76,11 @@ defmodule FirehoseWeb.MicroprintsLive do
|
||||
highlighted_line={@highlighted_line}
|
||||
/>
|
||||
|
||||
<%= if @expanded_path == path and source do %>
|
||||
<.source_viewer
|
||||
<%= if @expanded_path == path and source do %> <.source_viewer
|
||||
content={source}
|
||||
highlighted_line={@highlighted_line}
|
||||
language="elixir"
|
||||
id={"source-viewer-" <> path}
|
||||
file_path={path}
|
||||
/>
|
||||
<% end %>
|
||||
<% else %>
|
||||
@@ -241,5 +240,23 @@ defmodule FirehoseWeb.MicroprintsLive do
|
||||
# Delegate to MicroprintComponent
|
||||
defdelegate microprint(assigns), to: MicroprintComponent
|
||||
defdelegate microprint_legend(assigns), to: MicroprintComponent
|
||||
defdelegate source_viewer(assigns), to: MicroprintComponent
|
||||
|
||||
# Custom source_viewer with unique DOM IDs per file to prevent LiveView
|
||||
# DOM patching bugs when switching expanded files.
|
||||
def source_viewer(assigns) do
|
||||
assigns = assign(assigns, :viewer_id, "source-viewer-" <> Integer.to_string(:erlang.phash2(assigns.file_path, 1_000_000)))
|
||||
|
||||
~H"""
|
||||
<div
|
||||
id={@viewer_id}
|
||||
class="source-viewer mt-2 max-h-96 overflow-auto rounded font-mono text-xs"
|
||||
phx-hook="SourceViewer"
|
||||
data-highlighted-line={@highlighted_line}
|
||||
data-language={@language}
|
||||
style="background: var(--sv-bg); color: var(--sv-text);"
|
||||
>
|
||||
<pre id={@viewer_id <> "-pre"} phx-update="ignore" class="m-0 p-2"><code class={"language-#{@language || "plaintext"}"}><%= @content %></code></pre>
|
||||
</div>
|
||||
"""
|
||||
end
|
||||
end
|
||||
|
||||
@@ -93,11 +93,43 @@ defmodule FirehoseWeb.MicroprintsLiveTest do
|
||||
|> element("svg rect[phx-value-line=\"1\"][phx-value-path=\"#{file_b}\"]")
|
||||
|> render_click()
|
||||
|
||||
# BUG: file A should be collapsed when highlighting a different file
|
||||
# Currently file A stays expanded while the highlight is on file B
|
||||
# file A should be collapsed when highlighting a different file
|
||||
html = render(view)
|
||||
refute html =~ "Collapse",
|
||||
"file A should be collapsed after highlighting a different file, but the Collapse button is still visible (expanded_path is uncoupled from highlighted_path)"
|
||||
end
|
||||
|
||||
test "switching expand from file A to file B shows file B's source content, not file A's", %{conn: conn} do
|
||||
files = MicroprintsLive.scan_source_files()
|
||||
assert length(files) >= 2, "Need at least 2 files to test source switching"
|
||||
|
||||
[file_a, file_b | _] = files
|
||||
|
||||
{:ok, view, _html} = live(conn, ~p"/microprints")
|
||||
|
||||
# Expand file A
|
||||
view
|
||||
|> element("button[phx-value-path=\"#{file_a}\"]", "Expand")
|
||||
|> render_click()
|
||||
|
||||
# Verify file A's source is shown (check for module def from microprints_live.ex)
|
||||
html = render(view)
|
||||
assert html =~ "FirehoseWeb.MicroprintsLive",
|
||||
"When file A is expanded, its source should be visible"
|
||||
|
||||
# Expand file B (should auto-collapse A)
|
||||
view
|
||||
|> element("button[phx-value-path=\"#{file_b}\"]", "Expand")
|
||||
|> render_click()
|
||||
|
||||
# Verify file B's source is shown, NOT file A's
|
||||
html = render(view)
|
||||
assert html =~ "Firehose.Application",
|
||||
"When file B is expanded, its source should be visible (not file A's source)"
|
||||
|
||||
# File A's button should now say "Expand" (collapsed)
|
||||
refute html =~ ~s(phx-value-path="#{file_a}".*Collapse),
|
||||
"file A should be collapsed after switching expand to file B"
|
||||
end
|
||||
end
|
||||
end
|
||||
|
||||
Reference in New Issue
Block a user