Crate autumn_plugin_leptos 

Leptos islands for Autumn apps: Leptos 0.8 components (wasm) inside Maud + htmx pages.

1. Write the components in a wasm crate. Register them with autumn-plugin-leptos-client in the start function:

   use autumn_plugin_leptos_client::register;
   use leptos::prelude::*;
   use wasm_bindgen::prelude::*;
   
   #[wasm_bindgen(start)]
   pub fn start() {
       register("Counter", counter);
   }

2. Build it with cargo build --target wasm32-unknown-unknown and wasm-bindgen --target web. Embed the output as a PluginAssets bundle and install it:

use autumn_plugin_leptos::{Island, LeptosPlugin, leptos_bundle, leptos_script};
use autumn_web::assets::PluginAssets;
use autumn_web::prelude::*;

static ISLANDS: PluginAssets = PluginAssets::from_files(
    "app-islands",
    &[("app.js", b"/* glue */"), ("app_bg.wasm", b"\0asm\x01\0\0\0")],
);

#[get("/")]
async fn index() -> AutumnResult<Markup> {
    let counter = Island::new("Counter")
        .props(&serde_json::json!({ "start": 3 }))?
        .fallback(html! { p { "Count: 3" } });
    Ok(html! {
        html {
            head { (leptos_script()) (leptos_bundle(&ISLANDS)) }
            body { (counter) }
        }
    })
}

autumn_web::app()
    .plugin(LeptosPlugin::new().bundle(&ISLANDS))
    .routes(routes![index])
    .run()
    .await;

3. Set a CSP that allows wasm: WasmCspLoader or wasm_csp().

The loader (leptos-islands.js) imports each bundle and mounts each island. It mounts islands that htmx swaps in and unmounts islands that htmx swaps out. A data-leptos-props change sets the props signal of the same instance, so the component keeps its state. It uses no inline script and no eval.

Features

• ssr: Island::fallback_view renders a Leptos view on the server as the fallback.

Security

The loader mounts each data-leptos-island element in the page and imports each accepted bundle link. If your app shows user HTML, the sanitizer must remove data-leptos-*, hx-* and data-hx-* attributes and <link> and <template> elements. data-leptos-ignore does not give full protection. An htmx out-of-band swap can move an element out of it.

Structs

Island

One Leptos island: an element that the loader mounts a component into.

LeptosPlugin

Installs Leptos islands in an Autumn app.

PropsUpdate

New props for mounted islands, sent in an HX-Trigger header.

WasmCspLoader

A ConfigLoader that adds WASM_UNSAFE_EVAL to the loaded CSP.

Enums

AttrError

The error from Island::attr.

JsonKind

The kind of a JSON value that is not an object.

MountWhen

When the loader mounts an island.

PropsError

The error from Island::props.

Constants

ASSETS_NAMESPACE

URL namespace of the loader bundle: /static/_plugins/leptos/.

LOADER_JS

Logical path of the loader in LEPTOS_ASSETS.

PLUGIN_NAME

The crate name. LeptosPlugin with no app bundles uses it as its plugin name. Each LeptosPlugin declares it in its contract.

PROPS_EVENT

The DOM event that the loader reads new props from.

WASM_UNSAFE_EVAL

The CSP source that allows wasm compilation.

Statics

LEPTOS_ASSETS

The loader bundle. It holds one file, LOADER_JS.

Functions

add_wasm_unsafe_eval

Adds WASM_UNSAFE_EVAL to the script-src directive of policy.

leptos_bundle

Renders the tags of an app bundle, in this order:

leptos_script

Renders the <script defer> tag of the island loader.

wasm_csp

The Autumn default CSP plus WASM_UNSAFE_EVAL in script-src.