Questions around custom components

[joshk]

I'd like to use some components I've created using the tag syntax...

eg. <MyComponent arg={arg_1} />

But I'm finding the docs a bit confusing on how to make this happen.

For example:

defmodule MyApp.ReadingTile do
  use Mob.Component

  import Mob.Sigil, only: [sigil_MOB: 2]

  def render(%{label: label, value: value, unit: unit, status: status, target: target}) do
    ~MOB"""
    """
  end
end

along with

Mob.Composite.register(
      :reading_tile,
      {MyApp.ReadingTile, :render}
    )

doesn't work. I also get the following warning during mix compile

warning: ~MOB: <ReadingTile> is not in the Mob tag whitelist — pass-through as :reading_tile

Any and all help would be great.

[GenericJam]

Thanks for the report — the confusion was fair, and it turned up two real doc gaps that are now fixed in mob 0.7.13 (published to Hex; docs at hexdocs.pm/mob/0.7.13/components.html).

Two things tripped you up:

1. use Mob.Component is a different feature. Mob.Component is the behaviour for native view components (a stateful BEAM process paired with a platform-native view; its render/1 returns a props map for a native factory, not a ~MOB tree). What you want — a custom <Tag> built out of the built-in widgets, no native code — is Mob.Composite. The names are close; the one you want is Composite.

2. The whitelist warning is expected and harmless. ~MOB: <ReadingTile> is not in the Mob tag whitelist — pass-through as :reading_tile fires at compile time for every custom tag, because registration happens at runtime and the sigil macro can't see it. As long as you've registered an expander under :reading_tile, the tag renders. (A genuinely unregistered tag renders nothing — that's the real "it doesn't work" symptom.)

A composite is a plain module with import Mob.Sigil and an expand(props, children, ctx) function (not use Mob.Component, not render/1). Here's your ReadingTile corrected:

defmodule MyApp.ReadingTile do
  @moduledoc ~S(`<ReadingTile label="…" value="…" unit="…" status="…" target="…" />`)
  import Mob.Sigil

  # props is a map of the tag's attributes; children is the (unused) child list.
  def expand(props, _children, _ctx) do
    label  = Map.get(props, :label, "")
    value  = Map.get(props, :value, "")
    unit   = Map.get(props, :unit, "")
    status = Map.get(props, :status, "")

    ~MOB"""
    <Column background={:surface_raised} corner_radius={:radius_md} padding={:space_md}>
      <Text text={label} text_size={:sm} text_color={:muted} />
      <Text text={"#{value} #{unit}"} text_size={:2xl} text_color={:on_surface} />
      <Text text={status} text_size={:sm} />
    </Column>
    """
  end
end

Register the expander — note it points at :expand, not :render:

# runtime (a plain Hex UI kit), from your host's on_start/0:
Mob.Composite.register(:reading_tile, {MyApp.ReadingTile, :expand})

# …or via a plugin manifest's ui_components:
ui_components: [
  %{tag: "ReadingTile", atom: :reading_tile, expand: {MyApp.ReadingTile, :expand}}
]

Then use it in any screen: <ReadingTile label="Heart rate" value="72" unit="bpm" status="ok" />. You'll still see the compile-time whitelist warning; that's expected.

Full walkthrough (function composites vs tag composites, event-target auto-injection, the expander contract) is in the Defining your own components section. Closing this out — reopen if the corrected pattern still gives you trouble.