Merge pull request #1061 from aralroca/add-hoc-to-fix-client-componen…

…ts-in-next-translate-plugin

add hoc to fix client components in next-translate-plugin

package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-translate",
-  "version": "2.0.6",
+  "version": "2.3.0-canary.3",
   "description": "Tiny and powerful i18n tools (Next plugin + API) to translate your Next.js pages.",
   "license": "MIT",
   "keywords": [

src/index.tsx

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

src/withTranslationClientComponent.tsx

@@ -0,0 +1,59 @@
+import React, { useEffect, useReducer } from 'react'
+import type { LoaderConfig } from '.'
+
+/**
+ * @description HOC for internal use only (used by next-translate-plugin)
+ */
+export default function withTranslationClientComponent<
+  P extends JSX.IntrinsicAttributes
+>(
+  Component: React.ComponentType<P>,
+  i18nConfig: LoaderConfig
+): React.ComponentType<P> {
+  function WithTranslation(props: P) {
+    // @ts-ignore
+    const forceUpdate = useReducer(() => [])[1]
+    const isClient = typeof window !== 'undefined'
+
+    if (isClient && !window.__NEXT_TRANSLATE__) {
+      window.__NEXT_TRANSLATE__ = {
+        lang: i18nConfig.defaultLocale!,
+        namespaces: {},
+      }
+      update(false)
+    }
+
+    if (isClient && !window.i18nConfig) {
+      window.i18nConfig = i18nConfig
+    }
+
+    useEffect(update)
+
+    function update(rerender = true) {
+      const el = document.getElementById('__NEXT_TRANSLATE_DATA__')
+
+      if (!el) return
+
+      const { lang, ns, pathname } = el.dataset as {
+        lang: string
+        ns: string
+        pathname: string
+      }
+
+      const shouldRerender =
+        lang !== window.__NEXT_TRANSLATE__.lang ||
+        pathname !== window.__NEXT_TRANSLATE__.pathname
+
+      window.__NEXT_TRANSLATE__ = { lang, namespaces: JSON.parse(ns), pathname }
+
+      if (shouldRerender && rerender) forceUpdate()
+    }
+
+    return <Component {...props} />
+  }
+
+  const displayName = Component.displayName || Component.name || 'Component'
+  WithTranslation.displayName = `withTranslationClientComponent(${displayName})`
+
+  return WithTranslation
+}