@graphcommerce/lingui-next 1.3.1 → 2.0.0

package/CHANGELOG.md

@@ -1,60 +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.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
+### Major Changes
 
-* pages would be blank because the locale couldn't properly be loaded ([5fe9ecd](https://github.com/ho-nl/m2-pwa/commit/5fe9ecd204c3f9efddcf95d54464b1b931ef682e))
+- [#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
 
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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
 
-* **framer-next-pages:** reduce rerenders when navigating to a new page ([5cf3301](https://github.com/ho-nl/m2-pwa/commit/5cf330130bb3527057da015e3c4a6fa295d7262e))
-
-
-
-
+- **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
 
-* 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))
-
-
-
-
+- 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.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))
-
+- 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))
-
-
-
-
+- 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,7 +1,6 @@
 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, SyncMessageLoader } from '../types'
 
@@ -9,20 +8,21 @@ type LinguiProviderProps = Omit<I18nProviderProps, 'i18n'> & {
   children: React.ReactNode
   loader: MessageLoader
   ssrLoader: SyncMessageLoader
-  locale?: string
+  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) {
+export function LinguiProvider(props: LinguiProviderProps) {
   const { loader, ssrLoader, locale, ...i18nProviderPRops } = props
 
   useMemo(() => {
-    const localeOnly = locale?.split('-')?.[0] ?? 'en'
+    const localeOnly = locale?.split('-')[0]
     const data = globalThis.document?.getElementById('lingui')
 
     if (data?.lang === localeOnly && data.textContent) {
@@ -44,16 +44,18 @@ export default function LinguiProvider(props: LinguiProviderProps) {
           } 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.`,
+                `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.3.1",
+  "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.10",
-    "@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": "dce525a80fd42cebe9af0b207c3bd27f89be9543"
+  }
 }

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