astro-react-i18next 0.1.3 → 0.3.0

package/README.md

@@ -39,14 +39,16 @@ 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.                                        | `[]`         |
+| `reservedRoutes`      | `string[]`                                     | An array of routes excluded from locale handling.                                  | `["/api"]`   |
 
 Here is an example of how to configure the integration:
 
@@ -62,8 +64,6 @@ export default defineConfig({
 +   reactI18next({
 +     defaultLocale: "en-US",
 +     locales: ["en-US", "fr-FR", "zh-TW"],
-+     defaultNamespace: "app",
-+     namespaces: ["app"],
 +   }),
   ],
 });
@@ -83,8 +83,6 @@ export default defineConfig({
     reactI18next({
       defaultLocale: "en-US",
       locales: ["en-US", "fr-FR", "zh-TW"],
-      defaultNamespace: "app",
-      namespaces: ["app"],
     }),
   ],
 + output: "server",
@@ -189,12 +187,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; }[]; reservedRoutes: 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,13 +6,18 @@ interface AstroReactI18nextOptions {
     namespaces?: string[];
     prefixDefaultLocale?: boolean;
     localesDir?: string;
+    domains?: {
+        domain: string;
+        defaultLocale: string;
+    }[];
+    reservedRoutes?: string[];
 }
 type MergedAstroReactI18nextOptions = {
     [key in keyof AstroReactI18nextOptions]-?: AstroReactI18nextOptions[key];
 };
 declare module "i18next" {
     interface InitOptions {
-        astroReactI18next: MergedAstroReactI18nextOptions;
+        astroReactI18next: Pick<MergedAstroReactI18nextOptions, "defaultLocale" | "locales" | "prefixDefaultLocale" | "domains" | "reservedRoutes">;
     }
 }
 export default function AstroReactI18nextIntegration(options?: AstroReactI18nextOptions): AstroIntegration;

package/dist/index.js

@@ -7,17 +7,15 @@ var DEFAULT_OPTIONS = {
   defaultNamespace: "common",
   namespaces: ["common"],
   prefixDefaultLocale: false,
-  localesDir: "locales"
+  localesDir: "locales",
+  domains: [],
+  reservedRoutes: ["/api"]
 };
 function buildI18nextInitScript({
   backendType,
   basePath,
-  options
+  mergedOptions
 }) {
-  const mergedOptions = {
-    ...DEFAULT_OPTIONS,
-    ...options
-  };
   let imports = "";
   let i18nextPlugins = "";
   let i18nextOptions = "";
@@ -64,13 +62,47 @@ 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)},
+        astroReactI18next: ${JSON.stringify({
+    defaultLocale: mergedOptions.defaultLocale,
+    locales: mergedOptions.locales,
+    prefixDefaultLocale: mergedOptions.prefixDefaultLocale,
+    domains: mergedOptions.domains,
+    reservedRoutes: mergedOptions.reservedRoutes
+  })},
         ${i18nextOptions}
       });
   `;
 }
+function buildLocaleRestorationScript(mergedOptions) {
+  return `
+    window.addEventListener("DOMContentLoaded", () => {
+      const defaultLocale = "${mergedOptions.defaultLocale}";
+      const locales = ${JSON.stringify(mergedOptions.locales)};
+      const reservedRoutes = ${JSON.stringify(mergedOptions.reservedRoutes)};
+      const pathname = window.location.pathname;
+
+      if (
+        reservedRoutes.some(
+          (route) =>
+            pathname === route ||
+            pathname.startsWith(route + "/"),
+        )
+      ) {
+        return;
+      }
+
+      let detectedLocale = pathname.split("/")[1];
+
+      if (!locales.includes(detectedLocale)) {
+        detectedLocale = defaultLocale;
+      }
+
+      i18n.changeLanguage(detectedLocale);
+    });
+  `;
+}
 function AstroReactI18nextIntegration(options) {
   const mergedOptions = {
     ...DEFAULT_OPTIONS,
@@ -85,39 +117,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,9 @@ import i18n2 from "i18next";
 // src/utils.ts
 import i18n from "i18next";
 function getLocaleConfig() {
-  const { defaultLocale, locales, prefixDefaultLocale } = i18n.options.astroReactI18next;
-  return { defaultLocale, locales, prefixDefaultLocale };
+  return JSON.parse(
+    JSON.stringify(i18n.options.astroReactI18next)
+  );
 }
 function getLocalizedPathname(pathname = "", locale = "") {
   const { defaultLocale, locales, prefixDefaultLocale } = getLocaleConfig();
@@ -21,12 +22,23 @@ function getLocalizedPathname(pathname = "", locale = "") {
 }
 
 // src/middleware-server.ts
+var ASTRO_RESERVED_ROUTES = ["/_astro", "/_actions", "/_server-islands"];
 async function onRequest(context, next) {
-  const { defaultLocale, locales } = getLocaleConfig();
+  const { defaultLocale, locales, domains, reservedRoutes } = getLocaleConfig();
+  if ([...ASTRO_RESERVED_ROUTES, ...reservedRoutes].some(
+    (route) => context.url.pathname === route || context.url.pathname.startsWith(route + "/")
+  )) {
+    return next();
+  }
+  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 +48,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,9 @@ import i18n2 from "i18next";
 // src/utils.ts
 import i18n from "i18next";
 function getLocaleConfig() {
-  const { defaultLocale, locales, prefixDefaultLocale } = i18n.options.astroReactI18next;
-  return { defaultLocale, locales, prefixDefaultLocale };
+  return JSON.parse(
+    JSON.stringify(i18n.options.astroReactI18next)
+  );
 }
 
 // src/middleware-static.ts

package/dist/utils.d.ts

@@ -1,8 +1,5 @@
-export declare function getLocaleConfig(): {
-    defaultLocale: string;
-    locales: string[];
-    prefixDefaultLocale: boolean;
-};
+import i18n from "i18next";
+export declare function getLocaleConfig(): typeof i18n.options.astroReactI18next;
 export declare function getLocalizedPathname(pathname?: string, locale?: string): string;
 export declare function buildStaticPaths(): {
     params: {

package/dist/utils.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astro-react-i18next",
-  "version": "0.1.3",
+  "version": "0.3.0",
   "description": "Integrates i18next and react-i18next seamlessly into your Astro website to provide robust i18n support for React components.",
   "keywords": [
     "astro-integration",