@rimori/react-client 0.4.6-next.1 → 0.4.6-next.3

package/dist/hooks/I18nHooks.js

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useRimori } from '../providers/PluginProvider';
 /**
  * Custom useTranslation hook that provides a translation function and indicates readiness
@@ -7,19 +7,22 @@ import { useRimori } from '../providers/PluginProvider';
 export function useTranslation() {
     const { plugin } = useRimori();
     const [translatorInstance, setTranslatorInstance] = useState(null);
+    const [updateCount, setUpdateCount] = useState(0);
     useEffect(() => {
-        void plugin.getTranslator().then(setTranslatorInstance);
+        void plugin.getTranslator().then((translator) => {
+            setTranslatorInstance(translator);
+            translator.onLanguageChanged(() => setUpdateCount(updateCount + 1));
+        });
     }, [plugin]);
-    const safeT = (key, options) => {
+    const safeT = useCallback((key, options) => {
         // return zero-width space if translator is not initialized to keep text space occupied
         if (!translatorInstance)
             return '\u200B'; // zero-width space
         const result = translatorInstance.t(key, options);
         if (!result) {
-            console.error(`Translation key not found: ${key}`);
             return '\u200B'; // zero-width space
         }
         return result;
-    };
+    }, [translatorInstance, updateCount]);
     return { t: safeT, ready: translatorInstance !== null };
 }

package/dist/hooks/ThemeSetter.js

@@ -3,6 +3,8 @@ export function useTheme(theme = 'system') {
     const dom = document.documentElement;
     dom.style.background = 'hsl(var(--background))';
     dom.classList.add('text-gray-900', 'dark:text-gray-200', 'bg-gray-50', 'dark:bg-gray-950');
+    dom.dataset.theme = isDark ? 'dark' : 'light';
+    dom.style.colorScheme = isDark ? 'dark' : 'light';
     const root = document.querySelector('#root');
     root.style.background = 'hsl(var(--background))';
     dom.classList[isDark ? 'add' : 'remove']('dark');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rimori/react-client",
-  "version": "0.4.6-next.1",
+  "version": "0.4.6-next.3",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -23,7 +23,7 @@
     "format": "prettier --write ."
   },
   "peerDependencies": {
-    "@rimori/client": "2.5.8-next.3",
+    "@rimori/client": "2.5.9-next.2",
     "react": "^18.1.0",
     "react-dom": "^18.1.0"
   },
@@ -34,7 +34,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.37.0",
-    "@rimori/client": "2.5.8-next.3",
+    "@rimori/client": "2.5.9-next.2",
     "@types/react": "^18.3.21",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.4",

package/src/hooks/I18nHooks.ts

@@ -1,5 +1,5 @@
 import { TOptions } from '@rimori/client';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { Translator } from '@rimori/client';
 import { useRimori } from '../providers/PluginProvider';
 
@@ -12,22 +12,28 @@ type TranslatorFn = (key: string, options?: TOptions) => string;
 export function useTranslation(): { t: TranslatorFn; ready: boolean } {
   const { plugin } = useRimori();
   const [translatorInstance, setTranslatorInstance] = useState<Translator | null>(null);
+  const [updateCount, setUpdateCount] = useState(0);
 
   useEffect(() => {
-    void plugin.getTranslator().then(setTranslatorInstance);
+    void plugin.getTranslator().then((translator) => {
+      setTranslatorInstance(translator);
+      translator.onLanguageChanged(() => setUpdateCount(updateCount + 1));
+    });
   }, [plugin]);
 
-  const safeT = (key: string, options?: TOptions): string => {
-    // return zero-width space if translator is not initialized to keep text space occupied
-    if (!translatorInstance) return '\u200B'; // zero-width space
+  const safeT = useCallback(
+    (key: string, options?: TOptions): string => {
+      // return zero-width space if translator is not initialized to keep text space occupied
+      if (!translatorInstance) return '\u200B'; // zero-width space
 
-    const result = translatorInstance.t(key, options);
-    if (!result) {
-      console.error(`Translation key not found: ${key}`);
-      return '\u200B'; // zero-width space
-    }
-    return result;
-  };
+      const result = translatorInstance.t(key, options);
+      if (!result) {
+        return '\u200B'; // zero-width space
+      }
+      return result;
+    },
+    [translatorInstance, updateCount],
+  );
 
   return { t: safeT, ready: translatorInstance !== null };
 }

package/src/hooks/ThemeSetter.ts

@@ -6,6 +6,8 @@ export function useTheme(theme: Theme = 'system'): { isDark: boolean; theme: The
   const dom = document.documentElement;
   dom.style.background = 'hsl(var(--background))';
   dom.classList.add('text-gray-900', 'dark:text-gray-200', 'bg-gray-50', 'dark:bg-gray-950');
+  dom.dataset.theme = isDark ? 'dark' : 'light';
+  dom.style.colorScheme = isDark ? 'dark' : 'light';
 
   const root = document.querySelector('#root') as HTMLDivElement;
   root.style.background = 'hsl(var(--background))';