Replace i18next backend and detection with our own implementation

This reduces the gzip size of the JS bundle by 10KB

Author: sandhose

frontend/package-lock.json

@@ -35,8 +35,6 @@
     "graphql": "^16.8.1",
     "history": "^5.3.0",
     "i18next": "^23.10.1",
-    "i18next-browser-languagedetector": "^7.2.0",
-    "i18next-http-backend": "^2.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-i18next": "^14.1.0",

frontend/package.json

@@ -12,11 +12,14 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { default as i18n, InitOptions } from "i18next";
-import LanguageDetector, {
-  DetectorOptions,
-} from "i18next-browser-languagedetector";
-import I18NextHttpBackend, { HttpBackendOptions } from "i18next-http-backend";
+import {
+  default as i18n,
+  InitOptions,
+  LanguageDetectorModule,
+  BackendModule,
+  ReadCallback,
+  ResourceKey,
+} from "i18next";
 import { initReactI18next } from "react-i18next";
 
 // This generates a map of locale names to their URL (based on import.meta.url), which looks like this:
@@ -30,39 +33,71 @@ const locales = import.meta.glob<string>("../locales/*.json", {
   eager: true,
 });
 
-const getLocaleUrl = (name: string): string =>
+const getLocaleUrl = (name: string): string | undefined =>
   locales[`../locales/${name}.json`];
 
 const supportedLngs = Object.keys(locales).map(
   (url) => url.match(/\/([^/]+)\.json$/)![1],
 );
 
+// A simple language detector that reads the `lang` attribute from the HTML tag
+const LanguageDetector = {
+  type: "languageDetector",
+
+  detect(): string | undefined {
+    const htmlTag =
+      typeof document !== "undefined" ? document.documentElement : null;
+
+    if (htmlTag && typeof htmlTag.getAttribute === "function") {
+      return htmlTag.getAttribute("lang") || undefined;
+    }
+  },
+} satisfies LanguageDetectorModule;
+
+// A backend that fetches the locale files from the URLs generated by the glob above
+const Backend = {
+  type: "backend",
+  init(): void {},
+  read(language: string, _namespace: string, callback: ReadCallback): void {
+    (async function (): Promise<ResourceKey> {
+      const url = getLocaleUrl(language);
+      if (!url) {
+        throw new Error(`Locale ${language} not found`);
+      }
+
+      const response = await fetch(url, {
+        credentials: "omit",
+        headers: {
+          Accept: "application/json",
+        },
+      });
+
+      if (!response.ok) {
+        throw Error(`Failed to fetch ${url}`);
+      }
+
+      // XXX: we don't check the JSON shape here, which should be fine
+      return await response.json();
+    })().then(
+      (data) => callback(null, data),
+      (error) => callback(error, null),
+    );
+  },
+} satisfies BackendModule;
+
 i18n
-  .use(I18NextHttpBackend)
+  .use(Backend)
   .use(LanguageDetector)
   .use(initReactI18next)
   .init({
     fallbackLng: "en",
     keySeparator: ".",
     pluralSeparator: ":",
     supportedLngs,
-    detection: {
-      // This lets the backend fully decide the language to use
-      order: ["htmlTag"],
-    } satisfies DetectorOptions,
     interpolation: {
       escapeValue: false, // React has built-in XSS protections
     },
-    backend: {
-      crossDomain: true,
-      loadPath(lngs: string[], _ns: string[]): string {
-        return getLocaleUrl(lngs[0]);
-      },
-      requestOptions: {
-        credentials: "same-origin",
-      },
-    },
-  } satisfies InitOptions<HttpBackendOptions>);
+  } satisfies InitOptions);
 
 import.meta.hot?.on("locales-update", () => {
   i18n.reloadResources().then(() => {