Add html::attr

This commit is contained in:
Joscha 2024-12-12 14:32:51 +01:00
parent abd0cc6247
commit ceefa426f6
6 changed files with 1082 additions and 16 deletions

View file

@ -20,10 +20,15 @@ A dependency update to an incompatible version is considered a breaking change.
### Added ### Added
- `Attr::set` - `Attr::set`
- `html::attr`
### Deprecated ### Deprecated
- `Attr::new` in favor of `Attr::set` - `Attr::new` in favor of `Attr::set`
- `Attr::id` in favor of `html::attr::id`
- `Attr::class` in favor of `html::attr::class`
- `Attr::style` in favor of `html::attr::style`
- `Attr::data` in favor of `html::attr::data_x`
## v0.1.1 - 2024-12-08 ## v0.1.1 - 2024-12-08

View file

@ -13,15 +13,14 @@ use el::{Attr, Render, html::*};
let page: String = html(( let page: String = html((
head(( head((
meta(Attr::new("charset", "utf-8")),
meta(( meta((
Attr::new("name", "viewport"), attr::name("viewport"),
Attr::new("content", "width=device-width, initial-scale=1"), attr::content("width=device-width, initial-scale=1"),
)), )),
title("Example page"), title("Example page"),
)), )),
body(( body((
h1((Attr::id("heading"), "Example page")), h1((attr::id("heading"), "Example page")),
p(("This is an example for a ", em("simple"), " web page.")), p(("This is an example for a ", em("simple"), " web page.")),
)), )),
)) ))
@ -53,12 +52,11 @@ Use it like so:
```js ```js
const page = el("html", {}, const page = el("html", {},
el("head", {}, el("head", {},
el("meta", { charset: "utf-8" }),
el("meta", { el("meta", {
name: "viewport", name: "viewport",
content: "width=device-width, initial-scale=1", content: "width=device-width, initial-scale=1",
}), }),
el("title", {}, "Example page") el("title", {}, "Example page"),
), ),
el("body", {}, el("body", {},
el("h1", { id: "heading" }, "Example page"), el("h1", { id: "heading" }, "Example page"),

View file

@ -346,6 +346,7 @@ impl Attr {
/// Create (or replace) an `id` attribute. /// Create (or replace) an `id` attribute.
/// ///
/// `Attr::id(id)` is equivalent to `Attr::new("id", id)`. /// `Attr::id(id)` is equivalent to `Attr::new("id", id)`.
#[deprecated = "use `html::attr::id` instead"]
pub fn id(id: impl ToString) -> Self { pub fn id(id: impl ToString) -> Self {
Self::set("id", id) Self::set("id", id)
} }
@ -354,6 +355,7 @@ impl Attr {
/// ///
/// `Attr::class(class)` is equivalent to /// `Attr::class(class)` is equivalent to
/// `Attr::append("class", class, " ")`. /// `Attr::append("class", class, " ")`.
#[deprecated = "use `html::attr::class` instead"]
pub fn class(class: impl ToString) -> Self { pub fn class(class: impl ToString) -> Self {
Self::append("class", class, " ") Self::append("class", class, " ")
} }
@ -362,6 +364,7 @@ impl Attr {
/// ///
/// `Attr::style(style)` is equivalent to /// `Attr::style(style)` is equivalent to
/// `Attr::append("style", style, ";")`. /// `Attr::append("style", style, ";")`.
#[deprecated = "use `html::attr::style` instead"]
pub fn style(style: impl ToString) -> Self { pub fn style(style: impl ToString) -> Self {
Self::append("style", style, ";") Self::append("style", style, ";")
} }
@ -372,6 +375,7 @@ impl Attr {
/// `Attr::new(format!("data-{name}"), value)`. /// `Attr::new(format!("data-{name}"), value)`.
/// ///
/// [mdn]: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-* /// [mdn]: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*
#[deprecated = "use `html::attr::data_x` instead"]
pub fn data(name: impl ToString, value: impl ToString) -> Self { pub fn data(name: impl ToString, value: impl ToString) -> Self {
Self::set(format!("data-{}", name.to_string()), value) Self::set(format!("data-{}", name.to_string()), value)
} }

View file

@ -1,5 +1,9 @@
//! Definitions for all non-deprecated HTML elements //! Definitions for HTML elements and attributes
//! ([MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element)). //! ([MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element)).
//!
//! Deprecated HTML elements are not included.
pub mod attr;
use crate::{Element, ElementComponent, ElementKind}; use crate::{Element, ElementComponent, ElementKind};

1044
src/html/attr.rs Normal file

File diff suppressed because it is too large Load diff

View file

@ -37,15 +37,14 @@
//! //!
//! let page: String = html(( //! let page: String = html((
//! head(( //! head((
//! meta(Attr::new("charset", "utf-8")),
//! meta(( //! meta((
//! Attr::new("name", "viewport"), //! attr::name("viewport"),
//! Attr::new("content", "width=device-width, initial-scale=1"), //! attr::content("width=device-width, initial-scale=1"),
//! )), //! )),
//! title("Example page"), //! title("Example page"),
//! )), //! )),
//! body(( //! body((
//! h1((Attr::id("heading"), "Example page")), //! h1((attr::id("heading"), "Example page")),
//! p(("This is an example for a ", em("simple"), " web page.")), //! p(("This is an example for a ", em("simple"), " web page.")),
//! )), //! )),
//! )) //! ))
@ -151,9 +150,9 @@ mod tests {
assert_eq!( assert_eq!(
input(( input((
Attr::set("name", "tentacles"), Attr::set("name", "tentacles"),
Attr::set("type", "number"), attr::TypeInput::Number,
Attr::set("min", 10), attr::min(10),
Attr::set("max", 100), Attr::append("max", 100, "FOOBAA"),
)) ))
.render_to_string() .render_to_string()
.unwrap(), .unwrap(),
@ -166,6 +165,18 @@ mod tests {
.unwrap(), .unwrap(),
r#"<input checked name="horns">"#, r#"<input checked name="horns">"#,
); );
assert_eq!(
p((
attr::id("foo"),
attr::id("bar"),
attr::class("foo"),
attr::class("bar"),
))
.render_to_string()
.unwrap(),
r#"<p class="foo bar" id="bar"></p>"#,
)
} }
#[test] #[test]