Use react! macro to improve developer experience

[JonasCir]

Hi,
thank you for creating this amazing project!

While reading through the book and trying out Leptos, I found myself struggling with the move || scheme being used to create reactive functions. Given that there is a dedicated chapter on this matter in the book, it appears that this is a more widespread issue.

Subjectively speaking, for me this is caused by the following two reasons:

1. when reading move || in app code, I have to constantly remind me that this is used as reactive function in the framework, not as "general" Rust function (I am conditioned to use move only for stuff like passing lambdas to other processor functions as argument etc.)
2. it visually clutters the code, especially in the view! macro (citing from the dedicated chapter: "It sometimes looks a little silly")

While following the book, I decided to create this small macro:

#[macro_export]
macro_rules! react {
    ($($tt:tt)*) => {
        move || {$($tt)*} // this macro takes any tokens and just pastes them to a function body
    };
}
// syntactic sugar only -> NOTHING CHANGES!

Using this macro improved my developer experience in such a significant way that I decided to share it here. This the example from the mentioned chapter rewritten with the react! macro:

// a signal holds a value, and can be updated
let (count, set_count) = signal(0);

// a derived signal is a function that accesses other signals
let double_count = react!{count.get() * 2};
let count_is_odd = react!{count.get() & 1 == 1};
let text = react!{if count_is_odd() {"odd"} else {"even"}};

// an effect automatically tracks the signals it depends on
// and reruns when they change
Effect::new(move |_| {
    logging::log!("text = {}", text());
});

view! {
    <p>{react!{text().to_uppercase()}}</p>
}

As another example, I rewrote the CodeSandbox Section example from the book's Control Flow chapter in this gist.

This immediately allows any developer to determine where the reactivity in the view happens and allows tell reactive from non-reactive move || usage apart.

Adding this macro to Leptos would - in my opinion - have the following pros:

• better DX, could help with the "move everywhere" clutter
• highlights reactive parts of the application visually
• fully backwards compatible
  • nothing changes from a type system standpoint
  • free choice to use react! or stick with move ||

Cons:

• Not strictly necessary
• I do not know the compile time hit from using more macros extensively

Is this something you would consider adding to Leptos?

[gbj]

It seems like this made it easier for you to use the framework. That's great!

Is this something you would consider adding to Leptos?

Nope!

Here are a few reasons:

1. It doesn't save any characters (I think it's actually longer?)
2. It makes something appear like it's magical/macro-based, rather than based on plain Rust traits and types (a closure/function)
3. It can be trivially implemented by a user in five lines, as you've shown, so it doesn't really need to be in the library
4. It obscures the mental model of "functions are reactive things, reactive things are functions"

If you think it's a helpful addition to the syntax, I'd recommend publishing it as a crate. Happy to add it to the awesome-leptos list but not to the core.

[JonasCir]

Hi,
appreciate the fast and honest response! Might be my chance to publish my first crate and try this out for fun then 😃