Disclaimer: I am very new to Rust, so it is quite likely that the behaviour that I'm describing is totally expected and I'm just getting stumped by my lack of clear understanding of the language.

I'm seeing unexpected behaviour in how a button input onclick handler functions. The closure is supposed to change during each rerender (i.e. view invocation), based on application state. However, the observed behaviour seems to indicate that the onclick handler that is first set on the input is always used. This is despite the onclick being update multiple times in view. In the same update, the input value is also updated, and this is correctly reflected.

I made a small app, based off of the minimal Sauron example, which illustrates this: https://github.com/gesterhuizen/sauron-onclick

The README from that project is duplicated below:

Steps to reproduce

1. Clone this repo: https://github.com/gesterhuizen/sauron-onclick
2. Build it:

. ./bootstrap.sh
make build server

3. Open the app in the browser: http://localhost:4001/
4. Click the button twice.

Expected

1. After two button clicks, the VIEW_COUNT on the button and in the text field should be 3. This is expected because the button value and text field reflects the value that VIEW_COUNT held at the time that the view was rendered.
2. After two button clicks, the number field should be 3. This is expected because, when the button is clicked, the number field is updated with the value that VIEW_COUNT held at the time that the view was rendered. We assign a new onclick closure each time the view is rendered (https://github.com/gesterhuizen/sauron-onclick/blob/master/src/lib.rs#L40):

    fn view(&self) -> Node<Msg> {
        VIEW_COUNT.fetch_add(1, Ordering::SeqCst);
        let vc = VIEW_COUNT.load(Ordering::SeqCst);

...
                    [input(
                        [
                            r#type("button"),
                            value(format!("VIEW_COUNT: {}", vc)),
                            onclick(move |_| {
                                sauron::log(format!("Button is clicked (VIEW_COUNT = {})", vc));
                                Msg::Click(vc)
                            }),
                        ],
                        [],
                    )],

Actual

1. Expected: After two button clicks, VIEW_COUNT on the button and in the text field is 3 (as expected).
2. Unexpected: After two button clicks, the number field displays 1 (and stays in this state, no matter how many times the button is clicked). This is unexpected. It seems like first onclick handler that was set (i.e. when VIEW_COUNT held the value 1) is used even after multiple view rerenders.

Hey,

So this is a project I've been considering doing for a while in genco. But it's not really suitable as a general purpose way to generate HTML. I came across sauron and decided to instead try and incorporate it here.

This experimental (!) PR adds support for a node! macro to build nodes through html-like quasi quoting, like this:

impl Model {
    fn view_input(&self) -> Node<Msg> {
        node! {
            <input
                class="new-todo"
                id="new-todo"
                placeholder="What needs to be done?"
                value={self.value.to_string()}
                on_input={|v: InputEvent| Msg::Update(v.value.to_string())}
                on_keypress={|event: KeyboardEvent| {
                    if event.key() == "Enter" {
                        Msg::Add
                    } else {
                        Msg::Nope
                    }
                }} />
        }
    }
}

I'm opening this PR to gauge if there's any interest in adding this to the project, or whether I should release it as an external crate. I intend to fix some missing things and add more documentation to the macro. I've also ported the TodoMVC application in case you want to take it for a spin.

Literal Content

Since spans aren't stable, interior text content need to be presented as text literals in order to preserve whitespace.

Like this:

<h1>"This is a title"</h1>

Alternatively you simply use the text function as before. But a literal could potentially be optimized if we add support for &'static str to Node. This could mean a nice performance boon for certain applications since static strings do not need to be allocated.

If we ever get stable spans, a similar form of whitespace detection that I've implemented in genco could be used here as well to preserve whitespace and users could simply write:

<h1>This is a title</h1>

As long as it doesn't contain illegal rust syntax.

Loops

I've added somewhat esoteric support for loops, where each value in the block is added as a child (making this sort of a limited templating). I do something similar in genco, and I personally find it nicer than producing a Vec<Node> manually.

<ul class="todo-list">
    {for (i, e) in self.entries.iter().filter(|e| self.filter.fit(e)).enumerate() {
        view_entry(i, e)
    }}
</ul>

If you find this too odd, this can be removed.

TODO

• [x] Write more documentation and examples.
  • [x] Child interpolation.
  • [x] Child loops.
  • [x] Attribute interpolation.
• [x] Add support for value-less attributes (like <button disabled>).
• [ ] Consider adding a custom conversion trait (example name: AddToNode) which would allow for more custom conversion, like Option<T> where T: AddToNode. Something similar exists in genco.

the new closures created at view() don't get passed to the corresponding elements instead, every new node acts like the original first node, or panic on keyed nodes

i made an example code for this problem, also a video preview to illustrate it better

use {
    sauron::{
        html::text,
        prelude::*,
        Cmd, Application, Node, Program,
    },
};

struct Container {
    nodes: Vec<u32>,
    last: String
}
enum Msg {
    InsertNode,
    AddNode,
    ClickNode(u32)
}

impl Application<Msg> for Container {
    fn view(&self) -> Node<Msg> {
        let buttons = self.nodes.iter()
            .map(|&x|button([on_click(move |_|Msg::ClickNode(x))],[text(x)])).collect::<Vec<_>>();
        div([],[
            text(&self.last),
            button([on_click(|_|Msg::InsertNode)],[text("add item (broken)")]),
            button([on_click(|_|Msg::AddNode)],[text("add item (working)")]),
            div([id("buttons")],buttons)
        ])
    }
    fn update(&mut self, msg: Msg) -> Cmd<Self, Msg> {
        match msg {
            Msg::InsertNode => self.nodes.insert(0,self.nodes.len() as u32),
            Msg::AddNode => self.nodes.push(self.nodes.len() as u32),
            Msg::ClickNode(pos) => self.last = pos.to_string()
        }
        Cmd::none()
    }
}

#[wasm_bindgen(start)]
pub fn main() {
    Program::mount_to_body(
        Container{
            nodes: vec![], 
            last: String::default()
        }
    );
}

video preview only tested this for position 0 so im not sure about the rest

Hi there, I was curious about Sauron and started to try to run the examples. I realized then that the compilation is broken in several places. This PR starts to fix some of it (working around the failing warnings). I didn't finish because there were changes to Http::fetch_with_text_response_decoder which I don't understand (and also it was getting to my bedtime). Would be interested in working with someone on fixing these.

I was playing around with some of the examples and was trying to use the macro opposed to the core library functions.

When attempting to update the buttons in the fetch-data example I noticed that the disabled attribute was not working as I expected.

<input 
  class="prev_page" 
  type="button" 
  disabled={self.page <= 1}
  value="<< Prev Page"
    on_click=|_| {
    trace!("button is clicked");
    Msg::PrevPage
  }
/>

After expanding and digging into the code I found that we are just passing the attribute and value directly though. Since the HTML behavior is only check if the attribute is present this makes sense.

It would be nice to see the macro have the same behavior as disabled() from the core library.

Created pull request #43

Compiling the minimal macro syntax example fails if Cargo.toml has sauron = "0.32.4", but succeeds when using the relative path (sauron = { path = "../../"}) or the tagged version directly from Git (sauron = { git = "https://github.com/ivanceras/sauron", tag = "0.32.4" }).

Build error:

node! {
    <main>
        <h1>"Minimal example"</h1>
        <div class="some-class" id="some-id" {attr("data-id", 1)}>

    </main>
}
^ expected struct `sauron::Text`, found struct `std::string::String`

I narrowed this down to the string literal in the h1 tag: node!(<h1>"example"</h1>). Using the full node!(<h1>{text("example")}</h1>) works with no problem.

I haven't been able to find a root cause, but I think it has to do with the latest sauron-node-macro version (0.32.0) being released before the fixes in e27c30bc2296a4c139adcb11bdd8a88f61b33f8f. If this is true then releasing a new version with bumped versions should resolve the problem.

Running one of the examples in Safari leads to an immediate ReferenceError: Can't find variable: wasm_bindgen in the console. If you then immediately type wasm_bindgen into the console REPL, it's defined. You can then copy and paste the loading code wasm_bindgen('pkg/futuristic_ui_bg.wasm').catch(console.error); and the app runs perfectly.

My guess is that Safari is async loading the first script (which defines wasm_bindgen) and running the second script (which calls it) before the first one is parsed.

The solution may be to do a dynamic import(...).then(...) chain.

Related to #3, for performance reasons sauron will not recreate a node when it determines via diffing that it can update it instead. In particular it cannot detect whether two closures are equal or not for obvious reasons. However, this leads to strange behavior where event handlers end up on the wrong nodes since the existing nodes were reused instead of being recreated. For an example see https://github.com/cryslith/sauron-reorder. (Use the browser console to see which messages are delivered.)

One way to handle this could be to use a special attribute like the suggested data-disambiguate to allow specifying to the node diff algorithm that certain nodes should be recreated when data changes. That is, if data-disambiguate differs between the old version and the new version of a node, then the node must be recreated rather than reused.

Hey there, nice job with the framework!

Currently I am learning Rust by doing a small API for my own hobby project. Once finished I was planning to try to write some frontend with Rust as well. I do have some prior experience with Elm and React stacks and writing production apps with both. So using similar architecture but in Rust feels natural.

While looking around I've discovered yew and seed, and was thinking to use seed for the job. However now I found out your framework and would love to know more about it. How would you compare it to seed personally?

Svg elements is not showing when used in browser. This would be rendered correctly when used server-side.

  <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <pattern id="Pattern" x="0" y="0" width=".25" height=".25">
        <rect x="0" y="0" width="50" height="50" fill="skyblue"/>
      </pattern>
    </defs>

    <rect fill="url(#Pattern)" stroke="black" width="200" height="200"/>
  </svg>

I'm sure that Sauron is fast, but I think the benchmarks are highly misleading. For example, the Vue version (0.10) used in "benchmark 2" is from 2014. I think it's very important to not misrepresent other frameworks if performance is one of the main selling points of Sauron.

The following example adds 4 items, but at the end, we end up with 7 items.

use sauron::prelude::*;
use wasm_bindgen::prelude::*;

#[wasm_bindgen(start)]
pub fn start() {
  console_error_panic_hook::set_once();

  let p = Program::mount_to_body(App::default());

  p.dispatch_with_delay(Msg::AddItem, 1000);
  p.dispatch_with_delay(Msg::AddItem, 2000);
  p.dispatch_with_delay(Msg::AddItem, 3000);
  p.dispatch_with_delay(Msg::AddItem, 4000);
}

#[derive(Default)]
struct App {
  items: Vec<Node<Msg>>,
}

impl Application<Msg> for App {
  fn update(&mut self, msg: Msg) -> Cmd<Self, Msg>
  where
    Self: Sized + 'static,
  {
    match msg {
      Msg::AddItem => self
        .items
        .push(node! { <div>{text(self.items.len() + 1)}</div> }),
    }

    Cmd::none()
  }

  fn view(&self) -> Node<Msg> {
    node! {
      <div>
        {fragment(self.items.iter().cloned().chain([node! {<span />}]))}
      </div>
    }
  }

  fn style(&self) -> String {
    Default::default()
  }
}

enum Msg {
  AddItem,
}

Now, for the two panics that are different than the ones discussed in #72, we just need to modify the view method to the following:

    node! {
      <div>
        {fragment(self.items.iter().cloned())}
      </div>
    }

In other words, starting from an empty fragment. The panic is:

panicked at 'internal error: entered unreachable code: Getting here means we didn't find the element of next node that we are supposed to patch, patch_path: TreePath { path: [0] }',

And finally, removing the surrounding <div /> gives us:

    fragment(self.items.iter().cloned())

The above codes results in:

panicked at 'must replace node: JsValue(TypeError: getObject(...).replaceWith is not a function

I'm going to be diving into the source and trying to find what's going on.

Currently, Sauron is panicking quite a bit, especcially when toggling between children which exist, and children which do not.

Below is a minimal reproducible example.

use sauron::prelude::*;
use wasm_bindgen::prelude::*;

#[wasm_bindgen(start)]
pub fn start() {
  console_error_panic_hook::set_once();

  let p = Program::mount_to_body(App::default());

  p.dispatch_with_delay(Msg::ToggleShow, 1000);
  p.dispatch_with_delay(Msg::ToggleShow, 3000);
}

#[derive(Default)]
struct App {
  show: bool,
}

impl Application<Msg> for App {
  fn update(&mut self, msg: Msg) -> Cmd<Self, Msg>
  where
    Self: Sized + 'static,
  {
    match msg {
      Msg::ToggleShow => self.show = !self.show,
    }

    Cmd::none()
  }

  fn view(&self) -> Node<Msg> {
    if self.show {
      node! { <h1>"Now you see me..."</h1> }
    } else {
      node! {}
    }
  }

  fn style(&self) -> String {
    Default::default()
  }
}

enum Msg {
  ToggleShow,
}

Nodte that the above also panics when substituting node! {} for fragment([]). The panic that is occurring in this case is:

panicked at 'Node list must have already been unrolled'

@ivanceras I thought it would be nice to see how sauron compares to other framworks.

So I started an benchmark implementation here: https://github.com/krausest/js-framework-benchmark/pull/1064

Feel free to comment on this PR draft before I ask for a PR :)

Hi - if I type quickly into a single field in the windows-tab-rows demo then it immediately lags:

Is this a restriction of the JS->WASM->JS bridge, or is this unexpected?

Thanks!