Crate autumn_plugin_svelte 

Svelte 5 islands for Autumn, in Maud + htmx pages.

The server renders an Island. The browser loader (islands.js) mounts a compiled Svelte component into it.

use autumn_plugin_svelte::{Island, MountWhen, SveltePlugin, svelte_bundle, svelte_script};
use autumn_web::assets::PluginAssets;
use autumn_web::prelude::*;

// Your Vite build output, compiled into the binary.
static ISLANDS: PluginAssets = PluginAssets::from_files(
    "app-islands",
    &[("islands.js", b"/* vite build output */")],
);

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

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

The Vite entry file registers the components:

import { mount, unmount } from "svelte";
import Counter from "./Counter.svelte";

let queue = window.autumnSvelte;
if (!Array.isArray(queue) && queue?.loader !== true) {
  queue = window.autumnSvelte = []; // an id="autumnSvelte" element can clobber it
}
queue.push({ mount, unmount, components: { Counter } });

Put user HTML in an element with data-svelte-ignore. The loader does not mount islands in it.

Limits

• The server does not render the component. The fallback is the first paint.
• You need Node to build components. You do not need Node at run time.
• Props go in an HTML attribute. Keep them small.

Structs

Island

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

SveltePlugin

Installs Svelte islands in an Autumn app.

Enums

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 SVELTE_ASSETS: /static/_plugins/svelte/.

LOADER_JS

Logical path of the island loader in SVELTE_ASSETS.

PLUGIN_NAME

The crate name. SveltePlugin with no bundles uses it as its plugin name, and every SveltePlugin declares it in its contract.

Statics

SVELTE_ASSETS

The plugin bundle. It holds only the island loader.

Functions

svelte_bundle

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

svelte_script

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