fix: sync language document attribute

src/i18n/store.ts

@@ -1,5 +1,6 @@
 import type { SetOptional } from 'type-fest';
 import { createStore } from 'zustand/vanilla';
+import { subscribeWithSelector } from 'zustand/middleware';
 
 import libui from '@/i18n/translations/libui.json';
 
@@ -26,15 +27,17 @@ export type TranslationStore = {
   translations: Translations;
 };
 
-export const translationStore = createStore<TranslationStore>((set) => ({
-  changeLanguage(language) {
-    set({ resolvedLanguage: language });
-  },
-  fallbackLanguage: 'en',
-  isInitialized: false,
-  resolvedLanguage: 'en',
-  translations: { libui }
-}));
+export const translationStore = createStore(
+  subscribeWithSelector<TranslationStore>((set) => ({
+    changeLanguage(language) {
+      set({ resolvedLanguage: language });
+    },
+    fallbackLanguage: 'en',
+    isInitialized: false,
+    resolvedLanguage: 'en',
+    translations: { libui }
+  }))
+);
 
 export const i18n: I18N = {
   init: ({ defaultLanguage, fallbackLanguage, translations }: InitOptions = {}) => {
@@ -43,6 +46,12 @@ export const i18n: I18N = {
       console.error('Cannot reinitialize translations store');
       return;
     }
+    translationStore.subscribe(
+      (state) => state.resolvedLanguage,
+      (resolvedLanguage) => {
+        document.documentElement.lang = resolvedLanguage;
+      }
+    );
     translationStore.setState({
       fallbackLanguage: fallbackLanguage ?? state.fallbackLanguage,
       isInitialized: true,

tsconfig.json

@@ -23,6 +23,7 @@
     "prettier.config.js",
     "tailwind.config.cjs",
     "tsup.config.mts",
-    "vite.config.mts"
+    "vite.config.mts",
+    "vitest.config.mts"
   ]
 }

vite.config.mts

@@ -19,22 +19,5 @@ export default defineConfig({
     alias: {
       '@': path.resolve(import.meta.dirname, 'src')
     }
-  },
-  test: {
-    coverage: {
-      exclude: ['**/*.d.ts', '**/index.ts', '**/*.stories.tsx', 'src/testing/*'],
-      include: ['src/**/*'],
-      provider: 'v8',
-      thresholds: {
-        branches: 75,
-        functions: 30,
-        lines: 50,
-        statements: 50
-      }
-    },
-    environment: 'happy-dom',
-    root: import.meta.dirname,
-    setupFiles: ['src/testing/setup-tests.ts'],
-    watch: false
   }
 });

vitest.config.mts

@@ -0,0 +1,25 @@
+import { defineConfig, mergeConfig } from 'vitest/config';
+import viteConfig from './vite.config.mjs';
+
+export default mergeConfig(
+  viteConfig,
+  defineConfig({
+    test: {
+      coverage: {
+        exclude: ['**/*.d.ts', '**/index.ts', '**/*.stories.tsx', 'src/testing/*'],
+        include: ['src/**/*'],
+        provider: 'v8',
+        thresholds: {
+          branches: 75,
+          functions: 30,
+          lines: 50,
+          statements: 50
+        }
+      },
+      environment: 'happy-dom',
+      root: import.meta.dirname,
+      setupFiles: ['src/testing/setup-tests.ts'],
+      watch: false
+    }
+  })
+);