You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

lib.rs 2.2KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. #![deny(warnings)]
  2. use log::trace;
  3. use sauron::html::attributes::{attr, class, id, key, type_, value};
  4. use sauron::html::events::on_click;
  5. use sauron::html::{div, h1, input, text};
  6. use sauron::prelude::*;
  7. use sauron::{Cmd, Component, Node, Program};
  8. pub enum Msg {
  9. Click,
  10. }
  11. pub struct App {
  12. click_count: u32,
  13. }
  14. impl App {
  15. pub fn new() -> Self {
  16. App { click_count: 0 }
  17. }
  18. }
  19. impl Component<Msg> for App {
  20. fn view(&self) -> Node<Msg> {
  21. sauron::html::main(
  22. vec![],
  23. vec![
  24. h1(vec![], vec![text("Minimal example")]),
  25. div(
  26. vec![
  27. class("some-class"),
  28. id("some-id"),
  29. attr("data-id", 1),
  30. ],
  31. vec![
  32. input(
  33. vec![
  34. class("client"),
  35. type_("button"),
  36. value("Click me!"),
  37. key(1),
  38. on_click(|_| {
  39. trace!("Button is clicked");
  40. Msg::Click
  41. }),
  42. ],
  43. vec![],
  44. ),
  45. div(
  46. vec![],
  47. vec![text(format!(
  48. "Clicked: {}",
  49. self.click_count
  50. ))],
  51. ),
  52. input(
  53. vec![type_("text"), value(self.click_count)],
  54. vec![],
  55. ),
  56. ],
  57. ),
  58. ],
  59. )
  60. }
  61. fn update(&mut self, msg: Msg) -> Cmd<Self, Msg> {
  62. match msg {
  63. Msg::Click => self.click_count += 1,
  64. }
  65. Cmd::none()
  66. }
  67. }
  68. #[wasm_bindgen(start)]
  69. pub fn main() {
  70. console_log::init_with_level(log::Level::Trace).unwrap();
  71. console_error_panic_hook::set_once();
  72. Program::mount_to_body(App::new());
  73. }