[LLV] Figure out how to assign IDs to LLVs by FranekKubis · Pull Request #702 · software-mansion/popcorn

FranekKubis · 2026-07-24T18:35:37Z

Closes: #679

Summary:

LLV ID handling: Retained the default behavior. If a single instance of a LocalLiveView is present, id defaults to "llv-LLVModuleName". If multiple instances of the same LocalLiveView exist, the user must explicitly provide a unique id for each instance.
Mirror identification: The server uses mirror_id to uniquely identify mirrors connected to a specific LLV instance. The mirror_id is a combination of socket.id and the component's id.

mat-hek

I only looked at component.ex for now

mat-hek · 2026-07-30T09:42:12Z

    """
  end

+  @doc false


Suggested change

@doc false

mat-hek · 2026-07-30T09:44:10Z

-      if mirror_exists?(view),
-        do: LocalLiveView.MirrorToken.sign(assigns.endpoint, view, assigns.id)
+    comp_assigns =
+      Map.drop(assigns, [:__changed__, :view, :flash, :id, :mirror_id, :mirror_token])


Should we drop id? In the docs we say we forward it

We were dropping it before, so I assumed the id is not needed in comp_assigns.
Also we forward it as a DOM element id.

We're not dropping it on main: https://github.com/software-mansion/popcorn/blob/main/local-live-view/lib/server/component.ex#L68 Even if it's a DOM element id, it's not accessible in assigns, and we claim so here: https://github.com/software-mansion/popcorn/blob/fk/llv-id-generation/local-live-view/lib/server/component.ex#L24 . I guess we should pass it to assigns, as that's what live component does

mat-hek · 2026-07-30T09:45:14Z

+      socket =
+        assign(socket,
+          view: view,
+          id: assigns.id,
+          mirror_token: mirror_token,
+          mirror_id: mirror_id
+        )


we never assign other assigns, so @comp_assigns in render_markup are empty

mat-hek · 2026-07-30T09:45:37Z

+    render_markup(assigns)
+  end
+
+  defmodule Live do


Suggested change

defmodule Live do

defmodule Mirrored do

mat-hek · 2026-07-30T09:46:22Z

+        default_id(view_or_id)
+      end
+
+    socket_id <> dom_id


maybe separate them?

Suggested change

socket_id <> dom_id

socket_id <> "-" <> dom_id

mat-hek

Also, Claude told me that this broke burrito example. Haven't checked this, did you? BTW, it would be worth running all examples' CIs when LLV changes, as these are our main tests.

mat-hek · 2026-07-30T09:49:50Z

+    const maybeSetupMirrorChannel = (el: HTMLElement) => this.maybeSetupMirrorChannel(el);
    this.socket.hooks.LocalLiveView = {
      mounted() {
+        maybeSetupMirrorChannel(this.el);


This calls connectMirror under the hood, which sends action to popcorn, but popcorn may be not ready yet (see 2 lines below). Maybe it should be a part of mountView?

I moved it to if pop.ready scope.

I don't think it will work - if popcorn is not ready in time, it never runs. mountView is different, because we run 'startup scan' once popcorn is ready: https://github.com/software-mansion/popcorn/blob/main/local-live-view/assets/local_live_view/index.ts#L390.

So moved it to mountView function

mat-hek · 2026-07-30T09:53:22Z

+
+  def mirror_id(socket_id, view_or_id) when is_binary(socket_id) and is_binary(view_or_id) do
+    dom_id =
+      if String.starts_with?(view_or_id, "llv-") do


Does this work when someone passes a custom id to LLV? We don't require the id to start with llv-

Yes - I removed that part.

mat-hek · 2026-07-30T09:57:56Z

+
+    if mirror_exists?(view) do
+      ~H"""
+      <.live_component module={__MODULE__.Live} {assigns} />


This will break when someone tries to render mirrored LLV outside of a LiveView, as live components cannot be rendered in regular views AFAIK

I am aware of that - I planned to leave it as a known limitation.

If so, we should raise a clear error in that case. Would the limitation apply only to mirrored live views?

