Text

To output a static plain Text element in Asteracea, simply use a text literal in your component's body:

#![allow(unused)]
fn main() {
asteracea::component! {
  Text()()

  "This is text."
}
}

This is text.

The macro output is largely the same as for the Empty component, but the render method has changed:

use lignin::Node;

pub struct Text {}
impl Text {
pub fn new() -> Self {
  Self {}
}
// …
// TODO
// …
}

(Click the eye icon to view the rest of the macro output. Note that this also displays a hidden main method inserted by mdBook which isn't part of component!'s output.)

Multiple `Text` elements

Text nodes can be used as children of other nodes, for example a Multi Node:

#![allow(unused)]
fn main() {
asteracea::component! {
  TextMulti()()

  [
    "This is text."
    "This is also text."
  ]
}
}

This is text.This is also text.

use asteracea::bumpalo::Bump;
use lignin::{Node, ThreadBound};

pub struct TextMulti {}
impl TextMulti {
    pub fn new() -> Self {
        Self {}
    }
// …
pub fn render<'a, 'bump>(
    self: ::std::pin::Pin<&'a Self>,
    bump: &'bump asteracea::bumpalo::Bump,
    TextMultiRenderArgs {
        __Asteracea__phantom: _,
    }: TextMultiRenderArgs<'_, 'a, 'bump>,
) -> ::std::result::Result<
    impl TextMulti__Asteracea__AutoSafe<
        ::asteracea::lignin::Node<'bump, ::asteracea::lignin::ThreadBound>,
    >,
    ::asteracea::error::Escalation,
> {
    let this = self;
    ::std::result::Result::Ok(
        ::asteracea::lignin::Node::Multi::<'bump, _>(&*bump.alloc_try_with(
            || -> ::std::result::Result<_, ::asteracea::error::Escalation> {
                ::std::result::Result::Ok([
                    ::asteracea::lignin::auto_safety::Align::align(
                        ::asteracea::lignin::Node::Text::<'bump, _> {
                            text: "This is text.",
                            dom_binding: None,
                        }
                        .prefer_thread_safe(),
                    ),
                    ::asteracea::lignin::auto_safety::Align::align(
                        ::asteracea::lignin::Node::Text::<'bump, _> {
                            text: "This is also text.",
                            dom_binding: None,
                        }
                        .prefer_thread_safe(),
                    ),
                ])
            },
        )?)
        .prefer_thread_safe(),
    )
}
// …
}

#[allow(non_camel_case_types)]
lignin::auto_safety::AutoSafe_alias!(pub TextMulti__Asteracea__AutoSafe);

pub struct TextMultiRenderArgs<'render, 'a, 'bump> {
    __Asteracea__phantom: ::core::marker::PhantomData<(&'render (), &'a (), &'bump ())>,
}

Note that there is no space between the sentences in the generated HTML.

Asteracea gives you fairly precise control over the output, but that also means it won't make changes to the document's whitespace for you. If there's no whitespace in the literal in the input, then there won't be whitespace in the content of the output (when rendering with lignin-html or lignin-dom).

There is one important difference between the HTML and DOM output of adjacent sibling Text nodes: In HTML, it is impossible to distinguish them and browsers will parse them as single DOM node. When manipulating the DOM directly, the distinct text nodes will be preserved.

This is one of the reasons that a client-side renderer must once parse the existing DOM into a VDOM when hydrating an app. Another good reason is that user-supplied browser extensions may have made changes to the DOM tree.

(Please don't render into <body> directly! Many browser extensions insert their own scripts or overlays as child elements here.

While it's not too likely that these additions will make your app crash, the GUI may glitch and appear for example duplicated. Rendering into, for example, a <div id=app> instead is more reliable.)

Multi Nodes generated by Asteracea macros always place their contents in the bump allocation arena, even if those contents are theoretically immutable.

Asteracea [WIP]

Text

Multiple Text elements

Multiple `Text` elements