Macaw.Component.Client (macaw_component v0.1.5)

Copy Markdown View Source

The client protocols every adopter shares (spec/02 §8): the announcer's two regions, the announce event, and the client bus. Each is found, not created per component, so components share one announcer and one bus on any page.

The package ships a module implementing both for hooks, module_path/0, which a host serves and a hook imports at module_url/0. What a component declares reaches it as the data attributes attributes/1 renders.

Summary

Functions

The DOM event a hook dispatches to request an announcement.

The announcer's region ids.

The attribute carrying the announcement names a component declares (announces).

The data attributes that hand a component's declared announcement names and bus keys to the client: announces in declared order and local's keys sorted, each a JSON list. A component puts them on the element its hook is attached to, or an ancestor of it within the component, for example <div phx-hook="Cards" {Client.attributes(@declarations)}>. Both are always present, so a component that declares nothing has nothing accepted.

The property of window the client bus lives under.

The attribute carrying the bus keys a component declares (local).

The shared client module's file in this package, relative to its root.

The same-origin path a hook imports the shared module from, where a host serves priv/static with Plug.Static, at: "/", from: {:macaw_component, "priv/static"}.

Functions

announce_event()

@spec announce_event() :: String.t()

The DOM event a hook dispatches to request an announcement.

announcer_ids()

@spec announcer_ids() :: %{polite: String.t(), assertive: String.t()}

The announcer's region ids.

announces_attribute()

@spec announces_attribute() :: String.t()

The attribute carrying the announcement names a component declares (announces).

attributes(declarations)

@spec attributes(Macaw.Component.Declarations.t()) :: [{String.t(), String.t()}, ...]

The data attributes that hand a component's declared announcement names and bus keys to the client: announces in declared order and local's keys sorted, each a JSON list. A component puts them on the element its hook is attached to, or an ancestor of it within the component, for example <div phx-hook="Cards" {Client.attributes(@declarations)}>. Both are always present, so a component that declares nothing has nothing accepted.

iex> {:ok, d} = Macaw.Component.Declarations.new([announces: ["matches"], local: %{"hover" => :time}], nil)
iex> Macaw.Component.Client.attributes(d)
[{"data-mw-announces", ~s(["matches"])}, {"data-mw-local", ~s(["hover"])}]

bus_name()

@spec bus_name() :: String.t()

The property of window the client bus lives under.

local_attribute()

@spec local_attribute() :: String.t()

The attribute carrying the bus keys a component declares (local).

module_path()

@spec module_path() :: String.t()

The shared client module's file in this package, relative to its root.

module_url()

@spec module_url() :: String.t()

The same-origin path a hook imports the shared module from, where a host serves priv/static with Plug.Static, at: "/", from: {:macaw_component, "priv/static"}.