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

use crate::{create_element, props::Props, react_bindings, VNode, VNodeList};

/// Can be used to create a [React fragment][fragment].
///
/// [fragment]: https://reactjs.org/docs/fragments.html
///
/// # Example
///
/// ```
/// # use wasm_react::*;
/// #
/// # fn f() -> VNode {
/// Fragment.build(c![
///   h!(h1).build(c!["Hello World!"]),
///   h!(div).build(c!["No wrapper element"]),
/// ])
/// # }
/// ```
#[derive(Debug, Default, Clone, Copy)]
pub struct Fragment;

impl Fragment {
  /// Returns a [`VNode`] to be included in a render function.
  pub fn build(self, children: VNodeList) -> VNode {
    create_element(&react_bindings::FRAGMENT, &Props::new(), children)
  }
}

/// A component that specifies the loading indicator when loading lazy descendant
/// components.
///
/// For more information, see [React documentation about code-splitting][docs].
///
/// [docs]: https://reactjs.org/docs/code-splitting.html
///
/// # Example
///
/// ```
/// # use wasm_react::*;
/// #
/// # struct SomeLazyComponent {}
/// # impl Component for SomeLazyComponent {
/// #   fn render(&self) -> VNode { VNode::default() }
/// # }
/// #
/// # fn f() -> VNode {
/// Suspense::new()
///   .fallback(c![
///     h!(div[."loading"]).build(c!["Loading..."]),
///   ])
///   .build(c![
///     SomeLazyComponent { /* ... */ }.build()
///   ])
/// # }
/// ```
#[derive(Debug, Default, Clone)]
pub struct Suspense {
  fallback: VNodeList,
}

impl Suspense {
  /// Creates a new `React.Suspense` component builder.
  pub fn new() -> Self {
    Self::default()
  }

  /// Sets a fallback when loading lazy descendant components.
  pub fn fallback(mut self, children: VNodeList) -> Self {
    self.fallback = children;
    self
  }

  /// Returns a [`VNode`] to be included in a render function.
  pub fn build(self, children: VNodeList) -> VNode {
    self.build_with_key(None, children)
  }

  /// Returns a [`VNode`] to be included in the render function of a component
  /// with the given [React key].
  ///
  /// [React key]: https://reactjs.org/docs/lists-and-keys.html
  pub fn build_with_key(self, key: Option<&str>, children: VNodeList) -> VNode {
    create_element(
      &react_bindings::SUSPENSE,
      &Props::new()
        .key(key)
        .insert("fallback", self.fallback.as_ref()),
      children,
    )
  }
}