@graphcommerce/lingui-next 1.2.4 → 2.0.0

package/CHANGELOG.md

@@ -1,38 +1,52 @@
 # Change Log
 
-All notable changes to this project will be documented in this file.
-See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+## 2.0.0
 
-## [1.2.1](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/lingui-next@1.2.0...@graphcommerce/lingui-next@1.2.1) (2021-12-03)
+### Major Changes
 
+- [#1258](https://github.com/ho-nl/m2-pwa/pull/1258)
+  [`ad36382a4`](https://github.com/ho-nl/m2-pwa/commit/ad36382a4d55d83d9e47b7eb6a02671a2a631a05)
+  Thanks [@paales](https://github.com/paales)! - Upgraded to Material UI 5
 
-### Bug Fixes
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-* make sure we're not throwing a generic 'No locales specified' when there is a generic error ([fd3dd23](https://github.com/ho-nl/m2-pwa/commit/fd3dd233fb293f6afc08636316a34d2a2db4bbc3))
+## [1.3.1](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/lingui-next@1.3.0...@graphcommerce/lingui-next@1.3.1) (2022-01-04)
 
+### Bug Fixes
 
+- pages would be blank because the locale couldn't properly be loaded
+  ([5fe9ecd](https://github.com/ho-nl/m2-pwa/commit/5fe9ecd204c3f9efddcf95d54464b1b931ef682e))
 
+# [1.3.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/lingui-next@1.2.4...@graphcommerce/lingui-next@1.3.0) (2022-01-03)
 
+### Features
 
-# [1.2.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/lingui-next@1.1.0...@graphcommerce/lingui-next@1.2.0) (2021-11-12)
+- **framer-next-pages:** reduce rerenders when navigating to a new page
+  ([5cf3301](https://github.com/ho-nl/m2-pwa/commit/5cf330130bb3527057da015e3c4a6fa295d7262e))
 
+## [1.2.1](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/lingui-next@1.2.0...@graphcommerce/lingui-next@1.2.1) (2021-12-03)
 
 ### Bug Fixes
 
-* error in cli about missing plurals ([fedde70](https://github.com/ho-nl/m2-pwa/commit/fedde70012b0b5694114a0f5c3ab0f7d5c8cd276))
-
+- make sure we're not throwing a generic 'No locales specified' when there is a generic error
+  ([fd3dd23](https://github.com/ho-nl/m2-pwa/commit/fd3dd233fb293f6afc08636316a34d2a2db4bbc3))
 
-### Features
-
-* added tons of translations ([9bb0ac7](https://github.com/ho-nl/m2-pwa/commit/9bb0ac709b58df6ea6141e92e4923a5ca9ae2963))
+# [1.2.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/lingui-next@1.1.0...@graphcommerce/lingui-next@1.2.0) (2021-11-12)
 
+### Bug Fixes
 
+- error in cli about missing plurals
+  ([fedde70](https://github.com/ho-nl/m2-pwa/commit/fedde70012b0b5694114a0f5c3ab0f7d5c8cd276))
 
+### Features
 
+- added tons of translations
+  ([9bb0ac7](https://github.com/ho-nl/m2-pwa/commit/9bb0ac709b58df6ea6141e92e4923a5ca9ae2963))
 
 # 1.1.0 (2021-11-11)
 
-
 ### Features
 
-* lingui configuration and integration greatly simplified and fixed ssr ([d8ec22a](https://github.com/ho-nl/m2-pwa/commit/d8ec22a80295af854a4cf6f357c4fb137c5b550d))
+- lingui configuration and integration greatly simplified and fixed ssr
+  ([d8ec22a](https://github.com/ho-nl/m2-pwa/commit/d8ec22a80295af854a4cf6f357c4fb137c5b550d))

package/components/LinguiProvider.tsx

@@ -1,29 +1,28 @@
 import { i18n, Messages } from '@lingui/core'
 import { I18nProvider, I18nProviderProps } from '@lingui/react'
 import { nl, en, fr } from 'make-plural/plurals'
-import { useRouter } from 'next/router'
 import React, { useMemo } from 'react'
-import { MessageLoader } from '../types'
+import { MessageLoader, SyncMessageLoader } from '../types'
 
 type LinguiProviderProps = Omit<I18nProviderProps, 'i18n'> & {
   children: React.ReactNode
   loader: MessageLoader
+  ssrLoader: SyncMessageLoader
+  locale: string
 }
 
+// todo: Load these plurals with a loader, however dynamic imports doesn't support tree shaking so loading them dynamically will load all locales.
 i18n.loadLocaleData({
   nl: { plurals: nl },
   fr: { plurals: fr },
   en: { plurals: en },
 })
 
-export default function LinguiProvider(props: LinguiProviderProps) {
-  const { loader, ...i18nProviderPRops } = props
+export function LinguiProvider(props: LinguiProviderProps) {
+  const { loader, ssrLoader, locale, ...i18nProviderPRops } = props
 
-  const { locale = 'en' } = useRouter()
   useMemo(() => {
-    const localeOnly = locale?.split('-')?.[0]
-
-    if (!localeOnly) return
+    const localeOnly = locale?.split('-')[0]
     const data = globalThis.document?.getElementById('lingui')
 
     if (data?.lang === localeOnly && data.textContent) {
@@ -31,24 +30,32 @@ export default function LinguiProvider(props: LinguiProviderProps) {
       i18n.load(localeOnly, JSON.parse(data.textContent) as Messages)
       i18n.activate(localeOnly)
     } else if (i18n.locale !== locale) {
-      // eslint-disable-next-line @typescript-eslint/no-floating-promises
-      ;(async () => {
-        try {
-          const { messages } = await loader(localeOnly)
-          i18n.load(localeOnly, messages)
-          i18n.activate(localeOnly)
-        } catch (e) {
-          if (process.env.NODE_ENV !== 'production')
-            throw new Error(
-              `Can not find the .po file for the locale '${localeOnly}'. Possible reasons:
-- If you've added a new locale, please run 'yarn lingui:extact' to generate the .po file.
-- Make sure the passed load function is correct.`,
-            )
-          if (process.env.NODE_ENV === 'production') console.error(e)
-        }
-      })()
+      if (typeof window === 'undefined') {
+        const { messages } = ssrLoader(localeOnly)
+        i18n.load(localeOnly, messages)
+        i18n.activate(localeOnly)
+      } else {
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises
+        ;(async () => {
+          try {
+            const { messages } = await loader(localeOnly)
+            i18n.load(localeOnly, messages)
+            i18n.activate(localeOnly)
+          } catch (e) {
+            if (process.env.NODE_ENV !== 'production')
+              throw new Error(
+                `Could not load locale. Can't find the .po file for the locale '${localeOnly}'. Possible reasons:
+- You have configured a new locale in the .env and there is no .po file for it. Please run 'yarn lingui:extact' to generate the .po file or duplicate an existing one.
+- The load function you passed to is incorrect.`,
+              )
+            if (process.env.NODE_ENV === 'production') console.error(e)
+          }
+        })()
+      }
     }
-  }, [locale, loader])
+    // We dont want to call this when the loader/ssrLoader changes, because it will cause a re-render.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [locale])
 
   return <I18nProvider i18n={i18n} {...i18nProviderPRops} />
 }

package/index.ts

@@ -1,3 +1,3 @@
-export { default as LinguiProvider } from './components/LinguiProvider'
-export * from './utils/linguiWrapGetInitialProps'
+export { LinguiProvider } from './components/LinguiProvider'
+export * from './utils/withLingui'
 export * from './types'

package/package.json

@@ -1,14 +1,11 @@
 {
   "name": "@graphcommerce/lingui-next",
-  "version": "1.2.4",
+  "version": "2.0.0",
   "sideEffects": false,
   "scripts": {
     "dev": "tsc -W"
   },
   "prettier": "@graphcommerce/prettier-config-pwa",
-  "browserslist": [
-    "extends @graphcommerce/browserslist-config-pwa"
-  ],
   "eslintConfig": {
     "extends": "@graphcommerce/eslint-config-pwa",
     "parserOptions": {
@@ -16,21 +13,19 @@
     }
   },
   "dependencies": {
-    "@lingui/core": "^3.13.0",
-    "@lingui/macro": "^3.13.0",
-    "@lingui/react": "^3.13.0"
+    "@lingui/core": "^3.13.2",
+    "@lingui/macro": "^3.13.2",
+    "@lingui/react": "^3.13.2"
   },
   "devDependencies": {
-    "@graphcommerce/browserslist-config-pwa": "^3.0.3",
-    "@graphcommerce/eslint-config-pwa": "^3.1.9",
-    "@graphcommerce/prettier-config-pwa": "^3.0.5",
-    "@graphcommerce/typescript-config-pwa": "^3.1.2",
-    "@playwright/test": "^1.17.1"
+    "@graphcommerce/eslint-config-pwa": "^4.0.0",
+    "@graphcommerce/prettier-config-pwa": "^4.0.0",
+    "@graphcommerce/typescript-config-pwa": "^4.0.0",
+    "@playwright/test": "^1.18.1"
   },
   "peerDependencies": {
-    "next": "^12.0.7",
+    "next": "^12.0.10",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
-  },
-  "gitHead": "06b4426d199de9ec2a9d2ac86d42ab047e59e7e7"
+  }
 }

package/types.ts

@@ -1,3 +1,4 @@
 import { Messages } from '@lingui/core'
 
 export type MessageLoader = (locale: string) => Promise<{ messages: Messages }>
+export type SyncMessageLoader = (locale: string) => { messages: Messages }

package/utils/withLingui.tsx

@@ -0,0 +1,46 @@
+import { i18n } from '@lingui/core'
+// eslint-disable-next-line @next/next/no-document-import-in-page
+import { DocumentContext } from 'next/document'
+// eslint-disable-next-line @next/next/no-document-import-in-page
+import type NextDocument from 'next/document'
+import React from 'react'
+import { MessageLoader } from '../types'
+
+export function withLingui(
+  Document: typeof NextDocument,
+  load: MessageLoader,
+): typeof NextDocument {
+  return class DocumentWithEmotionCache extends Document {
+    static async getInitialProps(ctx: DocumentContext) {
+      const initial = await Document.getInitialProps(ctx)
+
+      const locale = ctx.locale?.split('-')?.[0]
+
+      if (!locale) return initial
+      try {
+        const { messages } = await load(locale)
+
+        i18n.load(locale, messages)
+        i18n.activate(locale)
+
+        return {
+          ...initial,
+          head: [
+            ...(React.Children.toArray(initial.head) as Array<JSX.Element | null>),
+            <script
+              key='lingui'
+              type='application/json'
+              id='lingui'
+              lang={locale}
+              // eslint-disable-next-line react/no-danger
+              dangerouslySetInnerHTML={{ __html: JSON.stringify(messages) }}
+            />,
+          ],
+        }
+      } catch (e) {
+        if (process.env.NODE_ENV !== 'production') console.error(e)
+        return initial
+      }
+    }
+  }
+}

package/utils/linguiWrapGetInitialProps.tsx

@@ -1,42 +0,0 @@
-import { i18n } from '@lingui/core'
-// eslint-disable-next-line @next/next/no-document-import-in-page
-import { DocumentContext, DocumentInitialProps } from 'next/document'
-import React from 'react'
-import { MessageLoader } from '../types'
-
-export function linguiWrapGetInitialProps(
-  getInitialProps: (ctx: DocumentContext) => Promise<DocumentInitialProps>,
-  load: MessageLoader,
-): (ctx: DocumentContext) => Promise<DocumentInitialProps> {
-  return async (ctx: DocumentContext) => {
-    const initial = await getInitialProps(ctx)
-
-    const locale = ctx.locale?.split('-')?.[0]
-
-    if (!locale) return initial
-    try {
-      const { messages } = await load(locale)
-
-      i18n.load(locale, messages)
-      i18n.activate(locale)
-
-      return {
-        ...initial,
-        head: [
-          ...(React.Children.toArray(initial.head) as Array<JSX.Element | null>),
-          <script
-            key='lingui'
-            type='application/json'
-            id='lingui'
-            lang={locale}
-            // eslint-disable-next-line react/no-danger
-            dangerouslySetInnerHTML={{ __html: JSON.stringify(messages) }}
-          />,
-        ],
-      }
-    } catch (e) {
-      if (process.env.NODE_ENV !== 'production') console.error(e)
-      return initial
-    }
-  }
-}