sycamore-web 0.9.2

proc-macro crate for Sycamore
Documentation 
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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127

//! Definition for the [`NoSsr`] and [`NoHydrate`] components.

use sycamore_macro::{component, view, Props};

use crate::*;

/// Props for [`Show`].
#[derive(Props)]
pub struct ShowProps {
    #[prop(setter(into))]
    pub when: MaybeDyn<bool>,
    pub children: Children,
}

/// An utility component that only renders its children when a condition is satisfied.
#[component]
pub fn Show(props: ShowProps) -> View {
    let mut children = props.children.call();
    let when = create_selector(move || props.when.get());

    if is_ssr!() {
        View::from_dynamic(move || {
            if when.get() {
                std::mem::take(&mut children)
            } else {
                view! {}
            }
        })
    } else {
        View::from_dynamic(move || {
            let cloned = utils::clone_nodes_via_web_sys(&children);

            if when.get() {
                // Do not set `children` to the document fragment since the document fragment will
                // be emptied when it is appended.
                children = utils::unwrap_from_document_fragment(cloned);

                utils::clone_nodes_via_web_sys(&children)
            } else {
                // Wrap children inside a document fragment so that it can still be dynamically
                // updated even though it is not mounted.
                children = utils::wrap_in_document_fragment(cloned);
                view! {}
            }
        })
    }
}

/// Component that is only renders its children on the client side.
///
/// This is useful when wrapping parts of your app that are not intended to be server-side
/// rendered, e.g. highly interactive components such as graphs, etc...
#[component(inline_props)]
pub fn NoSsr(children: Children) -> View {
    if is_ssr!() {
        view! { no-ssr() }
    } else {
        let marker = create_node_ref();
        let view = view! { no-ssr(r#ref=marker) };
        on_mount(move || {
            let marker = marker.get();
            let parent = marker.parent_node().unwrap();

            let children = children.call();
            for node in children.as_web_sys() {
                parent.insert_before(&node, Some(&marker)).unwrap();
            }
            parent.remove_child(&marker).unwrap();
        });
        view
    }
}

/// Components that do not need, or should not be hydrated on the client side.
///
/// This is useful when large parts of your app do not require client-side interactivity such as
/// static content.
///
/// However, this component will still be rendered on the client side if it is created after the
/// initial hydration phase is over, e.g. navigating to a new page with a `NoHydrate` component.
#[component(inline_props)]
pub fn NoHydrate(children: Children) -> View {
    if is_ssr!() {
        let is_hydrating = IS_HYDRATING.replace(false);
        let children = children.call();
        IS_HYDRATING.set(is_hydrating);
        children
    } else if IS_HYDRATING.get() {
        view! {}
    } else {
        children.call()
    }
}

/// Generate a script element for bootstrapping hydration.
///
/// In general, prefer using [`HydrationScript`] instead.
pub fn generate_hydration_script(mode: SsrMode) -> &'static str {
    match mode {
        SsrMode::Sync => "",
        SsrMode::Blocking => "window.__sycamore_ssr_mode='blocking'",
        SsrMode::Streaming => "window.__sycamore_ssr_mode='streaming'",
    }
}

/// Component that creates a script element for bootstrapping hydration. Should be rendered into
/// the `<head>` of the document.
///
/// This component is required if using SSR in blocking or streaming mode.
///
/// TODO: use this component to also capture and replay events. This requires synthetic event
/// delegation: <https://github.com/sycamore-rs/sycamore/issues/176>
#[component]
pub fn HydrationScript() -> View {
    is_ssr! {
        let mode = use_context::<SsrMode>();
        let script = generate_hydration_script(mode);
        view! {
            NoHydrate {
                script(dangerously_set_inner_html=script)
            }
        }
    }
    is_not_ssr! {
        view! {}
    }
}