diff --git a/.all-contributorsrc b/.all-contributorsrc index 900b7e63..0e04f89a 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -323,6 +323,24 @@ "contributions": [ "code" ] + }, + { + "login": "ajmnz", + "name": "Arnau Jiménez", + "avatar_url": "https://avatars.githubusercontent.com/u/57961822?v=4", + "profile": "http://ajb.cat", + "contributions": [ + "code" + ] + }, + { + "login": "edwinveldhuizen", + "name": "Edwin Veldhuizen", + "avatar_url": "https://avatars.githubusercontent.com/u/1787915?v=4", + "profile": "https://github.com/edwinveldhuizen", + "contributions": [ + "code" + ] } ], "contributorsPerLine": 7, diff --git a/README.md b/README.md index 95a38c15..ad161392 100644 --- a/README.md +++ b/README.md @@ -228,6 +228,7 @@ In the configuration file you can use both the configuration that we specified h | `loadLocaleFrom` | Change the way you load the namespaces. | `function` that returns a `Promise` with the `JSON`. | By default is loading the namespaces from **locales** root directory. | | `pages` | An object that defines the namespaces used in each page. Example of object: `{"/": ["home", "example"]}`. To add namespaces to all pages you should use the key `"*"`, ex: `{"*": ["common"]}`. It's also possible to use regex using `rgx:` on front: `{"rgx:/form$": ["form"]}`. You can also use a function instead of an array, to provide some namespaces depending on some rules, ex: `{ "/": ({ req, query }) => query.type === 'example' ? ['example'] : []}` | `Object` | `{}` | | `logger` | Function to log the **missing keys** in development and production. If you are using `i18n.json` as config file you should change it to `i18n.js`. | `function` | By default the logger is a function doing a `console.warn` only in development. | | +| `loggerEnvironment` | String to define if the logger should run in the browser, in node or both | `"node"` | `"browser"` | `"both"` | `"browser"` | | | `logBuild` | Each page has a log indicating: namespaces, current language and method used to load the namespaces. With this you can disable it. | `Boolean` | `true` | | `loader` | If you wish to disable the webpack loader and manually load the namespaces on each page, we give you the opportunity to do so by disabling this option. | `Boolean` | `true` | | `interpolation` | Change the delimeter that is used for interpolation. | `{prefix: string; suffix: string, formatter: function }` | `{prefix: '{{', suffix: '}}'}` @@ -962,6 +963,10 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
Kaan Atakan
💻
Romain
💻 + +
Arnau Jiménez
💻 +
Edwin Veldhuizen
💻 + diff --git a/package.json b/package.json index 5d1dcb4c..a2c364cf 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "next-translate", - "version": "1.3.5", + "version": "1.4.0", "description": "Tiny and powerful i18n tools (Next plugin + API) to translate your Next.js pages.", "license": "MIT", "keywords": [ diff --git a/src/formatElements.tsx b/src/formatElements.tsx index 63af4ff1..29ca9beb 100644 --- a/src/formatElements.tsx +++ b/src/formatElements.tsx @@ -1,9 +1,4 @@ -import { - cloneElement, - Fragment, - ReactElement, - ReactNode, -} from 'react' +import React, { cloneElement, Fragment, ReactElement, ReactNode } from 'react' const tagRe = /<(\w+)>(.*?)<\/\1>|<(\w+)\/>/ const nlRe = /(?:\r\n|\r|\n)/g @@ -20,7 +15,6 @@ function getElements( ].concat(getElements(parts.slice(4, parts.length))) } - export default function formatElements( value: string, elements: ReactElement[] | Record = [] diff --git a/src/index.tsx b/src/index.tsx index b58f8fd0..edf8f671 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -52,6 +52,7 @@ export interface I18nConfig { localesToIgnore?: string[] pages?: Record logger?: I18nLogger + loggerEnvironment?: 'node' | 'browser' | 'both' staticsHoc?: Function extensionsRgx?: string loader?: boolean diff --git a/src/transCore.tsx b/src/transCore.tsx index 2597d824..d796ca39 100644 --- a/src/transCore.tsx +++ b/src/transCore.tsx @@ -32,7 +32,7 @@ export default function transCore({ const t: Translate = (key = '', query, options) => { const k = Array.isArray(key) ? key[0] : key - const { nsSeparator = ':' } = config + const { nsSeparator = ':', loggerEnvironment = 'browser' } = config const { i18nKey, namespace = options?.ns ?? config.defaultNS } = splitNsKey( k, @@ -52,8 +52,12 @@ export default function transCore({ ? [options.fallback] : options?.fallback || [] - // Log only during CSR - if (typeof window !== 'undefined' && empty) { + if ( + empty && + (loggerEnvironment === 'both' || + loggerEnvironment === + (typeof window === 'undefined' ? 'node' : 'browser')) + ) { logger({ namespace, i18nKey }) } diff --git a/src/useTranslation.tsx b/src/useTranslation.tsx index aa389b75..c3224475 100644 --- a/src/useTranslation.tsx +++ b/src/useTranslation.tsx @@ -1,12 +1,15 @@ -import { useContext } from 'react' +import { useContext, useMemo } from 'react' import { I18n } from '.' import wrapTWithDefaultNs from './wrapTWithDefaultNs' import I18nContext from './_context' export default function useTranslation(defaultNS?: string): I18n { const ctx = useContext(I18nContext) - return { - ...ctx, - t: wrapTWithDefaultNs(ctx.t, defaultNS), - } + return useMemo( + () => ({ + ...ctx, + t: wrapTWithDefaultNs(ctx.t, defaultNS), + }), + [ctx.lang, defaultNS] + ) }