@vocab/react 1.1.1 → 1.1.3

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @vocab/react
 
+## 1.1.3
+
+### Patch Changes
+
+- [`e5a066c`](https://github.com/seek-oss/vocab/commit/e5a066c8a7539a62a9c1c4d813aa87461ba43cdc) [#96](https://github.com/seek-oss/vocab/pull/96) Thanks [@askoufis](https://github.com/askoufis)! - Update `intl-messageformat` dependencies
+
+- Updated dependencies [[`e5a066c`](https://github.com/seek-oss/vocab/commit/e5a066c8a7539a62a9c1c4d813aa87461ba43cdc)]:
+  - @vocab/types@1.1.1
+
+## 1.1.2
+
+### Patch Changes
+
+- [`240d6ad`](https://github.com/seek-oss/vocab/commit/240d6ad7e0cf43fed92655a2f95fb463bd7b6644) [#85](https://github.com/seek-oss/vocab/pull/85) Thanks [@askoufis](https://github.com/askoufis)! - The `t` function returned from `useTranslations` is now memoized. `t` should now only change after the initial loading of translations, and when the language changes, making it more useful inside a hook's dependency array.
+
 ## 1.1.1
 
 ### Patch Changes

package/README.md

@@ -432,6 +432,7 @@ Vocab can be used to synchronize your translations with translations from a remo
 
 ```bash
 $ vocab push --branch my-branch
+$ vocab push --branch my-branch --delete-unused-keys
 $ vocab pull --branch my-branch
 ```
 

package/dist/vocab-react.cjs.dev.js

@@ -43,6 +43,7 @@ function useTranslations(translations) {
   } = useLanguage();
   const [, forceRender] = React.useReducer(s => s + 1, 0);
   const translationsObject = translations.getLoadedMessages(language, locale || language);
+  let ready = true;
 
   if (!translationsObject) {
     if (SERVER_RENDERING) {
@@ -52,20 +53,23 @@ function useTranslations(translations) {
     translations.load(language).then(() => {
       forceRender();
     });
-    return {
-      t: () => ' ',
-      ready: false
-    };
+    ready = false;
   }
 
-  const t = (key, params) => {
-    if (!(translationsObject !== null && translationsObject !== void 0 && translationsObject[key])) {
+  const t = React.useCallback((key, params) => {
+    if (!translationsObject) {
+      return ' ';
+    }
+
+    const message = translationsObject === null || translationsObject === void 0 ? void 0 : translationsObject[key];
+
+    if (!message) {
       // eslint-disable-next-line no-console
       console.error(`Unable to find translation for key "${key}". Possible keys are ${Object.keys(translationsObject).map(v => `"${v}"`).join(', ')}`);
       return '';
     }
 
-    const result = translationsObject[key].format(params);
+    const result = message.format(params);
 
     if (Array.isArray(result)) {
       for (let i = 0; i < result.length; i++) {
@@ -80,10 +84,9 @@ function useTranslations(translations) {
     }
 
     return result;
-  };
-
+  }, [translationsObject]);
   return {
-    ready: true,
+    ready,
     t
   };
 }

package/dist/vocab-react.cjs.prod.js

@@ -43,6 +43,7 @@ function useTranslations(translations) {
   } = useLanguage();
   const [, forceRender] = React.useReducer(s => s + 1, 0);
   const translationsObject = translations.getLoadedMessages(language, locale || language);
+  let ready = true;
 
   if (!translationsObject) {
     if (SERVER_RENDERING) {
@@ -52,20 +53,23 @@ function useTranslations(translations) {
     translations.load(language).then(() => {
       forceRender();
     });
-    return {
-      t: () => ' ',
-      ready: false
-    };
+    ready = false;
   }
 
-  const t = (key, params) => {
-    if (!(translationsObject !== null && translationsObject !== void 0 && translationsObject[key])) {
+  const t = React.useCallback((key, params) => {
+    if (!translationsObject) {
+      return ' ';
+    }
+
+    const message = translationsObject === null || translationsObject === void 0 ? void 0 : translationsObject[key];
+
+    if (!message) {
       // eslint-disable-next-line no-console
       console.error(`Unable to find translation for key "${key}". Possible keys are ${Object.keys(translationsObject).map(v => `"${v}"`).join(', ')}`);
       return '';
     }
 
-    const result = translationsObject[key].format(params);
+    const result = message.format(params);
 
     if (Array.isArray(result)) {
       for (let i = 0; i < result.length; i++) {
@@ -80,10 +84,9 @@ function useTranslations(translations) {
     }
 
     return result;
-  };
-
+  }, [translationsObject]);
   return {
-    ready: true,
+    ready,
     t
   };
 }

package/dist/vocab-react.esm.js

@@ -1,4 +1,4 @@
-import React, { useMemo, useContext, useReducer, isValidElement, cloneElement } from 'react';
+import React, { useMemo, useContext, useReducer, useCallback, isValidElement, cloneElement } from 'react';
 
 const TranslationsContext = /*#__PURE__*/React.createContext(undefined);
 const VocabProvider = ({
@@ -35,6 +35,7 @@ function useTranslations(translations) {
   } = useLanguage();
   const [, forceRender] = useReducer(s => s + 1, 0);
   const translationsObject = translations.getLoadedMessages(language, locale || language);
+  let ready = true;
 
   if (!translationsObject) {
     if (SERVER_RENDERING) {
@@ -44,20 +45,23 @@ function useTranslations(translations) {
     translations.load(language).then(() => {
       forceRender();
     });
-    return {
-      t: () => ' ',
-      ready: false
-    };
+    ready = false;
   }
 
-  const t = (key, params) => {
-    if (!(translationsObject !== null && translationsObject !== void 0 && translationsObject[key])) {
+  const t = useCallback((key, params) => {
+    if (!translationsObject) {
+      return ' ';
+    }
+
+    const message = translationsObject === null || translationsObject === void 0 ? void 0 : translationsObject[key];
+
+    if (!message) {
       // eslint-disable-next-line no-console
       console.error(`Unable to find translation for key "${key}". Possible keys are ${Object.keys(translationsObject).map(v => `"${v}"`).join(', ')}`);
       return '';
     }
 
-    const result = translationsObject[key].format(params);
+    const result = message.format(params);
 
     if (Array.isArray(result)) {
       for (let i = 0; i < result.length; i++) {
@@ -72,10 +76,9 @@ function useTranslations(translations) {
     }
 
     return result;
-  };
-
+  }, [translationsObject]);
   return {
-    ready: true,
+    ready,
     t
   };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vocab/react",
-  "version": "1.1.1",
+  "version": "1.1.3",
   "main": "dist/vocab-react.cjs.js",
   "module": "dist/vocab-react.esm.js",
   "author": "SEEK",
@@ -9,8 +9,8 @@
     "react": ">=16.3.0"
   },
   "dependencies": {
-    "@vocab/types": "^1.0.1",
-    "intl-messageformat": "^9.9.0"
+    "@vocab/types": "^1.1.1",
+    "intl-messageformat": "^10.0.0"
   },
   "devDependencies": {
     "@types/react": "^18.0.9",

package/src/index.tsx

@@ -11,6 +11,7 @@ import React, {
   useReducer,
   isValidElement,
   cloneElement,
+  useCallback,
 } from 'react';
 
 type Locale = string;
@@ -103,55 +104,64 @@ export function useTranslations<
     locale || language,
   );
 
+  let ready = true;
+
   if (!translationsObject) {
     if (SERVER_RENDERING) {
       throw new Error(
         `Translations not synchronously available on server render. Applying translations dynamically server-side is not supported.`,
       );
     }
+
     translations.load(language as any).then(() => {
       forceRender();
     });
-    return {
-      t: (() => ' ') as TranslateFn<ParsedFormatFnByKey>,
-      ready: false,
-    };
+    ready = false;
   }
 
-  const t = (key: string, params?: any) => {
-    if (!translationsObject?.[key]) {
-      // eslint-disable-next-line no-console
-      console.error(
-        `Unable to find translation for key "${key}". Possible keys are ${Object.keys(
-          translationsObject,
-        )
-          .map((v) => `"${v}"`)
-          .join(', ')}`,
-      );
-      return '';
-    }
+  const t = useCallback(
+    (key: string, params?: any) => {
+      if (!translationsObject) {
+        return ' ';
+      }
 
-    const result = translationsObject[key].format(params);
-
-    if (Array.isArray(result)) {
-      for (let i = 0; i < result.length; i++) {
-        const item = result[i];
-        if (
-          typeof item === 'object' &&
-          item &&
-          !item.key &&
-          isValidElement(item)
-        ) {
-          result[i] = cloneElement(item, { key: `_vocab-${i}` });
+      const message = translationsObject?.[key];
+
+      if (!message) {
+        // eslint-disable-next-line no-console
+        console.error(
+          `Unable to find translation for key "${key}". Possible keys are ${Object.keys(
+            translationsObject,
+          )
+            .map((v) => `"${v}"`)
+            .join(', ')}`,
+        );
+        return '';
+      }
+
+      const result = message.format(params);
+
+      if (Array.isArray(result)) {
+        for (let i = 0; i < result.length; i++) {
+          const item = result[i];
+          if (
+            typeof item === 'object' &&
+            item &&
+            !item.key &&
+            isValidElement(item)
+          ) {
+            result[i] = cloneElement(item, { key: `_vocab-${i}` });
+          }
         }
       }
-    }
 
-    return result;
-  };
+      return result;
+    },
+    [translationsObject],
+  );
 
   return {
-    ready: true,
+    ready,
     t,
   };
 }