Chapter 1: Hello Asteracea

#![allow(unused)]
fn main() {
asteracea::component! {
  HelloAsteracea()()
  <span "Hello Asteracea!">
}
}

<SPAN>Hello Asteracea!</SPAN>

#![allow(unused)]
fn main() {
use asteracea::component;
use std::cell::Cell;

fn schedule_render() { /* ... */ }

component! {
  pub Counter(
    initial: i32,
    priv step: i32,
  )(
    /// This component's class attribute value.
    class?: &'bump str,
  ) -> !Sync // visible across crate-boundaries, so use explicit `Sync`ness

  let self.value = Cell::<i32>::new(initial); // shorthand capture

  <div
    // Attribute usage is validated statically.
    // (Write its name as `str` literal to sidestep that.)
    // Anything within curlies is plain Rust.
    .class? = {class}

    // Three content nodes in this line,
    // with a shorthand bump_format call in the middle.
    "The current value is: " !(self.value()) <br>

    <button
      "+" !(self.step)

      // Correct event usage is validated statically.
      // (Write its name as `str` literal to sidestep that.)
      on bubble click = fn (self, _) { self.set_value(self.value() + self.step); } // Inline handler.
    >
  >
}

impl Counter {
  pub fn value(&self) -> i32 {
    self.value.get()
  }

  pub fn set_value(&self, value: i32) {
    self.value.set(value);
    schedule_render();
  }
}
}

<DIV class=counter-class>The current value is: 0<BR><BUTTON>+1</BUTTON></DIV>