make theme compatible to gatsby-plugin-mdx v4

packages/gatsby-theme-i18n-lingui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-theme-i18n-lingui",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "main": "index.js",
   "author": "LekoArts <lekoarts@gmail.com>",
   "description": "A Gatsby theme for providing localization support via Lingui. This theme sets up Lingui's context provider so that you can access your translations on every page. Works best together with gatsby-theme-i18n.",
@@ -10,11 +10,11 @@
     "@lingui/react": "^3.13.0"
   },
   "peerDependencies": {
-    "@lingui/core": "^3.8.9",
-    "@lingui/react": "^3.8.9",
+    "@lingui/core": "^3.13.0",
+    "@lingui/react": "^3.13.0",
     "gatsby": "^4.0.0",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
   "keywords": [
     "i18n",

packages/gatsby-theme-i18n-react-i18next/package.json

@@ -1,19 +1,19 @@
 {
   "name": "gatsby-theme-i18n-react-i18next",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "main": "index.js",
   "author": "LekoArts <lekoarts@gmail.com>",
   "description": "A Gatsby theme for providing localization support via react-i18next. This theme sets up react-i18next's context provider so that you can access your translations on every page. Works best together with gatsby-theme-i18n.",
   "license": "MIT",
   "devDependencies": {
-    "i18next": "^20.6.1",
+    "i18next": "^21.9.1",
     "react-i18next": "^11.14.3"
   },
   "peerDependencies": {
     "gatsby": "^4.0.0",
-    "i18next": "^20.2.1",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0",
+    "i18next": "^21.2.1",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "react-i18next": "^11.8.12"
   },
   "keywords": [

packages/gatsby-theme-i18n/gatsby-node.js

@@ -123,11 +123,14 @@ exports.onCreateNode = ({ node, actions }, themeOptions) => {
   const { defaultLang } = withDefaults(themeOptions)
 
   if (node.internal.type === `Mdx`) {
-    const name = path.basename(node.fileAbsolutePath, `.mdx`)
+      const name = path.basename(
+      node.fileAbsolutePath ?? node.internal.contentFilePath,
+      `.mdx`
+    )
 
     const isDefault = name === `index`
 
-    const lang = isDefault ? defaultLang : name.split(`.`)[1]
+    const lang = isDefault ? defaultLang : name.split(`.`)[1] ?? defaultLang
 
     createNodeField({ node, name: `locale`, value: lang })
     createNodeField({ node, name: `isDefault`, value: isDefault })
@@ -157,22 +160,43 @@ exports.onCreatePage = ({ page, actions }, themeOptions) => {
   })
 
   languages.forEach((locale) => {
+    let theFilePath = page.component
+
+    const [template, mdxFile] = page.component.split(`?__contentFilePath=`)
+
+    // if the mdxFile path possesses a language, let's strip the language to it
+    // ex: index.de.mdx ==> index.mdx
+    if (mdxFile) {
+      //split the filename in three parts split by the dot.
+      let [thePath, /* lang */, ext] = mdxFile.split(`.`)
+      if (ext === `mdx`) {  //if there's data in the third part, just keep the first and last part, removing the language
+        theFilePath = `${thePath}.${ext}`
+      } else {   //if there's no content in the third part, it means that there's no language part. No need to remove the language
+        theFilePath = mdxFile
+      }
+
+      //if we use a non-default language, and the language file is on the disk, then use it
+      ;[thePath, ext] = theFilePath.split(`.`)
+      if (ext === `mdx` && locale.code !== defaultLang) {
+        if (fs.existsSync(`${thePath}.${locale.code}.${ext}`)) {
+          theFilePath = `${thePath}.${locale.code}.${ext}`
+        }else{
+          //nothing to render if file doen't exist
+          theFilePath=''
+        }
+      }
+
+      theFilePath = `${template}?__contentFilePath=${theFilePath}`
+    }
+
     const newPage = {
-      ...page,
       path: localizedPath({
         defaultLang,
         prefixDefault,
         locale: locale.code,
         path: originalPath,
       }),
-      matchPath: page.matchPath
-        ? localizedPath({
-            defaultLang,
-            prefixDefault,
-            locale: locale.code,
-            path: page.matchPath,
-          })
-        : page.matchPath,
+      component: theFilePath,
       context: {
         ...page.context,
         locale: locale.code,
@@ -190,7 +214,7 @@ exports.onCreatePage = ({ page, actions }, themeOptions) => {
 
     createPage(newPage)
   })
-
+  
   // When prefixDefault is set the default development & production 404 pages
   // will be deleted but not re-created in the above `languages.forEach` segment
   // Thus we'll re-create them manually here

packages/gatsby-theme-i18n/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-theme-i18n",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "main": "index.js",
   "types": "index.d.ts",
   "author": "LekoArts <lekoarts@gmail.com>",
@@ -13,8 +13,8 @@
   "peerDependencies": {
     "gatsby": "^4.0.0",
     "gatsby-plugin-react-helmet": "^5.0.0",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "react-helmet": "^6.1.0"
   },
   "keywords": [
@@ -31,5 +31,8 @@
   "homepage": "https://github.com/gatsbyjs/themes/tree/master/packages/gatsby-theme-i18n#readme",
   "engines": {
     "node": ">=14.15.0"
+  },
+  "dependencies": {
+    "gatsby-cypress": "^2.3.0"
   }
 }

starters/example-i18n/gatsby-config.js

@@ -40,9 +40,9 @@ module.exports = {
     {
       resolve: `gatsby-plugin-mdx`,
       options: {
-        defaultLayouts: {
-          default: require.resolve(`./src/components/layout.js`),
-        },
+        // defaultLayouts: {
+        //   default: require.resolve(`./src/components/layout.js`),
+        // },
       },
     },
   ],

starters/example-i18n/gatsby-node.js

@@ -11,6 +11,9 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
             frontmatter {
               slug
             }
+            internal {
+              contentFilePath
+            }
           }
         }
       }
@@ -27,7 +30,7 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
   blogPosts.forEach(({ childMdx: node }) => {
     createPage({
       path: node.frontmatter.slug,
-      component: blogTemplate,
+      component: `${blogTemplate}?__contentFilePath=${node.internal.contentFilePath}`,
       context: {
         slug: node.frontmatter.slug,
       },

starters/example-i18n/package.json

@@ -12,16 +12,16 @@
     "serve": "gatsby serve"
   },
   "dependencies": {
-    "@mdx-js/mdx": "^1.6.22",
-    "@mdx-js/react": "^1.6.22",
+    "@mdx-js/mdx": "^2.1.3",
+    "@mdx-js/react": "^2.1.3",
     "gatsby": "^4.3.0",
     "gatsby-plugin-create-client-paths": "^4.3.0",
-    "gatsby-plugin-mdx": "^3.3.0",
+    "gatsby-plugin-mdx": "^4.1.1",
     "gatsby-plugin-react-helmet": "^5.3.0",
     "gatsby-source-filesystem": "^4.3.0",
-    "gatsby-theme-i18n": "^3.0.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "gatsby-theme-i18n": "^3.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-helmet": "^6.1.0"
   }
 }

starters/example-i18n/src/templates/blog-template.js

@@ -1,20 +1,15 @@
 import * as React from "react"
 import { graphql } from "gatsby"
-import { MDXRenderer } from "gatsby-plugin-mdx"
 import Layout from "../components/layout"
 import Seo from "../components/seo"
 
-const BlogTemplate = ({ data, pageContext }) => {
+const BlogTemplate = ({ data, pageContext, children }) => {
   return (
     <Layout>
-      <Seo title={data.mdx.frontmatter.title} />
+      <Seo title={data.mdx?.frontmatter?.title} />
       <h1>Data</h1>
       <div>
-        {data.mdx ? (
-          <MDXRenderer>{data.mdx.body}</MDXRenderer>
-        ) : (
-          <div>This page hasn't been translated yet</div>
-        )}
+      {children || <div>This page hasn't been translated yet</div>}
       </div>
       <h1>Context</h1>
       <pre>{JSON.stringify(pageContext, null, 2)}</pre>

starters/example-lingui/gatsby-config.js

@@ -37,9 +37,9 @@ module.exports = {
     {
       resolve: `gatsby-plugin-mdx`,
       options: {
-        defaultLayouts: {
-          default: require.resolve(`./src/components/layout.js`),
-        },
+        // defaultLayouts: {
+        //   default: require.resolve(`./src/components/layout.js`),
+        // },
       },
     },
   ],

starters/example-lingui/gatsby-node.js

@@ -11,6 +11,9 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
             frontmatter {
               slug
             }
+            internal {
+              contentFilePath
+            }
           }
         }
       }
@@ -27,7 +30,7 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
   blogPosts.forEach(({ childMdx: node }) => {
     createPage({
       path: node.frontmatter.slug,
-      component: blogTemplate,
+      component: `${blogTemplate}?__contentFilePath=${node.internal.contentFilePath}`,
       context: {
         slug: node.frontmatter.slug,
       },

starters/example-lingui/package.json

@@ -16,16 +16,16 @@
   "dependencies": {
     "@lingui/core": "^3.13.0",
     "@lingui/react": "^3.13.0",
-    "@mdx-js/mdx": "^1.6.22",
-    "@mdx-js/react": "^1.6.22",
+    "@mdx-js/mdx": "^2.1.3",
+    "@mdx-js/react": "^2.1.3",
     "gatsby": "^4.3.0",
-    "gatsby-plugin-mdx": "^3.3.0",
+    "gatsby-plugin-mdx": "^4.1.1",
     "gatsby-plugin-react-helmet": "^5.3.0",
     "gatsby-source-filesystem": "^4.3.0",
-    "gatsby-theme-i18n": "^3.0.0",
-    "gatsby-theme-i18n-lingui": "^3.0.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "gatsby-theme-i18n": "^3.1.0",
+    "gatsby-theme-i18n-lingui": "^3.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-helmet": "^6.1.0"
   },
   "devDependencies": {

starters/example-lingui/src/templates/blog-template.js

@@ -1,21 +1,18 @@
 import * as React from "react"
 import { graphql } from "gatsby"
 import { Trans } from "@lingui/macro"
-import { MDXRenderer } from "gatsby-plugin-mdx"
 import Layout from "../components/layout"
 import Seo from "../components/seo"
 
-const BlogTemplate = ({ data, pageContext }) => {
+const BlogTemplate = ({ data, pageContext, children }) => {
   return (
     <Layout>
-      <Seo title={data.mdx.frontmatter.title} />
+      <Seo title={data.mdx?.frontmatter?.title} />
       <h1>
         <Trans>Data</Trans>
       </h1>
       <div>
-        {data.mdx ? (
-          <MDXRenderer>{data.mdx.body}</MDXRenderer>
-        ) : (
+        {children || (
           <div>
             <Trans>This page hasn't been translated yet</Trans>
           </div>
@@ -32,10 +29,10 @@ const BlogTemplate = ({ data, pageContext }) => {
 export default BlogTemplate
 
 export const query = graphql`
-  query($locale: String!, $slug: String!) {
+  query{
     mdx(
-      fields: { locale: { eq: $locale } }
-      frontmatter: { slug: { eq: $slug } }
+      fields: { locale: { eq: "en" } }
+      frontmatter: { slug: { eq: "first-post" } }
     ) {
       frontmatter {
         slug

starters/example-react-i18next/gatsby-config.js

@@ -40,9 +40,9 @@ module.exports = {
     {
       resolve: `gatsby-plugin-mdx`,
       options: {
-        defaultLayouts: {
-          default: require.resolve(`./src/components/layout.js`),
-        },
+        // defaultLayouts: {
+        //   default: require.resolve(`./src/components/layout.js`),
+        // },
       },
     },
   ],

starters/example-react-i18next/gatsby-node.js

@@ -11,6 +11,9 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
             frontmatter {
               slug
             }
+            internal {
+              contentFilePath
+            }
           }
         }
       }
@@ -27,7 +30,7 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
   blogPosts.forEach(({ childMdx: node }) => {
     createPage({
       path: node.frontmatter.slug,
-      component: blogTemplate,
+      component: `${blogTemplate}?__contentFilePath=${node.internal.contentFilePath}`,
       context: {
         slug: node.frontmatter.slug,
       },

starters/example-react-i18next/package.json

@@ -12,16 +12,16 @@
     "serve": "gatsby serve"
   },
   "dependencies": {
-    "@mdx-js/mdx": "^1.6.22",
-    "@mdx-js/react": "^1.6.22",
+    "@mdx-js/mdx": "^2.1.3",
+    "@mdx-js/react": "^2.1.3",
     "gatsby": "^4.3.0",
-    "gatsby-plugin-mdx": "^3.3.0",
+    "gatsby-plugin-mdx": "^4.1.1",
     "gatsby-plugin-react-helmet": "^5.3.0",
     "gatsby-source-filesystem": "^4.3.0",
-    "gatsby-theme-i18n": "^3.0.0",
-    "gatsby-theme-i18n-react-i18next": "^3.0.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "gatsby-theme-i18n": "^3.1.0",
+    "gatsby-theme-i18n-react-i18next": "^3.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-helmet": "^6.1.0"
   }
 }