The ~MOB sigil for declarative native UI.

Compiles a tag template to a Mob.Renderer-compatible node map at compile time using NimbleParsec. Expressions in {...} are evaluated in the caller's scope at runtime.

Use ~MOB(...) for single nodes or ~MOB"""...""" for nested layouts.

Examples

import Mob.Sigil

# Self-closing
~MOB(<Text text="Hello" />)
#=> %{type: :text, props: %{text: "Hello"}, children: []}

# Nested layout
~MOB"""
<Column padding={:space_md}>
  <Text text="Title" text_size={:xl} />
  <Button text="OK" on_tap={{self(), :ok}} />
</Column>
"""

# Expression child — inject any node map or list of maps
~MOB"""
<Column>
  {Enum.map(items, fn i -> ~MOB(<Text text={i} />) end)}
</Column>
"""

Assigns shorthand

Inside a {...} expression, @foo rewrites to assigns.foo (matching Phoenix HEEx), so a render(assigns) body reads cleanly:

~MOB(<Text text={@title} />)   # same as text={assigns.title}

@foo only works where a variable named assigns is in scope — i.e. a screen's or component's render(assigns). Reusable helper functions take positional arguments instead, so use the argument directly there:

# Screen render — assigns is in scope, @ works:
def render(assigns), do: ~MOB(<Text text={@title} />)

# Helper — no assigns; interpolate the argument, don't use @:
def label(title), do: ~MOB(<Text text={title} />)

Using @foo where no assigns exists raises a CompileError naming the fix, rather than a cryptic "undefined variable assigns".

Control attributes — :if and :for

Two LiveView-style directives wrap an element without extra ceremony. Both take a {expr} value and may read @assigns.

# Conditional — omitted entirely when the expression is falsy
~MOB(<Badge text="New" :if={@unread > 0} />)

# Comprehension — one element per item; splices into the parent
~MOB"""
<Column>
  <Row :for={user <- @users}>
    <Text text={user.name} />
  </Row>
</Column>
"""

Combine them — :if then acts as a comprehension filter (an element is produced only for items where the condition holds):

<Text text={n} :for={n <- @nums} :if={rem(n, 2) == 0} />

Tag whitelist

Tags are validated against priv/tags/ios.txt and priv/tags/android.txt at compile time. Unknown tags emit a warning but still pass through — the type atom is derived by converting PascalCase to snake_case (e.g. TabBar → :tab_bar). This allows new native tags to be used before the whitelist is updated.