Merge pull request #831 from vinissimus/canary

Release 1.4

.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,

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<string[] or function>` | `{}` |
 | `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"` &#124; `"browser"` &#124; `"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
  <td align="center"><a href="https://github.com/kaan-atakan"><img src="https://avatars.githubusercontent.com/u/56063979?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Kaan Atakan</b></sub></a><br /><a href="https://github.com/vinissimus/next-translate/commits?author=kaan-atakan" title="Code">💻</a></td>
  <td align="center"><a href="https://github.com/groomain"><img src="https://avatars.githubusercontent.com/u/3601848?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Romain</b></sub></a><br /><a href="https://github.com/vinissimus/next-translate/commits?author=groomain" title="Code">💻</a></td>
  </tr>
+ <tr>
+ <td align="center"><a href="http://ajb.cat"><img src="https://avatars.githubusercontent.com/u/57961822?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Arnau Jiménez</b></sub></a><br /><a href="https://github.com/vinissimus/next-translate/commits?author=ajmnz" title="Code">💻</a></td>
+ <td align="center"><a href="https://github.com/edwinveldhuizen"><img src="https://avatars.githubusercontent.com/u/1787915?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Edwin Veldhuizen</b></sub></a><br /><a href="https://github.com/vinissimus/next-translate/commits?author=edwinveldhuizen" title="Code">💻</a></td>
+ </tr>
 </table>
 
 <!-- markdownlint-restore -->

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": [

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<string, ReactElement> = []

src/index.tsx

@@ -52,6 +52,7 @@ export interface I18nConfig {
  localesToIgnore?: string[]
  pages?: Record<string, PageValue>
  logger?: I18nLogger
+ loggerEnvironment?: 'node' | 'browser' | 'both'
  staticsHoc?: Function
  extensionsRgx?: string
  loader?: boolean

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 })
  }
 

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]
+ )
 }