Refactor: Replace i18next with LinguiJS

README.md

@@ -36,7 +36,7 @@
 
 * React using mostly the hooks API & contexts
 * GatsbyJS with themes -> [Emotion](https://emotion.sh/) & [tailwindcss](https://tailwindcss.com/) via [twin.macro](https://github.com/ben-rogerson/twin.macro)
-* Internationalization support via [i18next](https://www.i18next.com/)
+* Internationalization support via [LinguiJS](https://lingui.js.org/)
 * Optional support for menu rendering, icons, themes, color sets, ...
 
 ## Project structure
@@ -46,8 +46,8 @@
     * Has some required configuration opions!
     * Connects to Contentful
     * Integrates MDX into your project
-    * Initializes the MDX data context and i18next
-    * Integrates i18next & emotion
+    * Initializes the MDX data context
+    * Integrates LinguiJS & emotion
   * `gatsby-theme-mdx-suite-base`:
       Adds default components to MDX (https://github.com/axe312ger/gatsby-mdx-suite/blob/master/themes/base/src/gatsby-plugin-theme-ui/components.js)
     * Adds SVG support

examples/basic/.linguirc.js

@@ -0,0 +1,25 @@
+module.exports = {
+  locales: ['en-US'],
+  fallbackLocales: { default: 'en-US' },
+  catalogs: [
+    {
+      path: 'src/locales/{locale}/messages',
+      include: [
+        // Project specific
+        'src',
+        // Normal project
+        'node_modules/@gatsby-mdx-suite',
+        'node_modules/gatsby-theme-mdx-suite-base/src',
+        'node_modules/gatsby-theme-mdx-suite-core/src',
+        // Monorepo
+        '../../node_modules/@gatsby-mdx-suite',
+        '../../node_modules/gatsby-theme-mdx-suite-base/src',
+        '../../node_modules/gatsby-theme-mdx-suite-core/src',
+      ],
+    },
+  ],
+  extractBabelOptions: {
+    presets: ['babel-preset-gatsby'],
+  },
+  format: 'po',
+}

examples/basic/gatsby-config.js

@@ -1,5 +1,6 @@
 const { resolve } = require('path')
 const themeConfig = require('./tailwind.config.js')
+const messagesEn = require('./src/locales/en-US/messages')
 
 // Duplicate and rename .env.example to .env and fill in your credentials
 require('dotenv').config({ path: `.env` })
@@ -28,6 +29,9 @@ module.exports = {
           accessToken: `yfNcvsaJfU6nmL6xzKwbP-WHw27vvDzjTCeFkg93pKk`,
           environment: `basic`,
         },
+        translations: {
+          'en-US': messagesEn,
+        },
       },
     },
     // Basic layout, SEO, Analytics and more

examples/basic/package.json

@@ -17,7 +17,9 @@
     "test": "start-server-and-test serve http://localhost:9000 test:cypress",
     "test:develop": "start-server-and-test serve http://localhost:9000 test:cypress:open",
     "test:cypress": "cypress run",
-    "test:cypress:open": "cypress open"
+    "test:cypress:open": "cypress open",
+    "i18n:extract": "lingui extract",
+    "i18n:compile": "lingui compile"
   },
   "dependencies": {
     "@consent-manager/core": "^0.0.1",
@@ -29,6 +31,8 @@
     "@gatsby-mdx-suite/mdx-video": "^0.9.12",
     "@gatsby-mdx-suite/mdx-vimeo": "^0.7.27",
     "@gatsby-mdx-suite/mdx-youtube": "^0.12.21",
+    "@lingui/cli": "^3.13.2",
+    "@lingui/macro": "^3.13.2",
     "@mdx-js/react": "^1.6.22",
     "deepmerge": "^4.2.2",
     "dotenv": "^10.0.0",
@@ -39,7 +43,6 @@
     "prop-types": "^15.7.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "react-i18next": "^11.11.4",
     "twin.macro": "^2.7.0",
     "use-persisted-state": "^0.3.3"
   },

examples/basic/src/locales/en-US/messages.js

@@ -0,0 +1,15 @@
+/*eslint-disable*/ module.exports = {
+  messages: {
+    contactFormCompany: 'contactFormCompany',
+    contactFormCompanyEmail: 'contactFormCompanyEmail',
+    contactFormFirstName: 'contactFormFirstName',
+    contactFormLastName: 'contactFormLastName',
+    contactFormNumberOfEmployees: 'contactFormNumberOfEmployees',
+    contactFormPosition: 'contactFormPosition',
+    contactFormSubmit: 'contactFormSubmit',
+    contactFormTosAccepted: 'contactFormTosAccepted',
+    copyright: 'copyright',
+    menu: 'menu',
+    translationTest: 'This is translated text',
+  },
+}

examples/basic/src/locales/en-US/messages.po

@@ -0,0 +1,56 @@
+msgid ""
+msgstr ""
+"Project-Id-Version: \n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: \n"
+"PO-Revision-Date: \n"
+"Last-Translator: \n"
+"Language: \n"
+"Language-Team: \n"
+"Content-Type: \n"
+"Content-Transfer-Encoding: \n"
+"Plural-Forms: \n"
+
+#: :129
+msgid "contactFormCompany"
+msgstr ""
+
+#: :119
+msgid "contactFormCompanyEmail"
+msgstr ""
+
+#: :96
+msgid "contactFormFirstName"
+msgstr ""
+
+#: :106
+msgid "contactFormLastName"
+msgstr ""
+
+#: :134
+msgid "contactFormNumberOfEmployees"
+msgstr ""
+
+#: :113
+msgid "contactFormPosition"
+msgstr ""
+
+#: :156
+msgid "contactFormSubmit"
+msgstr ""
+
+#: :152
+msgid "contactFormTosAccepted"
+msgstr ""
+
+#: :33
+msgid "copyright"
+msgstr ""
+
+#: :185
+msgid "menu"
+msgstr ""
+
+#: src/templates/page.js:43
+#~ msgid "translationTest"
+#~ msgstr "This is translated text"

examples/basic/src/templates/page.js

@@ -2,23 +2,23 @@ import React, { useContext, useEffect } from 'react'
 import { graphql } from 'gatsby'
 import * as propTypes from 'prop-types'
 import { MDXRenderer } from 'gatsby-plugin-mdx'
-import { useTranslation } from 'react-i18next'
+import { useLingui } from '@lingui/react'
 
 import MdxSuiteContext from '@gatsby-mdx-suite/contexts/mdx-suite'
 import mergeContextData from '@gatsby-mdx-suite/helpers/data/merge-context-data'
 
 import SEO from 'gatsby-theme-mdx-suite-base/src/components/layout/seo'
 
 function PageTemplate({ data, pageContext }) {
-  const { i18n } = useTranslation()
+  const { i18n } = useLingui()
   const MdxSuiteData = useContext(MdxSuiteContext)
 
   const { title, content, metaDescription, metaImage } = data.contentfulPage
 
-  // Set current i18next translation language based on page locale
+  // Set current translation language based on page locale
   useEffect(() => {
-    if (pageContext.locale !== i18n.language) {
-      i18n.changeLanguage(pageContext.locale)
+    if (pageContext.locale !== i18n.locale) {
+      i18n.activate(pageContext.locale)
     }
   }, [pageContext.locale, i18n])
 

examples/full/.linguirc.js

@@ -0,0 +1,27 @@
+module.exports = {
+  locales: ['en-US'],
+  fallbackLocales: { default: 'en-US' },
+  catalogs: [
+    {
+      path: 'src/locales/{locale}/messages',
+      include: [
+        // Project specific
+        'src',
+        // Normal project
+        'node_modules/@gatsby-mdx-suite',
+        'node_modules/gatsby-theme-mdx-suite-base/src',
+        'node_modules/gatsby-theme-mdx-suite-core/src',
+        'node_modules/gatsby-theme-mdx-suite-blog/src',
+        // Monorepo
+        '../../node_modules/@gatsby-mdx-suite',
+        '../../node_modules/gatsby-theme-mdx-suite-base/src',
+        '../../node_modules/gatsby-theme-mdx-suite-core/src',
+        '../../node_modules/gatsby-theme-mdx-suite-blog/src',
+      ],
+    },
+  ],
+  extractBabelOptions: {
+    presets: ['babel-preset-gatsby'],
+  },
+  format: 'po',
+}

examples/full/gatsby-config.js

@@ -1,13 +1,32 @@
 const { resolve } = require('path')
+const merge = require('deepmerge')
+
+const tailwindConfigStub = require('gatsby-theme-mdx-suite-core/src/tailwind.default.config')
+const minimumConfig = require('gatsby-theme-mdx-suite-core/minimum-config')
+
 const themeConfig = require('./tailwind.config.js')
+const localesEn = require('./src/locales/en-US/messages')
+const localesDe = require('./src/locales/de/messages')
 
 const isProduction = process.env.NODE_ENV === 'production'
 
 // Duplicate and rename .env.example to .env and fill in your credentials
 require('dotenv').config({ path: `.env` })
 
-const translationsEn = require('./translations/en')
-const translationsDe = require('./translations/de')
+function prepareMdxSuiteOptions(config) {
+  const mergedConfig = merge(minimumConfig, config, {
+    arrayMerge: (destinationArray, sourceArray, options) => sourceArray,
+  })
+
+  const theme = merge(tailwindConfigStub, mergedConfig.themeConfig.theme.extend)
+
+  const cleanConfig = Object.entries(mergedConfig)
+    .filter(([key]) => !['themeConfig', 'mediaCollections'].includes(key))
+    .reduce((obj, [key, val]) => Object.assign(obj, { [key]: val }), {})
+
+  // @todo clean up this mess!
+  return { ...cleanConfig, cleanConfig, theme }
+}
 
 module.exports = {
   pathPrefix: ``,
@@ -20,7 +39,7 @@ module.exports = {
   plugins: [
     {
       resolve: `gatsby-theme-mdx-suite-core`,
-      options: {
+      options: prepareMdxSuiteOptions({
         // Configure the MDX Suite
         themeConfig,
         /**
@@ -32,13 +51,14 @@ module.exports = {
           'en-US': '',
           de: 'de',
         },
-        // Will be passes as resources to i18next.
-        // See https://www.i18next.com/overview/configuration-options
+        // Will be passed to LinguiJS.
+        // @todo can't we automatically import that in onPreInit?
         translations: {
-          'en-US': translationsEn,
-          de: translationsDe,
+          'en-US': localesEn.messages,
+          de: localesDe.messages,
         },
         /**
+         * @todo this is!!! exposed via page state json. Switch to env vars!!
          * Contentful credentials from environment variables will be used by default.
          * Never hardcode API credentials in your projects.
          * This is a exception for demonstration purposes.
@@ -48,7 +68,7 @@ module.exports = {
           accessToken: `yfNcvsaJfU6nmL6xzKwbP-WHw27vvDzjTCeFkg93pKk`,
           environment: `full`,
         },
-      },
+      }),
     },
     // Basic layout, SEO, Analytics and more
     {

examples/full/gatsby-node.js

@@ -1,6 +1,17 @@
 const { resolve } = require('path')
 const { createPath } = require('@gatsby-mdx-suite/helpers/routing')
 
+// exports.onPreInit = async ({ store }, config) => {
+// const program = store.getState().program
+// const rootDir = program.directory
+// console.log({
+//   rootDir,
+//   store,
+//   key: Object.keys(store),
+//   state: store.getState(),
+// })
+// }
+
 exports.createPages = async ({ graphql, actions, getCache }) => {
   const { createPage, createRedirect } = actions
   const { config } = await getCache().get('mdx-suite')

examples/full/package.json

@@ -17,7 +17,9 @@
     "test": "start-server-and-test serve http://localhost:9000 test:cypress",
     "test:develop": "start-server-and-test serve http://localhost:9000 test:cypress:open",
     "test:cypress": "cypress run",
-    "test:cypress:open": "cypress open"
+    "test:cypress:open": "cypress open",
+    "i18n:extract": "lingui extract",
+    "i18n:compile": "lingui compile"
   },
   "dependencies": {
     "@consent-manager/core": "^0.0.1",
@@ -36,6 +38,8 @@
     "@gatsby-mdx-suite/mdx-video": "^0.9.12",
     "@gatsby-mdx-suite/mdx-vimeo": "^0.7.27",
     "@gatsby-mdx-suite/mdx-youtube": "^0.12.21",
+    "@lingui/cli": "^3.13.2",
+    "@lingui/macro": "^3.13.2",
     "@react-icons/all-files": "^4.1.0",
     "deepmerge": "^4.2.2",
     "dotenv": "^10.0.0",
@@ -50,7 +54,6 @@
     "prop-types": "^15.7.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "react-i18next": "^11.11.4",
     "react-scrolllock": "^5.0.1",
     "twin.macro": "^2.7.0",
     "use-persisted-state": "^0.3.3"