Skip to content

Replace remaining Element::<> builders with html! macro #11

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dannywillems merged 1 commit into from
Feb 8, 2026
Merged

Replace remaining Element::<> builders with html! macro #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 20 additions & 31 deletions crates/oxide-admin/examples/blog_admin.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,10 +37,9 @@ use oxide_sql_core::builder::{col, Delete, Insert, Select, Update};
use oxide_sql_derive::Table;

use ironhtml::html;
use ironhtml::typed::{Document, Element};
use ironhtml::typed::Document;
use ironhtml_elements::{
Body, Div, Form, Head, Html, Li, Main, Meta, Nav, Option_, Script, Select as SelectEl, Td, Th,
Title, Tr, Ul,
Body, Div, Form, Head, Html, Li, Main, Meta, Option_, Script, Select as SelectEl, Td, Title, Ul,
};

// ============================================================================
Expand Down Expand Up @@ -754,7 +753,7 @@ async fn delete_comment_handler(req: Request, state: AppState) -> Response {
};
let confirm_btn_r = confirm_btn.render();
let cancel_link_r = cancel_link.render();
let content = Element::<Div>::new()
let content = (html! { div })
.raw(heading.render())
.child::<Div, _>(|d| {
d.class("delete-confirmation max-w-2xl")
Expand Down Expand Up @@ -927,7 +926,7 @@ async fn delete_tag_handler(req: Request, state: AppState) -> Response {
};
let confirm_btn_r = confirm_btn.render();
let cancel_link_r = cancel_link.render();
let content = Element::<Div>::new()
let content = (html! { div })
.raw(heading.render())
.child::<Div, _>(|d| {
d.class("delete-confirmation max-w-2xl")
Expand Down Expand Up @@ -1043,8 +1042,7 @@ fn render_sidebar() -> String {
let logout_r = logout_link.render();
let hr = html! { hr.class("my-6 border-gray-600") };

Element::<Nav>::new()
.class("w-64 min-h-screen bg-gray-800 text-gray-300 flex-shrink-0")
(html! { nav.class("w-64 min-h-screen bg-gray-800 text-gray-300 flex-shrink-0") })
.child::<Div, _>(|d| {
d.class("sticky top-0 p-4")
.raw(heading.render())
Expand Down Expand Up @@ -1103,8 +1101,7 @@ fn render_login_page(error: Option<&str>) -> String {
let password_input_r = password_input.render();
let submit_btn_r = submit_btn.render();

let content = Element::<Div>::new()
.class("min-h-screen flex items-center justify-center")
let content = (html! { div.class("min-h-screen flex items-center justify-center") })
.child::<Div, _>(|d| {
d.class("w-full max-w-md").child::<Div, _>(|d| {
d.class("bg-white rounded-lg shadow-sm border border-gray-200")
Expand Down Expand Up @@ -1196,7 +1193,7 @@ fn render_dashboard(store: &DataStore) -> String {
let heading = html! {
h1.class("text-2xl font-semibold text-gray-900 mb-6") { "Dashboard" }
};
let content = Element::<Div>::new()
let content = (html! { div })
.raw(heading.render())
.child::<Div, _>(|d| d.class("grid grid-cols-1 md:grid-cols-3 gap-6").raw(&cards))
.render();
Expand Down Expand Up @@ -1254,8 +1251,7 @@ fn render_post_list(
let edit_link_r = edit_link.render();
let del_link_r = del_link.render();
let created_ref = &p.created_at;
Element::<Tr>::new()
.class("border-b border-gray-100 hover:bg-gray-50")
(html! { tr.class("border-b border-gray-100 hover:bg-gray-50") })
.child::<Td, _>(|td| td.class("px-4 py-3").raw(&checkbox_r))
.child::<Td, _>(|td| td.class("px-4 py-3 text-gray-600").text(&id_str))
.child::<Td, _>(|td| td.class("px-4 py-3").raw(&title_link_r))
Expand Down Expand Up @@ -1283,7 +1279,7 @@ fn render_post_list(
let add_btn = html! {
a.href("/admin/posts/add/").class("px-4 py-2 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 transition-colors duration-200") { "+ Add Post" }
};
let content = Element::<Div>::new()
let content = (html! { div })
.child::<Div, _>(|d| {
d.class("flex justify-between items-center mb-6")
.raw(page_heading.render())
Expand Down Expand Up @@ -1355,14 +1351,12 @@ fn render_action_form_wrapper(
let sort_link = html! {
a.href(#href_val).class("hover:text-gray-900") { #h_val }
};
Element::<Th>::new()
.class(th_class)
(html! { th.class(#th_class) })
.bool_attr("data-sortable")
.raw(sort_link.render())
.render_to(&mut header_cells);
} else {
Element::<Th>::new()
.class(th_class)
(html! { th.class(#th_class) })
.text(*h)
.render_to(&mut header_cells);
}
Expand All @@ -1381,9 +1375,7 @@ fn render_action_form_wrapper(
};
let apply_btn_r = apply_btn.render();

Element::<Form>::new()
.attr("method", "POST")
.attr("action", action_url)
(html! { form.method("POST").action(#action_url) })
.child::<Div, _>(|d| {
d.class("bg-white rounded-lg shadow-sm border border-gray-200")
.child::<Div, _>(|d| {
Expand Down Expand Up @@ -1425,8 +1417,7 @@ fn render_pagination_nav(page: usize, total_pages: usize) -> String {
};
link.render_to(&mut links);
}
Element::<Nav>::new()
.class("mt-6 flex justify-center")
(html! { nav.class("mt-6 flex justify-center") })
.child::<Div, _>(|d| d.class("flex gap-1").raw(&links))
.render()
}
Expand Down Expand Up @@ -1501,7 +1492,7 @@ fn render_post_form(post: Option<&Post>, error: Option<&str>) -> String {
let content_textarea_r = content_textarea.render();
let status_label_r = status_label.render();

let content = Element::<Div>::new()
let content = (html! { div })
.raw(heading.render())
.raw(&error_html)
.child::<Form, _>(|f| {
Expand Down Expand Up @@ -1610,7 +1601,7 @@ fn render_delete_page(
};
let confirm_btn_r = confirm_btn.render();
let cancel_link_r = cancel_link.render();
let content = Element::<Div>::new()
let content = (html! { div })
.raw(heading.render())
.child::<Div, _>(|d| {
d.class("delete-confirmation max-w-2xl")
Expand Down Expand Up @@ -1649,7 +1640,7 @@ fn render_list_page(
a.href(#add_url).class("px-4 py-2 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 transition-colors duration-200") { #add_label }
};

let content = Element::<Div>::new()
let content = (html! { div })
.child::<Div, _>(|d| {
d.class("flex justify-between items-center mb-6")
.raw(heading.render())
Expand Down Expand Up @@ -1707,8 +1698,7 @@ fn render_comment_list(comments: &[&Comment], search: &str) -> String {
let del_link_r = del_link.render();
let author_ref = &c.author;
let created_ref = &c.created_at;
Element::<Tr>::new()
.class("border-b border-gray-100 hover:bg-gray-50")
(html! { tr.class("border-b border-gray-100 hover:bg-gray-50") })
.child::<Td, _>(|td| td.class("px-4 py-3").raw(&checkbox_r))
.child::<Td, _>(|td| td.class("px-4 py-3").raw(&id_link_r))
.child::<Td, _>(|td| td.class("px-4 py-3 text-gray-600").text(&post_id_str))
Expand Down Expand Up @@ -1790,7 +1780,7 @@ fn render_comment_form(comment: Option<&Comment>, error: Option<&str>) -> String
let content_label_r = content_label.render();
let content_textarea_r = content_textarea.render();

let content = Element::<Div>::new()
let content = (html! { div })
.raw(heading.render())
.raw(&error_html)
.child::<Form, _>(|f| {
Expand Down Expand Up @@ -1842,8 +1832,7 @@ fn render_tag_list(tags: &[&Tag], search: &str) -> String {
let edit_link_r = edit_link.render();
let del_link_r = del_link.render();
let slug_ref = &t.slug;
Element::<Tr>::new()
.class("border-b border-gray-100 hover:bg-gray-50")
(html! { tr.class("border-b border-gray-100 hover:bg-gray-50") })
.child::<Td, _>(|td| td.class("px-4 py-3").raw(&checkbox_r))
.child::<Td, _>(|td| td.class("px-4 py-3 text-gray-600").text(&id_str))
.child::<Td, _>(|td| td.class("px-4 py-3").raw(&name_link_r))
Expand Down Expand Up @@ -1909,7 +1898,7 @@ fn render_tag_form(tag: Option<&Tag>, error: Option<&str>) -> String {
let slug_label_r = slug_label.render();
let slug_input_r = slug_input.render();

let content = Element::<Div>::new()
let content = (html! { div })
.raw(heading.render())
.raw(&error_html)
.child::<Form, _>(|f| {
Expand Down
22 changes: 7 additions & 15 deletions crates/oxide-admin/src/templates/detail.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

use ironhtml::html;
use ironhtml::typed::Element;
use ironhtml_elements::{Div, Form, Li, Tbody, Td, Th, Tr, P};
use ironhtml_elements::{Div, Li, Tbody, Td, Th, Tr, P};

/// Context for rendering a detail/edit view.
#[derive(Debug, Clone)]
Expand Down Expand Up @@ -109,10 +109,8 @@ pub fn render_detail_view(ctx: &DetailViewContext) -> String {
}
};

Element::<Form>::new()
.attr("method", "post")
html! { form.method("post").enctype("multipart/form-data") }
.attr("action", &ctx.action_url)
.attr("enctype", "multipart/form-data")
.child::<Div, _>(|d| d.raw(&errors_html))
.child::<Div, _>(|d| {
d.class("row")
Expand Down Expand Up @@ -184,9 +182,7 @@ fn render_errors(errors: &[String]) -> String {
strong { "Please correct the errors below:" }
};

Element::<Div>::new()
.class("alert alert-danger")
.attr("role", "alert")
html! { div.class("alert alert-danger").role("alert") }
.raw(heading.render())
.child::<ironhtml_elements::Ul, _>(|ul| {
ul.class("mb-0 mt-2")
Expand All @@ -197,8 +193,7 @@ fn render_errors(errors: &[String]) -> String {

fn render_fieldsets(fieldsets: &[Fieldset], form_html: &str) -> String {
if fieldsets.is_empty() {
return Element::<Div>::new()
.class("card mb-4")
return html! { div.class("card mb-4") }
.child::<Div, _>(|d| d.class("card-body").raw(form_html))
.render();
}
Expand Down Expand Up @@ -230,8 +225,7 @@ fn render_fieldsets(fieldsets: &[Fieldset], form_html: &str) -> String {
i.class("bi bi-chevron-down")
}
};
Element::<Div>::new()
.class("card mb-4")
html! { div.class("card mb-4") }
.child::<Div, _>(|d| {
d.class(
"card-header d-flex \
Expand All @@ -253,8 +247,7 @@ fn render_fieldsets(fieldsets: &[Fieldset], form_html: &str) -> String {
})
})
} else {
Element::<Div>::new()
.class("card mb-4")
html! { div.class("card mb-4") }
.when(fieldset.name.is_some(), |d| {
d.child::<Div, _>(|d| {
d.class("card-header")
Expand Down Expand Up @@ -303,8 +296,7 @@ fn render_inlines(inlines: &[InlineFormset]) -> String {
}
};

let el = Element::<Div>::new()
.class("card mb-4")
let el = html! { div.class("card mb-4") }
.raw(header.render())
.child::<Div, _>(|d| {
d.class("card-body p-0").child::<Div, _>(|d| {
Expand Down
Loading