Xenia.Components (Xenia v0.1.1)

Defines typed Phoenix function components for Xenia adapters.

Example

defmodule MyAppWeb.Components do
  use Xenia.Components

  component :chart,
    adapter: "Chart",
    doc: "Renders an interactive chart." do

    prop :type, :string, required: true
    prop :data, :map, default: %{}
    event :click
  end
end

The generated component can be used in HEEx:

<.chart
  id="sales"
  type="bar"
  data={@sales}
  on_click="bar_clicked"
/>

Each declaration generates a normal Phoenix function component:

prop name, type, opts becomes a Phoenix attr and is passed to the JavaScript adapter as a prop.
Optional props that are absent are omitted. Explicit defaults are included.
event name becomes attr :on_<name>, :string. Events without a binding are omitted.
Components normally require id. Declarations with form_value: :prop also accept field={@form[:name]}, using the field's id by default.
Every component supports global HTML attributes, shortcuts, on_crash, and the <:loading> and <:error> slots (see Xenia.Component).

Rendering is delegated to Xenia.Component.xenia/1.

The adapter must be registered separately in JavaScript using createHooks().

Summary

Functions

__using__(opts)

Enables the Xenia component declaration DSL.

component(name, opts, list)

Generates a typed Phoenix function component.

Functions

using(opts)

(macro)

Enables the Xenia component declaration DSL.

component(name, opts, list)

(macro)

Generates a typed Phoenix function component.

Options

:adapter - required JavaScript adapter registration name, or a co-located adapter's ".Name", defined in this module (see Xenia.Component.colocated/1).
:form_value - optional declared prop name used as a Phoenix form value.
:doc - optional documentation string.

Supported declarations

prop :name, :string
prop :data, :map, default: %{}
prop :type, :string, required: true
event :change

Invalid declarations raise ArgumentError during compilation.