fix: locale error in production

Author: sanyuan0704

src/shared/types/default-theme.ts

@@ -89,6 +89,7 @@ export namespace DefaultTheme {
   export interface LocaleConfig {
     lang?: string;
     title?: string;
+    routePrefix?: string;
     description?: string;
     head?: HeadConfig[];
     label: string;

src/theme-default/components/Nav/index.tsx

@@ -178,7 +178,7 @@ export function Nav() {
             items-center=""
           >
             <div className="search" flex="sm:1" pl="sm:8">
-              <Search __island />
+              <Search __island langRoutePrefix={localeData.routePrefix || ''} />
             </div>
             <NavMenu menuItems={menuItems} />
             {hasMultiLanguage && (

src/theme-default/components/Search/index.tsx

@@ -2,7 +2,6 @@ import { ChangeEvent, useCallback, useRef, useState } from 'react';
 import { MatchResultItem, PageSearcher } from '../../logic/search';
 import SearchSvg from './icons/search.svg';
 import { ComponentPropsWithIsland } from '../../../shared/types/index';
-import { useLocaleSiteData } from '../../logic';
 import { throttle } from 'lodash-es';
 
 function SuggestionContent(props: {
@@ -65,8 +64,9 @@ function SuggestionContent(props: {
 }
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-export function Search(_props: ComponentPropsWithIsland) {
-  const localeData = useLocaleSiteData();
+export function Search(
+  props: ComponentPropsWithIsland & { langRoutePrefix: string }
+) {
   const [suggestions, setSuggestions] = useState<MatchResultItem[]>([]);
   const [query, setQuery] = useState('');
   const [focused, setFocused] = useState(false);
@@ -76,25 +76,29 @@ export function Search(_props: ComponentPropsWithIsland) {
   const initPageSearcher = useCallback(() => {
     if (!psRef.current) {
       return import('../../logic/search').then(({ PageSearcher }) => {
-        psRef.current = new PageSearcher(localeData.lang || 'en');
+        psRef.current = new PageSearcher(props.langRoutePrefix);
         psRef.current.init();
       });
     }
     return Promise.resolve();
-  }, [localeData.lang]);
+  }, [props.langRoutePrefix]);
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const onQueryChanged = useCallback(
-    throttle(async (e: ChangeEvent<HTMLInputElement>) => {
-      await initPageSearcher();
-      const newQuery = e.target.value;
-      setQuery(newQuery);
-      if (psRef.current) {
-        psRef.current.match(newQuery).then((matched) => {
-          setSuggestions(matched);
-        });
-      }
-    }, 300),
+    throttle(
+      async (e: ChangeEvent<HTMLInputElement>) => {
+        await initPageSearcher();
+        const newQuery = e.target.value;
+        setQuery(newQuery);
+        if (psRef.current) {
+          psRef.current.match(newQuery).then((matched) => {
+            setSuggestions(matched);
+          });
+        }
+      },
+      200,
+      { leading: true, trailing: true }
+    ),
     [initPageSearcher]
   );
   return (

src/theme-default/logic/search.ts

@@ -41,16 +41,16 @@ export class PageSearcher {
   #index?: SearchIndex<PageDataForSearch[]>;
   #cjkIndex?: SearchIndex<PageDataForSearch[]>;
   #headerToIdMap: Record<string, string> = {};
-  #lang: string;
+  #langRoutePrefix: string;
 
-  constructor(lang: string) {
-    this.#lang = lang;
+  constructor(langRoutePrefix: string) {
+    this.#langRoutePrefix = langRoutePrefix;
   }
 
   async init(options: CreateOptions = {}) {
     // Initial pages data and create index
     const pages = await getAllPages((route) =>
-      route.path.startsWith(`/${this.#lang}`)
+      route.path.startsWith(this.#langRoutePrefix)
     );
     const pagesForSearch: PageDataForSearch[] = pages
       .filter((page) => {

src/theme-default/logic/useLocaleSiteData.ts

@@ -4,10 +4,11 @@ import { usePageData } from '../../runtime';
 import { useLocation } from 'react-router-dom';
 
 export function useLocaleSiteData(): DefaultTheme.LocaleConfig {
-  const { siteData } = usePageData();
-  const { pathname } = useLocation();
-  const { themeConfig } = siteData;
-  const locales = themeConfig.locales;
+  const pageData = usePageData();
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const { pathname } = import.meta.env.SSR ? useLocation() : location;
+  const themeConfig = pageData?.siteData?.themeConfig ?? {};
+  const locales = themeConfig?.locales;
   if (!locales || Object.keys(locales).length === 0) {
     return {
       nav: themeConfig.nav,
@@ -20,5 +21,8 @@ export function useLocaleSiteData(): DefaultTheme.LocaleConfig {
       return pathname.startsWith(addLeadingSlash(removeTrailingSlash(locale)));
     }) || localeKeys[0];
 
-  return locales[localeKey];
+  return {
+    ...locales[localeKey],
+    routePrefix: localeKey
+  };
 }