Replies: 5 comments
-
That was @sayanarijit in #72.
There's a few things we've experimented with in https://github.com/ratatui-org/ratatui-macros (for line, span, text, as well as constraints / layout). I suspect we'll probably bring the line/span/text stuff into ratatui core at some point in the next few releases. Do you have any ideas about what an RSX-based approach might look from a syntax perspective? |
Beta Was this translation helpful? Give feedback.
-
Good job, @sayanarijit!
Yes, I saw those already (which I should have mentioned), but unfortunately, I believe this isn't going far enough.
Sure. Let's take the following example from the README: use ratatui::{prelude::*, widgets::*};
fn ui(frame: &mut Frame) {
let main_layout = Layout::new(
Direction::Vertical,
[
Constraint::Length(1),
Constraint::Min(0),
Constraint::Length(1),
],
)
.split(frame.size());
frame.render_widget(
Block::new().borders(Borders::TOP).title("Title Bar"),
main_layout[0],
);
frame.render_widget(
Block::new().borders(Borders::TOP).title("Status Bar"),
main_layout[2],
);
let inner_layout = Layout::new(
Direction::Horizontal,
[Constraint::Percentage(50), Constraint::Percentage(50)],
)
.split(main_layout[1]);
frame.render_widget(
Block::bordered().title("Left"),
inner_layout[0],
);
frame.render_widget(
Block::bordered().title("Right"),
inner_layout[1],
);
} With JSX it could look like this: (Please note, that I haven't used use ratatui::{prelude::*, widgets::*};
fn ui(frame: &mut Frame) {
rsx! {
<VLayout split=frame.size()>
<Block title="Title Bar" border:top length=1><Block>
<HLayout min=0 split:available>
<Block title="Left" border></Block>
<Block title="Right" border></Block>
</HLayout>
<Block title="Status Bar" length=1><Block>
</VLayout>
}
} And again with some comments: use ratatui::{prelude::*, widgets::*};
fn ui(frame: &mut Frame) {
rsx! {
<VLayout split=frame.size()>
// Or `<VerticalLayout>` but I like short names like `<VLayout>` more
<Block title="Title Bar" border:top length=1>
// Note: `border:top` is a boolean property and a shorthand for
// `border:top=true`. The `:` is just for namespacing (so could
// also be `border_top`).
// Note: the `main_layout[0]` is here defined by the order of the RSX elements
<Block>
<HLayout min=0 split:available>
// Note: `split:available` is the replacement for `.split(main_layout[1])`.
// The meaning is "split the available space". Not sure if that makes sense.
// There most-likely also should be a `split=whatever` attribute, to specify
// custom values.
<Block title="Left" border></Block>
<Block title="Right" border></Block>
// Note: `border`, of course, also could be `bordered`. For consistency I'd
// prefer `border`, however.
</HLayout>
<Block title="Status Bar" length=1><Block>
</VLayout>
}
} Much nicer, isn't it..? To be honest, I'm not a big fan of macros and HTML-like syntax - however, I'm even less a fan of writing a lot of unnecessary boilerplate code. I seriously think, adding RSX would take I've been following (Another issue is, that basic building blocks are missing or require importing third-party libraries, like for example input widgets. I might open another issue for this, at some point) PS: I've added most of the above to my initial post. |
Beta Was this translation helpful? Give feedback.
-
I'd imagine this is probably possible to write outside of Ratatui core. There's nothing preventing you from adding something like this on top of the existing system afaik, maintenance burden is one thing that would steer me personally away from it in the short term (i.e. I'd imagine this would be a lot of code, which would be difficult to keep up to date with any changes to the core internals - doubling the work / tests / etc.) I'd definitely encourage you to experiment with this - you may end up with something pretty neat for building TUIs. |
Beta Was this translation helpful? Give feedback.
-
Alright, that is too bad. Feel free to close this issue then. I'm not closing it myself in case you are interested in hearing further feedback from other people. |
Beta Was this translation helpful? Give feedback.
-
I'm going to convert this to a discussion rather than an issue. You might also consider posting it on the new (launched this week) Ratatui forum to see if anyone is interested in working on this. |
Beta Was this translation helpful? Give feedback.
-
Problem
Hi,
I'm wondering if it would be possible to add an RSX-based interface (i.e., an HTML-like macro) to reduce boilerplate code.
Solution
In case you are not aware of it, there is the
rstml
crate which could do most of the heavy lifting (rstml
is a fork ofsyn-rsx
whose maintainer unfortunately passed away).Alternatives
None, just continuing to write a lot of boilerplate code.
Additional context
Here is a list of the features that
rstml
offers and how it would look like.rstml
is used byleptos
so also should be good forratatui
.PS: Whoever came up with the name
ratatui
is a genius..! :DEdit:
Here is how RSX could improve the ergonomics of
ratatui
(taken from my comment below):Let's take the following example from the README:
With JSX it could look like this:
(Please note, that I haven't used
ratatui
yet, so the following might not make complete sense. However, something similar to it seems possible)And again with some comments:
Much nicer, isn't it..?
To be honest, I'm not a big fan of macros and HTML-like syntax - however, I'm even less a fan of writing a lot of unnecessary boilerplate code.
I seriously think, adding RSX would take
ratatui
to the next level.I've been following
tui.rs
/ratatui
already many years, but I have never used it - mostly because it seems incredibly unergonomic to use (compared to how ergonomic it could be). It just always seemed easier to build a simple web application (e.g., for personal tools), however, I really like the idea of TUI applications.Beta Was this translation helpful? Give feedback.
All reactions