How to concat/compose verified routes?

Questions / Help
, ,
1

I have some components that will be used in multiple routes, these components need to generate link to other routes, but these links change depending on the liveview they were loaded.

For example, if my liveview route is “/myroute”, then the component would generate a route like “/myroute/something”.

To achieve this, what I tried to do was pass a prefix_url field to the component with the “/myroute” part of the route, and then the component itself would concat with the “/something” part.

This works fine, but if I try to use verified routes with it, it will start generating warnings.

This is a small example of what I’m trying to do:

defmodule CoreWeb.Components.MyComponent do
  use CoreWeb, :html

  attr :prefix_url, :string

  def render(assigns) do
    ~H"""
    <button phx-click={~p"#{@prefix_url}/something"}></button>
    """
  end
end

defmodule CoreWeb.Live.Trash.Blibs do
  use CoreWeb, :live_view

  def mount(_, _, socket), do: {:ok, socket}

  def render(assigns) do
    ~H"""
    <div>
      <CoreWeb.Components.MyComponent.render prefix_url={~p"/blibs"} />
    </div>
    """
  end
end

This will generate the following compilation error:

== Compilation error in file lib/core_web/live/trash/blibs.ex ==
** (ArgumentError) paths must begin with /, got: "#{assigns.prefix_url}/something"
    (phoenix 1.7.7) lib/phoenix/verified_routes.ex:548: Phoenix.VerifiedRoutes.verify_segment/2
    (phoenix 1.7.7) lib/phoenix/verified_routes.ex:734: Phoenix.VerifiedRoutes.rewrite_path/4
    (phoenix 1.7.7) lib/phoenix/verified_routes.ex:720: Phoenix.VerifiedRoutes.build_route/5
    (phoenix 1.7.7) expanding macro: Phoenix.VerifiedRoutes.sigil_p/2
    lib/core_web/live/trash/blibs.ex:8: CoreWeb.Components.MyComponent.render/1
    (phoenix_live_view 0.20.0) expanding macro: Phoenix.Component.sigil_H/2
    lib/core_web/live/trash/blibs.ex:7: CoreWeb.Components.MyComponent.render/1

If I change the button link to this:

<button phx-click={~p"/#{@prefix_url}/something"}></button>

Now it returns the following warning:

warning: no route path for CoreWeb.Router matches "/#{assigns.prefix_url}/something"
  lib/core_web/live/trash/blibs.ex:8: CoreWeb.Components.MyComponent.render/1

Of course, I can just remove the ~p and it will work fine, but I would prefer to keep using verified routes in this case.

Is there any workaround to make this work?

1 Like
2

I’m not sure what you want to do is feasible: you want to verify at compile time a dynamic route evaluated at runtime.

Seems paradoxical to me :man_shrugging:

1 Like
3

I mean, I’m passing a static string to the component, I was guessing that the compiler would know that in this case, guess not.

4

I think you either need to have your router declaring a route with a dynamic prefix parameter:

# router.ex
get "/:prefix/something", SomethingController, :show

or your component to handle a static list of prefixes that can be used at compile-time

defp prefixed_something_path("blibs"), do: ~p"/blibs/something"
defp prefixed_something_path("foo"), do: ~p"/foo/something"
defp prefixed_something_path("bar"), do: ~p"/bar/something"
1 Like
5

Yes, you’re passing a static string. But nothing in the system knows at compile time how that static string is composed in some other computations and what the result of that computation would be. But that result is what you’d probably want to have verified. If not you can always skip verified routes.