astro-react-i18next 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 jeremyxgo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1 @@
+# astro-react-i18next

package/dist/index.d.ts

@@ -0,0 +1,19 @@
+import type { AstroIntegration } from "astro";
+interface AstroReactI18nextOptions {
+    defaultLocale?: string;
+    locales?: string[];
+    defaultNamespace?: string;
+    namespaces?: string[];
+    prefixDefaultLocale?: boolean;
+    localesDir?: string;
+}
+type MergedAstroReactI18nextOptions = {
+    [key in keyof AstroReactI18nextOptions]-?: AstroReactI18nextOptions[key];
+};
+declare module "i18next" {
+    interface InitOptions {
+        astroReactI18next: MergedAstroReactI18nextOptions;
+    }
+}
+export default function AstroReactI18nextIntegration(options: AstroReactI18nextOptions): AstroIntegration;
+export {};

package/dist/index.js

@@ -0,0 +1,138 @@
+// src/index.ts
+import path from "node:path";
+var INTEGRATION_NAME = "astro-react-i18next";
+var DEFAULT_OPTIONS = {
+  defaultLocale: "en-US",
+  locales: ["en-US"],
+  defaultNamespace: "common",
+  namespaces: ["common"],
+  prefixDefaultLocale: false,
+  localesDir: "locales"
+};
+function buildI18nextInitScript({
+  backendType,
+  basePath,
+  options
+}) {
+  const mergedOptions = {
+    ...DEFAULT_OPTIONS,
+    ...options
+  };
+  let imports = "";
+  let i18nextPlugins = "";
+  let i18nextOptions = "";
+  if (backendType === "fs") {
+    imports = `
+      import Backend from "i18next-fs-backend";
+    `;
+    i18nextOptions = `
+      initImmediate: false,
+    `;
+  }
+  if (backendType === "http") {
+    imports = `
+      import Backend from "i18next-http-backend";
+      import LanguageDetector from "i18next-browser-languagedetector";
+    `;
+    i18nextPlugins = `
+      .use(LanguageDetector)
+    `;
+    i18nextOptions = `
+      detection: {
+        caches: ["cookie", "localStorage"],
+        order: ["cookie", "localStorage"],
+        lookupCookie: 'i18next',
+        lookupLocalStorage: 'i18next',
+      },
+    `;
+  }
+  return `
+    import i18n from "i18next";
+    import { initReactI18next } from "react-i18next";
+    ${imports}
+
+    i18n
+      .use(Backend)
+      .use(initReactI18next)
+      ${i18nextPlugins}
+      .init({
+        fallbackLng: "${mergedOptions.defaultLocale}",
+        supportedLngs: ${JSON.stringify(mergedOptions.locales)},
+        defaultNS: "${mergedOptions.defaultNamespace}",
+        ns: ${JSON.stringify(mergedOptions.namespaces)},
+        interpolation: {
+          escapeValue: false,
+        },
+        backend: {
+          loadPath: "${path.join(basePath, mergedOptions.localesDir)}/{{lng}}/{{ns}}.json",
+        },
+        astroReactI18next: ${JSON.stringify(mergedOptions)},
+        ${i18nextOptions}
+      });
+  `;
+}
+function AstroReactI18nextIntegration(options) {
+  const mergedOptions = {
+    ...DEFAULT_OPTIONS,
+    ...options
+  };
+  return {
+    name: INTEGRATION_NAME,
+    hooks: {
+      "astro:config:setup": ({
+        config,
+        addMiddleware,
+        injectScript,
+        updateConfig
+      }) => {
+        const clientLocaleRestorationScript = `
+          window.addEventListener("DOMContentLoaded", () => {
+            const defaultLocale = "${mergedOptions.defaultLocale}";
+            const locales = ${JSON.stringify(mergedOptions.locales)};
+            let detectedLocale = window.location.pathname.split("/")[1];
+
+            if (!locales.includes(detectedLocale)) {
+              detectedLocale = defaultLocale;
+            }
+
+            i18n.changeLanguage(detectedLocale);
+          });
+        `;
+        const clientI18nextInitScript = buildI18nextInitScript({
+          backendType: "http",
+          basePath: "/",
+          options
+        });
+        const serverI18nextInitScript = buildI18nextInitScript({
+          backendType: "fs",
+          basePath: config.publicDir.pathname,
+          options
+        });
+        const middlewareEntrypoint = config.output === "server" ? `${INTEGRATION_NAME}/middleware/server` : `${INTEGRATION_NAME}/middleware/static`;
+        addMiddleware({
+          entrypoint: middlewareEntrypoint,
+          order: "post"
+        });
+        injectScript("page-ssr", serverI18nextInitScript);
+        injectScript("before-hydration", clientI18nextInitScript);
+        injectScript("before-hydration", clientLocaleRestorationScript);
+        injectScript("page", clientI18nextInitScript);
+        injectScript("page", clientLocaleRestorationScript);
+        updateConfig({
+          i18n: {
+            locales: mergedOptions.locales,
+            defaultLocale: mergedOptions.defaultLocale,
+            routing: {
+              prefixDefaultLocale: false,
+              redirectToDefaultLocale: false,
+              fallbackType: "redirect"
+            }
+          }
+        });
+      }
+    }
+  };
+}
+export {
+  AstroReactI18nextIntegration as default
+};

