# `Xenia.Components`
[🔗](https://github.com/uzaydurdu/xenia/blob/v0.1.1/lib/xenia/core/components.ex#L1)

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()`.

# `__using__`
*macro* 

Enables the Xenia component declaration DSL.

# `component`
*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.

---

*Consult [api-reference.md](api-reference.md) for complete listing*