Livex.JSX (livex v0.1.2)

Provides macros for client-side state updates and event emission in Livex components.

This module contains two main sets of functionality:

  1. JSX.emit - Emit events from components to parent views/components
  2. 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

assign_state()

(macro)

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>

assign_state(opts)

(macro)

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>

assign_state(key, val)

(macro)

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 state
  • val - The value to assign

Examples

<button phx-click={JSX.assign_state(:is_expanded, true)}>Expand</button>

emit(event_name_suffix_ast)

(macro)

emit(js_ast, event_name_suffix_ast)

(macro)

emit(js_ast, event_name_suffix_ast, opts_list_ast)

(macro)

Generates a JS command to emit a client-side event.

Variants

  • emit(js, event_suffix, opts) - Chain on an existing JS struct with options
  • emit(js, event_suffix) - Chain on an existing JS struct without options
  • emit(event_suffix, opts) - Create a new JS chain with options
  • emit(event_suffix) - Create a new JS chain without options

Parameters

  • js - An existing Phoenix.LiveView.JS struct to chain operations on
  • event_suffix - The suffix of the event to emit (e.g., "close" for "phx-close")
  • opts - Options for the event, such as values: %{...}

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")