Crate wasm_liveview 

Two-way bridge between wasm-bindgen Rust and a mounted Phoenix LiveView.

Outbound, this crate wraps the Phoenix.LiveView.JS command set so Rust/wasm code can fire LV events, navigate, dispatch DOM events, run transitions, and manage focus – without trampolining through hidden phx-* trigger elements. Inbound, it lets Rust subscribe to server-pushed events from Phoenix.LiveView.push_event/3.

Written for game code that renders in wasm but wants the server to own state, routing, and persistence.

Payload types

Commands that carry a payload (push_event, push_event_to, dispatch_with) accept any T: serde::Serialize. Use serde_json::json! for ad-hoc payloads, or define a #[derive(Serialize)] struct for typed, compile-time-checked ones. Both styles are shown on each function’s page.

Outbound example

use wasm_liveview as lv;

#[derive(serde::Serialize)]
struct Submit<'a> { word: &'a str, route: &'a [usize] }

lv::push_event("submit_word", &Submit { word: "TRY", route: &[0, 1, 2] })?;

// Client-side routing.
lv::navigate("/room/42", false)?;

// Run a CSS transition.
lv::transition(
    lv::TransitionClasses {
        transition: &["fade-in"],
        start: &["opacity-0"],
        end: &["opacity-100"],
    },
    Some("#board"),
    Some(150),
)?;

Inbound example

use wasm_liveview as lv;

#[derive(serde::Deserialize)]
struct Score { value: u32 }

let sub = lv::subscribe::<Score, _>("score_update", |s| {
    // handler runs once per server push
    let _ = s.value;
})?;

// Drop the subscription to unsubscribe, or:
sub.forget();

Target behavior

On wasm32-* targets the crate pulls in wasm-bindgen, js-sys, and web-sys and calls window.liveSocket.execJS for real. On any other target every outbound function stubs to Ok(()) and subscribe returns an inert handle, so the JSON wire-format encoders can be unit-tested without a browser.

Error model

Every fallible call returns Result<_, Error>. See the Error enum for the failure modes (missing window, uninitialized liveSocket, JSON serialization failures, and JS exceptions thrown by execJS).

Structs

Bridge

Selector-keyed handle to a server-rendered bridge element.

Subscription

RAII handle for a listener registered via subscribe or crate::Bridge::watch.

TransitionClasses

Three class lists describing a CSS transition.

Enums

Error

Failure modes for every outbound command and for crate::subscribe.

Functions

dispatch

Dispatches a DOM CustomEvent named event on an element.

dispatch_with

Like dispatch, but attaches a serializable detail payload.

exec_attr

Runs the JS command chain stored in a data-* attribute.

focus

Focuses the element at to, or the LiveView root when None.

focus_first

Focuses the first focusable descendant of to.

navigate

Client-side navigation to href.

patch

Client-side patch to href within the current LiveView.

pop_focus

Pops the previously pushed focus off LiveView’s focus stack.

push_event

Pushes event with payload to the root LiveView.

push_event_to

Pushes event with payload to a specific phx-target.

push_focus

Pushes the current focus onto LiveView’s focus stack.

subscribe

Subscribes to a server-pushed LiveView event.

transition

Runs a CSS transition on an element.