package/dist/middleware-server.d.ts

@@ -0,0 +1,2 @@
+import type { APIContext, MiddlewareNext } from "astro";
+export declare function onRequest(context: APIContext, next: MiddlewareNext): Promise<Response>;

package/dist/middleware-server.js

@@ -0,0 +1,47 @@
+// src/middleware-server.ts
+import i18n2 from "i18next";
+
+// src/utils.ts
+import i18n from "i18next";
+function getLocaleConfig() {
+  const { defaultLocale, locales, prefixDefaultLocale } = i18n.options.astroReactI18next;
+  return { defaultLocale, locales, prefixDefaultLocale };
+}
+function getLocalizedPathname(pathname = "", locale = "") {
+  const { defaultLocale, locales, prefixDefaultLocale } = getLocaleConfig();
+  const localeFromPathname = pathname.split("/")[1];
+  let localizedPathname = pathname;
+  if (locales.includes(localeFromPathname)) {
+    localizedPathname = localizedPathname.replace("/" + localeFromPathname, "") || "/";
+  }
+  if (locales.includes(locale) && (locale !== defaultLocale || prefixDefaultLocale)) {
+    localizedPathname = "/" + locale + localizedPathname.replace(/^\/$/, "");
+  }
+  return localizedPathname;
+}
+
+// src/middleware-server.ts
+async function onRequest(context, next) {
+  const { defaultLocale, locales } = getLocaleConfig();
+  const localeFromPathname = context.url.pathname.split("/")[1];
+  const localeFromCookie = context.cookies.get("i18next")?.value;
+  const localeFromHeader = context.preferredLocale;
+  const nextLocale = [
+    localeFromPathname,
+    localeFromCookie,
+    localeFromHeader,
+    defaultLocale
+  ].find((locale) => locale && locales.includes(locale));
+  await i18n2.changeLanguage(nextLocale);
+  context.cookies.set("i18next", nextLocale || "", { path: "/" });
+  const { hash, origin, pathname, search } = context.url;
+  const nextPathname = getLocalizedPathname(pathname, nextLocale);
+  if (nextPathname !== pathname) {
+    const nextUrl = origin + nextPathname + search + hash;
+    return context.redirect(nextUrl);
+  }
+  return next();
+}
+export {
+  onRequest
+};

package/dist/middleware-static.d.ts

@@ -0,0 +1,2 @@
+import type { APIContext, MiddlewareNext } from "astro";
+export declare function onRequest(context: APIContext, next: MiddlewareNext): Promise<Response>;

package/dist/middleware-static.js

@@ -0,0 +1,23 @@
+// src/middleware-static.ts
+import i18n2 from "i18next";
+
+// src/utils.ts
+import i18n from "i18next";
+function getLocaleConfig() {
+  const { defaultLocale, locales, prefixDefaultLocale } = i18n.options.astroReactI18next;
+  return { defaultLocale, locales, prefixDefaultLocale };
+}
+
+// src/middleware-static.ts
+async function onRequest(context, next) {
+  const { defaultLocale, locales } = getLocaleConfig();
+  const localeFromPathname = context.url.pathname.split("/")[1];
+  const nextLocale = [localeFromPathname, defaultLocale].find(
+    (locale) => locale && locales.includes(locale)
+  );
+  await i18n2.changeLanguage(nextLocale);
+  return next();
+}
+export {
+  onRequest
+};

package/dist/utils.d.ts

