feat(i18n): made locale redirection much faster

Closes #61.

Author: arctic-hen7

packages/perseus-actix-web/src/initial_load.rs

@@ -127,6 +127,7 @@ pub async fn initial_load<M: MutableStore, T: TranslationsManager>(
                         opts.locales.default,
                         path
                     ),
+                    &opts.root_id,
                 ),
             )
         }

packages/perseus-warp/src/initial_load.rs

@@ -117,6 +117,7 @@ pub async fn initial_load_handler<M: MutableStore, T: TranslationsManager>(
                         opts.locales.default,
                         path
                     ),
+                    &opts.root_id,
                 ))
                 .unwrap()
         }

packages/perseus/src/export.rs

@@ -99,6 +99,7 @@ pub async fn export_app(
                         &html_shell,
                         // If we don't include  the path prefix, fallback redirection will fail for relative paths
                         &format!("{}/{}/{}", path_prefix, locales.default, &path),
+                        root_id,
                     ),
                 )
                 .await?;

packages/perseus/src/html_shell.rs

@@ -104,7 +104,13 @@ pub fn interpolate_page_data(html_shell: &str, page_data: &PageData, root_id: &s
 /// From there, Perseus' inbuilt progressive enhancement can occur, but without this a user directed to an unlocalized page with JS disabled would see a
 /// blank screen, which is terrible UX. Note that this also includes a fallback for if JS is enabled but Wasm is disabled. Note that the redirect URL
 /// is expected to be generated with a path prefix inbuilt.
-pub fn interpolate_locale_redirection_fallback(html_shell: &str, redirect_url: &str) -> String {
+///
+/// This also adds a `__perseus_initial_state` `<div>` in case it's needed (for Wasm redirections).
+pub fn interpolate_locale_redirection_fallback(
+    html_shell: &str,
+    redirect_url: &str,
+    root_id: &str,
+) -> String {
     // This will be used if JavaScript is completely disabled (it's then the site's responsibility to show a further message)
     let dumb_redirector = format!(
         r#"<noscript>
@@ -141,5 +147,16 @@ pub fn interpolate_locale_redirection_fallback(html_shell: &str, redirect_url: &
         &format!("{}\n{}\n</head>", js_redirector, dumb_redirector),
     );
 
-    html
+    // The user MUST place have a `<div>` of this exact form (documented explicitly)
+    // We permit either double or single quotes
+    let html_to_replace_double = format!("<div id=\"{}\">", root_id);
+    let html_to_replace_single = format!("<div id='{}'>", root_id);
+    let html_replacement = format!(
+        // We give the content a specific ID so that it can be deleted if an error page needs to be rendered on the client-side
+        "{}<div id=\"__perseus_content_initial\" class=\"__perseus_content\"></div>",
+        &html_to_replace_double,
+    );
+    // Now interpolate that HTML into the HTML shell
+    html.replace(&html_to_replace_double, &html_replacement)
+        .replace(&html_to_replace_single, &html_replacement)
 }

packages/perseus/src/locale_detector.rs

@@ -1,5 +1,7 @@
 use crate::locales::Locales;
 use crate::path_prefix::get_path_prefix_client;
+use sycamore::rt::Reflect;
+use wasm_bindgen::JsValue;
 
 /// Detects which locale the user should be served and redirects appropriately. This should only be used when the user navigates to a
 /// page like `/about`, without a locale. This will only work on the client-side (needs access to browser i18n settings). Any pages
@@ -50,13 +52,17 @@ pub fn detect_locale(url: String, locales: &Locales) {
     let new_loc = format!("{}/{}/{}", base_path, locale, loc);
     let new_loc = new_loc.strip_suffix('/').unwrap_or(&new_loc);
 
+    // Unset the initial state variable so we perform subsequent renders correctly
+    // This monstrosity is needed until `web-sys` adds a `.set()` method on `Window`
+    Reflect::set(
+        &JsValue::from(web_sys::window().unwrap()),
+        &JsValue::from("__PERSEUS_INITIAL_STATE"),
+        &JsValue::undefined(),
+    )
+    .unwrap();
     // Imperatively navigate to the localized route
     // This certainly shouldn't fail...
-    web_sys::window()
-        .unwrap()
-        .location()
-        .replace(new_loc)
-        .unwrap();
+    sycamore_router::navigate_replace(new_loc);
 }
 
 /// The possible outcomes of trying to match a locale.