Unable to use Alpine JS `x-` attributes on MyApp.CoreComponents from Heex template

Phoenix Forum Questions / Help
, ,
1

I am trying to use Alpine JS (3.13.2) with Phoenix 1.7.10, using dead views generated by mix phx.gen.html

In a file such as my_app/lib/my_app_web/controllers/example_html/index.html.heex, I can use x- attributes from Alpine, such as x-data on non-CoreComponents such as <button> or <div>, but cannot use them on CoreComponents such as <.icon>.

When writing <.icon name="hero-heart" x-init={~s(console.log("I am being initialized"\))} /> I receive a compilation warning:

warning: undefined attribute "x-init" for component MyAppWeb.CoreComponents.icon/1
  lib/my_app_web/controllers/example_html/index.html.heex:5: (file)

I have modified the following lines:

  • in lib/my_app_web/components/core_components.ex
    - use Phoenix.Component
+ use Phoenix.Component, global_prefixes: ["x-"]
  • in lib/my_app_web.ex
    def live_view do
   quote do
     use Phoenix.LiveView, 
       ...
       + global_prefixes: ["x-"]
      ...
   end
end
...
def live_component do
   quote do
     - use Phoenix.LiveComponent
     + use Phoenix.LiveComponent, global_prefixes: ["x-"]
   end
end
...
def html do
  quote do
    - use Phoenix.Component
    + use Phoenix.Component, global_prefixes: ["x-"]
    ...
  end
end

I saw a closed issue on the Phoenix repo that states that global_prefixes must be set in the caller – but I’m not sure where I would add that in my lib/my_app_web/controllers/example_html.ex file which looks like this:

defmodule MyAppWeb.ExampleHTML do
  use MyAppWeb, :html

  alias MyApp.Examples.Example

  embed_templates "example_html/*"

  @doc """
  Renders a example form.
  """
  attr :changeset, Ecto.Changeset, required: true
  attr :action, :string, required: true

  def example_form(assigns)
end

Any help would be appreciated!

2

Additionally, in phoenix_live_view/lib/phoenix_component.ex, it is stated that:

“By default, the following prefixes are supported:phx-, aria-, and data-.”

So, using Alpine’s .prefix method, I changed the prefix of Alpine directives to data-x- (Alpine.prefix("data-x-") in the hope that they would be accepted as an attribute prefix without me needing to use global_prefixes.

However, the data-x-init attribute still returns the following:

warning: undefined attribute "data-x-init" for component MyAppWeb.CoreComponents.icon/1
  lib/my_app_web/controllers/example_html/index.html.heex:5: (file)

So it seems to me that any attributes added to a use of a CoreComponents would be stripped?

(It’s also occurred to me that, in this case, I can just wrap the <.icon> in a <div>/etc.)

3

I think this issue is not related to Alpine JS attributes in particular. Try to use any other attribute than name and class (the ones declared in the icon component definition header) and you will get the same error.

For example

<.icon name="hero-heart" id="blabla" />
<.icon name="hero-heart" title="blabla" />

Will show the same warning because id or title are not declared.

So you have to extend the component so it takes more attributes. You can declare the specific ones you need (:"x-init") or just allow global attributes.