@@ -0,0 +1,12 @@
+export declare function getLocaleConfig(): {
+    defaultLocale: string;
+    locales: string[];
+    prefixDefaultLocale: boolean;
+};
+export declare function getLocalizedPathname(pathname?: string, locale?: string): string;
+export declare function buildStaticPaths(): {
+    params: {
+        locale: string | undefined;
+    };
+}[];
+export declare function changeLocale(nextLocale?: string, shallow?: boolean): void;

package/dist/utils.js

@@ -0,0 +1,49 @@
+// src/utils.ts
+import i18n from "i18next";
+function getLocaleConfig() {
+  const { defaultLocale, locales, prefixDefaultLocale } = i18n.options.astroReactI18next;
+  return { defaultLocale, locales, prefixDefaultLocale };
+}
+function getLocalizedPathname(pathname = "", locale = "") {
+  const { defaultLocale, locales, prefixDefaultLocale } = getLocaleConfig();
+  const localeFromPathname = pathname.split("/")[1];
+  let localizedPathname = pathname;
+  if (locales.includes(localeFromPathname)) {
+    localizedPathname = localizedPathname.replace("/" + localeFromPathname, "") || "/";
+  }
+  if (locales.includes(locale) && (locale !== defaultLocale || prefixDefaultLocale)) {
+    localizedPathname = "/" + locale + localizedPathname.replace(/^\/$/, "");
+  }
+  return localizedPathname;
+}
+function buildStaticPaths() {
+  const { defaultLocale, locales, prefixDefaultLocale } = getLocaleConfig();
+  return locales.map((locale) => ({
+    params: {
+      locale: locale !== defaultLocale || prefixDefaultLocale ? locale : void 0
+    }
+  }));
+}
+function changeLocale(nextLocale = "", shallow = true) {
+  const { locales } = getLocaleConfig();
+  if (!locales.includes(nextLocale)) {
+    return;
+  }
+  i18n.changeLanguage(nextLocale);
+  const { hash, pathname, search } = window.location;
+  const nextPathname = getLocalizedPathname(pathname, nextLocale);
+  if (nextPathname !== pathname) {
+    const nextUrl = nextPathname + search + hash;
+    if (shallow) {
+      window.history.replaceState(null, "", nextUrl);
+    } else {
+      window.location.replace(nextUrl);
+    }
+  }
+}
+export {
+  buildStaticPaths,
+  changeLocale,
+  getLocaleConfig,
+  getLocalizedPathname
+};

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "astro-react-i18next",
+  "version": "0.1.0",
+  "description": "Integrates i18next and react-i18next seamlessly into your Astro website to provide robust i18n support for React components.",
+  "keywords": [
+    "astro-integration",
+    "withastro"
+  ],
+  "author": "jeremyxgo",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/jeremyxgo/astro-react-i18next.git"
+  },
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": "./dist/index.js",
+    "./middleware/server": "./dist/middleware-server.js",
+    "./middleware/static": "./dist/middleware-static.js",
+    "./utils": "./dist/utils.js"
+  },
+  "scripts": {
+    "format": "prettier --write \"**/*.{js,jsx,ts,tsx,mjs,astro,json,md}\"",
+    "lint": "eslint --fix --max-warnings 0 \"**/*.{js,jsx,ts,tsx,mjs,astro}\"",
+    "build": "node ./build.js && tsc",
+    "prepare": "husky"
+  },
+  "dependencies": {
+    "i18next": "^23.15.1",
+    "i18next-browser-languagedetector": "^8.0.0",
+    "i18next-fs-backend": "^2.3.2",
+    "i18next-http-backend": "^2.6.1",
+    "react-i18next": "^15.0.2"
+  },
+  "devDependencies": {
+    "@types/node": "^22.7.4",
+    "@typescript-eslint/eslint-plugin": "^8.7.0",
+    "@typescript-eslint/parser": "^8.7.0",
+    "astro": "^4.15.9",
+    "astro-eslint-parser": "^1.0.3",
+    "esbuild": "^0.24.0",
+    "eslint": "^8.57.1",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-astro": "^1.2.4",
+    "eslint-plugin-import": "^2.30.0",
+    "eslint-plugin-react": "^7.37.0",
+    "husky": "^9.1.6",
+    "lint-staged": "^15.2.10",
+    "prettier": "^3.3.3",
+    "prettier-plugin-astro": "^0.14.1",
+    "typescript": "^5.5.4"
+  },
+  "engines": {
+    "node": "^18.17.1 || ^20.3.0 || >=21.0.0"
+  }
+}