Lavash.Component (Lavash v0.3.0-rc.1)

Copy Markdown View Source

Stateful Phoenix LiveComponents with the same DSL as Lavash.LiveView.

Components can declare prop, state, calculate, actions, and render with the ~L sigil. Inside a Lavash component, phx-target={@myself} is auto-injected on phx-* attrs and __lavash_client_bindings__ propagates to nested <.lavash_component> calls.

Example

defmodule MyAppWeb.ProductCard do
  use Lavash.Component

  prop :product, :map, required: true

  state :expanded, :boolean, from: :socket, default: false, optimistic: true
  state :hovered, :boolean, default: false, optimistic: true

  calculate :show_actions, rx(@expanded or @hovered)

  actions do
    action :toggle_expand do
      set :expanded, rx(not @expanded)
    end
  end

  render fn assigns ->
    ~L"""
    <div phx-click="toggle_expand">
      <h3>{@product.name}</h3>
      <div :if={@show_actions}>...</div>
    </div>
    """
  end
end

Extensions

Add behavior plugins via the extensions option:

use Lavash.Component, extensions: [Lavash.Overlay.Modal.Dsl]

Available extensions:

State persistence modes

Components use the same from: field as LiveViews. from: :socket is particularly useful for components — the per-component-id state map travels through the LiveView's assigns and survives reconnects.

Options

  • :extensions (list of module that adopts Spark.Dsl.Extension) - A list of DSL extensions to add to the Spark.Dsl

  • :otp_app (atom/0) - The otp_app to use for any application configurable options

  • :fragments (list of module/0) - Fragments to include in the Spark.Dsl. See the fragments guide for more.