Crate xilem_web 

This is a prototype implementation of the Xilem architecture (through Xilem Core) using DOM elements as Xilem elements (unfortunately the two concepts have the same name).

Quickstart

The easiest way to start, is to use Trunk within some of the examples (see the web_examples/ directory). Run trunk serve, then navigate the browser to the link provided (usually http://localhost:8080).

Example

A minimal example to run an application with xilem_web:

use xilem_web::{
    document_body,
    elements::html::{button, div, p},
    interfaces::{Element as _, HtmlDivElement},
    App,
};

fn app_logic(clicks: &mut u32) -> impl HtmlDivElement<u32> + use<> {
    div((
        button(format!("clicked {clicks} times")).on_click(|clicks: &mut u32, _event| *clicks += 1),
        (*clicks >= 5).then_some(p("Huzzah, clicked at least 5 times")),
    ))
}

pub fn main() {
    let clicks = 0;
    App::new(document_body(), clicks, app_logic).run();
}

Re-exports

pub use xilem_core as core;

Modules

concurrent

Async views, allowing concurrent operations, like fetching data from a server

diff

Basic utility functions for diffing when rebuilding the views with View::rebuild

elements

Basic builder functions to create DOM elements, such as html::div

events

interfaces

Opinionated extension traits roughly resembling their equivalently named DOM interfaces.

modifiers

This module contains DOM element modifiers, e.g. to add attributes/classes/styles.

props

This module contains the state (called props in this crate) of the virtual DOM.

svg

Contains opinionated views such as kurbo shapes which can be used in an svg context

Macros

overwrite_bool_modifier

A macro to create a boolean overwrite modifier.

overwrite_bool_modifier_view

A macro to create a boolean overwrite modifier view for a modifier that’s in the parent module with the same name.

Structs

AfterBuild

Invokes the callback after the inner element DomView was created. See after_build for more details.

AfterRebuild

Invokes the callback after the inner element DomView<State> See after_rebuild for more details.

App

The type responsible for running your app.

BeforeTeardown

Invokes the callback before the inner element DomView (and its underlying DOM node) is destroyed. See before_teardown for more details.

DynMessage

A simple dynamically typed message for the View trait.

MessageThunk

A thunk to send messages to the views, it’s being used for example in event callbacks

Pod

A container, which holds the actual DOM node, and associated props, such as attributes or classes.

PodFlags

General flags describing the current state of the element (in hydration, was created, needs update (in general for optimization))

PodMut

The mutable representation of Pod.

Pointer

A view that allows stateful handling of PointerEvents with PointerMsg

PointerDetails

Details of a pointer event.

Templated

This view creates an internally cached deep-clone of the underlying DOM node. When the inner view is created again, this will be done more efficiently.

ViewCtx

The View Context which is used for all DomViews

Enums

AttributeValue

Representation of an attribute value.

PointerMsg

A message representing a pointer event.

Constants

HTML_NS

The HTML namespace

MATHML_NS

The MathML namespace

SVG_NS

The SVG namespace

Traits

Action

Implement this trait for types you want to use as actions.

AnyNode

A trait used for type erasure of DomNodes It is e.g. used in AnyPod

DomFragment

An ordered sequence of views, or sometimes also called fragment, it’s used for 0..N DomViews. See ViewSequence for more technical details.

DomNode

A trait to represent DOM nodes, which can optionally have associated props that are applied while building/rebuilding the views

DomView

The central View derived trait to represent DOM nodes in xilem_web, it’s the base for all Views in xilem_web

FromWithContext

IntoAttributeValue

Types implementing this trait can be used as value in e.g. Element::attr

OptionalAction

Trait that allows callbacks to be polymorphic on return type (Action, Option<Action> or ()). An implementation detail.

Functions

after_build

Invokes the callback after the inner element DomView was created. The callback has a reference to the raw DOM node as its only parameter.

after_rebuild

Invokes the callback after the inner element DomView<State> was rebuild, which usually happens after anything has changed in the State .

before_teardown

Invokes the callback before the inner element DomView (and its underlying DOM node) is destroyed.

document

Helper to get the HTML document

document_body

Helper to get the HTML document body element

get_element_by_id

Helper to get a DOM element by id

input_event_target_value

Helper to get the value from an HTML input element from a given event.

templated

This view creates an internally cached deep-clone of the underlying DOM node.

Type Aliases

AnyDomView

A view which can have any DomView type, see AnyView for more details.

AnyPod

Type-erased Pod, it’s used for example as intermediate representation for children of a DOM node