CI/CD Hex.pm

Lv-States

lv-states (short for LiveView States) provides a handful of state management helpers for Phoenix LiveView Sockets with the aim of simplifying common needs of client <> server communication present in interactive applications.

See it in action at https://lv-states.fly.dev

Documentation

Read the full documentation at https://hexdocs.pm/lv_states/

Installation

def deps do
  [
    {:lv_states, "~> 0.1.1"}
  ]
end

WithSearch

Useful for those situations in which a search is present in the UI.

Usage

defmodule CarInventory do
  use LvStates.WithSearch, [:model]
  #...rest of functions
end

You can now comfortably point your client events to the new event handler, Eg.

  <form phx-change="search-model">
    <input
      type="text"
      name="query"
      phx-debounce="300"
      value="<%= @search.model.query %>"
      placeholder="Insert the model name to search">
  </form>

For a full example please see the source of the demo

WithFilter

Useful for multi-value fields.

Usage

defmodule CarInventory do
  use LvStates.WithFilter, [brand: :multiple]
  #...rest of functions
end

Send events from a collection of options to the event handler like this:

<%= for b <- @brands do %>
  <div
    phx-click="lvs-filter-set"
    phx-value-field="brand"
    phx-value-value="<%= b %>"
    >
    <%= b %>
  </div>
<% end %> %>

For a full example please see the source of the demo

TODO

  • Migrate phoenix demo app to esbuild
  • Use Utils.socket_set_field for WithSearch helper
  • Create test utils functions to obtain useful structs
  • Check that values added are binary not nil
  • Compilation-time check that "fetch" or dynamic fetcher function exists in the host module

TODO

  • Migrate phoenix demo app to esbuild
  • Use Utils.socket_set_field for WithSearch helper
  • Create test utils functions to obtain useful structs
  • Check that values added are binary not nil
  • Compilation-time check that "fetch" or dynamic fetcher function exists in the host module