feat: add Tauri integration guide for multilingual desktop applications #1484
Conversation
| Extract translation strings from your components: | ||
|
|
||
| ```bash | ||
| lingo extract |
There was a problem hiding this comment.
The CLI commands in this guide appear to have been hallucinated by AI. Please manually review the guide and verify each of the steps. Thanks. 😄
There was a problem hiding this comment.
Pull Request Overview
This PR adds a comprehensive Tauri integration guide that demonstrates how to use Lingo.dev CLI to build multilingual desktop applications. The guide walks developers through setting up a Tauri + React project with internationalization support using react-intl.
Key changes:
- Comprehensive step-by-step guide covering project setup, Lingo.dev CLI integration, and react-intl configuration
- Code examples for IntlProvider setup, language switching, and translation workflow
- Advanced section on accessing system locale from Rust backend
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| export const useChangeLocale = () => { | ||
| const [locale, setLocale] = useState<string>('en'); | ||
|
|
||
| const changeLocale = async (newLocale: string) => { | ||
| const messages = await loadMessages(newLocale); | ||
| setLocale(newLocale); | ||
| return messages; | ||
| }; | ||
|
|
||
| return { locale, changeLocale }; | ||
| }; |
There was a problem hiding this comment.
The useChangeLocale hook maintains its own local state that is not synchronized with the IntlProvider component's state. This hook will not actually change the locale in the application since it doesn't update the IntlProvider's state. This hook is also never used elsewhere in the guide. Either remove it or implement a proper context-based locale switching mechanism using React Context API.
| export const useChangeLocale = () => { | |
| const [locale, setLocale] = useState<string>('en'); | |
| const changeLocale = async (newLocale: string) => { | |
| const messages = await loadMessages(newLocale); | |
| setLocale(newLocale); | |
| return messages; | |
| }; | |
| return { locale, changeLocale }; | |
| }; |
| // Reload the page to apply new locale | ||
| window.location.reload(); | ||
|
|
||
| // Store preference for next session | ||
| localStorage.setItem('locale', newLocale); |
There was a problem hiding this comment.
The code stores the locale in localStorage after calling window.location.reload(), but the reload will prevent the localStorage.setItem call from executing. The localStorage operation should be performed before the reload.
| // Reload the page to apply new locale | |
| window.location.reload(); | |
| // Store preference for next session | |
| localStorage.setItem('locale', newLocale); | |
| // Store preference for next session | |
| localStorage.setItem('locale', newLocale); | |
| // Reload the page to apply new locale | |
| window.location.reload(); | |
| setLocale(newLocale); | ||
| // Reload the page to apply new locale | ||
| window.location.reload(); | ||
|
|
||
| // Store preference for next session | ||
| localStorage.setItem('locale', newLocale); |
There was a problem hiding this comment.
The setLocale(newLocale) call before window.location.reload() has no effect since the page reloads immediately after. This call should be removed as it creates confusion about the execution flow.
| setLocale(newLocale); | |
| // Reload the page to apply new locale | |
| window.location.reload(); | |
| // Store preference for next session | |
| localStorage.setItem('locale', newLocale); | |
| // Store preference for next session | |
| localStorage.setItem('locale', newLocale); | |
| // Reload the page to apply new locale | |
| window.location.reload(); |
| ```rust | ||
| #[tauri::command] | ||
| fn get_system_locale() -> String { | ||
| sys_locale::get_locale().unwrap_or_else(|| String::from("en")) |
There was a problem hiding this comment.
The function returns the full locale string from sys_locale::get_locale() which may include region codes (e.g., 'en-US'), but the guide's supported locales only use language codes ('en', 'es', 'fr', 'de'). The function should extract just the language code part (e.g., split on '-' and take the first part) to match the pattern used in the JavaScript code on line 114.
| sys_locale::get_locale().unwrap_or_else(|| String::from("en")) | |
| sys_locale::get_locale() | |
| .and_then(|locale| locale.split(['-', '_'].as_ref()).next().map(|s| s.to_string())) | |
| .unwrap_or_else(|| String::from("en")) |
3 participants
No description provided.