Merge pull request #136 from microapps/feat/g4-r18

feat(gatsby): gatsby 4 and react 18

Author: stevensacks

README.md

@@ -15,6 +15,10 @@ Easily translate your Gatsby website into multiple languages.
 
 When you build multilingual sites, Google recommends using different URLs for each language version of a page rather than using cookies or browser settings to adjust the content language on the page. [(read more)](https://support.google.com/webmasters/answer/182192?hl=en&ref_topic=2370587)
 
+## :boom: Breaking change since v2.0.0
+
+As of V2.0.0, this plugin only supports Gatsby 4.16.0+ and React 18+.
+
 ## :boom: Breaking change since v1.0.0
 
 As of v1.0.0, language JSON resources should be loaded by `gatsby-source-filesystem` plugin and then fetched by GraphQL query. It enables incremental build and hot-reload as language JSON files change.
@@ -65,7 +69,9 @@ plugins: [
       languages: [`en`, `es`, `de`],
       defaultLanguage: `en`,
       // if you are using Helmet, you must include siteUrl, and make sure you add http:https
-      siteUrl: `https://example.com/`,
+      siteUrl: `https://example.com`,
+      // if you are using trailingSlash gatsby config include it here, as well (the default is 'always')
+      trailingSlash: 'always',
       // you can pass any i18next options
       i18nextOptions: {
         interpolation: {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-plugin-react-i18next",
-  "version": "1.2.3",
+  "version": "2.0.0",
   "description": "Easily translate your Gatsby website into multiple languages",
   "main": "index.js",
   "types": "index.d.ts",
@@ -48,19 +48,19 @@
   "devDependencies": {
     "@babel/cli": "^7.15.7",
     "@types/bluebird": "^3.5.36",
-    "@types/react": "^17.0.33",
+    "@types/react": "^18.0.12",
     "@types/react-helmet": "^6.1.4",
-    "babel-preset-gatsby-package": "^1.14.0",
-    "gatsby": "^3.0.0",
+    "babel-preset-gatsby-package": "^2.16.0",
+    "gatsby": "^4.16.0",
     "husky": "^4.3.8",
     "i18next": "^21.3.3",
     "prettier": "^2.4.1",
     "pretty-quick": "^3.1.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-helmet": "^6.1.0",
     "react-i18next": "^11.12.0",
-    "release-it": "^14.11.6",
+    "release-it": "^14.14.3",
     "typescript": "^4.4.4"
   },
   "dependencies": {
@@ -70,11 +70,11 @@
     "path-to-regexp": "^6.2.0"
   },
   "peerDependencies": {
-    "gatsby": "^3.x || ^4.x",
-    "i18next": "^19.x || ^20.x || ^21.x",
-    "react": "^16.x || ^17.x",
-    "react-i18next": "^11.12.0",
-    "react-helmet": "^6.1.0"
+    "gatsby": "^4.16.0",
+    "i18next": "^21.x",
+    "react": "^18.x",
+    "react-helmet": "^6.1.0",
+    "react-i18next": "^11.17.0"
   },
   "optionalDependencies": {
     "react-helmet": "^6.1.0"

src/plugin/wrapPageElement.tsx

@@ -24,13 +24,19 @@ const withI18next = (i18n: I18n, context: I18NextContext) => (children: any) =>
   );
 };
 
-const removePathPrefix = (pathname: string) => {
+const removePathPrefix = (pathname: string, stripTrailingSlash: boolean) => {
   const pathPrefix = withPrefix('/');
+  let result = pathname;
+
   if (pathname.startsWith(pathPrefix)) {
-    return pathname.replace(pathPrefix, '/');
+    result = pathname.replace(pathPrefix, '/');
+  }
+
+  if (stripTrailingSlash && result.endsWith('/')) {
+    return result.slice(0, -1);
   }
 
-  return pathname;
+  return result;
 };
 
 export const wrapPageElement = (
@@ -41,7 +47,8 @@ export const wrapPageElement = (
     generateDefaultLanguagePage = false,
     siteUrl,
     localeJsonNodeName = 'locales',
-    fallbackLanguage
+    fallbackLanguage,
+    trailingSlash
   }: PluginOptions
 ) => {
   if (!props) return;
@@ -69,8 +76,11 @@ export const wrapPageElement = (
 
       if (detected !== defaultLanguage) {
         const queryParams = search || '';
+        const stripTrailingSlash = trailingSlash === 'never';
         const newUrl = withPrefix(
-          `/${detected}${removePathPrefix(location.pathname)}${queryParams}${location.hash}`
+          `/${detected}${removePathPrefix(location.pathname, stripTrailingSlash)}${queryParams}${
+            location.hash
+          }`
         );
         // @ts-ignore
         window.___replace(newUrl);

src/types.ts

@@ -23,6 +23,7 @@ export type PluginOptions = {
   localeJsonSourceName?: string;
   localeJsonNodeName?: string;
   fallbackLanguage?: string;
+  trailingSlash?: 'always' | 'never' | 'ignore';
   verbose?: boolean;
 };