Force assign ID on LiveComponents to re-render during :phoenix_live_reload

lib/phoenix_live_view/channel.ex

@@ -347,6 +347,22 @@ defmodule Phoenix.LiveView.Channel do
     {mod, fun, args} = socket.private.phoenix_reloader
     apply(mod, fun, [socket.endpoint | args])
 
+    {components, _, _} = state.components
+
+    state =
+      Enum.reduce(components, state, fn component, state ->
+        {_, {mod, cid, assigns, _, _}} = component
+        assigns = %{id: assigns.id, __changed__: %{id: assigns.id}}
+
+        case Diff.update_component(state.socket, state.components, {{mod, cid}, assigns}) do
+          {diff, new_components} ->
+            push_diff(%{state | components: new_components}, diff, nil)
+
+          :noop ->
+            state
+        end
+      end)
+
     new_socket =
       Enum.reduce(socket.assigns, socket, fn {key, val}, socket ->
         Utils.force_assign(socket, key, val)

test/phoenix_live_view/integrations/live_reload_test.exs

@@ -47,6 +47,24 @@ defmodule Phoenix.LiveView.LiveReloadTest do
     assert render(lv) =~ "<div>Version 2</div>"
   end
 
+  test "LiveView renders LiveComponents again when the phoenix_live_reload message is received" do
+    %{conn: conn, socket: socket} = start(@live_reload_config)
+
+    Application.put_env(:phoenix_live_view, :vsn, 1)
+    {:ok, lv, _html} = live(conn, "/live-component-reload")
+    assert render(lv) =~ "<div>Version 1</div>"
+
+    send(
+      socket.channel_pid,
+      {:file_event, self(), {"lib/test_auth_web/live/user_live.ex", :created}}
+    )
+
+    Application.put_env(:phoenix_live_view, :vsn, 2)
+
+    assert_receive {:phoenix_live_reload, :live_view, "lib/test_auth_web/live/user_live.ex"}
+    assert render(lv) =~ "<div>Version 2</div>"
+  end
+
   def reload(endpoint, caller) do
     Phoenix.CodeReloader.reload(endpoint)
     send(caller, :reloaded)

test/support/live_views/reload_component_live.ex

@@ -0,0 +1,35 @@
+defmodule Phoenix.LiveViewTest.LiveComponent do
+  use Phoenix.LiveComponent
+
+  @impl true
+  def render(assigns) do
+    {:ok, version} = Application.fetch_env(:phoenix_live_view, :vsn)
+    assigns = assign(assigns, version: version)
+
+    ~H"""
+    <div>
+      <div>Version <%= @version %></div>
+    </div>
+    """
+  end
+end
+
+defmodule Phoenix.LiveViewTest.ReloadComponentLive do
+  use Phoenix.LiveView
+
+  def mount(_params, _session, socket) do
+    {:ok, socket}
+  end
+
+  @spec render(any()) :: Phoenix.LiveView.Rendered.t()
+  def render(assigns) do
+    ~H"""
+    <div>
+      <Phoenix.Component.live_component
+        id="live-component"
+        module={Phoenix.LiveViewTest.LiveComponent}
+      />
+    </div>
+    """
+  end
+end

test/support/router.ex

@@ -45,6 +45,7 @@ defmodule Phoenix.LiveViewTest.Router do
     live "/log-disabled", WithLogDisabled
     live "/errors", ErrorsLive
     live "/live-reload", ReloadLive
+    live "/live-component-reload", ReloadComponentLive
     live "/assign_async", AssignAsyncLive
     live "/start_async", StartAsyncLive