astro-react-i18next 0.1.2 → 0.2.0

package/README.md

@@ -39,14 +39,15 @@ export default defineConfig({
 
 The initialization function accepts an optional configuration object with the following options:
 
-| Option                | Type       | Description                                                                        | Default      |
-| --------------------- | ---------- | ---------------------------------------------------------------------------------- | ------------ |
-| `defaultLocale`       | `string`   | The default locale to use when no locale is specified.                             | `"en-US"`    |
-| `locales`             | `string[]` | An array of locales to support.                                                    | `["en-US"]`  |
-| `defaultNamespace`    | `string`   | The default namespace to use when no namespace is specified.                       | `"common"`   |
-| `namespaces`          | `string[]` | An array of namespaces to support.                                                 | `["common"]` |
-| `prefixDefaultLocale` | `boolean`  | Whether to prefix the default locale with the locale code.                         | `false`      |
-| `localesDir`          | `string`   | The directory where the locale files are stored, relative to the public directory. | `"locales"`  |
+| Option                | Type                                           | Description                                                                        | Default      |
+| --------------------- | ---------------------------------------------- | ---------------------------------------------------------------------------------- | ------------ |
+| `defaultLocale`       | `string`                                       | The default locale to use when no locale is specified.                             | `"en-US"`    |
+| `locales`             | `string[]`                                     | An array of locales to support.                                                    | `["en-US"]`  |
+| `defaultNamespace`    | `string`                                       | The default namespace to use when no namespace is specified.                       | `"common"`   |
+| `namespaces`          | `string[]`                                     | An array of namespaces to support.                                                 | `["common"]` |
+| `prefixDefaultLocale` | `boolean`                                      | Whether to prefix the default locale with the locale code.                         | `false`      |
+| `localesDir`          | `string`                                       | The directory where the locale files are stored, relative to the public directory. | `"locales"`  |
+| `domains`             | `{ domain: string; defaultLocale: string; }[]` | An array of domains for language selection.                                        | `[]`         |
 
 Here is an example of how to configure the integration:
 
@@ -124,15 +125,17 @@ The content of the `locales/en-US/common.json` file should look like this:
 
 ## Dynamic Routes for Locales
 
-To manage dynamic routes for each locale, create a root route named `[...locale]` in the `src` directory.
+To manage dynamic routes for each locale, create a root route named `[...locale]` in the `pages` directory.
 
 ```text
 /
 ├── public/
 ├── src/
-│   └── [...locale]/
-│       ├── ...
-│       └── index.jsx
+│   └── pages/
+│       └── [...locale]/
+│           ├── index.astro
+│           ├── page-a.astro
+│           └── page-b.astro
 └── package.json
 ```
 
@@ -187,12 +190,33 @@ The integration provides utility functions to help manage locales and translatio
 
 All utility functions are available in the `astro-react-i18next/utils` module.
 
-| Function                                           | Description                                              | Returns                                                                      |
-| -------------------------------------------------- | -------------------------------------------------------- | ---------------------------------------------------------------------------- |
-| `getLocaleConfig()`                                | Returns the locale configuration object.                 | `{ defaultLocale: string, locales: string[], prefixDefaultLocale: boolean }` |
-| `getLocalizedPathname(pathname = "", locale = "")` | Returns the localized pathname for the specified locale. | string                                                                       |
-| `buildStaticPaths()`                               | Generates static paths for each locale.                  | `{ params: { locale: string \| undefined; }; }[]`                            |
-| `changeLocale(nextLocale = "", shallow = true)`    | Changes the current locale.                              |                                                                              |
+| Function                                           | Description                                              | Returns                                                                                                                              |
+| -------------------------------------------------- | -------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
+| `getLocaleConfig()`                                | Returns the locale configuration object.                 | `{ defaultLocale: string; locales: string[]; prefixDefaultLocale: boolean; domains: { domain: string; defaultLocale: string; }[]; }` |
+| `getLocalizedPathname(pathname = "", locale = "")` | Returns the localized pathname for the specified locale. | `string`                                                                                                                             |
+| `buildStaticPaths()`                               | Generates static paths for each locale.                  | `{ params: { locale: string \| undefined; }; }[]`                                                                                    |
+| `changeLocale(nextLocale = "", shallow = true)`    | Changes the current locale.                              |                                                                                                                                      |
+
+## Developing locally
+
+Clone the repository:
+
+```bash
+git clone https://github.com/jeremyxgo/astro-react-i18next.git
+cd astro-react-i18next
+```
+
+Build the package:
+
+```bash
+npm run build
+```
+
+Install the package in your project:
+
+```bash
+npm install $(npm pack /path/to/astro-react-i18next | tail -1)
+```
 
 ## License
 

package/dist/index.d.ts

@@ -6,6 +6,10 @@ interface AstroReactI18nextOptions {
     namespaces?: string[];
     prefixDefaultLocale?: boolean;
     localesDir?: string;
+    domains?: {
+        domain: string;
+        defaultLocale: string;
+    }[];
 }
 type MergedAstroReactI18nextOptions = {
     [key in keyof AstroReactI18nextOptions]-?: AstroReactI18nextOptions[key];

package/dist/index.js

@@ -7,17 +7,14 @@ var DEFAULT_OPTIONS = {
   defaultNamespace: "common",
   namespaces: ["common"],
   prefixDefaultLocale: false,
-  localesDir: "locales"
+  localesDir: "locales",
+  domains: []
 };
 function buildI18nextInitScript({
   backendType,
   basePath,
-  options
+  mergedOptions
 }) {
-  const mergedOptions = {
-    ...DEFAULT_OPTIONS,
-    ...options
-  };
   let imports = "";
   let i18nextPlugins = "";
   let i18nextOptions = "";
@@ -26,7 +23,7 @@ function buildI18nextInitScript({
       import Backend from "i18next-fs-backend";
     `;
     i18nextOptions = `
-      initImmediate: false,
+      initAsync: false,
     `;
   }
   if (backendType === "http") {
@@ -64,13 +61,28 @@ function buildI18nextInitScript({
           escapeValue: false,
         },
         backend: {
-          loadPath: "${path.join(basePath, mergedOptions.localesDir)}/{{lng}}/{{ns}}.json",
+          loadPath: "${path.join(basePath, mergedOptions.localesDir || "")}/{{lng}}/{{ns}}.json",
         },
         astroReactI18next: ${JSON.stringify(mergedOptions)},
         ${i18nextOptions}
       });
   `;
 }
+function buildLocaleRestorationScript(mergedOptions) {
+  return `
+    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);
+    });
+  `;
+}
 function AstroReactI18nextIntegration(options) {
   const mergedOptions = {
     ...DEFAULT_OPTIONS,
@@ -85,39 +97,29 @@ function AstroReactI18nextIntegration(options) {
         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 middlewareEntrypoint = config.output === "server" ? `${INTEGRATION_NAME}/middleware/server` : `${INTEGRATION_NAME}/middleware/static`;
         const clientI18nextInitScript = buildI18nextInitScript({
           backendType: "http",
           basePath: "/",
-          options
+          mergedOptions
         });
         const serverI18nextInitScript = buildI18nextInitScript({
           backendType: "fs",
           basePath: config.publicDir.pathname,
-          options
+          mergedOptions
         });
-        const middlewareEntrypoint = config.output === "server" ? `${INTEGRATION_NAME}/middleware/server` : `${INTEGRATION_NAME}/middleware/static`;
+        const localeRestorationScript = buildLocaleRestorationScript(mergedOptions);
         addMiddleware({
           entrypoint: middlewareEntrypoint,
           order: "post"
         });
         injectScript("page-ssr", serverI18nextInitScript);
         injectScript("before-hydration", clientI18nextInitScript);
-        injectScript("before-hydration", clientLocaleRestorationScript);
         injectScript("page", clientI18nextInitScript);
-        injectScript("page", clientLocaleRestorationScript);
+        if (mergedOptions.domains.length === 0) {
+          injectScript("before-hydration", localeRestorationScript);
+          injectScript("page", localeRestorationScript);
+        }
         updateConfig({
           i18n: {
             locales: mergedOptions.locales,

package/dist/middleware-server.js

@@ -4,8 +4,13 @@ import i18n2 from "i18next";
 // src/utils.ts
 import i18n from "i18next";
 function getLocaleConfig() {
-  const { defaultLocale, locales, prefixDefaultLocale } = i18n.options.astroReactI18next;
-  return { defaultLocale, locales, prefixDefaultLocale };
+  const { defaultLocale, locales, prefixDefaultLocale, domains } = i18n.options.astroReactI18next;
+  return {
+    defaultLocale,
+    locales,
+    prefixDefaultLocale,
+    domains
+  };
 }
 function getLocalizedPathname(pathname = "", locale = "") {
   const { defaultLocale, locales, prefixDefaultLocale } = getLocaleConfig();
@@ -22,11 +27,16 @@ function getLocalizedPathname(pathname = "", locale = "") {
 
 // src/middleware-server.ts
 async function onRequest(context, next) {
-  const { defaultLocale, locales } = getLocaleConfig();
+  const { defaultLocale, locales, domains } = getLocaleConfig();
+  const localesByDomain = Object.fromEntries(
+    domains.map((domain) => [domain.domain, domain.defaultLocale])
+  );
+  const localeFromDomain = localesByDomain[context.url.host];
   const localeFromPathname = context.url.pathname.split("/")[1];
   const localeFromCookie = context.cookies.get("i18next")?.value;
   const localeFromHeader = context.preferredLocale;
   const nextLocale = [
+    localeFromDomain,
     localeFromPathname,
     localeFromCookie,
     localeFromHeader,
@@ -36,7 +46,7 @@ async function onRequest(context, next) {
   context.cookies.set("i18next", nextLocale || "", { path: "/" });
   const { hash, pathname, search } = context.url;
   const nextPathname = getLocalizedPathname(pathname, nextLocale);
-  if (nextPathname !== pathname) {
+  if (nextPathname !== pathname && domains.length === 0) {
     const nextUrl = nextPathname + search + hash;
     return context.redirect(nextUrl);
   }

package/dist/middleware-static.js

@@ -4,8 +4,13 @@ import i18n2 from "i18next";
 // src/utils.ts
 import i18n from "i18next";
 function getLocaleConfig() {
-  const { defaultLocale, locales, prefixDefaultLocale } = i18n.options.astroReactI18next;
-  return { defaultLocale, locales, prefixDefaultLocale };
+  const { defaultLocale, locales, prefixDefaultLocale, domains } = i18n.options.astroReactI18next;
+  return {
+    defaultLocale,
+    locales,
+    prefixDefaultLocale,
+    domains
+  };
 }
 
 // src/middleware-static.ts

package/dist/utils.d.ts

@@ -2,6 +2,10 @@ export declare function getLocaleConfig(): {
     defaultLocale: string;
     locales: string[];
     prefixDefaultLocale: boolean;
+    domains: {
+        domain: string;
+        defaultLocale: string;
+    }[];
 };
 export declare function getLocalizedPathname(pathname?: string, locale?: string): string;
 export declare function buildStaticPaths(): {

package/dist/utils.js

@@ -1,8 +1,13 @@
 // src/utils.ts
 import i18n from "i18next";
 function getLocaleConfig() {
-  const { defaultLocale, locales, prefixDefaultLocale } = i18n.options.astroReactI18next;
-  return { defaultLocale, locales, prefixDefaultLocale };
+  const { defaultLocale, locales, prefixDefaultLocale, domains } = i18n.options.astroReactI18next;
+  return {
+    defaultLocale,
+    locales,
+    prefixDefaultLocale,
+    domains
+  };
 }
 function getLocalizedPathname(pathname = "", locale = "") {
   const { defaultLocale, locales, prefixDefaultLocale } = getLocaleConfig();

package/package.json

@@ -1,10 +1,13 @@
 {
   "name": "astro-react-i18next",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "Integrates i18next and react-i18next seamlessly into your Astro website to provide robust i18n support for React components.",
   "keywords": [
     "astro-integration",
-    "withastro"
+    "withastro",
+    "i18n",
+    "i18next",
+    "react"
   ],
   "author": "jeremyxgo",
   "license": "MIT",
@@ -12,10 +15,11 @@
     "type": "git",
     "url": "https://github.com/jeremyxgo/astro-react-i18next.git"
   },
-  "type": "module",
   "files": [
     "dist"
   ],
+  "type": "module",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": "./dist/index.js",
     "./middleware/server": "./dist/middleware-server.js",
@@ -29,29 +33,29 @@
     "prepare": "husky"
   },
   "dependencies": {
-    "i18next": "^23.15.1",
+    "i18next": "^24.0.2",
     "i18next-browser-languagedetector": "^8.0.0",
-    "i18next-fs-backend": "^2.3.2",
-    "i18next-http-backend": "^2.6.1",
-    "react-i18next": "^15.0.2"
+    "i18next-fs-backend": "^2.6.0",
+    "i18next-http-backend": "^3.0.1",
+    "react-i18next": "^15.1.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",
+    "@types/node": "^22.10.1",
+    "@typescript-eslint/eslint-plugin": "^8.16.0",
+    "@typescript-eslint/parser": "^8.16.0",
+    "astro": "^4.16.16",
+    "astro-eslint-parser": "^1.1.0",
     "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",
+    "eslint-plugin-astro": "^1.3.1",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-react": "^7.37.2",
+    "husky": "^9.1.7",
     "lint-staged": "^15.2.10",
-    "prettier": "^3.3.3",
+    "prettier": "^3.4.1",
     "prettier-plugin-astro": "^0.14.1",
-    "typescript": "^5.5.4"
+    "typescript": "^5.7.2"
   },
   "engines": {
     "node": "^18.17.1 || ^20.3.0 || >=21.0.0"