Like update_many_async/3, but to run several update/preload functions in parallel

Warning: this will set assigns for any/all users who subscribe to them. You want to cast_self/2 instead if dealing with user-specific actions or private data.

Creates a JS command to click all elements matching the specified data-id within a container.

Parameters

• container_selector - CSS selector for the container element
• selector - The type of element or CSS selector to match (defaults to "a")

Example

click_elements_with_data_id("#user_list", "a.follow_button")

Creates a JS command to click all elements matching the specified data-id within a container.

Parameters

• container_selector - CSS selector for the container element
• data_id - The value of the data-id attribute to match (eg. "follow")
• element_type - The type of element to match (defaults to "a")

Example

click_elements_with_data_id("#user_list", "follow", "button")

copies the go param into a query string, if any

Callback implementation for Bonfire.Common.ExtensionModule.declared_extension/0.

Generates a deterministic DOM ID based on component type, object ID, context, and parent ID.

Parameters

• component_type: The type or name of the component
• object_id: The ID of the object being displayed
• context: The context where the component is displayed (optional)
• parent_id: The ID of the parent component (optional)

Returns

A string with format: component_type_context_object_id_parent_id

Examples

iex> deterministic_dom_id("modal", "post123", "feed", "container456")
"modal_feed_post123_container456"

iex> deterministic_dom_id("dropdown", "user789")
"dropdown_user789"

Generate a query string adding a go redirection path to the URI (for redirecting somewhere after auth flows). It is recommended to use set_go_after/2 where possible instead.

Hides element using LiveView JS when connected, vanilla JS when not.

Options

Same as Phoenix.LiveView.JS.hide/1:

• :to - DOM selector to hide. Defaults to the clicked element.

Examples

<button onclick={js_hide()}>Hide self</button>
<button onclick={js_hide(to: "#error")}>Hide error</button>

Creates a JavaScript function call that executes LiveView JS when connected, vanilla JS when not.

Escapes quotes in both JS strings and wraps them in a JS_exec.call() function.

Parameters

• lv_js - A Phoenix.LiveView.JS command or encoded string
• vanilla_js - A vanilla JavaScript string

Combines LiveView JS and vanilla JS into a hybrid command that works whether the socket is connected or not.

Takes a LiveView JS command and vanilla JS action with options, then creates a hybrid function call.

Parameters

• lv_js - A Phoenix.LiveView.JS command
• vanilla_js - A string representing the vanilla JS action (e.g., "toggle('hidden')")
• opts - Options including :to selector

Shows element using LiveView JS when connected, vanilla JS when not.

Options

Same as Phoenix.LiveView.JS.show/1:

• :to - DOM selector to show. Defaults to the clicked element.

Examples

<button onclick={js_show()}>Show self</button>
<button onclick={js_show(to: "#modal")}>Show modal</button>

Toggles element visibility using LiveView JS when connected, vanilla JS when not.

Options

Same as Phoenix.LiveView.JS.toggle/1:

• :to - DOM selector to toggle. Defaults to the clicked element.

Examples

<button onclick={js_toggle()}>Toggle self</button>
<button onclick={js_toggle(to: "#content")}>Toggle content</button>

Generates vanilla JavaScript for DOM manipulation with optional selector targeting.

Creates JavaScript that either operates on the current element (this) or targets elements via querySelector.

Parameters

• action - The classList action to perform (e.g., "toggle('hidden')", "add('active')")
• opts - Options including :to for element selector

Examples

iex> js_vanilla_action("toggle('hidden')", [])
"this.classList.toggle('hidden')"

iex> js_vanilla_action("add('active')", to: "#button")
"document.querySelectorAll('#button').forEach(el => el.classList.add('active'))"

iex> js_vanilla_action("remove('disabled')", to: ".form-input")
"document.querySelectorAll('.form-input').forEach(el => el.classList.remove('disabled'))"

Special LiveView helper function which allows loading LiveComponents in regular Phoenix views: live_render_component(@conn, MyLiveComponent)

TODO: deduplicate if same as render_inline

Inserts one or many items in an existing stream. See Phoenix.LiveView.stream_insert/4 for opts.

Generates a random DOM ID.

DEPRECATED: Use deterministic_dom_id/4 instead for consistent IDs across renders.

Renders a HEEx template inline in a controller.

Example

use Bonfire.UI.Common.Web, :controller
use Phoenix.Component

def index(conn, _) do
  render_inline conn, ~H"<u><%= @current_user.name %></u>"
end

Subscribe to assigns targeted at the current account/user

Save a go redirection path in the session (for redirecting somewhere after auth flows)

Checks if the socket is connected.

Examples

iex> socket_connected?(%{socket_connected?: true})
true

iex> socket_connected?(%{socket_connected?: false})
false

iex> socket_connected?(%{__context__: %{socket_connected?: true}})
true

iex> socket_connected?(%Phoenix.LiveView.Socket{transport_pid: 1})
true

iex> socket_connected?(%Phoenix.LiveView.Socket{transport_pid: nil})
false

Run a function and expects tuple. If anything else is returned, like an error, a flash message is shown to the user.