stylist 0.15.1

Stylist is a CSS-in-Rust styling solution for WebAssembly Applications.
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

use std::rc::Rc;

use gloo_events::EventListener;
use yew::prelude::*;
use yew::suspense::SuspensionResult;

use crate::arch::window;

/// A hook to provide media query.
///
/// This hook will return the result of whether the provided query matches and updates when the
/// result changes.
///
/// # Panics
///
/// This hook will panic if it is used in an environment without access to Web APIs.
#[cfg(feature = "yew_use_media_query")]
#[hook]
pub fn use_media_query(query: &str) -> bool {
    let query: Rc<str> = Rc::from(query);
    let match_media = {
        let query = query.clone();

        move || {
            window()
                .ok()
                .and_then(|m| m.match_media(&query.clone()).ok())
                .flatten()
                .expect("Failed to query media")
        }
    };

    let state = use_state_eq(|| match_media().matches());
    let state_clone = state.clone();

    // Hold listener until end of component cycle.
    use_effect_with(query, move |_| {
        let match_media = match_media();
        let match_media_clone = match_media.clone();

        let listener = EventListener::new(&match_media, "change", move |_event| {
            state_clone.set(match_media_clone.matches());
        });

        move || {
            drop(listener);
        }
    });

    *state
}

/// A hook to provide media query with default values delivered from SSR.
///
/// This hook will return the result of whether the provided query matches and updates when the
/// result changes.
///
/// If the component has a value provided during SSR, it will use the prepared value before
/// switching to matched value.
///
/// # Panics
///
/// This hook will panic if it is used in an environment without access to Web APIs.
#[cfg(feature = "yew_use_media_query")]
#[hook]
pub fn use_prepared_media_query(query: &str, fallback: bool) -> SuspensionResult<bool> {
    let query: Rc<str> = Rc::from(query);
    let try_match_media = {
        let query = query.clone();

        move || {
            window()
                .ok()
                .and_then(|m| m.match_media(&query.clone()).ok())
                .flatten()
        }
    };

    // We only block with fallback if the current component is rendered with SSR, which this hook
    // will return Some(fallback).
    let prepared_fallback = use_prepared_state!((), |_| -> bool { fallback })?;

    let state = use_state_eq(|| {
        prepared_fallback
            .as_deref()
            .cloned()
            .or_else(|| try_match_media().map(|m| m.matches()))
            .unwrap_or(fallback)
    });
    let state_clone = state.clone();

    // Hold listener until end of component cycle.
    use_effect_with(query, move |_| {
        // Effects are only run during CSR, so this should not panic.
        let match_media = try_match_media().expect("Failed to query media");
        let match_media_clone = match_media.clone();

        // We set the media query again so it loads the actual value.
        // As this stage, hydration should already complete.
        state_clone.set(match_media.matches());

        let listener = EventListener::new(&match_media, "change", move |_event| {
            state_clone.set(match_media_clone.matches());
        });

        move || {
            drop(listener);
        }
    });

    Ok(*state)
}