@graphcommerce/lingui-next 8.0.5 → 8.0.6-canary.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Change Log
 
+## 8.0.6-canary.0
+
+### Patch Changes
+
+- [#2196](https://github.com/graphcommerce-org/graphcommerce/pull/2196) [`84c50e4`](https://github.com/graphcommerce-org/graphcommerce/commit/84c50e49a1a7f154d4a8f4045c37e773e20283ad) - Allow Lingui to use linguiLocale with country identifiers like `en-us`, it would always load `en` in this case. Introced a new `useLocale` hook to use the correct locale string to use in Intl methods.
+  ([@paales](https://github.com/paales))
+
 ## 8.0.5
 
 ## 8.0.5-canary.10

package/Config.graphqls

@@ -1,6 +1,8 @@
 extend input GraphCommerceStorefrontConfig {
   """
-  Specify a custom locale for to load translations.
+  Specify a custom locale for to load translations. Must be lowercase valid locale.
+
+  This value is also used for the Intl.
   """
   linguiLocale: String
 }

package/components/LinguiProvider.tsx

@@ -1,23 +1,29 @@
-import { storefrontConfig, storefrontConfigDefault } from '@graphcommerce/next-ui'
+import { useLocale } from '@graphcommerce/next-ui'
 import { i18n, Messages } from '@lingui/core'
 import { I18nProvider, I18nProviderProps } from '@lingui/react'
 import React, { useMemo } from 'react'
 import { MessageLoader, SyncMessageLoader } from '../types'
+import { normalizeLocale } from '../lib/normalizeLocale'
 
 export type LinguiProviderProps = Omit<I18nProviderProps, 'i18n'> & {
   children: React.ReactNode
   loader: MessageLoader
   ssrLoader: SyncMessageLoader
-  locale: string
+  /**
+   * @deprecated not necessary anumore
+   */
+  locale?: string
 }
 
-export const localeConfig = (locale: string = storefrontConfigDefault().locale) =>
-  storefrontConfig(locale)?.linguiLocale ?? locale?.split('-')[0]
+/**
+ * @deprecated use normalizeLocale
+ */
+export const localeConfig = normalizeLocale
 
 export function LinguiProvider(props: LinguiProviderProps) {
   const { loader, ssrLoader, locale, ...i18nProviderProps } = props
 
-  const localeOnly = localeConfig(locale)
+  const localeOnly = useLocale()
 
   useMemo(() => {
     const data = globalThis.document?.getElementById('lingui')

package/config.js

@@ -15,9 +15,7 @@ function linguiNextConfig(config) {
   const { locales, ...otherConfig } = config
   return {
     orderBy: 'messageId',
-    locales: isMonorepo()
-      ? ['en', 'nl', 'fr', 'de', 'es', 'it']
-      : config.locales.map((l) => l?.split('-')[0]),
+    locales: isMonorepo() ? ['en', 'nl', 'fr', 'de', 'es', 'it'] : config.locales,
     // formatOptions: { lineNumbers: false, origins: false, explicitIdAsDefault: true },
     format: formatter({ explicitIdAsDefault: true, lineNumbers: false, origins: false }),
     catalogs: [

package/document/withLingui.tsx

@@ -4,6 +4,7 @@ import { DocumentContext, DocumentInitialProps } 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 { normalizeLocale } from '../lib/normalizeLocale'
 import { MessageLoader } from '../types'
 
 export type LinguiDocumentProps = { linguiScriptTag: React.ReactNode }
@@ -16,7 +17,7 @@ export function withLingui(
     static async getInitialProps(ctx: DocumentContext) {
       const initial = await Document.getInitialProps(ctx)
 
-      const locale = ctx.locale?.split('-')?.[0]
+      const locale = normalizeLocale(ctx.locale)
 
       if (!locale) return initial
       try {

package/lib/normalizeLocale.ts

@@ -1,3 +1,5 @@
+import { storefrontConfig, storefrontConfigDefault } from '@graphcommerce/next-ui'
+
 /**
  * To support using multiple storefronts using the same language locale (which
  * next.js does not support), we use an additional 'tag' in the locale code in
@@ -9,16 +11,16 @@
  * Use this method to get a 'normalized' locale that can safely be used in such
  * places.
  */
-export function normalizeLocale(locale: string | undefined) {
-  if (!locale) return locale
+export function normalizeLocale(locale: string | undefined = storefrontConfigDefault().locale) {
+  const linguiLocale = storefrontConfig(locale)?.linguiLocale
+  if (linguiLocale) return linguiLocale
 
   // Specifically match the xx-yy-storecode format, so we don't accidently 'fix'
   // valid locales such as he-Hebr-IL or zh-Hans-CN. This this isn't perfect and
   // we should consider a more formalized way to use such pseudo-locales, which
   // can be matched more precisely.
+
   const matches = locale?.match(/([a-z]{2})-([a-z]{2})-([a-z]+)/i)
-  if (matches) {
-    return `${matches[1]}-${matches[2]}`
-  }
+  if (matches) return `${matches[1]}-${matches[2]}`
   return locale
 }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/lingui-next",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "8.0.5",
+  "version": "8.0.6-canary.0",
   "sideEffects": false,
   "scripts": {
     "dev": "tsc -W"
@@ -18,11 +18,11 @@
     "@lingui/conf": "4.7.0"
   },
   "peerDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^8.0.5",
-    "@graphcommerce/next-config": "^8.0.5",
-    "@graphcommerce/next-ui": "^8.0.5",
-    "@graphcommerce/prettier-config-pwa": "^8.0.5",
-    "@graphcommerce/typescript-config-pwa": "^8.0.5",
+    "@graphcommerce/eslint-config-pwa": "^8.0.6-canary.0",
+    "@graphcommerce/next-config": "^8.0.6-canary.0",
+    "@graphcommerce/next-ui": "^8.0.6-canary.0",
+    "@graphcommerce/prettier-config-pwa": "^8.0.6-canary.0",
+    "@graphcommerce/typescript-config-pwa": "^8.0.6-canary.0",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",