search

lambda-fairy / maud

:pencil: Compile-time HTML templates for Rust
https://maud.lambda.xyz
Apache License 2.0
1.98k stars 132 forks source link

Reflexion on my usage #407

Open olgam4 opened 6 months ago

olgam4 commented 6 months ago

I've been using maud for some time and definitely love this project! Thanks to everyone involved.

The html! macro lets us use our functions like components, like in jsx. But now, with code splitting and a SSR approach, I find myself having to drill down props from the page to every component which on first render, should or should not appear (ie: a navbar with or without logout).

What I like about maud is that I can use rust and htmx, without having much js on the page. React and the likes have solved props drilling with the Context API, but I'm wondering if I could find some way to render the html! whilst still using "components" without such a solution and without having to manage a state or something...

Do you guys have a simple neat solution to this?

olgam4 commented 6 months ago

As a side note, I've also thought about using "Component Composition", where each of my pages are defined as Components with nested children, but I wanted to know if you guys had other solutions in mind.

blah28722 commented 6 months ago

If you're already using Rust and HTMX, then you can try sprinkling in Alpine.js, which has directives like x-show which you can use to manage component properties. It handles nesting the way you might want it to do - with parent elements automatically having their properties made available to child elements.

olgam4 commented 5 months ago

This seems like a great idea! How would one use x-show to manage properties? Are you suggesting to make every prop available through an Alpine State and then use them throughout the tree?

blah28722 commented 5 months ago

I used x-data and x-init to create a toy weather report page, with x-data providing the props to the DOM element and x-init hitting an API to fetch it.

I'm not an expert at Alpine, but would recommend it as something that has been easy to pick up on a small, light project.

No maud templates in my repo yet, so hopefully you'd be willing to share some code when you get Alpine + Maud working together neatly!

https://github.com/jche1156/node-001

olgam4 commented 5 months ago

Hey!

I already had added Alpine to my project, and I'm still not sure how I could implement what you are saying.

Here is my repo link though: https://github.com/olgam4/lelu

I will look into yours. My personal problem spefically arises in my controllers (see hero page), where I define props to pass down the tree.