@vocab/react 1.1.4 → 1.1.6

package/LICENSE

@@ -0,0 +1,21 @@
+### MIT License
+
+Copyright (c) 2020 SEEK
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -20,10 +20,11 @@ Vocab helps you ship multiple languages without compromising the reliability of
 
 ### Step 1: Install Dependencies
 
-Vocab is a monorepo with different packages you can install depending on your usage, the below list will get you started using the cli, React and webpack integrations.
+Vocab is a monorepo with different packages you can install depending on your usage, the below list will get you started using the CLI and React integration.
 
 ```bash
-$ npm i --save @vocab/cli @vocab/react @vocab/webpack
+$ npm i --save-dev @vocab/cli
+$ npm i --save @vocab/core @vocab/react
 ```
 
 ### Step 2: Configure Vocab
@@ -116,6 +117,10 @@ Right now every language is loaded into your web application all the time, which
 
 This is done using the **VocabWebpackPlugin**. Applying this plugin to your client webpack configuration will replace all vocab files with a dynamic asynchronous chunks designed for the web.
 
+```bash
+$ npm i --save-dev @vocab/webpack
+```
+
 **webpack.config.js**
 
 ```js
@@ -206,7 +211,7 @@ module.exports = {
    */
   generatedLanguages: [
     {
-      name: 'generatedLangauge',
+      name: 'generatedLanguage',
       extends: 'en',
       generator: {
         transformElement: capitalize,
@@ -296,6 +301,10 @@ const App = () => (
 
 The `@vocab/pseudo-localize` package exports low-level functions that can be used for pseudo-localization of translation messages.
 
+```bash
+$ npm i --save-dev @vocab/pseudo-localize
+```
+
 ```ts
 import {
   extendVowels,

package/dist/declarations/src/index.d.ts

@@ -1,25 +1,25 @@
-import { TranslationFile, LanguageName, ParsedFormatFnByKey, ParsedFormatFn } from '@vocab/types';
-import { ReactNode } from 'react';
-declare type Locale = string;
-interface TranslationsValue {
-    language: LanguageName;
-    locale?: Locale;
-}
-interface VocabProviderProps extends TranslationsValue {
-    children: ReactNode;
-}
-export declare const VocabProvider: ({ children, language, locale, }: VocabProviderProps) => JSX.Element;
-export declare const useLanguage: () => TranslationsValue;
-declare type FormatXMLElementReactNodeFn = (parts: ReactNode[]) => ReactNode;
-declare type MapToReactNodeFunction<Params extends Record<string, any>> = {
-    [key in keyof Params]: Params[key] extends ParsedFormatFn ? FormatXMLElementReactNodeFn : Params[key];
-};
-declare type TranslateFn<FormatFnByKey extends ParsedFormatFnByKey> = {
-    <TranslationKey extends keyof FormatFnByKey>(key: TranslationKey, params: MapToReactNodeFunction<Parameters<FormatFnByKey[TranslationKey]>[0]>): ReturnType<FormatFnByKey[TranslationKey]> extends string ? string : ReactNode | string | Array<ReactNode | string>;
-    <TranslationKey extends keyof FormatFnByKey>(key: Parameters<FormatFnByKey[TranslationKey]>[0] extends Record<string, any> ? never : TranslationKey): string;
-};
-export declare function useTranslations<Language extends string, FormatFnByKey extends ParsedFormatFnByKey>(translations: TranslationFile<Language, FormatFnByKey>): {
-    ready: boolean;
-    t: TranslateFn<FormatFnByKey>;
-};
-export {};
+import type { TranslationFile, LanguageName, ParsedFormatFnByKey, ParsedFormatFn } from '@vocab/core';
+import { type ReactNode } from 'react';
+type Locale = string;
+interface TranslationsValue {
+    language: LanguageName;
+    locale?: Locale;
+}
+interface VocabProviderProps extends TranslationsValue {
+    children: ReactNode;
+}
+export declare const VocabProvider: ({ children, language, locale, }: VocabProviderProps) => JSX.Element;
+export declare const useLanguage: () => TranslationsValue;
+type FormatXMLElementReactNodeFn = (parts: ReactNode[]) => ReactNode;
+type MapToReactNodeFunction<Params extends Record<string, any>> = {
+    [key in keyof Params]: Params[key] extends ParsedFormatFn ? FormatXMLElementReactNodeFn : Params[key];
+};
+type TranslateFn<FormatFnByKey extends ParsedFormatFnByKey> = {
+    <TranslationKey extends keyof FormatFnByKey>(key: TranslationKey, params: MapToReactNodeFunction<Parameters<FormatFnByKey[TranslationKey]>[0]>): ReturnType<FormatFnByKey[TranslationKey]> extends string ? string : ReactNode | string | Array<ReactNode | string>;
+    <TranslationKey extends keyof FormatFnByKey>(key: Parameters<FormatFnByKey[TranslationKey]>[0] extends Record<string, any> ? never : TranslationKey): string;
+};
+export declare function useTranslations<Language extends string, FormatFnByKey extends ParsedFormatFnByKey>(translations: TranslationFile<Language, FormatFnByKey>): {
+    ready: boolean;
+    t: TranslateFn<FormatFnByKey>;
+};
+export {};

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

@@ -8,7 +8,7 @@ function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e };
 
 var React__default = /*#__PURE__*/_interopDefault(React);
 
