Lavash.Component.Base (Lavash v0.4.0-rc.4)

Copy Markdown View Source

Layer-1+2+3 entry point for stateful Phoenix LiveComponents: the full Lavash DSL surface minus the optimistic UI layer.

See Lavash.LiveView.Base for the full discussion of what's kept and what's given up. The same rules apply at the component level: optimistic: true, animated: ..., and calculate :foo, rx(...), optimistic: true produce a friendly compile-time error directing you to either drop the flag or upgrade to use Lavash.Component for the full stack.

Example

defmodule MyAppWeb.UserCard do
  use Lavash.Component.Base

  prop :user, :map, required: true

  state :expanded, :boolean, default: false
  # `optimistic: true` would error — server-authoritative
  # is the contract.

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

  template do
    ~H"""
    <div phx-click="toggle" phx-target={@myself}>
      <h3>{@user.name}</h3>
      <div :if={@expanded}>...</div>
    </div>
    """
  end
end

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.