Update package.json version (#1087)

__tests__/getT.test.js

@@ -1,5 +1,4 @@
 import getT from '../src/getT'
-import store from '../src/_store'
 
 const mockLoadLocaleFrom = jest.fn()
 
@@ -10,7 +9,7 @@ global.i18nConfig = {
 
 describe('getT', () => {
   beforeEach(() => {
-    store.set()
+    globalThis.__NEXT_TRANSLATE__ = {}
     mockLoadLocaleFrom.mockImplementation((__lang, ns) => {
       if (ns === 'ns1') {
         return Promise.resolve({
@@ -46,12 +45,12 @@ describe('getT', () => {
 
   test('should work inside appDir', async () => {
     const mockAppDirLoadLocaleFrom = jest.fn()
-    store.set({
+    globalThis.__NEXT_TRANSLATE__ = {
       config: {
         keySeparator: false,
         loadLocaleFrom: (...args) => mockAppDirLoadLocaleFrom(...args),
       },
-    })
+    }
     mockAppDirLoadLocaleFrom.mockImplementationOnce(async (__lang, ns) => ({
       'example-app-dir': 'works',
     }))

__tests__/useTranslation.test.js

@@ -2,7 +2,6 @@ import React, { useState } from 'react'
 import { render, cleanup, fireEvent } from '@testing-library/react'
 import I18nProvider from '../src/I18nProvider'
 import useTranslation from '../src/useTranslation'
-import _store from '../src/_store'
 
 const Inner = ({ i18nKey, query }) => {
   const { t } = useTranslation()
@@ -1526,7 +1525,7 @@ describe('useTranslation', () => {
   })
 
   describe('Next.js 13 app-dir', () => {
-    test('should work without context (with _store)', () => {
+    test('should work without context (with globalThis.__NEXT_TRANSLATE__)', () => {
       const Inner = () => {
         const { t } = useTranslation()
         const text = t('ns:interpolation', {
@@ -1537,15 +1536,15 @@ describe('useTranslation', () => {
 
       const expected = 'There are 3 cats.'
 
-      _store.set({
+      globalThis.__NEXT_TRANSLATE__ = {
         namespaces: {
           ns: {
             interpolation: 'There are {{count}} cats.',
           },
         },
         lang: 'en',
         config: {},
-      })
+      }
 
       const { container } = render(<Inner />)
       expect(container.textContent).toContain(expected)

examples/basic/package.json

@@ -14,6 +14,6 @@
     "react-dom": "link:../../node_modules/react-dom"
   },
   "devDependencies": {
-    "next-translate-plugin": "2.4.0"
+    "next-translate-plugin": "2.4.1"
   }
 }

examples/complex/package.json

@@ -21,7 +21,7 @@
     "@next/bundle-analyzer": "13.4.7",
     "@types/node": "20.3.1",
     "@types/react": "18.2.13",
-    "next-translate-plugin": "2.4.0",
+    "next-translate-plugin": "2.4.1",
     "typescript": "5.1.3"
   },
   "resolutions": {

examples/with-app-directory/package.json

@@ -22,7 +22,7 @@
     "@next/bundle-analyzer": "13.4.6",
     "@types/node": "20.3.1",
     "@types/react": "18.2.12",
-    "next-translate-plugin": "2.4.0",
+    "next-translate-plugin": "2.4.1",
     "typescript": "5.1.3"
   },
   "resolutions": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-translate",
-  "version": "2.4.0",
+  "version": "2.4.1",
   "description": "Tiny and powerful i18n tools (Next plugin + API) to translate your Next.js pages.",
   "license": "MIT",
   "keywords": [
@@ -42,12 +42,12 @@
     "useTranslation*",
     "setLanguage*",
     "index*",
-    "_store*"
+    "AppDirI18nProvider*"
   ],
   "scripts": {
     "build": "yarn clean && cross-env NODE_ENV=production && yarn tsc",
     "clean": "yarn clean:build && yarn clean:examples",
-    "clean:build": "rm -rf lib appWith* Dynamic* I18n* index context loadNa* setLang* Trans* useT* withT* getP* getC* *.d.ts getT transC* wrapT* types formatElements _store*",
+    "clean:build": "rm -rf lib appWith* Dynamic* I18n* index context loadNa* setLang* Trans* useT* withT* getP* getC* *.d.ts getT transC* wrapT* types formatElements AppDirI18nProvider*",
     "clean:examples": "rm -rf examples/**/.next && rm -rf examples/**/node_modules && rm -rf examples/**/yarn.lock",
     "example": "yarn example:complex",
     "example:basic": "yarn build && yarn --cwd examples/basic && yarn --cwd examples/basic dev",

src/AppDirI18nProvider.tsx

@@ -0,0 +1,27 @@
+'use client'
+
+import { I18nDictionary, LoaderConfig } from '.'
+
+type AppDirI18nProviderProps = {
+  lang: string
+  namespaces: Record<string, I18nDictionary>
+  config: LoaderConfig
+  children: React.ReactNode
+}
+
+/**
+ * @description AppDirI18nProvider for internal use (next-translate-plugin) only.
+ * Is required because this is a RCC (React Client Component) and this way we
+ * provide a global i18n context for client components.
+ */
+export default function AppDirI18nProvider({
+  lang,
+  namespaces = {},
+  config,
+  children,
+}: AppDirI18nProviderProps) {
+  globalThis.__NEXT_TRANSLATE__ = { lang, namespaces, config }
+
+  // It return children and avoid re-renders and also allow children to be RSC (React Server Components)
+  return children
+}

src/getT.tsx

@@ -1,14 +1,13 @@
 import getConfig from './getConfig'
 import transCore from './transCore'
-import store from './_store'
 import wrapTWithDefaultNs from './wrapTWithDefaultNs'
 import { I18nDictionary, LocaleLoader } from './index'
 
 export default async function getT(
   locale = '',
   namespace: string | string[] = ''
 ) {
-  const appDir = store.get()
+  const appDir = globalThis.__NEXT_TRANSLATE__
   const config = appDir?.config ?? getConfig()
   const defaultLoader = async () => Promise.resolve<I18nDictionary>({})
   const lang = locale || config.defaultLocale || ''

src/index.tsx

@@ -121,7 +121,7 @@ declare global {
   var __NEXT_TRANSLATE__: {
     namespaces: Record<string, I18nDictionary>
     lang: string
-    pathname?: string
+    config: LoaderConfig
   }
 
   namespace NodeJS {

src/loadNamespaces.tsx

@@ -1,12 +1,12 @@
-import { LoaderConfig, LocaleLoader } from '.'
+import { I18nDictionary, LoaderConfig, LocaleLoader } from '.'
 import getConfig from './getConfig'
 import getPageNamespaces from './getPageNamespaces'
 
 export default async function loadNamespaces(
   config: LoaderConfig = {} as LoaderConfig
 ): Promise<{
   __lang: string
-  __namespaces?: Record<string, object>
+  __namespaces?: Record<string, I18nDictionary>
 }> {
   const conf = { ...getConfig(), ...config }
   const localesToIgnore = conf.localesToIgnore || ['default']
@@ -48,10 +48,13 @@ export default async function loadNamespaces(
 
   return {
     __lang,
-    __namespaces: namespaces.reduce((obj: Record<string, object>, ns, i) => {
-      obj[ns] = pageNamespaces[i] || (null as unknown as object)
-      return obj
-    }, {}),
+    __namespaces: namespaces.reduce(
+      (obj: Record<string, I18nDictionary>, ns, i) => {
+        obj[ns] = pageNamespaces[i] || (null as unknown as I18nDictionary)
+        return obj
+      },
+      {}
+    ),
   }
 }
 

src/useTranslation.tsx

@@ -1,6 +1,5 @@
 import { useContext, useMemo } from 'react'
 import { I18n } from '.'
-import store from './_store'
 import wrapTWithDefaultNs from './wrapTWithDefaultNs'
 import I18nContext from './context'
 import transCore from './transCore'
@@ -17,7 +16,7 @@ function useTranslationInPages(defaultNS?: string): I18n {
 }
 
 function useTranslationAppDir(defaultNS?: string) {
-  const { lang, namespaces, config } = store.get()
+  const { lang, namespaces, config } = globalThis.__NEXT_TRANSLATE__ ?? {}
   const localesToIgnore = config.localesToIgnore || ['default']
   const ignoreLang = localesToIgnore.includes(lang)
   const t = transCore({
@@ -31,7 +30,7 @@ function useTranslationAppDir(defaultNS?: string) {
 }
 
 export default function useTranslation(defaultNS?: string): I18n {
-  const appDir = store.get()
+  const appDir = globalThis.__NEXT_TRANSLATE__
   const useT = appDir?.config ? useTranslationAppDir : useTranslationInPages
   return useT(defaultNS)
 }