Phoenix Functional Components and Hot Reloading

Phoenix Forum Questions / Help
,
1

Hi there,

I’m seeing an issue where changes to Phoenix functional components aren’t being reflected automatically until a refresh, or if I change other content on the page that is using the component.

For instance, I have a simple container:

defmodule Card do
  use Phoenix.Component

  def card(assigns) do
    ~H"""
    <div>
      <%= render_slot(@inner_block) %>
    </div>
    """
  end
end

This renders as expected on a page like so:

<Card.card>
  <div>Test Content</div>
</Card.card>

When I modify the functional component, e.g. to add a class to add the styling for the card, the page seems to refresh but the Card component is not updated to reflect the new style. However, if I modify the “inner block” content, e.g. the “Test Content” text, then the page is refreshed and the component changes come through.

Is this expected behaviour, or am I doing something wrong? (Note that this is not on a LiveView page, just a simple view)

Thanks

1 Like
2

That is expected. If you look in your config/dev.exs you see something like this:

live_reload: [
    patterns: [
      ~r"priv/static/.*(js|css|png|jpeg|jpg|gif|svg)$",
      ~r"priv/gettext/.*(po)$",
      ~r"lib/my_app_web/(live|views)/.*(ex)$",
      ~r"lib/my_app_web/templates/.*(eex)$"
    ]
  ]

You could put your components into a separate folder e.g. my_app_web/components and add it to the live_reload patterns:

live_reload: [
    patterns: [
      ~r"priv/static/.*(js|css|png|jpeg|jpg|gif|svg)$",
      ~r"priv/gettext/.*(po)$",
      ~r"lib/my_app_web/(live|views|components)/.*(ex)$", # <--
      ~r"lib/my_app_web/templates/.*(eex)$",
    ]
  ]

Then the page should get reloaded when you change something in your components.

3 Likes
3

Ah! Makes sense. Much appreciated :slight_smile:

1 Like