#html #rsx #template #jsx #web

macro cercis-component

component macro for cercis

17 releases (4 stable)

1.2.0 Jun 5, 2024
1.1.0 May 27, 2024
0.3.1 May 12, 2024
0.2.3 May 5, 2024
0.1.10 May 3, 2024

#2027 in Procedural macros

Download history 1/week @ 2024-06-30 4/week @ 2024-07-21 5/week @ 2024-07-28 12/week @ 2024-08-25 6/week @ 2024-09-01 1/week @ 2024-09-08 36/week @ 2024-09-22 23/week @ 2024-09-29 17/week @ 2024-10-13

76 downloads per month
Used in 3 crates (via cercis)

MIT license

9KB
98 lines

cercis-preview

Macro for cercis package

cargo add cercis

Used only with the cercis package

Using examples

For more examples, see cercis

Empty component

all data is transferred to the component by reference

use cercis::prelude::*;

fn main() {
  let page = rsx!(div {
    MyComponent {}
  });

  // output: <div><h1>my component</h1></div>
  println!("{}", page.render())
}

#[component]
fn MyComponent() -> Element {
    rsx!(h1 { "my component" })
}

Params

Parameters are declared as normal function parameters

use cercis::prelude::*;

fn main() {
  let text = "Lorem ipsum";

  let page = rsx!(div {
    MyComponent {
        text: text
    }
  });

  // output: <div><p>Lorem ipsum</p></div>
  println!("{}", page.render())
}

#[component]
fn MyComponent<'a>(text: &'a str) -> Element {
    rsx!(p { "{text}" })
}

Option params

If the parameter is an option, then you can omit it when calling the component

use cercis::prelude::*;

fn main() {
  let text = "Lorem ipsum";

  let page = rsx!(div {
    MyComponent {}
    MyComponent {
        text: text
    }
  });

  // output: <div><p>empty</p><p>Lorem ipsum</p></div>
  println!("{}", page.render())
}

#[component]
fn MyComponent<'a>(text: Option<&'a str>) -> Element {
    let text = text.unwrap_or("empty");

    rsx!(p { "{text}" })
}

Children

the component can accept elements example: Element<'a> and children if you name the variable children: Element<'a>

all Element types are optional

use cercis::prelude::*;

fn main() {
    let text = "Lorem ipsum";

    let page = rsx!(div {
      MyComponent { span { "children" } }
      MyComponent {
          text: rsx!(p { "{text}" }),

          span { "children" }
      }
      MyComponent { text: rsx!(p { "my text" }) }
    });

    /* output(formatted):
    <div>
        <div class='container'>
            <div></div>
            <span>children</span>
        </div>
        <div class='container'>
            <div><p>Lorem ipsum</p></div>
            <span>children</span>
        </div>
        <div class='container'>
            <div><p>my text</p></div>
        </div>
    </div>
    */
    println!("{}", page.render())
}

#[component]
fn MyComponent<'a>(text: Element<'a>, children: Element<'a>) -> Element {
    rsx!(div {
        class: "container",

        div { text }
        children
    })
}

If you have any problems create issue

Dependencies

~285–740KB
~18K SLoC