mat-hek · 2026-07-30T13:31:33Z

        if (pop.ready) mountView(this.el);
      },
      updated() {
+        maybeSetupMirrorChannel(this.el);


Why do we setup the channel here? Isn't it enough to setup it on mount? If so, can we remove the connect_mirror event and just put the id in pop.create?

I removed the connectMirror event and move the mirror connection functionality to mount.

So the call to maybeSetupMirrorChannel here is redundant, isn't it?

mat-hek · 2026-07-30T13:33:35Z

+      # Default ID derived from view name:
+      mirror_id = LocalLiveView.Component.mirror_id(socket, "Cart")


This no longer works, does it?

mat-hek · 2026-07-30T13:33:47Z

+      mirror_id = LocalLiveView.Component.mirror_id(socket, "Cart")
+  """
+  @spec mirror_id(%Phoenix.LiveView.Socket{id: String.t()}, String.t()) :: String.t()
+  def mirror_id(%Phoenix.LiveView.Socket{id: socket_id}, view_or_id) do


as per above

Suggested change

def mirror_id(%Phoenix.LiveView.Socket{id: socket_id}, view_or_id) do

def mirror_id(%Phoenix.LiveView.Socket{id: socket_id}, id) do

mat-hek · 2026-07-30T13:34:28Z

+      # Default ID derived from view name:
+      mirror_id = LocalLiveView.Component.mirror_id(socket, "Cart")
+  """
+  @spec mirror_id(%Phoenix.LiveView.Socket{id: String.t()}, String.t()) :: String.t()


Suggested change

@spec mirror_id(%Phoenix.LiveView.Socket{id: String.t()}, String.t()) :: String.t()

@spec mirror_id(Phoenix.LiveView.Socket.t(), String.t()) :: String.t()

mat-hek · 2026-07-30T13:42:52Z

+        if Phoenix.LiveView.connected?(socket) do
+          endpoint = socket.endpoint || LLVComponent.resolve_default_endpoint()
+          LocalLiveView.MirrorToken.sign(endpoint, view, mirror_id)
+        else
+          nil
+        end


I don't see a reason to sign the ID on each update, as it never changes. I think we can do

Suggested change

if Phoenix.LiveView.connected?(socket) do

endpoint = socket.endpoint || LLVComponent.resolve_default_endpoint()

LocalLiveView.MirrorToken.sign(endpoint, view, mirror_id)

else

nil

end

cond do

token = socket.assigns[:mirror_token] ->

token

Phoenix.LiveView.connected?(socket) ->

endpoint = socket.endpoint || LLVComponent.resolve_default_endpoint()

LocalLiveView.MirrorToken.sign(endpoint, view, mirror_id)

true ->

nil

end

Or even better generate the ID only if it's not generated yet

mat-hek

Looks good, minor tweaks left. Note that there were quite some bugs, not covered by the tests. For now I'd at least run examples' CIs when LLV code changes.

mat-hek · 2026-07-31T11:08:57Z

@@ -322,14 +318,14 @@ export class LLVEngine {
  private maybeSetupMirrorChannel(el: HTMLElement): void {


nit: this could accept llvId, popView and popMirrorToken, so that the extraction stays in mountView

mat-hek · 2026-07-31T11:09:41Z

        if (pop.ready) mountView(this.el);
      },
      updated() {
+        maybeSetupMirrorChannel(this.el);


So the call to maybeSetupMirrorChannel here is redundant, isn't it?

mat-hek · 2026-07-31T11:13:41Z

+  within a parent LiveView process.
+
+  Accepts the parent `socket` (or directly its `socket.id`), and either:
+  * a view module name / string (calculates the default DOM ID)


mat-hek · 2026-07-31T11:15:36Z

+    if (!mirrorId || (mirrorId && this.channels[mirrorId])) return;
+    if (!el.dataset.popMirrorToken) return;


nit

Suggested change

if (!mirrorId || (mirrorId && this.channels[mirrorId])) return;

if (!el.dataset.popMirrorToken) return;

if (!mirrorId || this.channels[mirrorId] || !el.dataset.popMirrorToken) return;

mat-hek · 2026-07-31T11:17:21Z

+
+    if mirror_exists?(view) do
+      ~H"""
+      <.live_component module={__MODULE__.Mirrored} {assigns} />


We still don't throw a readable error when not in LV

I am inable to catch this exception on this level because the error here will be raised by the page controller mechanism inside phoenix.
Right now it is failing like this:

1) test GET / renders the LocalLiveView mount points (LocalThermostatWeb.PageControllerTest) test/local_thermostat_web/controllers/page_controller_test.exs:4 ** (ArgumentError) cannot convert component LocalLiveView.Component.Mirrored with id "llv-ClockLive" to HTML. A component must always be returned directly as part of a LiveView template. For example, this is not allowed: <%= content_tag :div do %> <.live_component module={SomeComponent} id="myid" /> <% end %> That's because the component is inside `content_tag`. However, this works: <div> <.live_component module={SomeComponent} id="myid" /> </div> Components are also allowed inside Elixir's special forms, such as `if`, `for`, `case`, and friends. <%= for item <- items do %> <.live_component module={SomeComponent} id={item} /> <% end %> However, using other module functions such as `Enum`, will not work: <%= Enum.map(items, fn item -> %> <.live_component module={SomeComponent} id={item} /> <% end %> code: conn = get(conn, ~p"/") stacktrace: (phoenix_live_view 1.1.28) lib/phoenix_live_view/engine.ex:20: Phoenix.HTML.Safe.Phoenix.LiveView.Component.to_iodata/1 (phoenix_live_view 1.1.28) lib/phoenix_live_view/engine.ex:146: Phoenix.HTML.Safe.Phoenix.LiveView.Rendered.recur_iodata/3 (phoenix 1.8.5) lib/phoenix/controller.ex:1015: anonymous fn/5 in Phoenix.Controller.template_render_to_iodata/4 (telemetry 1.4.1) /Users/franek/Desktop/Repositories/popcorn/examples/local-lv-thermostat/deps/telemetry/src/telemetry.erl:359: :telemetry.span/3 (phoenix 1.8.5) lib/phoenix/controller.ex:981: Phoenix.Controller.render_and_send/4 (local_thermostat 0.1.0) lib/local_thermostat_web/controllers/page_controller.ex:1: LocalThermostatWeb.PageController.action/2 (local_thermostat 0.1.0) lib/local_thermostat_web/controllers/page_controller.ex:1: LocalThermostatWeb.PageController.phoenix_controller_pipeline/2 (phoenix 1.8.5) lib/phoenix/router.ex:416: Phoenix.Router.__call__/5 (local_thermostat 0.1.0) lib/local_thermostat_web/endpoint.ex:1: LocalThermostatWeb.Endpoint.plug_builder_call/2 (local_thermostat 0.1.0) lib/local_thermostat_web/endpoint.ex:1: LocalThermostatWeb.Endpoint.call/2 (phoenix 1.8.5) lib/phoenix/test/conn_test.ex:225: Phoenix.ConnTest.dispatch/5 test/local_thermostat_web/controllers/page_controller_test.exs:5: (test)

mat-hek · 2026-07-31T11:19:54Z

+      case connected?(socket) do
+        true ->
+          mirror_id =
+            LocalLiveView.Component.mirror_id(llv_rendering_socket_id, "llv-BurritoLive")
+
+          Phoenix.PubSub.subscribe(Burrito.PubSub, "llv_mirror:BurritoLive:#{mirror_id}")
+          LocalLiveView.Channel.get_mirror_assigns(mirror_id)
+
+        false ->
+          %{}
+      end


why not if? :P

it can be if

mat-hek · 2026-07-31T11:23:48Z

+    const Socket = this.socketClass();
+    const csrfToken = document.querySelector("meta[name='csrf-token']")?.getAttribute("content");
+
+    const llvSocket = new Socket("/llv_socket", {
+      params: { _csrf_token: csrfToken },
+    });
+    llvSocket.connect();
+    this.llvMirrorSocket = llvSocket;


We now always start the socket, no matter if there are mirrors or not. I think we can lazily start it in maybeSetupMirrorChannel

mat-hek

🎉

mat-hek · 2026-07-31T13:59:51Z

+    if (typeof mirrorId === "string") {
+      this.channels[mirrorId] = channel;
+    }


seems always true

Suggested change

if (typeof mirrorId === "string") {

this.channels[mirrorId] = channel;

}

this.channels[mirrorId] = channel;

FranekKubis marked this pull request as ready for review July 29, 2026 08:52

FranekKubis requested a review from mat-hek July 29, 2026 09:38

FranekKubis force-pushed the fk/llv-id-generation branch from b16730d to 0d8ea0d Compare July 29, 2026 11:15

Identify mirrors by mirror_id instead of llv_id.

13e41db

FranekKubis force-pushed the fk/llv-id-generation branch from 0d8ea0d to 13e41db Compare July 29, 2026 11:25

Rebuild assets.

ea13a37

mat-hek requested changes Jul 29, 2026

View reviewed changes

FranekKubis added 3 commits July 30, 2026 09:44

Minor fixes. Endpoint removed from args.

fb7df8b

Making parts of the component code common.

fd2527e

Removed unnecessary function.

f39b7e1

FranekKubis requested a review from mat-hek July 30, 2026 08:05

mat-hek requested changes Jul 30, 2026

View reviewed changes

FranekKubis added 5 commits July 30, 2026 12:32

Review changes.

3f11445

Component assigns fixed.

4898f0f

Examples fixes.

8784842

Moved setupMirror to mountView

24bae49

reverted registerHooks change

63b6c15

FranekKubis requested a review from mat-hek July 30, 2026 12:52

mat-hek requested changes Jul 30, 2026

View reviewed changes

FranekKubis added 5 commits July 31, 2026 10:48

Moved connect mirror functionality to mount function in ts.

066f474

review changes

da6d317

format and clean

4a43433

format and clean

ed215a6

clean

2c4b322

FranekKubis requested a review from mat-hek July 31, 2026 10:19

mat-hek reviewed Jul 31, 2026

View reviewed changes

Review changes

64a1255

FranekKubis requested a review from mat-hek July 31, 2026 13:25

format

0027c56

mat-hek approved these changes Jul 31, 2026

View reviewed changes

removed redundant condition

5ba01f1

FranekKubis merged commit 92c1c33 into main Jul 31, 2026
8 checks passed

FranekKubis deleted the fk/llv-id-generation branch July 31, 2026 14:27

		# Default ID derived from view name:
		mirror_id = LocalLiveView.Component.mirror_id(socket, "Cart")

	def mirror_id(%Phoenix.LiveView.Socket{id: socket_id}, view_or_id) do
	def mirror_id(%Phoenix.LiveView.Socket{id: socket_id}, id) do

	@spec mirror_id(%Phoenix.LiveView.Socket{id: String.t()}, String.t()) :: String.t()
	@spec mirror_id(Phoenix.LiveView.Socket.t(), String.t()) :: String.t()

		@@ -322,14 +318,14 @@ export class LLVEngine {
		private maybeSetupMirrorChannel(el: HTMLElement): void {

		if (!mirrorId \|\| (mirrorId && this.channels[mirrorId])) return;
		if (!el.dataset.popMirrorToken) return;

	if (!mirrorId \|\| (mirrorId && this.channels[mirrorId])) return;
	if (!el.dataset.popMirrorToken) return;
	if (!mirrorId \|\| this.channels[mirrorId] \|\| !el.dataset.popMirrorToken) return;

Uh oh!

Conversation

FranekKubis commented Jul 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mat-hek left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mat-hek left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mat-hek Jul 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mat-hek Jul 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mat-hek Jul 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mat-hek left a comment

Choose a reason for hiding this comment

Uh oh!

FranekKubis commented Jul 24, 2026 •

edited

Loading

mat-hek Jul 30, 2026 •

edited

Loading

mat-hek Jul 30, 2026 •

edited

Loading

mat-hek Jul 30, 2026 •

edited

Loading