@tolgee/react 5.29.5 → 5.29.6-prerelease.fc7efe8f.0

package/src/TolgeeProvider.tsx

@@ -1,6 +1,7 @@
 import React, { Suspense, useEffect, useState } from 'react';
-import { TolgeeInstance } from '@tolgee/web';
+import { TolgeeInstance, TolgeeStaticData } from '@tolgee/web';
 import { ReactOptions, TolgeeReactContext } from './types';
+import { useTolgeeSSR } from './useTolgeeSSR';
 
 export const DEFAULT_REACT_OPTIONS: ReactOptions = {
   useSuspense: true,
@@ -25,6 +26,14 @@ export interface TolgeeProviderProps {
   tolgee: TolgeeInstance;
   options?: ReactOptions;
   fallback?: React.ReactNode;
+  /**
+   * Hard set language to this value, use together with `staticData`
+   */
+  language?: string;
+  /**
+   * If provided, static data will be hard set to Tolgee cache for initial render
+   */
+  staticData?: TolgeeStaticData;
 }
 
 export const TolgeeProvider: React.FC<TolgeeProviderProps> = ({
@@ -32,9 +41,9 @@ export const TolgeeProvider: React.FC<TolgeeProviderProps> = ({
   options,
   children,
   fallback,
+  staticData,
+  language,
 }) => {
-  const [loading, setLoading] = useState(!tolgee.isLoaded());
-
   // prevent restarting tolgee unnecesarly
   // however if the instance change on hot-reloading
   // we want to restart
@@ -56,6 +65,10 @@ export const TolgeeProvider: React.FC<TolgeeProviderProps> = ({
     }
   }, [tolgee]);
 
+  const tolgeeSSR = useTolgeeSSR(tolgee, language, staticData);
+
+  const [loading, setLoading] = useState(!tolgeeSSR.isLoaded());
+
   const optionsWithDefault = { ...DEFAULT_REACT_OPTIONS, ...options };
 
   const TolgeeProviderContext = getProviderInstance();
@@ -63,7 +76,7 @@ export const TolgeeProvider: React.FC<TolgeeProviderProps> = ({
   if (optionsWithDefault.useSuspense) {
     return (
       <TolgeeProviderContext.Provider
-        value={{ tolgee, options: optionsWithDefault }}
+        value={{ tolgee: tolgeeSSR, options: optionsWithDefault }}
       >
         {loading ? (
           fallback
@@ -76,7 +89,7 @@ export const TolgeeProvider: React.FC<TolgeeProviderProps> = ({
 
   return (
     <TolgeeProviderContext.Provider
-      value={{ tolgee, options: optionsWithDefault }}
+      value={{ tolgee: tolgeeSSR, options: optionsWithDefault }}
     >
       {loading ? fallback : children}
     </TolgeeProviderContext.Provider>

package/src/useTolgeeSSR.ts

@@ -2,6 +2,7 @@ import {
   getTranslateProps,
   TolgeeInstance,
   TolgeeStaticData,
+  isSSR,
 } from '@tolgee/web';
 import { useEffect, useMemo, useState } from 'react';
 
@@ -25,6 +26,8 @@ function getTolgeeWithDeactivatedWrapper(
  * It also ensures that the first render is done without wrapping and so it avoids
  * "client different than server" issues.
  *
+ * If no language data and static data are provided no action is taken
+ *
  * @param tolgeeInstance initialized Tolgee instance
  * @param language language that is obtained outside of Tolgee on the server and client
  * @param staticData static data for the language
@@ -34,11 +37,13 @@ export function useTolgeeSSR(
   language?: string,
   staticData?: TolgeeStaticData | undefined
 ) {
+  const enabled = Boolean(language || staticData);
+
   const [noWrappingTolgee] = useState(() =>
     getTolgeeWithDeactivatedWrapper(tolgeeInstance)
   );
 
-  const [initialRender, setInitialRender] = useState(true);
+  const [initialRender, setInitialRender] = useState(enabled);
 
   useEffect(() => {
     setInitialRender(false);
@@ -48,28 +53,32 @@ export function useTolgeeSSR(
     // we have to prepare tolgee before rendering children
     // so translations are available right away
     // events emitting must be off, to not trigger re-render while rendering
-    tolgeeInstance.setEmitterActive(false);
-    tolgeeInstance.addStaticData(staticData);
-    tolgeeInstance.changeLanguage(language!);
-    tolgeeInstance.setEmitterActive(true);
+    if (enabled) {
+      tolgeeInstance.setEmitterActive(false);
+      tolgeeInstance.addStaticData(staticData);
+      tolgeeInstance.changeLanguage(language!);
+      tolgeeInstance.setEmitterActive(true);
+    }
   }, [language, staticData, tolgeeInstance]);
 
   useState(() => {
-    // running this function only on first render
-    if (!tolgeeInstance.isLoaded()) {
-      // warning user, that static data provided are not sufficient
-      // for proper SSR render
-      const missingRecords = tolgeeInstance
-        .getRequiredRecords(language)
-        .map(({ namespace, language }) =>
-          namespace ? `${namespace}:${language}` : language
-        )
-        .filter((key) => !staticData?.[key]);
+    if (enabled && isSSR()) {
+      // running this function only on first render
+      if (!tolgeeInstance.isLoaded()) {
+        // warning user, that static data provided are not sufficient
+        // for proper SSR render
+        const missingRecords = tolgeeInstance
+          .getRequiredRecords(language)
+          .map(({ namespace, language }) =>
+            namespace ? `${namespace}:${language}` : language
+          )
+          .filter((key) => !staticData?.[key]);
 
-      // eslint-disable-next-line no-console
-      console.warn(
-        `Tolgee: Missing records in "staticData" for proper SSR functionality: ${missingRecords.map((key) => `"${key}"`).join(', ')}`
-      );
+        // eslint-disable-next-line no-console
+        console.warn(
+          `Tolgee: Missing records in "staticData" for proper SSR functionality: ${missingRecords.map((key) => `"${key}"`).join(', ')}`
+        );
+      }
     }
   });