Feature request: `use_locale`

[BrandonDyer64]

Feature request: `use_locale`

[maccesch]

Yeah that would be awesome!

[BrandonDyer64]

Update: I am working on implementing this in a personal project. When I'm done I'll adapt it for leptos-use and make a PR

[maccesch]

That's great! Keep me in the loop 👍🏼

[BrandonDyer64]

Got a proof of concept working. It's ugly, but it's a start.

On the server, it uses the Accept-Language header.

On the client it defaults to what the server gave it, and updates the signal if the browser's language changes.

The part about Extension<Arc<HeaderMap>> is because I'm running on a Cloudflare Worker. This will need to be adapted to work with axum, actix, and spin like use_cookie() does.

pub fn use_locale() -> Signal<Vec<String>> {
    #[cfg(not(feature = "ssr"))]
    use {leptos_dom::ev::languagechange, leptos_use::*};

    let browser_locales: Signal<Vec<String>> = {
        #[allow(unused_mut)]
        let mut initial_browser_locales: Option<Vec<String>> = None;
        cfg_if::cfg_if! {
            if #[cfg(not(feature = "ssr"))] {
                let window = use_window();
                let navigator = window.navigator();
                initial_browser_locales = navigator
                    .map(|navigator| navigator.languages().to_vec())
                    .map(|vec| vec.into_iter().filter_map(|x| x.as_string()).collect::<Vec<String>>());
            }
        }

        #[allow(unused)]
        let (browser_locales, set_browser_locales) = create_signal(initial_browser_locales);

        cfg_if::cfg_if! {
            if #[cfg(not(feature = "ssr"))] {
                let window = use_window();
                let navigator = window.navigator();
                use_event_listener(window, languagechange, move |evt| {
                    let languages = navigator
                        .as_ref()
                        .map(|navigator| navigator.languages().to_vec())
                        .map(|vec| vec.into_iter().filter_map(|x| x.as_string()).collect());
                    set_browser_locales.set(languages);
                });
            }
        }

        Signal::from(move || browser_locales.get().unwrap_or_default())
    };

    #[allow(unused)]
    let locale = create_blocking_resource(
        move || browser_locales.get(),
        |browser_locales| async move {
            cfg_if::cfg_if! {
                if #[cfg(feature = "ssr")] {
                    use axum::Extension;
                    use leptos_axum::*;
                    use std::sync::Arc;
                    use http::HeaderMap;

                    let Extension(headers): Extension<Arc<HeaderMap>> = extract().await.ok()?;
                    let accept_language = headers.get(http::header::ACCEPT_LANGUAGE)?.to_str().ok()?.to_owned();

                    let locales = accept_language
                        .split(',')
                        .map(|locale| {
                            locale
                                .split_once(';')
                                .map(|x|x.0)
                                .unwrap_or(locale).to_owned()
                        })
                        .collect::<Vec<_>>();


                    Some(locales)
                } else {
                    Some(browser_locales)
                }
            }
        },
    );
    Signal::from(move || locale.get().flatten().unwrap_or_default())
}

[maccesch]

Nice! I don't find it that ugly to be honest 👍