-const TranslationsContext = /*#__PURE__*/React__default['default'].createContext(undefined);
+const TranslationsContext = /*#__PURE__*/React__default["default"].createContext(undefined);
 const VocabProvider = ({
   children,
   language,
@@ -18,21 +18,18 @@ const VocabProvider = ({
     language,
     locale
   }), [language, locale]);
-  return /*#__PURE__*/React__default['default'].createElement(TranslationsContext.Provider, {
+  return /*#__PURE__*/React__default["default"].createElement(TranslationsContext.Provider, {
     value: value
   }, children);
 };
 const useLanguage = () => {
   const context = React.useContext(TranslationsContext);
-
   if (!context) {
     throw new Error('Attempted to access translation without Vocab context set. Did you forget to render VocabProvider?');
   }
-
   if (!context.language) {
     throw new Error('Attempted to access translation without language set. Did you forget to pass language to VocabProvider?');
   }
-
   return context;
 };
 const SERVER_RENDERING = typeof window === 'undefined';
@@ -44,37 +41,29 @@ function useTranslations(translations) {
   const [, forceRender] = React.useReducer(s => s + 1, 0);
   const translationsObject = translations.getLoadedMessages(language, 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).then(() => {
       forceRender();
     });
     ready = false;
   }
-
   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 = 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 && /*#__PURE__*/React.isValidElement(item)) {
           result[i] = /*#__PURE__*/React.cloneElement(item, {
             key: `_vocab-${i}`
@@ -82,7 +71,6 @@ function useTranslations(translations) {
         }
       }
     }
-
     return result;
   }, [translationsObject]);
   return {

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

@@ -8,7 +8,7 @@ function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e };
 
 var React__default = /*#__PURE__*/_interopDefault(React);
 
-const TranslationsContext = /*#__PURE__*/React__default['default'].createContext(undefined);
+const TranslationsContext = /*#__PURE__*/React__default["default"].createContext(undefined);
 const VocabProvider = ({
   children,
   language,
@@ -18,21 +18,18 @@ const VocabProvider = ({
     language,
     locale
   }), [language, locale]);
-  return /*#__PURE__*/React__default['default'].createElement(TranslationsContext.Provider, {
+  return /*#__PURE__*/React__default["default"].createElement(TranslationsContext.Provider, {
     value: value
   }, children);
 };
 const useLanguage = () => {
   const context = React.useContext(TranslationsContext);
-
   if (!context) {
     throw new Error('Attempted to access translation without Vocab context set. Did you forget to render VocabProvider?');
   }
-
   if (!context.language) {
     throw new Error('Attempted to access translation without language set. Did you forget to pass language to VocabProvider?');
   }
-
   return context;
 };
 const SERVER_RENDERING = typeof window === 'undefined';
@@ -44,37 +41,29 @@ function useTranslations(translations) {
   const [, forceRender] = React.useReducer(s => s + 1, 0);
   const translationsObject = translations.getLoadedMessages(language, 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).then(() => {
       forceRender();
     });
     ready = false;
   }
-
   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 = 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 && /*#__PURE__*/React.isValidElement(item)) {
           result[i] = /*#__PURE__*/React.cloneElement(item, {
             key: `_vocab-${i}`
@@ -82,7 +71,6 @@ function useTranslations(translations) {
         }
       }
     }
-
     return result;
   }, [translationsObject]);
   return {

package/dist/vocab-react.esm.js

@@ -16,15 +16,12 @@ const VocabProvider = ({
 };
 const useLanguage = () => {
   const context = useContext(TranslationsContext);
-
   if (!context) {
     throw new Error('Attempted to access translation without Vocab context set. Did you forget to render VocabProvider?');
   }
-
   if (!context.language) {
     throw new Error('Attempted to access translation without language set. Did you forget to pass language to VocabProvider?');
   }
-
   return context;
 };
 const SERVER_RENDERING = typeof window === 'undefined';
@@ -36,37 +33,29 @@ function useTranslations(translations) {
   const [, forceRender] = useReducer(s => s + 1, 0);
   const translationsObject = translations.getLoadedMessages(language, 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).then(() => {
       forceRender();
     });
     ready = false;
   }
-
   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 = 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 && /*#__PURE__*/isValidElement(item)) {
           result[i] = /*#__PURE__*/cloneElement(item, {
             key: `_vocab-${i}`
@@ -74,7 +63,6 @@ function useTranslations(translations) {
         }
       }
     }
-
     return result;
   }, [translationsObject]);
   return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vocab/react",
-  "version": "1.1.4",
+  "version": "1.1.6",
   "main": "dist/vocab-react.cjs.js",
   "module": "dist/vocab-react.esm.js",
   "author": "SEEK",
@@ -12,11 +12,11 @@
     "dist"
   ],
   "dependencies": {
-    "@vocab/types": "^1.1.2",
+    "@vocab/core": "^1.3.1",
     "intl-messageformat": "^10.0.0"
   },
   "devDependencies": {
     "@types/react": "^18.0.9",
     "react": "^18.1.0"
   }
-}
+}