Crate xilem_web

Expand description

§Xilem Web

Experimental implementation of the Xilem architecture for the 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();
}

§Minimum supported Rust Version (MSRV)

This version of Xilem Web has been verified to compile with Rust 1.86 and later.

Future versions of Xilem Web might increase the Rust version requirement. It will not be treated as a breaking change and as such can even happen with small patch releases.

Click here if compiling fails.

As time has passed, some of Xilem Web’s dependencies could have released versions with a higher Rust requirement. If you encounter a compilation issue due to a dependency and don’t want to upgrade your Rust toolchain, then you could downgrade the dependency.

# Use the problematic dependency's name and version
cargo update -p package_name --precise 0.1.1

§Community

Discussion of Xilem Web development happens in the Linebender Zulip, specifically the #xilem channel. All public content can be read without logging in.

Contributions are welcome by pull request. The Rust code of conduct applies.

§License

Licensed under the Apache License, Version 2.0 (LICENSE or http://www.apache.org/licenses/LICENSE-2.0)

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.
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
Message: Types which can be contained in a DynMessage.
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
DynMessage: A dynamically typed message for the View trait.

Crate xilem_webCopy item path