fix: handle tolgee instance update (on hot reload) (#3349)

tolgee · Jun 25, 2024 · 038e407 · 038e407
1 parent 19a4d7b
commit 038e407
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 10 deletions.
diff --git a/packages/react/src/TolgeeProvider.tsx b/packages/react/src/TolgeeProvider.tsx
@@ -18,6 +18,8 @@ export const getProviderInstance = () => {
   return ProviderInstance;
 };
 
+let LAST_TOLGEE_INSTANCE: TolgeeInstance | undefined = undefined;
+
 export interface TolgeeProviderProps {
   children?: React.ReactNode;
   tolgee: TolgeeInstance;
@@ -33,16 +35,25 @@ export const TolgeeProvider: React.FC<TolgeeProviderProps> = ({
 }) => {
   const [loading, setLoading] = useState(!tolgee.isLoaded());
 
+  // prevent restarting tolgee unnecesarly
+  // however if the instance change on hot-reloading
+  // we want to restart
   useEffect(() => {
-    tolgee
-      .run()
-      .catch((e) => {
-        // eslint-disable-next-line no-console
-        console.error(e);
-      })
-      .finally(() => {
-        setLoading(false);
-      });
+    if (LAST_TOLGEE_INSTANCE !== tolgee) {
+      if (LAST_TOLGEE_INSTANCE) {
+        LAST_TOLGEE_INSTANCE.stop();
+      }
+      LAST_TOLGEE_INSTANCE = tolgee;
+      tolgee
+        .run()
+        .catch((e) => {
+          // eslint-disable-next-line no-console
+          console.error(e);
+        })
+        .finally(() => {
+          setLoading(false);
+        });
+    }
   }, [tolgee]);
 
   const optionsWithDefault = { ...DEFAULT_REACT_OPTIONS, ...options };

diff --git a/testapps/react/README.md b/testapps/react/README.md
@@ -17,7 +17,7 @@ To run the app in dev mode with in-context translating mode:
 2. Generate an API-KEY
 3. Copy file `.env` to `.env.development.local`
 4. Set `VITE_APP_TOLGEE_API_KEY` to API key obtained in previous step
-5. Run `npm run start`
+5. Run `npm run develop`
 6. Have fun
 
 ## To run the app in production mode