diff --git a/website/Cargo.toml b/website/Cargo.toml index ae7fc81..fefe6d1 100644 --- a/website/Cargo.toml +++ b/website/Cargo.toml @@ -9,5 +9,5 @@ version = "0.1.0" async-recursion = "1.0.5" csm = { git = "https://github.com/Pitasi/csm", version = "0.1.0" } rscx = "0.1.9" -rscx-mdx = "0.1.3" +rscx-mdx = { version = "0.1.5" } tokio = { version = "1.32.0", features = ["full"] } diff --git a/website/pages/index.md b/website/pages/index.md index d8686f7..32c8d7c 100644 --- a/website/pages/index.md +++ b/website/pages/index.md @@ -1,2 +1,91 @@ # rscx 🪶 +It looks like React (JSX) but it's executed in a macro, at build time. Your +runtime will only need to send the pre-formatted string back to the client. + +By reducing the number of memory allocations needed, we can say that rscx is +*blazingly fast*. + + +## Usage + +Import it from crates.io: + +``` +$ cargo add rscx +``` + +And, use it in your code: + +
+ +```Rust +use rscx::{component, html, props, CollectFragment}; + +#[tokio::main] +async fn main() { + let app = app().await; + println!("{}", app); +} + +// simple function returning a String +// it will call the Items() function +async fn app() -> String { + let s = "ul { color: red; }"; + html! { + + + + + + + // call a component with no props +
+ + // call a component with props and children +
+ +
+ + + } +} + +#[component] +/// mark functions with #[component] to use them as components inside html! macro +fn Section( + // you can use `builder` attributes to specify a default value (makes this prop optional) + #[builder(default = "Default title".into(), setter(into))] title: String, + #[builder(default)] children: String, +) -> String { + html! { +
+

{ title }

+ { children } +
+ } +} + +#[component] +async fn Items() -> String { + let data = load_data_async().await; + html! { + + } +} + +/// async functions can be easily used in the body of a component, as every component is an async +/// function +async fn load_data_async() -> Vec { + vec!["a".to_string(), "b".to_string(), "c".to_string()] +} +``` + +