Seed-UI?

[rebo]

trafficstars

Now that comprehensive styling is possible ( Seed Style ). I thought I would see what abstractions could be sensibly built on top.

One thing I really love about Seed is its expressive macro dsl. I like that everything is 'just rust' with macros hiding away boilerplate.

To this effect I have been experimenting with extending the macro syntax in order to create a UI crate.

I.e. the idea is that this wouldn't be part of core seed itself but rather to show developers how easy it is to create reusable UI component libraries.

The above image is an example of a card element

card![
    media![
        img![attrs! {At::Src => "public/dark.jpg"}]
    ],
    card_title![
        h1!["Dark"],
    ],
    subtitle![
        h2!["Season 3 - 26th June 2020"]
    ],
    description![
        r#"Throughout the series, Dark explores the existential implications of time 
        and its effects upon human nature. Dark is the first ever German language Netflix 
        original series. ("#,
        votes,
        " votes) ",
    ],
    actions![
        button!["Up", votes.on_click(|v| *v += 1)],
        button!["Down", votes.on_click(|v| *v -= 1)],
    ]
]

The macro system is flexible, for instance optional tags can be omitted:

card![
    card_title![h1!["Dark"],],
    subtitle![h2!["Season 3 - 26th June 2020"]],
]

or some included as you see fit:

card![
    card_title![
        h1!["Dark"],
    ],
    subtitle![
        h2!["Season 3 - 26th June 2020"]
    ],
    actions![
        button!["Up", votes.on_click(|v| *v += 1)],
        button!["Down", votes.on_click(|v| *v -= 1)],
    ]
]

etc.

As you can see very little is needed on behalf of a consumer of a component, of course values in a component can be exposed as themeable etc. UI elements could be fully responsive etc.

Because it's 'just-rust' every element could be adaptable and adjustable etc.

Generating the card! etc macros would be as simple as tagging a view function with something like

#[create_view_macro]
fn card(args) {
    ...
}

A proc macro would do all the rest, i.e. create all the sub-card-macros to make it 'just work'

Anyway let me know what you think.

[MartinKavik]

I would choose another name, because I imagine Seed UI more like - elm-ui - a layer above Seed Style and Seed element macros, that would focus mainly on layout and then we can add common elements into it as building blocks for user components. It should be super-typed and autocomplete-friendly. I plan to experiment with it once Seeder is ready and probably Seed Style and Hooks are integrated into Seed.

However I think your library would be a good alternative for CSS frameworks like Bootstrap, Bulma, etc. and also that procedural macro would help to write "wrappers" for these CSS frameworks. I've written a small part of typed Bootstrap library for Seed but I was constantly fighting with inheritance and too many combinations of elements and their attributes and children mixed with custom ones => I think your library / macro system would be more suitable for such cases.

Another case where your "element macro generator" can be useful are custom elements. I can imagine that functions that returns custom elements would be transformed to code_block![..], feather_icon!, etc. Custom element names have to contain at least one -; it means that all generated element macros would have at least one _, so there shouldn't be any name conflicts or readability problems in view functions.

---

OT: @rebo Could you change urls for Seed Style and Hooks to something better? E.g. https://sleepy-galileo-cdf13e.netlify.app/ => https://seed-style.netlify.app/? And please fix Hooks tutorial once you have time - I would like to add link to both websites into official seed-rs.org docs.

[rebo]

Makes sense can definitely change the name , we already have typed layout working in Seed Style so I will compare its features to elm UI to see what's missing.

And yes I will work on both of those netlify test sites.

[MartinKavik]

we already have typed layout working in Seed Style so I will compare its features to elm UI to see what's missing

Seed UI has been my goal and motivation when I started to work on Seed - however it's possible you've already created it while writing Seed Style (I haven't studied it enough yet). Take it more as my future personal experiment than a holy grail and a big red dot on the Seed's roadmap.