View Source Pyro.Component (Pyro v0.3.7)

This is basically the same thing as Phoenix.Component, but Pyro extends the attr/3 macro with:

:css_classes type
:overridable flag
:values supports an atom value (override key)

Pyro also provides assign_overridables/1, which automatically assigns all flagged overridable attrs with defaults from Pyro.Overrides

Example

defmodule MyApp.Components.ExternalLink do
  @moduledoc """
  An external link component.
  """
  use Pyro.Component

  attr :overrides, :list, default: nil, doc: @overrides_attr_doc
  attr :class, :css_classes, overridable: true, required: true
  attr :href, :string, required: true
  attr :rest, :global, include: ~w[download hreflang referrerpolicy rel target type]
  slot :inner_block, required: true

  def external_link(assigns) do
    assigns = assign_overridables(assigns)
    ~H"""
    <a class={@class} href={@href}} {@rest}>
      <%= render_slot(@inner_block) %>
    </a>
    """
  end
end

Note:
Only additional features will be documented here. Please see the Phoenix.Component docs for the rest, as they will not be duplicated here.

Summary

Functions

assign_overridables(assigns)

This macro automatically assigns all the overridable attrs, and handles merging classes for :css_classes type attrs.

attr(name, type, opts \\ [])

There are only a few things added to Phoenix.Component.attr/3 by Pyro

encode_flash(message, opts)

Encode a flash message as a JSON binary with extra metadata options. This is necessary because Phoenix only allows binary messages, but many flash messages would be vastly improved by bespoke presentation.

Types

encode_flash_opts()

@type encode_flash_opts() ::
  {:ttl, pos_integer()}
  | {:title, binary()}
  | {:icon_name, binary()}
  | {:close, boolean()}
  | {:style_for_kind, binary()}

Functions

assign_overridables(assigns)

(macro)

This macro automatically assigns all the overridable attrs, and handles merging classes for :css_classes type attrs.

It must be called once in any component that contains overridable attrs.

Example

def external_link(assigns) do
    assigns = assign_overridables(assigns)

attr(name, type, opts \\ [])

(macro)

There are only a few things added to Phoenix.Component.attr/3 by Pyro:

:css_classes type
- merges overridable defaults with passed prop values via Pyro.Component.CSS.classes/1 (or bring your own merge function)
- less bloated HTML
:overridable flag (marks attribute to be overridden by Pyro.Overrides)
:values supports an atom value (override key, loaded by Pyro.Overrides)

There are compile time checks to ensure the following, but of note:

Attrs flagged as overridable cannot have a default - That's what overrides are for! 🚀
If flagged as overridable and required, a runtime exception will be raised if no configured overrides provide a default
If any attrs are flagged as overridable
- The first attribute must be:
```
attr :overrides, :list, default: nil, doc: @overrides_attr_doc
```
- assign_overridables/1 must be called

Everything else is handled by Phoenix.Component.attr/3, so please consult those docs for the rest.

encode_flash(message, opts)

@spec encode_flash(binary(), [encode_flash_opts()]) :: binary()

This allows you to override the defaults for:

:title - The title above the message
:close - Auto-close the flash after :ttl
:ttl - The time-to-live in milliseconds
:icon_name - Name of the icon displayed in the title
:style_for_kind - Override which kind of style this flash should have

Examples

socket
|> put_flash(
    "success",
    encode_flash(
      """
      This flash closes when it *wants to*.
      And has a custom title and icon.
      """,
      title: "TOTALLY CUSTOM",
      ttl: 6_000,
      icon_name: "hero-beaker"
    )
  )