@vocab/react - npm Package Compare versions

Comparing version 0.0.10 to 0.0.11

CHANGELOG.md

 # @vocab/react
 
+## 0.0.11
+
+### Patch Changes
+
+- [`f2fca67`](https://github.com/seek-oss/vocab/commit/f2fca679c66ae65405a0aa24f0a0e472026aad0d) [#36](https://github.com/seek-oss/vocab/pull/36) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Support custom locales for ICU message parsing
+
+* [`6c725f4`](https://github.com/seek-oss/vocab/commit/6c725f43c5eaed9b248c8452ff6f83cef1b2f61c) [#35](https://github.com/seek-oss/vocab/pull/35) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Rename `useTranslation` to `useTranslations`
+
+* Updated dependencies [[`f2fca67`](https://github.com/seek-oss/vocab/commit/f2fca679c66ae65405a0aa24f0a0e472026aad0d)]:
+  - @vocab/types@0.0.8
+
 ## 0.0.10
@@ -4,0 +15,0 @@

dist/declarations/src/index.d.ts

@@ -1,9 +0,10 @@
-import { TranslationFile } from '@vocab/types';
+import { TranslationFile, LanguageName } from '@vocab/types';
 import { FunctionComponent, ReactNode } from 'react';
-declare type Language = string;
+declare type Locale = string;
 interface TranslationsValue {
-    language: Language;
+    language: LanguageName;
+    locale?: Locale;
 }
 export declare const VocabProvider: FunctionComponent<TranslationsValue>;
-export declare const useLanguage: () => Language;
+export declare const useLanguage: () => TranslationsValue;
 declare type TranslationItem = {
@@ -19,3 +20,3 @@ message: string;
 };
-export declare function useTranslation<Translations extends BaseTranslation>(translations: TranslationFile<Translations>): {
+export declare function useTranslations<Translations extends BaseTranslation>(translations: TranslationFile<Translations>): {
     ready: boolean;
@@ -22,0 +23,0 @@ t: TranslateFn<Translations>;

dist/vocab-react.cjs.dev.js

@@ -14,8 +14,13 @@ 'use strict';
   children,
-  language
-}) => /*#__PURE__*/React__default['default'].createElement(TranslationsContext.Provider, {
-  value: {
-    language
-  }
-}, children);
+  language,
+  locale
+}) => {
+  const value = React.useMemo(() => ({
+    language,
+    locale
+  }), [language, locale]);
+  return /*#__PURE__*/React__default['default'].createElement(TranslationsContext.Provider, {
+    value: value
+  }, children);
+};
 const useLanguage = () => {
@@ -32,7 +37,10 @@ const context = React.useContext(TranslationsContext);
 
-  return context.language;
+  return context;
 };
 const SERVER_RENDERING = typeof window === 'undefined';
-function useTranslation(translations) {
-  const language = useLanguage();
+function useTranslations(translations) {
+  const {
+    language,
+    locale
+  } = useLanguage();
   const [, forceRender] = React.useReducer(s => s + 1, 0);
@@ -44,11 +52,10 @@
 
-  let translationsObject = translations[language].getValue();
+  const translationsObject = translations[language].getValue(locale || language);
 
   if (!translationsObject) {
     if (SERVER_RENDERING) {
-      throw new Error(`Translations not syncronously available on server render. This should not happen.`);
+      throw new Error(`Translations not syncronously available on server render. Applying translations dynamically server-side is not supported.`);
     }
 
     translations[language].load().then(() => {
-      translationsObject = translations[language].getValue();
       forceRender();
@@ -63,5 +70,3 @@ });
   function t(key, params) {
-    var _translationsObject;
-
-    if (!((_translationsObject = translationsObject) === null || _translationsObject === void 0 ? void 0 : _translationsObject[key])) {
+    if (!(translationsObject === null || translationsObject === void 0 ? void 0 : translationsObject[key])) {
       return null;
@@ -81,2 +86,2 @@ }
 exports.useLanguage = useLanguage;
-exports.useTranslation = useTranslation;
+exports.useTranslations = useTranslations;

dist/vocab-react.cjs.prod.js

@@ -14,8 +14,13 @@ 'use strict';
   children,
-  language
-}) => /*#__PURE__*/React__default['default'].createElement(TranslationsContext.Provider, {
-  value: {
-    language
-  }
-}, children);
+  language,
+  locale
+}) => {
+  const value = React.useMemo(() => ({
+    language,
+    locale
+  }), [language, locale]);
+  return /*#__PURE__*/React__default['default'].createElement(TranslationsContext.Provider, {
+    value: value
+  }, children);
+};
 const useLanguage = () => {
@@ -32,7 +37,10 @@ const context = React.useContext(TranslationsContext);
 
-  return context.language;
+  return context;
 };
 const SERVER_RENDERING = typeof window === 'undefined';
-function useTranslation(translations) {
-  const language = useLanguage();
+function useTranslations(translations) {
+  const {
+    language,
+    locale
+  } = useLanguage();
   const [, forceRender] = React.useReducer(s => s + 1, 0);
@@ -44,11 +52,10 @@
 
-  let translationsObject = translations[language].getValue();
+  const translationsObject = translations[language].getValue(locale || language);
 
   if (!translationsObject) {
     if (SERVER_RENDERING) {
-      throw new Error(`Translations not syncronously available on server render. This should not happen.`);
+      throw new Error(`Translations not syncronously available on server render. Applying translations dynamically server-side is not supported.`);
     }
 
     translations[language].load().then(() => {
-      translationsObject = translations[language].getValue();
       forceRender();
@@ -63,5 +70,3 @@ });
   function t(key, params) {
-    var _translationsObject;
-
-    if (!((_translationsObject = translationsObject) === null || _translationsObject === void 0 ? void 0 : _translationsObject[key])) {
+    if (!(translationsObject === null || translationsObject === void 0 ? void 0 : translationsObject[key])) {
       return null;
@@ -81,2 +86,2 @@ }
 exports.useLanguage = useLanguage;
-exports.useTranslation = useTranslation;
+exports.useTranslations = useTranslations;

dist/vocab-react.esm.js

@@ -1,2 +0,2 @@
-import React, { useContext, useReducer } from 'react';
+import React, { useMemo, useContext, useReducer } from 'react';
 
@@ -6,8 +6,13 @@ const TranslationsContext = /*#__PURE__*/React.createContext(undefined);
   children,
-  language
-}) => /*#__PURE__*/React.createElement(TranslationsContext.Provider, {
-  value: {
-    language
-  }
-}, children);
+  language,
+  locale
+}) => {
+  const value = useMemo(() => ({
+    language,
+    locale
+  }), [language, locale]);
+  return /*#__PURE__*/React.createElement(TranslationsContext.Provider, {
+    value: value
+  }, children);
+};
 const useLanguage = () => {
@@ -24,7 +29,10 @@ const context = useContext(TranslationsContext);
 
-  return context.language;
+  return context;
 };
 const SERVER_RENDERING = typeof window === 'undefined';
-function useTranslation(translations) {
-  const language = useLanguage();
+function useTranslations(translations) {
+  const {
+    language,
+    locale
+  } = useLanguage();
   const [, forceRender] = useReducer(s => s + 1, 0);
@@ -36,11 +44,10 @@
 
-  let translationsObject = translations[language].getValue();
+  const translationsObject = translations[language].getValue(locale || language);
 
   if (!translationsObject) {
     if (SERVER_RENDERING) {
-      throw new Error(`Translations not syncronously available on server render. This should not happen.`);
+      throw new Error(`Translations not syncronously available on server render. Applying translations dynamically server-side is not supported.`);
     }
 
     translations[language].load().then(() => {
-      translationsObject = translations[language].getValue();
       forceRender();
@@ -55,5 +62,3 @@ });
   function t(key, params) {
-    var _translationsObject;
-
-    if (!((_translationsObject = translationsObject) === null || _translationsObject === void 0 ? void 0 : _translationsObject[key])) {
+    if (!(translationsObject === null || translationsObject === void 0 ? void 0 : translationsObject[key])) {
       return null;
@@ -71,2 +76,2 @@ }
 
-export { VocabProvider, useLanguage, useTranslation };
+export { VocabProvider, useLanguage, useTranslations };

package.json

 {
   "name": "@vocab/react",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "main": "dist/vocab-react.cjs.js",
@@ -12,3 +12,3 @@ "module": "dist/vocab-react.esm.js",
   "dependencies": {
-    "@vocab/types": "^0.0.7",
+    "@vocab/types": "^0.0.8",
     "intl-messageformat": "^9.3.18"
@@ -15,0 +15,0 @@ },

README.md

@@ -87,3 +87,3 @@ # Vocab
 
-You can then import these translations into your React components. Translations can be used by calling the `t` function returned by `useTranslation`.
+You can then import these translations into your React components. Translations can be used by calling the `t` function returned by `useTranslations`.
 
@@ -93,7 +93,7 @@ **./MyComponent.tsx**
 ```tsx
-import { useTranslation } from '@vocab/react';
+import { useTranslations } from '@vocab/react';
 import translations from './example.vocab';
 
 function MyComponent({ children }) {
-  const { t } = useTranslation(translations);
+  const { t } = useTranslations(translations);
   return <div>{t('my key')}</div>;
@@ -100,0 +100,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

21181

increased by5.43%

Lines of code

328

increased by8.61%

Dependency changes

• + Added@vocab/types@0.0.8(transitive)

• - Removed@vocab/types@0.0.7(transitive)

• Updated@vocab/types@^0.0.8