fix: TolgeeProvider initial loading with Suspense, language storage b…

…ehavior, remove unnecessary prepare method
tolgee · Dec 9, 2022 · 00b7a94 · 00b7a94
1 parent f60e03c
commit 00b7a94
Show file tree

Hide file tree

Showing 7 changed files with 55 additions and 30 deletions.
diff --git a/packages/core/src/Controller/Controller.ts b/packages/core/src/Controller/Controller.ts
@@ -248,15 +248,16 @@ export const Controller = ({ options }: StateServiceProps) => {
   }
 
   const checkCorrectConfiguration = () => {
-    const languageDetector = pluginService.getLanguageDetector();
-    if (languageDetector) {
+    const languageComputable =
+      pluginService.getLanguageDetector() || pluginService.getLanguageStorage();
+    if (languageComputable) {
       const availableLanguages = state.getAvailableLanguages();
       if (!availableLanguages) {
         throw new Error(missingOptionError('availableLanguages'));
       }
     }
     if (!state.getLanguage() && !state.getInitialOptions().defaultLanguage) {
-      if (languageDetector) {
+      if (languageComputable) {
         throw new Error(missingOptionError('defaultLanguage'));
       } else {
         throw new Error(missingOptionError('language'));

diff --git a/packages/core/src/Controller/Plugins/Plugins.ts b/packages/core/src/Controller/Plugins/Plugins.ts
@@ -30,8 +30,6 @@ export const Plugins = (
   getTranslation: (props: KeyAndNamespacesInternal) => string | undefined,
   changeTranslation: ChangeTranslationInterface
 ) => {
-  let prepared = false;
-  let onPrepareQueue: (() => void)[] = [];
   const plugins = {
     ui: undefined as UiMiddleware | undefined,
     observer: undefined as ObserverMiddleware | undefined,
@@ -116,6 +114,10 @@ export const Plugins = (
     instances.languageStorage = storage;
   };
 
+  const getLanguageStorage = () => {
+    return instances.languageStorage;
+  };
+
   const setStoredLanguage = (language: string) => {
     instances.languageStorage?.setLanguage(language);
   };
@@ -231,10 +233,6 @@ export const Plugins = (
     instances.observer?.retranslate();
   };
 
-  const onPrepare = (callback: () => void) => {
-    onPrepareQueue.push(callback);
-  };
-
   function addPlugin(tolgeeInstance: TolgeeInstance, plugin: TolgeePlugin) {
     const pluginTools = Object.freeze({
       setFinalFormatter,
@@ -247,12 +245,8 @@ export const Plugins = (
       addBackend,
       setLanguageDetector,
       setLanguageStorage,
-      onPrepare,
     });
     plugin(tolgeeInstance, pluginTools);
-    if (prepared) {
-      prepare();
-    }
   }
 
   function formatTranslation({
@@ -316,23 +310,14 @@ export const Plugins = (
     return params.translation;
   };
 
-  function prepare() {
-    prepared = true;
-    while (onPrepareQueue.length) {
-      const queue = onPrepareQueue;
-      onPrepareQueue = [];
-      queue.forEach((callback) => callback());
-    }
-  }
-
   return Object.freeze({
-    prepare,
     addPlugin,
     formatTranslation,
     getDevBackend,
     getBackendRecord,
     getBackendDevRecord,
     getLanguageDetector,
+    getLanguageStorage,
     getInitialLanguage,
     setStoredLanguage,
     run,

diff --git a/packages/core/src/__test/languageStorage.test.ts b/packages/core/src/__test/languageStorage.test.ts
@@ -135,11 +135,10 @@ describe('language storage plugin', () => {
     expect(tolgee.getLanguage()).toEqual('es');
   });
 
-  it('will return invalid value if no available languages', () => {
+  it('will throw an error when no available languages are specified', () => {
     tolgee = TolgeeCore().use(StoragePlugin('eq')).init({
       defaultLanguage: 'es',
     });
-    tolgee.run();
-    expect(tolgee.getLanguage()).toEqual('eq');
+    expect(() => tolgee.run()).toThrowError('availableLanguages');
   });
 });
diff --git a/packages/core/src/types/plugin.ts b/packages/core/src/types/plugin.ts
@@ -166,7 +166,6 @@ export type PluginTools = Readonly<{
   setLanguageStorage: (
     languageStorage: LanguageStorageMiddleware | undefined
   ) => void;
-  onPrepare: (callback: () => void) => void;
 }>;
 
 export type TolgeePlugin = (

diff --git a/packages/react/src/TolgeeProvider.spec.tsx b/packages/react/src/TolgeeProvider.spec.tsx
@@ -1,12 +1,13 @@
 jest.autoMockOff();
 
-import { Tolgee, TolgeeInstance } from '@tolgee/web';
+import { Tolgee, TolgeeInstance, TolgeePlugin } from '@tolgee/web';
 
 import '@testing-library/jest-dom';
 import React from 'react';
 import { TolgeeProvider } from './TolgeeProvider';
 
 import { act, render, screen, waitFor } from '@testing-library/react';
+import { createResolvablePromise } from '@tolgee/testing/createResolvablePromise';
 
 describe('Tolgee Provider Component', () => {
   let mockedTolgee: TolgeeInstance;
@@ -67,4 +68,39 @@ describe('Tolgee Provider Component', () => {
       expect(loading).toBeNull();
     });
   });
+
+  test('renders fallback when language is being fetched', async () => {
+    const language = createResolvablePromise('en');
+
+    const storagePlugin: TolgeePlugin = (tolgee, { setLanguageStorage }) => {
+      setLanguageStorage({
+        getLanguage() {
+          return language.promise;
+        },
+        setLanguage() {},
+      });
+      return tolgee;
+    };
+    const tolgee = Tolgee()
+      .use(storagePlugin)
+      .init({
+        defaultLanguage: 'en',
+        staticData: {
+          en: {},
+        },
+      });
+    render(
+      <TolgeeProvider tolgee={tolgee} fallback="Loading...">
+        It's rendered!
+      </TolgeeProvider>
+    );
+    await waitFor(async () => {
+      expect(screen.getByText('Loading...')).toBeTruthy();
+    });
+    await act(async () => {
+      language.resolve();
+      await language.promise;
+    });
+    expect(screen.getByText("It's rendered!")).toBeTruthy();
+  });
 });
diff --git a/packages/react/src/TolgeeProvider.tsx b/packages/react/src/TolgeeProvider.tsx
@@ -41,7 +41,11 @@ export const TolgeeProvider: React.FC<Props> = ({
       <TolgeeProviderContext.Provider
         value={{ tolgee, options: optionsWithDefault }}
       >
-        <Suspense fallback={fallback || null}>{children}</Suspense>
+        {loading ? (
+          fallback
+        ) : (
+          <Suspense fallback={fallback || null}>{children}</Suspense>
+        )}
       </TolgeeProviderContext.Provider>
     );
   }
@@ -50,7 +54,7 @@ export const TolgeeProvider: React.FC<Props> = ({
     <TolgeeProviderContext.Provider
       value={{ tolgee, options: optionsWithDefault }}
     >
-      {fallback && loading ? fallback : children}
+      {loading ? fallback : children}
     </TolgeeProviderContext.Provider>
   );
 };
diff --git a/testapps/core/apps/lang_switching/index.js b/testapps/core/apps/lang_switching/index.js
@@ -4,6 +4,7 @@ const tolgee = Tolgee()
   .use(BackendFetch({ prefix: 'i18n' }))
   .use(LanguageStorage())
   .init({
+    availableLanguages: ['en', 'cs'],
     highlightColor: 'yellow',
     defaultLanguage: 'en',
     fallbackLanguage: 'en',