wasm_react/props/
h.rs

1use super::Props;
2use crate::{
3  Callback, create_element, hooks::JsRefContainer, KeyType, VNode,
4};
5use std::borrow::Cow;
6use wasm_bindgen::{
7  convert::{FromWasmAbi, IntoWasmAbi},
8  intern, JsValue,
9};
10use web_sys::Element;
11
12#[doc(hidden)]
13#[derive(Debug, Clone, Copy)]
14pub struct HtmlTag<'a>(pub &'a str);
15
16impl AsRef<str> for HtmlTag<'_> {
17  fn as_ref(&self) -> &str {
18    &self.0
19  }
20}
21
22/// A marker trait for the component type that [`H`] is supposed to build.
23///
24/// Can either be `HtmlTag` or any imported component.
25pub trait HType {
26  /// Returns a reference to the [`JsValue`] of this component type.
27  fn as_js(&self) -> Cow<'_, JsValue>;
28}
29
30impl HType for HtmlTag<'_> {
31  fn as_js(&self) -> Cow<'_, JsValue> {
32    Cow::Owned(intern(self.0).into())
33  }
34}
35
36/// The component builder that powers [`h!`](crate::h!), which provides
37/// convenience methods for adding props.
38///
39/// In case `T` is `HtmlTag`, [`H<T>`] also provides auto-completion for HTML
40/// attributes and events.
41#[derive(Debug, Clone)]
42pub struct H<T> {
43  pub(crate) typ: T,
44  pub(crate) props: Props,
45}
46
47impl<T: HType> H<T> {
48  /// Creates a new instance of [`H`]. It is recommended to use the
49  /// [`h!`](crate::h!) macro instead.
50  pub fn new(typ: T) -> Self {
51    Self {
52      typ,
53      props: Props::new(),
54    }
55  }
56
57  /// Sets the [React key][key].
58  ///
59  /// [key]: https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key
60  pub fn key(mut self, value: Option<impl KeyType>) -> Self {
61    self.props = self.props.key(value);
62    self
63  }
64
65  /// Sets the [React ref][ref] to the given ref container created with the
66  /// [`use_js_ref()`](crate::hooks::use_js_ref()) hook.
67  ///
68  /// [ref]: https://react.dev/learn/manipulating-the-dom-with-refs
69  pub fn ref_container(
70    mut self,
71    ref_container: &JsRefContainer<Element>,
72  ) -> Self {
73    self.props = self.props.ref_container(ref_container);
74    self
75  }
76
77  /// Sets the [React ref][ref] to the given ref callback.
78  ///
79  /// [ref]: https://react.dev/learn/manipulating-the-dom-with-refs
80  pub fn ref_callback(
81    mut self,
82    ref_callback: &Callback<Option<Element>>,
83  ) -> Self {
84    self.props = self.props.ref_callback(ref_callback);
85    self
86  }
87
88  /// Sets an attribute on the [`VNode`].
89  pub fn attr(mut self, key: &str, value: &JsValue) -> Self {
90    self.props = self.props.insert(key, value);
91    self
92  }
93
94  /// Sets a callback value to an attribute on the [`VNode`].
95  pub fn attr_callback<U, V>(mut self, key: &str, f: &Callback<U, V>) -> Self
96  where
97    U: FromWasmAbi + 'static,
98    V: IntoWasmAbi + 'static,
99  {
100    self.props = self.props.insert_callback(key, f);
101    self
102  }
103
104  /// Builds the [`VNode`] and returns it with the given children.
105  pub fn build(self, children: impl Into<VNode>) -> VNode {
106    create_element(&self.typ.as_js(), &self.props, children.into())
107  }
108}
wasm_react/props/h.rs

wasm_react/props/
h.rs
