Struct Island 

pub struct Island { /* private fields */ }

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

It renders as:

<div data-react-island="Counter" data-react-props="{...}"
     data-react-mount="visible" id="..." class="...">fallback</div>

The loader replaces the fallback with the component. Without JavaScript, or after an error, the fallback stays.

use autumn_plugin_react::{Island, MountWhen};
use maud::{Render, html};

let island = Island::new("Counter")
    .props(&serde_json::json!({ "start": 3 }))?
    .mount_when(MountWhen::Visible)
    .fallback(html! { p { "Count: 3" } });
let html = island.render().into_string();
assert!(html.starts_with(r#"<div data-react-island="Counter""#));

Props go in an HTML attribute. Keep them small. The component name, the id and the class are trusted input from your code.

Implementations

impl Island

pub fn new(name: impl Into<String>) -> Self

Makes an island for the component that an app bundle registers as name.

pub fn name(&self) -> &str

The component name.

pub fn props<T: Serialize + ?Sized>(self, props: &T) -> Result<Self, PropsError>

Sets the component props. The value must serialize to a JSON object.

Errors

• PropsError::Serialize when serde_json cannot serialize the value (for example, a map with tuple keys).
• PropsError::NotAnObject when the JSON is not an object.
• PropsError::ProtoKey when the object has a __proto__ key.

serde_json writes a non-finite float (NaN, infinity) as null.

pub const fn mount_when(self, when: MountWhen) -> Self

Sets when the loader mounts the island. The default is MountWhen::Load.

pub fn fallback(self, fallback: Markup) -> Self

Sets the content to show before the mount, without JavaScript, and after an error.

pub fn id(self, id: impl Into<String>) -> Self

Sets the id attribute.

pub fn class(self, class: impl Into<String>) -> Self

Sets the class attribute.

pub fn attr( self, name: impl Into<String>, value: impl Into<String>, ) -> Result<Self, AttrError>

Adds an attribute, for example role, aria-label or hx-preserve. A second call with the same name replaces the value.

Errors

• AttrError::InvalidName for a name that is not a plain attribute name.
• AttrError::Reserved for id, class (use Island::id and Island::class), data-react-* (the loader owns them) and on* event handlers (the default CSP blocks them).

pub const fn inline(self) -> Self

Renders a <span>, not a <div>. Use it for an island inside a <p>, a <button> or another element that holds only inline content.

Trait Implementations

impl Clone for Island

fn clone(&self) -> Self

Returns a duplicate of the value.

fn clone_from(&mut self, source: &Self)

Performs copy-assignment from source.

impl Debug for Island

fn fmt(&self, f: &mut Formatter<'_>) -> Result

Formats the value using the given formatter.

impl Render for Island

fn render(&self) -> Markup

Renders self as a block of Markup.

fn render_to(&self, buffer: &mut String)

Appends a representation of self to the given buffer.