Livex.JSX (livex v0.2.0)
Provides macros for client-side state updates and event emission in Livex components.
This module contains two main sets of functionality:
- JSX.emit - Emit events from components to parent views/components
- JSX.assign_state - Update component state directly from templates
Event Emission (JSX.emit)
The emit
macros allow components to emit events that can be handled by parent components
or views. This creates a clean communication channel between child and parent components.
Examples
# In a component template
<button phx-click={JSX.emit(:close)}>Cancel</button>
<button phx-click={JSX.emit(:save, value: %{id: @id, data: @form_data})}>Save</button>
# In the parent component/view
<.live_component
module={MyApp.ModalComponent}
id="my-modal"
phx-close="handle_modal_close"
phx-save="handle_modal_save">
Modal content here
</.live_component>
# In the parent's handle_event
def handle_event("handle_modal_close", _, socket) do
{:noreply, assign(socket, :modal_open, false)}
end
def handle_event("handle_modal_save", %{"id" => id, "data" => data}, socket) do
# Process the saved data
{:noreply, socket}
end
State Updates (JSX.assign_state)
The assign_state
macros allow updating component state directly from templates,
without needing to write handle_event callbacks for simple state changes.
Examples
# Update a single value
<button phx-click={JSX.assign_state(:is_expanded, true)}>Expand</button>
# Update multiple values at once
<button phx-click={JSX.assign_state(is_expanded: false, selected_tab: "details")}>
Close
</button>
# Conditional updates
<button phx-click={
if @is_expanded do
JSX.assign_state(is_expanded: false, pending_value: @initial_value)
else
JSX.assign_state(is_expanded: true)
end
}>
{if @is_expanded, do: "Close", else: "Expand"}
</button>
# Force a component refresh without changing state
<button phx-click={JSX.assign_state()}>Refresh Component</button>
Usage
To use these macros, add use Livex.JSX
to your module, or they are automatically
imported when using Livex.LivexView
or Livex.LivexComponent
.
Summary
Functions
Creates a JS command to trigger a component update without changing any data.
Creates a JS command to update component data from the client with a keyword list of options.
Creates a JS command to update a single component data value from the client.
Generates a JS command to emit a client-side event.
Functions
Creates a JS command to trigger a component update without changing any data.
This is useful for forcing a component to re-render.
Examples
<button phx-click={JSX.assign_state()}>Refresh Component</button>
Creates a JS command to update component data from the client with a keyword list of options.
This macro allows updating multiple component state values directly from client-side events.
Parameters
opts
- A keyword list of key-value pairs to update in the component's state
Examples
<button phx-click={JSX.assign_state(is_expanded: true, selected_tab: "details")}>
Expand Details
</button>
Creates a JS command to update a single component data value from the client.
See assign_state/1
for updating multiple values at once.
Parameters
key
- The key to update in the component's stateval
- The value to assign
Examples
<button phx-click={JSX.assign_state(:is_expanded, true)}>Expand</button>
Generates a JS command to emit a client-side event.
Variants
emit(js, event_suffix, opts)
- Chain on an existing JS struct with optionsemit(js, event_suffix)
- Chain on an existing JS struct without optionsemit(event_suffix, opts)
- Create a new JS chain with optionsemit(event_suffix)
- Create a new JS chain without options
Parameters
js
- An existing Phoenix.LiveView.JS struct to chain operations onevent_suffix
- The suffix of the event to emit (e.g., "close" for "phx-close")opts
- Options for the event, such asvalues: %{...}
Examples
# With existing JS chain and options
JS.transition(...) |> JSX.emit("close", values: %{reason: "cancelled"})
# With existing JS chain, no options
JS.transition(...) |> JSX.emit("close")
# New JS chain with options
JSX.emit("close", values: %{reason: "cancelled"})
# New JS chain without options
JSX.emit("close")