1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108

use super::Props;
use crate::{
  Callback, create_element, hooks::JsRefContainer, KeyType, VNode,
};
use std::borrow::Cow;
use wasm_bindgen::{
  convert::{FromWasmAbi, IntoWasmAbi},
  intern, JsValue,
};
use web_sys::Element;

#[doc(hidden)]
#[derive(Debug, Clone, Copy)]
pub struct HtmlTag<'a>(pub &'a str);

impl AsRef<str> for HtmlTag<'_> {
  fn as_ref(&self) -> &str {
    &self.0
  }
}

/// A marker trait for the component type that [`H`] is supposed to build.
///
/// Can either be `HtmlTag` or any imported component.
pub trait HType {
  /// Returns a reference to the [`JsValue`] of this component type.
  fn as_js(&self) -> Cow<'_, JsValue>;
}

impl HType for HtmlTag<'_> {
  fn as_js(&self) -> Cow<'_, JsValue> {
    Cow::Owned(intern(self.0).into())
  }
}

/// The component builder that powers [`h!`](crate::h!), which provides
/// convenience methods for adding props.
///
/// In case `T` is `HtmlTag`, [`H<T>`] also provides auto-completion for HTML
/// attributes and events.
#[derive(Debug, Clone)]
pub struct H<T> {
  pub(crate) typ: T,
  pub(crate) props: Props,
}

impl<T: HType> H<T> {
  /// Creates a new instance of [`H`]. It is recommended to use the
  /// [`h!`](crate::h!) macro instead.
  pub fn new(typ: T) -> Self {
    Self {
      typ,
      props: Props::new(),
    }
  }

  /// Sets the [React key][key].
  ///
  /// [key]: https://reactjs.org/docs/lists-and-keys.html
  pub fn key(mut self, value: Option<impl KeyType>) -> Self {
    self.props = self.props.key(value);
    self
  }

  /// Sets the [React ref][ref] to the given ref container created with the
  /// [`use_js_ref()`](crate::hooks::use_js_ref()) hook.
  ///
  /// [ref]: https://reactjs.org/docs/refs-and-the-dom.html
  pub fn ref_container(
    mut self,
    ref_container: &JsRefContainer<Element>,
  ) -> Self {
    self.props = self.props.ref_container(ref_container);
    self
  }

  /// Sets the [React ref][ref] to the given ref callback.
  ///
  /// [ref]: https://reactjs.org/docs/refs-and-the-dom.html
  pub fn ref_callback(
    mut self,
    ref_callback: &Callback<Option<Element>>,
  ) -> Self {
    self.props = self.props.ref_callback(ref_callback);
    self
  }

  /// Sets an attribute on the [`VNode`].
  pub fn attr(mut self, key: &str, value: &JsValue) -> Self {
    self.props = self.props.insert(key, value);
    self
  }

  /// Sets a callback value to an attribute on the [`VNode`].
  pub fn attr_callback<U, V>(mut self, key: &str, f: &Callback<U, V>) -> Self
  where
    U: FromWasmAbi + 'static,
    V: IntoWasmAbi + 'static,
  {
    self.props = self.props.insert_callback(key, f);
    self
  }

  /// Builds the [`VNode`] and returns it with the given children.
  pub fn build(self, children: impl Into<VNode>) -> VNode {
    create_element(&self.typ.as_js(), &self.props, children.into())
  }
}